ps网页设计

学习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．创建一个新图层，选择【矩形工具】在图像上绘制矩形。12．为矩形层添加【斜面与浮雕】图层样式效果。13．按下D键将前景色设置为黑色，背景色设置为白色。新建一个图层得到“图层4”，选择【直线工具】，设置【粗细】数值为1，按住Shift绘制直线。14．创建一个新图层得到“图层5”，按住Ctrl键的同时单击“图层4”，按下Ctrl+Delete组合键填充“图层5”得到一条白色的直线，按下Ctrl+D组合键取消选区。按键盘上的向下箭头移动一个像素。11.2制作网页导航15．向下合并图层得到“图层4”。按住Ctrl键的同时单击矩形图像的图层调出其选区，再按下Ctrl+Shift+I组合键进行反选，按Delete键删除多余的直线后取消选区。16．按住Shift+Alt组合键拖动“图层4”，向下复制出3个“图层4”副本，并调整到适当的位置。17．打开上一节制作完成的网页按钮文件，将中间的3个图层合并为一个图层，然后使用【移动工具】将其拖拉到“网页导航”窗口中，视情况使用自由变换操作调整其大小。18．按住Shift+Alt组合键拖动按纽图层，将其复制四份并调整位置。11.2制作网页导航19．将所有按钮图像的图层合并为“按钮”图层，单击面板下方的【创建新组】按钮，然后将“按钮”图层拖入组中。然后单击【图层】面板下方的【创建填充或调整图层】按钮，在“按钮”图层的上方建立一个【色阶】调整图层，并调整其参数。20．按住Alt键在调整图层与“按钮”图层之间单击，建立剪贴组。输入文字。21．最后，单击【图层】面板下方的【创建填充或调整图层】按钮，在最上一层新建【色相/饱和度】填充图层，根据网页颜色的搭配情况随时调整可得到不同的效果。11.3.1本例效果11.3制作网页动画11.3.2操作步骤11.3制作网页动画1．按下Ctrl+N组合键新建一个大小为400×240像素，分辨率为72，名为“创建动画”的文件。2．按下D键将前景色和背景色设置为默认的黑色和白色。按下Alt+Delete组合键将背景填充为黑色。3．选择工具箱中的【圆角矩形工具】，在其工具选项栏中选择“路径”按钮。然后在画布上拖动鼠标绘制圆角矩形。4．按下Ctrl+T组合键对当前的路径进行自由变换操作，在变换框内单击右键，在弹出的下拉菜单中选择【透视】命令，向右拖动圆角矩形左上角的变换控制点。11.3制作网页动画5．切换到【路径】面板中将“工作路径”拖动至【创建新图层】按钮上，存储该路径为“路径1”。6．按下X键切换前景色的颜色为白色。选中“路径1”，单击面板下方的【将路径作为选区载入】按钮，切换到【图层】面板，创建一个新“图层1”，然后执行菜单栏中的【编辑】＞【描边】命令，设置描边的【宽度】为3，确认后按下Ctrl+D组合键取消选区。7．使用工具箱中的【钢笔工具】，绘制出一条路径。8．切换到【图层】面板，创建一个新“图层2”，选择【画笔工具】，设置画笔大小。然后单击【路径】面板下方的【用画笔描边路径】按钮。11.3制作网页动画9．按照步骤7和步骤8同样的方法绘制出如图11-47所示的另一条路径。然后设置前景色的颜色为青色（#00a0e9），保持画笔参数不变，创建一个新“图层3”后，单击【路径】面板下方的【用画笔描边路径】按钮描边路径。10．选中“图层1”，使用选框工具勾选出圆角矩形与刚刚制作的发光源相交的位置，然后按下Delete键删除，得到一个小缺口。11．设置前景色的颜色为白色，选择合适的文字类型及大小，分别输入“白沙数码”和一个网址文字。11.3制作网页动画12．接下来，分别为“图层1”、“图层2”、“图层3”、“白沙数码”文字的4个图层以及网址图层添加图层样式效果。13．设置完成后，单击【确定】按钮即可得到最终效果。制作动画效果11.3制作网页动画1．执行菜单栏中的【窗口】＞【动画】命令，打开【动画】面板。2．在【动画】面板中单击【创建新图层】按钮，添加一帧（第2帧），然后在【图层】面板中单击样式前面的眼睛图标隐藏所有图层的样式，且隐藏“白沙数码”所在的4个图层的图像。3．在【动画】面板中单击【创建新图层】按钮添加3帧，然后在【图层】面板中单击样式前面的眼睛图标显示“图层1”的样式，且显示“白”所在图层的图像。11.3制作网页动画4．继续在【动画】面板中单击【创建新图层】按钮添加4帧，然后在【图层】面板中单击样式前面的眼睛图标隐藏“图层1”的样式，且显示“沙”所在图层的图像。5．用同样的方法，在【动画】面板中添加5帧，显示“图层1”的样式，显示“数”所在图层的图像。6．添加第6帧，隐藏“图层1”的样式，显示“码”所在图层的图像。7．添加第7帧，显示所有图层的样式。8．添加第8帧，再次隐藏所有图层的样式。11.3制作网页动画9．在按住Shift键的同时在【动画】面板中单击第1帧和第8帧，将这8个帧全部选中，然后在任意一帧的下方单击鼠标右键，在弹出的菜单中选择“0.5”，将每一帧的播放速度设置为0.5秒/帧。10．在【动画】面板中单击按钮播放动画，即可预览动画效果。11.3.1本例效果11.4制作婚纱摄影网站首页创建主页初步雏形11.4制作婚纱摄影网站首页1．按下Ctrl+N组合键新建一个文件。在【新建】对话框中设置名称为“婚纱摄影主页”，宽为778像素，高为570像素，分辨率为72，背景内容为白色。2．选择工具箱中的【钢笔工具】，在图像上绘制一条路径。然后切换到【路径】面板单击其下方的【将路径作为选区载入】按钮。3．回到【图层】面板。将前景色的色值设为f6c834并新建一个图层得到“图层1”，按住Alt+Delete组合键填充前景色。按住Ctrl+D组合键取消选区。11.4制作婚纱摄影网站首页4．将前景色的颜色设置为黑色，然后新建一个图层得到“图层2”。选择工具箱中的【矩形选框工具】，在图像的底部拖拉画一个矩形选区。5．单击【选择】＞【羽化】命令，在弹出的对话框中将羽化的半径值设置为1。6．按住Alt+Delete组合键使用前景色填充选区，然后按住Ctrl+D组合键取消选区。7．将前景色的颜色设置为白色并新建一个图层得到“图层3”，选择工具箱中的【直线工具】并设置其工具选项栏的粗细值为1，接着在图像的黑色位置按住Shift键拖拉绘制一条白色的直线。然后按下键盘上的向上箭头将白色直线移到黑色矩形上边缘的交界处。11.4制作婚纱摄影网站首页8．按下Ctrl+R组合键调出标尺，使用【移动工具】从图像窗口的左端拖拉出一条垂直走向的辅助线，并根据标尺的尺度置于合适的位置。9．按住Alt键的同时单击【创建新图层】按钮，在打开的【新建图层】对话框中命名为“细线”。10．设置前景色的颜色为ef6198的色值，选择工具箱中的【直线工具】并设置其工具选项栏的粗细值为1，接着在图像与辅助线平行的右端位置按住Shift键拖拉绘制一条直线。11.4制作婚纱摄影网站首页11．拖动“细线”图层到【创建新图层】按钮上分别复制“细线副本”和“细线副本2”。将使用【移动工具】将他们移动到适当的位置。12．再次使用【移动工具】从图像窗口的左端拖拉出另一条辅助线，并根据标尺的尺度置于合适的位置。制作图片框架11.4制作婚纱摄影网站首页1．在本书配套光盘中打开一幅图像大小为114×124像素、名为“白纱服装”的图像文件。2．使用【移动工具】将其拖拉到“婚纱摄影主页”紧贴第二条辅助线的图像中，。这时，【图层】面板自动生成一个“图层4”，双击“图层4”将其改名为“白纱服装”。3．单击面板下方的【添加图层样式】按钮