coreldraw导航条设计

2015-01-15 09:56 61 1 收藏

CorelDRAW中存在的奥秘太多,我们知道又有多少,很多CorelDRAW教程导航条设计尽在图老师,只有你不知道的,没有做不到的哦,看完让你大吃一惊!

【 tulaoshi.com - CorelDRAW 】

预览效果

本节通过两个小示例,介绍导航条按钮的制作过程,效果如图所示。

导航条按钮预览效果图

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


知识提要

     交互式阴影工具、交互式透明工具的应用

渐变填充设置技巧

制作步骤

1. 导航条按钮效果1

步骤1 新建一个空白文件

执行【文件】|【新建】命令,建立一个新的文件(或按键盘上的Ctrl+N快捷键)。

步骤2 绘制矩形

在工具箱中选择【矩形工具】,在图层中绘制矩形对象,并设置矩形【圆角程度】参数为90,效果如图8-5-1所示。

8-5-1设置矩形

选择矩形对象,依次在工具箱中选择【渐变填充工具】,将矩形填充的CMYK值设置为(060800)和(00 600),其他参数设置如图8-5-2所示。

文本框: 重点提示  在这里也可以用【形状编辑工具】 ,拖动矩形的节点,也可以改变矩形对象的【圆角程度】参数。

8-5-2设置渐变填充

按照上面参数设置,单击【确定】按钮,并给矩形对象除去边框,设置效果如图8-5-3所示。

8-5-3设置渐变填充

依次在工具箱中选择【矩形工具】,在图层中绘制矩形对象,并设置矩形【圆角程度】参数为“90”,效果如图8-5-4所示。

8-5-4绘制矩形

选择矩形对象,再次在工具箱中选择【渐变填充工具】,将矩形填充的CMYK值依次设置为(0601000)、(0 201000)、(0601000)、(0 201000)、(0601000)、(0 201000)、(0601000)、(0 201000)、(0601000),其他参数设置如图8-5-5所示。

8-5-5设置渐变填充

按照上面参数设置,单击【确定】按钮,执行效果如图8-5-6所示。

文本框: 重点提示  在这里也可以通过执行【编辑】|【复制】命令,将对象复制到粘贴板中,然后执行【编辑】|【粘贴】命令,复制对象。

8-5-6设置渐变填充

依次按下Ctrl+D按钮,复制渐变填充对象,效果如图8-5-7所示。

8-5-7复制对象

文本框: 重点提示  在这里也可以通过执行【编辑】|【复制】命令,将对象复制到粘贴板中,然后执行【编辑】|【粘贴】命令,复制对象。

 

步骤3键入文本

在工具箱中单击【文本工具】,分别在按钮图层上键入“作品展示、下载专区、作者手记、网站推荐”,设置【文本字体】为“方正舒体”、【字体大小】为30,【颜色】为“白色”。

复制文本对象,依次将复制的文本对象设置黑色,然后分别做相应的调整,执行效果如图8-5-8所示。

8-5-8键入文本

选择最下面的矩形对象,依次在工具箱中选择交互式阴影工具,设置阴影不透明度】为70、【阴影羽化程度】为15、【阴影颜色】为“黑色”,执行效果如图8-5-9所示。

8-5-9设置阴影操作

依次在工具箱中单击【文本工具】,在图层上键入“CorelDRAW”,设置【文本字体】为“华文彩云”、【字体大小】为48,【颜色】为“绿色”。

最后在工具箱中单击【矩形工具】,在文本下面绘制矩形对象,将矩形填充的CMYK值设置为(10010000),执行效果如图8-5-10所示。

8-5-10键入文本

2.导航条按钮效果2

步骤1绘制矩形

在工具箱中选择【矩形工具】,绘制矩形对象,并设置矩形【圆角程度】参数为30

文本框: 重点提示  拖动网状控制框上的控制点,此时在绘图页面中显示出一个或两个“x”标志,这就是该对象的透视点,拖动透视点,调整透视效果,操作完成后按空格键即可。  选择矩形对象,依次执行【效果】|【添加透视点】命令,给矩形对象设置透视点操作,变形后效果如图8-5-11所示。

8-5-11设置透视点操作

将变形后的对象等比例缩小,依次执行【编辑】|【再制】命令,复制变形后的矩形对象,效果如图8-5-12所示。

8-5-12复制矩形

选择所有的矩形对象,依次执行【排列】|【对齐与分布】|【上对齐】命令,给所有对象执行对齐操作。

步骤2设置渐变填充

文本框: 重点提示  在编辑多个对象时,时常希望将图形页面中的对象整齐的、有条理的组织在一起,利用对齐与分布操作很容易做到。  选择最左边的矩形对象,依次在工具箱中选择【渐变填充工具】,将矩形填充的CMYK值设置为(100000)和(0000),其他参数设置如图8-5-13所示。

8-5-13设置渐变填充

按照上面参数设置,单击【确定】按钮,执行效果如图8-5-14所示。

8-5-14设置渐变填充

文本框: 重点提示  在【渐变填充】对话框中有三种颜色填充方式分别是【直线填充】、【顺时针填充】、【逆时针填充】,不同的填充方式,显示出不同的效果。  给设置渐变填充的对象除去边框,依次给其他矩形对象执行渐变填充操作,设置其填充的CMYK值依次为(01001000)和(0000)、(10001000)和(0000)、(608000)和(000,),其他参数与图8-120参数设置相同,执行效果如图8-5-15所示。

8-5-15设置渐变填充

依次利用【矩形工具】,绘制矩形对象,给矩形对象填充白色,并设置矩形【圆角程度】参数为30

选择矩形对象,依次执行【效果】|【添加透视点】命令,给矩形对象设置透视点操作,变形后效果如图8-5-16所示。

8-5-16设置透视操作

选择执行透视操作的对象,依次在工具箱中选择交互式透明工具,向下拖动鼠标执行透明操作,效果如图8-5-17所示。

文本框: 重点提示  在【从】和【到】列选框中选择作为渐变填充的起始颜色和终止颜色,通过调节“中心点”滑块位置可以改变起始颜色与终止颜色在渐变中所在的成分比例。  。

8-5-17设置透明操作

依次按下Ctrl+D键,复制3个执行透明操作的对象,按照如图8-5-18所示的位置放置。

8-5-18复制对象

步骤3键入文本

在工具箱中单击【文本工具】,分别在图层上键入“作品展示、下载专区、作者手记、网站推荐”,设置【文本字体】为“楷体”、【字体大小】为30,【颜色】为“黑色”,如图8-5-19所示。

8-5-19键入文本

选择文本对象,依次在工具箱中选择交互式阴影工具,设置阴影不透明度】为45、【阴影羽化程度】为12、【阴影颜色】为“蓝色”,执行效果如图8-5-20所示。

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

8-5-20设置阴影操作

最后选择所有对象,依次执行【排列】|【群组】命令,将所有对象组合在一起。

选择组合在一起的对象,在工具箱中选择交互式阴影工具,设置阴影不透明度】为40、【阴影羽化程度】为15、【阴影颜色】为“蓝色”,执行效果如图8-5-21所示。

8-5-21设置阴影操作

来源:http://www.tulaoshi.com/n/20150115/129795.html

延伸阅读
最终效果: 1.新建一个600*150的文件,背景填充黑色。选择“圆角矩形工具”画一个同样填充黑色的圆角矩形, 选择“添加图层样式—斜面浮雕—描边”: 得到如下效果: 2.制作高光区。新建图层,选择钢笔工具,绘出一个方框如下: 右键单击钢笔路径转换成选取并填充白色。 黑色的圆角矩形框载入选区--ctrl+左击图层,选...
标签: Web开发
不少朋友通过各种方式问我要 Blog 顶部的滚动导航菜单的代码。其实也没什么特别的,但既然有需求,我就还是把这部分代码整理出来,供大家参考。 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html&nb...
标签: PS PS基础
最终效果 步骤 步骤2,创建导航背景,下面忘记写了,颜色是#5a5a5a 设置灰色块的图层样式,内阴影+渐变 设置完渐变的时候效果出来啦 好,复制背景,行距是3px 为导航条写上标题 下面设置圆圈的样式 图层样式设置完毕把图层不透明°设置为70% 加上箭头得到效果 最终效果
下图中的导航条设计步骤之前已经介绍过,设计部分请看此文。本文主要介绍如何将设计出的导航条图片转化成HTML页面,其中有一个鼠标移动到按钮上转换图片的效果,本文中全部使用HTML+CSS制作完成。 布署文件 在我们开始切割图片之前,先在本地web服务器上布署文件,创建文件夹,在新建的文件夹中新建空白HTML文件index.html,空白CSS文件st...
标签: PS PS教程
本文由 中国 zixuan_gzs 编译,转载请保留此信息! 在学习中遇到问题可以到 论坛Photoshop求助研讨版块 发贴交流! 本例为Photoshop网页设计实例教程,主要学习如何运用PS制作简洁风格黑色导航条按钮,运用的工具主要有图层样式、图层混合模式以及渐变填充的运用,制作过程比较简单,有兴趣的朋友可以动手试试哦~~ 最终效果: ...

经验教程

800

收藏

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