登录框素材-用axuer怎么制作网页登录

1、首先获取准备替换LOL登陆界面的素材文件,一个jpg和一个swf文件:

2、打开Zcom电子杂志,最小化后,依次点“开始,运行”,输入%appdata%后回车:

3、在新的资源管理器中寻找类似Zcom172415的文件夹打开,然后再打开pic子文件夹:

4、在此处,双击查看swf文件,然后复制喜欢的swf到其他的文件夹:

5、双击打开Flash资源提取工具.exe:

6、单击“导入文件”,然后选择保存好的swf文件,单击“打开”:

7、单击“提取图像资源”后,选择图片保存的位置,然后单击“确定”,swf中的图像文件即可被保存到指定的文件夹了。

8、修改jpg文件名为,修改swf文件为:

9、在LOL安装目录找到主界面资源,并替换文件:

10、在LOL图标上右击,选择“属性”,在属性对话框中单击“查找目标”:

11、在打开的资源管理器中打开ui子文件夹:

12、将已经做好的资源文件复制,粘贴到本文件夹内:

13、重启LOL程序,就可以看到修改过的主界面了

本例教程源于一个国外客户的真实案例,在此给大家分享一些我在制作时的一些思路,思路为重点。希望能对大家的设计有所帮助。

主要思路:画草图,用纯色块填充草图,加材质做质感,最后整理调整。

最终效果

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

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

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

4、图层样式。

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

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

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

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

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

最终效果:

高保真登录框rp文件下载:高保真登录框

作为一个高保真的登录框,其制作的重点在于:

1.如何在点击输入框时,输入框内的文字消失

2.如何让登录框能够识别我输入的:“用户名”、“密码”、“验证码”

3.当我输入错误时,下面的提示文字是怎么显示的

解决以上3个问题,需要讲到axure条件中的“文字在部件”这样一个选择项,下面我们一起来尝试制作吧!

一.准备素材

还是和之前的教程一样,寻找我们需要的素材。制作登录框的素材相对比较简单,只需要用矩形工具制作一个如图示的“框”,可以适当调整大小和排布让它变的美观一点。在相对应的控件中填入相应的文字(如图)

(注:在登录的上方有一个透明的矩形,用来显示提示文字)

二.制作“鼠标点击时,输入框内文字消失”效果

这一步相对比较简单,只需要考虑“输入框获得焦点”、“输入框失去焦点”两种情况

当“输入框获得焦点”时,按照下图设置交互动作

当我们设置文字在部件 密码等于“”后,我们单击输入框,输入框内就会显示空格了。(4为空)

当输入框失去焦点后,如果输入框中没有输入文字(即文字长度为0)则显示预设文字;当有输入文字时,显示输入文字。如下图设置:

三.当输入错误时,下方提示文字的显示

在这一个步骤中,只需要注意一个问题就可以了:在编辑条件中,设置登录失败的三种情况(用户名错误、密码错误、验证码错误),在设置否命题时,只需要列举一项不满足即可。笔者在这里设置的“用户名为1@,密码为123456,验证码为GOOD”只要三个输入框的任意一个不符合预设,则登录失败,在提示文字区域显示对应文字。如图

当用户名输入错误时的条件为;

当某项输入错误时

在这些条件全部编辑完成后,一个高保真的登录框就完成了!在这篇文章中,主要讲到了axure中的“文字在部件”这样一个条件的使用,相信各位应该对这样一个选择项有所认识了吧!