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