创意+：Photoshop CS4网页设计、配色与特效案例精粹

创意+：Photoshop CS4网页设计、配色与特效案例精粹

PH

OTO

SH

OP

228PHOTOSHOP

图10-61 设置混合模式

STEP 13 将文档“导航条.psd”中的“背景”

以外的图层同时导入网页文档中，并且将其放置在画布正下方，如图10-62所示。

STEP 14 使用【横排文字工具】 ，在Banner

图像上方分别输入标识语，并且设置文本属性。然后为其添加投影，如图10-63所示，完成网站首页的制作。

图10-62 放置导航条图像

图10-63 制作网站标识语

PHOTOSHOP

10.4  电影网站内页设计

电影宣传网站属于视觉特效网站，该网站的目的是让浏览者记住网站中所宣传的电影，并且吸引浏览者去观看该电影。所以在设计电影网站时，除了要使用影片中的场景作为网站的图像外，还需要根据影视宣传的内容来制定网站导航菜单，使浏览者更多的了解该电影。

既然电影网站是视觉特效网站，所以网站内页的布局要尽可能地有所区别。但是需要延用网站首页的色调，使整个网站相统一。在内页制作过程中，根据文字、图像与视频展示的需要分别使用不同的图像进行装饰，使其在不同中又保持一致。

这种布局灵活的网页比较适用于Flash动画网站。在Photoshop中设计出每个网页的初始展示效果，就可以方便地制作后期动画中的动画效果，所以网页平面图像效果的制作尤为重要。

图10-64 电影网站内页效果展示

第10章 娱乐类网站设计 10PHOTOSHOP

229PHOTOSHOP

10.4.1  制作文字网页

STEP 01 复制文档day.psd为day01.psd，将

Banner区域中的图像与文字删除后，垂直向上移动导航条图像，并且在其下方输入版权信息文本，如图10-65所示。

图10-65 复制文档

提示

删除多余图像后，还需要将网站LOGO图像向上移动，以保留更多的空间。

STEP 02 新建图层，建立黑色700×330像素的

矩形。执行【选择】|【修改】|【收缩】命令，设置【收缩量】选项如图10-66所示。删除图像后，分别上下移动20像素后，删除选区中的图像。

图10-66 绘制边框矩形

STEP 03 选择【矩形选框工具】 ，并设

置【固定大小】参数为16×13像素。在如图10-67所示位置建立选区，并且删除选区中的图像。然后依次垂直向下移动3个像素，间隔删除选区中的图像。

图10-67 间隔删除选区中的图像

技巧

分别在黑色矩形的高度与宽度10像素的位置拉出辅助线。然后参考辅助线间隔删除图像，最后使用相同的方法，删除右侧黑色图像。

STEP 04 双击该图层，打开【图层样式】对

话框。启用【投影】复选框后，设置参数如图10-68所示，为其添加投影效果。

图10-68 添加投影样式

STEP 05 在该图层下方新建图层，在黑色矩形

内部建立白色矩形，并且设置该图层的【不透明度】参数为20%，如图10-69所示。

STEP 06 选择【横排文字工具】 ，在半透明

白色矩形内容单击并拖动鼠标建立文本框。在其中输入文本后，设置文本属性，如图10-70所示，完成该网页的制作。

创意+：Photoshop CS4网页设计、配色与特效案例精粹

创意+：Photoshop CS4网页设计、配色与特效案例精粹

PH

OTO

SH

OP

230PHOTOSHOP

图10-69 绘制半透明矩形

图10-70 输入并设置文本段落

STEP 07 复制该文档为day03.psd，将文字删除

后，使用【矩形选框工具】 选中黑色矩形的下边缘，进行局部向上移动。然后删除多余的图像，如图10-71所示。

图10-71 减小矩形高度

STEP 08 删除多余的半透明白色矩形后，将这

两个图层合成“演员1”图层组。然后将素材图像“丹尼斯·奎德.jpg”导入其中，成比例缩小并放置在左侧，如图10-72所示。

图10-72 缩小与放置图像

STEP 09 选择【横排文字工具】 ，分别输

入文字与文本段落，并且设置相同属性，如图10-73所示。

图10-73 输入文字

STEP 10 复制该图层组为“演员2”图层组，

将其垂直向下移动后，替换其中的图像与文字，完成“班底”网页的制作，如图10-74所示。

图10-74 复制与编辑图层组

第10章 娱乐类网站设计 10PHOTOSHOP

231PHOTOSHOP

10.4.2  制作图像网页

STEP 01 复制该文档为day02.psd，将图层组

删除后，将文档“相册.psd”中的“组1”图层组导入其中，放置在画布左侧，如图10-75所示。

图10-75 导入相册图像

STEP 02 复制该图层组，并且将其取消图层

组后，合并选中的图层为“相册1”。将素材JZ01.jpg导入其中并且成比例缩小，显示相册黑色区域的选区后，添加图层蒙版，如图10-76所示。

图10-76 制作相册图像

提示

导入素材图像后，按照相册黑色区域的尺寸成比例缩小图像，尽可能显示该图像效果。

STEP 03 复制“相册1”图层为“相册2”，将

其放置在画布中间，并且进行顺时针旋转。然

后导入素材JZ02.jpg，缩小后添加图层蒙版，如图10-77所示。

图10-77 制作相册2

STEP 04 使用上述方法，制作相册3效果，如

图10-78所示，完成“剧照”网页的制作。

图10-78 制作相册3

10.4.3  制作视频网页

STEP 01 复制文档为day04.psd，删除相册图像

所在图层后新建图层。绘制650×300像素的黑色矩形，并且分别执行“向左”和“向右”的【风】滤镜命令，如图10-79所示。

图10-79 绘制黑色矩形

创意+：Photoshop CS4网页设计、配色与特效案例精粹

创意+：Photoshop CS4网页设计、配色与特效案例精粹

PH

OTO

SH

OP

232PHOTOSHOP

STEP 02 导入素材图像YG.jpg，并且将其成

比例缩小后，放置在黑色矩形中间。新建图层后，使用【圆角矩形工具】 ，绘制“半径”为10像素的白色圆角矩形，如图10-80所示。

图10-80 导入图像与绘制圆角矩形

STEP 03 设置该图层的【不透明度】参数为

20%后，双击该图层。打开【图层样式】对话框，启用【投影】复选框，设置选项参数如图10-81所示。

图10-81 设置图层属性

STEP 04 使用【圆角矩形工具】 ，绘制同半

径的白色圆角矩形。设置相同的【不透明度】参数后，添加【斜面和浮雕】图层样式，设置参数如图10-82所示。

图10-82 绘制“暂停”按钮

STEP 05 绘制白色竖直矩形后，复制一个形成

暂停符号。显示小尺寸圆角矩形选区后，删除大尺寸圆角矩形选区中的图像，如图10-83所示。

图10-83 修饰“暂停”按钮

STEP 06 使用上述方法，绘制声音控制按钮。

其中声音图标是通过自定义图案绘制完成的，如图10-84所示。

图10-84 制作声音控制按钮

STEP 07 新建图层，在半透明圆角矩形中间绘

制半透明白色矩形。双击该图层，打开【图层样式】对话框。启用【内阴影】复选框后，设置参数如图10-85所示，完成“预告”网页的制作。

图10-85 制作进度条

技巧

在制作进度条时，最好同时删除同区域的白色圆角矩形图像，以保持相同的不透明度效果。