《网页美工设计》课件-第2章 网页风格类型定位

网页美工设计目录第一部分

理论基础篇第二部分技能提升篇第三部分综合实训篇第二章

网页风格类型定位本节主讲：4

第二章网页风格类型定位现代主义设计后现代主义设计现代主义设计主张形式遵循功能，推崇功能主义、理性主义，强调以客观的物性规律来决定和左右人的主观的人性的规律。现代主义设计风格形式单纯，强调功能、具有反装饰性、理性化和系统化的特点。受现代主义设计思想影响的网页设计，一般具有简洁明确的版式编排、理性科学的页面构成、清晰流畅的导航层级，其设计具有良好页面结构和完善的信息传达功能。现代主义设计网页设计中常见的风格类型后现代主义设计是对现代主义的一种反动，反映了人们对于人情和人性的追求。后现代主义设计从现代主义的强调理性与功能回归到注重感性和多元化。它强调以人为本，通过追求直觉、趣味和人性化来传达对个体存在价值的关注，从而呈现出纷繁复杂的设计面貌。后现代主义设计网页设计中常见的风格类型CONTENTS01简洁风格网页设计的风格类型简洁风格是以简洁、单纯的文字、图形设计实现页面高度功能化、理性化的网页设计风格。网页设计的风格类型CONTENTS02装饰风格装饰风格以多种传统和非传统的装饰手法为特征的网页设计风格。网页设计的风格类型网页设计的风格类型CONTENTS03影像风格影像风格是以图像和视频为基调、具有影像视觉张力和冲击力的网页设计风格。。网页设计的风格类型CONTENTS构成风格以点线面作为主要的设计元素对版面进行构成的设计风格。04网页设计中常见的风格类型（1）网页设计中的点点的形状、方向、大小、位置、聚散的变化，能够给人带来不同的心理感受和视觉冲击，产生各种不同的视觉效果。网页设计中常见的风格类型网页设计中常见的风格类型（2）网页设计中的线不同的线可以引发人的各种心理效应，具有不同的情感倾向。网页设计中常见的风格类型网页设计中常见的风格类型（3）网页设计中的面面既可以是有形的位置，又可以使虚无的空间饱满立体。网页设计中常见的风格类型上下式结构通常上方为导航，或广告区域。下方为正文部分。这类结构常出现在个人网站及少量企业网站的首页。勤学网上下式结构——个人网站网页设计中布局版式企业网站上下式结构——汽车网站企业网站上下式结构——商务网站上下式结构——个人网站左右式结构清晰分列两旁的框架结构。一般左侧是导航条，有时最上方会有一个小标题或标志，另一侧是正文内容。企业网站大多采用这类结构。左右式结构——咖啡网站企业网站左右式结构——设计网站左右式结构——个人网站上左右式结构上左右式结构是大中型企业比较喜欢的框架模式。通常上方为导航菜单，下方为栏目及小广告，右下侧为内容。上左右式结构——汽车轮胎企业网站企业网站上左右式结构——地产公司网站上左右式结构——星巴克公司网站上左右式结构——咖啡产品网站上左中右式结构又称为三栏式，是大中型企业、电子商务、门户网站比较喜欢的框架模式，是较常见的结构式。通常上方为导航菜单，下方左中侧为栏目及内容、小广告区，右侧为登陆、搜索区或重要内容导航区。勤学网上左中右式结构——企业网站上左中右式结构——美食网站综合式结构通常情况下，网站不是只选用一种结构，而是几种结构的综合应用，在同一个页面里可以拆出几个不同的框架结构，来配合信息内容的需要。综合式结构——门户网站12信息量少，通常以一张形象、广告图片来表示。风格较随意，凸显网站个性，重在渲染气氛。勤学网不规则结构网站目录第一部分理论基础篇第二部分技能提升篇第三部分综合实训篇第二章

网页图形图像设计与编辑第一节网页图片设计制作第一讲网页图片设计制作（上）第一讲

网页图片设计制作（上）第一节

网页图片设计制作版面图片配色调整01主体人物图片处理02整体定基调网页图片设计制作1突出五官脸妆衣饰网页图片设计制作1第二章

网页图形图像设计与编辑第一节网页图片设计制作第一讲网页图片设计制作（中）第一节

网页图片设计制作第二讲

网页图片设计制作（中）徽州文化旅游开发有限公司天然水墨画效果01手绘素描效果02去色网页图片设计制作（中）亮度对比度中间值高斯模糊调色刀正片叠底网页图片设计制作（中）亮度对比度中间值水彩曲线网页图片设计制作（中）通道的分类：颜色通道、Alpha通道。(专色通道、临时通道)（1）颜色通道：用来存储颜色信息。

RGB颜色模式：颜色越深，表示这种颜色所占的比例越少。相反颜色越浅，表示这种颜色所占的比例越多。CMYK颜色模式：颜色越深，表示这种颜色所占的比例越多。相反颜色越浅，表示这种颜色所占的比例越少。（2）Alpha通道：用来存储选区和修改选区。白色代表选区，黑色代表非选择范围，灰色是半透明效果。在Alpha通道中只有黑色、白色或者是灰色，不存在彩色信息。第二章

网页图形图像设计与编辑第一节网页图片设计制作第一讲网页图片设计制作（下）第一节

网页图片设计制作第三讲

网页图片设计制作（下）网页设计的主题珠宝首饰网页图片设计制作(下)网页图片设计制作(下)第二章

网页图形图像设计与编辑第二节网页图像设计与编辑第一讲网页图像设计与编辑（上）第一讲

网页图像设计与编辑（上）第二节

网页图像设计与编辑原色、间色、复色010203色彩三要素色彩色调网页图像色彩的基本原理

1、原色：指不能通过其他颜色的混合调配而得出的“基本色”。

红黄蓝一、原色、间色、复色网页图像色彩的基本原理2、间色：由任意两个原色混合后的色被称为间色。

红+黄=橙黄+蓝=绿蓝+红=紫一、原色、间色、复色网页图像色彩的基本原理橙绿紫间色也称为“第二次色”一、原色、间色、复色网页图像色彩的基本原理橙绿紫3、复色：称为再间色或三次色。

如：橙与绿混合成橙绿，呈黄灰色；

橙与紫混合成橙紫，呈红灰色；

绿与紫混合成绿紫，即蓝灰色。

复色包括了除原色和间色以外的所有颜色。一、原色、间色、复色网页图像色彩的基本原理凡是复色都含有三原色的成份，都呈灰性色。三原色的等量混合即呈中性灰色。三原色的各种不同比例的混合就能产生出千变万化的色彩来。

色相：色彩的首要特征，是区别各种不

同色彩的最准确的标准。

色彩三要素之一，即色彩相貌。二、色彩三要素网页图像色彩的基本原理明度：指颜色的明暗程度。色调相同的颜色，明暗可能不同。二、色彩三要素网页图像色彩的基本原理纯度：指原色在色彩中所占据的百分比。

纯度用来表现色彩的鲜艳和深浅。

二、色彩三要素网页图像色彩的基本原理

色调是指整体色彩外观的重要特征与基本倾向。色调是通过色彩的明度、色相、纯度间的变化关系形成的，其中某种因素起主导作用，就可以称为某种色调。纯度：清色调（纯+白）、浊色调（纯+黑）明度：亮色调、暗色调、灰色调色相：暖色调、冷色调、中性色调三、色彩色调网页图像色彩的基本原理三、色彩色调网页图像色彩的基本原理暖色

红色、橙色、黄色、棕色冷色

绿色、蓝色、紫色中间色

灰色、黑色、白色三、色彩色调网页图像色彩的基本原理

暖

冷

暖

冷安吉白茶案例主图产品信息图细节展示图第二章

网页图形图像设计与编辑第二节网页图像设计与编辑第一讲网页图像设计与编辑（下）第一讲

网页图像设计与编辑（下）第二节

网页图像设计与编辑安吉白茶案例主图产品信息图细节展示图

1、原色：指不能通过其他颜色的混合调配而得出的“基本色”。

红黄蓝一、原色、间色、复色网页图像色彩的基本原理2、间色：由任意两个原色混合后的色被称为间色。

红+黄=橙黄+蓝=绿蓝+红=紫一、原色、间色、复色网页图像色彩的基本原理3、复色：称为再间色或三次色。

如：橙与绿混合成橙绿，呈黄灰色；

橙与紫混合成橙紫，呈红灰色；

绿与紫混合成绿紫，即蓝灰色。

复色包括了除原色和间色以外的所有颜色。一、原色、间色、复色网页图像色彩的基本原理凡是复色都含有三原色的成份，都呈灰性色。三原色的等量混合即呈中性灰色。三原色的各种不同比例的混合就能产生出千变万化的色彩来。

色相：色彩的首要特征，是区别各种不

同色彩的最准确的标准。

色彩三要素之一，即色彩相貌。二、色彩三要素网页图像色彩的基本原理明度：指颜色的明暗程度。色调相同的颜色，明暗可能不同。二、色彩三要素网页图像色彩的基本原理纯度：指原色在色彩中所占据的百分比。

纯度用来表现色彩的鲜艳和深浅。

二、色彩三要素网页图像色彩的基本原理三、色彩色调网页图像色彩的基本原理目录第一部分理论基础篇第二部分技能提升篇第三部分综合实训篇第二章

综合案例——服饰类网页设计制作第一节服饰类网页设计制作案例1第一讲服饰类网页设计制作1（上）本节主讲：010203041第一节

综合案例——服饰类网页设计制作案例1第一讲

服饰类网页设计制作1（上）一、确定网站设计风格功能性：展示服饰品最完美的一面，如：新颖的服饰款式，精湛的服饰工艺2服饰类网页制作个性化：

针对不同的服装类型和定位，网站的设计风格不同一、确定网站设计风格时效性：

根据每一季度的新产品设计网站风格，突出服饰产品，让顾客的视觉焦点落在新一季度的产品上3服饰类网页制作二、准确运用色彩搭配1、主页色彩选择参照服饰产品色彩4服饰类网页制作二、准确运用色彩搭配二、准确运用色彩搭配2、突出产品品牌个性5服饰类网页制作二、准确运用色彩搭配二、准确运用色彩搭配3、文字与背景色的明暗对比和谐

6服饰类网页制作二、准确运用色彩搭配三、合适的文字及排版1.服饰产品信息突出2.标题明确、正文规整特点：字体设计服从于信息传递,考虑文字设计的可读性，突出服饰产品信息，进而快速地给浏览者以清晰的视觉印象。特点：标题字体要要大而醒目,正文字体要小而规整,以通过字体的大小来凸显其重要程度。通常而言,标题字体要比正文字体大三倍或三倍以上,副标题则比大标题小一半或一半以下,小标题则与正文字体相同或稍大一些。7服饰类网页制作四、合理布局网站界面3.架构合理2.信息完备品牌logo，导航，内容，关注、联系方式，售后服务，网站备案资料等8服饰类网页制作1.新一季产品信息明确最

上

端

品牌logo、导航中

间

新一季产品内容展示中间偏下关注、联系方式、售

后服务等尾

端网站备案资料品牌logo导航内容关注、联系

方式售后服务备案资料第二章

综合案例——服饰类网页设计制作第一节服饰类网页设计制作案例1第二讲服饰类网页设计