知识储备_Adobe Photoshop 网页设计与制作标准实训教程（CS5修订版）-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

知识储备

知识1 欣赏优秀网页设计作品

学习软件兴趣是至关重要的，只有对各种设计作品产生了兴趣，接下来的学习才会非常顺利。因此，下面先来欣赏一些优秀的网页设计作品，提高自己学习的兴趣。如图1-1～图1-4所示均为优秀的网页设计作品。

图1-1 电子类型网站

图1-2 工业类型网站

图1-3 商务类型网站

图1-4 个性类型网站

知识2 网页和网站

网页是网站中的一“页”，通常是html格式文件扩展名为．html, .htm, .asp, .aspx, .php或．jsp等。网页实际上也是一个文件，它存放在世界某个角落的某一台计算机中，而这台计算机必须与互联网相连，网页才能经由网址（URL）来识别与存取。在浏览器中输入网址后，经过一段复杂而又快速的程序运行，网页文件就会被传送到本地计算机，然后通过浏览器解析网页的内容，再展示出来。

网站是由大量的网页互相链接构成的。这种链接就是我们经常所说的“超链接”。如果每个网页档案都有一个“链接”连到其他网页档案，那么就会慢慢地形成一个网站。

不是每个网站都会有ASP、PHP或JSP程序后台，一个简单的htm或html网站就没有程序后台。

知识3 熟悉Photoshop CS5的常用工具，掌握其基本操作

在学习用Photoshop CS5设计页面之前，应该对Photoshop CS5的常用工具有基本的了解。

1．工具箱中的常用工具

（1）选择类工具

选择类工具包括矩形选框工具、套索工具、磁性套索工具、裁剪工具和切片工具等。在网页设计中最常用的是“切片工具”，如图1-5所示。当网页的基本风格和布局得到客户认可后，接下来要做的事情就是根据网页的布局利用“切片工具”进行切片。

图1-5 切片工具

选择类工具蕴含着一些其他扩展功能，利用选择类工具选中某部分图像后右击，则出现如图1-6所示的快捷菜单，包括“填充”、“描边”、“通过拷贝的图层”、“羽化”等命令。在网页的按钮设计中最常用的是“描边”命令，用于美化按钮的轮廓，使之更加美观自然。使用方法是：选择“描边”命令，弹出“描边”对话框，如图1-7所示，数值大小可根据效果的需要来选，一般在做按钮描边处理时，数值在“1～2”之间。CS5中的选择栏没有描边，描边命令在“编辑”命令下。

图1-6 快捷菜单

图1-7 “描边”对话框

（2）绘图修饰类工具

绘图修饰类工具包括污点修复画笔工具、画笔工具、仿制图章工具、历史记录画笔工具、橡皮擦工具、渐变工具、模糊工具和减淡工具等。在网页设计中最常用的是渐变工具，如图1-8所示。在设计网页的时候，导航条和按钮部分使用渐变工具来修饰的比较多。在搜狐、腾讯、新浪等门户网站，渐变的应用无处不在。网页设计中没有条文来规定哪部分必须用什么工具来设计，但最终的目的就是如何能够把网页设计得更完美。

图1-8 渐变工具

（3）矢量类工具

矢量类工具包括钢笔工具、横排文字工具、路径选择工具和矩形工具等，如图1-9所示。钢笔工具在网页设计中会被频繁使用，例如，勾画形状的轮廓路径、企业Logo设计等。因此，应熟练掌握钢笔工具的用法。

图1-9 钢笔工具

（4）辅助类工具

辅助类工具包括注释工具、吸管工具、抓手工具和缩放工具等。吸管工具是网页设计中必备的工具之一，如图1-10所示。若想对网页设计中的颜色搭配了解更深入一些，可以多欣赏优秀网页，然后用吸管工具拾取图像中某位置的颜色，观察它们是怎样用最少的色彩设计出最美妙的画面的。

图1-10 吸管工具

2．网页设计技巧

网页设计作为一种视觉语言，特别讲究编排和布局，作为初学者，对网页的布局了解不是很全面，可以多搜集国内外的优秀网页，在Photoshop CS5中打开某些经典页面，观察编排和布局，然后复制或剪切经典的区域，再粘贴到自己新建的文档中，研究布局设计。只有通过这种方法，大家才能不断提高自己的设计水平，最终形成自己的设计风格。要学习前辈的设计经验，学会真正欣赏好的网页。

3．编辑图像的颜色

在给单位设计网页的时候，前期工作是整理单位所提供的一些必须放置的与单位相关的图像素材，以及设计师搜集的一些创意类的图像素材，在整理这些图像素材的时候，要对这些素材进行再加工。只要对图像进行编辑修改，就会应用到“图像”>“调整”菜单中的一些命令，这里列举一些常用的修改图像颜色的命令。

（1）亮度/对比度

“亮度/对比度”能够提高或降低图像的明亮度和对比度，“亮度/对比度”对话框如图1-11所示。只提升“亮度”时图像光线会更充足，使照片更明亮，对比效果如图1-12和图1-13所示。

图1-11 “亮度/对比度”对话框

图1-12 提升亮度前

图1-13 提升亮度后

当“亮度”和“对比度”同时做正向调整时（向右滑动），不仅亮度增加，而且对比度也随之增强，使亮的区域更亮，暗的区域更暗；同时图像色彩的鲜艳度也随之增强，对比效果如图1-14和图1-15所示。

图1-14 提升亮度和对比度前

图1-15 提升亮度和对比度后

（2）色相/饱和度

“色相/饱和度”能够调整图像的整体色调，“色相/饱和度”对话框如图1-16所示。

图1-16 “色相/饱和度”对话框

“色相/饱和度”对话框的选项组中有3个选项：色相、饱和度和明度。

当调整“色相”时，图像的整体色调会有明显而剧烈的变化，可由红色变为紫色、蓝色等色调，对比效果如图1-17和图1-18所示。

图1-17 调整“色相”前

图1-18 调整“色相”后

当调整“饱和度”时，会增强或减弱图像整体的色彩鲜艳度。将“饱和度”调到最左边“-100”时，整个图像完全失去色彩变成“黑白灰”的形式，如图1-19所示；调到最右边“+100”时，图像的所有颜色达到最艳丽的程度而失去自然真实的感觉，如图1-20所示。

图1-19 调整“饱和度”为“-100”时的效果

图1-20 调整“饱和度”为“+100”时的效果

调整“明度”，会增强或降低图像的明暗度。通俗地讲，“明度”是将图像整体“加白或加黑”，向左调整使图像添加黑暗的成分，好像夜幕降临，向右调整使图像添加白色成分，好像雾气茫茫的感觉。当调到最左边“-100”时，整个图像变为纯黑色，如图1-21所示；当调到最右边“+100”时，整个图像变为纯白色，如图1-22所示。