9.3详情页设计(课件）-高二《图形图像处理》同步教学（北京出版社）

3 详情页设计 第九章 综合实战 第九章 综合实战 一、详情页设计布局 1 2 3 长度适中 迎合用户需求 内容合适 第九章 综合实战 二、创建详情页图层 1）执行新建图层命令，设计参数：宽790像素、高3000像素，分辨率72像素/英寸； 2）创建后将背景颜色调整为主色1； 3）创建多个图层组，每个组命名为与板块内容相对应的名称。 详情页的宽度790像素，是根据淘宝详情页的要求设计的，高度可按照自己产品大致需要做多少屏来初步设计一个高度，按最常用的显示器高度是600像素为一屏，本设计中设置了5屏的高度作为详情页高度。如果后期长度不够，可以执行【图像】-【画布大小】，对详情页长度进行延伸。 第九章 综合实战 三、焦点图设计 在【焦点展示】图层组中选用【矩形工具】，主色1为填充色，在画布顶端绘制790*450像素的矩形作为焦点图区域，在矩形框上方插入焦点图，鼠标停留在矩形框与焦点图层中间，按住Alt键，鼠标图标变为一个箭头后，左键单击鼠标，即可完成蒙版创建，自由调整嵌入图片的大小。 第九章 综合实战 四、产品属性设计 1.绘制标题分隔栏底色 选中【产品属性】图层组，选择【矩形工具】，填充色设置为主色2，紧挨着焦点图层创建分隔栏底色。 第九章 综合实战 2.绘制标题区域，并进行效果设计 加深填充色主色2的纯度，使用【矩形工具】创建标题区域，并设置阴影效果及相应参数。 第九章 综合实战 3.绘制虚线，并输入中英文标题 使用【横排文字工具】，绘制虚线，并输入中英文标题，对文字进行调整。 注意：学生需要注意图层前后顺序，在上的图层会覆盖下面的图层，所以叠加次序需要留意。 第九章 综合实战 4.合并图层为组 选中所有分隔栏的图层，执行【Ctrl+G】命令，将所选图层合并为组，并对其进行命名，如图所示。 第九章 综合实战 5.绘制产品属性区域 使用【矩形选择工具】，绘制790*850像素的产品展示区域，将设计好的产品属性图使用前面提到的快速创建剪贴蒙版的操作，将属性图嵌入到矩形选框中。 第九章 综合实战 五、产品展示设计 1.产品展示标题栏设置 将“产品属性”图层组中的“分隔栏模板”图层组复制到“产品展示”图层组中，并修改相关文字内容即可。 第九章 综合实战 2.设置产品展示区域 使用【矩形工具】绘制产品展示区域的范围，用于展示产品不同角度的效果图，再利用上面提到的创建剪贴蒙版的工具，完成产品展示区域的效果图设计。 第九章 综合实战 六、设计售后保障及广告位区域 适用相同的方法，将售后保障区域做好，再选择“广告展示”图层组，设计2个广告位区域，设计完的效果如图所示。 第九章 综合实战 七、详情页切片优化处理 1.创建参考线 将图像显示调整为100%，打开标尺显示，在有明显分割区域设置参考线，最终完成整个详情页的参考线设置，如图所示。 第九章 综合实战 2.切片效果 选择【切片工具】，设置属性为“基于参考线切片”，从而将详情页创建了5个切片，如图所示。 第九章 综合实战 3.储存详情页设计 执行【Alt+Shift+Ctrl+S】命令，选择“存储为Web所用格式”命令，完成对话框设置，选择确定， 即可完成详情页切片储存。 $$