Photoshop CS3 (8)

第9章综合实例,第9,章综合实例,学习目标,切片工具,存储为,Web,所用格式,网页制作基本知识,网页组成的要素,网页版面设计,创建,Web,照片画廊,切片是图像的一块矩形区域，可用于在产生的,Web,页中创建链接、翻转和动画。通过将图像划分成切片，可以更好地对其功能进行控制，并改善图像文件大小的优化。,1.,切片类型,按照其内容类型或创建方式分类，主要有以下几种：,用户切片使用切片工具创建的切片。,基于图层的切片基于图层的内容创建的切片，基于图层的切片是用“图层”控制面板创建的。,自动切片用户切片或基于图层的切片未定义的空间自动填充的切片。在创建新的用户切片或基于图层的切片时，其余区域将会自动生成切片。每次添加或编辑用户切片或基于图层的切片时都重新生成自动切片。可以将自动切片转换为用户切片。,切 片,选择菜单命令“文件存储为,Web,所用格式”，弹出“存储为,Web,所用格式”对话框，使用“存储为,Web,所用格式”对话框可选择优化选项并预览经过优化的图片。设置完成后单击“存储”按钮，弹出“将优化效果存储为”对话框，在对话框中的“保存类型”选项中，有以下三个选项：,HTML,和图像 生成一个,HTML,文件和对应于图片中每个切片的图像文件。,HTML,文件包括文档中任何链接、图像映射和其他效果的代码。所有切片的图像文件存放在自动创建的,images,文件夹中。,仅限图像 以指定的优化设置存储图片。如果图片包含多个切片，则每个切片将存储为一个单独的文件。,仅限,HTML,生成,HTML,文件但不存储任何图像文件。,存储为,Web,所用格式图像调整命令,1.,首页,首页是指一个网站的主索引页，是了解网站概貌并引导查阅重点内容的向导。一般默认文件名为：,index.,htm,或,index.html,等。,2.,页面尺寸,页面尺寸和显示器大小及分辨率有关系，页面标准为,800*600,分辨率，按,778*434,像素制作，页面标准,1024*768,分辨率，按,1003,x600,像素制作。页面长度原则上不超过,3,屏，宽度不超过,1,屏。,3.,Banner,Banner,叫旗帜广告或横幅广告，还有多种称呼，如全幅广告、条幅广告等。通常采用图片、动画、,Flash,等方式来制作。一般放在网页的上方，以吸引访问者浏览和点击，也可以放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注。,4.,网站的标准色彩,标准色彩是指能体现网站形象和延伸内涵的色彩。一个网站的标准色彩一般不超过,3,种。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。,网页制作基本知识,1,标题,标题用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，它的作用就是引导访问者清楚地浏览网站的各项内容。,2标志（,Logo）,网站的标志（,Logo），,就是站点的标志图案，一般会出现在站点的每一个页面上，是网站给人的第一印象。这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念，标志的作用最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传等。目前网站的标志有三种规格：,88*31、120*60、120*90,。,网站标志的设计,(,Logo),最简单的方式可以用网站的英文名称作标志，采用不同的字体或字母的变形和字母的组合制作标志。可以是网站有代表性的人物、动物、花草等，以此作为设计的蓝本，再进行卡通化或艺术；也可以是用有代表的物品作为标志。,网页组成的要素,3,页眉,页眉指的是页面上端的部分，大多数网站在页眉位置设置网站宗旨、宣传口号、广告语等。,4,页脚,页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。,5,导航,导航是网页设计中的重要部分。一般网站的导航位置在每个页面中出现的位置是固定的。导航一般有四种位置：左侧、右侧、顶部和底部。有的站点为了增加页面的可访问性，运用了多种导航。,6,主体内容,主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的做上位置，次要的内容安排在右下方。,网页组成的要素,选择菜单“文件自动,Web,照片画廊”命令，可以依据一组图像自动生成,Web,照片画廊。,Web,照片画廊是一个,Web,站点，它包含一个缩览图图像的主页和若干包含源图像的画廊页。每页都包含链接，当访问者单击主页上的缩览图图像时，就会链接到对应的源图像的画廊页。,创建,Web,照片画廊,平面设计的元素,1概念元素,概念元素是那些实际不存在的，不可见的，但人们的意识又能感觉到的东西。例如，我们看到尖角的图形，感到上面有点，物体的轮廓上有边缘线。概念元素包括点、线、面。,2视觉元素,概念元素不在实际的设计中加以体现，它将是没有意义的。概念元素通常是通过视觉元素体现的，视觉元素包括图形的大小、形状、色彩等。,3关系元素,视觉元素在画面上如何组织、排列，是由关系元素决定的，包括方向、位置、空间、重心等。,4实用元素,实用元素指设计所表达的含义、内容、设计的目的及功能。,平面构成的形式,1组形,基本形状之间的组合，可以有分离、接触、复叠、透叠、结合、减却、差叠和重合8种形式。,2渐变,渐变是一种视觉效果，如近大远小、近疏远密等。渐变有形状的渐变、方向的渐变、位置的渐变、大小的渐变、色彩的渐变等。,3重复,重复是指在同一设计中，相同的形象出现过两次以上，造成有规律的节奏感，使画面统一。重复的类型有形状重复、大小重复、色彩重复、肌理重复、方向重复等。,4发射,发射是一种常见的自然现象，如太阳光芒。发射具有方向的规律性，发射中心为最重要的视觉焦点，所有的形象均向中心集中，或由中心散开，有强烈的视觉效果。,发射的分类有中心点发射、螺旋式发射和同心式发射。,平面构成的形式,5近似,近似指的是在形状、大小、色彩、肌理等方面有着共同特征，它表现了在统一中呈现生动变化的效果。近似的程度可大可小，如果近似的程度大就产生了重复感，近似程度小就会破坏统一。,近似与渐变的区别：渐变的变化是规律性很强的，基本形排列非常严谨，而近似的变化规律性不强，基本和其他视觉要素的变化较大，也比较活泼。,6对比,自然界充满了对比，如红花与绿叶。对比可产生明朗、肯定、强烈的视觉效果，给人深刻的印象。在构成对比的关系上，包括大小、明暗、锐钝、轻重等。,对比有形状的对比、大小的对比、色彩的对比、肌理的对比、位置的对比、重心的对比、空间的对比和虚实的对比。,平面构成的形式还有特异构成、空间构成、密集构成、肌理构成、分割构成等。,