网页美工设计.ppt

Photoshop职业应用项目教程第7章网页美工设计8．输入文字“我心飞扬”，字号38，字体选择华文中宋。英文文字“HEARTFLY”，字号27，字体选择ArialBlack。“王小明个人网站”，字号23，字体选择黑体。调整文字的位置与大小。第31页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计9．Logo设计完毕，将Logo图层暂时隐藏。10．设计导航栏和广告形象区域（Banner）。先确定Logo、导航栏及Banner的整体比例和尺寸。先将Logo所占位置定位为整体页面左上角区域，宽度为200像素，高度为120像素，为方便操作可建立参考线。选择“视图”→“新建参考线”。第32页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计11．打开Logo图层显示。将其中标志调整大小后放入所规定位置。第33页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计12．制作广告形象区域（Banner），首先导入示例图片，如图7-2-11。取其局部，删除其Banner区域之外部分。第34页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计13．选择菜单“滤镜”→“模糊”→“动感模糊”命令，对图片进行处理。第35页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计14．为了使网页结构严谨，在Logo和Banner区域的下方绘制两条色带，Logo下方色带宽242像素、高15像素，色值为#666666。Banner下方色带宽563像素高15像素，色值为#00cc33。第36页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计15．制作导航图标，先制作出宽95像素高24像素的矩形。然后复制四块，间隔距离1像素即可。最后在上方加入导航文字：首页、文章、像册、留言、音乐，字号为14，色值为#a8b0a9。第37页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计16．继续装饰Banner区域，在其上方加入一条宽780像素、高13像素，色值为#336666的色带。同时为Banner区域加上文字“WWW．WANGXIAOMING．COM”，字号为25，字体为ArialBlack，色值为#ffffff。第38页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计17．制作内容显示区域，首先在左边制作个人简介区域。通过选区填充制作出宽123像素、高371像素的矩形，色值为#cccccc。在图层面板中设置图层透明度为70%。最后加入所需文字，文字大小可根据需要自行调节。第39页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计18．在图像右边制作装饰色带。首先制作宽556像素、高31像素，颜色为#666666的矩形。为了装饰需要，右上角可删除一斜角，色带下方制作出一浅色带，高度可根据需要自定。加入导航文字：“文章/心路历程/为飞翔的心插上翅膀”，字号为12，色值为#cccccc。制作正文内容显示区域，先在导航文字的下方制作宽度556像素、高度329像素，色值为#ebeeeb的矩形，同时设置其透明度为60%。最后在其上方加入内容文字，字号12，色值#545754。第40页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计第41页，共58页，星期日，2025年，2月5日网页美工设计第1页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计7.1网页美工设计的特点与思路分析7.1.1网页美工的任务概述网页美工顾名思义就是对网页的美化，其主要包括三方面:网站的创意规划，网站的版式布局规划和网站的色彩规划。网页美工设计一般要与企业整体形象一致。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。网页美工既要熟悉图形创作软件，也要有较好的视觉功底，创意能力，才能创造出符合需求的美观的页面。网页美工不同于网站后台开发的编程人员，其核心是美工，即对网站整体形式美的把握。第2页，共58页，星期日，2025年，2月5日Photoshop职业应用项目教程第7章网页美工设计7.1.2网页美工设计流程1．需求分析随着社会的不断发