雨夜心情的UI设计

雨夜心情

朋友们看了我的"假冒伪劣"的仿制品后,都挺有兴趣,所以让我写教程,好吧好吧,我写...努力写...先写一部分,明天继续写...呵~~

先看一下效果图吧,左边的是我仿的,右边的是网上的原稿






来讲讲过程吧,先打开PS,新建一个文档,300px*400px,黑色背景填充.再打好参考线~~



截图上有说明,所以这里我不说了,大家看图上的注释.







这里新建一个"绿色部分"的图层,填充为白色



然后对"绿色部分"添加图层样式,做"渐变叠加",设置如图:



设置完毕,看一下实际的效果吧:



接下来,添加一个"黑色部分"的图层,这里的操作和"绿色部分"相似,所以我略过:







此时,"黑色部分"在"绿色部分"之上.把"绿色部分"图层放到"黑色部分"之上,按下图操作:





在上述操作中,顺便把右边的绿色区域也完成吧,那个不是很难吧,用选区操作就能完成.完成后,再对它加一些"内发光":


接下来,做阴影效果,看图操作吧:




第一部分到些结束,下一期继续教你如何进行后续的步骤!

雨夜心情

接着上一期的步骤,继续讲讲如何做下面的一些部件,OK,继续吧,看这个图吧,以后图上有注解的,我就不多费文字讲解了,看图:



      然后,很前面一样,对这个图层添加图层样式,看下图:







      OK,看一下效果如何~~嘿嘿,是不是有些意思了?





    接下来,添加左边的文字,看图:





       到此,这一部分也做完了,继续下一部分的制作吧~

[ 本帖最后由 雨夜心情 于 2007-5-20 15:37 编辑 ]

雨夜心情

继续制作过程.现在开始做键盘区啦!







































      至此,整个制作就结束了,剩下的文字处理大家自己发挥想像吧~~呵呵.
      大家也多多支持偶的博客呵，有空来踩踩~~这篇教程我也放在我的博客上了：）
      http://www.rainoina.com

luoweining

:16: 这么多步骤呐!!!!!啊啊

nesp

做这些东西本来就经常很多图层

雨夜心情

自己顶~~怎么就没人感兴趣呢!!!

遊客

不错嘛~学习一下

雨夜心情

嘿嘿,终于有人来看啦

nature

UP

琴铉我心

很好...
顶起