Photoshop教材--第11章满版型页面
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本章重点讲述了满版型页面效果图设计与制作的相关知 识。
通过本章的学习，应掌握焦点型页面效果图的设计要点， 了解饮食类页面的设计要点，熟练掌握Photoshop相关技术 应用，尤其是能够利用PS进行满版型页面的设计与制作。
11.5Baidu Nhomakorabea
类似页面
图11-23 鑫宝主页 本网页是一个电影传媒类网站，采用满版型版式设计，利用圆形轮廓和神秘 的黑色充分体现出了影视类网站的艺术特性，吸引浏览者的好奇心。
图11-24 Dior主页 本网页是一个产品宣传类的网站，采用了满版型版式设计，设计理 念首先是利用夸张手法设计人物形象作为衬托，然后利用放大了Di or产品的效果图片，突出网页的主题，并在页面左上角说明产品的 标志、主要类型。
3. 网页内容设计分析（如下图）
LOGO
导航栏
网页内容 背景图片
主图片
版权和联系方式
1）背景设计： 满版型页面布局的特点就是以图片为主体，在coffee网页的设计中，为了体现coffee的主流文化，选择了咖
啡豆图片（dou.jpg）作为主背景图，绘制了咖啡色的形状作为内容区域，确定了页面的主色调。
图1 本项目版式图
图2 主色
11.2.2
网页布局分P析art 1
2. 色彩设计分析
含蓄时尚的棕色，典雅沉静的烟色，亲近自然的褐色，雍容大气的驼色……这些统称为咖啡色系的颜色。咖 啡色诠释着平和安宁、细致、悠然自得、温厚低调的意境，用粉红，浅绿，鹅黄，乳白……与之相配，衬托 出委婉和别致。选择牛奶融入了咖啡的瞬间，在色彩设计中浅金的金属光泽，搭配牛奶乳白色的韵味，一如 香醇浓郁的味道，仿佛能深入心肺，抚平心里的每一层褶皱。
2）页眉设计 coffee网页的页眉由LOGO站标、导航栏两部分组成，由于满版型页面中主图片要占据绝对的地位，因此页眉设计 要围绕主图片，相互映衬，形成一个整体。 LOGO设计采用奶白色椭圆形状作为背景，小标志设计成水滴形状，字体采用了Bauhaus 93，字体大小为24点，为 了突出网站标志添加了光晕效果。 导航栏采用了圆弧形梯状排列设计，圆绕在内容区域左侧，为了突出导航，在导航栏下加了暗纹加以修改饰。即 突出了主图片的中心效果，同时加强导航栏的浏览强度。 同时为了加强服务特性，增加了“welcome”区域，表达了对浏览者的敬意。
11.2.3
网页效果图Part 1
11.3
项目制作(流程简介)
11.3.1 绘制页面结构图 11.3.2 背景设计 11.3.3 页眉设计 11.3.4 内容区域设计
11.3.5 页脚设计
11.4
切片与优化
11.4.1 背景切片
11.4.2 页眉切片 11.4.3 内容区域切片 11.4.4 页脚切片
授课安排
11.1
项目描述
11.2
项目分析
11.3
项目制作
11.4
切片与优化
11.5 11.6
类似页面 实训项目
11.1
项目描述
“coffee”是一家以出售咖啡为主的时尚饮品店，它力求营 造一种温馨、时尚的营销理念，面对的主要客户群包括时尚人 群、成功人群、知识分子等。并致力于打造联盟经营策略，愿 与有志之士共同发展与进步。
11.6
实训项目
项目名称：万科企业宣传网站 客 户：万科方略企业管理咨询有限公司 单位简介：参照教材
设计要求：
1）网站类型：品牌宣传型网站 2）功能类型：较好的展示企业提供的各种产品或服务，能及时接受客户反馈，与客户实时沟通、为产品或服务提供技术支持。 3）企业LOGO：已有标志。 4）企业BANNER：突出本企业的特征。 5）风格目标：具有较强的个性化。
面将客户需求细化如下：
需求项目 建站目的 LOGO设计 网站风格 网站色调 网站栏目内容
需求项目内容 提升企业形象；进行产品宣传、品牌传播； 请帮助设计 浪漫，温馨，视觉设计新潮、冲击力强 暖色调 (红、黄、绿、有活泼、大方、视觉冲击力强等特点)
较少
11.2.2
网页布局分P析art 1
1. 版式分析 本项目采用的是满版型结构。主要以图像为诉求点，通过整个图片满版到背景或是局部满版到背景，也可 将部分文字压置于图像之上。满版型以舒展、大方，内容紧凑，气氛表达充分，适合温馨和暖性思维的 表达，具有视觉传达效果直观而强烈。
3）内容区域设计 coffee网页的内容区域由两部分组成，第一部分是主形象区域，利用大面积的咖啡图片（sweet.jpg），并对 sweet.jpg图片添加了滤镜等特殊效果，形成色彩的强对比，电影的光轮效果，使整个图片呈现梦幻般的意境，安 宁、淡雅的韵味。第二部分是品牌产品展示区，采用带有小脚丫印迹、白色背景的环形区域，展示各种强色彩的 果汁、冰淇淋、咖啡，彰显了本店的产品特色、企业形象。为了加强服务，还提供了服务电话等细节设计。 4）页脚设计 coffee网页页脚部分设计比较简单，传达了关于服务热线、版权等相关的信息。
11.2.1
网页类型基P础art 1
1. 饮食类网站描述 饮食类网站一般用于宣传和促销的作用，在版式上要灵活，区域形状要圆滑、柔和，同时在色彩设计
上多采用暖色系作为主色调，要合理开放空白的空间，达到留白的效果。
2. coffee网站需求分析
coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下
11.2
项目分析
从项目描述中可以看出：coffee网站因为文字信息量比较有限，图片信息 量比较充足，不适合像传统的标准网站版式那样划分成规整的区域块。因此在 设计中要把握一个明确的主题，图片多，少量文字、色彩强烈火、开放的空间， 利用宽松的版式、温暖的色彩，达到吸引浏览者的目的。
coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下： 表1 客户需求分析表
评分标准：
1）主题突出，充分体现客户的意愿，较好的展示企业提供的各种产品或服务。 2）配色方案设计合理，色彩运用能突出重点。 3）页面版式采用满版型布局方式。 4）整个页面搭配合理，重点突出，具有独特的风格。 5）作品保存到以“学号+姓名”命名的文件夹中，分别保存为.psd和.jpg格式文件。
本章小结
通过本章的学习，应掌握焦点型页面效果图的设计要点， 了解饮食类页面的设计要点，熟练掌握Photoshop相关技术 应用，尤其是能够利用PS进行满版型页面的设计与制作。
11.5Baidu Nhomakorabea
类似页面
图11-23 鑫宝主页 本网页是一个电影传媒类网站，采用满版型版式设计，利用圆形轮廓和神秘 的黑色充分体现出了影视类网站的艺术特性，吸引浏览者的好奇心。
图11-24 Dior主页 本网页是一个产品宣传类的网站，采用了满版型版式设计，设计理 念首先是利用夸张手法设计人物形象作为衬托，然后利用放大了Di or产品的效果图片，突出网页的主题，并在页面左上角说明产品的 标志、主要类型。
3. 网页内容设计分析（如下图）
LOGO
导航栏
网页内容 背景图片
主图片
版权和联系方式
1）背景设计： 满版型页面布局的特点就是以图片为主体，在coffee网页的设计中，为了体现coffee的主流文化，选择了咖
啡豆图片（dou.jpg）作为主背景图，绘制了咖啡色的形状作为内容区域，确定了页面的主色调。
图1 本项目版式图
图2 主色
11.2.2
网页布局分P析art 1
2. 色彩设计分析
含蓄时尚的棕色，典雅沉静的烟色，亲近自然的褐色，雍容大气的驼色……这些统称为咖啡色系的颜色。咖 啡色诠释着平和安宁、细致、悠然自得、温厚低调的意境，用粉红，浅绿，鹅黄，乳白……与之相配，衬托 出委婉和别致。选择牛奶融入了咖啡的瞬间，在色彩设计中浅金的金属光泽，搭配牛奶乳白色的韵味，一如 香醇浓郁的味道，仿佛能深入心肺，抚平心里的每一层褶皱。
2）页眉设计 coffee网页的页眉由LOGO站标、导航栏两部分组成，由于满版型页面中主图片要占据绝对的地位，因此页眉设计 要围绕主图片，相互映衬，形成一个整体。 LOGO设计采用奶白色椭圆形状作为背景，小标志设计成水滴形状，字体采用了Bauhaus 93，字体大小为24点，为 了突出网站标志添加了光晕效果。 导航栏采用了圆弧形梯状排列设计，圆绕在内容区域左侧，为了突出导航，在导航栏下加了暗纹加以修改饰。即 突出了主图片的中心效果，同时加强导航栏的浏览强度。 同时为了加强服务特性，增加了“welcome”区域，表达了对浏览者的敬意。
11.2.3
网页效果图Part 1
11.3
项目制作(流程简介)
11.3.1 绘制页面结构图 11.3.2 背景设计 11.3.3 页眉设计 11.3.4 内容区域设计
11.3.5 页脚设计
11.4
切片与优化
11.4.1 背景切片
11.4.2 页眉切片 11.4.3 内容区域切片 11.4.4 页脚切片
授课安排
11.1
项目描述
11.2
项目分析
11.3
项目制作
11.4
切片与优化
11.5 11.6
类似页面 实训项目
11.1
项目描述
“coffee”是一家以出售咖啡为主的时尚饮品店，它力求营 造一种温馨、时尚的营销理念，面对的主要客户群包括时尚人 群、成功人群、知识分子等。并致力于打造联盟经营策略，愿 与有志之士共同发展与进步。
11.6
实训项目
项目名称：万科企业宣传网站 客 户：万科方略企业管理咨询有限公司 单位简介：参照教材
设计要求：
1）网站类型：品牌宣传型网站 2）功能类型：较好的展示企业提供的各种产品或服务，能及时接受客户反馈，与客户实时沟通、为产品或服务提供技术支持。 3）企业LOGO：已有标志。 4）企业BANNER：突出本企业的特征。 5）风格目标：具有较强的个性化。
面将客户需求细化如下：
需求项目 建站目的 LOGO设计 网站风格 网站色调 网站栏目内容
需求项目内容 提升企业形象；进行产品宣传、品牌传播； 请帮助设计 浪漫，温馨，视觉设计新潮、冲击力强 暖色调 (红、黄、绿、有活泼、大方、视觉冲击力强等特点)
较少
11.2.2
网页布局分P析art 1
1. 版式分析 本项目采用的是满版型结构。主要以图像为诉求点，通过整个图片满版到背景或是局部满版到背景，也可 将部分文字压置于图像之上。满版型以舒展、大方，内容紧凑，气氛表达充分，适合温馨和暖性思维的 表达，具有视觉传达效果直观而强烈。
3）内容区域设计 coffee网页的内容区域由两部分组成，第一部分是主形象区域，利用大面积的咖啡图片（sweet.jpg），并对 sweet.jpg图片添加了滤镜等特殊效果，形成色彩的强对比，电影的光轮效果，使整个图片呈现梦幻般的意境，安 宁、淡雅的韵味。第二部分是品牌产品展示区，采用带有小脚丫印迹、白色背景的环形区域，展示各种强色彩的 果汁、冰淇淋、咖啡，彰显了本店的产品特色、企业形象。为了加强服务，还提供了服务电话等细节设计。 4）页脚设计 coffee网页页脚部分设计比较简单，传达了关于服务热线、版权等相关的信息。
11.2.1
网页类型基P础art 1
1. 饮食类网站描述 饮食类网站一般用于宣传和促销的作用，在版式上要灵活，区域形状要圆滑、柔和，同时在色彩设计
上多采用暖色系作为主色调，要合理开放空白的空间，达到留白的效果。
2. coffee网站需求分析
coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下
11.2
项目分析
从项目描述中可以看出：coffee网站因为文字信息量比较有限，图片信息 量比较充足，不适合像传统的标准网站版式那样划分成规整的区域块。因此在 设计中要把握一个明确的主题，图片多，少量文字、色彩强烈火、开放的空间， 利用宽松的版式、温暖的色彩，达到吸引浏览者的目的。
coffee网站正是咖啡屋的网络形象，传播咖啡文化，传播文明、时尚，正是网站最终要达到的效果。下面将客户需求细化如下： 表1 客户需求分析表
评分标准：
1）主题突出，充分体现客户的意愿，较好的展示企业提供的各种产品或服务。 2）配色方案设计合理，色彩运用能突出重点。 3）页面版式采用满版型布局方式。 4）整个页面搭配合理，重点突出，具有独特的风格。 5）作品保存到以“学号+姓名”命名的文件夹中，分别保存为.psd和.jpg格式文件。
本章小结