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

效果图

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

  • 08

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

  • 09

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

  • 10

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

  • 11

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

  • 12

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

  • 13

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

  • 14

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

  • 15

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

  • 16

    16.做以图层样式

  • 17

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

  • 18

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

  • 19

    19.最后完成的效果

(0)

相关推荐

  • 使用Photoshop绘制金属质感字效

    当我们在看一些字体设计的时候,有的人就喜欢看一些金属感比较重的字体,感觉看起来很有一种舒服的感觉,今天给大家带来的教程就是如何用Photoshop绘制金属质感字体. 金属质感字效绘制 01 进入PS界 ...

  • 使用Photoshop绘制金属质感文字

    今天给大家带来的Photoshop教程是绘制金属质感文字,利用简单的图层样式调整数值方式即可完成绘制操作,下面教你详细的制作步骤,一起学起来吧. PS绘制金属质感文字 01 进入PS界面新建一张画布, ...

  • 教你用Photoshop绘制金属质感按钮UI图标

    绘制金属质感按钮UI图标 操作方法 01 新建1000*800PX白色画布,创建一个渐变填充调整层,参数设置如下:右键将图层转换为智能对象,执行滤镜-杂色-添加杂色,数量为2,平均分布. 02 选择圆 ...

  • Ai绘制金属质感的图标

    Ai绘制金属质感的图标 操作方法 01 在Ai软件中,新建一个800*800的文档,选择椭圆工具,画一个椭圆图形,并添加渐变颜色,如图所示 02 然后选择椭圆图形到对象-路径-偏移路径,并添加渐变颜色 ...

  • Photoshop制作金属质感按钮

    Photoshop制作金属质感按钮 操作方法 01 在ps软件中,新建一个800*800的文档,背景色为白色,再新建一个图层·,选择椭圆选框工具,画一个正圆选区,填充黑色,如图所示 02 接着双击图层 ...

  • 怎样Photoshop制作金属质感的雷达盘教程

    本教程主要使用Photoshop制作金属质感的雷达盘教程,主要应用了铅笔笔刷滤镜和图层样式来完成.下面就让我们一起来学习吧. 先看效果图 步骤/方法 01 新建文档500x300像素,背景白色,为背景 ...

  • 教你用Photoshop来绘制立体质感的网页开关按钮

    如果你是设计师,那么创建界面元素是非常重要的技能.本次教程中,我们会创建一个简单漂亮的切换开关按钮.切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中,好了,来开始我们的 ...

  • 用PS绘制金属质感字体

    今天给大家带来的教程是:利用图层样式数值调整和搭配,简单绘制带有金属质感的银色字体,让不喜欢平面字体的你多学一点儿字体样式设计,下面教你详细操作方法. PS字体样式绘制 01 进入PS界面,ctrl+ ...

  • 教你用Photoshop“复古金属质感”风景图的调色

    一张"复古金属质感"风景图的调色过程 操作方法 01 素材拖进PS里,ctrl+j复制一层 02 我习惯使用习惯使用Camrea Raw滤镜调色,所以图层上操作鼠标右键转为智能对象 ...