资源简介

(共63张PPT)
第7章
乐能企业网站页面设计
7.2
网站首页制作
下面通过制作乐能科技有限公司的首页，学习介绍网站首页的一般制作方法。
视频讲解
7.2.1制作页首部分在Photoshop中新建图像文档，设置文档尺寸为1 920×2 990像素，分辨率为72像素/英寸，颜色模式为RGB颜色，文档名称为“网站首页”。设置前景色为#f5f5f5，按【Alt+Delete】组合键为“背景”图层填充前景色。步骤1图7-4 新建参考线在菜单栏中执行“视图”>“新建参考线”命令，依次建立版心、导航栏、Banner和页尾位置的参考线，如图7-4所示。步骤2按【Ctrl+O】组合键打开本章案例素材“乐能Logo.png”，使用“移动工具” 将其移至“网站首页”文档中如图7-5（a）所示的位置，然后在“图层”面板中更改其图层名称为“Logo”。选择“横排文字工具” ，在页面最上方右侧垂直参的左边输入“登录 购物车”（登录与购物车间隔5个空格），按【Ctrl+Enter】组合键确定，然后在工具属性栏中设置参数，如图7-5（b）所示。步骤3图7-5 导入素材并输入文字（a）（b）（c）#333333使用“矩形工具” 在导航栏参考线区域绘制一个1920×60像素的矩形，在“属性”面板中设置其填充颜色为#303030，描边为无，并在“图层”面板中更改其图层名称为“导航栏底色”，如图7-6所示。步骤4图7-6 绘制导航栏底色图形按【Ctrl+Alt+Shift+N】组合键新建图层，使用“横排文字工具” 在左侧垂直参考线上单击并输入“首页”，按【Ctrl+Enter】组合键确定，然后在工具属性栏中设置字体为微软雅黑，字体大小为22点，颜色为白色，并单击“左对齐文本”按钮 ，使文本左对齐参考线。步骤5在“首页”文字右侧继续输入其他导航项文字，然后使用“移动工具” 调整“联系我们”文字位置，将其移至左侧参考线右侧790像素处，接着在“图层”面板选中除“登录购物车”外的所有文字图层，在工具属性栏中分别单击“水平居中分布”按钮 和“垂直居中对齐”按钮 ，调整文字位置，效果如图7-7所示。步骤6图7-7 输入并调整文字位置绘制搜索按钮。使用“矩形工具” 在右侧垂直参考线左侧绘制一个宽高为74×37像素的矩形，在“属性”面板中设置其填充颜色为#e6e6e6，描边为无，然后按【Ctrl+Alt+Shift+N】组合键新建图层，使用“横排文字工具” 在刚绘制的矩形上输入“搜索”，按【Ctrl+Enter】组合键确定，并在“字符”面板中设置其参数，如图7-8所示。步骤7图7-8 制作搜索按钮#333333绘制搜索框。使用“矩形工具” 沿搜索按钮左侧绘制一个宽高为242×37像素的矩形，在“属性”面板中设置其填充颜色为白色，描边为无，如图7-9所示。按住【Shift】键，在“图层”面板中分别单击“矩形2”和“Logo”图层，按【Ctrl+G】组合键编组，并更改组名为“页首”。步骤8图7-9 绘制搜索框7.2.2制作Banner按【Ctrl+O】组合键打开本章案例素材“手机.psd”和“海豹.jpg”，使用“移动工具” 将海豹图像移至“手机”文档中，并更改其图层名称为“海豹”，如图7-10所示。步骤1视频讲解图7-10 打开素材文件图7-11 调整海豹图像位置按【Ctrl+T】组合键调整海豹图像的大小、角度和位置，按【Enter】键确定，如图7-11（a）所示。在“图层”面板中展开“手机”图层组，按住【Ctrl】键单击“屏幕”图层缩略图，制作屏幕选区，然后选中“海豹”图层，单击“图层”面板下方的“添加图层蒙版”按钮 ，利用选区为“海豹”图层添加图层蒙版，效果如图7-11（b）所示。步骤2（a）（b）提 示制作电视、手机或电脑等带有显示器的商品广告时，通常会将精美的，具有动感的照片素材置于屏幕中，通过图层蒙版等手段处理图像，能模拟破屏而出的效果。这种设计方法虽然操作简单，但容易出效果。图7-12 设置画笔参数并处理图层蒙版选择“画笔工具” ，在工具属性栏中设置画笔参数，如图7-12（a）所示，然后在“图层”面板中单击选中“海豹”图层的图层蒙版，将前景色设置为白色，使用“画笔工具” 涂抹被蒙版遮住的海豹头部，使其显示出来，如图7-12（b）所示。步骤3（a）（b）提 示涂抹时用户可配合按【Ctrl++】组合键方法放大图像显示区域；在涂抹错误时可按【Ctrl+Z】组合键后退一步，或按【X】键，切换前景色为黑色，涂抹错误区域，将其遮盖。图7-13 调整图像位置并输入文字按住【Ctrl】键，在“图层”面板同时选中“海豹”图层和“手机”组，使用“移动工具” 调整图像位置，然后使用“横排文字工具” 在海豹图像上方输入“LEphone 8”，按【Ctrl+Enter】组合键确定，并在“字符”面板中设置参数，接着在“LEphone 8”文字下方输入“新一代LE·phone”，确定后更改其字体大小为36点，如图7-13所示。步骤4#1a1a1a图7-14 盖印图层并调整图像颜色按【Ctrl+Shift+Alt+E】组合键盖印图层，然后在菜单栏中执行“滤镜”>“Camera Raw滤镜”命令，在“Camera Raw”对话框中设置参数，如图7-14（a）（b）和（c）所示，单击“确定”按钮，效果如图7-14（d）所示。步骤5（a）（b）（c）图7-14 盖印图层并调整图像颜色（d）图7-15 制作Banner版块并导入手机图像使用“移动工具” 将盖印后的图像移至“网站首页”文档的Banner版块中，并在“图层”面板中更改图层名称为“Banner”，效果如图7-15所示。步骤6图7-16 制作Banner轮播标识制作滚动点。使用“椭圆工具” 在Banner图像上绘制一个直径为25像素的正圆，在“属性”面板中设置其填充颜色为#2c8fec，描边为无，然后按住【Alt】键，使用“移动工具” 将正圆右移50像素，释放鼠标复制正圆，接着在“属性”面板中更改复制后正圆的填充为无，描边颜色为#a0a0a0，描边宽度为2点，如图7-16所示。步骤7图7-17 调整Banner轮播标识位置参考步骤7的操作，使用“移动工具” 将灰色描边的正圆向右复制两次，各正圆之间间隔50像素，最后调整各正圆的位置，如图7-17所示。步骤8图7-18 绘制尖角形状使用“矩形工具” 在Banner左侧绘制一个宽高为60×10像素的矩形，在“属性”面板中设置其填充颜色为#eeeeee，描边为无，然后按【Ctrl+T】组合键将其顺时针旋转45°，按【Enter】键确定，然后按【Ctrl+J】组合键复制该矩形，按【Ctrl+T】组合键，将复制后的矩形逆时针旋转90°并确定，最后使用“移动工具” 调整两矩形位置，使之组成尖角形状，效果如图7-18所示。步骤9图7-19 制作Banner切换图标按住【Ctrl】键，在“图层”面板中依次单击同时选中“矩形3”和“矩形3拷贝”图层，按【Ctrl+J】组合键将其复制，然后按【Ctrl+T】组合键进入图像的自由变换状态，右击鼠标，从弹出的快捷菜单中选择“水平翻转”项，按【Enter】键确定，接着使用“移动工具” 将复制后的图形移至Banner右侧，效果如图7-19所示。步骤10按住【Shift】键在“图层”面板中分别单击“矩形3拷贝2”和“Banner”图层，按【Ctrl+G】组合键编组并更改组名为“Banner”。步骤117.2.3制作产品分类部分制作标题参考线。在菜单栏中执行“视图”>“对齐到”>“参考线”命令，然后使用“矩形选框工具” 在Banner底部参考线下方绘制一个宽为任意像素，高为48像素的矩形选区，接着按【Ctrl+R】组合键显示标尺，在水平标尺中下拖鼠标，将拖出的参考线与选区底部重合，如图7-20所示。步骤1视频讲解图7-20 绘制标题参考线提 示精准创建参考线的方法有两种：① 用菜单栏中的“新建参考线”命令创建精确的参考线；② 按【Ctrl+R】组合键显示标尺，使用选区工具制作指定宽度或高度的选区，将选区移至指定位置，在标尺中拖出参考线，使其与选区边缘对齐，利用选区的宽度或高度确定参考线位置。此外，通过移动选区位置，还可制作不同位置的参考线。图7-21 制作水平参考线参考步骤1的操作在Banner底部参考线下方86、502、550、680和728像素处分别制作水平参考线，如图7-21所示。步骤2电脑Banner版块手机内容版块手机标题版块Banner版块提 示本例中的大版块之间间隔为48像素。例如，Banner版块和标题版块、手机版块和电脑Banner版块。图7-22 制作垂直参考线使用“矩形选框工具” 沿左侧垂直参考线绘制一个宽为326像素，高为任意像素的矩形选区，然后在垂直标尺上右拖鼠标，将拖出的参考线与选区右侧重合，再按此方法依次绘制与最左侧垂直参考线相距342、668、684、1 009和1 024像素的参考线，将“手机版块”分割成4个小版块，如图7-22所示。步骤3版块版块版块版块图7-23 输入标题文字使用“横排文字工具” 在“标题版块”左上角输入“手机”，按【Ctrl+Enter】组合键确定，然后在“字符”面板中设置参数，接着在“标题版块”右侧输入“查看全部”，确定后更改其字体大小为24点，如图7-23所示。步骤4#666666图7-24 绘制查看全部图标使用“椭圆工具” 在“标题版块”左上角绘制一个直径为22像素的正圆，在“属性”面板中设置其填充颜色为#666666，描边为无，然后展开“图层”面板中的“Banner”组，按住【Alt】键，拖动“矩形3拷贝2”图层至“椭圆2”图层上，接着按【Ctrl+T】组合键将“矩形3拷贝3”图形缩小，并移至“椭圆2”图形上，按【Enter】键确定，如图7-24所示。步骤5图7-25 制作版块底色使用“矩形工具” 在“版块1”中绘制一个宽高为326×416像素的矩形，在“属性”面板设置其填充颜色为白色，描边为无。按住【Alt+Shift】组合键，水平向右拖动刚绘制的矩形至“版块2”中，释放鼠标复制矩形，再按此方法，将矩形复制到“版块3”和“版块4”中，如图7-25所示。步骤6图7-26 打开素材并调整图像制作“版块1”中的广告。按【Ctrl+O】组合键打开本章案例素材“手机版块1.psd”和“滑雪.jpg”，然后使用“移动工具” 将滑雪图像移至“手机版块1”文档中，按住【Alt】键，在“图层1”和“矩形1”图层间单击，将“图层1”剪贴至“矩形1”图层中，最后按【Ctrl+T】组合键调整“图层1”图像，使人物主体处于屏幕中，按【Enter】键确定，如图7-26所示。步骤7提 示剪贴蒙版遮挡了人物的胳膊、雪杖和部分滑雪板，由于遮挡部分轮廓复杂，因此不适合使用图层蒙版配合“画笔工具” 的方法进行处理，此时，可用“钢笔工具” 配合图层蒙版处理复杂轮廓。图7-27 制作右臂路径按【Ctrl+J】组合键复制“图层1”图层，选择“钢笔工具” ，在工具属性栏中设置其工具模式为“路径”，然后从人物肩部开始依次单击添加锚点，制作右臂和雪杖路径，如图7-27所示。步骤8
知识库
锚点：路径由直线路径段或曲线路径段组成，它们通过锚点链接，一种是平滑点，另一种是角点，其中平滑点连接形成平滑的曲线；角点连接形成直线，或转角曲线，如图7-28所示。用户可通过按住【Alt】键单击锚点，将平滑点转换为角点，或将角点转换为平滑点。
方向线：曲线路径段上的锚点有方向线，方向线的端点为方向点，它们用于调整曲线的形状。
路径：路径包括闭合和不闭合路径两种，它可以转换为选区或对路径进行填充和描边。本例中需要通过路径对人物被遮挡图像制作选区。
图7-28 平滑点连接的曲线和角点连接的直线
图7-29 制作滑雪板和腿部路径当绘制路径到手机屏幕区域时，隐藏“图层1拷贝”图层，然后单击手机屏幕右下方滑雪板底部，如图7-29（a）所示。显示“图层1拷贝”图层，继续制作滑雪板和腿部轮廓路径，在制作完腿部轮廓后，再次隐藏“图层1拷贝”图层，单击人物左腕处，如图7-29（b）所示。显示“图层1拷贝”图层，制作左手轮廓，如图7-29（c）所示。步骤9（a）（b）（c）提 示钢笔抠图是设计师处理图像的常用技巧，在抠取复杂轮廓时，设计师可进行下面操作：① 配合使用【Ctrl++】和【Ctrl+-】组合键控制图像的缩放比例。② 为减少抠取区域，用户可在制作路径过程中，根据需要隐藏当前图像，观察下方图像，以确定抠取位置。例如，本例中屏幕内图像无需抠取，因此，可在路径进入屏幕后隐藏“图层1拷贝”图层，直接绘制屏幕外图像的路径，从而提高效率。图7-30 制作闭合路径并处理图层蒙版继续使用“钢笔工具” 单击人物右肩处锚点，制作闭合路径，然后按【Ctrl+Enter】组合键将路径转换为选区，接着在“图层”面板中单击“添加图层蒙版”按钮 ，为“图层1拷贝”添加蒙版，如图7-30（a）和（b）所示，最后按【Ctrl+I】组合键将蒙版反相，如图7-30（c）和（d）所示。步骤10（a）（b）（c）（d）提 示由于后面制作的图像背景颜色是白色到灰色的渐变，因此雪杖绳套镂空处的白雪可忽略不计。图7-31 调整图像颜色在“调整”面板中分别单击“自然饱和度”按钮 和“曲线”按钮 ，并在“属性”面板中调整参数，如图7-31所示。按【Ctrl+Alt+Shift+E】组合键盖印图层，右击“图层2”，从弹出的快捷菜单中选择“转换为智能对象”项，将“图层2”转换为智能对象。步骤11
知识库
智能对象能保留图像中所有原始特性，从而让用户对图层执行非破坏性编辑。
图7-32 调整图像位置并为矩形填充渐变颜色使用“移动工具” 将盖印后的“图层2”图像移至“网站首页”文档的“版块1”中，并在“图层”面板中更改其图层名称为“滑雪”，按【Ctrl+T】组合键调整图像的尺寸和位置，按【Enter】键确定。在“图层”面板中选择“矩形4”图层，在“属性”面板中更改其填充颜色，如图7-32所示。步骤12#ffffff#eef1f6图7-33 制作“版块1”中的文字使用“横排文字工具” 在“滑雪”图像上方输入“乐能Wise 7”，按【Ctrl+Enter】组合键确定，在“字符”面板中设置参数，如图7-33（a）所示，然后在“乐能Wise 7”文字下方输入“前置2000万……”，确定后设置参数，如图7-33（b）所示，再按此方法在“前置2000万……”文字下方输入“3699元”，确定后设置参数，如图7-33（c）所示，最后使用“移动工具” 调整各图像位置，如图7-33（d）所示。步骤13#333333#333333（a）（b）图7-33 制作“版块1”中的文字#ff4949（c）（d）图7-34 导入并调整素材位置按【Ctrl+O】组合键打开本章案例素材“手机2.jpg”“手机3.jpg”和“手机4.jpg”，使用“移动工具” 将其依次移至“网站首页”文档的“版块2”“版块3”和“版块4”中，并在“图层”面板中更改图层名称为素材原始名称，如图7-34所示。步骤14提 示科技类商品图片通常使用白色作为商品背景，这样利于将用户视觉焦点集中到商品上，从而突出商品，同时也能让页面更加简洁和大气。图7-35 制作“版块2”中的文字选择“横排文字工具” ，在“手机2”图片下方输入“LE·phone 7S”，按【Ctrl+Enter】组合键确定，在“字符”面板中设置字体大小为24点，文本颜色为#333333，然后在其下方输入“5.99……”，确定后更改字体大小为18点，文本颜色为#808080，接着在“5.99……”文字下方输入“3270元”，确定后更改字体大小为24点，文本颜色为#ff4949，效果如图7-35所示。步骤15图7-36 制作版块3和版块4文字按住【Shift】键在“图层”面板中分别单击“3270元”和“LE·phone 7S”图层，然后按住【Alt+Shift】组合键，使用“移动工具” 水平右拖选中的文字至“手机3”图片下方，释放鼠标复制文字，接着依次更改文字内容，再按此方法制作“手机4”图片下方文字，如图7-36所示。步骤16图7-37 绘制矩形并导入素材在“图层”面板中选中除“背景”“Banner”和“页首”外的所有图层，按【Ctrl+G】组合键编组并更改组名为“手机版块”。步骤17制作“电脑Banner”。使用“矩形工具” 在“电脑Banner”版块区域绘制一个宽高为1350×130像素的矩形，在“属性”面板中设置其填充颜色为#d7dfef，描边为无。按【Ctrl+O】组合键打开“电脑Banner素材.png”，使用“移动工具” 将其移至刚绘制的矩形上，如图7-37所示。步骤18图7-38 制作近景电脑按住【Alt】键，在“图层”面板中的“图层1”和“矩形5”图层间单击，将“图层1”剪贴至“矩形5”图层，然后选中“图层1”图层，调整其混合模式为明度，如图7-38所示。步骤19图7-39 制作远景电脑按【Ctrl+J】组合键复制“图层1”图层，按【Ctrl+T】组合键执行自由变换命令，右击鼠标，选择“水平翻转”项，然后适当缩小图形，移至“图层1”图像左上方，按【Enter】键确定，并将其剪贴至“矩形5”图层中，如图7-39所示。步骤20图7-40 模糊图像并输入文字为了进一步加强两个电脑的前后对比，在菜单栏中执行“滤镜”>“模糊”>“高斯模糊”命令，在“高斯模糊”对话框中设置“半径”为2.8像素。使用“横排文字工具” 在电脑图像左侧输入“乐能笔记本Air M2”，按【Ctrl+Enter】组合键确定，并在“字符”面板中设置参数，然后在刚输入的文字下方输入“做轻薄本……”，确定后更改文字参数，如图7-40所示。步骤21（a）（b）（c）#333333#333333提 示在Banner设计中，设计师要将产品特性与文案结合。例如，“步骤21”中电脑的特点是“轻”“薄”和“性能高”，因此可在制作描述性文案时，将字体样式设置为“light”，通过纤细的字体样式呼应电脑“轻”和“薄”的特点，从侧面反映电脑特点。按住【Shift】键，在“图层”面板中分别单击“矩形5”和“做轻薄本……”图层，按【Ctrl+G】组合键编组，并更改组名为“电脑Banner”。步骤22图7-41 复制图层组并更改组名制作电脑和配件Banner版块。按住【Ctrl】键，在“图层”面板中同时选中“电脑Banner”和“手机版块”组，按住【Alt+Shift】组合键，使用“移动工具” 将选中图像垂直下移至“电脑Banner版块”下方参考线下，然后在“图层”面板中更改“电脑Banner拷贝”的组名为“配件Banner”，“手机版块拷贝”为“电脑版块”，如图7-41所示。步骤23图7-42 制作电脑版块和配件Banner版块按【Ctrl+O】组合键打开本章案例素材“电脑1.png”“电脑2.png” “电脑3.png”“电脑4.png”和“配件Banner.png”，使用“移动工具” 将其移至“网站首页”文档中合适位置，并更改图层名称为素材原始名称，然后替换相应图像，接着更改复制组中的标题和商品信息文字，如图7-42所示。步骤24图7-43 制作配件版块制作配件版块。在“图层”面板中选中“电脑版块”组，按住【Alt+Shift】组合键，使用“移动工具” 将选中图像垂直下移距配件Banner下方48像素处，然后按【Ctrl+O】组合键打开本章案例素材“配件1.png”“配件2.png”“配件3.png”和“配件4.png”，使用“移动工具” 将其素材移至“网站首页”文档中，并参考制作电脑版块的方法，替换对应位置的图片和文字，如图7-43所示。步骤25提 示“手机版块”“电脑版块”和“配件版块”中的“版块1”都对商品图片进行了艺术化处理，其目的是为了区别于其他商品版块，让商品展示区域更丰富。设计师在排列大量相同元素时，可采用同样方法处理首个元素，从而避免页面呆板。7.2.4制作页尾部分视频讲解图7-44 制作页尾版块底色和Logo制作页尾版块。在“图层”面板中选中“背景”图层，使用“矩形工具” 沿底部水平参考线下方绘制一个宽高为1 920×190像素的矩形，在“属性”面板中设置其填充颜色为#303030，描边为无。展开“页首”组，选中“Logo”图层，按住【Alt+Shift】组合键，使用“移动工具” 将Logo图像垂直下移至“矩形6”图形中，并将“Logo拷贝”图层移出“顶部”组，如图7-44所示。步骤1图7-45 制作页尾版块使用“横排文字工具” 在页尾版块的Logo右侧输入网站信息，然后按【Ctrl+Enter】组合键确定，并在“字符”面板中设置参数，接着使用“矩形工具” 在Logo与文字间绘制一个宽高为2×76像素的矩形，在“属性”面板中设置其填充颜色为#cccccc，描边为无；使用“移动工具” 调整各图像位置，将“Logo拷贝”“copyright……”“矩形6”和“矩形7”图层编组，并更改组名为“页尾”，如图7-45所示。步骤2#999999按【Ctrl+Shift+S】组合键将文档存储为psd格式。步骤3
THANK YOU!

展开更多......

收起↑