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

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

  • 在图层/组上右键->复制为CSS
    查看全部
  • (接上条)其他类型导出:

        -    将图层/组重命名为.jpg、.png

        -    retina导出:重命名为200% xxx @2x.jpg

    查看全部
  • 图片自动导出生成:

        1,编辑->首选项->增效工具->勾选启用生成器

        2,文件->生成->勾选图像资源

        3,随后重命名图层/组为xxx.png名称,将会自动生成相应图片到文件夹中


    另外,还可以重命名为.jpg,或者如果导出为retina图可重命名为200% xxx @2x.jpg
    查看全部
  • 新建:文件->新建->Web(像素1920*2000,背景透明)

    设置:视图->勾选标尺,视图->显示->勾选智能参考线,编辑->首选项->单位与标尺->单位改为像素

    切图四大面板窗口(右侧):信息、字符,图层、历史记录

    保存工作区:窗口->工作区->新建工作区

    查看全部
  • 复制CSS:

    图层-复制css

    查看全部
  • CC自动切图设置:

    1. 编辑-首选项-增效工具-生成器(勾选)

    2. 文件-生成-图片资源

    3. 把要到抠出的图层文件(夹),重命名为xxx.png/jpg  (这个时候之前用脚本到处图层的那个文件夹就多了一个assets文件夹,还有文件了)  去了后缀的话就不导出了

    4. 命名如果是 200% xxx @2x.jpg 可以放大200%来进行导出图片

    查看全部
  • 利用PS的脚本快速切图: 

    选择 文件->脚本->将图层导出到文件,然后勾选透明区域、交错、裁切图层 可将图层一个个的切出来

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

    2018-05-13

  • 1、切图与切片 

    2、切片的基本操作及其技巧 

    3、导出操作 

    ----------- 切图工具: 

    切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片 

    传统切图方式:将需要的图片一个个都切上 

    简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来 然后,选择切片工具,点击属性中的,基于参考线的切片,然后将一块图片中多余的切片右键删掉,需要的一块图片形成一个切片 

    注意:为了使参考线看起来密集,首先使用裁剪工具,将网页切为一块一块,然后再切。 

    ----------- 参考线的删除和隐藏:

     选择移动工具后,将参考线拖动回标尺,就删除了 如果只是想临时隐藏参考线,可以点击视图菜单>显示>参考线,也可以直接按快捷键“ Ctrl + ; ”

     如果所有的参考线都不想用了,可以点击视图菜单>清除参考线 ----------- 导出切片: alt+shift+ctrl+s(文件-存储为web所用格式)

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

    2018-05-13

  • Alt+V+E:新建参考线

    Ctrl+; 关闭/开启参考线显示;

    查看全部
  • 先进行选区,再进行裁剪工具,可对应选择选区范围的最小一块裁剪方形区域;

    查看全部
  • 快捷键:

    M:选择选区键;

    按住shift按M:切换拓展功能;

    按住shift画第二个选区:相加;

    按住alt键画第二个选区:相减;

    查看全部
  • 按住shift:画正圆或画正方形;

    按住alt:固定中心;

    查看全部
  • 三原色:红,绿,蓝三种颜色光,可以生成各种色光。

    三基色:红,黄,蓝,颜色的三种基本色彩。

    查看全部
  • shift: 画圆或者正方形

    alt: 固定中心

    查看全部
  • 界面设置

    6、可以把当前的所有设置保存至一个新的工作区,这样即使以后恢复重置,也无需重新设置;

    查看全部

举报

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

微信扫码,参与3人拼团

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

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