为了账号安全,请及时绑定邮箱和手机立即绑定

前端工程师必备的PS技能——切图篇

  • 四大面板需要调出来:信息、字符、图层、历史记录。且信息里的颜色都调成RGB,鼠标坐标为像素,勾选文档尺寸
    查看全部
  • 显示—》智能参考线 标尺
    查看全部
  • 在windows系统,设置图层选取,在移动箭头下,按住CTRL键点击需要选取的图层,点击左键即可移动到其他图层
    查看全部
  • 网页分辨率一般72
    查看全部
  • 窗口->新建工作区将之前设置的保存下来
    查看全部
  • 窗口设置右边显示的内容 1.信息 2.字符 3.图层 4 历史记录 点击信息面板控制选项将第一颜色第二颜色改为RGB颜色,标尺单位调为像素,并勾选文档尺寸 编辑->首选项->单位与标尺 将单位调为像素
    查看全部
  • 自动切图: 【配置】配置完成后,PSD 文件所在路径会出现 对应文件名-assets 的文件夹 1、编辑--首选项--增效工具--这里对『启动生成器』打勾√ (注意,更改在下一次启动 PS 后生效) 2、文件--生成--图像资源(将其打勾√ ) 【使用】 1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾,则在assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)。 2、Retina优化: 如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 3、如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失。 4、还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如『.jpg8』则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 5、SVG生成:改后缀名可自动生成SVG 6、SVG导出:选中资源-文件-抽出资源,抽出SVG图片 7、复制CSS:选中资源-图层-复制CSS 8、图层管理:图层下方可选择类型,进行图层筛选
    查看全部
  • 传统切图: 用切片工具切出所需要的部分 拉出参考线,基于参考线切图(自己可删除不需要的切片部分) 先裁剪出所需部分的位于的区域再进行切图,这样参考线就不会影响别的区域,事半功部
    查看全部
    0 采集 收起 来源:PS传统切图

    2016-05-13

  • 删除选区快捷键 ctrl+d; 对于选区shift是加,alt是减
    查看全部
  • alt+选取:定位圆心;shift+选取:正方形/正圆;
    查看全部
  • photoshop界面设置: 1.新建预设:大小1920宽,单位像素,分辨率72,背景色透明; 2.移动设置:移动快捷键V,对于打开的psd图,设置左上角自动选择,图层,可以用鼠标直接移动psd图上的任意图层;不过建议平时不要自动选择,Ctrl+鼠标点击psd图上的任意图层,将会在图层面板自动选中该图层。 3.视图设置:视图中勾选智能参考线,标尺;窗口打开中信息,字符,历史记录和图层,其他可以关闭;信息的右上角面板选项中该单位为像素,颜色为RGB;ctrl+单击图层,可以选中psd图中的图层,它的信息将在信息和字符面板中显示。 最后,对以上设置的保存,窗口→工作区→新建工作区并命名。
    查看全部
  • 盖印图层之前要新建一个空白图层,主要目的是把图层合并到空白图层上。盖印后再进行编辑操作不影响以前做过的图层,关闭盖印图层可以修改以前的图层。 方法:选中最高一层,按键盘上的ctrl+shift+alt+E键,这样就会在最上面出现一个合并所开眼睛的图层了,而下面的所有的图层不会合并或者被删除。
    查看全部
  • 盖印图层的概念,快捷键Ctrl + Alt + Shift + E。
    查看全部
  • 删除选区--ctrl+d
    查看全部
  • alt+shift --画圆心定住的的圆
    查看全部

举报

0/150
提交
取消
课程须知
本课程适合对Photoshop有简单了解,希望学习前端开发切图方法的用户。
老师告诉你能学到什么?
使用Photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源,并进行简单的调整和处理。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!