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

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

  • 移动工具: commad + 点击图层:可以选择多个图进行操作

    选区工具:单选、多选、减选、重叠区。

    矩形选区按住shift变正方形、椭圆按住shift变圆。注意:先放开鼠标,再放开shift键才行。

    alt 键:以鼠标为心选取。

    shift 加选区快捷键M 扩展切换。

    放大缩小 ctrl + + -

    ctrl+D 删除所有选区

    选区、套索、魔棒

    shift+ alt 切换 选取添区、减区

    套索:多边形延鼠标画区。

    魔棒; 自动选取识别封闭内容相同区域。

    右键即可对选区操作填充等。


    裁剪工具快捷键c:裁取选中部分

    找到要导出图层区域。 选择工具 ctrl + 鼠标左键选中图层。切换到裁剪、回车自动裁剪尺寸为选中区。

    选取不规则图、单击裁剪 即可自动裁剪选中区最小包围尺寸。

     点击图层选取获取裁剪尺寸。按住alt键单击眼睛。会把其它图层隐藏。 进入显隐模式。保存png即可

    查看全部
  • 预设web 宽1920像素

    视图  显示 智能参考线 利于切图

    标尺 快捷键


    窗口:关闭库、通道、路径、颜色。切图主要需要的是图层。

    另外添加信息、字符、历史记录到面板。

    关闭面板旁的属性。

    信息:可以显示定位position、选区的宽高。

    右上角面板选项设置:颜色RGB、尺寸像素、分辨率72ppl、文档大小、文档尺寸勾选。

    编辑.首选项:单位标尺修改为像素。默认为里面。

    窗口.工作区:保存工作区。类似于预设。对当前设置保存为“web切入区“专用。



    查看全部
  • v 键拖动

    自动选择旁 图层 command +鼠标左键


    查看全部
  • 首选项的单位与标尺都改为像素

    新建工作区进行当前的设置保存。

    查看全部
    1. ctrl键加鼠标左键,点击psd的中的文字,会自动选择当前图层。

    2. 勾上视图中的标尺和显示中的智能参考线。

    3. 关闭库和颜色、通道、路径

    4. 打开信息和字符窗口工具

    查看全部
  • 新建自定义

    查看全部
  • 编辑-首选项-增效工具-启用生成器,PS将在下一次启动时生效

    文件-生成-图像资源,同一个PSD根目录下,会生成图片文件夹

    在更改图层文件名,增加后缀.png时,会在文件夹内生成png文件 

    对于苹果的retina优化,需要导出2倍图,客队文件名如下命名

    200% button @2x.jpg

    可将文件导出成两倍图,并生成文件button @2x.jpg

    若要导出其他质量的图片,可以在后缀加上对应数字,如png8,jpg8

    若要删除该图片,可以在PS图层里去除后缀

    文件-抽出资源,可以抽取选中文件及其下方图层

    复制CSS,对于非智能对象,可以选中图层-复制CSS


    查看全部
  • 隐藏参考线快捷键为ctrl + ;

    查看全部
  • 不错
    查看全部
  • 矩形选框工具:按住Shfit+画矩形会得到一个正方形 椭圆选框工具:按住Shfit+画椭圆得到一个正圆 注意:画完之后先松开鼠标再松开Shift键
    查看全部
  • 界面设置:标尺和智能参考线要选上

    查看全部
  • 扩展知识:

    https://img1.sycdn.imooc.com//5c63cdba0001de9405640301.jpg

    查看全部
  • 拓展知识:

    自动切图:

    启用生成器:编辑>首选项(快捷键:ctrl + k)>增效工具>启用生成器: true

    文件>生成>图像资源: true

    选中图层后,双击修改图层名字a为a.png,即可自动生成图片。

    查看全部
  • Ps精准切图:

    文件>导出>将图层导出到文件

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

    2019-02-13

  • 利用图层标参考线,利用参考线选择切片。

    如果图形复杂通过裁剪成块,再进行切图。

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

    2019-02-13

举报

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

微信扫码,参与3人拼团

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

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