Coreldraw设计流光溢彩的苹果风格按钮

2016-02-19 19:50 5 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享Coreldraw设计流光溢彩的苹果风格按钮,希望可以对大家能有小小的帮助。

【 tulaoshi.com - CorelDraw教程 】

浏览过苹果公司主页的人,想必对其晶莹剔透,流光溢彩的网页按钮有深刻的印象(图0)。记得看过介绍制作苹果风格按钮的文章,不过那是用PHOTOSHOP做出来的,在Coreldraw中又是如何制作呢?请看我的制作方法:


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  虽然心动不如行动,但是在行动之前还要运筹帷幄,仔细观察一下,我们会发现按钮主要分为以下几部分:

  1)按钮主体。
   2)按钮上面的高光部分。
   3)按钮阴影部分。
   4)文字及文字阴影。

  这样一分析,就会胸有成竹,做起来自然得心应手。好,打开心爱的Coreldraw 10,新建一个文档,开始苹果风格按钮的设计。

  1.选择矩形工具,绘制一个细长的矩形A。刚绘制的矩形会保持在选择状态,看看属性栏,单击并关闭Round Coners Together小锁状按钮,这样可以单独调节某个矩形的圆角而不影响其它的。在属性栏中作如图2的设置,调整左上和右上两个圆角。需要说明的是,这里的圆角数值并不是绝对的,其数值视你要制作的按钮大小而定。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  2.继续绘制一个细长的小矩形B放在按钮主体顶部,选择它们,单击属性栏上Align and Distribute(对齐和分布)按钮,设置矩形B相对于A水平对齐,并去掉它们的轮廓线颜色。选择细长矩形B,选Effects(效果)菜单-%26gt;Add perspective(添加透视点)命令,按住Shift和Ctrl向外拖动控制手柄至适当位置,完成添加透视点的操作,作为高光部分(图3)。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  3.按钮基本轮廓已经做出,下面要添加生动的色彩。按G切换到交互式填充工具对按钮主体应用天蓝色的渐变填充,设置如图4,其中渐变填充起始点颜色为C:49,M:2,Y:5,K:0,终点颜色为白色。其实这里的设定不是绝对的,你还可以根据自己喜好反复调节,使效果更加理想。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


4.用右键(注意是右键)拖动按钮主体到高光部分,从弹出菜单中选Copy Fill Here(复制到此),这样就快速将按钮主体的填充属性复制到高光部分了,很显然,还要进一步调整:选交互式填充工具,再选高光部分,在属性栏上将其线性填充角度由-90度改为90度,结果如图5。



 

 


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  5.为了做出更逼真的效果,还要求助于交互式透明工具,用它在按钮主体上进行交互式的透明设置,如图6。仔细观察一下,很明显,效果更好了。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  6.在这里是很需要耐心和一定的审美观,甚至是只可意会,不可言传的东西,需要不断的探索和尝试。好了,还要做更进一步的美化和修饰。选择交互式阴影工具给按钮主体部分加上阴影,注意阴影的颜色相对主体要暗一些(如图7),以增强真实生动的感觉。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  7.做到这里,再坚持几步,就可以欣赏我们的酷按钮了!下面要加上文字以丰富按钮的内容。选文本工具,输入MacOS X"并选择一种合适的字体,设置颜色为黑色,并加上阴影,移动到按钮中心,还可以用Align and Distribute功能,进行准确的对齐,结果如图8。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  8.真的快要完成了,请继续...将按钮全选,按住Ctrl键水平移动到合适位置,按下右键复制它,选择交互式填充工具,分别更改按钮主体渐变颜色,高光部分颜色,阴影部分颜色等,用文本工具分别更改文字内容。如图9。


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

  9.如法炮制,一鼓作气制作出其它按钮,并用对齐辅助线功能仔细排列,好,终于大功告成!(如图10)


 

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

来源:http://www.tulaoshi.com/n/20160219/1621966.html

延伸阅读
标签: CorelDRAW
4. 用右键(注意是右键)拖动按钮主体到高光部分,从弹出菜单中选“Copy Fill Here”(复制到此),这样就快速将按钮主体的填充属性复制到高光部分了,很显然,还要进一步调整:选“交互式填充”工具,再选高光部分,在属性栏上将其线性填充角度由-90度改为90度,结果如图5。 5. 为了做出更逼真的效果,还要求...
标签: PS PS教程
  这个按钮纯粹是我看着MAC的按钮模仿出来的,自我感觉已经比较象了!废话不多说,开始了。
设计XP风格的按钮 作者:郑恒(lbird) 下载本文示例代码 论坛上许多人都在讨论如何编写具有XP风格的界面,其实网上有设计好的类库,可以直接拿来使用。但这些终归是别人写的,能不能转化成自已的呢。于是笔者就对这些代码进行研究,算是偷一点吧:) 研究了几种控件,这里就把其中最简单的按钮控...
苹果公司的设计的确十分出色,即便是十年前的网站界面,放到现在来看依然十分精致,因此直到今天也有许多设计师不断参考与模仿苹果的这种风格。到底苹果设计是靠什么来征服客户的呢?通过本文中分析苹果网站界面,我们可以看到苹果网站的设计所具有的某些特点。 此外文中也收集了大量的苹果风格网站界面,是喜欢苹果的设计师参考的好材料。 苹...

经验教程

745

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部