资源简介

(共19张PPT)
第7章
乐能企业网站页面设计
7.3
网站子页制作
子页以叙述内容为主，各子页布局应当统一，且与首页风格相同。下面通过制作“关于乐能”子页，介绍企业网站子页的一般制作方法。
视频讲解
7.3.1制作纵向导航按【Ctrl+O】组合键打开7.2节制作的“网站首页.psd”文件，在“图层”面板中删除“页首”“页尾”和“背景”图层以外的所有图层组，然后在菜单栏中执行“视图”>“清除参考线”命令，接着参考7.2.1节的“步骤2”制作两条垂直参考线，限定版心范围。步骤1图7-46 制作纵向导航底色图形使用“矩形工具” 沿左侧参考线和导航栏底部绘制一个宽高为248×412像素的矩形，然后在“属性”面板中设置其填充颜色为#2c8fec，描边为无，如图7-46所示。步骤2图7-47 绘制图形并输入文字按【Ctrl+Alt+Shift+N】组合键新建图层，选择“钢笔工具” ，在工具属性栏中设置工具模式为“形状”，填充颜色为#ebebeb，描边为无，然后在导航栏上方的Logo图像上描摹Logo中的曲线形状，接着按【Ctrl+T】组合键适当放大路径，并将其移至下方蓝色矩形上，按【Enter】键确定，如图7-47所示。步骤3图7-48 调整形状1图层属性按住【Alt】键，在“图层”面板中的“形状1”和“矩形8”图层间单击，将“形状1”剪贴至“矩形8”图层中，然后设置“形状1”图层的“不透明度”为30%，如图7-48所示。步骤4图7-49 输入并设置文字参数按【Ctrl+Alt+Shift+N】组合键新建图层，使用“横排文字工具” 在“形状1”图像上输入“关于乐能”，按【Ctrl+Enter】组合键确定，然后在“字符”面板中设置参数，接着在“乐能科技”文字下方10像素处输入“GUANYULENENG”，确定后在“字符”面板中更改其字体大小为12点，如图7-49所示。步骤5#333333提 示使用Logo中的元素作为网站的装饰元素能使网站更契合企业形象。图7-50 制作渐变矩形使用“矩形工具” 在蓝色矩形上绘制一个宽高为248×10像素的矩形，然后在“图层”面板中双击“矩形9”图层空白处，为其添加“渐变叠加”样式，如图7-50所示。步骤6#e3e3e3#ffffff图7-51 制作导航项底色图形使用“矩形工具” 沿“矩形9”图形底部绘制一个宽高为248×318像素的矩形，设置填充颜色为#ffffff，描边为无，如图7-51所示。步骤7图7-52 输入导航项文字按【Ctrl+Alt+Shift+N】组合键新建图层，使用“横排文字工具” 在“矩形10”图形上输入“公司简介”，按【Ctrl+Enter】组合键确定，然后在“字符”面板中设置参数，按此方法在其下方依次输入其他导航项。使用“移动工具” 调整文字位置，使“人才建设”文字距“公司简介”文字170像素，然后按住【Ctrl】键，在“图层”面板中选中纵向导航栏中的所有文字图层，在工具属性栏中单击“垂直居中分布”按钮 ，调整文字位置，如图7-52所示。步骤8#333333图7-53 制作当前导航项提示形状使用“矩形工具” 在“公司简介”文字上绘制一个宽高为206×40像素的矩形，然后在“图层”面板中将“矩形11”图层移至“公司简介”图层下方，设置其“不透明度”为80%，接着按住【Alt】键，将“矩形9”图层的样式拖到“矩形11”图层，最后在“图层”面板中同时选中除“背景”“页首”和“页尾”图层外的所有图层，按【Ctrl+G】组合键编组，并更改组名为“纵向导航栏”，如图7-53所示。步骤9本例要制作的子页文字内容较多，应根据级别合理设置文字的大小和颜色等参数。7.3.2制作子页内容视频讲解图7-54 导入并调整素材位置按【Ctrl+O】组合键打开本章案例素材“公司简介Banner.png”，使用“移动工具” 将其贴近右侧参考线和导航栏底部，然后分别在垂直和水平标尺中拖出参考线，制作文案版块范围，如图7-54所示。步骤1文案版块图7-55 制作标题和装饰元素参考7.3.1节步骤3中的方法，使用“钢笔工具” 绘制Logo中的三角形，并设置如图7-55所示的渐变颜色，然后使用“移动工具” 将其移至“文案版块”中距左、上参考线各20像素处，接着使用“横排文字工具” 在三角形右侧10像素处输入“乐能科技有限公司”，确定后在“字符”面板中设置参数，如图7-55所示。步骤2#f3aa28#f9e369#333333图7-56 输入并设置字符参数选择“横排文字工具” 在标题下方30像素处，沿左右两侧参考线绘制一个宽高为1064×548像素的文本区域，然后在该区域输入文案（可直接拷贝本书提供的文字素材），确定后在“字符”面板中设置字体为宋体，字体大小为16点，文本颜色为#333333，最后分别将第2、3、4和5段的段首文字加粗，如图7-56所示。步骤3提 示本例中文案级别分为3级，分别是标题级别、首句级别和正文级别。根据正文内容，将段首使用文字加粗进行表现，以便于用户在浏览大量文字时能快速抓住重点。图7-57 整理图层并裁切画布在“图层”面板中按住【Shift】键分别单击“乐能是……”和“图层1”图层，按【Ctrl+G】组合键编组，并更改组名为“主体内容”，然后选中“页尾”组，使用“移动工具” 将“页尾”组图像上移至距正文下方48像素处，接着选择“裁剪工具” ，拖动文档底部控制框至页尾底部，按【Enter】键确定，如图7-57所示。按【Ctrl+Shift+S】组合键将文档另存为“网站子页.psd”。步骤4
THANK YOU!

展开更多......

收起↑