作为一名前端开发人员，掌握PS切图也很重要，这里主要介绍PS的基本知识。
一、使用PS常用的一些技巧操作
1.双击ps空白地方，可以实现菜单“文件”-“打开”命令。（同样快捷Ctrl+O，可实际此命令，不过我比较喜欢用鼠标双击）
2.同上一样。按住键盘上的Ctrl，然后双击ps空白地方，可实现“新建”文档命令。（快捷键：Ctrl+N，我喜欢使用键盘+鼠标）
3.选择图层后，直接在小键盘上输入数值可直接修改该图层透明度。（CS3特有功能）
4.打开PS后，选择菜单“窗口”-“工作区”-“默认工作区”可将ps界面还原成默认。
5.打开ps后，按D键可将前景和背景色还原成黑白。
6.记住常用快捷键，Ctrl+A（全选），Ctrl+Shift+i（反选），Ctrl+d（取消选择），Ctrl+J（复制图层）。
二、常用快捷键大全
察看图像类别
说明：：  --- Shift键  ： --- 空格键 |
*--- 在Imageready中不适用 § --- 只在Imageready中可用 |
| 动作 | 结果 |
双击工具箱：： 或Ctrl + 0 |
使图像最大限度在当前窗口中完整显示 |
双击工具箱：： 或Alt + Ctrl + 0 |
100%的显示图像 |
Ctrl + ： 或者 ： |
放大或缩小图像 |
Ctrl + ： 或者 Alt + ： |
： 或者 ： |
| ： + 在导航控制面版中输入 |
按百分比缩放图像，并保存缩放比例 * |
| Ctrl + 移动导航控制面版的预览框 | 对图像某个部分进行缩放 * |
| ： + 拖动鼠标或者导航控制面版的预览框 |
像使用hand tool一样移动图像 * |
| Page Up 或 Page Down | 向上或向下移动一屏 |
| ： + Page Up 或Page Down |
向上或向下移动是个单位 |
| Home 或者 End | 图像移动到左上角或者右下角 |
| / | 固定层遮罩开启/关闭 * |
选择移动物体类别
| 动作 | 结果 |
| 圆形工具或矩形工具 + ： + 拖动鼠标 |
在进行选择时移动选择框 |
| 任何选择工具+ ： 或者 Alt + 拖动鼠标 |
选择区域进行合集或者差集 |
| 任何选择工具 + ： + Alt + 拖动鼠标 |
选择区域进行交集 |
| ： + 拖动鼠标 |
产生正方形或者正圆选择区域 |
| Alt + 拖动鼠标 | 以起始点 为中心产生选择区域 |
| ： + Alt + 拖动鼠标 |
以起始点 为中心产生 正方形或者正圆选择区域 |
| Ctrl (除 ： 或者其他钢笔工具被使用的时候以外) |
： |
| Alt + 拖动鼠标 | ： 转换为 ： * |
| Alt + 点击鼠标 | 从 ： 转换为  ： * |
| ： + Alt + 拖动选择区域 |
移动并复制选择区域 |
Any selection +  ： ： ： ： |
移动选择区域1个像素 |
| ： + ： ： ： ： |
移动选择的图像部分1个像素 |
| Ctrl + ： ： ：： |
当前层没有被选择上任何部分时移动选择区域1个像素 |
| ： + [ 或者 ] |
增加或减少探测宽度 * |
： + Enter 或者 Esc |
确定或取消图像剪裁 |
： + Alt + 拖动鼠标到结束点 |
使用量角器 * |
| ： + 拖动网格 |
使网格与量尺对齐 |
| Alt + 拖动网格 | 固定网格方向 |
绘图类别
| 动作 | 结果 |
| 任何绘图工具 + Alt | ： |
| ：+ Alt + 点击鼠标 |
将颜色选择为背景色 |
| ： + ： |
： * |
| ：+ Alt + 点击鼠标 |
删除： * |
| 任意绘图或者编辑工具 + 数字键 (例如：0 = 100%, 1 = 10%, 快速按 4 + 5 = 45%) |
使用绘图工具时设定透明度、压感等 |
： +  ： ： |
循环使用层合并模式 |
| Alt + Backspace 或者 Ctrl + Backspace | 使用前景色或者背景色填充 |
| Alt + Ctrl + Backspace | 使用历史颜色填充 * |
| ：+ Backspace |
显示填充(edit/fill)对话框 |
| / | 锁定透明像素开启/关闭 |
| 任何绘图工具 + ： + 点击鼠标 |
连结两点为一条直线 |
编辑文字类别
| 动作 | 结果 |
| Ctrl + 选中文字后拖动文字 | 移动图像中的文字 |
： + ： + Ctrl + L, C, 或者 R |
文字向左边、中间或右边对齐 * |
： + ： + Ctrl + L, C, 或者 R |
文字向上边、中间或下边对齐 * |
| ： + ： ： ： ： 或者 ： + Ctrl + ：： |
向左/向右选择一个文字或者向上/下选择一行 |
| ： + 点击鼠标 |
选择从插入点到鼠标点的文字 |
| ： ： , ： ： 或者 Ctrl + ： ： |
向左/向右移动一个文字或者向上/下移动一行 |
| Shift + 点击鼠标 或者 点击鼠标 + 拖动鼠标 | 指定新源到已经存在的文字 |
| 双击鼠标、三击鼠标、四击鼠标或者五击鼠标 | 选择文字、行、段或者全部文字 |
| Ctrl + H | 选择文字时显示/隐藏选择高亮条 |
| ： + Ctrl + U |
使用/不使用下划线 * |
| ： + Ctrl + / |
使用/不使用中间线 * |
| ： + Ctrl + K |
使用/不使用大写英文 * |
| ： + Ctrl + H |
使用/不使用Caps * |
| ： + Ctrl + + |
使用/不使用上标 * |
| ： + Alt + Ctrl + + |
使用/不使用下标 * |
| ： + Ctrl + X |
选择100%水平比例排列 * |
| ： + Alt + Ctrl + X |
选择100%竖直比例排列 * |
| ： + Alt + Ctrl + A |
选择自动间距(leading) * |
| ： + Ctrl + Q |
选择0间距(tracking) * |
| ： + Ctrl + J |
分段 - 不包括对齐最后一行 * |
| ： + Ctrl + F |
分段 - 包括对齐最后一行 * |
| ： + Alt + Ctrl + H |
使用/不使用连字符号连接 * |
| ： + Alt + Ctrl + T |
使用单行/多行编辑器 * |
| ： + Ctrl + < > |
选择文字大小增加/减少2pts./px. |
| Alt + ： ： |
选择文字间距增加/减少2pts./px. |
| ： + Alt + ： ： |
选择文字底线增加/减少2pts./px. |
| Alt + ： ： |
选择文字行距增加/减少20/1000ems |
编辑路径类别
| 动作 | 结果 |
： + ： + 点击鼠标 |
选择多个锚点 |
| ： + Alt + 点击鼠标 |
选择路径 |
： + Alt + Ctrl + 拖动鼠标 |
复制路径 |
| Ctrl | 从 ： ：  ：  转换为： |
| Alt | 当经过路径时将 ： 转换为 ： |
| Alt + Ctrl | 当点是锚点或者方向点时将 ： 转换为 ： |
| Alt | 经过锚点或者方向点时将 ： 或者 ： 转换为 ： |
： + 双击鼠标 |
关闭路径 |
| ： + Alt + 双击鼠标 |
以一段直线关闭路径 |
切图和优化图像类别
| 动作 | 结果 |
| ： + Ctrl + Y |
使用图像察看优化图像 |
| Alt + Ctrl + Y | 使用gamma预览图像 |
| Ctrl + Y | 使用优化图像/2up/4up/原图像窗口 |
| Ctrl | 使用切图工具/分割选择区域工具 |
| ： + 拖动鼠标 |
分割正方形区域 |
| Alt + 拖动鼠标 | 从中心向四周选择分割区域 |
| Alt + ： + 拖动鼠标 |
从中心向四周选择正方形分割区域 |
| ： + 拖动鼠标 |
创建切割区域时改变切割位置 |
| 进行切图时按住Ctrl | 对齐切割区域 |
| 鼠标右键切割 | 打开敏感文字菜单 |
三、图像局部截取和图像尺寸调整
做网页设计时经常要用到的某张图像一部分，这就需要截取图像的局部。图像局部截取的方法很多，但使用Photoshop操作起来更方便。具体操作步骤如下：
（1）在Photoshop中打开原始图像；
（2）在工具栏中选择相应的选区工具，如矩形选框工具或椭圆选框工具，在图像上需要截取的局部建立选区。为了截取更精确，通常在选择选区工具以后，在工具选项栏中“样式”里设定选区的尺寸，如“固定大小”，并设定宽度和高度值，这样单击图像就可以建立固定尺寸的选区；
（3）建立好选区后，可以将鼠标按住选区内部拖拽移动选区位置，使截取的内容符合需要；
（4）单击菜单“编辑-拷贝”或者我们熟悉Ctrl+C复制选区内容；
（5）单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布，此时画布的尺寸默认就是选区的尺寸，单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中；
（6）在新文件图像中根据需要进一步操作，如添加文字等，最后将新文件保存。
注：图像尺寸的调整也是网页设计中的常用操作，网页中的图像文件大小在保证清晰度的情况下应该尽量小，不然会影响网页打开速度，所以页面中用到的图像都有调整到相应尺寸。在Photoshop中打开图像，单击“图像-图像大小”菜单或者Ctrl+Alt+I进行尺寸修改，调整完后保存即可。
四、透明背景图像的制作
有些图像放在网页中需要背景透明才能达到效果，比如在已有背景色的区域放置一个图像，这个图像只有背景透明才能融合在区域中。在Photoshop中制作透明背景图像可以通过以下步骤来操作：
（1）在Photoshop中打开原图像，使用选取工具将需要保留的图像部分选中，如果原图像背景色单一，可以使用魔棒工具很方便地选取背景色，然后单击菜单“选择-反向”反向选中需要保留的部分；
（2）单击菜单“编辑-拷贝”或按下快捷键Ctrl+C复制选区内容，单击菜单“文件-新建”或按下快捷键Ctrl+N新建画布，注意新建画布的“背景内容”项选择“透明”；
（3）单击菜单“编辑-粘贴”或按下快捷键Ctrl+V将选区内容粘贴到新画布中；
（4）按下快捷键Ctrl+T适当调整粘贴内容的尺寸，调整完后按回车键，还可以使用移动工具调整内容的位置；
（5）单击菜单“文件-存储”或按下快捷键Ctrl+S保存为gif或png格式文件。
五、图像融合
图像融合是指将两张或更多的图像合成一张图像，这个操作在网页设计中也经常用到，比如给网页做个banner图像或背景图像等，下面以两张相同高度图像拼接融合为例来说明操作过程，基本步骤如下：
（1）在Photoshop中打开第一张图像，然后使用移动工具将第二张图像拖进来并调整到合适的摆放位置；
（2）如果两张图像的色调不太一致，可以对色相、饱和度等属性进行调整；
（3）选择第二张图像所在图层，建立蒙版，选择渐变工具从两张图像的结合处拖拽形成黑白渐变，再适当调整不透明度。
六、图像倒影和阴影制作
图像倒影效果在网页中也很常见，倒影不仅增强图像的立体感觉，也使得图像表现力更强。倒影效果一般分为平面倒影和立体倒影，平面倒影的制作可以通过以下步骤实现：
（1）在Photoshop中将需要做倒影的素材导入文档，按下快捷键Ctrl+J复制该图层；
（2）单击菜单“编辑-变换-垂直翻转”将翻转的图层拖至原始图层的下方；
（3）为翻转的图层添加图层蒙版，选中渐变工具并选择线性渐变，在图层蒙版上拖出渐变就产生了倒影效果。
阴影效果也是常用的图像效果，具体实现步骤如下：
（i）把需要做阴影效果的图层复制并建立选区，填充为黑色；
（ii）按下快捷键Ctrl+T并右键单击鼠标选择“扭曲”，拖动鼠标调整阴影的形状和大小；
（iii）减少阴影图层的透明度，然后单击菜单“滤镜-模糊-高斯模糊”，再把阴影图层放置在原图层的下面。
七、特殊字体的使用
文字是图像处理中频繁使用的元素，网页设计中的图像上通常都需要添加一些文字内容，如广告宣传语、导航文字等。文字的添加可以使用Photoshop的文字工具来完成，通常图像上的文字都采用特殊字体，而计算机中默认情况下却都不具备这些字体，这就需要我们去网上下载所需字体并安装在计算机中才能使用。举例说明，比如我们要在图像上添加一种“方正粗倩简体”的文字，很明显，计算机中默认没有该字体，我们必须进行以下步骤操作：
（1）从网上下载“方正粗倩简体”字体。可以在百度中搜索“字体下载”关键字，很多网站都提供字体下载；
（2）安装字体。下载的字体通常是一个.ttf格式的文件，直接复制该文件，打开C:WindowsFonts文件夹并进行粘贴，这样就完成了字体安装；
（3）重启Photoshop软件，可以看到字体列表中就有了新安装的字体，当然，计算机中的其他软件都可以使用这种字体。当然如果你有能力的话也可以自己设计字体，但是对一些初中级的学生来说，下载是最好的办法了，省去了很多时间，你懂的！
八、绘制网站LOGO
网站标志或称LOGO，它是一个网站的名片，是能够体现网站形象的一个重要元素。一个好的网站LOGO能够体现出网站的内涵并能传递给浏览者一些关于网站的理念信息。一般来说，网站LOGO的设计是很重要的，它不仅要契合网站同时也要独具个性，能吸引网站浏览者。网站LOGO可以采用Photoshop软件进行绘制，具体可以采用以下步骤：
（1）新建画布，使用钢笔工具大致勾画出LOGO轮廓路径；
（2）选择“转换点工具”，将某些直线路径转换为曲线并调整相应的弧度；
（3）选择“直接选择工具”，根据需要移动一些锚点的位置，通过曲线弧度调整逐步达到设计效果；
（4）按下快捷键Ctrl+Enter，将路径转换为选区，然后对选区进行填充；
（5）根据需要添加文字等内容并保存文档。
九、网页绘制和切图
Dreamweaver等网页设计软件在图像处理方面的功能很弱，只使用该软件进行网页设计会给网页美观带来局限性，所以通常先采用图像处理软件绘制网页效果图，然后采用切图等手段转换为网页。绘制网页的工具很多，Photoshop是一个很不错的选择，方法如下：
（1）首先新建一个画布，在当前普遍1024*768以上分辨率的情况下，画布的宽度设为1002像素以内就能保证用户打开网页时不会出现水平滚动条，画布高度根据网页实际内容需要设定，接下来在新建的画布上绘制网页的界面，网页各个部分采用分层和分组，便于修改。
（2）网页绘制好后，需要利用切片工具和切片选择工具对图像进行分割，切割图像的原因是在浏览器中，一组小幅图像比单个大幅图像下载起来要快速得多，而且也便于网页在Dreamweaver软件中编辑。网页切片时一般要借助辅助线作为参考以确保切图的精确程度，网页中输入的文字部分在切图时可以先隐藏。
（3）单击菜单“文件-存储为Web和设备所用格式”来保存文件，Photoshop会自动生成一个名为images的文件夹用于存放所有图片。
十、各式线条的使用
线条在网页设计中是不可或缺的元素，线条应用得当会使网页布局清晰、层次分明，比如曲线增强网页的灵活性和流动性，具有时尚感、飘逸感，而直线的应用则使网页显得简洁、大方和严谨，不同线条的使用会起到意想不到的效果。一般来说，网页设计中经常用到直线、曲线、虚线和立体分割线等，下面我们简单介绍一下：
（1）直线
在Photoshop中绘制直线一般有两种方法，一种是使用画笔工具或铅笔工具，根据直线粗细需要设置好主直径，按住鼠标进行绘制，如果要绘制水平或垂直直线，需要按住Shift键然后绘制。
（2）曲线
Photoshop中绘制曲线一般会用到钢笔工具、转换点工具和直接选择工具等，先用钢笔工具画出大致路径，再用转换点工具将直线变为曲线并调整弧度，如果锚点的位置需要移动，则再使用直接选择工具移动，最后得到满意的曲线。
（3）虚线
绘制虚线一般使用画笔工具或铅笔工具，根据要绘制的虚线的粗细选择画笔的主直径，然后设置画笔属性面板中的“间距”值，这样就可以绘制出虚线，如果要绘制水平或垂直虚线还可以在绘制时按住Shift键。
（4）立体分割线
优秀的网站设计在细节方面的处理都是照顾十分周全的，立体分割线看起来有一种凹进去的感觉，形成一种很好的分隔的感觉。立体分割线其实是由两条粗细均为1px的直线组成的，首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，两条线并列排在一起，形成立体凹陷的感觉。
十一、背景图片制作
在制作网页的时候，经常需要给网页设置背景图片。除了可以到网上下载背景图片外，利用Photoshop强大的功能也同样可以制作出自己喜爱的背景图案。自制的背景图像种类很多，这里以制作一种无缝图案背景为例来说明：
具体操作步骤如下：
（1）打开Photoshop，新建宽160、高120，背景为白色，分辨率为72像素/英寸的空白文档；
（2）在工具箱中选择自定义形状工具并找到图1中所示的形状，在画布中间绘制出该形状，绘制时可按住Shift键保持同宽高比例，然后将绘制的形状放在文档的正中间；
（3）复制形状图层，对复制的图层执行菜单“滤镜-其他-位移”命令，完成图案的位移操作。位移的“水平”和“垂直”参数值是根据图像尺寸来设置的，一般为图像“宽度”和“高度”值的一半，本例“水平”设置为80，垂直设置为60。设置完后图像如图2所示；
（4）执行菜单“文件-存储”命令，将文件存储为GIF格式的图像。打开Dreamweaver软件，将该图像以背景图片平铺在网页中，可以看到网页背景的效果。
十二、按钮制作
按钮是网页设计中常用的元素，经常用在导航、跳转等链接位置。设计精美的按钮能让网站浏览者眼前一亮，目前网页中常用的按钮一般都带有一些立体、渐变效果，这类按钮可以大致通过以下几步来实现：
（1）在Photoshop中新建画布，绘制一个圆角矩形；
（2）双击该圆角矩形图层面板，打开图层属性窗口，单击勾选左侧“斜面和浮雕”选项，并在右侧设置相应的属性值；
（3）单击勾选左侧“渐变叠加”选项，在右侧设置渐变颜色及其他属性值；
（4）单击勾选左侧“描边”选项，在右侧设置描边颜色、粗细、位置、不透明度等属性值；
（5）选择文字工具，在按钮上添加文字并设定文字样式等。通过这些设置能做出满足一般需求的立体渐变效果按钮，更多的效果可以在图层属性里面继续设置，如内阴影、外发光等。
另外，网页中有些按钮当鼠标放上去时换成另外一个按钮，两个按钮大小一致，区别就在颜色或文字颜色上。其实第二个按钮的制作很简单，只要把第一个按钮的图层复制，修改背景色或文字颜色即可。