打印

[应用经验] 衰MS的PHOTOSHOP课堂(木有素材？那就PS出来！）

本主题由冰焱妩魅于 2008-7-25 05:34 设置高亮

frankms

鸟人无敌

汉化修改作者

Rank: 16

其实我是个鸟人

帖子: 697
积分: 1129
声望: 1129
性别: 男
来自: 四区巴尔古恩

发短消息
加为好友
当前离线

1^# 大中小发表于 2007-5-29 13:39 只看该作者

衰MS的PHOTOSHOP课堂(木有素材？那就PS出来！）

广大的UI界面迷门，今天衰MS老师给你们说说素材方面的制作课程。
大家鼓掌！！！（骚A，色狼搬小板凳中。。。）

引用:

第一讲素材基础篇

   首先，先给大家说说WOW的素材格式类型及转换方法.大家知道那些美丽的界面当然缺少不了超级棒的素材，那这些素材又是怎么得来的呢？是什么格式的呢？其实答案非常简单，都是PS达人们突发灵感创作出来的，他们的格式嘛，分为2种，一种是BLP格式，另一种是我们经常看到的TGA格式，目前普遍使用的多为TGA格式，主要这格式能被PHOTOSHOP这软件直接读取编辑，非常的方便。（刚说到这，骚A同学十分兴奋的跳了起来，说：“知道了～我马上就去转成TGA格式实验下！”10分钟后，骚A同学气急败坏的跑回来～大喊：“衰MS老师你骗人！偶转了TGA格式就是不显示出来～"此时女武神脑后一滴巨汗。。。。纳闷的想：”这骚A是不是木有注意到像素大小的格式呢。。“）
   “呃～这个，女武神老师貌似有话要说～就请她来说说看骚A同学的问题～”衰MS老师说到。
   “哼～哼～哼。。”女武神清了清嗓子“这个问题嘛，十分的简单，就素像素大小的问题了，什么是像素大小呢？大家平时是不是听过1024*768，800*600这个种称为分辨率的名词呢？其实图片的像素大小就跟这个有关，也可以称为分辨率，WOW里调用的素材嘛，必须满足一个条件，就是它的分辨率必须是2的次方，也就是2的N次乘积叠加后的数值，这样WOW里的素材才能正确的显示出来。骚A同学，你把图片用PHOTOSHOP调整到64*64试下，这样就能显示了。”（骚A还没等女武神老师把话说完，就屁巅屁巅的跑去电脑前实验起来～5分钟之后，骚A满脸郁闷的样子回到讲台前：“呃～这次还是看不到。。。”骚A如是说到）
   （此时一个叫墨鱼的家伙强行切入频道贴起了小广告:“喷喷墨代练公司，798元包1-60，送千G马。。。。”广告还没发完，一个叫急云的网络警察把墨鱼抓走了～）
      频道干扰清除之后，衰MS老师说：“骚A同学，你知道什么是ALPHA通道吗？”骚A吧唧吧唧的杂了杂眼，说：“8知道～”，话音刚落，女武神一个箭步上前，起脚～只见色狼飞了出去，全场汗颜，女武神捂嘴一笑:"脚误脚误～"，衰MS接着说～，ALPHA通道呢，就是用来告诉WOW的解释器图片里的哪些部分显示，哪些部分不显示用的，首先，请用PHOTOSHOP打开任意一个素材，如下图所示，你就会看到在通道那个选项，有ALPHA通道这图层。”

"当你PS好素材后，在保存为TGA格式的同时也要注意点小问题"衰MS老师话音刚落，骚A同学又兴冲冲的起身想往外跑～"骚A你给我站住！还没说完你急啥！看完你在再去实验，真是的，小年轻就是性子急！大家注意以下下图：

一定要按这样去保存，不然图片非常容易在WOW中出现奇怪的现象，这可以完全杜绝所谓的RPWT的发生！让你的图片真实的还原在WOW中。"
好了，今天关于素材的基本课程就到这里，布置下作业，把 fleur.rar (90.17 KB)
fleur.rar (90.17 KB)
下载次数: 495

2007-5-29 14:33
转化为合格的TGA格式。
下课～

场景1：
宿舍里，色狼说："骚A，今天被你害得偶无故被武神老师一记飞脚，今天的家庭作业你来帮偶做吧～"

引用:

第二讲  水晶按钮制作篇

   同学们好，今天给大家讲讲关于水晶按钮的制作过程，这是PS的基础使用课程，只使用几个简单的步骤就能制作出我们喜欢的水晶按钮.好了，现在就说说如何制作水晶按钮吧。糖果！你Y的别开小差！就知道回头撩人家猫猫同学说话。都认真了！
   首先，新建一个64*64的图像，分辨率为72，背景为透明，名字你随便起，我这里写水晶按钮，如下图所示：

建好图像后，我们在左边的工具条上选择“矩形工具”，如下图所示：

在矩形工具的设置条上选择填充像素，和圆角矩形工具，并半径项填入5像素，如下图所示：

设置好后选黑色填充，然后按住SHIFT键在新建的图像里画个正矩形，如下图所示：

画好矩形后，用黑白色进行填充（小窍门：CTRL+鼠标左键可以选定选取图层里的东西），在右边图层管理区那双击当前矩形所在的图层打开了图层样式面板，如下图所示：

打开图层样式面板后，选择内阴影的选项，如下图设置就可：

做完以上设置后，就能得出一个水晶按钮的基本模样了，接下来的就是给按钮加边框了。同样，用CTRL+鼠标左键选取出矩形之后，新建一个新的图层2并选定该图层，然后在编辑项处选择描边，如下图所示设置：

描边出3像素的边框后，同样方法打开图层样式面板，参照下图设置即可：

“好了，做到这里，基本的水晶按钮已经完成了。”衰MS老师话还没说完，糖果急冲冲的就转成了TGA格式杀进了WOW里测试新按钮，8过这测试可把他郁闷坏了，全部按钮都是黑白渐变的按钮。完全看不到技能图标。这下糖果可傻了眼，衰MS老师笑了笑，说：“还没说完成你小子那么急做什么，你看你ALPHA通道做了没？”糖果理直气壮的说：“这点偶还是做了的，可是就是出了这么奇怪的事情，我能有什么办法嘛。”衰MS看了下糖果说的ALPHA通道，差点昏死，定了定神说到：“笨蛋，你这样当然会出那种效果，要这么设置的。ALPHA通道不是只能用色块来定义显示范围的，其实你也可以用渐变，仔细听下老师是怎么做的ALPHA通道。首先CTRL+鼠标左键选取图层1里的矩形，然后CTRL+SHIFT+C复制选取好的矩形，再到通道管理器那新建ALPHA1通道，用CTRL+SHIFT+V原位粘贴上去，再用CTRL+鼠标左键选取图层2的矩形，再到ALPHA1通道填充白色进去，之后ALPHA1如下图所示：

ALPHA通道设置好后，保存为TGA格式就可以正确显示水晶按钮了，不会变成刚才那黑白渐变的样子。知道了么？糖果同学！”

好了，这是今天教大家做的水晶按钮的PSD源文件，大家可以在这基础上发挥自己大想象力，创作出更多漂亮的按钮来～
请下载： 水晶按钮.rar (7.62 KB)
水晶按钮.rar (7.62 KB)
下载次数: 329

2007-5-30 16:38