设计师吧首页
 用户名  密码 记住
我是?
小岛
积分: 4152
等级: 18级
威望: 8
关注: 5002次
我最近更新的内容
本栏目推荐内容
Inset Buttons
作者:Robouk   日期:2007-2-1   来源:absolutecross
Inset Buttons

The following is a technique every designer should have in their bag of tricks. I use this technique very often when making any sort of interface and it's a handy trick to know. These steps will enable you to make buttons look like they are inset into the surface of an object such as an interface, winamp skin, etc, and can add a great degree of depth to an otherwise flat and boring image.


Example 1

Firstly, you are going to need an interface or panel that you want to add your buttons to. You can use any interface image you already have handy, or you can make a new one similar to the the example by following the steps in the smooth metal tutorial.

Here is an example of what an inset is:


From the above image you can see that the inset is what adds realism and makes the button look like it's meant to be there. Most buttons on mobile phones, stereos, and all kinds of electronic gadgets are inset into the surface, so that's the effect this tutorial will help you emulate.

2.

Start by creating a new layer above the layer that contains your interface. Set your foreground color to: #C1C2C4
Now select the Ellipse Tool (note this is the shape tool not the marquee selection tool)


3.

Roughly where you want your button to appear, hold SHIFT and drag your circular shape until you have the size you want.

To give the button the chrome effect add the following layer styles...
go to Layer » Layer Style » Inner Shadow

Enter these settings: Inner Shadow
Add a Inner Glow layer style with these settings: Inner Glow
Add a Gradient Overlay layer style with these settings: Gradient Overlay
And last but not least, add a Stroke layer style with these settings: Stroke

When you've completed this, you may want to save your layer style for later use (to do this, click New Style and choose a name. Then click Styles at the very top left of the layer styles box, and click on the arrow icon to the right... choose Save Styles from the list). Click OK when you're done, and you should be left with a button similar to the one shown below.

Example 2

4.

So, you now have your button sitting on top of your interface, but it doesn't look like it's meant to be there. Time for the much-needed inset.

In your Layers palette click on the vector mask of the button you just created, as shown in the image below:


This makes the path active.

Now switch to your Paths palette:


Drag the Path layer of your button to the image to duplicate it.
It will create a new path called Path 1.

Now choose the Path Direct Selection tool, right click inside your document anywhere and choose "Free Transform Path"
Holding SHIFT and ALT together drag a corner to make the path slightly bigger than the button as shown below. When you've finished this, hit Enter.

Example 3

5.

The reason we are using paths in this instance is because they are much easier to resize without any loss of quality.
The next step is to create a new layer UNDERNEATH the layer with your button on it.
With the Path Direct Selection tool still active, right click anywhere in the document and choose "Create vector mask". Now press X then D to reset your colors. Hit CTRL + Backspace to fill the path with white.

Now go to Layer » Layer Style » Gradient Overlay and enter these Gradient Overlay settings (or adjust them so it looks good to you)

Your image should now look something like the example below. Notice how the button now appears as if it is a part of the panel, instead of just sitting on top of the surface? Good job :)

Example 4

6.

Don't stop there though. Continue to try this effect on buttons of any shape, size, or texture. You can even make screens or LCD displays look like they are inset into the interface. Try out the LCD Orbs and Glossy Buttons tutorials for some ideas you can apply for making great-looking LCD displays.

With a little effort, you can produce some almost photo-realistic stuff. If you make a lot of interfaces you'll find that you use this technique quite often; not just for the buttons but for just about anything.

Example 5

查看次数: 332
最近看过此内容的会员
您可能对这些内容感兴趣
·很像混血儿的性感MM素颜自拍·刘斌的标志设计
·25秒和5秒的差距·《UI Designer》中国第一本UI类专业电子杂志发布
·在家轻松DIY肯德基·校内网开通白领高中平台阻击Facebook
·策划设计制作网站应该注意的九大原则·(屏幕)模式表现多重透明的美丽光影
·I am jack!单灯人像摄影练习海报恶搞·美女成功售出Macbook Pro机壳广告位
评论列表
没有评论
■游客, 您可以在此发表您的评论
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
使用这个表情使用这个表情使用这个表情使用这个表情使用这个表情
请您注意
·遵守《互联网电子公告服务管理规定》
·遵守《全国人大常委会关于维护互联网安全的决定》
·遵守中华人民共和国的各项有关法律法规
·承担一切因您的言论而直接或间接导致的法律责任
·参与本留言即表明您已经阅读并接受上述条款
Copyright © 2007-2008 sjs8.com 中国数字设计师网