1.零基础PS【for 前端工程师】

零基础PS

前言

1. 此课程文档内容是小潘潘查阅各类资料和个人经验的结晶所著，可能课程中有些地方理解的不是很透彻，希望读者能给予包容，另外，由于小潘潘的语文是数学老师教的，所以文笔上难免会有些粗俗，甚至粗鲁，希望作为读者的您不要抱怨和给予理解。按照此文档的课程安排，如果您认真的学习完了的话，最后您可以很轻松的独立完成各类网页效果的编码，此文档不包含js脚本，只专注于css和html，后期小潘潘会出关于js此类课程文档。

2. 要想学好此课程必须要勤动手，只有动手编码才会更好的理解和增强记忆，要经常复习，因为小潘潘曾亲眼见到一个这方面的大神，由于一年没接触而几乎完全忘记的案例。

PS简介

什么是PS ？

1. PS全称“Adobe Phtoshop”，是一个强大的图片处理工具，是UI设计师需要精通的一项技能，对于前端工程师来说是必备的，但又无需精通的一项技能，所以此课程只会讲解关于前端工程师的知识，关于PS的通道，图层蒙版等高级部分小潘潘不会涉及到。

为什么要学习PS ？

1. 美工通常只出效果图，而我们前端工程师则需要将效果图制作成网页。在将效果图制作成网页的过程中就需要对效果图进行切图、修图、测量等，而这些就需要使用到PS。

目标 ？

1. 前端主要从事一些代码开发工作，PS使用是前端工程师必备的，但又无需精通的一项技能。

2. 前端工程师对PS 的需求其实很少，只需要你能切图、修图、测量即可。

前端 对PS技能的3大需求

1. 切图

2. 修图

3. 测量

前端需要掌握的9大工具

1. 移动 工具

2. 矩形选框 工具

3. 裁剪 工具

4. 吸管 工具

5. 横排文字 工具

6. 手抓工具

7. 缩放工具

8. 标尺 工具

9. 自由变换 工具

PS基本使用

常用工作面板设置

1. 左边工具栏可以保持默认的初始化状态。

2. 右边通常我们会保留4块面板 （没有的话，可以从菜单栏的窗口中勾选，然后拖拽到右边合适的位置）

a) 导航器

b) 信息

c) 历史记录

d) 图层

3. 图例

 

9大工具简介

移动工具（1）

1. 功能：用来移动图层

矩形选框工具（2）

1. 功能：可以复制某张图层上的框选区域，按delete键也可以删除。

裁剪工具（3）

1. 功能：可以用来切图，框选区域后敲回车就可以裁剪下来。

吸管工具（4）

1. 功能：可以用它来取色

2. 图

 

横排文字工具（5）

1. 功能：写字、修改。

手抓工具（6）

1. 功能：移动整个工作区（快捷键：空格键）。

2. VS移动工具

a) 移动工具只移动图层，手抓工具移动整个工作区 。

缩放工具（7）

1. 功能：缩放工作区（快捷键Ctrl  +  “+/-”） 。

2. 图例

 

标尺工具（8）

1. 功能：精确化测量、切图（快捷键：Ctrl + R）。

2. 图

 

自由变换工具（9）

1. 功能：经常用来覆盖修图（快捷键：Ctrl  + t ）。

2. 工具所在图

 

3. 使用图（通常集合 矩形选框工具一起使用）

 

 

PS文件存储与图片格式介绍

1. PS源文件格式为PSD

2. 图片（ 导出图：文件——>存储为Web所用格式 或快捷键Alt + Shift + Ctrl + s）

a) 图片格式虽然很多，但web前端通常使用的就4种

i. JPG (特点——不支持透明和半透明，所有空白区都用白色填充)

ii. GIF (特点——支持透明，不支持半透明，唯一支持动画的)

iii. png8 (特点——支持透明，不支持半透明)

iv. png24 (特点——支持透明，唯一支持半透明)

常见问题

1. 使用 矩形选框（拷贝） 工具时常见错误

 

2. 图层的上下顺序

 

3. 使用 手抓工具常见问题

a) 当操作的整个东西都在工作区中时，手抓工具是用不了的，但移动工具是可以用的。

4. 使用 标尺工具常见问题

a) 拖出来标尺线后怎么删除它，其实只需要再拖回去即可。