《photoshop书稿课件第九章》由会员分享，可在线阅读，更多相关《photoshop书稿课件第九章（21页珍藏版）》请在金锄头文库上搜索。
1、第9章Photoshop网页版面制作,Photoshop CS3平面设计教程,photoshop制作网页中图形元素的技巧 photoshop进行整体版面的制作 photoshop切片工具的使用方法 photoshop与dreamweaver结合的方法,9.1.1 各式线条的绘制,画线 选择photoshop工具箱中的画笔工具，并设置画笔的半径为1个像素，设置画笔硬度为0%，按住shift键拖动鼠标可绘制一条直线 画虚线 画虚线和画直线一样也是使用画笔工具，不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板，对画笔的直径、硬度和间距进行设置 。 画凹凸线 首先绘制一条比背景色暗的直线，然后
2、再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，然后两直线并列排，这样凹凸效果就出来了,9.1.2 图案填充,在网页的背景和Banner中经常会见到填充的各式图案，如点、方格子，横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案，然后再进行填充。 方格子的图案填充 新建一40*40px大小，背景是透明的文件 。 使用单行与单列选框工具绘制两条线 。 全选上图，选择菜单“编辑定义图案”，图案定义好了。 选择要填充图案的区域，选择菜单“编辑填充”，并找到刚才定义的图案 。,9.1.3 按钮制作,透明圆形按钮 塑料按纽 简单的MAC按钮 内嵌按钮的制作 半圆角按钮,9.1
3、.4倒影和投影,倒影在网页中经常使用，有些是对文字，有些是对图片。倒影会使画片产生空间和立体感。,9.1.5 Logo标志,9.1.6 网页图像合成与修饰,为了更好的表达网站的主题，网页设计者会使用多幅与主题相关的图像进行合成，得到合成结果与背景和主题连成一体，使画面更加和谐，内容更加丰富。在photoshop中图像合成常用图层蒙版、图层混和模式和色彩调整命令来处理。,9.2.1 网页色彩,色彩的含义 色彩本身是无任何含义的，有的只是人赋予它的。红色：热情、奔放、喜悦、庄严 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 蓝色：天空、清爽、科技 绿色：植物、生命、
4、生机 灰色：庄重、沉稳 紫色：浪漫、富贵 棕色：大地、厚朴,9.2.1 网页色彩,网页的色彩的对比 不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时，这两种颜色各自走向自己的极端。例如：红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，黑的更黑，白的更白。 色彩的对比有很多方面，色相的对比就是其中的一种。当大家用湖蓝与深蓝对比时，就会发觉深蓝带点紫味，而湖蓝则有点绿味。,9.2.1 网页色彩,色彩的大小和形状 有很多因素可以影响色彩的对比效果，色彩的大小就是其中最重要的一项，如果两种色彩同样大小，那么这两种颜色之间的对比十分强烈，但是当其中的一种大小变得不一样时，小的一种色就会成为大
5、的色的补充。 在不同的形状上面，同一种色彩也会有不同的效果，试试在一个正方形和一条线上用红色，你会发现，正方形更能表现红色稳重、喜庆的感觉。不同的形状会使同一种色彩产生不同的效果 。,9.2.1 网页色彩,色彩的位置 色彩所处的位置不同也会造成色彩对比的不同。试把两个同样大小的色彩放在不同的位置，譬如前后，则会觉得后面的颜色要比前面的颜色暗些。正是由于所处的位置的不同，导致眼睛的视觉的不同。,9.2.1 网页色彩,网页配色的常用规律 中性色黑色、白色、灰色进行搭配。 中性色和任何一种颜色搭配。填充颜色的部分较大时，最好使用黑色、白色、灰色等。 用一种色彩。这里是指先选定一种色彩，然后调整透明度
6、或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 用对比色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如蓝色和黄色就是对比色，这样整个页面色彩丰富但不花稍。 不要将所有颜色都用到，尽量控制在三种色彩以内。 背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。 最好不要使用大面积的高饱和度的纯色，如果必须使用时，该色占用的幅面最好较小。 背景与文字内容的亮度（0-255）差最好在102以上。 当网站面对的用户超出本国范围时，最好使用完全色。,9.2.2 网
7、页文字,文字的设计原则 文字的可读性：设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的。 赋予文字个性：文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能相冲突 在视觉上应给人以美感；字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。 在设计上要富于创造性：根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体。设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字,9.2.2 网页文字,网页字体设计 字体被分为两类：Serif字体和S
8、ans-Serif字体。Serif字体由Times New Roman, Caslon, Caxton, Souvenir等字体组成。Sans-Serif字体由Helvetica, Zurich, Verdana, Arial等组成。Serif字体通常被用作标题和头条，Sans-Serif字体通常被用作正文或重复性信息。,9.2.3 网页版面布局,网页布局首先要考虑的是网页版面大小。其实，网页版面大小并没有固定的长宽尺寸限定，但由于目前一般大众所使用的显示器的解析度，多数设定为长宽为800 x600 像素，或者1024x768 像素，因此网页设计者在安排网页版型时，也大多针对这两种解析度来设计
9、，一般宽度设为778像素或1000像素左右。,9.2.3 网页版面布局,在网页布局的过程中，大家可以遵循以下原则 正常平衡：也叫“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。 异常平衡：即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。 对比：所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。 凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。 空白：空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，
10、这种表现方法对体现网页的格调十分有效。 尽量用图片解说：此法对不能用语言说服、或用语言无法表达的情感，特别有效。,9.2.3 网页版面布局,大家经常用到的版面布局形式 “T”结构布局。所谓“T”结构。就是指页面顶部为横条网站标志再加广告条，下方左边为主菜单，右边显示内容的布局。由于菜单条背景较深，整体效果类似英文字母“T”，所以我们称之为“T”形布局。 “口”型布局。这是一种象形的说法，就是页面一般上下各有一个广告条，左边是主菜单，右边放置友情链接等，中间是主要内容。 “三”型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为多个部分，而后在色块中放置广告条
11、。 对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。,9.2.4 版面设计实例,9.3 切片与输出,在photoshop中通过切片操作，可以在图像保存为网页时，将每一个切片作为一个独立的文件进行存储。当保存的网页格式在Dreamweaver中打开时，Photoshop中生成的图像切片就变成Dreamweaver中表格中的各个单元格。 切片的形状都是矩形的，只要动手一切就有主切片和辅助切片的生成，切片生
12、成后可以使用切片选择工具进行选择，并设置切片属性，如名称、URL、大小等，也可移动切片的位置和重新定义切片。,9.3.2 Photoshop切片与Dreamweaver的结合,制作步骤 将页面中涉及到要链接的文字、标题和要插入flash及其它部分进行切割。选择切片工具，按各个区域进行裁切 。 选择菜单“文件存储为web所用格式”命令，弹出的对话框。在默认情况下，所有切片生成的文件都是Gif格式，但是如果某个切片中的图像是照片或要求颜色数量非常高的时候，可在对话框中使用切片选择工具，选择这个切片，并设置此切片的格式为JPG或PNG。设置完成后，单击“存储”按钮，将网页存储在自己所需要的地方即可。
13、 输出来之后，生成了Image文件夹及一个html格式网页文件。其中Image文件夹中都是生成的一个个的切片文件。 将导出的html格式文件导入到Dreamweaver中进行设置。选择其中的导航标题，然后选择链接即可。,9.3.2 Photoshop切片与Dreamweaver的结合,如要在中间的右边版块上插入Flash，而且原来的图像不能去掉，方法是将图像设置为背景图片：先将原切片图像的大小记住，并删除它，然后选择此单元格，按照刚才记住的原切片图像的大小设置此单元格的大小，然后选择属性栏中的设置背景图片，把刚刚删除的图像重新设置为背景图片 。 选中此单元格，选择菜单中的“插入媒体Flash”，如图9-100所示。即可插入Flash在此背景图片上。 设置Flash的背景透明。选中插入的Flash，并选择属性中的参数面板。 结束。,
