Photoshop基础与技能实训教程第十二章 网页静态页面设计与制作

《Photoshop基础与技能实训教程第十二章 网页静态页面设计与制作》由会员分享，可在线阅读，更多相关《Photoshop基础与技能实训教程第十二章 网页静态页面设计与制作（71页珍藏版）》请在金锄头文库上搜索。

1、第十二章 网页静态页面设计与制作 12.1 网页静态页面设计基本知识12.2 网页静态页面设计案例操作 12.1 网页静态页面设计基本知识 1. 静态页面 静态页面设计不包含在服务器端运行的任何脚本，其内容形 式固定不变。静态网页设计就是利用静态网页中所包含的元 素，对网页进行美化处理，力求使网页界面美观舒适，为网 页所承载的内容提供一个良好的展示环境，达到最好的展示 效果。 静态网页在公共网站、政府网站中的使用最为广泛。 下一页12.1 网页静态页面设计基本知识 2. 网页界面的组成部分 （1）Logo 标记（2）导航条（3）横幅（Banner）（4）文字（5）图形图像下一页上一页12.1

2、网页静态页面设计基本知识 3. 网页的几种布局形式（1） “同”形布局：网页布局呈“同”字形，是一些大型 网站所喜欢的类型，上面是网站的标题以及横幅广告条，接 下来就是网站的主要内容，左右分列两小条内容，中间是主 要部分，最下面是网站的基本信息、联系方式、版权声明等。 （2） “厂”形布局：网页上面是标题及广告横幅，接下来 左（右）侧是一窄列导航链接，右（左）列是很宽的正文， 下面可以有一些网站的辅助信息。 （3） “工”形布局： “工”形网页布局与“厂”形布局类 似，上面是标题及广告横幅，下面是左右等宽的正文区，最 下面是网站的一些基本信息、联系方式和版权声明等。 上一页返 回12.2 网页

3、静态页面设计案例操作 1. 网站首页设计网站首页设计效果如图121 所示。下一页12.2 网页静态页面设计案例操作首页界面制作操作步骤如下： （1）新建 Photoshop 图像文件，参数设置如图122所示。 （2）在图层面板点击【创建新组】按钮，给新组命名为 “top” ，在页面设计中，将所有网页头部所用图层全部放 置在该组中。在“top”组下新图层，重命名为“bg” ，在 图像窗口中用矩形选框工具绘制出一个矩形，将前景色设置 为“R：235，G：255，B：204，H：84，S：20%，B： 100%” ，按 Alt + Delete组合键给选区着前景色。 （3）新建图层，重命名为“lin

4、e1” ，前景色颜色设置为 “R：152，G：203，B：0，H：75 ，S：100%，B：80%” ，选择“矩形选框工具” ，在图像窗口顶部创建一个细长的 矩形选区，按 Alt + Delete组合键给选区着前景色。效果如 图 123 所示。 下一页上一页12.2 网页静态页面设计案例操作（4）新增图层，重命名为“line2” ，在图层 line2 中， 运用椭圆选框工具绘制出一个椭圆，同时点击椭圆选框工具 选项栏的【从选区减去】 按钮，在刚才绘制的椭圆内绘制出 第二个椭圆，如图124 所示。按 Alt + Delete组合键给选 区着前景色，移动“图层 line2”中的圆圈到网页上部。按

5、Ctrl+J 组合键复制“图层 line2” ，产生“line2 副本” 。在“line2 副本”图层中，按 Ctrl+T 组合键将椭圆圆圈 对象进行改变，并移动对象到网页的上部。在图层面板中调 整“图层 line2”和“line2 副本”层的不透明度为 32%。 效果如图125 所示。（5）选择文本工具，设置文字字体、字号和颜色，这里将字 体选择为“华康少女文字” ，字号为“12点” ，颜色为 “#ff0000” ，在字符面板中设置 为“120%” ， 为“20” 下一页上一页12.2 网页静态页面设计案例操作。在图像窗口中输入“E 派” ，按Ctrl+T 组合键调整文本 相对水平的角度，并

6、用“移动工具”移动文本到合适的位置 ，在文本图层添加图126、图127所示的图层样式，设置后 的效果如图128所示。（6）选择文本工具，设置文字字体、字号和颜色，这里将字 体选择为“经典综艺体简” ，字号为“8 点” ，颜色为 “#0000ff” ，在“字符”面板中设置字符样式为“仿粗体 ” 。在图像窗口中输入文本“网上冲印店” ，并用移动工 具移动文本到合适的位置。效果如图129所示。（7）新增图层“line3”在 line3 层中，用矩形选框工具在 网页 Logo 标记下绘制出细长条矩形区域，设置前景色为“R ：72，G：187，B：34，H：105，S：82%，B：73%”用前景 色填充

7、该区域。 （8）新增图层“icon” ，用圆形矩形工具 ，在选项栏中选 择【路径】按钮，半径设为8 像素，在网页 Logo 标记旁绘 制出一个椭圆矩形闭合路径如： ，用直接选择工具 调整下一页上一页12.2 网页静态页面设计案例操作路径如 ，打开路径面板，在面板中点击【将路径作为选取载 入】 按钮，这时刚才绘制的路径将转换为选区，如 。设置 前景色为“R：152，G：203，B：0，H：75，S：100%，B： 80%” ，背景色为白色，选择“渐变工具” ，在工具栏中选 择颜色渐变模式为【前景到背景】 ，渐变模式为【对称渐变 】 ，用渐变工具在刚才产生的选区中从下往上拖动鼠标给该 区域填充渐变

8、颜色。按 Ctrl+T 组合键对该区域进行调整。 效果如图1210所示。（9）按住 Alt 键，用鼠标左键点击（8）中产生的图像，当 鼠标出现黑白重叠的双箭头时拖动图像，即产生一个该图像 的副本，同时图层面板中出现“icon 副本”层。同样的方法 复制出 6 个这样的图像，排列好这些图像，得到如图1211 所示的效果。这是可以看到的图层面板，如图1212下一页上一页12.2 网页静态页面设计案例操作所示。选择“icon 副本 6”图层，执行【图层】|【向下合 并】命令，将“icon副本 6”与“icon副本 5”图层合并， 同样的方法依次将上一图层与下一图层合并，最后将所有的 icon 层合并

9、成一层，如图1213所示。 （10）选择文本工具，设置字体为“隶书” ，颜色为 “#000000” ，字号为“4点” ，分别在按钮图像上输入“ 首页” 、 “我的相册” 、 “网上冲印” 、 “数码商城 ” 、 “数码资讯” 、 “共享相册” 、 “E派社区” ， 并用移动工具调整文本位置，这样一个网页的导航就完成了 。效果如图1214所示。 （11）新增一个组，命名为“top-left” ，在“top-left” 组中新增图层“bg” ，在“bg”图层中，用选框工具绘制出 一个矩形选区，将前景色设置为“R：152，G：203，B：0，H ：75，（11）新增一个组，命名为“top-left”

10、下一页上一页12.2 网页静态页面设计案例操作，在“top-left”组中新增图层“bg” ，在“bg”图层中， 用选框工具绘制出一个矩形选区，将前景色设置为“R：152 ，G：203，B：0，H：75，S：42%，B：93%” 。选择“渐 变工具” ，在工具栏中选择颜色渐变模式为【前景到背景】 ，渐变模式为【线性渐变】 ，用渐变工具在矩形选区中从上 往下拖动鼠标给该区域填充渐变颜色。效果如图1215所示。（12）新增一层，命名为“bfl” ，选择“形状工具” ，在 选项栏中点击【填充像素】按钮 ，选择“形状”为 蝴蝶， 设置前景色为“R：187，G：220，B：66，H：73 ，S：70%

11、，B：86%” 。用设置好的形状工具在上一步完成的矩形图像 上绘制大小、位置不同的蝴蝶图案。将“bfl”层不透明度设 置为 42%，效果如图1216所示。 下一页上一页12.2 网页静态页面设计案例操作（13）新增一层，命名为“leaf” ，选择“形状工具” ， 设置与上一步骤相同，只将“形状”选择为 三叶草，用该工 具在矩形区域上部绘制出一颗三叶草。按 Ctrl 键点击图层 面板中的“leaf”图层，在图像窗口便显示三叶草图形选区 。选择渐变工具，设置前景色为“R：250，G：230，B：80， H：53 ，S：68%，B：98%” ，背景色设置为“R：212，G ：142，B：9，H：39

12、 ，S：96%，B：83%” ，在“渐变工 具”选项栏中设置颜色渐变模式为【前景到背景】 ，渐变模 式为【径向渐变】 ，从三叶草选区的中心往边缘拉动鼠标， 给选区填充径向渐变颜色，取消选择。复制“leaf”图层， 用自由变换命令调整三叶草的大小和相对水平线的角度，调 整后效果如图1217所示。 下一页上一页12.2 网页静态页面设计案例操作（14）选择“文本工具” ，设置字体为“楷体” 、字号为 “9 点” 、颜色为“白色” ，在矩形区域上输入文本“快 速网上冲印服务” 。 （15）新增图层“shade1” ，选择“圆角矩形工具”设置前 景色为“#E2EE89” ，绘制圆角矩形图案。新增图层

13、“shade2” ，将前景色设置为“#E2EE89” ，绘制另一个圆 角矩形图案。 （16）选择“文本工具” ，设置字体为“楷体” 、字号为 “4 点” 、颜色为“#FD3A57” ，在圆角矩形区域上输入文 本“把您的快乐分享到世界每一个角落” 。 （17）选择“文本工具” ，设置字体为“楷体” 、字号为 “4 点” 、颜色为“#0666DD” ，在矩形图像的右下角输入下一页上一页12.2 网页静态页面设计案例操作“客服电话：800 810 1234” ，调整步骤（14）步骤（17 ）制作的对象，调整后的效果如图1218所示。 （18）新增图层，命名为“pics1” ，选择“圆角矩形工具 ”

14、，设置前景色为白色，用该工具在矩形方框左下角部位绘 制圆角矩形图形。给“pics1”图层添加投影图层样式，样式 设置对话框如图1219所示。 （19）新增图层，命名为“pics2” ，参考步骤（18）在刚 绘制的圆角矩形旁，绘制另一个圆角矩形。添加参数设置相 同的投影图层样式。调整两个圆角矩形的大小和位置，调整 后效果如图1220所示。（20）新增图层“pics3” ，选择圆角矩形工具，设置前景 色颜色“#EBEBEB” ，在矩形方框下面绘制圆角矩形图形。 （21）用文本工具，字体设置为“楷体” 、字号为“5 点” ，设置文字颜色为黑色，输入文本“柯达皇家相纸” 。再次 使用文本工具，将文字颜

15、色设置为“#FC5655” ，输入文本 “0.8 元/张” 。效果如图1221所示。 下一页上一页12.2 网页静态页面设计案例操作（22）新增图层“pics4” ，激活该图层，同时按住 Ctrl 键点击“pics3”图层，显示选区后，将前景色设置为 “#FC5655” ，用前景色对该区域进行填充。注意，红色的 圆角矩形在图层“pics4”上。效果如图1222所示。（23）激活图层“pics4” ，点击图层面板下的【添加矢量 蒙版】 按钮给图层添加蒙版。在蒙版上添加如图1223所示 选区，给选区填充黑色，产生蒙版效果，效果如图1224所示 。 （24）用步骤（22） 、 （23）的方法，在图层

16、“pics4”上 新建图层“pics5” ，绘制圆角矩形填充颜色为“#F3FE0E” ，添加蒙版后的效果如图1225所示。 （25）打开“child.jpg”图像 ，将图像中的“小孩”图片 用移 工 移 到网页图像文件中。调整大小和位置后效果如图1226所示。 下一页上一页12.2 网页静态页面设计案例操作（26）新增图层“pics6” ，设置前景色为“#9ACC04” ， 用圆角矩形工具在刚才绘制的圆角矩形右边，绘制另一个圆 角矩形，大小与左边的大小相当。执行【编辑】|【描边】 ，设置描边宽度为 5 像素，颜色为“#F3FE0E” 。填充后效 果如图1227所示。 （27）打开“egg.jpg”图像文件，用“磁性套索工具” ， 沿图像文件中的“小鸡和鸡蛋”图案绘制出选区，产生闭合 选区后用移动工具将图案移动到网页图像文件，添加文本。 最后效果如图12