纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页photoshop教程入门实例

网站导航设计教程 PS按扭制作教程 制作漂亮的网站左侧导航按扭

PS新手入门学习-技巧   2021-06-08 我要评论
PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程本教程介绍非常漂亮的导航图示按钮制作方法按钮的效果非常大气及精美利用图示图形来制作提示效果感觉非常的生动最终效果

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

1、首先我们在PS里新建一文件大小为 500x500px白色背景

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

2、使用圆角矩形(半径为10px)绘制我们的质感图标的轮廓

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

3、随后我们使用钢笔工具为每条边的中点增加一个矢量点随后用直接选择工具将四条边的中点向外拖动一点距离目的是让图形轮廓感觉更圆润

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

4、为轮廓使用图层样式

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

5、加上样式后的效果

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

6、按ctrl+j复制图层将复制出的图层上的图层样式全部去掉然后按ctrl+t将复制出的图层缩小到原来的94%左右

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

7、随后为复制出的图层添加如下新样式:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

8、再次按ctrl+j复制图层去掉其上的图层样式随后按ctrl+t缩小到原来的93%大小之后用直接选择工具拖动上面的矢量路径节点使其变成如下形状:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

9、随后栅格化图层(在图形上按鼠标右键选栅格化图层)并将其填充为白色:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

10、从右向左制作渐变效果并设置不透明度使其能出现如下效果:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

11、使用自定义形状工具选中一个形状:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

12、为之前的质感轮廓添加一个图形颜色为白色:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

13、现在完成了图形的制作我们将来制作右边的文字按钮先用圆角工具颜色为黑色半径为7px制作如下区域只需要保证区域不要超过我们的图形轮廓高度

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

14、为其增加图层样式

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

15、添加文字

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

16、为文字增加图层样式使文字效果与左边的图标效果相似

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

17、在大标题下增加小文字颜色为#1d70e1

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

18、为小文字添加阴影样式:

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程

19、我们上面只是介绍了导航中的 一个按钮的做法下图为完整版的导航按钮这里使用的不同颜色相同色调看上去依然十分的协调!

PS按扭制作教程:制作漂亮的网站左侧导航按扭网站导航设计教程


相关文章

猜您喜欢

  • 配色基础 你要懂的色彩悄悄话 PS基础教程之色彩学

    PS基础教程之色彩学配色基础:你要懂的色彩悄悄话,配色技巧PS爱好者教程自学网教您学会更多的配色知识怎样配色配色的技巧等关于配色中不为人知的秘密对您的设计工作是很有帮助的好好学习一下吧 色彩传达信息有两种主要的途径:自然联想和社会(..
  • 仅仅七步教你简易打造双重曝光效果 ps照片后期处理技巧教程

    今天我们学习用photoshop软件把照片制作出漂亮的双重曝光效果ps照片后期处理技巧教程:仅仅七步教你简易打造双重曝光效果双重曝光(Double Exposure)指在同一张底片上进行多次曝光.是许多人接触相机必玩的技巧神秘又让人难以言喻的视觉效果常常让人..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式