您好,欢迎光临一网学 请登录 免费注册

网页设计培训、UI设计培训和淘宝美工培训机构-一网学!

7 * 24小时全国免费咨询电话

400-655-3664

您现在的位置:首页 > 免费专区 > 设计教程

设计教程

UI设计培训之5种简单实用的UI设计技术

作者: 一网学   最后更新时间:2014-08-27 17:34:28

在这篇教程,我将为大家带来5种非常简单实用的UI设计,这些技术和处理像素有关,我称之为像素突出(Pixel-Poppers),之所以这么称呼是因为只是简单地操作像素来使你的UI设计变得突出,听着也许像陈词滥调,但现在很多现代的设计潮流都经常使用这些技术,它确实有着不错的效果。它为设计带来了更加立体和触手可及的感觉。一网学,致力于网页设计培训、UI设计培训、淘宝美工培训,平面设计培训,是最好的远程设计培训学校。

UI设计教程

让我们先大致预览一下这5种实用的UI设计技术:

  • 两像素分割

  • 像素阴影

  • 像素倒角

  • 阴影加高光

  • windows Vista效果

1.两像素分割

两像素分割技术在UI设计和网页布局运用非常广泛,一些典型的例子如Windows Media Player11的UI设计,网站Pixel2Life.com, and 2Advanced.net等,这是一种比较细微的视觉效果。可能不会引起注意,但是如果运用恰当,它的效果真的非常不错。

来看一个简单的例子,下图是一个网站的导航栏,我们将在上面运用这个简单实用的UI设计技术。

UI设计教程

现在在photoshop放大(Ctrl+“+”),这样我们就可以进入像素级别的工作。新建一个图层,选择铅笔工具,选择白色的前景色,按住Shift键,这样你就可以在菜单和logo之间画一条1个像素的直线。

UI设计教程

用同样的方法,在白线的上方,绘制一条黑线。

UI设计教程

已经完成了,就是这么简单,通常我会根据自己的需要用Photoshop调节它们的透明度,使它们和周围的颜色融合。参照下图,对比一下,使用这个UI技术后,是不是有不一样的感觉。

UI设计教程

2.像素阴影

这个UI技术实现起来更加简单,通常当文字或者logo放在轻柔明亮的背景时,我会用到像素阴影的技术,而且由于只有1个像素的阴影,设计上不会给人过度使用的感觉。

看下面的例子,开始我想为下图的logo和文字加一些柔软的阴影,但是感觉不够突出,所以最后使用像素阴影。

UI设计教程

像素阴影的UI设计技术实现起来非常简单,就是为图像增加一个像素的硬边投影。简单来说,就是在Photoshop的图层混合选项里选择投影,并将尺寸(Size)设为0,将距离(Distance)设为1px。

UI设计教程

3.像素倒角

现在的网页设计趋势和UI设计潮流都在避免使用倒角,但是其实如果运用恰当,效果也是不错的。看下面例子:

UI设计教程

现在这个图形有一个柔和的阴影和渐变的背景,为了使它更加突出,我们来加1个像素的倒角。

在Photoshop的图层混合选项,选中斜面浮雕,将size和soften都设为0,并将方向设为90度,效果如图:

UI设计教程

4.阴影加高光

这个UI设计技术有些类似于第一个的像素分割技术,但是又有少许的不同,它也是一种不怎么起眼,但是却效果不错的UI设计技术。

实现起来同样很简单,先看下面例子:

UI设计教程

你可以看到,我为标题部分增加了一个柔和的阴影,但是仍然没有给我们一种突出的感觉,所以我会用到阴影加高光的UI设计技术。

方法很简单,同样用像素分割的方法。在标题和内容之间,增加1个像素的白线,并适当降低透明度,现在看看效果,是不是有很大不同。

UI设计教程

UI设计教程

5.Windows的Vista窗口效果

关于Vista的Aero效果,之前有一篇UI设计教程对它进行了详细的讲解,不过这里我们仍然会稍微提一下。

UI设计教程

这种Aero效果的实现,结合了Photoshop图层混合选项的多种技术,如“斜面浮雕”、外发光、投影、内发光,甚至包括颜色叠加,详细请参考发布的之前的UI设计教程。

这种效果大概由三个部分组成,主窗口、内窗口以及附加部分。

UI设计教程

总结:

事实上,这都是一些非常简单而实用的UI设计技术,大部分用到了Photoshop的图层混合选项。有可能在日常的UI设计工作中,你已经经常使用了。当然对还没有使用这些UI设计技术或者未曾察觉这些效果的新手来说,希望本文可以为你们进入UI设计领域带来一些帮助。


                           【一网学,UI设计培训,我的未来我设计】


                           想学习更多UI设计知识请进:UI设计培训

点击:1872关键字: UI设计培训   UI培训   UI设计培训班  
 

还要名师指导?
还想学更多?
想成为一名优秀的设计师?

赶快报名我们的就业培训吧

加入一网学(免费获取设计视频)

加入我们QQ群

  • 94479624(满)
  • 300641383 (满)
  • 325055490(满)
  • 208130525

扫一下,加我微信

    姓名:
    我要报名,免费试听,素材索取都可以
    给我们留言。同时也可以咨询在线客服。
    郑重承诺:我们不会泄露您的任何资料。
    电话:
    Q Q:
    答案:
    邮箱:
    留言:

    客户服务中心(7×24小时):

    4006-553-664

    • 电话:0755-25849300
    • 传真:0755-25849300
    • 邮箱:editor@ywxue.com

    深圳市一网学教育咨询有限公司 版权所有 2008-2016|一网学手机站

    一网学专注网页设计培训UI设计培训平面设计培训淘宝美工培训7年 | E-mail:editor@ywxue.com
    Copyright © 2008 - 2016 ywxue.com. All Rights Reserved 粤ICP备12037495号-2