Photoshop UI设计实战案例教程（移动端+Web端） 课件 第7章 综合案例 设计网站欢迎页.pptx

PhotoshopUI设计实战案例教程(移动端+Web端)

第7章综合案例:设计网站欢迎页本章概述：第6章主要介绍了WebUI导航组件创意设计。首先阐述了WebUI的主要导航组件，包括顶部导航（常见于首页，有带下拉菜单和直接跳转两种交互方式）、侧边导航（用于次级页面，有单层级和多层级两种样式）和面包屑导航（轻量级，显示页面层级结构）。接着通过实例讲解创意设计，如用灯光照亮侧边导航栏，绘制菜单底板背景和灯光效果，包括不同模糊度的图层模拟光照、智能对象和高斯模糊创建磨砂玻璃效果等；顶部导航栏展开菜单设计，涉及绘制展开菜单、添加图标及设置样式等；还介绍了拓展训练，如制作圆形导航菜单，包括设计左侧图文内容流和右侧圆盘菜单组件等。

第7章综合案例:设计网站欢迎页7.1添加文字并转换为形状7.2创建文字立体效果7.3绘制立体字母上的高光7.4绘制阴影7.5添加辅助文字和按钮

7.1添加文字并转换为形状1.新建文档按Ctrl+N组合键新建一个宽度为1920像素、高度为1080像素的空白文档双击背景图层，将其转换为普通图层，并命名为“底层背景”2.添加并编辑文字在字符面板中设置字体大小，先添加一个字体大小为300像素的“HELLO”文字图层，再添加一个字体大小为210像素的“WELCOME”文字图层使用的卡通字体样式为“方正胖头鱼简体”，文字颜色可任意设置

7.1添加文字并转换为形状3.将文字转换为形状分别右键单击“HELLO”和“WELCOME”文字图层，选择“转换为形状”选项，将文字转换为形状路径。为方便后期操作，使用直接选择工具将每个字母做成独立的矢量形状图层。以字母H为例，选中字母的矢量路径形状后按Ctrl+Shift+J组合键，将其独立分割出来生成一个新的矢量形状图层。对每个字母都进行上述操作，做好重命名和编组工作，分成“Hello”和“Welcome”两个编组，然后移动字母使它们互相靠近。

7.2创建文字立体效果1.添加图层样式（1）以“Hello”编组的H、E和“Welcome”编组的W、E四个字母为例进行操作。（2）添加渐变样式：双击字母H所在图层，调出“图层样式”窗口，添加“渐变叠加”图层样式，设置渐变色条左右两端色值分别为#f2ff64和#ff961b，“角度”为-108度。

7.2创建文字立体效果1.添加图层样式（3）添加内阴影：勾选“内阴影”图层样式，连续添加3个“内阴影”图层样式，从下到上参数设置如下：最下面的第一组内阴影，“混合模式”为“正片叠底”，“不透明度”为30%，“角度”为-162度，“距离”为20像素，“大小”为48像素。第二组内阴影，“不透明度”为15%，“角度”为104度，“距离”为12像素，“大小”为20像素。第三组内阴影，“不透明度”为12%，“角度”为103度，“距离”为6像素，“大小”为8像素。最上面的第一组内阴影，“不透明度”为10%，“角度”为10度，“距离”为6像素，“大小”为12像素。

7.2创建文字立体效果3.为文字添加噪点效果（1）创建新图层并填充黑色：在字母H的图层上添加新图层，按D键将前景色重置为黑色，按Alt+Delete组合键将整个图层填充为黑色。（2）转换为智能对象并添加杂色滤镜：将新图层转换为智能对象图层，执行“滤镜?杂色?添加杂色”命令，添加一个“智能”滤镜，设置“数量”为70，“分布”为“高斯分布”。（3）将添加了杂色滤镜的智能对象图层的图层叠加模式设为“滤色”，图层“不透明度”设为40%

7.2创建文字立体效果4.为“杂色”图层创建蒙版（1）编组并提取选区：选中添加了杂色滤镜的智能对象图层“图层1”（此处可能是文档错误，推测应为之前操作中添加杂色的智能对象图层），按Ctrl+G组合键编组，并重命名为“杂色”。按住Ctrl键，单击图层“H”，创建以H为外形的选区。（2）收缩和羽化选区：执行“选择修改收缩”命令，将选区沿着选区边缘向内缩小10像素；再次执行“选择?修改?羽化”命令，将羽化半径设为10像素。

7.2创建文字立体效果4.为“杂色”图层创建蒙版（3）创建图层蒙版并设置矢量形状蒙版：保持选中“杂色”编组图层，单击图层面板底部的“添加图层蒙版”按钮，创建边缘羽化模糊的图层蒙版。将矢量形状图层字母H和“杂色”编组图层编组并重命名为“H字母”。使用路径选择工具选中字