Photoshop职业应用项目教程第7章网页美工设计.ppt

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.1网页美工设计的特点与思路分析 7.1.1网页美工的任务概述 网页美工顾名思义就是对网页的美化，其主要包括三方面:网站的创意规划，网站的版式布局规划和网站的色彩规划。 网页美工设计一般要与企业整体形象一致。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。 网页美工既要熟悉图形创作软件，也要有较好的视觉功底，创意能力，才能创造出符合需求的美观的页面。网页美工不同于网站后台开发的编程人员，其核心是美工，即对网站整体形式美的把握。 Photoshop职业应用项目教程 第7章 网页美工设计 7.1.2网页美工设计流程 1．需求分析 随着社会的不断发展，企业商家品牌意识的提高，现在的网站开发设计不仅仅是功能的实现，更强调整体外观的美化和整体形象品质。与客户的充分沟通，了解客户的需求是创作网页的前提。 2．网站项目规划 一个完整的网站应该具备整体布局、条理清晰、内容丰富的特点，因此网站项目的规划十分重要。必须要让所看网站的客户在第一时间找到需要的信息，并给以清晰的指示引导。我们在这里只介绍基本原则，既：先整体布局，再局部整理，力求做到条理清晰、内容明确。 Photo