前端之photoshop的简单使用

常用图片格式

图片是网页制作中很重要的素材，图片有不同的格式，每种格式都有自己的特性，了解这些特效，可以方便我们在制作网页时选取适合的图片格式.

图片格式及特性如下：

1.psd 
psd是photoshop的专用格式，UI设计师使用photoshop设计效果图，最后会将psd格式的效果图交付给前端工程师，这种格式是不压缩的，而且保留了图层、透明和半透明等图片信息，所以这种图片格式的容量相对来说是很大的，前端工程师使用这种格式的效果图来切图制作网页，但是网页中不会使用这个格式的图片，它的作用一是保存图片的原始数据，二是方便图片的修改。

2.jpg 
jpg是一种有损压缩格式，压缩效率高，容量相对来说最小，网络传输速度快，它不能存为透明背景，在网页中应用最广，一般在不需要透明背景的时候就使用这种图片。

3.gif 
gif是一种无损压缩格式的图片，最多只有256种颜色，颜色丰富的图片转化为这种格式会颜色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的图像，如果边缘轮廓是曲线的，会产生锯齿，它还可以保存为动画格式。

4.png 
png的目的是为了代替gif图片，无损压缩，背景可以是透明或者半透明的，透明图像边缘光滑，没有锯齿，网页中需要透明或者半透明背景的图片，首选是png图片。png也是firework的专用格式，也可以包含图层信息。firework是另外一款可以和photoshop相比的图像处理软件。也有少量的UI设计师使用这种软件来设计网页效果图，他们设计的效果图就是带图层的png格式的，碰到这种设计师，如果我们习惯了photoshop切图，可以将带图层的png效果图转化成psd图片再处理。

5.webp 
它是由谷歌于2010年推出的新一代图片格式，在压缩方面比当前jpg格式更优越，在质量相同的情况下，WebP格式图像的体积要比jpg格式图像小40%，不过这种图片还没有得到广泛的浏览器支持，仅在Chrome和Opera上支持，在其他浏览器上需要安装插件才可以显示，目前还没有大规模使用。

位图和矢量图 
位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大时，图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个倍数，图像可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿。

svg 
svg是一种矢量二维图形格式，它是基于xml标记语言描述的，可以通过任何文本编辑器创建。它的优点是文件容量小，放大不失真，而且背景也可以是透明的。目前大量使用这种格式来制作网页图标或者网页地图，由于它是矢量的，所以在不同终端屏幕上(pc、手机)都有很好的显示效果。

flash 
flash是一种矢量动画文件格式，曾经在网络上风靡一时，如今已逐渐退出历史舞台，原因是它的技术更新跟不上发展，这种格式既可以是静态的图形，还可以是多媒体动画，还可以加入用户交互和数据，这是它曾经很流行的原因，这种格式名为swf，flash是对它的统称。这种格式在网页中已经很少使用了，它的很多优秀特性，可以用HTML5取代。swf文件中衍生出一种视频格式flv，它是一种流媒体视频格式，由于它有文件容量小，可以边下载，边观看等优点，目前广泛应用在视频网站中。

总结 
在网页制作中，如何选择合适的图片格式呢？
1、网页制作中，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；
2、制作网页图标时候，如果图标含多种颜色，可以使用gif或png图片；如果图标是单色，而且要求有很好的显示效果，可以使用svg；如果是动画图标，可以使用gif。

photoshop常用图片处理技巧

photoshop是一款优秀的图像处理软件，作为前端开发工程师，掌握它的一些常用功能是必须的。photoshop的常用功能有：选择、裁剪图像、修图、取色、插入文字等等。除了这些常用功能，前端还需要掌握制作新图像、切图等技巧。本次讲解的photoshop版本为cs6。

图片格式转换与压缩 
1、文件/存储为（不推荐）选择图片类型以及压缩比；
2、文件/存储为web所用格式（推荐） 选择图片类型以及压缩比；

图像放缩，平移 
1、放缩工具 图像放大缩小，在图像上点击放大，按住alt键点击缩小，快捷键Ctrl+“+”放大 Ctrl+“-”缩小，双击此工具可以让图像按照原始大小显示。

2、平移工具 对图像进行移动，在使用其他工具时，按住空格键盘的空格键，可以切换到此工具，移动完后松开空格键回到原来的工具。双击此工具可以让图像放缩到显示区域完全显示。

新建图像 
执行菜单命令 文件/新建 可以新建一张图片，设置大小，颜色模式选RGB，网页图片一般选择72像素/英寸，如果图像要打印，可设为300/英寸。背景按情况选透明或白色。

移动选择与图层面板 
1、按住Ctrl，在图像上点击可以选中图层
2、选择此工具，勾选工具属性栏上的“自动选择图层”，可以在图像上点击选中图层
3、移动元素同时按住Alt键可复制一个图层
4、图层面板的操作，包括图层的显示隐藏、图层顺序、新建图层、图层删除

针对图像中选中图层的操作 
1、移动
2、自由变换 执行菜单命令 编辑/自由变换
3、拖拽到另一张图像上完成图层拷贝

历史记录面板 
记录20部操作，可以点击已经记录的操作步骤回到之前

选择工具 
1、矩形选择工具
2、椭圆选择工具 按住alt+shift键可以从中心拉出正圆
3、任意套索工具 用手任意画出选区，不精确，不常用
4、多边形套索 可以选择多边形物体，对于结构复杂的物体，可以点多个小段来选择。
5、磁性套索 可以自动在物体边缘生成选择线，但是由于太自动了，所以不够精确，也不常用。
6、魔术棒选择工具 按照点击的点的颜色范围来选择，可以设置范围的容差，容差越大，选择区域越大，对于有单色背景的图像中的元素，可以用它点选背景，然后反选，从而选中元素。
7、快速选择工具 直接在要选的元素上画，按照画的颜色范围进行选择。
8、对图层创建选区：按住Ctrl，用鼠标点击对应的图层，在图层外框生成选区。

选区的编辑技巧 
1、新选区模式下移动选区
2、选区的加、减、乘，工具属性栏上设置
3、调整边缘 工具属性栏或者执行菜单命令 选择/调整边缘
4、变换选区 执行菜单命令 选择/变换选区，可对选区进行缩放、移动等
5、反选 执行菜单命令 选择/反向
6、取消选择 执行菜单命令 选择/取消选择，快捷键ctrl+d

选区特别注意 
选区（蚂蚁线）只对当前图层器起作用，选区操作失败一般是当前图层弄错了

缩放，平移，新建，移动选择
当我们在放大等操作时，要使用平移，可以按住空格键移动，移动后松开空格键，还会回到原来的操作；
快速选择图层：ctrl+点击图像；
从别的图片中选中图层，直接拖到新的图片中，可以复制图层；
可以使用选择工具，将选中的内容赋值，再放到另一个图片中黏贴；
可以通过调整图层顺序来调整图层哪个在上面，哪个在下面；
双击右下角图层名更改图层名；

有时候，拷贝出错的话，有可能是你的图层选择错误；
自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t，等比缩放按住shift；
可以移动旋转点来一旋转点为中心进行旋转；
圆形选择工具，按住shift，拉出一个正圆；
移动选区：选好选区后，点击左上角的新选区，即可进行移动选区；或者点击选择中的变换选区，也可移动选区；

套索工具
以某点为中心拉出一个正圆：圆形套索，alt+shift，即可；
多边选择工具的使用；
在使用多边形工具时，可以使用delete键来删除一个点；
磁性套索工具的使用；傻瓜式操作，直接描边过去，不需要自己点击，但不精确的地方可以自己点击，支持delete删除点；

魔棒工具的使用；设置容差值可以增加选中范围，支持增选，点击左上角的第二个增选，然后使用举行选择工具增选即可；
可以使用魔棒工具，选中外面的边框，再使用选择中的反向选择来快速选择；
快速选择工具；
加选，减选，交叉，新选模式；
填充：用选区等设置好选区，再新建图层，点击编辑里面的填充，选择前景色背景色等；
描边：设置好选区，新建图层，点击编辑里面的描边，设置居外居中颜色等即可；
删除：选好图层，设置选区，点击delete键；

裁剪图像 
1、裁切工具
2、对选区执行菜单命令 图像/裁剪
3、设置矩形框大小，创建固定宽高的矩形框，可进行固定尺寸裁剪

针对确定选区的操作技巧 
1、复制 执行菜单命令 编辑/拷贝 快捷键ctrl+c
2、粘贴 执行菜单命令 编辑/粘贴 快捷键ctrl+v
2、粘贴入 执行菜单命令 编辑/选择性粘贴/贴入
3、填充 执行菜单命令 编辑/填充
4、描边 执行菜单命令 编辑/描边
5、删除 执行菜单命令 编辑/清除 快捷键 delete
6、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t

擦除与修复工具 
1、擦除工具
2、污点修复工具

参考线技巧 
1、视图/标尺，显示标尺，在标尺上按住鼠标拖动可以拉出参考线
2、视图/对齐到/参考线 让参考线移动时自动对齐到选框或者图像的边缘
3、视图/新建参考线 可以精确创建参考线

文本输入 
1、执行菜单命令 编辑/首选项/单位和标尺 设置文字的单位
2、文本输入
3、文本编辑 属性工具栏上点击文本编辑按钮

取色 
1、取色工具，点击前景色按钮，弹出取色对话框，当前工具切换成取色工具。
2、点击前景色按钮，当前工具自动切换到取色工具

图像大小与画布大小 
1、图像/图像大小 查看和设置图像的整体大小
2、图像/画布大小 查看和设置图像的画板大小

尺寸测量 
1、切片工具 双击切片弹出切片对话框
2、切片选择工具
2、矩形框工具，打开信息面板

photoshop批量切图技巧

切图，就是从效果图中把网页制作需要的小图片裁剪出来。

1、使用psd格式并且带有图层的图像切图

2、在图像上用切片工具切出需要的小图

3、双击切片，给切片命名

4、执行菜单命令 存储为web所用格式

5、点选切片，设置切片的图片格式

6、存储切片，选择“所有用户切片”，点存储(多个切片会存到所选文件夹中的images文件夹中)

批量切图
普通裁切：使用裁切工具，进行单张裁剪，裁剪好后双击，保存命名；
选区裁剪：使用矩形选择工具，设置好单张选区，点击图像中的裁剪，保存命名；
删除切片：选择切片选择工具，点击要删除的切片，点击delete键，即可删除切片；
批量切片：
点击切片工具，拉出选框，如果长宽不满意，可以双击手动设置宽高，还可以双击命名；
切好后双击命名，确定；
当要切的几个图形大小一致时，切好第一个后，使用切片选择工具，按住alt键，移动选框，确定好后双击命名；按住alt+shift可以垂直下拉赋值选框
要存储为透明背景的话，要先将这些切片的背景隐藏起来：按住ctrl点击背景，点击图层小眼睛隐藏；
当所有的切片都已经好了之后，点击存储为web所用格式，然后要点击每一个切片，选择png-24格式，这是因为jpg不能用作透明背景。
但注意，如果我们不需要透明背景时，就要选用jpg格式，点击存储；
注意，如果我们存储多张图片时，它们会自动放置在images文件夹下，如果没有回创建，我们应该将图片选择在images文件夹的上一级目录进行存放，而不是在images文件夹；
格式：所有图像；切片：所有用户切片；
点击保存，确定；

Photoshop制作雪碧图技巧

雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。

步骤：

1、使用Photoshop新建一张背景透明的图片

2、将小图片复制到此图片中，排列好每个图像的位置，图片幅面不够可以用画布大小调整大小

3、按照所有小图片的范围裁剪图片，存为透明背景的png图片

雪碧图制作
新建图像，设置宽高，背景为透明；
把要制作雪碧图的图标拖入进来，点击右上角的√，为了方便观看，新建一个背景图层，将背景图放在最下面一个图层，填充背景色；
为了方便有规律的放入图标，可以固定高，添加多行辅助线；
也可以一次性将图标拖入，点击√，再移动；
全部放进来后，用矩形框选中区域，进行裁剪，将背景图层隐藏；
文件存储为web所用格式；选择png-24格式，存放进images文件夹中；

有可能有的psd图中，会有轮播图，这个时候，我们应该和ui设计师沟通好，有没有，并切图；
如果有的图标忘记切了，向切好再加入雪碧图中，建议放在雪碧图的下面，不然可能会影响布局，
对已经做好的雪碧图进行扩充，点击图像中的画布大小，点击向上的箭头，表示向下扩展，设置好高度，填充颜色，设置辅助线，把图标拖入；

login页面ps制作提示

设置参考线，使用矩形框来测量参考线的位置，在新图中的视图里面新建参考线；
点击前景色，点击点击背景色，确定，在新图中新建图层，编辑中的填充，选择前景色，确定；
可以在已有参考线的基础上，拉出一个一定宽高的矩形框，再拉出参考线，参考线会自动贴紧矩形框；
新建logo：打开logo图片，赋值，粘贴到新图，ctrl+t或者点击编辑里面的自由变换，按住shift等比缩放，紧贴参考线放大缩小logo，好了后双击，移动到适当位置；

正圆：要在新选区模式下按住alt+shift；
选区固定比例：点击矩形选择工具，点击中上部分的样式，选择固定比例，设置宽高即可；
给正圆描边：按住ctrl，点击右下角的图层，注意一定要点击图层的图框，即可给图层描边，点击编辑中的描边，居外；
污点修复工具：点击工具，涂抹即可；
选择货物：点击外围选择，反选，点击加选，利用多边形选择工具进行增选；
调整边缘：设置好选取后，点击选择里面的羽化边缘，可以设置像素为1进行柔滑；
复制，粘贴货物，调整大小位置；
货物阴影：新建图层，用矩形框拉出一个椭圆，编辑，填充，黑色，调整阴影图层的填充度；
复制图层，按住alt键，移动图层到需要的地方，即可复制图层；
插入文字，长按工具栏的文字，竖排文字，输入文字，设置字体大小行高等；

布局实例图片列表；
取色器可以进行复制#xxxxxx，然后粘贴在颜色处；
铅笔工具画横线：点击铅笔，左上角选择大小，前景色选择颜色，按住shift画横线；可以设置辅助线，矩形框等等，还可以用矩形框选中部分横线，按delete删除多于的横线；
账号密码等，设置好矩形框，描边；
给账号密码框内换颜色：里使用魔棒工具，调小容差值，取消锯齿，选中里面的内容，编辑--填充前景色；
可以直接从文件夹中把图片拖入图中；