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

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

  • 右侧视图保留:

    信息(颜色模式:RGB+标尺单位:像素+勾选文档尺寸)+字符

    图层+历史记录

    查看全部
  • 自动选择默认不勾选,需要选择某个图层时,按住“Ctrl”和鼠标左键选择

    查看全部
  • 分辨率:72

    背景内容:透明

    查看全部
  • 58cc0d8300019a6212800720.jpg

    查看全部
  • 1.编辑>首选项>增效工具>勾上启动生成器 2.文件>生成>勾上图像资源>把要到呕出图层文件(夹),重命名为xxx.png/jpg  (这个时候之前用脚本到处图层的那个文件夹就多了一个assets文件夹,还有文件了)  去了后缀的话就不导出了 3.命名如果是 200% xxx @2x.jpg 可以放大200%道出了

    查看全部
  • 利用PS的脚本快速切图: 选择 文件->脚本->将图层导出到文件,然后勾选透明区域、交错、裁切图层 可将图层一个个的切出来



    查看全部
    0 采集 收起 来源:PS精准切图

    2018-04-03

  • 1、切图与切片 2、切片的基本操作及其技巧 3、导出操作 ----------- 切图工具(C): 切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片 传统切图方式:将需要的图片一个个都切上 简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来 然后,选择切片工具,点击属性中的,基于参考线的切片,然后将一块图片中多余的切片右键删掉,需要的一块图片形成一个切片 注意:为了使参考线看起来密集,首先使用裁剪工具,将网页切为一块一块,然后再切。 ----------- 参考线的删除和隐藏: 选择移动工具后,将参考线拖动回标尺,就删除了 如果只是想临时隐藏参考线,可以点击视图菜单>显示>参考线,也可以直接按快捷键“ Ctrl + ; ” 如果所有的参考线都不想用了,可以点击视图菜单>清除参考线 ----------- 导出切片: alt+shift+ctrl+s(文件-存储为web所用格式)

    查看全部
    0 采集 收起 来源:PS传统切图

    2018-04-03

  • 得到新的圆环:Alt 直接拖动之前的圆环。
    查看全部
  • 导出SVG格式:

    1、选择对应的图层或图层文件夹

    2、选择 文件->抽出资源,然后选择SVG格式

    3、SVG是矢量图,具有自适应性

    查看全部
  • 横向参考线按住 alt 键变成纵向参考线

    隐藏\出现参考线 ctrl+;

    查看全部
  • Alt+Delete:前景色填充 Ctrl+Delete:背景色填充

    Ctrl+T自由变换,再按住shift可等比例缩放,按住alt键可以定义的变换中心点为中心变换

    查看全部
  • “修复画笔工具”和“仿制图章工具”功能类似,不同之处是前者修复完之后会与背景融合,后者则无。

    在“历史记录”面板中点击前面的小框,则定义该历史记录为“历史记录画笔”的历史。

    查看全部
  • 工具栏基本操作小技巧:

    1、选区工具:shift键添加选区、alt键减少选区、按shift键画正圆(方)、按shift+alt已当前像素点为圆心画正圆(方);

    2、裁剪工具:先建立选区再点裁剪工具,可以直接裁剪当前选区内的内容,裁剪比较精确;

    3、shift+工具快捷键,比如shift+m可以切换矩形选区工具和圆形选区工具;

    4、按住alt单击眼睛,可隐藏其他图层,按住ctrl可根据图层内容建立选区

    5、盖印图层:快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。

    查看全部
  • 网页设计需要重新定义ps界面,这样有利于工作的展开;

    1、设置移动工具:取消“自动选择”,切换选择范围“组”为“图层”,(工具栏中的快捷方式就是工具提示符后面的英文字母)

    2、自定义操作面板:仅保留“信息”、“字符”、“图层”、“历史记录”,开启“智能参考线”和“标尺”,将标尺单位设为“像素”,在“信息”面板选项里将“第一颜色”、“第二颜色”都设置为“RGB”、“鼠标坐标”设置为“像素”、勾选“文档大小”和“文档尺寸”

    3、首选项里“单位与标尺”设置单位为像素

    查看全部
  • 选框工具:shift 加 Alt 减 历史记录画笔工具:(脸部祛斑) 滤镜-高斯模糊-历史记录回到最初-使用历史记录画笔工具涂抹-斑点祛除
    查看全部

举报

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

微信扫码,参与3人拼团

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

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