Cha19项目指导——制作宠物网站课件.ppt

第19章 项目指导——制作宠物网站 以前宠物只是单指人们为了消除孤寂或出于娱乐目的而豢养的动物。现今宠物定义为，出于非经济目的而豢养的动植物，本章介绍如何制作宠物网站。 19.1 制作网页中的图片 19.2 制作网页封面动画 19.3 制作宠物网站 19.1 制作网页中的图片 本节将介绍如何利用Photoshop CC制作网页中的图片，效果如图19.1所示，其具体操作步骤如下： (1) 启动Photoshop CC，按Ctrl+N组合键，在弹出的【新建】对话框中将【宽度】和【高度】分别设置为746、330像素，将【分辨率】设置为72像素/英寸，如图19.2所示。 (2) 设置完成后单击【确定】按钮，在工具箱中单击【圆角矩形工具】 ，在工具选项栏中将【工具模式】设置为【路径】，将【圆角半径】设置为10像素，绘制一个【高度】和【宽度】分别为534 像素、330 像素，将【X】、【Y】分别设置为2像素、0像素，如图19.3所示。 19.1 制作网页中的图片 (3) 绘制完成后，按Ctrl+Enter组合键，将其载入选区，在【图层】面板中单击【新建图层】 按钮，新建图层，将该图层的名称设置为【白色圆角矩形】，将【背景色】设置为白色，按Ctrl+Delete组合键填充背景色，如图19.4所示。 (4) 填充完颜色后，按Ctr+D组合键取消选择，在【图层】面板中双击【白色圆角矩形】图层，在弹出的对话框中选择【描边】样式，将【大小】设置为5，将【位置】设置为【内部】，将【颜色】的RGB值设置为240、238、238，如图19.5所示。 (5) 设置完成后，单击【确定】按钮，即可为选中的图层添加图层样式，效果如图19.6所示。 19.1 制作网页中的图片 (6) 按Ctrl+O组合键，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Cha19\彩虹.jpg素材文件，如图19.7所示。 (7) 单击【打开】按钮，将选中的素材文件打开，如图19.8所示。 (8) 在工具箱中单击【移动工具】，按住鼠标将该素材拖拽至绘制圆角矩形的场景中，效果如图19.9所示。 19.1 制作网页中的图片 (9) 在【图层】面板中，按Alt键在【图层1】与【白色圆角矩形】图层的分界处单击，创建剪切蒙版，效果如图19.10所示。 (10) 根据前面所介绍的方法将【彩虹伞.png】素材文件添加到该场景中，释放其剪贴蒙版，并调整其位置，如图19.11所示。 (11) 在【图层】面板中单击【新建图层】按钮，新建图层3，在工具箱中单击【椭圆选框工具】 ，在文档中绘制一个椭圆形，如图19.12所示。 19.1 制作网页中的图片 (12) 绘制完成后，在菜单栏中选择【编辑】|【描边】命令，如图19.13所示。 (13) 在弹出的对话框中将【宽度】设置为1像素，将【颜色】设置为【黑色】，如图19.14所示。 (14) 设置完成后，单击【确定】按钮，对【图层3】进行复制并调整其大小和位置，调整后的效果如图19.15所示。 19.1 制作网页中的图片 (15) 在【图层】面板中单击【新建图层】按钮，新建图层4，在工具箱中单击【钢笔工具】，在文档中绘制一个如图19.16所示的图形。 (16) 按Ctrl+Enter组合键，将绘制的图形载入选区，将前景色设置为黑色，按Alt+Delete组合键填充前景色，如图19.17所示。 (17) 按Ctrl+D组合键取消选择，使用【移动工具】调整该图形的位置，调整后的效果如图19.18所示。 19.1 制作网页中的图片 (18) 在工具箱中单击【横排文字工具】 ，在文档中单击鼠标，输入文字，选中输入的文字，在【字符】面板中将字体设置为【方正粗圆简体】，将字体大小设置为36，将行距设置为33点，将【颜色】设置为【白色】，如图19.19所示。 (19) 在【图层】面板中选择文字图层，按住鼠标将其拖拽至【新建图层】按钮上，对其进行复制，如图19.20所示。 (20) 选择复制后的图层，双击该图层，在弹出的对话框中选择【渐变叠加】样式，在【渐变】选项组中单击渐变条，在弹出的对话框中将位置0处的色标的RGB值设置为41、137、204，在位置49处添加一个色标，并将其设置为白色，在位置52处添加一个色标，将其RGB值设置为255、165、193，如图19.21所示。 19.1 制作网页中的图片 (21) 设置完成后，单击【确定】按钮，在返回至的【图层样式】对话框中单击【确定】按钮，在文档中调整文字的位置，效果如图19.22所示。 (22) 使用相同的方法，再在文档中输入其他文字，并对其进行相应的设置，效果如图19.23所示。 (23) 按Ctrl+O组合键，在弹出的对话框中选择随书附带光盘中的CDROM\素材\Ch