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

《Photoshop CS3基础教程 第2版 教育部职业教育与成人教育司推荐教材 教学课件 作者 郭万军 项目9.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、项目九网站主页设计任务一设计主页画面任务二设计网站背景任务三编排主要内容任务四存储网页图片教学目标:了解网页美工设计所包含的内容。掌握设计网页的技巧和方法。掌握切片的划分。掌握网页图片的存储方法掌握网页图片的优化方法。项目九网站主页设计任务一设计主页画面本任务先来设计网站主页版面中的标题主画面，主要是将图片素材进行合成，设计的主页画面如图所示。任务一设计主页画面【知识准备】一个漂亮的网页离不开美工的精心策划设计，而对于没有一定美术设计功底的读者来说，学习和掌握一点网页美工设计基础知识是非常有必要的，所以下面整理了一点基本的美工设计基础知识，希望能对读者

2、所有帮助。1、主页设计包含的内容大家浏览网站的时候，在主页中有一些要素内容基本是相同的，这些内容是设计一个网站必须要考虑的。任务一设计主页画面网页的每一个页面中都要包含一个logo标志，一般放置在页面顶部的左上角位置。logo标志旁边放置简短易记，且能够体现企业形象或宣传内容的广告语，如本项目科达荷兰假日地产项目的“城市生活缔造者”。要有“网站名称”、“关于我们”、“友情链接”、“主菜单”、“新闻”、“搜索”等基本栏目，以及相关的业务信息等内容。每个页面的底部都包含有“版权声明”。2、如何设计主页的版面着手设计主页的版面时，必须要根据企业的特点掌握企业

3、要展现的内容及风格，对页面的整体先进行分块。分块是非常有必要的，但对于美术功底不是很深厚的人来说也是难以掌握的一个技巧。对于设计一般的广告版面或杂志来说，因为都是有边的，也就有边可循，容易分块，也容易安排构图，但对于Web的页面，边的概念被淡化了，在电脑屏幕上可以上下左右拖动屏幕内容的显示位置，所以在设计网页的版面时，分块是非常有必要的，其目的也就是产生边的效果。在编排分块时，可以采任务一设计主页画面用不同颜色或明度的色块、线框、细线、排列整齐的文字等，但这些内容不要过于醒目，否则会喧宾夺主，因为页面的重点是内容。版面指的是浏览器看到的一个完整的页面。

4、因为每个人的显示器分辨率设置不同，所以同一个页面的大小可能出现640×480像素、800×600像素、1024×768像素等不同的尺寸，在设计时主页可以针对不同分辨率的浏览器进行版面尺寸的建立。任务一设计主页画面3、网页的色彩搭配在开始网页设计之前版面的分块固然重要，但色彩的搭配也是一个网页设计成功与否的关键。对于只是针对网页设计而言，在色彩的搭配上有几点是设计者必须要考虑和遵循的。（1）色彩的平衡：色彩在页面中可以形成多种视觉效果，强烈的色彩对比，可以突出页面的主题；唯美的调和色彩，可以使表达的主题意蕴更加深厚。在一个网页中，一般情况下，页面上方的颜

5、色都采用深色调，这样在颜色的厚重上才能压住下面的颜色，如果采用亮颜色，很容易使设计的页面显得很不稳重，下任务一设计主页画面面的文字内容和图片有轻飘飘的感觉，因此，要使设计出的整个页面有平衡感，必须要有不同面积、不同位置和不同明暗的颜色搭配。（2）色彩的呼应：如果有一种比较突兀的色彩放在设计的页面中，无论是突出重点也好，还是强调logo图标也好，都会给设计的整个页面带来副作用，因此，在设计的页面中不同的位置必须要有该颜色相同色系的呼应色，起到弱化某一颜色的作用。（3）整体色调的把握：色调的整体就是浏览者看到网页的第一印象，是蓝色、红色还是绿色等，所以在开

6、始设计一个网页之前确定任务一设计主页画面好整体色调是非常重要的。整体色调确定好了，在背景色、分块色、图片颜色等这些基本要素上都要向整体色调上靠，可以把同一色系分成不同的明度来运用，比如本项目案例“科达荷兰假日”房地产项目，为一个绿色调，因为“科达荷兰假日”展现给人们的是一种“假日心情、游览、度假的好地方”，所以采用绿色就突出了这种“假日心情、健康生命”的主题。在版面中绿色的运用上，采用了不同明度及饱和度的绿色，面积匀称，大小协调，再加上页面中几朵向日葵和几个橘红色块的点缀，又构成了一种色彩的对比，正所谓整体的协调中有对比、对比中又不失整体的协调性。任务

7、一设计主页画面4、字体的设置字体的设置也是网页设计的重点，在设计网页时下面几条基本原则可供参考。（1）不要使用超过3种以上的字体，字体太多会显得杂乱，没有主题。（2）不要用太大的字，因为版面是宝贵、有限的，粗陋、笨拙的大字体不能带给访问者更多信息。（3）不要使用太多的不停闪烁的动态文字，否则会引起访问者视觉疲劳，也有可能被认为是垃圾广告。（4）一般标题的字体要比正文字体略大些，颜色也应有所区别。任务一设计主页画面本任务来设计如图所示的网站主页背景。具体操作步骤详见教材。任务二设计网站背景本任务来设计编排主页中的主要展示内容。如图所示。具体操作步骤详见教

8、材。任务三编排主要内容在Photoshop中网站首页设计完成后，需要把设计的页面存储成适合网页