手机UI教程--vista风格[原创]
这次的版主说层次不够强,我觉得似乎也是,不过还是抽了个空把教程做出来了,虽然做的有些欠佳,不过配色上的技术坛上有很多高手,所以一定能做出更漂亮的来,我只是抛砖引玉一下吧~教程如下:先来看看最终效果：
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_5.jpg[/img]
大家已经见过了吧，现在来说说怎么做这个效果吧，现在来说说怎么做，小二，上教程！
1、新建一个圆角矩形，填充白色，再缩先2PX，删除，得到这么一个填充区，再用图层样式，叠加渐变，得到这个效果，这个操作比较简单，我就一带而过了，不会的就多强化一下基础操作吧：）
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap1.jpg[/img]
2、然后新建三个图层（分别是界面的顶部栏，中间栏和下边栏这三个栏），如图中那样，最上面那个填充白色，最下面那个也填充白色，中间的用过渡填充，切记用三个图层，不然后面进行图层样式操作会出问题。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap2.jpg[/img]
3、对最上面那个白色图层添加图层样式，操作看下面：
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap3_1.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap3_2.jpg[/img]
4、现在看到效果啦，蓝色的顶部栏，不错。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap3_3.jpg[/img]
5、用同样的办法，把下边栏也做好吧：）
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap4.jpg[/img]
5、接下来做顶部的一些细节信息，做电池电量显示吧，新建一个图层，看到下面的图，没啥技巧，用像素画的方法，一点一点地画吧，把图放到到800%或者更大，用铅笔工具，笔头一像素，慢慢事，就是耐心活~~
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap5_1.jpg[/img]
6、画完以后，对刚才的电池电量显示图层添加图层样式
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap5_2.jpg[/img]
7、看到做好的效果是这样的（截图工具不太好，画质有些不好，将就。。。将就看。。。）
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap5_3.jpg[/img]
8、用同样的办法，做好其他的一些部件（文字就直接输吧，然后拷贝图层样式，粘帖图层样式，这样偷偷懒吧，反正都是一样的效果）
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap5_4.jpg[/img]
9、然后做微软的徽标，不过这个我就不打算详细讲了，大家自己试着做做吧，这个不是我想讲的重点：）嘎嘎
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap6.jpg[/img]
7、然后，在顶部栏上加个“白色——透明”的渐变条，做出高光的效果。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap7.jpg[/img]
8、用同样的办法，做好下部栏的文字和高光效果。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap8.jpg[/img]
第一部分先到此结束，练习练习，温故而知新，然后再继续学第二部分!
[url]http://rainoina.com[/url] 想必各位已经做得差不多了吧，那就继续吧~~
9、做一个长长的圆角矩形（用路径具体里的图形工具，就是先画图形，再ctrl+enter将其变成选区），然后填充随意颜色。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_1.jpg[/img]
10、然后，对这个图层添加图层样式，设置如下：
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_2.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_3.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_4.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_5.jpg[/img]
11、添加完图层样式后，再稍稍调整一下该图层的透明度，你自己觉得满意就行，效果如下：
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_6.jpg[/img]
12、然后新建一个图层，做出高光效果（还是“白色——透明”的过渡方式）
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_7.jpg[/img]
13、用同样的方法做出所有的按键。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap9_8.jpg[/img]
14、然后添加文字。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap10_1.jpg[/img]
12、给文字图层添加图层样式
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap10_2.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap10_3.jpg[/img]
13、看一下文字的效果
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap10_4.jpg[/img]
14、同样操作，完成所有文字效果
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap10_5.jpg[/img]
第二部分制作结束，接下来是第三部分屏幕的制作。
[url]http://rainoina.com[/url] 现在是第三部分了，回顾一下前面的操作，其实都是很简单的图层样式的操作，再次重复我的那句话，图层样式+滤镜≈photoshop，就利用这些我们就可以做出很多的效果啦！
15、现在来做短信提示条。像画键盘那样，画个长长的圆角的矩形，填充任意色。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_1.jpg[/img]
16、给这个图层添加图层样式，如下设置
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_2.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_3.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_4.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_5.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_6.jpg[/img]
17、看一下效果，还不错~~
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_7.jpg[/img]
18、新建一个图层，加高光。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_8.jpg[/img]
19、新建图层。用第一篇里讲过的像素画办法，画一个短信提示的信封图标。如图。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_9.jpg[/img]
20、对这个图层添加图层样式。
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_10.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_11.jpg[/img]
21、效果图如下
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_12.jpg[/img]
22、用同样办法，做出文字的效果
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap11_13.jpg[/img]
23、最后，来做屏幕吧。照旧，画矩形，填充，这些都是老套路了，说得口干了=_=!!
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap12.jpg[/img]
24、做好文字效果，这里我就略了，也就是外发光和颜色叠加，没太多东西了！
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap13.jpg[/img]
25、最后做进度条，画个长的圆角矩形
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_1.jpg[/img]
26、对这个图层添加图层样式
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_2.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_3.jpg[/img]
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_4.jpg[/img]
27、然后，收工，看成品~~~~
[img]http://www.ynutx.net/raindesign/blog/upload/mobile_ui/snap14_5.jpg[/img]
RainoXu总结：
做这个UI，用到的最多的还是图层样式样，以及一些基础的操作，如果熟练的话可以很快地完成，剩下的就看你配色了，至少blueidea上的朋友说键盘的颜色不好看，不过将就着了，有空我再改改，实在不知道改成什么颜色。。。
另外，对于高光，水晶效果，这些在蓝色上都有很多教程，也就不再多说了，大家自己去找教材，以一反三，其他的一些效果就是小菜一碟了：）
[url]http://rainoina.com[/url] :D 虽然偶做的不太好,不过大家记得交作业,嘎嘎,一定有做得更好的~~~我到时就过来收"版权"费~~~PSD源文件我也提供了,在上次的那个展示帖里可以下载到~~ bu cuo o 虽然没有什么创新的东西,但对于新手还是蛮详细的. 而且比较有普遍意义~~~
谢谢楼主提供原创教程~ :eek: :eek:
真搞不懂,
什么东西都可以拿来做成教程.别误人子弟啊! 既然要做触摸屏，为什么不把分辨率做高一点呢。 确实不错的教程 , 收藏咯!~ 顶一下。 精神是值得嘉奖的，至少对部分新手有帮助. 感觉这个教程就像是一个渐变背景，然后一直教你怎么填充文字。 :eek: 学习 [url=http://www.namipan.com/photo/d668fdb6ed3709ab3690e1aaea6f578b777595e988490000/%E6%89%8B%E6%9C%BAui.jpg][img]http://img.namipan.com/p/d668fdb6ed3709ab3690e1aaea6f578b777595e988490000/0/%E6%89%8B%E6%9C%BAui.jpg[/img][/url] 好东西~~ 支持楼住，收藏并珍藏，谢谢
我要交作业
但怎么上传图片啊？？？我要交作业
但怎么上传图片啊？？？ 绿色太鲜艳了 不舒服 设计角度说没有意义，技术角度还是有教学作用的 感觉奇怪。:confused: 很好，我正在做类似的手机软件界面，发愁呢，真的有帮助。 [url=http://www.photophoto.cn/shejituku][color=White]设计图库[/color][/url] [url=http://www.photophoto.cn][color=White]素材图库[/color][/url] 不错 收场 :) 对新持手有点帮助!页:
[1]