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

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

  • 新建参考线的快捷键:Alt+V+E 将参考线隐藏的快捷:Ctrl+分号 ctrl+r 标尺 横向参考线按住alt变竖向 用鼠标左键从标尺拖动到图片,可以出现参考线 横向参考线按住 alt 键变成纵向参考线 删除参考线将其拖回到标尺位置即可 网页设计画布一般1920px宽 高度至少1080px 内容页一般1200px alt+v+e新建参考线
    查看全部
  • 基于参考线切片,最好把每部分裁剪出来,一部分一部分的切。导出一般用png24
    查看全部
    0 采集 收起 来源:PS传统切图

    2016-05-10

  • 切图
    查看全部
  • 【配置】配置完成后,PSD 文件所在路径会出现 对应文件名-assets 的文件夹 1、编辑--首选项--增效工具--这里对『启动生成器』打勾√ (注意,更改在下一次启动 PS 后生效) 2、文件--生成--图像资源(将其打勾√ ) 【使用】 1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾,则在assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)。 2、如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 3、如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失。 4、还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如『.jpg8』则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 · 导出为 SVG 格式 与自动切图类似,图层或图层组名称添加.svg 的后缀名即可自动导出。 1、如果导出图层不是标准矢量智能对象,则可能会出现问题,需要手动调整。 2、SVG格式文件大小很小,还可以用sublime 等编辑器对其代码进行精简或进一步优化。 【Photoshop CC 版本支持】 · 文件--抽出资源(可以导出图层为指定格式) · 图层--复制 CSS (可以将矢量图形对象复制为 CSS 代码) 1、CSS 代码会以图层名称作为 class 名称 · 图层管理 图层面板处,可以使用 名称、智能对象、颜色等进行筛选查找
    查看全部
  • alt+shift:定点圆 shift:正圆、正方形
    查看全部
  • shift加选区,Alt减选区
    查看全部
  • 单位尺寸设置
    查看全部
  • 新建设置
    查看全部
  • 尺寸:1920×1080
    查看全部
  • 移动工具、选区工具、套索工具、快速选择工具、裁剪工具
    查看全部
  • 信息面板参数设置
    查看全部
  • 新建设置
    查看全部
  • alt+shift 以一个中心画圆
    查看全部
  • 我要学
    查看全部
  • #3.1简单工具操作1# ps界面中有菜单栏、属性栏、工具栏、面板、工作区。 移动工具快捷键(v) 选框工具快捷键(m),按shift(画正圆),按alt+shirt(以中心画正圆),按shift+m为选框工具的切换。 放大快捷键ctrl++,缩小ctrl+- 快速选择工具画笔的放大缩小可以按"[""]"这两个括号来调整。 裁剪文字时,按住alt单击眼睛,隐藏背景,也就是显影模式,可以用来导出png图片! 盖印图层的概念:快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。 alt键可以确定圆心在哪里。 shift可以让圆成为正圆 小技巧 1.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 2.当使用选区工具,选中一个不规则选区时,按下裁剪工具,会围绕选区,选出一个最小的矩形 3.当按住ctrl+右键,选中一个图层时,点击裁剪工具,它会自动框住选中区域,按enter进入裁剪区,再按enter裁剪成功 4.ctrl+左键点图层缩略图,给图层加选区
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

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