Photoshop CS 网页设计
目录
00 课程介绍 (2)
01 创建文档 (2)
02 缩放与抓手工具 (3)
03 使用图形工具构画简单的图形 (4)
04 利用渐变工具创建渐变效果 (11)
05 文字工具的使用 (17)
06 工作区 (21)
07 理解图层 (24)
08 图层样式1 (27)
09 图层样式2 (30)
10 画笔工具 (36)
11 使用图片素材 (44)
12 图层蒙版与剪贴蒙版 (47)
13 创建镜像效果 (52)
14 图层的融合 (58)
15 创建页面之间阴影分隔线 (62)
16 设计网站的菜单背景（两个图层的合并） (65)
17 设计漂亮的按钮 (70)
18 理解图片格式 (78)
19使用切片工具分割设计好的网站页面 (81)
00 课程介绍
Photoshop是目前被广泛使用的图形处理软件，在这个课程里我们会从最简单的创建文档开始，然后在了解常用的工具去勾画简单的图形，为文字添加效果，为图形添加样式，帮助不同的图片融合在一起，介绍一些流行的网页设计效果，最后将用photoshop去设计一个漂亮的网页。
01 创建文档
首先打开photoshop css5 用ctrl+n或者点击左上角的文件下的“新建”按钮创建一个文档，弹出一个对话框。在名称中输入“演示网页”，在预设中选中“web”。大小设为1280*1680像素，其他设置不变。如下图所示：
这样就得到一个空白的文档，photoshop提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。
第一个任务是更改背景颜色。选中拾色器，选中颜色。如下图所示：
图所示：
按快捷键ctrl+s保存。
02 缩放与抓手工具
在设计网页时，常常需要放大显示页面来调整一些细节，并且需要查看页面的不同位置，
也会要缩小页面来查看一下网页设计的全局，这里就要用到缩放和抓手工具。
缩放工具可以改变设计页面预览的比例。可以在工具栏看到缩放工具，选中之后可以看到一个放大镜样的图标，点击鼠标左键后就可以放大设计页面显示比例。如果想缩小页
面显示比例，可以点击左上角的图标，在点击鼠标左键就可以缩小页面的显示比例了。
可以按住alt键，然后滚动鼠标的滑轮，在放大和缩小之间来回的切换。如果想查看页面的实际尺寸，可以先选中缩放工具，然后点击工具属性栏中的“实际像素”或者“适合屏幕”按钮，就可以看到页面的实际尺寸，或者用快捷键ctrl+0。如下图所示：
当设计页面大于可视窗口时，就要用到抓手工具来方便的浏览页面的不同位置，
该工具的快捷键为h。当启动抓手工具之后就可以用鼠标方便的拖拽页面。
下面来介绍下使用缩放工具和抓手工具的最佳方法。无论在使用什么工具时，只要按住空格键就可以将当前工具切换为抓手工具。然后，在按住空格键的同时在按住alt键，抓手工具就会变为缩放工具，按住鼠标的左键左右拖动鼠标就可以放大和缩小页面（往左移动是缩小，往右移动是放大），松开alt键后就会变回抓手工具，松开空格键后又会变成之前使用的工具。
03 使用图形工具构画简单的图形
图形工具是网页设计中常用到的工具之一，可以使用它勾画网页的布局，设计按钮等等。在工具栏中可以看到图形工具。右键点击该图标，如下图所示：
首先选中一个矩形工具，然后在上方的颜色选框中选中想要的颜色，这里选中白色。如下图所示：
按住鼠标左键拖动就可以创建边框。如果想要创建一个正方形，按住shift键后在拖动鼠标。如下图所示：
注意上图的右侧，除了一个绿色的背景图层外，还有一个形状图层，即之前创建的图层。Ps允许将不同的元素放置在不同的图层上，这样就能方便的对不同的元素进行修改了。这里继续看上图中的形状图层。形状图层的左边显示的是这个图层的颜色，旁边是这个图层的形状。如果要改变这个图层的颜色，可以双击左边这个白色的图层，然后在拾色器中选中要替换的颜色。
这里在创建一个新的图层。新创建的图层一般都在最上面。用鼠标在拖拽形成一个新的
方形（这里不能按住shift，否则会在原来的图层上继续创建一个正方形）。如下图所示：
在上面可以用鼠标选中图层1，网上拖动，拖动到图层2的上面即可，如下图所示：
图所示：
工具，如下图所示：
然后点击工具的属性栏中的下拉按钮，选中ps的图形库中所存在的图形，如下图所示：
在点击旁边的小三角，可以看到更多的图形分类，如下图所示：
键，这样就能保证所创建图形的比例。如下图所示：
再来看看其他图形工具。这次我们选中“圆角矩形工具”，如下图所示：
越大这个圆角也就越大。这里可以先设定这个半径值为5px。拖动鼠标，如下图所示：
在将半径改为40px。拖动鼠标，如下图所示：
可以看到下面新建的半径为40px的图形的四个圆角比之前5px的图形的四个圆角要更明显、更大些。删掉这两个图层。
下面用圆角矩形工具画一个网页的主页面的布局，将半径设置为20px，颜色选为白色，然后按住ctrl+0，将页面放置为适合的页面。然后拖动鼠标再这个页面上创建一个主页面的
圆角矩形，然后再用圆角矩形创建一个导航菜单的背景。如下图所示：
更改下矩形的颜色，然后再将图层1移动到最上方，如下图所示：
最后，按住ctrl+s来保存这个文件。
04 利用渐变工具创建渐变效果
这里我们来学习一个网页设计师长要用到的渐变工具，渐变就是从一种颜色过渡到另外一种颜色，使用ps可以创建出比较复杂的渐变效果。在工具栏中可以找到这个渐变工具，
右键点击该图标，选中渐变工具。如下图所示：
变的类型，默认的类型是线性渐变，也就是从一种颜色平行的过渡到另外一种颜色。如下图
所示：
在前景色和背景色中可以指定渐变的两种颜色。这里我们选中两种颜色。在拾色器中首先选中前景色为一种潜绿色，在选中后景色为一种深绿色。
在将鼠标放置在渐变开始的位置。拖动鼠标，如下图所示：
松开鼠标，如下图所示：
这样就得到了一个简单的由浅绿色过渡到深绿色的线性渐变。
下面来创建一个更加复杂的渐变。在工具属性栏中点击下拉的三角形，这里都是ps定义好的预设，选择这里面的预设可以创造出不同的渐变效果。如下图所示：
之前我们用的就是第一种渐变效果，即由前景色过渡到背景色。在预设的渐变效果中，还可以选择从颜色A过渡到颜色B在过渡到颜色C。这里我们还是选择第一种渐变效果，选
中后，点击渐变编辑器。弹出渐变编辑器，如下图所示：
注意上图中的滑块，一共有4个滑块，上面2个滑块控制着渐变颜色的不透明度，下面2个滑块控制着渐变的2个颜色，点击滑块可以在下面的色标栏中的颜色框中重新选择颜色，按住滑块左右移动可以控制渐变的位置。
在渐变滑动栏中创建一个新的颜色，把鼠标放到颜色条下面，出现一个手型，然后点击鼠标，就会出现一个新的滑块。如下图所示：
然后为这个新创建的滑块指定颜色，同时在修改最后一个滑块的颜色。如下图所示：
如下图所示：
接下来我们来创建“径向渐变”。在工具属性栏中“线性渐变”的旁边就是“径向渐变”，如图所示：，径向渐变就是一种从中央过渡到周围的一种效果，在网页设计中常用到。先新建一个图层，然后拖动鼠标，就可以在图层中建立径向渐变了，如下图所
示：
背景图层，点击新建图层，就会在背景图层上新建一个图层，如下图所示：
中渐变编辑中的从前景色过渡到透明的预设，即第二个透明选项，如下图所示：
点击确定，然后选中“拾色器”的前景色并且指定一种比后景色更深的前景色，然后把鼠标放置在新建图层上拖动鼠标。这时可以按住shift键，这样就可以按照一定的角度去创
建渐变。如下图所示：
这样一个线性渐变就创建好了。接下来在创建一个径向渐变。选中背景图层，然后点击新建图层，即可以在背景图层上在创建一个新的图层。选择径向渐变，在拾色器中选择一个比背景色浅一点的颜色，这样会有一个光照的效果。在打开渐变编辑器，选中从
前景色过渡到透明的预设。在新建的图层上拖动鼠标，如下图所示：
来看文字工具，在工具栏中找到图标，右键点击该图标，选中横排文字工具，如下
图所示：
选中“文字工具”后移动鼠标到页面上点击下。在页面上就会出现一个闪烁的光标，可以输入文字noteseven，ps会自动创建一个图层来显示刚才输入的文字。现在来更改下文字的颜色，选中noteseven，点击工具属性栏中的长方形颜色框，将颜色修改为白色。如下图所示：
选中noteseven修改字体和大小，将字体修改为微软雅黑，大小修改为50px（可以直接输入字号，这种方法适合当知道具体的字号时。如果不确定想要的字号时，就选中文字，然
后把鼠标放置到工具属性栏中的图标上，鼠标就变成了左右两个箭头，按住鼠标左键左右拖动鼠标，字体就可以变大和变小），字体样式选为bold。如下图所示：
在工具的属性栏中还可以对文字的形状进行改变，选中要编辑的文字，点击工具属性栏
中的，就会弹出一个对话框，选中要变换的样式，如下图所示：
图所示：
下面来看下段落文字。在ps中输入较多文字的最好办法是规定一个显示的范围。在工具栏中右击“文字工具”，选中横排文字工具。拖动鼠标左键画一个方形的框，这个框就是即将输入文字的范围。如果输入文字的长度大于创建的这个框，文字会自动的换到下一行；如果输入的文字高度大于这个框，那么多余的文字会被隐藏起来。这里将文字粘贴到这个框
中，并且将这个框的图层提到最上层，否则会被其他的层覆盖，而无法看到。如下图所示：
选中文字，修改文字的颜色和大小，可以在图形上部找到“窗口”菜单，点击打开勾选“字符”，则右边会出现“字符”工作区。在这个工作区就可以调整段落文字的大小和间距。
如下图所示：