ps网页设计

11.3 制作网页动画
12．接下来，分别为“图层1”、“图层2”、“图层3”、“白 沙数码”文字的4个图层以及网址图层添加图层样式效果。 13．设置完成后，单击【确定】按钮即可得到最终效果。
11.3 制作网页动画
制作动画效果 1．执行菜单栏中的【窗口】＞【动画】命令，打开【动画】 面板。 2．在【动画】面板中单击【创建新图层】按钮，添加一帧 （第2帧），然后在【图层】面板中单击样式前面的眼睛图 标隐藏所有图层的样式，且隐藏“白沙数码”所在的4个图 层的图像。 3．在【动画】面板中单击【创建新图层】按钮添加3帧， 然后在【图层】面板中单击样式前面的眼睛图标显示“图 层1”的样式，且显示“白”所在图层的图像。
11.2 制作网页导航
19．将所有按钮图像的图层合并为“按钮”图层，单击面 板下方的【创建新组】按钮，然后将“按钮”图层拖入组 中。然后单击【图层】面板下方的【创建填充或调整图层】 按钮，在“按钮”图层的上方建立一个【色阶】调整图层， 并调整其参数。 20．按住Alt键在调整图层与“按钮”图层之间单击，建立 剪贴组。输入文字。 21．最后，单击【图层】面板下方的【创建填充或调整图 层】按钮，在最上一层新建【色相/饱和度】填充图层，根 据网页颜色的搭配情况随时调整可得到不同的效果。
11.2 制作网页导航Baidu Nhomakorabea
4．按下X键切换前景色与背景色的颜色。新建一个图层得 到“图层2”，选择工具箱中的【椭圆工具】，按住Shift键在 图像上绘制一个正圆，并将其置于圆角矩形遥左上角位置。 5．按住Shift+Alt组合键拖动图像上的正圆到矩形的底端。 这时，【图层】面板自动复制得到“图层2副本”。 6．设置前景色的色值为839ce9，新建一个图层得到“图层 3”，选择工具箱中的【椭圆工具】，按住Shift键在图像上绘 制一个小正圆。 7．单击【图层】面板下方的【添加图层样式】按钮，在弹 出的下拉菜单中选择【内阴影】命令，根据效果调整参数。
第11章 网页设计 章
一、教学目标 学习Photoshop在网页设计方面的运用。 学习Photoshop在网页设计方面的运用。 Photoshop在网页设计方面的运用 二、教学重点 网页按钮的制作 网页导航的制作 网页动画的制作 网站的首页的制作
第11章 网页设计 章
随着互联网的飞速发展，网页设计已经成行为一个具有相 当深度与市场的设计领域。Photoshop为实现网页的个性和 视觉效果，提供了广阔的空间，是目前网页设计的重要软 件。本章从构成网页的几个主要元素入手，对网页按钮的 制作、导航条的制作、整体网站的规划及制作等几个方面 进行实践，最后结合一个完整的实例进行综合设计。
11.2 制作网页导航
11．创建一个新图层，选择【矩形工具】在图像上绘制矩 形。 12．为矩形层添加【斜面与浮雕】图层样式效果。 13．按下D键将前景色设置为黑色，背景色设置为白色。新 建一个图层得到“图层4”，选择【直线工具】，设置【粗 细】数值为1，按住Shift绘制直线。 14．创建一个新图层得到“图层5”，按住Ctrl键的同时单击 “图层4”，按下Ctrl+Delete组合键填充“图层5”得到一条白 色的直线，按下Ctrl+D组合键取消选区。按键盘上的向下箭 头移动一个像素。
11.3 制作网页动画
4．继续在【动画】面板中单击【创建新图层】按钮添加4 帧，然后在【图层】面板中单击样式前面的眼睛图标隐藏 “图层1”的样式，且显示“沙”所在图层的图像。 5．用同样的方法，在【动画】面板中添加5帧，显示“图 层1”的样式，显示“数”所在图层的图像。 6．添加第6帧，隐藏“图层1”的样式，显示“码”所在图 层的图像。 7．添加第7帧，显示所有图层的样式。 8．添加第8帧，再次隐藏所有图层的样式。
11.2 制作网页导航
8．再按住Shift+Alt组合键，向右拖动并复制图像上的小正 圆图像，将其复制11份（也可视面板大小的情况决定复制 数目），这时，【图层】面板自动复制得到11个“图层3” 的副本层。 9．按下Shift键的同时选中所有小正圆所在的图层，选择 【移动工具】并单击其工具选项栏中的【水平居中分布】 图标，然后将小正圆的所有图层合并为一个图层并命名为 “小正圆”，将小正圆移动到适当位置。 10．拖动“小正圆”图层到面板下方的【创建新图层】按 钮上，复制得到4个副本层并调整到适当位置。
11.3 制作网页动画
5．切换到【路径】面板中将“工作路径”拖动至【创建新 图层】按钮上，存储该路径为“路径1”。 6．按下X键切换前景色的颜色为白色。选中“路径1”，单 击面板下方的【将路径作为选区载入】按钮，切换到【图 层】面板，创建一个新“图层1”，然后执行菜单栏中的 【编辑】＞【描边】命令，设置描边的【宽度】为3，确认 后按下Ctrl+D组合键取消选区。 7．使用工具箱中的【钢笔工具】，绘制出一条路径。 8．切换到【图层】面板，创建一个新“图层2”，选择【画 笔工具】，设置画笔大小。然后单击【路径】面板下方的 【用画笔描边路径】按钮。
11.1 制作网页按钮
12．设置前景色的颜色为607f9f的色值，选择【横排文字工 具】为按钮输入文字，并为文字添加【外发光】图层样式 效果。
11.2 制作网页导航
11.2.1 本例效果
11.2 制作网页导航
11.2.2 操作步骤 1．按下Ctrl+N组合键新建一个大小为185×340像素，分辨 率为72，名为“网页导航”的文件。 2．新建一个图层得到“图层1”，设置前景色的色值为＃ 325ee0，背景色为白色。选择工具箱中的【圆角矩形工具】， 在其工具选项栏中选择“填充像素”按钮，并设置半径值 为10px，然后在图像上绘制矩形。 3．按下Ctrl+A全选图像，选择【移动工具】，分别单击其 工具选项栏中的【垂直居中对齐】图标和【水平居中对齐】 图标，使矩形处于画布正中间的位置。
11.4 制作婚纱摄影网站首页
8．按下Ctrl+R组合键调出标尺，使用【移动工具】从图像 窗口的左端拖拉出一条垂直走向的辅助线，并根据标尺的 尺度置于合适的位置。 9．按住Alt键的同时单击【创建新图层】按钮，在打开的 【新建图层】对话框中命名为“细线”。 10．设置前景色的颜色为ef6198的色值，选择工具箱中的 【直线工具】并设置其工具选项栏的粗细值为1，接着在图 像与辅助线平行的右端位置按住Shift键拖拉绘制一条直线。
11.1 制作网页按钮
8．按住Shift+Alt组合键拖动图像上的正圆到矩形的另一端， 这时，【图层】面板自动复制得到“图层2副本”。 9．按住Shift+Ctrl组合键分别单击“图层2副本”和“图层2” 同时调出选区，然后选中“图层1”按下Delete键删除选区内 的图像。按住Ctrl+D组合键取消选区。 10．接着选择【移动工具】，分别选中“图层2”和“图 层2副本”层，按下键盘上的左右键向左和向右移动一个像 素。 11．接下来分别选中“图层2”和“图层2副本”层，添加同 样的【斜面与浮雕】图层样式效果，并根据效果设置适当 的相关参数。
11.3 制作网页动画
11.3.1 本例效果
11.3 制作网页动画
11.3.2 操作步骤 1．按下Ctrl+N组合键新建一个大小为400×240像素，分辨 率为72，名为“创建动画”的文件。 2．按下D键将前景色和背景色设置为默认的黑色和白色。 按下Alt+Delete组合键将背景填充为黑色。 3．选择工具箱中的【圆角矩形工具】，在其工具选项栏中 选择“路径”按钮。然后在画布上拖动鼠标绘制圆角矩形。 4．按下Ctrl+T组合键对当前的路径进行自由变换操作，在 变换框内单击右键，在弹出的下拉菜单中选择【透视】命 令，向右拖动圆角矩形左上角的变换控制点。
11.1 制作网页按钮
4．单击【图层】面板上方的【锁定透明像素】图标，锁定“图 层1”的透明像素。 5．接着选择工具箱中的【渐变工具】，调整渐变颜色条。并将 工具选项栏中的渐变模式设置为【线性渐变】。按住Shift键由上 往下填充渐变颜色。 6．单击【图层】面板底部的【添加图层样式】按钮，在弹出的 下拉菜单中选择【斜面与浮雕】命令，设置【大小】的数值为1 像素，其它参数保持默认不变。单击【确定】按钮得到具有斜面 与浮雕效果的矩形。 7．新建一个图层得到“图层2”。将前景色的颜色设置为a4b7f0的 色值。选择工具箱中的【椭圆工具】，在矩形左端的中间部位按 住Shift键画正圆。
11.3.1 本例效果
11.4 制作婚纱摄影网站首页
创建主页初步雏形 1．按下Ctrl+N组合键新建一个文件。在【新建】对话框中 设置名称为 “婚纱摄影主页”，宽为778像素，高为570像 素，分辨率为72，背景内容为白色。 2．选择工具箱中的【钢笔工具】，在图像上绘制一条路径。 然后切换到【路径】面板单击其下方的【将路径作为选区 载入】按钮。 3．回到【图层】面板。将前景色的色值设为f6c834并新建 一个图层得到“图层1”，按住Alt+Delete组合键填充前景色。 按住Ctrl+D组合键取消选区。
11.3 制作网页动画
9．按照步骤7和步骤8同样的方法绘制出如图11-47所示的另 一条路径。然后设置前景色的颜色为青色（#00a0e9），保 持画笔参数不变，创建一个新“图层3”后，单击【路径】 面板下方的【用画笔描边路径】按钮描边路径。 10．选中“图层1”，使用选框工具勾选出圆角矩形与刚刚 制作的发光源相交的位置，然后按下Delete键删除，得到一 个小缺口。 11．设置前景色的颜色为白色，选择合适的文字类型及大 小，分别输入“白沙数码”和一个网址文字。
11.2 制作网页导航
15．向下合并图层得到“图层4”。按住Ctrl键的同时单击矩 形图像的图层调出其选区，再按下Ctrl+Shift+I组合键进行 反选，按Delete键删除多余的直线后取消选区。 16．按住Shift+Alt组合键拖动“图层4”，向下复制出3个 “图层4”副本，并调整到适当的位置。 17．打开上一节制作完成的网页按钮文件，将中间的3个图 层合并为一个图层，然后使用【移动工具】将其拖拉到 “网页导航”窗口中，视情况使用自由变换操作调整其大 小。 18．按住Shift+Alt组合键拖动按纽图层，将其复制四份并调 整位置。
11.4 制作婚纱摄影网站首页
4．将前景色的颜色设置为黑色，然后新建一个图层得到“图 层2”。选择工具箱中的【矩形选框工具】，在图像的底部拖拉 画一个矩形选区。 5．单击【选择】＞【羽化】命令，在弹出的对话框中将羽化 的半径值设置为1。 6．按住Alt+Delete组 合键使用前景色填充选区，然后按住 Ctrl+D组合键取消选区。 7．将前景色的颜色设置为白色并新建一个图层得到“图层3”， 选择工具箱中的【直线工具】并设置其工具选项栏的粗细值为 1，接着在图像的黑色位置按住Shift键拖拉绘制一条白色的直 线。然后按下键盘上的向上箭头将白色直线移到黑色矩形上边 缘的交界处。
11.3 制作网页动画
9．在按住Shift键的同时在【动画】面板中单击第1帧和第8 帧，将这8个帧全部选中，然后在任意一帧的下方单击鼠标 右键，在弹出的菜单中选择“0.5”，将每一帧的播放速度设 置为0.5秒/帧。 10．在【动画】面板中单击按钮播放动画，即可预览动画 效果。
11.4 制作婚纱摄影网站首页
11.1 制作网页按钮
11.1.1 本例效果
11.1 制作网页按钮
11.1.2 操作步骤 1．按下Ctrl+N组合键新建一个大小为200×80像素，分辨率 为72，名为“网页按钮”的文件。 2．新建一个图层得到“图层1”，设置前景色的色值为＃ 597be2 597be2，背景色的色值为＃e6eaf7。选择工具箱中的【圆角 e6eaf7 矩形工具】，在工具选项栏中选择“填充像素”按钮，并 将其半径设置为6px，然后在图像上绘制矩形。 3．按下Ctrl+A全选图像，选择【移动工具】，分别单击其 工具选项栏中的【垂直居中对齐】图标和【水平居中对齐】 图标，使矩形处于画布正中间的位置。