前端切图技巧

ps面板配置注意单位都为像素

1.采用切片工具

2.采用ps脚本层到文件的方式导出

mac下面常用的快捷键:

名称 快捷键
标尺 command+r
放大 command+=
缩小 command+-
手形工具 h或者space
框选工具 m
裁剪工具 c
吸管工具 i

快捷件小技巧:

  1. 当图片放大到100%之后的时候,按住h点按触摸板可以切换放大的大小
  2. 所有左侧的工具按住shift再按对应的名字可以在备选工具中切换
  3. 框选工具下,按住shift是合并框选,按住alt是清除部分原来框选。单个框选按住shift是画正方形或者圆形,单个框选按住alt是以光标为中心画正方形或者圆形
  4. command+alt+shift+e会合并可视图层
  5. 前提是字体(其他)若单为一个图层,选择移动工具-字体被选中-裁剪工具-alt+单击眼睛(),实现显影模式的效果
  6. alt+delete前景填充,command+delete背景填充;
  7. alt可以改变参考线的方向
  8. 参考线隐藏command+; ,重新打开command+;

ps: mac下快速截图 command+shift+4 截图到桌面

原文地址:https://www.cnblogs.com/wynnzen/p/qian-duan-qie-tu-ji-qiao.html

时间: 2024-11-09 00:34:33

前端切图技巧的相关文章

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图

前端PS切图技巧(二)

之前介绍了传统的切图技巧,主要用于切多张图片的时候,但很多时候我们可能只需要切一两张图标,如果还用传统的方法就会很繁琐,所以这次分享一种导出单个图标的方法. 没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 (和之前的一样) http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法两个版本的软件都可以实现,三中的方法cc才能实现,所以建议大家下载photo

mac 如何安装photoshop cc 2017 ?作为前端切图仔如何利用它来提高我们的工作效率?

作为前端切图仔一名,或多或少要与ps打上交到,你如果是大厂的话,可能不需要,小厂也有不需要的.这里是需要自己抠图的小伙伴的干活. 如何利用ps 提高我们的工作效率: 首先我们需要安装下载 photoshop cc 2014版本以上: window 下可直接在百度软件中心下载(这里我为聪明的朋友贴上地址): http://rj.baidu.com/soft/detail/40767.html 本屌是mac,搞起来就比较费劲,通常来说也是很简单的,但是我安装时候会发生201 错误,这就比较尴尬, 找

前端切图+网页排版的注意事项和经验分享

现在在学校里面,培训机构里面都有很多课程是前端切图这一方面的,简单来说就是学习div+css网页排版.有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手.其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗?下面我说一下我自己在网页排版上面会注意的一些事情: 一.使用样式的种类和名字的规范 id和class应该如何使用 在我们使用div+css排版的时候,每一个div我们都会给他一个样

前端开发切图技巧总结

1.固定宽度切图:对于有一些宽高都一样的元素需要切出来的话,就可以使用固定宽度切图,非常方便. 2.这种方法我认为是最简便的一种方法,需要切哪个元素,直接把周围的底色去掉,一定要是透明状态,然后用刀子框选这个元素,再按一下ctrl+c复制,ctrl+n新建文件(要是透明的底色,图片大小自动生成和你要切的图的大小是一样的),最后一步就是粘贴,最后就是ctrl+shift+alt+s保存就行了,非常方便.快捷. 3.当我们在需要切一段文字的时候,比如下面这段文字,需要一个字一个字切出来,这样做的一个

前端切图的一些小技巧

昨天晚上花了1个小时把慕课网上的PS切图教程看了一遍,发现之前用的切图方式有点low,还学习到一些设置技巧,在此记录. 1.新建页面,背景内容设置为透明,自动选择不用打勾,后面的框选图层,这样按住ctrl鼠标点击就能快速找到对应图层 2.标尺和智能参考线都打上勾 3.历史记录,图层,信息,字符4个面板都打开,面板选项中鼠标坐标设置为像素,文档尺寸打勾,颜色都选为RGB 4.新建工作区,存储 5.按shift可以智能吸附 6.保存时的jpg品质60刚刚好,画质好体积又小 7.图片不是太大的时候,可

前端PS切图技巧(一)

UI给我们设计图的时候都会有一份设计原稿psd文件,有的公司可能UI会把需要的图标给切好,更多时候是需要我们自己来切的.而且,有的时候可能需要的东西UI没有切出来,你就要去是去找UI切好了再发给我们,这个过程就变得很麻烦,所以不如自己学一些切图方法  没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法

前端切图推荐方法

 个人认为切图虽然不是前端的主要工作,但掌握一些切图的技巧还是有利无害的. 切过图的小伙伴肯定对传统切图方式很反感.因为真的很麻烦,要一张一张的切. 要切的图少还好,多了简直就是噩梦,特别是当用PS提供的参考线辅助切图的时候,密密麻麻的参考线简直眼花缭乱. 后来 photoshop 2014 CC 版本开始提供了2种方法辅助切图.  第一种:打开PS以后选择文件-脚本-将图层导出到文件,然后会弹出下面界面 注:如果是 photoshop 2017 CC 版本的,选择文件-导出-将图层导出到文件