第7章网页美工设计.ppt

Photoshop职业应用项目教程 第7章 网页美工设计 7．在图层面板中复制“翅膀”图层，将复制的“翅膀副本”图层进行水平翻转，并放置于合适的位置。 Photoshop职业应用项目教程 第7章 网页美工设计 Photoshop职业应用项目教程 第7章 网页美工设计 8．输入文字“我心飞扬”，字号38，字体选择华文中宋。英文文字“HEART FLY” ，字号27，字体选择Arial Black。“王小明个人网站”，字号23，字体选择黑体。调整文字的位置与大小。 Photoshop职业应用项目教程 第7章 网页美工设计 9．Logo设计完毕，将Logo图层暂时隐藏。 10．设计导航栏和广告形象区域（Banner）。先确定Logo、导航栏及Banner的整体比例和尺寸。先将Logo所占位置定位为整体页面左上角区域，宽度为200像素，高度为120像素，为方便操作可建立参考线。选择“视图”→“新建参考线”。 Photoshop职业应用项目教程 第7章 网页美工设计 11．打开Logo图层显示。将其中标志调整大小后放入所规定位置。 Photoshop职业应用项目教程 第7章 网页美工设计 12．制作广告形象区域（Banner），首先导入示例图片，如图7-2-11。取其局部，删除其Banner区域之外部分。 Photoshop职业应用项目教程 第7章 网页美工设计 13．选择菜单“滤镜”→“模糊”→“动感模糊”命令，对图片进行处理。 Photoshop职业应用项目教程 第7章 网页美工设计 14．为了使网页结构严谨，在Logo和Banner区域的下方绘制两条色带，Logo下方色带宽242像素、高15像素，色值为 #666666。Banner下方色带宽563像素高15像素，色值为 #00cc33。 Photoshop职业应用项目教程 第7章 网页美工设计 15．制作导航图标，先制作出宽95 像素高24像素的矩形。然后复制四块，间隔距离1像素即可。最后在上方加入导航文字：首页、文章、像册、留言、音乐，字号为14，色值为 #a8b0a9。 Photoshop职业应用项目教程 第7章 网页美工设计 16．继续装饰Banner区域，在其上方加入一条宽780像素、 高13像素，色值为#336666 的色带。同时为Banner区域加上文字“WWW．WANGXIAOMING．COM”，字号为25，字体为Arial Black，色值为#ffffff。 Photoshop职业应用项目教程 第7章 网页美工设计 17．制作内容显示区域，首先在左边制作个人简介区域。通过选区填充制作出宽123像素、高371像素的矩形，色值为#cccccc 。在图层面板中设置图层透明度为70%。最后加入所需文字，文字大小可根据需要自行调节。 Photoshop职业应用项目教程 第7章 网页美工设计 18．在图像右边制作装饰色带。首先制作宽556像素、高 31像素，颜色为 #666666的矩形。为了装饰需要，右上角可删除一斜角，色带下方制作出一浅色带，高度可根据需要自定。 加入导航文字：“文章 / 心路历程 / 为飞翔的心插上翅膀”，字号为12，色值为#cccccc。 制作正文内容显示区域，先在导航文字的下方制作宽度556像素、高度329像素，色值为#ebeeeb的矩形，同时设置其透明度为60%。最后在其上方加入内容文字，字号12，色值#545754。 Photoshop职业应用项目教程 第7章 网页美工设计 Photoshop职业应用项目教程 第7章 网页美工设计 19．在网页底部绘制矩形行色块，宽780像素、高55像素，色值#545754。一个完整的网页小样就制作完毕。 Photoshop职业应用项目教程 第7章 网页美工设计 7．3任务2——商业网站设计 由于当今企业对自身形象的逐步重视，以及对网络广告宣传的青睐，几乎每个企业都拥有自己的企业网站，还有众多利用互联网以赢利为目的的网站，我们可以都将之称为商业网站。 制作商业网站首先要定位行业，只有定位准确风格才能清晰，例如科技类网站，要考虑如何通过创意表现科技的现代感、科技感。风格可以以简洁为主，色调以蓝色调为主。 接下来的例子是进出口贸易网站，整体网页设计采用简洁大方的风格，色彩以蓝色绿色为主，配以黑白灰色。 Photoshop职业应用项目教程 第7章 网页美工设计 Photoshop职业应用项目教程 第7章 网页美工设计 1．新建文件，在对话框中将文件重命名为“商业网站”，设置文件宽度为780像素，高度为1050像素，分辨率为72像素/英寸。打开图层面板，新建图层。在画面顶部绘制一个宽780像素、高30像素的矩形，填充颜色为#898989。 Photoshop职业应用项目教程 第7章 网页美工设计 2．制