前端Photoshop切图快速入门

版权声明:在保留作者及本博客链接的情况下,可以尽情转载! https://blog.csdn.net/Admin_yi/article/details/60323743

如果你是一个从没用过ps的同学,请打开软件边看边尝试。相信这样可以让你更快的熟悉切图的基本方法,自己多练习应该可以满足前端工作中遇到的切图需求啦。(坚持看完,你会有收获的,当然仅仅是入门一丢丢咯~)

PS新建文件

ctrl+n,弹出窗口,宽高一般单位都是为像素,网页的psd颜色默认是均为rgb,分辨率一般为72像素/英寸。

PS常用类


  • 工具类:移动工具,选框工具(可以查看选中区域的大小,选择目标区域),文字工具。
  • 菜单类:编辑菜单,图像菜单。
  • 图层类(核心):新建图层,复制图层,删除图层,锁定图层(开启这种锁定后,那么这个图层既无法绘制也无法移动。并且无法更改图层不透明度和图层混合模式。)

注意:选框工具不能选择形状工具,需要和一个图层(可以是空白的也可以是有内容的)合并,才能裁剪出来。

常规操作快捷键

  1. ctrl+r 切换标尺的显示和隐藏,默认是厘米为单位,右击标尺任意位置,设置为像素,以像素为单位。
  2. 按着空格+鼠标单击,可以定位到某个鼠标位置,拖动可以查看文件的细节内容。
  3. 按着alt+shfift+鼠标滚轮上下滚动,可以放大缩小当前的文件
  4. ctrl+z可以撤回一次,ctrl+alt+z可以最多撤回20次。
  5. 吸取颜色,单击前背景色色标,鼠标自动变成了吸管的样子,吸取颜色就会反应到弹 出的拾色器窗口中。
  6. 单击移动工具,工具栏中左侧,有自动选择的复选框,右侧展开有图层和组,如果选择了自动选择-图层,鼠标拖动,可以移动当前图层,同样自动选择组是可以 移动当前组。

选择图层

1、选择整张图层

  • 位图:ctrl+单击所需要切图的图层的缩略图,出现蚂蚁线就是选中了
  • 矢量图(类似形状路径):先栅格化图层,然后再ctrl+单击所需要切图的图层的缩略图,出现蚂蚁线就是选中了。
  • 如果选择了自动选择-图层,鼠标拖动,可以移动当前图层,同样自动选择组是可以移动当前组。

2、选择图层的一部分

  • 位图:先用选框工具框选需要的内容,ctrl+c,ctrl+n(背景内容选透明),ctrl+v粘贴。
  • 如果是形状路径,单击选中的只是轮廓,需要在形状路径的前面或者后面新建一个图层,然后ctrl+E合并图层。

合并图层

ctrl+E : 有需要的合并的图层,选中需要合并的图层,ctrl不连续选择图层,shift选中多个连续图层,ctrl+E合并选中图层

注意:如果图层合并后发黑或者不是合并前的正常效果,是ui设计师用了图层混合模式、或调整图层、或滤镜-渲染中的相关效果, 此时需要设计师协调。

隐藏 / 显示图层

单击想要隐藏图层左侧的眼睛图标

注意:只能单独隐藏,不能选中多个图层隐藏。

删除图层

选中需要删除的图层,ctrl不连续选择图层,shift选中多个连续图层,拖到图层底工具箱底部的删除按钮上,或者按delete删除。

保存图片

1.选择整张,右击图层直接另存为
2.选择图层的一部分,先选中图层,然后用矩形选框工具或者套索工具选择一部分,然后就有了下面两种保存方法:
1) ctrl+c,复制,ctrl+n新建,ctrl+v粘贴,ctrl+shift+alt+s另存为网页格式,起名字,保存。
2) ctrl+j复制一层,将复制的一层右击,快速导出为png或者存储为,存储为后,将复制的那一层删除掉。

到这里,作为一个前端开发者,你需要的图片就有了,至于更加精细的工作,比如美化和制作自己喜欢的图片就靠大家的尝试了。总之,ps的的世界还是非常奇妙的,等着你去探索啦。

展开阅读全文

没有更多推荐了,返回首页