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

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字母”。使用路径选择工具选中字母H的矢量形状按Ctrl+C组合键复制，再切换选中“H字母”编组图层，按Ctrl+V组合键粘贴刚才复制的矢量形状，生成矢量蒙版。5.添加投影（1）创建矢量蒙版：先将字母E图层编组并创建一个以字母E的矢量形状为形状的矢量蒙版。（2）复制并设置投影样式：在“H字母”编组图层内，复制字母H图层并重命名为“H阴影”。清除原有图层样式，双击该图层弹出“图层样式”窗口，勾选添加“投影”图层样式，设置“混合模式”为“正片叠底”，投影颜色为#d87000，“不透明度”为30%，“角度”为-162度，“距离”为10像素，“大小”为30像素。7.3绘制立体字母上的高光1.绘制高光形状选择合适图层：选中“H字母”编组图层，此图层是之前对字母H进行一系列操作后所形成的包含字母H相关样式和设置的图层组。使用钢笔工具绘制：利用钢笔工具在字母H上精心绘制3个高光形状。钢笔工具可以精确地绘制出所需的形状路径，通过调整节点和曲线来达到理想的高光形状效果。重命名并设置混合模式：将绘制好的3个高光形状分别重命名为“高光1”“高光2”和“高光3”，同时将它们的混合图层模式设置为“滤色”。这种混合模式设置使得高光部分能够在字母表面呈现出明亮的效果，与字母本身的颜色和立体感相互融合，增强视觉效果。7.3绘制立体字母上的高光2.转换为智能对象图层并添加“高斯模糊”滤镜转换为智能对象图层：将“高光1”“高光2”和“高光3”这3个高光图层全部转换为智能对象图层。智能对象图层具有独特的优势，它可以保留原始图像的所有信息，并且在进行后续的编辑操作时不会对原始图像造成破坏。例如，在添加滤镜或进行其他调整时，可以随时返回原始状态进行修改。添加“高斯模糊”滤镜：为每个高光智能对象图层添加“高斯模糊”滤镜，以实现柔和的高光效果，使其更加自然地融合在字母的立体表面上。具体设置为“高光1”的模糊半径为3像素，“高光2”的模糊半径为4像素，“高光3”的模糊半径为5像素。通过这种不同程度的模糊设置，可以根据字母表面的不同位置和光照需求，呈现出更加真实和立体的高光效果。例如，某些位置可能需要更强烈的高光突出，而某些位置则需要相对柔和的过渡，这些不同的模糊半径设置能够满足这种多样化的需求。7.4绘制阴影1.转换为智能对象图层选中“Welcome”编组图层，按Ctrl+J组合键复制，并重命名为“Welcome阴影”。将复制出来的“Welcome阴影”编组转化为智能对象图层，在图层面板上将该图层拖动到“Welcome”编组图层顺序之下，将“填充”值改为0%。7.4绘制阴影2.添加“投影”图层样式双击“Welcome阴影”编组图层弹出“图层样式”窗口，勾选添加“投影”图层样式。设置“投影”图层样式的参数：“混合模式”为“正片叠底”，投影颜色为#d87000，“不透明度”为30%，“角度”为-90度，“距离”为3像素，“大小”为10像素。为进一步丰富投影的层次效果，再次添加一个“投影”图层样式，设置“混合模式”为“正片叠底”，投影颜色为#d87000，“不透明度”为30%，“角度”为-90度，“距离”为4像素，“大小”为30像素。7.4绘制阴影3.设置阴影显示范围将鼠标指针移动到图层面板中“Welcome阴影”编组图层和“Hello”编组图层之间交接线位置，当鼠标指针形状改变时，按住Alt键单击。这样操作后阴影效果只出现在Hello编组图层的形状范围内，并且“Welcome阴影”图层左侧出现一个直角箭头图标，表示自动将下一个图层作为当前被选中图层的蒙版。7.5添加辅助文字和按钮1.添加副标题文字选择文字工具，在字符面板中设置字体为细体字（如方正细黑），字体大小为60点，字体颜色为#000000。在画布上单击添加第1个文字图层并输入文本“Hi,welcometo｢ProductName｣”，放置在主标题HELLOWELCOME下方。7.5添加辅助文字和按钮2.添加跳转按钮添加文字并设置样式使用文字工具，在字符面板中设置字体为30点，字体颜色为#ffbc09。在画布上单击添加第2个文字图层并输入文本“Skiptohomepage6S”。拖动鼠标框选6S两个字，在字符面板上将字体改为粗体字，大小不变。绘制按钮形状使用椭