前端Photoshop切图快速入门

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

PS新建文件

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

PS常用类

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

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

常规操作快捷键

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

选择图层

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的的世界还是非常奇妙的，等着你去探索啦。

前端Photoshop切图快速入门相关推荐

前端photoshop 切图神器cutterman
1. 切图真的是就件很费力的事情,接下有给大家提供一个工具,本人觉得还不错 http://www.cutterman.cn/ 请参考这个网站,安装方法也有,很简单,我就不说了,赶紧点连接去注册帐号吧 ...
ps怎样导出dw的html,Photoshop切图怎么导入dreamweaver？
回答: PS自带有切片工具,不过用起来比较麻烦,如果是交付UI设计稿,可以用摹客这样的免费在线切图工具,可以自动生成不同尺寸不同分辨率的切图,也支持切换不同的平台,对于设计师来说比较省时省力. 以下介 ...
如何用photoshop切图并去掉图片上面的文字
公司没有美工,最近一个页面要做样式,只有自己上了,从来没做过,这下可就头大了.去网上查了一下,再加上问了一些人,现在总结一下. 一.如何用photoshop切图. ps里面有一个切片工具(slice ...
【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇插件 | 使用插件进行切图 )
文章目录一. PhotoShop 切图插件 - Cutterman 1.下载 Cutterman 插件 2.安装 Cutterman 插件 3.启动 Cutterman 插件 4.注册 Cutter ...
前端1页面制作1——Photoshop切图
目录一.界面设置 1.新建(Ctrl+N) 2.面板 3.其它二.基本操作 1.常用工具 2.测量.取色 3.切图 4.保存 5.修改与维护 6.图片的优化与合 ...
Photoshop切图学习
前端开发中,之前都是Designer给我们切好图,给出readline,所以我们前端工程师基本不自己动手切图,现在换了新的公司,需要我们自己手动切一些图.Designer制作好的psd的图片如下: 自 ...
前端 ~ PS切图工具
*** 工具准备 *** 1.PS(photoshop) [注意]:安装时,需要先选择"试用",之后通过注册机进行注册,直接重新打开ps应用即可(应该会无需登录) 2.更改:缓存盘 ...
photoshop切图
1.传统切图 (1)打开一个psd文件,选择ps左边菜单栏的裁剪工具,选择切片工具.首先我们对这个psd文件进行分析,有意识的将其划分成几个选区,然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来 ...
Photoshop——切图小技巧
准备工作把Photoshop功能面板设置成我们前端常用的并保存下来,这样就不用我们每次使用的时候都要花时间再去设置一次了. 1.设置标尺单位 --CSS里面用的最多的单位是像素(px),测量和读取的 ...