第17章 网页设计与ImageReady的应用

17.1 利用Photoshop设计网页 17.2 ImageReady快速入门 17.3 网页banner动画制作

第17章 网页设计与ImageReady的应用

本章目标网页设计已经逐渐成为一个热门的话题，而 Photoshop又是设计页面的重要工具。通过前面的学习， 相信大家利用Photoshop来制作网页的页面已经不是什 么问题了，本章的主要目标是讲解如何切片和优化网 页图片，以及如何制作Web画廊和GIF动画等。

17.1 利用Photoshop制作个人主页

制作个人主页制作一个介绍图形图像的个人主页。在实例中，主色调选用了蓝 色，蓝色能给人一种平静、理智、永恒、博大的感觉。同时，运用白 色、蓝色和其它颜色的搭配，使网页显得典雅、温馨。

17.1 利用Photoshop制作个人主页

设计标题栏

创建新的图像文件 启动Photoshop,执行【文件】|【新建】命令，创建一个新的 图像文件，如图所示。设置完后，单击【好】按钮。

创建参考线

执行【图层】|【新建】|【图层组】命令，弹出【新图层组】 对话框，设置【名称】为“title”

17.1 利用Photoshop制作个人主页

设计标题栏新增【图层1】,选择工具箱中的 【矩形选框工具】,在【选项】栏 中设置【样式】为【固定大小】, 【宽度】为“770像素”,【高度】 为“100像素”,在【图层1】中 创建一个选区，如图所示。 创建一个矩形选区

按Ctrl+R键，打开标尺，用鼠标从 横向标尺上拉出一条参考线，如图 所示。 创建参考线6

17.1 利用Photoshop制作个人主页

设计标题栏制作背景图案 按Ctrl+R键，隐藏标尺，设置前景 色为白色，按Alt+Delete键，用前 景色填充选区。按Ctrl+D键，取消 选择，在【路径】面板中新增【路 径1】,用【钢笔工具】绘制出路 径，如图所示。

绘制出路径1

在【路径】面板中新增【路径2】, 用【钢笔工具】绘制出路径，如 图。

绘制出路径2

17.1 利用Photoshop制作个人主页

设计标题栏在【图层】面板中，新增【图层2】。 按住Ctrl键，单击【路径】面板中的 【路径1】,将路径转化为选区。选 择工具箱中的【渐变工具】,在【选 项】栏中单击【点按可编辑渐变】按 钮，弹出【渐变编辑器】对话框，在 渐变色条下，设置左端色标的RGB值 为(235,241,246),右端色标的 RGB值为(135,185,248),其它 参数设置如图所示。

设置渐变色

设置完后，单击【好】按钮。按住 Shift键，用鼠标从选区的顶端拖拉到 底端，创建渐变，按Ctrl+D键，取消 选区，如图所示。

从上到下的渐变效果8

17.1 利用Photoshop制作个人主页

设计标题栏新增【图层3】,按住Ctrl键，在【路 径】面板中

单击【路径2】,将路径转 变为选区。选择工具箱中的【渐变工 具】,在【选项】栏中单击【点按可编 辑渐变】按钮，打开【渐变编辑器】对 话框，在渐变色条下，保持左端色标的 颜色不变，设置右端色标颜色的RGB 渐变填充效果 值为(170,204,248),单击【好】 按钮。 按住Shift键，用鼠标从选区的上端拖拉 到选区的下端，创建渐变效果。在【图 设置【减淡工具】的参数 层】面板中，将【图层3】调整到【图 层2】的下面，按Ctrl+D键，取消选择， 效果如图 选择工具箱中的【减淡工具】,在工具 【选项】栏中，设置参数如图所示。 用鼠标涂抹过渡不自然的区域，润饰图 像，效果如图所示。

润饰图像后的效果9

17.1 利用Photoshop制作个人主页

设计标题栏制作LOGO文字 选择工具箱中的【横排文字工具】, 在【选项】栏中设置文字颜色为黑 色，输入文字，如图所示。 输入“图像爱好者天堂”

执行【图层】|【图层样式】| 【渐变叠加】命令，单击【点按可 编辑渐变】按钮，打开【渐变编辑 器】对话框，设置左端色标的RGB 值为(20,91,210),右端色标 的RGB值为(255,255,255), 如图所示。

设置渐变色10

17.1 利用Photoshop制作个人主页

设计标题栏选择【描边】选项，设置【大小】 为“2像素”,【颜色】的RGB值 为(187,214,247),其它参数 设置如图所示。 设置描边参数

设置完后，单击【好】,效果如图 所示。

设置图层样式后的效果

17.1 利用Photoshop制作个人主页

设计标题栏

单击【横排文字工具】,输入网址，如图所示。

输入网址

制作图标

打开“网页图标.psd”文件，如图所示。

打开“网页图标.psd”

将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【title】中， 把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。

导入的图片效果12

17.1 利用Photoshop制作个人主页

设计标题栏

在工具箱中选择【横排文字工具】,输入文字，设置文字颜色为白色，如图所示。

制作导航栏

输入文字

在【图层】面板中新增【图层5】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为 【固定大小】,【宽度】为“770像素”,【高度】为“25像素”,在参考线顶部创建一个选区，如图所示。

创建一个选区

17.1 利用Photoshop制作个人主页

设计标题栏

执行【视图】|【显示】|【参考线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中 的【渐变工具】,在【选项】栏上单击【点按可编辑渐变】按钮，打

开【渐变编辑器】对话框，在渐变条下 方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”,从左到右，分别设置四个色标的 RGB值为(123,158,186)、(198,220,233)、(225,241,255)、(123,150,169),如图所 示。

设置编辑色

设置完后，单击【好】按钮。 按住Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。

对选区进行渐变填充14

17.1 利用Photoshop制作个人主页

设计标题栏

选择【横排文字工具】,输入栏目名称，如图所示。

输入栏目名称

执行【图层】|【图层样式】|【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”, 【颜色】为白色，如图所示。

设置描边参数15

17.1 利用Photoshop制作个人主页

设计标题栏

设置完后，单击【好】按钮。 在【图层】面板中选择【图层5】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为 【固定大小】,【宽度】为“2像素”,【高度】为“18像素”,设置完成后创建一个选区，如图所示。

创建一个选区

执行【图像】|【调整】|【色阶】命令，在弹出的【色阶】对话框中设置参数如图所示。

设置色阶参数

17.1 利用Photoshop制作个人主页

设计标题栏

设置完后，单击【好】按钮。 执行【滤镜】|【模糊】|【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径】为“1.0像 素”,如图所示。

设置高斯模糊参数

单击【好】,按Ctrl+D键，取消选择，效果如图所示。

设置高斯模糊后的效果17

17.1 利用Photoshop制作个人主页

设计标题栏

用同样的方法，制作出其它分隔条，如图所示。

分隔条效果

17.1 利用Photoshop制作个人主页

设计页面

创建新图层组

在【图层】面板中，单击图层组【title】左边的小三角箭头，隐藏图层组中的子图层，执行【图层】|【新 建】|【图层组】命令，在【新图层组】对话框中，输入【名称】为“body”,单击【好】按钮。 在图层组【body】中，新增【图层6】。选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】 为【固定大小】,【宽度】为“770像素”,【高度】为“420像素”,创建一个选区，如图所示。

创建一个选区

17.1 利用Photoshop制作个人主页

设计页面

执行【视图】|【显示】|【参考线】命令，显示参考线，用上面学过的方法，在选区的顶部和底部创建两 条参考线。 在工具箱中设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，

效果如图 11.32所示。

创建参考线并填充选区

制作分隔线

接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标，将它们隐藏起 来。 在【图层】面板中，选择图层组【body】中的【图层6】,按下【锁定】中的【锁定透明像素】按钮，如图 所示。

17.1 利用Photoshop制作个人主页

设计页面

创建两条垂直的参考线，如图所示。 在工具箱中选择【单列选框工具】,在左边的垂直参考线上单击，创建一个单列选区，如图所示。

创建两条垂直的参考线

在参考线上创建单列选区

在【图层】面板上新增【图层7】,在工具箱中设置前景色的RGB值为(0,72,101),按Alt+Delete键， 用前景色填充选区。 用同样的方法，在右侧的参考线上创建单列选区，再填充前景色，删除透明区域中的填充色，效果如图所示。 实际操作中，由于参考线的遮挡，看不到单列填充效果，按Ctrl+H键，可将参考线隐藏起来，看完效果后， 再按一下Ctrl+H键，显示出参考线。 创建一条水平参考线，选择工具箱中的【单行选框工具】,在水平参考线上创建一个水平单列选区，按 Alt+Delete键，在选区中填充前景色，如图所示。

填充单列选区后的效果

制作出单行选区并填充21