《第9章网页制作》由会员分享，可在线阅读，更多相关《第9章网页制作（28页珍藏版）》请在金锄头文库上搜索。
1、第9章 网页制作,9.1 制作按钮,9.1.1 案例简介,本案例是一个比较简单的网页按钮制作过程。通过本案例的学习，读者可以初步了解网页组成元素之一“按钮”的制作方法。案例效果如下图显示。,网页按钮效果图,9.1.2 案例步骤,新建图像文件，新建图层，利用“圆角矩形”工具绘制圆角矩形，并将路径转化为选区，填充为浅蓝色后，取消选区。,绘制矩形,填充颜色并取消选区,1新建文件并绘制淡蓝色圆角矩形,为“图层1”添加“斜面和浮雕”“内发光”“光泽”“渐变叠加”“外发光”“投影” 样式。效果如下图所示。,绘制好的按钮形状,2为圆角矩形添加立体效果,利用“横排文字”工具输入英文Homepage， 然后为其
2、添加“内阴影”“渐变叠加”“投影”样式，效果如下图所示。,按钮完成效果,3添加文字并设置效果,9.1.3 扩展项目,利用本节所学的知识制作另一圆形按钮，效果如下图所示。制作完成后将图像以“按钮制作2.jpg”为名进行保存。,圆形按钮效果,9.2 制作简单动画,9.2.1 案例简介,网页动画主要分为Flash动画和GIF动画两种类型，利用Photoshop可以制作简单的GIF动画。本案例通过制作下图显示的的文字变色、花纹变形的GIF动画，学习利用Photoshop软件制作GIF动画的具体方法。,动画效果图,9.2.2 案例步骤,在Photoshop中新建一个图像文件，单击“确定”按钮，创建的图像
3、效果如下图所示。,“新建”对话框,新建的空白图像文件,1新建文件,填充图层,输入文字,自由变换后的效果,利用“横排文字”工具输入英文WELCOME，将文字创建为选区。新建一个图层，命名为“文字高光”，将其填充为淡粉色并取消选区，将“文字高光”图层缩放95.00%，得到如下图所示效果。,2输入文字并设置效果,将路径转换为选区并填充,绘制花形装饰,创建一个新图层并将其命名为“花朵1”。利用“自定形状”工具 绘制一个花形装饰路径，将路径转为选区，并用淡粉色填充，然后为其添加“内阴影”“内发光”“光泽”“渐变叠加”“外发光”“投影”样式，花纹的最终效果如下图所示。,3绘制花纹并设置效果,花纹最终效果,
4、将“花朵1”图层复制出3个，重命名后创建图层组，依次将“花朵2” “花朵3”“花朵4”缩放比例设置为115.00%、130.00%、145.00%，最终效果如下图所示。,4复制多个花纹效果,调整其他图层中花朵的大小,复制图层后的效果,调整“花朵2”图层中花朵的大,打开“时间轴”调板，在其中选择“创建帧动画” “永远” “0.2秒“选项， 将“Welcome” 外的图层隐藏，单击“时间轴”调板底部的“复制所选帧”按钮 ，复制得到第2帧，显“Welcome”、“文字高光”和“花朵1”图层，隐藏其他花朵图层，参考前面的操作复制得到第3帧，利用同样的方法复制得到第4、5帧。,5设置动画效果,第1帧画面
5、显示效果,第2帧画面显示效果,第3帧画面显示效果,第4帧画面显示效果,第5帧画面显示效果,9.2.3 扩展项目,利用本节所学知识，制作桃心闪动的动画效果，制作完成后，将动画以“桃心闪动.gif”为名进行保存。,桃心闪动效果,9.3 设计网页导航条,9.3.1 案例简介,Photoshop是网页设计师的首选工具，网页导航条设计是网页设计的重要组成部分。本案例介绍下图所示的红色网页导航条的制作过程。,红色网页导航器,9.3.2 案例步骤,新建空白图像文件，将背景图层转换为普通图层 “图层0”，绘制一个红色的圆角矩形，一个白色小圆角矩形， 然后为其添加“投影”样式。,1新建文件并绘制红色圆角矩形,绘
6、制一个圆角矩形,绘制白色小圆角矩形,“投影”样式效果,利用“横排文字”工具输入网页导航英文内容：HOME、Company、News、Packages、Contacts、Guestbook。并设置文字属性。,2添加文字,绘制白色小圆角矩形,利用“矩形选框”工具绘制矩形选区，羽化2像素，创建新图层“图层1”后，为选区填充纯白色，将“图层1”复制4次，并移动白色矩形的位置，导航条的最终效果如下图所示。,3添加按钮间的分割线,矩形效果,导航条完成效果,9.3.3 扩展项目,利用前面所学的方法制作一个水晶导航条，效果如下图所示。制作完成后将文件以“水晶导航条.jpg”为名进行保存。,水晶导航条,9.4
7、设计网页标志,9.4.1 案例简介,标志设计一般是将图形和文字结合在一起进行设计，作品往往需要展示设计理念、体现主题个性。好的标志设计让人易识别、易记忆。下面介绍使用Photoshop设计标志的方法，希望对读者以后设计标志有所帮助。案例效果如下图所示。,标志设计,9.4.2 案例步骤,新建图像文件，然后将背景图层转换为普通图层。,“新建”对话框,新建文件,1新建文件,利用 “椭圆”工具，绘制绿色花心，利用“钢笔”工具绘制绿色花瓣。将花形载入选区填充渐变色，移动其位置作为花形的阴影，然后为花形添加“内发光”样式。,具有阴影的花形,2绘制花形,绘制花形,填充渐变色,设置“内发光”后的效果,利用“横
8、排文字”工具输入文本“STAR”和 “影院”，为“STAR影院”图层添加“内发光”样式。利用以上的方法为文字制作阴影效果。,使用渐变色填充文字选区,3添加文字,输入文字,文字的“内发光”效果,文字阴影效果,9.4.3 扩展项目,利用前面所学知识为自己的班级设计一个标志，制作完成后将其以“班级标志.jpg”为名进行保存。,9.5 设计网页页面,9.5.1 案例简介,网页页面包含了背景、导航条、按钮、logo、文字等元素，利用Photoshop软件将这些元素进行组合，并排版制作，即可设计出精美的网页页面。本案例以电影网站为设计主题，案例效果如右图所示。,9.5.2 案例步骤,新建一个图像文件，单击
9、“确定”按钮，得到一个空白的图像。,1新建文件,新建文件,创建的空白图像文件,打开本书配套素材“第9章”文件夹中的“网页素材1.jpg”文件，将图像移至新建的图像窗口中并占满整个画布，利用“矩形”工具绘制两个白色的矩形形状，将“矩形1”形状填充为渐变色，为两个形状图层分别添加相同的“投影”样式。将素材“网页素材2.jpg”文件，移动到新建的图像窗口中，并制作渐变效果。,2制作背景,“批处理”文件夹,网页整体布局,调整图像大小后的效果,打开素材 “网页素材3.jpg”至“网页素材7.jpg”文件，分别复制到新建的图像窗口中，并在每幅图像下方绘制浅灰色矩形条， 利用“横排文字”工具输入电影名称，利用“多边形”工具绘制箭头形状，然后利用同样的方法制作网页下方的内容。,3制作内容,9.5.3 扩展项目,利用前面所学的方法设计一个主题为我的校园的网页，制作完成后保存为“我的校园.jpg”文件。,
