本期学习目标
本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例。
1.Photoshop基本使用
早在第一期我就让大家去安装PS，不知道安装了没有，没有安装的尽快安装，百度有很多免费资源。之所以学习PS，是因为前端需要用到PS上的功能，例如切图，量尺寸等。
PS界面组成
菜单栏、选项栏、工具栏、浮动面板（拖曳名称，可单独操作面板）、绘图窗口
窗口菜单，可显示隐藏所有面板
工作区：新建项目
调整浮动面板
图层操作（重点）
图层面板快捷键 F7，其实图层就是一张张透明的纸，可以实现叠加问题。
图层选择：使用移动工具V
1.图层缩览图判断。
2.按住CTRL，在目标图像上单击。
3.将光标放置在目标图像上右键，选择图层名称图层面板中加选图层：
1.按SHIFT，单击另一个目标图层，中间所有图层被选中。
2.按CTRL，单机另一个目标图层，只选中目标图层。
复制图层：选中目标图层后（移动工具状态下）
1.按ALT拖拽图像
2.CTRL+J（重合）
图层编组
选中目标图层，CTRL+G
取消编组：CTRL+SHIFT+G
双击图层名称可重新命名
双击组名称，可命名组
移动工具V选择组或图层时，需要设置选项栏
图层上下位置移动
1.选中目标图层，在图层面拖拽
2.CTRL+] 向上移动图层
CTRL+[ 向下移动图层
3.CTRL+SHIFT+] 图层置顶
CTRL+SHIFT+[ 图层置底
移动选区或图像时：
移动过程中，没释放鼠标，按住SHIFT，可同一水平线、同一垂线、45度移动。
PS中的撤销操作是：
ctrl+z 撤销一步
ctrl+alt+z 撤销多步
Photoshop切图
PS切图可以分为手动利用切片切图以及利用PS的插件快速切图
切片工具
1.利用切片工具手动划出
2.图层菜单–新建基于图层的切片
3.利用标尺基于参考线的切片（选择切片工具）
4.先选择一个整个的切片，切片选择工具–属性面板中有“划分”–可以等分数平分切图
导出切片：文件–存储为web设备所用格式
辅助线和切片使用及清除
视图菜单–清除 辅助线/清除切片
切图插件
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
官网: http://www.cutterman.cn/zh/cutterman
注意： cutterman插件要求你的ps 必须是完整版，不能是绿色版，所以大家需要从新安装完整版本。
2.项目案例：云道页面
案例练习目的是总结以前的css和html
还有ps的使用。
制作步骤：
- 准备相关文件。（内部样式表) html文件(index.html) 图片文件
- 准备CSS 初始化。 书写结构和样式
- 确定版心（是1200像素)和各个模块。
前期准备工作
我使用的代码编辑器是HBuilder，编辑快速高效，非常方便，你可以去百度去搜索官网，软件是完全正版免费的，非常良心。当然还有HBuilder的升级版HBuilderX，启动更快，优化更好，不过我用老版本习惯了，下载了没用，你可以都试试，选择自己合适的，下载解压即可使用。当然subline等其他软件也行，主要看自己的需求。
好的，我们先建一个新的web项目：
==注意：==以后综合案例的主页面都叫 index.html。
然后，我们还需要这个页面的模板：
我这里还有一个PS的文件，把上图所需要的信息，宽度高度等都标注好了。（这个是必须要的）
链接：https://pan.baidu.com/s/1bW0Sn2u1peSj8fQARx0g7g
提取码：oxxn
复制这段内容后打开百度网盘手机App，操作更方便哦
当然，你还是要亲自去使用PS量出所需要的数据，练习练习还是好的。用PS打开：
我们看到有很多标尺，那我们在右边图层界面把@parker文件夹给隐藏:
点击左边的眼睛就行。
我们刚拿到这个案例，很多人不知道该如何下手。答案是：我们一点点做。
首先，我们先把最顶部的导航栏搞定。
导航栏是由一个父盒子套着一个子盒子，子盒子里面有内容。
那么HTML文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>云道首页</title>
<!--引入外面的CSS文件-->
<link rel="stylesheet" href="css/yundao.css"/>
</head>
<body>
最低0.47元/天 解锁文章
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
