搜索
-61-第二部分Photoshop网页元素设计篇很多人错误地认为个性化的设计不适用于商业类型的站点。其实不然，商业站点包含了企业概念、企业形象等信息内容，如果要准确地传递它们，那么页面设计更需要在“大众脸”的基础上有所突破。做到这一点并不困难，不一定要在页面上大动干戈，只需要注意细小的环节即可。信息流量大的网站，常让人以为没有多余的页面空间可以供给设计师美化。就好像一个小的房间，里面放置了太多的物件，没有空间可以摆上一盆花，或者挂上一幅画。但是，我们依旧可以在这个狭小的房间中，营造出精致和温馨。这只要仔细观察一下这些物件的特性和意义，就可以直接利用这些物件来装点房间。同样的道理，网站是由多个网页组成的，网页又是由多个元素构成的。有机合理地组织编排这些元素，无论是视觉元素还是功能模块，都可以一起发挥它们的作用，一个好的网页也就诞生了。第4章Logo与Banner的设计制作Logo的中文涵义是标志、标识。作为独特的传媒符号，Logo一直是传播特殊信息的视觉文化语言。Logo自身的风格，对网站设计也颇有影响，放在显要的位置，有着强烈的形象识别功能。Banner的中文涵义是旗帜、横幅、标语，通常被称为网络广告。它作为第四媒体的产物，仍需要在一定程度上遵循媒体的要求，尽管它在互联网上有着非常多的自由和创意空间。对网络广告规格进行规范，会促使网络广告的进一步发展。4.1网站Logo的制作在页面设计中，Logo常常作为公司或站点的标识出现，起着非常重要的作用。一个制作精良的Logo，不仅可以很好地树立公司形象，还可以传达丰富的产品信息。一个网站首页美观与否往往是初次来访的用户对这个网站的第一印象，而Logo作为首先映入来访者眼帘的具体形象，起重要性可见一斑。4.1.1Logo的特点与设计原则网站Logo所强调的辨别性及独特性，导致相关图案字体的设计也要和被标识体的性质有适当的关联，并具备类似风格的造型。我们可以用以下最简单的三种方式来尝试设计Logo。网站有代表性的人物、动物、花草，可以用作为Logo设计的蓝本，然后加以卡通化和艺术化，例如迪斯尼的米老鼠、搜狐的卡通狐狸、鲨威体坛的篮球鲨鱼；专业性网站可以以本专业有代表的物品作为标志，比如中国银行的铜钱标志、奔驰汽车的方向盘标志；最常用和最简单的方式是用自己网站的英文名称做标志。采用不同字体、字母的变形组合可以很容易制作出一个好的标志。-62-Logo传统设计重在传达一定的形象与信息，真正吸引我们目光的不是Logo表示，而是其背后的图像信息。网站Logo的设计跟传统设计有着很多的相通性，但由于网络本身的限制以及浏览习惯的不同，它还代邮许多与之相异的特点。比如网站Logo一般要求简单醒目，在方寸之地中除了表达一定的形象与信息外，还得兼顾美观与协调。4.1.2Logo设计实例在实际制作之中，很多东西都是难于用语言表达出来的，有时候是种灵感，有时候是仿效，而更多的时候是通过烦琐的工作与多次的尝试完成的。在实际的设计中没有非得做什么的限制，更没有放之四海皆准的真理。下面爱心医院Logo的实例主要是让读者熟悉钢笔工具，为将来矢量图的绘制打下基础。图4-1-1爱心医院Logo效果图1.打开Photoshop，按【Ctrl+N】，新建一个宽“320px”，高“280px”的文件，将它命名为“爱心医院Logo”，如图4-1-2所示。-63-图4-1-2新建文件“爱心医院Logo”2.按【路径】面板中新建【路径1】，如图4-1-3所示。图4-1-3新建【路径1】3.单击【工具】面板上的【钢笔工具】绘制路径，过程中或者等路径绘制完成后可用【直接选择工具】对各个锚点进行修改，直至达到自己满意的效果，如图4-1-4所示。-64-图4-1-4绘制【路径1】4.新建【路径2】，继续绘制路径，此时【路径1】处于隐藏状态，所以不可见，如图4-1-5所示。图4-1-5绘制【路径2】5.新建【路径3】，绘制十字路径，如图4-1-6所示。-65-图4-1-6绘制【路径3】6.在【图层】面板上新建【图层1】，回到【路径】面板，右击【路径1】在弹出菜单中单击【建立选区】，如图4-1-9所示，在弹出对话框中设置如图4-1-8所示，得到如图4-1-9所示的效果。图4-1-7建立选区-66-图4-1-8建立选区对话框设置图4-1-9【路径1】建立的选区7.把前景色设置成红色（R255，G0，B0），在选择【图层1】的状态下按【Alt+Delete】进行前景填充，当然也可以选择【油漆桶工具】在选区内单击完成填充，按【Ctrl+D】取消选区看效果，如图4-1-10所示。-67-图4-1-10填充【图层1】8.对【路径2】和【路径3】重复以上建立选区以及在新建图层上填充的操作，不同的是在【图层3】上的十字架选区中填充的是白色（R255，G255，B255），完成【图层3】的填充后效果如图4-1-11所示。图4-1-11三个图层都完成填充后效果图9.选择【工具】面板中的【横排文字工具】，将光标移至图像窗口，单击鼠标左键，输入“love”字样，【字体】面板设置如图4-1-12所示。-68-图4-1-12【字体】面板设置10.按【Ctrl+T】对【love】图层进行自由变换，在【工具】面板上部出现的选项栏里设置：旋转“-25”度，再将其移动到合适的位置，按【回车】键或者选项栏右边的【进行变换】确定，得到效果如图4-1-13所示。图4-1-13对【love】图层进行自由变换11.右击【love】图层，在弹出菜单中选择【删格化图层】，用【画笔工具】和【橡皮擦工具】对字体和图案的交接处进行修改，可以按【[】和【]】键调整画笔及橡皮擦的大小，按【X】键进行前景色和背景色的切换，修改后效果如图4-1-14所示。-69-图4-1-14对字体和图案交接处修改12.链接除【背景】图层以外的所有图层，如图4-1-15所示，单击【图层】面板右上角的按钮，在弹出对话框中选择【合并链接图层】或者直接按【Ctrl+E】合并链接图层，操作后仅剩下【背景】图层和【love】图层。图4-1-15链接图层-70-图4-1-16合并链接图层13.右击【love】图层，在弹出菜单中选择【混合选项】调出【图层样式】对话框，此对话框也可通过双击图层调出，设置【投影】，【内阴影】以及【描边】，各参数如图4-1-17，4-1-18以及4-1-19所示，至此爱心医院logo就完成了，最终的效果如图4-1-20所示。图4-1-17【投影】参数设置-71-图4-1-18【内阴影】参数设置图4-1-19【描边】参数设置-72-图4-1-20爱心医院Logo最终完成效果图另外设计Logo时，应该面向应用的各种条件作出相应规范，这对指导网站的整体建设有着极现实的意义。具体须规范的有Logo的标准色、可能应用的恰当的背景配色体系、反白等，以及在清晰表现Logo的前提下制定Logo的最小的显示尺寸，为Logo制定一些特定条件下的配色、辅助色带等，以方便在制作Banner等场合的应用。另外文字与图案边缘应清晰，字与图案不宜相交叠。其次还可考虑Logo竖排效果，考虑作为背景时的排列方式等，比如刚才所做的爱心医院logo在作为背景时可以按如图4-1-21所示排列。具体操作将会在第7章中提及。图4-1-21爱心医院logo作为背景的排列方式注意：Logo不能有夸张的动感。如果是大动作动画，由于标志的位置通常十分显著，-73-会影响访问者对页面信息的注意力，同样会折损网站形象和页面整体感觉。4.2网站Banner的制作我们把88×31尺寸的小按钮Banner俗称为Logo，这会使得不熟悉网络规则的人对此产生一些误解。把它称为Logo，主要原因是由于网站间互换广告条使用的大部分是88×31尺寸的。大家要注意走出这个误区哦。4.2.1Banner的标准与设计原则自1994年10月美国热线网站（hotwired）开始互联网第一例网络广告以来，网络广告已经成为很多网站收入的主要来源。现在网络广告的表现形式、技术、人们的接受程度、市场都有很大的提高。最近不少网站相继退出不同规格的大型（巨幅）网络广告，网络广告的规格尺寸成了竞相关注的问题。1996年12月，美国互联网广告联合会（InternetAdvertisingBureau,IAB）与资讯暨娱乐广告联盟（CoalitionforAdvertisingSupportedInformation&Entertainment,CASIE）共同宣布了9个网络广告尺寸标准，希望个网站采用。几经努力，美国报业协会（NewspaperAssociationofAmerica,NAA）在1997年1月24日正式发布网络广告标准尺寸，这是网络广告的尺寸规格的第一次规范标准，现在广泛采纳的网络广告规格也是按这个标准来定义的。第一次公布的标准做如下规定：规格（像素）名称468×60横幅广告（旗帜广告）392×72导航广告/横幅广告二234×60半幅广告125×125方形按钮120×90按钮一120×60按钮二88×31小按钮120×240竖幅广告2001年初，CNET根据客户要求特意制作了大尺寸的广告，而后有不少网站相继跟进。在2001年2月底，互联网广告联合会宣布了几个新的网络广告尺寸标准，这也是根据目前采用较多的规格来定义的。这次新的大型网络广告的退出也是在网站处于相对低潮时期对网络广告的突破。网站想利用较大的网络广告尺寸吸引广告客户，以增加广告收入。第二次公布的标准做如下规定：规格（像素）名称120×600“摩天大楼”形160×600“宽摩天大楼”形180×150长方形300×250中级长方形336×280大长方形240×400竖长方形250×250“正方形弹出”式广告注意：IAB将不再推荐使用第一次推出的392×72像素的旗帜广告-74-下面所示的是设计的一整套比较常用规格尺寸的Banner，它们有统一的视觉效果，并且对网站也有较好的宣传作用。32×3288×31120×60125×30我国台湾省的网站经常以这种尺寸的Banner作为互换链接的Banner。468×60现在最为普及的标准尺寸还是468×60全尺寸Banner和88×31的小按钮。使用较多，出现的问题也会比较突出。面对不同的页面设计和页面结构，以下为应注意和突破的几个要点：广告条尽量选择国际标准的尺寸。如果不是用来进行交换，或仅仅针对单独的页面，在进行设计时，也可以根据页面空间来制定特殊广告位和广告条大小；一个页面内不宜超出两个468×60全尺寸Banner；大尺寸Banner要注意配合页面设计；因为88×31的Banner尺寸小，网站间互换条时经常采用，所以在很多情况下，大家也称它为Logo。它可以代表网站的形象，有时候甚至真正起到像标识一样的作用。一个设计好的呼唤Banner条，应该能够概括一个网站的风格。设计Banner时应注意以下几点：选择动态还是静态的Banner；Banner的“重量”要轻。以468×60Banner为例，大小最好是20KB左右，不要超过35KB；而88×31Banner的大小最好在5KB左右，不要超过7KB。当然随着网络宽带的普及，以后在“重量”方面的压力会逐渐减低；Banner的制作方法有很多，对于不同创意的广告条，也应选择不同的制作方法。只要保证Banner的视觉效果好，制作出“重量”最轻的方法，就是最好的方法；一个经过精心设计的Banner和一个创意平淡的Banner在单击率上将会相差很大。在广告文案方面，用一两句广告语来表达即可。广告语要琅琅上口，图形无须太繁杂，文字尽量使用黑体等粗壮的字体，防止在视觉上被网页其他内容所淹没。4.2.2Banner设计实例网络广告的设计与传统传媒广告设计有所不同，并非广告面积大，就可以加大访问量和广告宣传力度。多大的广告会导致访问者的心理排斥。基于各种方面的需要，广告条的设计与使用要考虑很多因素，并不是因素，并不是孤立的，这是与传统媒体最大的不同。由于广告条的位置显著，色彩艳丽，动态的情况较多，很容易吸引浏览者的目光，