Web 前端必会的 PhotoShop 技能_前端需要学习的ps

Web 前端必会的 PhotoShop 技能

1.PhotoShop 的简介与安装

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

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

1.1 安装 PhotoShop

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

1.2 PhotoShop 的界面介绍

各区域功能介绍如下：

• 菜单栏：进行文件导入导出、界面设置等操作。

• 属性栏：当我们选中文字、吸取颜色或标尺量尺寸时，在该栏观察对应的信息。

• 工具栏：选取对应的工具进行相关操作。

• 工作区：对 psd 文件进行相应的操作。

• 插件区：插件管理与插件的使用，可进行文件导入到蓝湖等在线平台。

• 面板区：进行颜色选择与颜色设置操作。

• 图层管理区：进行图层的相关操作，如：隐藏图层、解锁图层、复制图层等等。

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

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

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

1.3 PhotoShop 的初始化设置

1. 呼唤出标尺工具

   • 呼唤出标尺工具：菜单栏 > 视图 > 标尺 （快捷键：【Ctrl + R】）

2. 单位设置为 px、

   • 将单位 cm 转化为 px：菜单栏 > 编辑 > 首选项 > 单位与标尺 （快捷键：【Ctrl + K】）

3. 使用参考线

   • 添加参考线：用鼠标左键从标尺处拉出一条辅助线。
   • 删除参考线：用鼠标左键将辅助线拉回标尺处。
   • 清除所有参考线：菜单栏 > 视图 > 清除参考线

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

2.常用快捷键

2.1 基础操作快捷键

• 拷贝 - 【Ctrl + C】
• 新建 - 【Ctrl + N】
• 粘贴 - 【Ctrl + V】
• 撤销 - 【Ctrl + Z】
• 取消 - 【Ctrl + D】

2.2 工具选择快捷键

• 移动工具 - 【V】
• 切片工具 - 【C】
• 吸管工具 - 【I】
• 文字工具 - 【T】
• 缩放工具 - 【Alt + 滚轮】
• 抓手工具（移动视图）- 【H 或 空格键】

2.3 图片存储相关操作

• 存储为 web 格式 【Alt + Shift + Ctrl + S】
• 新版中直接导出: 【Alt + Shift + Ctrl + W】

3. 切片（重点）

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

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

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

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

3.1 切片具体操作流程

1. 打开(【Ctrl + O】)psd 文件或 jpg 文件

2. 另存为(【Ctrl + Shift + S】)新的 psd 文件

   • 在新的 psd 文件上马进行操作，避免破坏源文件;

3. 打开辅助线(【Ctrl + R】)

   • 拉好辅助线，选好要切片的位置;

4. 使用切片工具(【C】)

   • 安装辅助线进行切片即可。

5. 导出切片(【Ctrl + Shift + Alt + S】)，选择图片存储格式

3.2 存储切片

1. 调整类型：鼠标选择每一个切片，进行设置。

2. 调整导出类型：选择用户的切片，否则其他的也会被导出来。

3. 查看结果并更改名称(名称不要带中文及特殊符号)

4. 清除切片:使用过程中或完成后，如果想清除所有的切片(菜单栏 > 视图 > 清除切片)

3.3 图片存储格式的区别

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

1. gif 与 png-8 :差不多，支持全透明，不支持半透明，会有毛边。

   • gif 可以存储为会动的图片，png-8 不支持。
   • gif 的大小比较大，在保证质量时，体积越小，就选择谁。

2. jpg:常用格式，大图、清晰，一般网页中的导航图就是 jpg，视觉冲击。

3. png-24: 支持透明非常好，一般网页中支持透明就是使用 PNG-24。

结论：

• 颜色丰富、过度多选用 jpg 格式导出（网页中大部分图片都为 jpg）
• 背景透明选用 png 格式导出
• 颜色单一、过度少或存在动画选用 gif 格式导出（缺点如不规则的圆存在锯齿，尽量少用 gif）

3.4 切片的技巧

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

4.常见的使用场景

4.1 去除背景颜色(使背景透明)

1. 用 PS 打开要改变的图片

2. 选中图层 --> 双击新建图层(解锁)

3. 拖动该图层 --> 创建新图层(备份)

4. 隐藏原图层(点击眼睛)–> 选中上层图层

5. 使用魔法棒工具(【W】) --> 需要一个一个追加(【Shift】)选取

6. 选中所有要删除的背景颜色 --> 删除(【Del】)

7. 取消选择(【Ctrl + D】)背景区域

8. 保存为 .png 图片即可

4.2 改变图片尺寸

4.3 去除网站水印

结语

这是我目前所了解的知识面中最好的解答，当然也有可能存在一定的误区。

所以如果对本文存在疑惑，可以在评论区留言，我会及时回复的，欢迎大家指出文中的错误观点。

最后码字不易，觉得有帮助的朋友点赞、收藏、关注走一波。