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