PS制作高光导航背景

 PS制作高光导航背景教程像大家介绍的是导航的HOVER状态背景,制作出来的效果挺不错的,推荐过来和大家一起分享学习了,先来看看最终的效果图吧:

  前段时间有朋友问这个效果怎样实现的,今天我简单写一下教程,希望对大家有用,还有如果大家对页面中的什么效果感到疑惑,就请留言给我,我会尽力发上教程来和大家分享的。

  首先看一下最终效果和分层:

PS制作高光导航背景 三联

  131

  1、 背景色设置为#280021,新建图层,利用钢笔工具画如下图形,填充颜色,然后图层样式中的渐变叠加设置如下:

  2、 新建图层,用椭圆工具在图形上面建一个选区,然后填充白色,如图。

  3、取消选区,选择"滤镜""高斯模糊"把白色进行模糊。具体数值视效果而定,效果如图。

  4、把这个图层的混合模式设置为"叠加",现在看起来过于亮,可以降低一下透明度。然后把超出下面图形的白色去掉。如图。

  5、新建图层,按住ctrl单击图形图层得到图形选区,然后选择"编辑"-"描边"对它进行描边设置,如图。

  6、将此描边图层的混合模式设置为叠加,透明度设置为40%,视效果而定。如图。

  7、接下来先添加上部高光。用钢笔工具新建选区,然后ctrl+enter转换成选区,然后按住ctrl+alt+shift再点击下面图形的图层,使他们两个的选区进行重合,用渐变工具(白色到透明)进行由左上到右下的拖动(这里在拖动的时候要注意,不要拖动的太大,从左上边缘开始拖动到左下边缘为止即可),适当调节透明度为80%。如图所示。

  8、希望再把上面高光再真实一些,可以先把这个图层混合样式设置为"叠加",然后再复制一层,把复制的这一层混合样式设置为"正常",再稍微调低复制层的透明度为70%.如图。

  9、下面进行底部高光的处理,新建图层,选择铅笔工具,白色,在图层的下边缘画出一条直线,如图。

  10、然后,将此图层的混合样式设置为"叠加",然后单击图层面板的蒙版图标,如图,图层此时显示下面这个样子。然后选择渐变工具,设置为黑白黑,然后从左到右进行拖拉,如图

  11、新建图层,选择柔性笔刷,颜色白色,设置大小为14左右,在图形的下边缘处点击一下,如图。然后ctrl+T将它变长,如图。然后将此图层混合模式设置为"叠加",把超出图形边缘的光删掉,如图。

  12、同样如同上面第9,10步操作,所不同的就是图层混合样式为"正常"而不是"叠加",然后适当降低透明度,让其有一条亮线。如图

  13、同样如上面11步一样操作,不同的是,笔刷大小设置为10,比上面的14小一点,然后图层混合模式设置为"正常",并且适当降低一点点透明度。如图所示。

  到此为止,这个小效果就完成了,在做类似光效时,最主要的应用就是高斯模糊和"叠加",合理运用这两个功能会给作品增色不少。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Photoshop(PS制作顶部导航栏的步骤如下: 1. 创建新文档:打开Photoshop软件后,点击菜单栏中的"文件",选择"新建"来创建一个新的文档。在弹出的对话框中,设置文档的尺寸(宽度和高度),分辨率和背景颜色。根据需要,可以选择透明背景或特定的背景颜色。 2. 设计导航栏的布局:使用矩形工具(Rectangle Tool)或形状工具(Shape Tool)创建导航栏的基本形状。根据设计要求,可以选择水平布局或垂直布局,并调整大小和位置。使用参考线和网格来帮助对齐元素。 3. 添加导航项:使用文本工具(Text Tool)在导航栏中添加导航项的文字。设置字体、字号、颜色等属性,并根据需要进行排列和对齐。可以使用不同的字体和样式来增加视觉吸引力。 4. 设计样式和颜色:使用图层样式(Layer Style)和调整图像(Adjustments)等功能,对导航栏进行样式和颜色的调整。可以添加阴影、渐变、描边等效果,以及调整亮度、对比度和色彩平衡等属性。 5. 添加交互效果:为了提升用户体验,可以为导航栏添加交互效果。例如,当鼠标悬停在导航项上时,可以改变背景颜色、字体颜色或显示下拉菜单等。可以使用图层样式、图层组或切片等功能来实现这些效果。 6. 调整和优化:完成导航栏的设计后,对其进行调整和优化。这包括对元素的位置、大小、颜色等进行微调,以确保最终效果符合设计要求。 7. 导出导航栏:完成设计后,点击菜单栏中的"文件",选择"导出"或"存储为Web所用格式",选择合适的文件格式(如PNG、JPEG等),并保存到指定位置。 以上是使用Photoshop制作顶部导航栏的基本步骤。具体的设计过程和效果可以根据需求和创意进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值