打印

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

本主题由 zobyking 于 2007-12-31 17:34 分类
朋友们看了我的"假冒伪劣"的仿制品后,都挺有兴趣,所以让我写教程,好吧好吧,我写...努力写...先写一部分,明天继续写...呵~~

      那篇展示的文章在这里:

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 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • webs2008 威望 +3 原创内容 2007-5-20 14:57

TOP

唉,咋就不一次都发完
2007-08-08

TOP

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


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

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



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







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





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





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

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

TOP

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

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



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











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



      接下来做高光部分:









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

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

TOP

先坐个沙发,等会交作业~

[ 本帖最后由 jdcrjdcr 于 2007-5-20 13:47 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

新鲜的教程哦 赞一个
...^;

TOP

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







































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

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

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

TOP

   强啊,学习了!

TOP

强人,好奇啊,学习中,

TOP

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

TOP

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

TOP

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

TOP

收藏了。慢慢学习

TOP

挺好的。学习

TOP

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

TOP

学习啦!

TOP

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

照着做了,总感觉不像
留下一眨眼的时间,看一场烟花的表演......

TOP

感谢楼主了
moment

TOP

源文件在一楼~~~

TOP

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

TOP

做的不错!

TOP

很不错的教程,多谢楼主了!
拿着单反相机的傻瓜级用户!!

TOP

这个是。。。。干嘛的?

[ 本帖最后由 changing1996 于 2007-5-22 23:56 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
合掌为朴素的礼敬,微启又如莲花

TOP

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

[ 本帖最后由 changing1996 于 2007-5-22 23:58 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
合掌为朴素的礼敬,微启又如莲花

TOP

发个练习

教程不错,感谢楼主,发个练习
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

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

TOP

交个作业

昨天做的急匆匆的就下班了,细节,光效没出来。有空再改一下,先发上去。
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
我好像总是那么困

TOP

好啊好东西

TOP

... ... ...无语~~~~无聊
打劫~~打劫设计技术和理念 哈哈哈哈~~

TOP

用路径怎么画线啊?

TOP