Photoshop CS3基础教程 第2版 教育部职业教育与成人教育司推荐教材 教学课件 作者 郭万军 项目9.pptVIP

教学目标: 本任务来设计如图所示的网站主页背景。具体操作步骤详见教材。 本任务来设计编排主页中的主要展示内容。如图所示。具体操作步骤详见教材。 在Photoshop中网站首页设计完成后，需要把设计的页面存储成适合网页的专用图片，本任务来学习网页图片的优化和存储方法。 项目九： 网站主页设计 任务一 任务二 实训 任务三 任务四 项目九 网站主页设计 任务一 设计主页画面 任务二 设计网站背景 任务三 编排主要内容 任务四 存储网页图片 了解网页美工设计所包含的内容。 掌握设计网页的技巧和方法。 掌握切片的划分。 掌握网页图片的存储方法 掌握网页图片的优化方法。 项目九 网站主页设计 任务一 设计主页画面 本任务先来设计网站主页版面中的标题主画面，主要是将图片素材进行合成，设计的主页画面如图所示。 任务一 设计主页画面 【知识准备】 一个漂亮的网页离不开美工的精心策划设计，而对于没有一定美术设计功底的读者来说，学习和掌握一点网页美工设计基础知识是非常有必要的，所以下面整理了一点基本的美工设计基础知识，希望能对读者所有帮助。 1、主页设计包含的内容 大家浏览网站的时候，在主页中有一些要素内容基本是相同的，这些内容是设计一个网站必须要考虑的。 任务一 设计主页画面 网页的每一个页面中都要包含一个logo 标志，一般放置在页面顶部的左上角位置。 logo标志旁边放置简短易记，且能够体现企业形象或宣传内容的广告语，如本项目科达荷兰假日地产项目的“城市生活缔造者”。 要有“网站名称”、“关于我们”、“友情链接”、“主菜单”、“新闻”、“搜索”等基本栏目，以及相关的业务信息等内容。 每个页面的底部都包含有“版权声明”。 2、如何设计主页的版面 着手设计主页的版面时，必须要根据企业的特点掌握企业要展现的内容及风格，对页面的整体先进行分块。分块是非常有必要的，但对于美术功底不是很深厚的人来说也是难以掌握的一个技巧。对于设计一般的广告版面或杂志来说，因为都是有边的，也就有边可循，容易分块，也容易安排构图，但对于Web的页面，边的概念被淡化了，在电脑屏幕上可以上下左右拖动屏幕内容的显示位置，所以在设计网页的版面时，分块是非常有必要的，其目的也就是产生边的效果。在编排分块时，可以采 任务一 设计主页画面 用不同颜色或明度的色块、线框、细线、排列整齐的文字等，但这些内容不要过于醒目，否则会喧宾夺主，因为页面的重点是内容。 版面指的是浏览器看到的一个完整的页面。因为每个人的显示器分辨率设置不同，所以同一个页面的大小可能出现640×480像素、800×600像素、1024×768像素等不同的尺寸，在设计时主页可以针对不同分辨率的浏览器进行版面尺寸的建立。 任务一 设计主页画面 3、网页的色彩搭配 在开始网页设计之前版面的分块固然重要，但色彩的搭配也是一个网页设计成功与否的关键。对于只是针对网页设计而言，在色彩的搭配上有几点是设计者必须要考虑和遵循的。 （1）色彩的平衡：色彩在页面中可以形成多种视觉效果，强烈的色彩对比，可以突出页面的主题；唯美的调和色彩，可以使表达的主题意蕴更加深厚。在一个网页中，一般情况下，页面上方的颜色都采用深色调，这样在颜色的厚重上才能压住下面的颜色，如果采用亮颜色，很容易使设计的页面显得很不稳重，下 任务一 设计主页画面 面的文字内容和图片有轻飘飘的感觉，因此，要使设计出的整个页面有平衡感，必须要有不同面积、不同位置和不同明暗的颜色搭配。 （2）色彩的呼应：如果有一种比较突兀的色彩放在设计的页面中，无论是突出重点也好，还是强调logo图标也好，都会给设计的整个页面带来副作用，因此，在设计的页面中不同的位置必须要有该颜色相同色系的呼应色，起到弱化某一颜色的作用。 （3）整体色调的把握：色调的整体就是浏览者看到网页的第一印象，是蓝色、红色还是绿色等，所以在开始设计一个网页之前确定 任务一 设计主页画面 好整体色调是非常重要的。整体色调确定好了，在背景色、分块色、图片颜色等这些基本要素上都要向整体色调上靠，可以把同一色系分成不同的明度来运用，比如本项目案例“科达荷兰假日”房地产项目，为一个绿色调，因为“科达荷兰假日”展现给人们的是一种“假日心情、游览、度假的好地方”，所以采用绿色就突出了这种“假日心情、健康生命”的主题。在版面中绿色的运用上，采用了不同明度及饱和度的绿色，面积匀称，大小协调，再加上页面中几朵向日葵和几个橘红色块的点缀，又构成了一种色彩的对比，正所谓