python前端之Photoshop

目的：

学习使用Photoshop的基本使用，以及Photoshop中关于切图这一块的知识，目的是能熟练使用Photoshop查看UI设计师的设计效果图，同时利用Photoshop切图来制做专业html页面。

经常使用图片格式

图片是网页制做中很重要的素材，图片有不一样的格式，每种格式都有本身的特性，了解这些特效，能够方便咱们在制做网页时选取适合的图片格式，图片格式及特性以下：

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

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

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

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

五、webp 
它是由谷歌于2010年推出的新一代图片格式，在压缩方面比当前jpg格式更优越，在质量相同的状况下，WebP格式图像的体积要比jpg格式图像小40%，不过这种图片尚未获得普遍的浏览器支持，仅在Chrome和Opera上支持，在其余浏览器上须要安装插件才能够显示，目前尚未大规模使用。

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

svg 
svg是一种矢量二维图形格式，它是基于xml标记语言描述的，能够经过任何文本编辑器建立。它的优势是文件容量小，放大不失真，并且背景也能够是透明的。目前大量使用这种格式来制做网页图标或者网页地图，因为它是矢量的，因此在不一样终端屏幕上(pc、手机)都有很好的显示效果。

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

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

photoshop经常使用图片处理技巧

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

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

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

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

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

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

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

历史记录面板 
记录20部操做，能够点击已经记录的操做步骤回到以前

选择工具 
一、 矩形选择工具
二、 椭圆选择工具 按住alt+shift键能够从中心拉出正圆
三、 任意套索工具 用手任意画出选区，不精确，不经常使用
四、 多边形套索 能够选择多边形物体，对于结构复杂的物体，能够点多个小段来选择。
五、 磁性套索 能够自动在物体边缘生成选择线，可是因为太自动了，因此不够精确，也不经常使用。
六、 魔术棒选择工具 按照点击的点的颜色范围来选择，能够设置范围的容差，容差越大，选择区域越大，对于有单色背景的图像中的元素，能够用它点选背景，而后反选，从而选中元素。
七、 快速选择工具 直接在要选的元素上画，按照画的颜色范围进行选择。
八、对图层建立选区：按住Ctrl，用鼠标点击对应的图层，在图层外框生成选区。

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

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

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

针对肯定选区的操做技巧 
一、复制 执行菜单命令 编辑/拷贝 快捷键ctrl+c
二、粘贴 执行菜单命令 编辑/粘贴 快捷键ctrl+v
二、粘贴入 执行菜单命令 编辑/选择性粘贴/贴入
三、填充 执行菜单命令 编辑/填充
四、描边 执行菜单命令 编辑/描边
五、删除 执行菜单命令 编辑/清除 快捷键 delete
六、自由变换 执行菜单命令 编辑/自由变换 快捷键 ctrl+t

擦除与修复工具 
一、 擦除工具
二、 污点修复工具

参考线技巧 
一、视图/标尺，显示标尺，在标尺上按住鼠标拖动能够拉出参考线
二、视图/对齐到/参考线 让参考线移动时自动对齐到选框或者图像的边缘
三、视图/新建参考线 能够精确建立参考线

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

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

图像大小与画布大小 
一、图像/图像大小 查看和设置图像的总体大小
二、图像/画布大小 查看和设置图像的画板大小

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

 

photoshop批量切图技巧

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

一、使用psd格式而且带有图层的图像切图

二、在图像上用切片工具切出须要的小图

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

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

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

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

Photoshop制做雪碧图技巧

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

步骤：

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

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

三、按照全部小图片的范围裁剪图片，存为透明背景的png图片