《CorelDRAW艺术设计 教学课件 ppt 作者 田秋成 第7章CorelDRAW在网页设计中的应用》由会员分享，可在线阅读，更多相关《CorelDRAW艺术设计 教学课件 ppt 作者 田秋成 第7章CorelDRAW在网页设计中的应用（51页珍藏版）》请在金锄头文库上搜索。
1、本章要点 网页文字设计 网页按钮设计 网页色彩设计 网页界面设计,网页设计的主要任务是体现网站的宗旨，吸引用户，并为网站创造效益。 网页设计，所涉及的内容很多，从总体设计角度，主要包括需求分析、整体布局、前台设计、后台设计等；从设计技术角度，主要包括文字设计、网页插图、色彩运用、网页切割等。网页中的元素很多，像文字、图片、导航条、按钮、文本框、版权、商标、广告等，这些都需要进行设计。,7.1 网页设计概述,（1）字体、字号 一般网页的正文通常采用宋体、12磅字号。较大的字体可用于标题或需要强调的地方，小号字体可以用于页脚和辅助信息。 （2）行距、字间距 一般情况下，接近字体尺寸的行距设置比较适
2、合正文。行距的常规比例为10：12。 （3）字母大小写 页面横幅通告，一般用大写字母标识。,强调，一般采用以下几种方式： 位置强调，即占用突出的、重要的位置等。 空间强调，即给予较多的版面或空出其周围或放大文字或加大文字的行距、间距等。 标识强调，即将文字设置为加粗、斜体，使用下划线、删除线标识，使用字符底纹、字符边框，在文字下方添加着重号或改变文字的字体等。 色彩强调，使用鲜亮的颜色突出显示或使用有色彩的艺术字，包括明度对比、纯度对比以及冷暖对比等。,文字设计应遵循以下原则。 （1）阅读上清晰易识； （2）排列上协调有序； （3）视觉上舒适和谐； （4）设计上独特创新。,1. 设计效果 如图
3、7-1所示。,2. 制作步骤 1）画第一个圆角矩形A 先用“矩形工具”画一个矩形；然后，选择 “形状工具”，按住键，将矩形的点移动，并选择属性栏中的线型为0.706mm，圆角矩形A的属性参数设置及效果如图7-2所示。,2）画第二个圆角矩形B 选用“挑选工具”，按住键，移动图形的短边；然后不要松开左键，同时按下右键，再松开右键；最后再松开左键。这样，就会复制出一个矩形B，并通过“挑选工具”和“形状工具”作进一步调整，把矩形B放在圆角矩形A的内部，并设置内部圆角矩形B边线为细线，圆角矩形B的属性参数设置及效果如图7-3所示。,3）圆角矩形B渐变填充 选用“填充工具”的“渐变填充方式”对话框，参数设
4、置如图7-4所示。渐变填充颜色数值为C60、M0、Y40、K20和C100、M0、Y0、K0，效果如图7-5所示。,4）画第三个圆角矩形C 第三个圆角矩形C作为整体按钮的高光部分，修饰按钮。选用“矩形工具”，采用画第一个矩形的方法，在上方画一个相似的圆角小矩形C，并去掉边线，如图7-6所示。,5）填充背景色 为外边的圆角矩形填充背景色，灰度为30%，如图7-7和图7-8所示。,6）添加一个圆环 参照步骤1）、2），在图的左下方画一个圆环，并使用组合键，将圆环进行结合，属性参数设置及效果如图7-9所示。,7）圆环填充颜色 将圆环填充为白色，效果如图7-10所示。,8）添加一个五星 选择“图纸工具
5、”中的“多边形工具”，设置参数，选择“形状工具”后，进行终点调节，属性参数设置及效果如图7-11所示。 9）添加文字 利用“文本工具”添加文字“在线咨询”，并设置颜色为白色，字体大小为36，完成设计。,1. 设计效果 如图7-12所示。,2. 制作步骤 1）绘制一矩形，并设置透视点 选择“矩形工具”，绘制一矩形，并设置矩形4个角“圆角程度”参数全部为45，如图7-13所示。然后选中矩形，依次执行“效果”“添加透视点”命令，给矩形设置透视点操作，变形后效果如图7-14所示。,2）复制变形后的矩形，并执行对齐操作 执行菜单“编辑”“再制”命令或者按“Ctrl+D”组合键，复制变形后的矩形，复制2次
6、。选中所有的矩形，首先执行“排列”“对齐与分布”“底端对齐”命令，然后执行“排列”“对齐与分布”，给所有矩形对象执行对齐操作，如图7-15所示。效果，如图7-16所示。,3）渐变填充 设置渐变填充，选中最左边的矩形对象，选择“渐变填充工具”，将矩形填充，设置渐变填充颜色数值为C100、M0、Y0、K0和C0、M0、Y0、K0，其他参数设置如图7-17所示。按照选定的参数设置，单击“确定”，效果如图7-18所示。,4）去除边框，并填充颜色 将渐变填充的矩形去除边框，依次为后两个圆角矩形执行填充操作，设置渐变填充颜色数值为C=0、M=100、Y=100、K=0和C=0、M=0、Y=0、K=0；C=
7、100、M=0、Y=100、K=0和C=0、M=0、Y=0、K=0，其他参数与图7-17参数设置相同，效果如图7-19所示。,5）绘制矩形，并导入修饰图片，为按钮增加修饰 在步骤4）基础上，依次执行“文件”“导入”命令，为三个按钮添加修饰图片后效果如图7-20所示。,6）执行透明操作 选择执行透视操作的对象，选择“交互式透明工具”，向下拖动鼠标执行透明操作，效果如图7-21所示。依次为后边的图形执行“透明工具”命令，效果如图7-22所示。,7）键入文本 单击“文本工具”，分别在图层上键入文字“专业介绍”、“师资力量”、“就业保障”，设置“文本字体”为“楷体”、“字体大小”为18，“颜色”为“红
8、色”，如图7-23所示，效果如图7-24所示。,8）阴影效果 选择文本对象，选择“交互式阴影工具”，设置“阴影不透明度”为45、“阴影羽化程度”为12、“阴影颜色”为蓝色，完成设计。 效果如图7-12所示 。,1. 设计效果 英文导航条设计与中文导航条设计过程完全一样，区别仅是在导航条的内容是英文。英文导航条的效果，如图7-25所示。,2. 制作步骤 1）绘制一个细长的矩形A 选择“矩形工具”，绘制一个细长的矩形A。刚绘制的矩形会保持在选择状态，设置属性栏，单击关闭“全部圆角”小锁状按钮，这样可以单独调节某个矩形的圆角而不影响其它的角，调整左上和右上两个圆角的“圆角角度”为30 ，左下角和右下
9、角的“圆角角度”为0，属性参数设置如图7-26所示。,2）绘制一个细长的小矩形B 小矩形B作为按钮主体（矩形A）的修饰。按照步骤1），再次绘制一个细长的小矩形B，放在按钮主体（矩形A）的顶部，单击属性栏上“对齐和分布”按钮，设置小矩形B相对于矩形A水平对齐，并去掉它们的轮廓线颜色。选择细长小矩形B，执行“效果”“添加透视点”命令，按住和键，向外拖动控制手柄至适当位置，完成添加透视点的操作作为高光部分，如图7-27所示。,3）渐变填充 选择“交互式填充工具”，对按钮主体部分添加渐变填充，设置填充的颜色数值为C=49、M=2、Y=5、K=0和C=0、M=0、Y=0、K=0，其他设置如图7-28所示
10、。,4）线性填充 用右键拖动按钮主体到高光部分（矩形B），从弹出菜单中选“复制”，如图7-29所示，快速将按钮主体的填充属性复制到高光部分（矩形B），然后调整渐变的角度：选“交互式填充工具”，再选高光部分（矩形B），在属性栏上将其线性填充角度由-90改为90度，效果如图7-30所示。,5）透明效果 用“交互式透明工具”，在按钮主体上进行交互式的透明设置，属性参数设置及效果如图7-31所示。,6）阴影效果 选择“交互式阴影工具”，给按钮主体部分添加阴影，注意阴影的颜色相对主体要暗一些，以增强真实生动的感觉。“阴影工具”属性参数设置，如图7-32 a）所示；“阴影工具”阴影颜色设置，如图7-32
11、b）所示；“阴影工具”实际添加效果，如图7-32 c）所示；最终阴影效果，如图7-32 d）所示。,7）添加文字 选择“文本工具”，输入“QuickTime”字，并选择一种合适的字体，设置颜色为黑色，移至到按钮的中心位置，如图7-33 a）所示。然后用“对齐与分布”功能，进行准确的对齐，文字效果如图7-33 b）所示。,8）按钮主体复制、对齐及文字修改 高光部分、阴影部分渐变颜色。将按钮全选，按住键，水平移动到合适位置，按下右键复制，并应用“分布与对齐”命令，进行排列，并应用“文字工具”修改相应的文字分别为“RealPlayer”和“Flv Player”，如图7-34所示。,9）按钮主体及高
12、光部分、阴影部分渐变颜色 选择“交互式填充工具”，分别更改第二个按钮主体渐变颜色、高光部分颜色、阴影部分颜色，如图7-35所示；之后，更改第三个按钮，如图7-36所示。,10）微调 进行微调，完成设计。 效果如图7-25所示。,不同的颜色会给浏览者不同的心理感受。 比如： 红色是一种激奋的色彩，有刺激效果。 绿色介于冷暖两中色彩的中间，显得和睦、宁静、健康、安全。 橙色也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。 黄色具有快乐、希望、智慧和轻快的个性，它的明度最高。 蓝色是最具凉爽、清新、专业的色彩。 白色具有洁白、明快、纯真、清洁的感受。 黑色具有深沉、神秘、寂静、悲哀、压抑
13、的感受。 灰色具有中庸、平凡、温和、谦让、中立和高雅的感觉。 常见的心理感觉配色有： 奔放、传统、可靠、浪漫、流行、平静、清爽、清新、热带、热情、柔和、神奇、堂皇、土性、友善、专职、高雅、强烈等。,在网页设计中，色彩的搭配应遵循以下原则。 （1）符合美学原则 美学原则：连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。 （2）突出色彩的特性 色彩的鲜明性。 色彩的独特性。 色彩的合适性。 色彩的联想性。,1. 色彩搭配简介 色彩，可分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色；其他的颜色均属于彩色。 （1）非彩色的搭配 黑白两色是最简单、最基本的搭配，白底黑字、黑底
14、白字都能清晰明了的表现网页内容。灰色是“万能”色，可以和任何色彩搭配，也可以作为两种对立的色彩和谐过渡。 （2）彩色的搭配 在网页设计中，彩色的搭配，需要注意的是： 背景和正文的对比要大。 色彩不宜太多。,2. 色彩搭配运用 （1）色调的运用 1）主色调。指页面色彩的主要色调、总趋势，其他的配色不能超过主色调的视觉面积。 2）辅色调。指仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。 3）点睛色。指在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。 4）背景色。指衬托环抱整体的色调，起协调、支配整体的作用。,（2）对比的运用 1）色相对比。指因
15、色相之间的差别形成的对比。 2）明度对比。指色彩之间明暗程度的差别而形成的对比。 3）纯度对比。指不同色彩之间纯度的差别而形成的对比。 4）补色对比。纯度增加，称为补色对比。 5）冷暖对比。指不同色彩之间的冷暖差别形成的对比。 6）纯度调整。指降低冷暖色的纯度。 7）面积调整。指主次面积的区分。 8）面积对比。同一种色彩，面积越大，明度、纯度越强；面积越小，明度、纯度越低。,（3）调和的运用 1）同种色调和。相同色相、不同明度和纯度的色彩调和。 2）类似色调和。在色相环中，色相越靠近越调和。 3）对比色调和。对比色调和的方法有： 提高或降低对比色的纯度； 在对比色之间插入分割色（金、银、黑、白
16、、灰等）； 采用双方面积大小不同的处理方法； 对比色之间加入相近的类似色。 4）渐变色调和。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行，暗色和亮色之间的渐变会产生远近感和三维视觉效果。,3. 色彩搭配技巧 （1）同一色彩应用 （2）对比色应用 （3）同类色、类似色应用 （4）非彩色与彩色结合,1. 奔放、激情的配色 2. 自然、静寂的配色 3. 宁静、朴素的配色 4. 亲切、和睦的配色 5. 柔和、女性的配色 6. 职业、专业的配色,Web网页界面设计中的几个主要问题。 （1）界面元素的处理； （2）模拟窗口的阴影； （3）按钮的“按下”状态； （4）上下文关联导航； （5）更加重视主要功能。,1. 设计效果 某培训学校网站主界面设计效果，如图7-75所示。,2. 设计构思 主界面主要以蓝色为主背景，体现专业的特色，然
