《中文版Photoshop设计与制作项目教程(第三版）》课件项目4 网站界面设计应用.pptx

1、掌握网站标志的设计方法；掌握网站导航的设计方法；掌握网站模板的设计方法；熟悉网页切片工具的使用方法。在Photoshop中制作网页图像，除了要设置成与屏幕分辨率相符的分辨率外，还需要通过切片工具将其裁切为小尺寸图像。这样才能组合为网页，生成网页文件，上传到网络中。切片是使用HTML表或CSS图层将图像划分为若干较小的图像，这些图像可在Web页上重新组合，通过划分图像，可以指定不同的URL链接以创建页面导航，或使用其自身的优化设置对你图像的部分进行优化。（1）创建切片切片按照其内容类型以及创建方法进行分类。文档中存在参考线的话可以使用基于参考线的切片；使用“切片工具”创建的切片称作用户切片；通过

2、图层创建的切片称作基于图层的切片。当创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。l 基于参考线创建切片在文档中存在参考线的前提下，选择工具箱中的“切片工具”，单击工具栏中的“基于参考线的切片”按钮，即可根据文档中的参考线创建切片。如图所示。l 使用切片工具创建切片在工具箱中选择“切片工具”后，在画布中单击并且拖动即可创建切片，如图所示，其中，灰色为自动切片。l 基于图层创建切片基于图层创建切片是根据当前图层中的对像边缘创建切片。方法是选中某个图层后，选择菜单“图层”|“新建基于图层的切片”选项，如图所示。（2）编缉切片l 查看切片当创建切片后发现，切片本身具有

3、颜色、线条、编号与标记等属性，其中具有图像的切片、无图像切片、自动切片与基于图层的切片等标记有所不同。l 选择切片编缉所有切片之前，首先要选择切片。在Photoshop中选择切片有其专属的工具，那就是“切片选择工具”。选择“切片选择工具”，在画布中单击，即可选中切片。l 切片选项Photoshop中的每一个切片除了包括显示属性外，还包括Web属性。使用“切片选择工具”选中一个切片后，点击工具栏上的“为当前切片设置选项”按钮，即可打开“切片选项”对话框，如图所示。对话框中的参数说明如下：l 切片类型：用来设置切片数据在浏览器中的显示方式，分为图像、无图像与表；l 名称：用来设置切片名称；l UR

4、L：用来为切片指定完整的网址；l 目标：用来设置链接的打开方式，分别为_blank、_self、_parent、_top；l 信息文本：为选定的一个或多个切片更改浏览器状态区域中的默认信息；l Alt标记:指定选定切片的标记文本；l 尺寸：用来设置切片的尺寸和切片坐标；l 切片背景类型：选择一种背景来填充透明区域。（3）导出切片当切片创建完成后，大尺寸的图像并没有变成小尺寸的图像，还需要一个命令将图像逐个保存，方法是选择“文件”|“存储为Web和设备所用格式”选项，即可打开“存储为Web和设备所用格式”对话框，如图所示。对话框中的参数说明如下：l查看切片：在对话框左侧区域中包括查看切片的不同工

5、具，依次是“抓手工具”、“切片选择工具”、“缩放工具”、“吸管工具”与“切换切片可见性”。l图像预览：在图像预览窗口中包括原图、优化、双联与四联四种不同的显示方式。l优化选项：在该选项区域中，选择下拉列表中的不同文件格式选项，会显示相应的参数。l播放动画控件：如果是针对动画图像进行优化，那么在该区域中可以设置动画播放选项。确定网站的主色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。一般来说，网页设计者根据网页的主题以及网站的受众群体（不同的人们对颜色的情感与联想）来选择颜色，而色彩还要烘托主题，并能体现网站形象和延伸内涵。还可以配合下面的配色标准以及配色规律，如

6、图所示的色相环，从图中可以直接看出同类色、邻近色、对比色、互补色。l同类色：色环中相隔45的两个色相。属较弱的对比效果，适合技术和专业性网站，是极为协调和单纯的色调。l邻近色：色环中相隔90的两个色相。色彩倾向近似，色调统一和谐，感情特征一致。而邻近色的搭配可使整个页面色彩丰富而不花哨。l对比色：色环中相隔135的两个色相。属中强对比效果。对比色搭配时，应以一种颜色为主调（占有较大面积），同时辅以对比色，起到丰富点缀的作用。l互补色：色环中相隔180的两个色相。是对比最强的色组，富于刺激性，有强烈的视觉冲击力和热烈感。l黑白是最简单、最基本的搭配；灰色是万能色，可以和任何色彩搭配，也可帮助两种

7、对立的色彩和谐过渡。从人的记忆效果看，对彩色的记忆是黑白的3.5倍，因此彩色页面比完全的黑白页面更吸引人。如图所示，黑白网页与彩色网页之间存在着非常大的差异，大多数情况下，黑白网页给浏览者的视觉冲击力不如彩色网页效果强烈，同时对作品网页的风格也有一些局限性。而彩色的选择不仅仅决定了作品的风格，同时 也使作品更加饱满、富有魅力。（1）配色步骤l确定主色首先根据网站的主题以及色彩给人的感情因素以及象征意思来确定主色，另外根据网站的受众群体，例如受众群体的职业、年龄、社会角色等。l用主要配色方法配置主辅色 使用单色 尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也

8、可以产生变化，使网站避免单调。如图所示的色板，在设计网页时候可以采用色板改变同一颜色的饱和度和透明度。使用邻近色 所谓邻近色，就是在色带上相邻近的颜色，如图4.67所示的色相环。绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。使用对比色 对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站很有特色、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时，这两种颜色各自走向自己的极端。例如：红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，

9、黑的更黑，白的更白。由于人的视觉不同，对比的效果通常也会有不同。当大家长时间看一种纯色，例如红色，然后再看看周围的人，你会发现周围的人脸色会成绿色，正是因为红色与周围颜色的对比，形成了对我们视觉的刺激。色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。色彩的对比有很多方面，当我们用湖蓝与深蓝对比时，你会发觉深蓝带点紫味，而湖蓝则有点绿味。各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红色与黄色对比：红色会使人想起玫瑰的味道，而黄色则会使人想起柠檬的味道。绿色和紫色对比：绿色被誉为紫色的绝配色。主色调是饱和度降低明度较低的紫色，辅色调是色彩明度较高的草绿色及沉稳的

10、深蓝色。如图所示的网页配色就是紫色与绿色的对比。使用互补色 黑与白：非常对立而又有共性，是色彩最后的抽象。能够用来表达富有哲理性的东西，是广义上的互补色，在色环上划直径，正好相对（与此色对面）的两种色彩互为补色。如：红色是 绿色的补色；橙色是蓝色的补色；黄色是紫色的补色。补色的运用可以造成最强烈的对比效果。如图所示就是采用黑色和白色。是黑色白色的对比。黑色和白色是永恒色，比较经典的搭配。l下检验配色合理标准网页如何配色是合理的，可以参考下面几点。色彩的鲜明性：网页的色彩要鲜艳，才能引人注目。色彩的独特性：要有与众不同的色彩，使得大家对网页的印象强烈。色彩的合适性：色彩和你表达的内容气氛相适合，

11、如用粉色体现女性站点的柔美性。色彩的联想性：不同色彩会产生不同的联想，如蓝色想到天空，黑色想到黑夜，红色想到节日和喜庆的事等，选择色彩要和你网页的内涵相关联。（3）一般常见的配色规律l 红色 红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意和警觉，也容易使人兴奋、激动、紧张、冲动、因此红色在标志、旗帜、宣传等用色占据首位，成为最有力的宣传色，同时也是一种容易造成人视觉疲劳的顔色。如图所示的网页主要采用红色。红色主要用在食品、化工、药品、金融、百货、建筑等行业。在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔

12、和。在红色中加入少量的黑，会使其性格变得沉稳，趋于厚重、朴实。在红中加入少量的白，会使其性格变得温柔，趋于含蓄、羞涩、娇嫩。l粉色粉色类似玫红属于暖色调，具有柔软感、活泼感和跳跃性。如图所示的网页主要采用粉色作为主色，然后加入白，黄，蓝，绿等色。跟白色搭配，清纯可爱，保险又出彩。跟鹅黄色搭配，衬托出温柔可人的柔和气质。跟常用对比色蓝色搭配，会显得亮丽，鲜明，活力四射。跟亮绿色搭配，具有视觉冲击，配好了非常出彩，但对衣服的感觉不出众者此种搭配请慎重。跟黑色搭配，甜甜的小性感中可透出帅气、率性。l蓝色 蓝色的所在，往往是人类所知之甚少的地方，如宇宙和深海。古代人认为那是天神水怪的住所，令人感到神秘

13、莫测。现代人把它作为科学探讨的领域。蓝色的色感冷嘲热讽，性格朴实、稳重而内向，是一种有助于人头脑清醒的颜色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广阔、平静的空间，成为衬托活跃色彩友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。如图所示是微软的网页。主要采用蓝色为主色调。从网页就能看出Microsoft的风格、目标、作风，以及具有雄厚的实力，蓝色调主要用在理性、科技、科研、教学等主题的网站。l橙色橙色又称橘黄色或者橘色，在自然界里，玉米、鲜花、果实、霞

14、光等都有丰富的橙色，橙色具有明亮、健康、兴奋、温暖、欢乐、辉煌等色感，所以女性较喜欢用此色做装饰色，橙色的穿透力仅次于红色。如果在橙色中黄的成份较多，其性格趋于甜美、芳香。在橙色中混入小量的白，可使橙色的知觉趋于亮丽、焦躁、无力。如图所示的网页主要采用橙色调。橙色主要用在食品行业较多，另外也用在石化、建筑、百货等行业。l绿色 如图所示主要采用绿色为主色调，绿色是具有黄色和蓝色两种成份的颜色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳、中庸。是一种环保、柔顺、恬静、满足、优美的颜色。绿色主要用在金融、林业、果蔬、建筑等行业。

15、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。l紫色 如图所示的网页主要采用紫色调，紫色的亮度在有彩色的色料中是最低的。紫色的低亮度给人一种沉闷、神秘的感觉。紫色是神秘、高贵、绅士的颜色。紫色主要用在化妆品、装饰品、服装业、出版业。在紫色中红的成份较多时，其知觉具有压抑感、威胁感。在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。l白色 如图所示的网页主要采用白色调，白色的色感光明，性格朴实、纯洁、神圣

16、、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。在白色中加入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。在白色中加入少量的黄，则成为一种乳黄色，给人一种香腻的印象。在白色中加入少量的蓝，给人感觉清冷、洁净。在白色中加入少量的橙，有一种干燥的气氛。在白色中加入少量的绿，给人一种稚嫩、柔和的感觉。在白色中加入少量的紫，可诱导人联想到淡淡的芳香。l黄色 如图所示的网页主要采用黄色调，黄色的性格冷漠、高傲、敏感、富贵、权威、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的

17、变化。黄色与橙色调在应用的时候要注意不要用成土黄色。否则效果适得其反。黄色主要用在电器、化工、照明、食品等行业。在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。l灰色灰色介于灰色和白色之间，是中性色、中等亮度、无色彩、极低色彩的颜色。也是万能色，灰色是一种中立色

18、，具有中庸、平凡、温和、谦让、中立和高雅的心理感受，也被称为高级灰，是经久不衰、最耐看的颜色。任何色彩加入灰色都能显得含蓄而柔和。但是灰色在给人高品味、含蓄、精致、雅致耐人寻味的同时，也容易给人颓废、苍凉、消极、沮丧、沉闷的感受，如果搭配不好页面容易显得灰暗、脏乱。如图的NBA网站。主色调采用灰色，主要显示其独特的个性，但是也不失为一个大型的网站。因为网站用图像较多。显得花哨，但是主色调采用灰色，吸收其它色彩的活力。消弱色彩的对立面，而制造出融合的气氛和作用。通过以上的学习，下面将介绍一套网页模板的设计，这套模板共包括一个主页和五个分页，共六个页面，案例首先介绍主页的设计，然后在主页的基础上生成分页面的框架，进而再生成每个具体的分页，完成后的主页和分页制作。所示素材如图。