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

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

  • photoshop CC版本自动切图

    SVG格式导出!!文件-抽出资源

    复制CSS!!图层-复制CSS

    查看全部
  • 扩展:

    编辑-首选项-增效工具-启用生成器打上勾

    文件-生成-图像资源勾上

    就会出现相应的assert文件夹

    直接在图层上重命名加上后缀,即可出现相应的类型图片在assert文件夹里

    查看全部
  • 精准切图:文件-脚本-将图层导出到文件

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

    2018-12-24

  • 传统切图:运用参考系,切片工具,最后存为WEB所用格式

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

    2018-12-24

  • 按住ALT键,识别菜单栏

    ctrl+分号,取消参考线


    查看全部
  • 制作web切图工作区
    查看全部
  • 信息面板设置

    查看全部
  • 选择选区之后,

    右键,填充,内容识别(或者按删除键)即可扣掉

    Ctrl+J,扣出选区并新建图层

    简单工具操作:

    1、移动工具V

    按住Ctrl键,同时选择两个图层,则会出现居中对齐等新的属性。

    2、选区工具M

    操作前要选择相应的图层!!

    属性二,可画多个选区,可重叠(按住Shift键自动可以增加选区)

    属性三,可以减去选区(按住ALT也可以减去)

    属性四,可在原选区中框选

    按住shift,可以划出正方形和圆形,要先放开鼠标,再放开shift

    按住Alt定住圆心,同时按住Shift即可画出圆

    3、套索工具L(选区的另一种)

    (1)Ctrl+/-进行放大缩小

    按住ctrl键可以变成小手进去拖动

    按住shift,选择多个选区

    按住ctrl,切割掉多余的选区

    (2)多边形套索工具

    最后双击,即可形成封闭选区

    (3)磁性套索工具

    会根据颜色做一定的判断

    尖锐的地方可以配合,多边形套索工具+Shift进行补充

    4、快速选择工具W

    有添加和删减,调整工具大小的属性

    5、裁剪工具

    小技巧1:

    在选择图层后(在相应图层小图标上,CTRL+单击,此图层就可以变成选区),单击裁剪工具,按ENTER键即可

    小技巧2:

    画出一个不规则选区,点击裁剪,则会裁剪出能包围此选区的最小矩形框。

    6、取色器

















    查看全部
  • 移动工具:

    按V,自动回到移动工具

    获取想要图层:

    1、勾上自动选择,图层

    2、图层,按住Ctrl+单击鼠标左键

    信息面板设置:

    颜色都设为RGB,单位都设为像素,勾上文档尺寸

    信息面板:

    选择图层,按住CTRL+加点击图层小图标,即可选中选区

    Ctrl+D取消选区


    查看全部
  • ctrl+;隐藏参考线,再按则显示参考线

    查看全部
  • 五个月前学的,现在忘的差不多了,多练才是正道。
    查看全部
  • 窗口-工作区-新建工作区:可以在该工作区内对该面板设置界面
    查看全部
  • 大纲阿5555

    查看全部
  • ps学习第四课:

    椭圆工具,按住shift键,去到另外一个图层取色,前景色填充,点击图片,右键选择“变换选区”,按住alt键和shift键,同心圆等比缩小放大,选择里面蓝色,按住delete键,删除蓝色,选择移动工具,按住shift键,统一缩小放大

    复制图层,移动工具,按住alt键复制图层

    按住复制出来的图层,control单击,会出现选中图层

    多个图层,要在移动目标对应图层移动

    多个图层整体移动,按住contrl键可单选/选第一个,按住shift键,选最后一个,全选,整体移动。

    裁剪工具,alt中央,中心调整

    选住蓝色图层,选区工具,然后将黄色部分去掉




    查看全部
  • 切图设置:

    1、选择工具、 勾选 自动选框 可以快速找到图层 。按住 CTRL 键。找到自己想要的图层或是组。

    2、视图设置:标尺

         窗口:只是需要 图层、历史记录、信息(打开面板设置;标尺单位为像素、颜色为 RGB)、字符中间(段落是不需要的)

    编辑>>首选项>>单位与标尺   文字和单位全部改为 像素

    完成自己的常规设置后 保存当前见面 窗口  工作区 保存



    查看全部

举报

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

微信扫码,参与3人拼团

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

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