Web 前端必会的 PhotoShop 技能

发布于:2022-11-28 ⋅ 阅读:(320) ⋅ 点赞:(0)

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. 调整类型:鼠标选择每一个切片,进行设置。

在这里插入图片描述

  1. 调整导出类型:选择用户的切片,否则其他的也会被导出来。

在这里插入图片描述

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

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

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 去除网站水印

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

结语

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

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

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

本文含有隐藏内容,请 开通VIP 后查看