网页设计PS

Photoshop CS5网页设计

目录

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提供了很多了工具，但网页设计只要用到其中很小的一部分工具和功能就能完成大部分的工作。

第一个任务是更改背景色。选中拾色器，选中颜色，如下图所示：

选中图层，然后按组合键alt+backspace键，即可将选中的颜色铺在创建空白文档上。如下图所示

02缩放与抓手工具

在设计网页时，常常需要放大显示页面来调整一些细节，并且需要查看页面的不同位置，也会要缩小页面来查看一下网页设计的全局，这里就要用到缩放和抓手工具。

缩放工具可以改变设计页面预览的比例。可以在工具栏看到缩放工具，选中之后可以看到一个放大镜样的图标，点击鼠标左键后就可以放大设计页面显示比例。

如果想缩小页面显示比例，可以点击左上角的了。可以按住alt键，然后

滚动鼠标的滑轮，在放大和缩小之间来回的切换。

性栏中的“实际像素”或者“适合屏幕”按钮，就可以看到页面的实际尺寸，或

者用快捷键ctrl+0。如下图所示：

当设计页面大于可视窗口时，就要用到抓手工具来方便的浏览页面的不同位置，该工具的快捷键为h。当启动抓手工具之后就可以用鼠标方便的拖拽页面。

下面来介绍下使用缩放工具和抓手工具的最佳方法。无论在使用什么工具时，只要按住空格键就可以将当前工具切换为抓手工具。然后，在按住空格键的同时在按住alt键，抓手工具就会变为缩放工具，按住鼠标的左键左右拖动鼠标就可以放大和缩小页面（往左移动是缩小，往右移动是放大），松开alt键后就会变回抓手工具，松开空格键后又会变成之前使用的工具。

03使用图形工具构画简单的图形

图形工具是网页设计中常用到的工具之一，可以使用它勾画网页的布局，设计按钮等等。在工具栏中可以看到图形工具。右键点击该图标，如下图所示

首先选中一个矩形工具，然后在上方的颜色选框中选中想要的颜色，这里选中白色。如下图所示：

按住鼠标左键拖动就可以创建边框。如果想要创建一个正方形，按住shift键后在拖动鼠标。如下图所示：

注意上图的右侧，除了一个绿色的背景图层外，还有一个形状图层，即之前创建的图层。Ps允许将不同的元素放置在不同的图层上，这样就能方便的对不同的元素进行修改了。这里继续看上图中的形状图层。形状图层的左边显示的是这个图层的颜色，旁边是这个图层的形状。如果要改变这个图层的颜色，可以双击左边这个白色的图层，

然后在拾色器中选中要替换的颜色。

这里在创建一个新的图层。新创建的图层一般都在最上面。用鼠标在拖拽形成一个新的方（这里不能按住shift，否则会在原来的图层上继续创建一个正方形）。如下图所示：

这里可以看到，新建的图层在图层1上面，覆盖了图层1的一个角，如果想让图层1在上面可以用鼠标选中图层1，网上拖动，拖动到图层2的上面即可，如下图所示：

图所示：

接下来选择一些其他的图形工具区创建一些图形。右键点击图形工具，选中自定义图形工具，

如下图所示：

然后点击工具的属性栏中的下拉按钮，选中ps的图形库中所存在的图形，如下图所示：

在点击旁边的小三角，可以看到更多的图形分类，如下图所示：

shift键，这样就能保证所创建图形的比例。如下图所示：

再来看看其他图形工具。这次我们选中“圆角矩形工具”，如下图所示：

选中这个工具之后，可以在工具属性栏中设置图形半径，半径就是圆角的大小，半径值越大这个圆角也就越大。这里可以先设定这个半径值为5px。拖动鼠标，如下图所示：

可以看到下面新建的半径为40px的图形的四个圆角比之前5px的图形的四个圆角要更明显、更大些。删掉这两个图层。

下面用圆角矩形工具画一个网页的主页面的布局，将半径设置为20px，颜色选为白色，然后按住ctrl+0，将页面放置为适合的页面。然后拖动鼠标再这个页面上创建一个主页面的圆角矩形，然后再用圆角矩形创建一个导航菜单的背景。如下图所示：

最后，按住ctrl+s来保存这个文件。

感谢下载!

欢迎您的下载，资料仅供参考