第9章 网页设计与ImageReady的应用.ppt

第9章网页设计与ImageReady的应用
利用Photoshop设计网页
ImageReady快速入门
GIF动画制作实例
网页图像的切片
网页图像优化和Web页输出
习题与上机操作
教学目标
网页设计已经逐渐成为一个热门的话题,而Photoshop又是设计页面的重要工具。通过前面的学习,相信大家利用Photoshop来制作网页的页面已经不是什么问题了,本章的主要目标是讲解如何切片和优化网页图片,以及如何制作Web画廊和GIF动画等。
重点与难点
◆图像的切片与优化
◆熟悉ImageReady,初步掌握制作动画的方法
◆ GIF动画制作
◆ Web页的输出
利用Photoshop制作个人主页
本节利用Photoshop,制作一个介绍图形图像的个人主页。在实例中,主色调选用了蓝色,蓝色能给人一种平静、理智、永恒、博大的感觉。同时,运用白色、蓝色和其它颜色的搭配,使网页显得典雅、温馨。
个人主页效果
 设计标题栏
创建新的图像文件
启动Photoshop,执行【文件】|【新建】命令,创建一个新的图像文件,如图所示。设置完后,单击【好】按钮。
创建参考线
执行【图层】|【新建】|【图层组】命令,弹出【新图层组】对话框,设置【名称】为“title”,如图所示。
设置新建的图像文件
设置新图层组
单击【好】按钮。在【图层】面板中,新增【图层1】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为【固定大小】,【宽度】为“770像素”,【高度】为“100像素”,在【图层1】中创建一个选区,如图所示。
按Ctrl+R键,打开标尺,用鼠标从横向标尺上拉出一条参考线,如图所示。
创建一个矩形选区
创建参考线
制作背景图案
按Ctrl+R键,隐藏标尺,设置前景色为白色,按Alt+Delete键,用前景色填充选区。按Ctrl+D键,取消选择,在【路径】面板中新增【路径1】,用【钢笔工具】绘制出路径,如图所示。
在【路径】面板中新增【路径2】,用【钢笔工具】绘制出路径,如图。
绘制出路径1
绘制出路径2
在【图层】面板中,新增【图层2】。按住Ctrl键,单击【路径】面板中的【路径1】,将路径转化为选区。选择工具箱中的【渐变工具】,在【选项】栏中单击【点按可编辑渐变】按钮,弹出【渐变编辑器】对话框,在渐变色条下,设置左端色标的RGB值为(235,241,246),右端色标的RGB值为(135,185,248),其它参数设置如图所示。
设置完后,单击【好】按钮。按住Shift键,用鼠标从选区的顶端拖拉到底端,创建渐变,按Ctrl+D键,取消选区,如图所示。
设置渐变色
从上到下的渐变效果
新增【图层3】,按住Ctrl键,在【路径】面板中单击【路径2】,将路径转变为选区。选择工具箱中的【渐变工具】,在【选项】栏中单击【点按可编辑渐变】按钮,打开【渐变编辑器】对话框,在渐变色条下,保持左端色标的颜色不变,设置右端色标颜色的RGB值为(170,204,248),单击【好】按钮。
按住Shift键,用鼠标从选区的上端拖拉到选区的下端,创建渐变效果。在【图层】面板中,将【图层3】调整到【图层2】的下面,按Ctrl+D键,取消选择,效果如图
选择工具箱中的【减淡工具】,在工具【选项】栏中,设置参数如图所示。
用鼠标涂抹过渡不自然的区域,润饰图像,效果如图所示。
渐变填充效果
设置【减淡工具】的参数
润饰图像后的效果
制作LOGO文字
选择工具箱中的【横排文字工具】,在【选项】栏中设置文字颜色为黑色,输入文字,如图所示。
执行【图层】|【图层样式】|【渐变叠加】命令,单击【点按可编辑渐变】按钮,打开【渐变编辑器】对话框,设置左端色标的RGB值为(20,91,210),右端色标的RGB值为(255,255,255),如图所示。
输入“图像爱好者天堂”
设置渐变色