您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> Dreamweaver教程 >> 文章正文
[图文]在界面上镶嵌按钮           ★★★
在界面上镶嵌按钮
作者:深度|DEDS  文章来源:深度|DEDS  点击数:  更新时间:2007-9-16 19:46:13 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:

这是一篇很实用的界面设计教程,使用工具PhotoShop6.0,(不好意思,用6.0习惯了,还没升级到7.0 呢,呵呵。不过,据我认为,无论你是用的6.0和7.0学习这个教程都不会有问题)由我进行翻译、整理,略有改动。

该教程原文版权归 Robouk 所有

点击放大图片

这是一个在制作界面过程中,经常用到的一个方法。下面将用一些简单的方法,来教你如何制作一个镶嵌在界面上的按钮。

首先,贴个图来给大家介绍一下有嵌入效果和无嵌入效果的差异。

点击放大图片

点击放大图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面正式开始学习嵌入按钮的制作吧:


在含有你界面的那个层上建立一个新的层,设置前景色为:
#C1C2C4 ,现在选择椭圆工具点击放大图片

点击放大图片

现在,把这个按钮拖放到任意你想放的位置,然后我们给它添加一些铬合金的效果。

首先给这一层加上 内阴影(Inner shadow),相关参数以及设置,见下图:

点击放大图片

接着给这一层加上 内发光(Inner Glow),相关参数以及设置,见下图:

点击放大图片

然后给这一层加上 渐变叠加(Gradient Overlay),相关参数以及设置,见下图:

点击放大图片

最后加一点点 描边 效果(Stroke),相关参数以及设置,见下图:

点击放大图片

当你做完以后,记得要保存这个图层样式,以便于下次使用。

 

点击放大图片

 

 

 

 

 

 

 

 

 

 

 

 

现在你会发现把这个按钮放在界面之上,却没有一点镶嵌在界面上的感觉,这也是为什么我要给大家翻译这篇教程的目的所在。就是要让按钮和界面融合得更加自然。

在你的层面板上,点击如图所示的这个红色标记的区域:

点击放大图片

它将激活这个路径,现在转换到路径面板(点击如图所示带有红色标记的区域)

点击放大图片

现在,拖动路径层到这个图标上→点击放大图片,从而复制该层。这将创建一个新的路径,我们把它取名为“路径1”。
现在选择“直接选取工具”点击放大图片(详细所在位置如下图)然后在文件的任意地方单击鼠标右键,选择 “自由变换路径”

点击放大图片


按住Shift+Alt拖动选区的任意角,使它比原来的按钮稍大一些,完成后按回车。

注意:在这里,我们之所以要使用路径,就是因为这样做可以在没有任何质量损失的情况下任意调整尺寸大小。

点击放大图片

 

 

 

 

 

 

 

 

按住Ctrl的同时单击“路径1”,然后回到层面板,并建立一个新层(图层2),将它拖到按钮层的下面,如图:

点击放大图片

设置背景色为白色,并使用快捷键 Ctrl+Backspace 填充白色,现在调整图层样式>渐变叠加,相关参数如下,或者你也可以随意调整,直到你认为满意为止。

点击放大图片

点击放大图片

基本上到这里,一个镶嵌在界面上的按钮就已经做完了,但是我们还需要发挥我们的创造力和想象力,来创造更多任意形状、大小或者材质的按钮。你甚至可以把一个液晶显示器用这样的方法把它镶嵌在你的界面上,使它看上去更加的漂亮和真实。效果如左图。

看看,只是一个小小的效果,就可以让你如此轻松地创造出如此漂亮的东西,是不是很佩服自己的水平呢。呵呵。

希望你们能够喜欢我翻译的这篇教程,也希望你们在日后的设计工作中,能够摸索出更加方便、有效的方法,和我们全体ChinaUI的会员朋友们,一起共享。我们一起努力!千万不要吝啬你们的技术和时间啊! :)

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    Flash中一个按钮控制播放和停止的2种算法
    简单几步搞定按钮!
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门