经典论坛 » UI图形设计 » UI制作教程[失效图片已恢复]

rainoxu 发表于 2007-5-19 22:50

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

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

      那篇展示的文章在这里:

[url=http://www.ynutx.net/raindesign/blog/archive/145.html]http://www.ynutx.net/raindesign/blog/archive/145.html[/url]
     [b]
[color=#ff0000] 源文件可以先下载了边看边学: [/color]

[url=http://www.ynutx.net/raindesign/fordown/ui_teach.rar][ 点击下载源文件 ][/url]

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

[img]http://photo8.yupoo.com/20070616/153627_2046111622.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/153631_907253902.jpg[/img]

[img]http://photo8.yupoo.com/20070616/153632_987874342.jpg[/img]

[img]http://photo6.yupoo.com/20070616/153632_1536258353.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/153632_1845016645.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/153633_2017668685.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/153633_1751644181.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/153634_283108390.jpg[/img]

[img]http://photo8.yupoo.com/20070616/153634_2001386954.jpg[/img]

[img]http://photo6.yupoo.com/20070616/153628_1665436846.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/153628_1513515504.jpg[/img]

[img]http://photo6.yupoo.com/20070616/153629_27790503.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/153629_174775982.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/153630_1219007376.jpg[/img]

[img]http://photo6.yupoo.com/20070616/153631_1974465854.jpg[/img]

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

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

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

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

guanwater 发表于 2007-5-19 23:41

唉，咋就不一次都发完

rainoxu 发表于 2007-5-20 12:22

接着上一期的步骤,继续讲讲如何做下面的一些部件,顺带把上一篇的教程地址也给出来
      
[url=http://www.ynutx.net/raindesign/blog/archive/146.html]

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

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

[img]http://photo6.yupoo.com/20070616/155519_1224553463.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/155520_2065818286.jpg[/img]

[img]http://photo6.yupoo.com/20070616/155520_643302826.jpg[/img]

[img]http://photo6.yupoo.com/20070616/155521_668887964.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/155522_2100838172.jpg[/img]

[img]http://photo6.yupoo.com/20070616/155522_1147869389.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/155523_668694846.jpg[/img]

[img]http://photo8.yupoo.com/20070616/155523_458794434.jpg[/img]

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

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

rainoxu 发表于 2007-5-20 12:24

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

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

[img]http://photo8.yupoo.com/20070616/160900_887167252.jpg[/img]

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

[img]http://photo8.yupoo.com/20070616/160902_1841328031.jpg[/img]

[img]http://photo6.yupoo.com/20070616/160903_942105209.jpg[/img]

[img]http://photo8.yupoo.com/20070616/160903_1565865121.jpg[/img]

[img]http://photo6.yupoo.com/20070616/160904_1050688283.jpg[/img]

[img]http://photo6.yupoo.com/20070616/160905_2021925528.jpg[/img]

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

[img]http://photo6.yupoo.com/20070616/160905_1181414882.jpg[/img]

      接下来做高光部分:

[img]http://photo8.yupoo.com/20070616/160906_286522949.jpg[/img]

[img]http://photo6.yupoo.com/20070616/160907_1029129052.jpg[/img]

[img]http://photo8.yupoo.com/20070616/160901_2134921419.jpg[/img]

[img]http://photo6.yupoo.com/20070616/160902_420121187.jpg[/img]

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

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

jdcrjdcr 发表于 2007-5-20 13:14

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

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

loethen 发表于 2007-5-20 13:28

新鲜的教程哦 赞一个

rainoxu 发表于 2007-5-20 14:42

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

[img]http://photo6.yupoo.com/20070616/162254_412430487.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162301_1362587509.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162302_106002705.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162302_1973058289.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162303_183512048.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162303_1546337976.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162304_1840940936.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162305_1733857833.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162305_1661610345.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162255_557535119.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162255_1428038688.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162256_219334208.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162256_1695866625.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162257_188276925.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162258_777232348.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162258_1102475977.jpg[/img]

[img]http://photo6.yupoo.com/20070616/162259_783810014.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162300_698824571.jpg[/img]

[img]http://photo8.yupoo.com/20070616/162300_1193670399.jpg[/img]

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

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

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

huangss 发表于 2007-5-20 16:45

:D :D :D   强啊，学习了!

kuxiaoderen714 发表于 2007-5-20 16:49

强人，好奇啊，学习中，:)

wangcaf 发表于 2007-5-20 20:09

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

sifang 发表于 2007-5-20 22:12

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

yang391783 发表于 2007-5-20 22:14

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

xiaowing 发表于 2007-5-21 00:12

收藏了。慢慢学习

bqianli 发表于 2007-5-21 08:49

挺好的。学习

haha8335 发表于 2007-5-21 09:39

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

chen3100 发表于 2007-5-21 13:26

学习啦!

sosme 发表于 2007-5-21 13:45

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

照着做了，总感觉不像

anpora 发表于 2007-5-21 13:54

感谢楼主了

rainoxu 发表于 2007-5-21 19:48

源文件在一楼~~~

woshijingyin 发表于 2007-5-22 09:10

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

vipbaidu 发表于 2007-5-22 09:49

做的不错！

mzbx8888 发表于 2007-5-22 20:29

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

changing1996 发表于 2007-5-22 21:14

这个是。。。。干嘛的？

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

changing1996 发表于 2007-5-22 23:56

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

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

chenfreeroom 发表于 2007-5-23 10:01

发个练习

教程不错，感谢楼主，发个练习
[attach]38433[/attach]

chenfreeroom 发表于 2007-5-23 10:29

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

qingwubaobao 发表于 2007-5-23 13:07

交个作业

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

gegongta7 发表于 2007-5-23 15:46

好啊好东西

linearity 发表于 2007-5-23 15:53

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

yangxiao002 发表于 2007-5-23 16:02

用路径怎么画线啊？

sky0229 发表于 2007-5-25 13:26

厉害~!.....:eek: 真是山外有山阿???呵呵..

zhangjiewx 发表于 2007-5-25 17:25

搬个板凳慢慢看

eLore 发表于 2007-6-4 19:00

好东西啊..
可惜基础不够,连路径都不会用,只能作个大概样子..

stykzzb 发表于 2007-6-4 19:54

多谢楼主了。。。。

。。。。。

loveyeah 发表于 2007-6-5 17:23

谢谢楼主，都比较厉害啊，呵呵。学做了一个，汇报一下，就不交作业了。:rolleyes:

ldc287122 发表于 2007-6-7 00:35

我很喜欢

ldc287122 发表于 2007-6-7 00:36

我很喜欢

ldc287122 发表于 2007-6-7 00:36

顶你一下

zerozhao 发表于 2007-6-7 11:26

全是小红叉！

unluckily1 发表于 2007-6-7 12:18

图片看不见了

sym0503 发表于 2007-6-8 23:12

看不到图．红叉叉～～～～～～～～

amoon2005 发表于 2007-6-8 23:14

晕。。。好多图片都看不到

lovezjyqt 发表于 2007-6-17 19:09

做来练习一下~~

[img]http://fapomatic.com/0723/_83.jpg[/img]
下面弧线的地方 如果掌握不好 我还是感觉用另一中方法比较好
用M拖出一个椭圆形 然后填色 别取消选取 再按M 将选取向右(左)移动一个像素 然后删除填充 这时一个弧线就出来了~

nazuki 发表于 2007-6-18 11:23

好东西...要慢慢磨出来的呀....:D 谢谢..学习ing...

68686406 发表于 2007-6-18 13:30

不断的学习。。谢谢楼主

pangsunnyboy 发表于 2007-6-18 17:24

[attach]43612[/attach]
我刚刚画的,大家丢砖头拉

taintain1984 发表于 2007-7-5 20:42

支持  收藏  学习!~!~

luxinalec 发表于 2007-7-5 23:13

学习 谢谢楼主

hongyue 发表于 2007-7-6 17:23

支持一下~

redrain023 发表于 2007-7-29 10:48

比较喜欢 43# lovezjyqt 哪个！

binbin136814 发表于 2007-7-29 13:48

楼主终于放教程那  谢谢了  收藏再说

3mei 发表于 2007-8-8 14:53

作业怎么交

designlimits 发表于 2007-8-29 10:31

强呀，这个我记得很久以前就有的！！！！

allanking 发表于 2007-8-29 22:27

强贴是要支持地～～～

angelaattack 发表于 2007-8-30 15:29

呵呵，学习了

huhansan82 发表于 2007-8-30 15:51

:confused: :confused: :confused:

sepower 发表于 2007-8-30 15:58

俺做滴～～

qqy13 发表于 2007-8-30 18:05

学习学习~~~~~~

ry99cn 发表于 2007-8-31 01:07

还不错喽，很可爱的

vinsual 发表于 2007-9-22 22:49

好漂靓 谢谢分享！:D

查看完整版本: UI制作教程[失效图片已恢复]