Photoshop绘制金属质感的网页界面设计

2016-02-16 02:53 3 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐Photoshop绘制金属质感的网页界面设计,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - PS 】

1. 首先给大家看下整体效果。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

2. 启动本教程你将需要创建一个新文件。使用任何你想要的值,但是我建议你创建一个文件的最小宽度为1100*1163像素。背景填充# 252118。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

3. 原教材玩神秘没有写怎么做,我用我的方法做了一下,你可以复制一个刚刚做的图层,选择画笔工具,大小设成1100px,硬度0%。柔光,把这个图层透明度调到60%就ok了.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

4. 在中间用圆角矩形画个995*295的圆角矩形。填充#52442b.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

5. 复制一个上面图形,把颜色改成#e9e9e9。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

6. 在页脚创建一个新的形状。在这里,用来添加一些文本,填充#15120d. 宽度54.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

7. 对第一个矩形做滤镜--杂色--添加杂色,数量为310.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

8. 这一步元教材说的很模糊,我是对这个矩形做的效果,新建了一个白色矩形,做的不透明度13%,用橡皮擦去掉不要的部分。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

9. 在页脚上边的位置在创建一个新的矩形。在这里,用来添加一些文本,填充#15120d. 宽度252.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

10. 现在我将创建笔记本螺旋。这相当容易。你所要做的是创造两个很色矩形和一个长方形矩形对你做渐变叠加。组合在一起复制多个就可以了。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

11. 输入文本,你可以给上面的大字加下效果,下面的小字加下投影效果就好了。如图

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

12. 用圆角工具绘制两个按钮,添加文本。126*34.做以下效果。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

13. 用圆角矩形工具画一个209*223的矩形,做内阴影和描边效果。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)

14. 用钢笔工具绘制下面图形,添加文本。

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

15. 在顶部的布局我将创建一个简单的矩形。415*281.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

16.做以图层样式

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

17. 然后,我将创建一个较小的形状381*258,图层样式如下图:

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

18. 我的最后一个步骤是创建导航组合布局.

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

19.最后完成的效果

Photoshop绘制金属质感的网页界面设计,PS教程,图老师教程网

来源:https://www.tulaoshi.com/n/20160216/1567160.html

延伸阅读
标签: PS PS基础
本教程主要教图老师的朋友使用PhotoshopCS5制作精美的IPAD用户应用界面,教程将一步步指导大家如何制作逼真的IPAD用户界面的一个音频界面,这里将利用视网膜成像原理,使用PHOTOSHOP中的形状图层和图层样式达到图示效果。 本教程为 图老师论坛 版主 瑭大官人 原创翻译,转载必须注明作者和出处。 素材下载: 本地高速下载 先看看效果图 ...
标签: PS教程 PS基础
本教程为大家介绍如何使用photoshop制作金属质感图形方法。思路:先使用滤镜效果制作出金属质感的大图。使用到的滤镜效果比较多。然后把自己想要的图形画出选区,然后把多余的部分删除,再整体调整下,效果就出来了! 最终效果 1、在Photoshop中新建一个文件,然后新建一个图层“图层1”,按D...
首先感谢"折折熊"的翻译,本文虽然是说了10条网页界面技术的应用,不过作为界面设计师在哪里使用什么样的技术来说更为重要,所以我们觉得称其为设计思路更为恰当,不过作为现今的网页设计师来说,设计中仅仅考虑页面的美观与排版可能已经不够用了,很多时候我们设计页面的时候还要考虑进在哪里使用一些小的JS效果技术来使访问者用起...
标签: PS PS基础
先看效果图。 新建文档550550像素,背景黑色,建新层,前景色4c73f1画一个正圆形状,复制3个,副本1图层缩小5%左右,副本2层缩小位置如下,颜色改为白色。 选择形状1,隐藏其它层,添加图层样式。 描边颜色请采样我的截图,效果如下。 选择副本层,添加图层样式。 效果如下。 选择副本2,填充归零,添...

经验教程

974

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部