首页

PS教程

PSD素材

PS素材

背景图片

高清图片

字体下载

矢量素材

PS资源

PS作品

会员专区
注册 / 登录
收藏
入门教程照片处理抠图教程调色教程文字特效经典合成鼠绘教程滤镜特效非 主 流GIF 动画签名溶图创意设计
 您当前的位置: PhotoShop资源网 >> PS教程 >> PS教程 >> 创意设计 >> 正文

Interface/Skin Design tutorial in photoshop

[ 作者来源:Pixeltool 编辑整理:PhotoShop资源网 更新时间: 2006-08-03 录入: 黄叶飞扬 ]

 

I'm going to show you all the way I've do the applications interfaces or "skins" using Photoshop. Remember, you can change the methods and values that I use here, working in your own style. You can find the styles for PS 7.0 that I used for this here. Just click and with the rigth button of your mouse, choose "save target as..."

按此在新窗口浏览图片 1. The Base

With a new file in blank, make a new layer and in this, create an oval and fill it with black. Center it, and add the soft metal style.
   
按此在新窗口浏览图片 2. Internal shape

Make a selection of the oval, reduce it 15 pts.
Now take out some parts, making the image more interesting. Copy the entire layer, and paste this into a new alpha layer.
   
按此在新窗口浏览图片 3. Blur

In the alpha layer, apply a gaussian blur of 15 px
   
按此在新窗口浏览图片 4. Levels

Then hit Ctrl+L, and in the levels box, use the settings I show here in the image. Copy the alpha channel, and paste the image into a new layer ( standard layer).
   
按此在新窗口浏览图片 5. Round corners

The trick with the alpha results in an image with some rounded corners, very nice and with this style, better! Well, we need to select the shape again (Ctrl + mouse click) contract the selection a bit and create a new shape in a new layer.
   
按此在新窗口浏览图片 6. New shape

In the new layer, we need to fill the selection and apply the same style of the "base" but only changing the direction of the gradient fill to inverse. This change increases the effect of bevel here.
   
按此在新窗口浏览图片 7. Screen

Now, in a new layer we draw a shape for our screen and make it more rounded using the "alpha trick". Again, I fill this one with a gradient, inverse to make more effect.
   
按此在新窗口浏览图片 8. Color screen

One more layer to create the screen: A gradient (I like this green tones) and an inner shadow. I've added here some little lines to give the "scan effect".
   
按此在新窗口浏览图片 9. Screen details

And the rest of the screen details: The text, some lines for the volume and equalizer... Whatever you want.
We are almost done...
   
按此在新窗口浏览图片 10. Details

Well... Now, the rest are add some details like buttons, screws and stuff like that... And of course, a logo if you want. Remember the use of the "alpha trick" and the styles that give the cool final effects.

Remember to practice and take some time for experiment. At this time, my "interfaces" are just plain images, if you want to use it to create some "skin" or something please let me know. For see more of my artworks, visit pixeltool.com.ve or If you wanna send me a word, do it here.



≡★ 免 责 声 明 ★≡

除本站原创外,本站所提供的所有教程均收集整理自网络,其版权归该教程直原始作者或原始出处所有!

除特别声明外,您可以在保持教程的完整和注明来源的前提下免费复制、转贴本站所提供的所有教程;但是,不可以盗链本站的图片!

除特别声明外,在未经许可的情况下您不得将本站所提供的任何教程(包括资源)用于商业用途;

如果确有需要,请自行与该教程的原始所有权者(即:原始作者或出处)联系,本站不提供相关服务;否则,由此而引发的一切后果由您自负!