持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

Web 前端必会的 PhotoShop 技能

1.PhotoShop 的简介与安装

Adobe PhotoShop，简称“PS”，是由 Adobe Systems 开发和发行的图像处理软件。

PhotoShop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑和创造工作。PS 有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

PS 的安装大家可以参考这篇公众号文章PhotoShop 2020 安装教程。

PS界面介绍.png

各区域功能介绍如下：

我们前端常用的工具如图所示：

常用工具.png

每个工具图标右下角有一个小三角形，表示着这是一个工具类，大家可以使用鼠标右键点击图标进行工具切换。

我们也可以点击工具栏最下面的三个圆点图标，进行工具类设置，可以更改工具栏的工具排列顺序与工具类划分。

呼唤出标尺工具
- 呼唤出标尺工具：菜单栏 > 视图 > 标尺（快捷键：【Ctrl + R】）
单位设置为 px、
- 将单位 cm 转化为 px：菜单栏 > 编辑 > 首选项 > 单位与标尺（快捷键：【Ctrl + K】）
使用参考线
- 添加参考线：用鼠标左键从标尺处拉出一条辅助线。
- 删除参考线：用鼠标左键将辅助线拉回标尺处。
- 清除所有参考线：菜单栏 > 视图 > 清除参考线

借助参考线，用标尺工具量出图片的尺寸，将工具选择为移动工具，在标尺端拉取参考线。

切片是网页制作过程中非常重要的一个步骤，往往切片的正确与否会影响着网页的后期制作，一般是用 PS 或者 fw 对网页的效果图或者大幅的图片进行分割。

重要的正确的切片会给网站带来一些非常正面的影响，比如减少网页加载时间、制作动态效果、优化图像、链接等。

每个切片作为一个独立的文件存储，文件中包含自己的设置、颜色调板、链接、翻转效果及动画效果。

切片工具主要是用来将大图片分解为几张小图片，这个功能用在网页中比较多，因为现在的网页中图文并茂，也正如此打开一个网页所需的时间比较长，为了不让浏览网页的人等待时间太长，所以他们将图片切为几个小的来组成。

切片存储_1.png

切片存储_2.png

图片的存储格式一般为 jpg、png-24、png-8、gif 四种，区别如下：

gif 与 png-8 :差不多，支持全透明，不支持半透明，会有毛边。
- gif 可以存储为会动的图片，png-8 不支持。
- gif 的大小比较大，在保证质量时，体积越小，就选择谁。
jpg:常用格式，大图、清晰，一般网页中的导航图就是 jpg，视觉冲击。
png-24: 支持透明非常好，一般网页中支持透明就是使用 PNG-24。

结论：

阴影:
- 可以使用 css3 实现，但是有不支持 IE 678 的缺陷
- 因此直接使用切片, 注意隐藏背景
- 导出为 png-24 图片，导出时勾选 <透明度>
渐变:
- 从上到下 —> 切片宽度为 1，从左到右 -> 切片高度为 1
- 导出为 png-24 图片，导出时勾选<透明度>
不规则图片:
- 注意隐藏背景，导出为 png-24 图片，导出时勾选<透明度>