UI制作教程[失效图片已恢复]

rainoxu 楼主

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

      那篇展示的文章在这里:

http://www.ynutx.net/raindesign/blog/archive/145.html
     
源文件可以先下载了边看边学:

[ 点击下载源文件 ]


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



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







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



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



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



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







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





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



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





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

源文件下载:http://www.ynutx.net/raindesign/blog/article.asp?bid=146

最后打个AD~~欢迎大家来我的博客~~
http://www.rainoina.com

[ 本帖最后由 rainoxu 于 2007-6-16 17:06 编辑 ]

guanwater

唉，咋就不一次都发完

rainoxu 楼主

接着上一期的步骤,继续讲讲如何做下面的一些部件,顺带把上一篇的教程地址也给出来
      


[url]http://www.ynutx.net/raindesign/blog/archive/146.html[/url]

      OK,继续吧,看这个图吧,以后图上有注解的,我就不多费文字讲解了,看图:



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







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





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





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

[ 本帖最后由 rainoxu 于 2007-6-16 16:55 编辑 ]

rainoxu 楼主

因为图片太多,所以分开发教程,这里继续再讲如何制作中间的水晶条.

      大同小异,还是先建图层,建选区,填充白色,看图:



      接下来,还是图层样式的操作,以下几步应该很熟悉了吧!











      再来看一下效果,哈,是不是已经有些感觉了?



      接下来做高光部分:









      这部分就做到这里了,先练习一下吧,还剩最后的键盘的制作了~~呵呵!

[ 本帖最后由 rainoxu 于 2007-6-16 17:02 编辑 ]

jdcrjdcr

先坐个沙发，等会交作业～

[ 本帖最后由 jdcrjdcr 于 2007-5-20 13:47 编辑 ]

loethen

新鲜的教程哦 赞一个

rainoxu 楼主

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







































      至此,整个制作就结束了,剩下的文字处理大家自己发挥想像吧~~呵呵

      大家也多多支持偶的博客呵，有空来踩踩~~这篇教程我也放在我的博客上了：）
      http://www.rainoina.com

[ 本帖最后由 rainoxu 于 2007-6-16 17:03 编辑 ]

huangss

   强啊，学习了!

kuxiaoderen714

强人，好奇啊，学习中，

wangcaf

真是不错,学习了,谢谢!

sifang

有的图片怎么看不到？哦，可以看见，网络延迟了。

yang391783

以前看这个界面的时候还想知道怎么做的呢 真是不错的教程 支持了!

xiaowing

收藏了。慢慢学习

bqianli

挺好的。学习

haha8335

不错 就是不错  MM很可爱 呼呼

chen3100

学习啦!

sosme

楼主能否给个源码学习学习

照着做了，总感觉不像

anpora

感谢楼主了

rainoxu 楼主

源文件在一楼~~~

woshijingyin

帅呆了！！！！谢谢找了好几年了终于是那啥回首在啥处

vipbaidu

做的不错！

mzbx8888

很不错的教程,多谢楼主了!

changing1996

这个是。。。。干嘛的？

[ 本帖最后由 changing1996 于 2007-5-22 23:56 编辑 ]

changing1996

我终于做出来个大概了。不过好多地方做不起来。比如：那2个弧线画不起来，钢笔路径不会画

[ 本帖最后由 changing1996 于 2007-5-22 23:58 编辑 ]

chenfreeroom

教程不错，感谢楼主，发个练习

chenfreeroom

晕死，怎么编辑了还有俩图，不知道怎么删

qingwubaobao

交个作业

昨天做的急匆匆的就下班了，细节，光效没出来。有空再改一下，先发上去。

gegongta7

好啊好东西

linearity

... ... ...无语~~~~无聊

yangxiao002

用路径怎么画线啊？