在上一篇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的混合选项