快捷搜索:

Flex登陆界面开发经验分享五:Flex登陆框美化

在上一篇Flex登岸界面开拓履历分享四中,Jackson已经将登岸界面的 一些结构措施和简单的CSS利用措施进行了分享,而且还增添了背景平铺的代码供大年夜家进修。 此次Jackson继承改变这个Flex登录框,让它更具美感。可能对付没有设计履历的编程职员, 处置惩罚图片哪怕是一个小图标也是艰苦的。以是Jackson在这里只管即便将简单地先容一些 Photoshop处置惩罚图片的措施,盼望能给编程的同伙一些进修参考。

我们继承来改造这个Flex登录框,现在的Flex登岸框照样对照单调,Jackson在改造的时 候就想,假如可以在登岸框panel的title中增添一个公司logo图片应该会让title更夺目。另 外,登岸框上的帐号与密码输入框末尾假如能增添相关形象的图片,让客户输入向导更明确 同时也会使客户体验更好。然则要让图标可以正确显示,而不会由于比例不调而呈现图片锯 齿,最好照样先在Photoshop(以下简称Ps)上处置惩罚出与必要展示位置尺寸同等的图片。为了相 瞄正确,Jackson会常常应用这样的措施,将现在的Flex登岸窗口先Print下来(每小我的键盘 功能上都有这个功能哦,点击"Print Screen"功能键就OK了),在这个例子Print 之前先在Flex登岸框的title文本和按钮文本中,用全角中文空格空出图标必要放置的位置, 如 图1Flex登岸框文本改动 所示。

图1  Flex登岸框文本改动

然后当然是打开Photoshop软件。新建一个Ps文件,如 果你之前Print成功了,那功能面板上的预设应该会自动选择了剪贴板,直接确定就行,然后 "Ctrl"+"v"将你Print的Flex登岸框粘贴进来。好了,这个Ps文件就成 为你的"草稿"页了。将你想要表达的图片元素都放到这里来,调剂好各图片的大年夜 小后再零丁处置惩罚每个必要用到的图片。这样的好处就好比你在完成一幅丹青作品中的时刻需 要先来个草稿勾勒好大年夜概的轮廓和结构,只管即便正确表达你的设计(Jackson话烦琐了^-^)。

首先将公司logo放到这个”草稿”上(一样平常公司的logo图会是白底或者是 分层的源文件,抠图Jackson就不详说了),经由过程缩放功能将图片调剂到你必要的大年夜小。 Jackson这里例子中,logo与背景的色差对照小比较不显着,是以可以给logo设置一个发光效 果让logo显着一点。 (本例中应用的Photoshop软件版本是CS2,请留意不合版本功能的应用 措施。)在logo图层中右点击呈现的选择菜单中选择"混杂选项",选择"外发 光"如 图2 Photoshop的混杂选项 所示,然后将参数如 图3 Photoshop外发光选项卡参 数设置 (其他参数同伙们可以自己考试测验,直到达到你想要的效果)。接着将代表帐号的小人和 代表密码的小锁也拖拽到你的"草稿"文件中并调剂尺寸到相宜大年夜小(在Ps中打开你 要的图标文件,然后直接将该打开的图片文件拖拽到你的草稿文件上,假如你打开的图片格 式是gif,那就应先将该图片的索引颜色模式转变成RGB颜色模式才可以拖动,设置图4  Photoshop索引颜色模式转换成RGB颜色模式 所示),着末调剂效果如 图5 Ps草稿文件中的效 果图 所示。可以望见效果图中,小人图标和小锁图标都有从右向左的阴影,这个设置与设置 外发光的措施一样,在"混杂选项"中选择"投影",各位同伙自己设置 看看吧,Jackson就不详说了^-^。同样,登岸与取消(重置)按钮也设计上了图标。

图2  Photoshop的混杂选项

您可能还会对下面的文章感兴趣: