动态网页设计美工与技术.ppt

第2章 动态网页效果图设计 SQL Server 2005 教学 第2章 动态网页效果图设计 2.3 主页效果图设计 主页效果图是网页设计的重点，要综合考虑设计的技术要求、设计的艺术创意与设计实现的方法。 2.3.1 网页效果图技术要求 1.文件尺寸的技术要求 在设计效果图时，我们需要注意，由于网页是需要用浏览器打开显示的，需要考虑浏览器的菜单、工具栏、滚动条等窗口元素所占据的空间，不考虑插件的问题，当显示器的分辨率为800×600像素时，网页效果图尺寸设计成775×435是可以的。当显示器的分辨率为1024×768像素时，网页尺寸最大设计成1003×592像素是可以的，注意设置网页的左右、上下边距为0。 2.网页导航设计技术要求 为了使标志便于切片处理，便于版式编排，便于交互实现是网页导航设计的技术原则，为此，采用横向排版的方式。 3.网页Banner（网页横幅广告）设计技术要求 便于采用Flash技术实现，同时考虑没有Flash的环境，因此提供两种设计方案：纯Flash的Banner与背景图上加透明Flash的Banner。 2.3.2 网页Banner背景设计 1．建立文件 新建文件，设置文件大小为1000×590，分辨率设置为72，这里采用了比较保守的方式，这样方便于后面的调整。新建“网页背景”图层，使用矩形选择工具，框选选区。 2.3.2 网页Banner背景设计 2.填充渐变色 选择渐变工具 ，设置渐变属性 为线性 渐变，单击颜色选项 ，进入渐变编辑器，进行如图参数设置，上面的控制点工具 用于控制该点的不透明度，下面的控制点工具 用于控制该点的颜色，我们这里只需设置颜色即可。从左向右颜色为左侧：（R：149，G：213，B：242），40%位置处：（R：178，G：226，B：249）右侧：（R：26，G：95，B：168）按住Shift键，从左向右拖曳鼠标，为选区填充渐变颜色。 2.3.2 网页Banner背景设计 3.创建路径蒙版 使用钢笔工具，创建如图所示的路径，之所以上面和左右都超过了文件的范围，是因为建立选区后，只会保留文件内部的区域，这样建立选取的方法很快。使用路径选择工具选中路径，单击鼠标右键，选择创建矢量蒙版。单击图层空白处或选择其它工具，蒙版效果如图所示。 2.3.2 网页Banner背景设计 4.放入标志 打开领跑者LOGO文件，使用移动工具直接拖动到领跑者效果图中，使用快捷键Ctrl+T对图形进行自由变形，注意将属性中的链接按钮按下，以保证按比例缩放，注意，可以通过窗口菜单的层叠选项将多个文件排列在窗口中，进行图形的拖曳。 2.3.2 网页Banner背景设计 5.图像描边 为了使标志在背景中突出出来，这里采用描边的方式。单击图层面板下面的添加图层样式 按钮，选择“描边”选项，设置描边颜色为白色，大小为2像素，依次设置相应图层的描边效果。 2.3.3 网页导航设计 1.创建圆角矩形路径 新建“导航”图层，选择矩形工具右侧下方的三角形，选择圆角矩形工具，设置圆角半径为3px，工作方式为路径，在网站名称右侧拖动出导航区域， 2.3.3 网页导航设计 2.创建圆角矩形选区 按组合键“Ctrl+回车键”，创建选区，或使用路径选择工具 ，单击导航区域的路径，单击右键，选择“建立选区”。设置前景色为淡灰色（R：240，G：240，B：240），选择菜单“编辑|描边”命令，设置参数如图所示，对选区进行描边。 2.3.3 网页导航设计 3.填充渐变颜色 选择渐变工具 ，设置渐变类型为线性渐变，设置渐变颜色带为左侧（R：132，G：182，B：224），右侧（R：43，G：110，B：177），从选取左下角向右上角拖曳鼠标，填充蓝色的渐变，按Ctrl+D可以取消当前区域的选择。 2.3.3 网页导航设计 4.设计导航文字 使用文字工具 ，设置文字字体为“汉仪中圆简”，大小为16点，颜色为白色，输入导航文字。 2.3.4 主页栏目设计 1.素材的部分选择 选择菜单“文件|打开”命令，打开配套光盘中“\源文件\6\素材\大楼.jpg”文件，使用多边形套索工具 沿大楼轮廓单击鼠标，选择大楼的主体，选择菜单“编辑|复制”命令，选择“网页背景”图层，单击创建新图层图标，创建新图层，改名为“大楼”，选择菜单“编辑|粘贴”命令 。 2.3.4 主页栏目设计 2.图片的变形 按Ctrl+T对大楼进行自由变形，选中变形选项中的锁定宽高比按钮 ，保持比例关系。然后按Enter键确认变形操作（后面的自由变形命令使用同样的方法），并调整大楼的位置。 2.3.4 主页栏目设计 3.选区的载入 单击网页背景图层，单击右侧的带有路径的缩览图，此时路径显示出来，使用直接选择工具选中路径，右击，选择建立选区，如图所示。 2.3.4 主页栏