持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情
Web 前端必会的 PhotoShop 技能
1.PhotoShop 的简介与安装
Adobe PhotoShop,简称“PS”,是由 Adobe Systems 开发和发行的图像处理软件。
PhotoShop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑和创造工作。PS 有很多功能,在图像、图形、文字、视频、出版等各方面都有涉及。
1.1 安装 PhotoShop
PS 的安装大家可以参考这篇公众号文章PhotoShop 2020 安装教程。
1.2 PhotoShop 的界面介绍
各区域功能介绍如下:
-
菜单栏:进行文件导入导出、界面设置等操作。
-
属性栏:当我们选中文字、吸取颜色或标尺量尺寸时,在该栏观察对应的信息。
-
工具栏:选取对应的工具进行相关操作。
-
工作区:对 psd 文件进行相应的操作。
-
插件区:插件管理与插件的使用,可进行文件导入到蓝湖等在线平台。
-
面板区:进行颜色选择与颜色设置操作。
-
图层管理区:进行图层的相关操作,如:隐藏图层、解锁图层、复制图层等等。
我们前端常用的工具如图所示:
每个工具图标右下角有一个小三角形,表示着这是一个工具类,大家可以使用鼠标右键点击图标进行工具切换。
我们也可以点击工具栏最下面的三个圆点图标,进行工具类设置,可以更改工具栏的工具排列顺序与工具类划分。
1.3 PhotoShop 的初始化设置
-
呼唤出标尺工具
- 呼唤出标尺工具:菜单栏 > 视图 > 标尺 (快捷键:【Ctrl + R】)
-
单位设置为 px、
- 将单位 cm 转化为 px:菜单栏 > 编辑 > 首选项 > 单位与标尺 (快捷键:【Ctrl + K】)
-
使用参考线
- 添加参考线:用鼠标左键从标尺处拉出一条辅助线。
- 删除参考线:用鼠标左键将辅助线拉回标尺处。
- 清除所有参考线:菜单栏 > 视图 > 清除参考线
借助参考线,用标尺工具量出图片的尺寸,将工具选择为移动工具,在标尺端拉取参考线。
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 切片具体操作流程
-
打开(【Ctrl + O】)psd 文件或 jpg 文件
-
另存为(【Ctrl + Shift + S】)新的 psd 文件
- 在新的 psd 文件上马进行操作,避免破坏源文件;
-
打开辅助线(【Ctrl + R】)
- 拉好辅助线,选好要切片的位置;
-
使用切片工具(【C】)
- 安装辅助线进行切片即可。
-
导出切片(【Ctrl + Shift + Alt + S】),选择图片存储格式
3.2 存储切片
- 调整类型:鼠标选择每一个切片,进行设置。
- 调整导出类型:选择用户的切片,否则其他的也会被导出来。
-
查看结果并更改名称(名称不要带中文及特殊符号)
-
清除切片:使用过程中或完成后,如果想清除所有的切片(菜单栏 > 视图 > 清除切片)
3.3 图片存储格式的区别
图片的存储格式一般为 jpg、png-24、png-8、gif 四种,区别如下:
-
gif 与 png-8 :差不多,支持全透明,不支持半透明,会有毛边。
- gif 可以存储为会动的图片,png-8 不支持。
- gif 的大小比较大,在保证质量时,体积越小,就选择谁。
-
jpg:常用格式,大图、清晰,一般网页中的导航图就是 jpg,视觉冲击。
-
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 去除背景颜色(使背景透明)
-
用 PS 打开要改变的图片
-
选中图层 --> 双击新建图层(解锁)
-
拖动该图层 --> 创建新图层(备份)
-
隐藏原图层(点击眼睛)--> 选中上层图层
-
使用魔法棒工具(【W】) --> 需要一个一个追加(【Shift】)选取
-
选中所有要删除的背景颜色 --> 删除(【Del】)
-
取消选择(【Ctrl + D】)背景区域
-
保存为 .png 图片即可
4.2 改变图片尺寸
4.3 去除网站水印
结语
这是我目前所了解的知识面中最好的解答,当然也有可能存在一定的误区。
所以如果对本文存在疑惑,可以在评论区留言,我会及时回复的,欢迎大家指出文中的错误观点。
最后码字不易,觉得有帮助的朋友点赞、收藏、关注走一波。