网页的设计.pptVIP

* 学习Photoshop在网页设计方面的运用。 一、教学目标 第11章 网页设计 二、教学重点 网页按钮的制作 网页导航的制作 网页动画的制作 网站的首页的制作 随着互联网的飞速发展，网页设计已经成行为一个具有相当深度与市场的设计领域。Photoshop为实现网页的个性和视觉效果，提供了广阔的空间，是目前网页设计的重要软件。本章从构成网页的几个主要元素入手，对网页按钮的制作、导航条的制作、整体网站的规划及制作等几个方面进行实践，最后结合一个完整的实例进行综合设计。 第11章 网页设计 11.1.1 本例效果 11.1 制作网页按钮 11.1.2 操作步骤 11.1 制作网页按钮 1．按下Ctrl+N组合键新建一个大小为200×80像素，分辨率为72，名为“网页按钮”的文件。 2．新建一个图层得到“图层1”，设置前景色的色值为＃597be2，背景色的色值为＃e6eaf7。选择工具箱中的【圆角矩形工具】，在工具选项栏中选择“填充像素”按钮，并将其半径设置为6px，然后在图像上绘制矩形。 3．按下Ctrl+A全选图像，选择【移动工具】，分别单击其工具选项栏中的【垂直居中对齐】图标和【水平居中对齐】图标，使矩形处于画布正中间的位置。 11.1 制作网页按钮 4．单击【图层】面板上方的【锁定透明像素】图标，锁定“图层1”的透明像素。 5．接着选择工具箱中的【渐变工具】，调整渐变颜色条。并将工具选项栏中的渐变模式设置为【线性渐变】。按住Shift键由上往下填充渐变颜色。 6．单击【图层】面板底部的【添加图层样式】按钮，在弹出的下拉菜单中选择【斜面与浮雕】命令，设置【大小】的数值为1像素，其它参数保持默认不变。单击【确定】按钮得到具有斜面与浮雕效果的矩形。 7．新建一个图层得到“图层2”。将前景色的颜色设置为a4b7f0的色值。选择工具箱中的【椭圆工具】，在矩形左端的中间部位按住Shift键画正圆。 11.1 制作网页按钮 8．按住Shift+Alt组合键拖动图像上的正圆到矩形的另一端，这时，【图层】面板自动复制得到“图层2副本”。 9．按住Shift+Ctrl组合键分别单击“图层2副本”和“图层2”同时调出选区，然后选中“图层1”按下Delete键删除选区内的图像。按住Ctrl+D组合键取消选区。 10．接着选择【移动工具】，分别选中“图层2”和“图层2副本”层，按下键盘上的左右键向左和向右移动一个像素。 11．接下来分别选中“图层2”和“图层2副本”层，添加同样的【斜面与浮雕】图层样式效果，并根据效果设置适当的相关参数。 11.1 制作网页按钮 12．设置前景色的颜色为607f9f的色值，选择【横排文字工具】为按钮输入文字，并为文字添加【外发光】图层样式效果。 11.2.1 本例效果 11.2 制作网页导航 11.2.2 操作步骤 11.2 制作网页导航 1．按下Ctrl+N组合键新建一个大小为185×340像素，分辨率为72，名为“网页导航”的文件。 2．新建一个图层得到“图层1”，设置前景色的色值为＃325ee0，背景色为白色。选择工具箱中的【圆角矩形工具】，在其工具选项栏中选择“填充像素”按钮，并设置半径值为10px，然后在图像上绘制矩形。 3．按下Ctrl+A全选图像，选择【移动工具】，分别单击其工具选项栏中的【垂直居中对齐】图标和【水平居中对齐】图标，使矩形处于画布正中间的位置。 11.2 制作网页导航 4．按下X键切换前景色与背景色的颜色。新建一个图层得到“图层2”，选择工具箱中的【椭圆工具】，按住Shift键在图像上绘制一个正圆，并将其置于圆角矩形遥左上角位置。 5．按住Shift+Alt组合键拖动图像上的正圆到矩形的底端。这时，【图层】面板自动复制得到“图层2副本”。 6．设置前景色的色值为839ce9，新建一个图层得到“图层3”，选择工具箱中的【椭圆工具】，按住Shift键在图像上绘制一个小正圆。 7．单击【图层】面板下方的【添加图层样式】按钮，在弹出的下拉菜单中选择【内阴影】命令，根据效果调整参数。 11.2 制作网页导航 8．再按住Shift+Alt组合键，向右拖动并复制图像上的小正圆图像，将其复制11份（也可视面板大小的情况决定复制数目），这时，【图层】面板自动复制得到11个“图层3”的副本层。 9．按下Shift键的同时选中所有小正圆所在的图层，选择【移动工具】并单击其工具选项栏中的【水平居中分布】图标，然后将小正圆的所有图层合并为一个图层并命名为“小正圆”，将小正圆移动到适当位置。 10．拖动“小正圆”图层到面板下方的【创建新图层】按钮上，复制得到4个副本层并调整到适当位置。 11.2 制作网页导航 11．创建一个