请选择 进入手机版 | 继续访问电脑版

做设计论坛(bbs.zuosj.com)

 找回密码
 立即加入

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 731|回复: 3

Photoshop制作超酷的古金属风格登录框

[复制链接]

431

主题

763

帖子

2748

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2748
QQ
发表于 2015-3-9 16:55:04 | 显示全部楼层 |阅读模式
前言:本例教程源于一个国外客户的真实案例,在此给大家分享一些我在制作时的一些思路,思路为重点。希望能对大家的设计有所帮助。主要思...
来源:站酷
作者:DearSalt
本例教程源于一个国外客户的真实案例,在此给大家分享一些我在制作时的一些思路,思路为重点。希望能对大家的设计有所帮助。
主要思路:画草图,用纯色块填充草图,加材质做质感,最后整理调整。
最终效果
20150307092151480.jpg
1、首先我们把登录框的草图画出来,下图是对方已经画好的,客户说了想要这种形状。如果客户没有指定的话那就要自己动手画了。
20150307092152159.jpg
2、草图完成后,接下来我的操作是使用钢笔工具勾勒出登录框各个部分的外形,然后再用纯色块填充。在这里网格工具可以很好的帮助你。网格线的间隔可以在首选项中设置,下面是过程图。
20150307092153482.jpg
20150307092153148.jpg
20150307092154295.jpg
回复

使用道具 举报

431

主题

763

帖子

2748

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2748
QQ
 楼主| 发表于 2015-3-9 17:01:09 | 显示全部楼层
3、接下来为登录框添加质感,我通常的做法是材质图结合图层样式实现效果,下面拿登录框的底框为例讲解具体操作,其他部分大同小异就不做详细讲解了。首先背景我找了多张材质划痕素材进行融合,然后对底框加了简单的立体效果图层样式,最后再为其叠加材质,具体操作如下。
20150307092155512.jpg

20150307092156788.jpg

20150307092156503.jpg

20150307092157438.jpg

20150307092158695.jpg

20150307092158509.jpg

20150307092159956.jpg
回复 支持 反对

使用道具 举报

431

主题

763

帖子

2748

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2748
QQ
 楼主| 发表于 2015-3-9 17:03:13 | 显示全部楼层
4、图层样式。
20150307092159320.jpg
20150307092200229.jpg
5、然后创建剪切蒙版,导入素材图,为底框添加纹理效果。在此过程中可以多多尝试图层模式,并适当降低不透明度。
20150307092155512.jpg

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

20150307092201802.jpg
回复 支持 反对

使用道具 举报

431

主题

763

帖子

2748

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2748
QQ
 楼主| 发表于 2015-3-9 17:04:31 | 显示全部楼层
7、添加输入框以及一些文字提示,输入框的效果可以在图层样式设置中将阴影模式改为“正常”,颜色改为白色,然后适当调整位置与大小即可。
20150307092201699.jpg
8、制作登录框按钮,跟底框制作道理是一样的。
20150307092202886.jpg
9、大体效果已经完成,最后我们再做一些收尾工作。比如说我在登录框上部加了几个小螺丝,页面的上下加了边框效果。当然这只是我的做法,你也可以添加其他的效果。
20150307092151480.jpg
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即加入

本版积分规则

QQ|Archiver|手机版|小黑屋|左设计工作室旗下网站 ( 蜀ICP备14010612号-1

GMT+8, 2017-10-18 13:23 , Processed in 0.324435 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表