PS制作金属质感的网页游戏登录页面

本例教程源于一个国外客户的真实案例,在此给大家分享一些我在制作时的一些思路,思路为重点。希望能对大家的设计有所帮助。主要思路:画草图,用纯色块填充草图,加材质做质感,最后整理调整。最终效果

操作方法

  • 01

    首先我们把登录框的草图画出来,下图是对方已经画好的,客户说了想要这种形状。如果客户没有指定的话那就要自己动手画了。

  • 02

    草图完成后,接下来我的操作是使用钢笔工具勾勒出登录框各个部分的外形,然后再用纯色块填充。在这里网格工具可以很好的帮助你。网格线的间隔可以在首选项中设置,下面是过程图。

  • 03

    接下来为登录框添加质感,我通常的做法是材质图结合图层样式实现效果,下面拿登录框的底框为例讲解具体操作,其他部分大同小异就不做详细讲解了。首先背景我找了多张材质划痕素材进行融合,然后对底框加了简单的立体效果图层样式,最后再为其叠加材质,具体操作如下。

  • 04

    图层样式。

  • 05

    然后创建剪切蒙版,导入素材图,为底框添加纹理效果。在此过程中可以多多尝试图层模式,并适当降低不透明度。

  • 06

    内框采用同样的方法,这时的图层样式就要添加内阴影的效果了,耐心调整素材与图层的效果。

  • 07

    添加输入框以及一些文字提示,输入框的效果可以在图层样式设置中将阴影模式改为“正常”,颜色改为白色,然后适当调整位置与大小即可。

  • 08

    制作登录框按钮,跟底框制作道理是一样的。

  • 09

    大体效果已经完成,最后我们再做一些收尾工作。比如说我在登录框上部加了几个小螺丝,页面的上下加了边框效果。当然这只是我的做法,你也可以添加其他的效果。 最终效果:

(0)

相关推荐

  • 如何在PS中制作金属质感字体

    连续不断的PS滤镜强化训练,难免会有些乏味,本篇,咱们换一个方式,来道开胃菜吧. 请看详细,用PS制作金属质感的立体字. 操作方法 01 1.原始文字准备 (1)新建画布,尺寸600*600: (2) ...

  • Photoshop制作金属质感按钮

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

  • 如何用PS做出金属质感

    最近很多朋友咨询关于如何用PS做出金属质感的问题,今天的这篇就来聊一聊这个话题,希望可以帮助到有需要的朋友. 操作方法 01 新建一个文件,建立一个新图层,选中图层,选择菜单栏中的"滤镜&q ...

  • 用ps制作金属字的方法

    photoshop软件能够制作出各种美轮美奂的字体,金属字是其中一种.金属字在日常生活的各种平面设计作品中也是比较常见的,那么,用ps制作金属字的方法是怎样的呢?下面通过一个实例来说. 操作方法 01 ...

  • 如何用PS制作金属字

    在日常生活中,经常会遇到用PS处理图片的情况,很多人问我如何绘制金属字体.本经验主要介绍如何用PS制作金属字. 操作方法 01 新建RGB模式 800*600像素的文档: 02 用文字工具写出字:字体 ...

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

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

  • 用phtoshop制作金属质感的字体

    这里与大家分享一下用phtotoshop制作金属质感的字体. 操作方法 01 菜单栏:执行"文件"-"新建"命令,参数如下. 02 在"工具面板&qu ...

  • PS制作牛皮纸质感图片

    看到一些牛皮纸质感的图片,给人的感觉就是这张图片一定有一些故事藏于其中,让人感觉亲切舒服,下面教你用PS绘制牛皮纸质感图片. PS制作牛皮纸质感图片 01 打开电脑中的PS软件,根据硬件条件挑选版本, ...

  • 360浏览器无法显示网页游戏平台页面怎么处理?

    360浏览器无法显示网页游戏平台页面可能是flash插件问题导致,因为flash插件分为了ie系列的(tt,世界之窗,360)和非ie系列(火狐,opera) 主要是浏览器的内核不一样,如果想我想解决 ...