前端学习笔记之三PS

梦里梦外; 2024-04-18 21:36 55阅读 0赞

#### 常用图片格式 ####

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

#### 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、![在这里插入图片描述][20190912102523925.png]放缩工具 图像放大缩小，在图像上点击放大，按住alt键点击缩小，快捷键Ctrl+“+”放大 Ctrl+“-”缩小，双击此工具可以让图像按照原始大小显示。  
2、 ![在这里插入图片描述][20190912102952426.png]平移工具 对图像进行移动，在使用其他工具时，按住空格键盘的空格键，可以切换到此工具，移动完后松开空格键回到原来的工具。双击此工具可以让图像放缩到显示区域完全显示。

##### 新建图像 #####

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

##### 移动选择与图层面板 #####

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

##### 针对图像中选中图层的操作 #####

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

##### 历史记录面板 #####

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

##### 选择工具 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6bGFybQ_size_16_color_FFFFFF_t_70]

##### 选区的编辑技巧 #####

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

##### 选区特别注意 #####

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

##### 裁剪图像 #####

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

##### 针对确定选区的操作技巧 #####

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

##### 擦除与修复工具 #####

1、![ps软件示例图片][ps 2] 擦除工具  
2、![ps软件示例图片][ps 3] 污点修复工具

##### 参考线技巧 #####

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

##### 文本输入 #####

1、执行菜单命令 编辑/首选项/单位和标尺 设置文字的单位  
2、![ps软件示例图片][ps 4] 文本输入  
3、文本编辑 属性工具栏上点击文本编辑按钮

##### 取色 #####

1、![ps软件示例图片][ps 5]取色工具，点击前景色按钮，弹出取色对话框，当前工具切换成取色工具。  
2、![ps软件示例图片][ps 6]点击前景色按钮，当前工具自动切换到取色工具

##### 图像大小与画布大小 #####

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

##### 尺寸测量 #####

1、![ps软件示例图片][ps 7] 切片工具 双击切片弹出切片对话框  
2、![ps软件示例图片][ps 8] 切片选择工具  
2、![ps软件示例图片][ps 9] 矩形框工具，打开信息面板

##### photoshop批量切图技巧 #####

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

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

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

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

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

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

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

[20190912102523925.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a5b66b6ca6d74bca8e844f19af8a780a.png
[20190912102952426.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/363c323dc77d4993a43d59c80a5d055f.png
[ps]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ef1965b4f6f240e9a996d78782eb4926.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6bGFybQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/87d00b8f0ffd4f489c72052699d14a07.png
[ps 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f0762445fa014dee9d58da233075c0dd.png
[ps 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3f9f4adf8f7344cc8162b64ab2184863.png
[ps 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0e4d0717c2d641b7894dfe7410f3e25c.png
[ps 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1848c66057fd4d50b57e6eb850620d75.png
[ps 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/304c77e5216643b1a21e6d2d582ae4d1.png
[ps 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/83fe41f8feef4862a4f5451b21326d14.png
[ps 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f4666f4efcc94a7c93cdae357de7cb0c.png
[ps 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/39de1a725c5f44cf811d8db3c8b12f2c.png
[ps 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ec4a5c5101974710842b68eaa635f448.png