Photoshop网页效果图设计资料.ppt

主要内容 4.2 左侧导航的设计 4.联系电话设计 创建电话背景图层，使用圆角矩形工具创建圆角矩形，创建选区，进行白色描边。导入电话图形，使用文本工具输入联系电话，并复制电脑阴影得到电话阴影效果结果如图所示。 4.3 右侧内容的设计 1.右侧栏目线和图标 新建“子栏目线”图层，使用矩形选择工具建立长矩形选区，填充灰色（R：208，G：208，B：208），得到灰色的栏目线。接下来设计子栏目前的图标，同样使用矩形工具建立矩形选区，分别填充蓝灰色（R：36，G：103，B：139）和灰色（R：208，G：208，B：208），得到如图子栏目线，结果如图所示。 4.3 右侧内容的设计 2.栏目名称和位置信息 使用文本工具在栏目图标后输入子栏目信息“图形设计类”，颜色为蓝灰（R：36，G：103，B：139），在右侧输入位置信息：“您的位置：首页/培训课程/图形设计类”，颜色为灰色（R：101，G：101，B：101），得到如图结果。 4.3 右侧内容的设计 3.右侧栏目内容的设计 新建“右侧背景”图层，使用直线工具从上向下建立垂直的直线路径，如图所示。使用文本工具，将鼠标移动到路径的顶部，当鼠标指针变成如图所示形状时单击鼠标，输入文字“---------”（多个减号）。然后全选输入的文字，在字符面板中设置文字的大小和间距，如果文字不够或超过直线可以增减字符得到最终结果。 4.3 右侧内容的设计 设置前景色为蓝色（R：144，G：190，B：231），使用圆角矩形工具，设置圆角半径为2px，方式为填充像素，创建圆角矩形区域，同样设置前景色为淡红（R：255，G：154，B：159），绘制第二个圆角矩形。使用文本工具输入文字信息。 4.3 右侧内容的设计 打开素材“平面广告大师.png”和“网页设计师.png”，使用移动工具移动到效果图中，并使用文本工具输入“MORE”，结果如图所示。当然我们还可以给栏目加上圆角矩形边框，再进行下面页面的设计，我们可以采用同样的方法设计其它网页子页的效果图，由于版面有限，我们只能设计到这里了。 最后选择菜单“文件|存储”命令，保存效果图文件，并选择菜单“文件|存储为”命令，保存格式为“PNG”格式，文件名为“领跑者子页”，以备后面进行图像切片的制作。 5 Fireworks网页图像切片制作 5.1 图像切片的作用 在PhotoShop中设计好的网页效果图，需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前，可以使用PhotoShop或Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。制作网页图像切片的目的是为了获得图片素材并对图片进行优化，使得整个图片分为多个不同的小图片分开下载，这样下载的时间就大大地缩短了，从而提高网页加载的速度，能够通过网页设计软件实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。另外，通过切片可以导出不同类型的图片，从而有效的减小图片的大小，再有就是切片之后的图片便于设置超级链接。制作网页切片的软件主要Photoshop和Fireworks，Fireworks在网页切片制作方面有很强的优势，是网页设计三剑客重要角色之一，所以我们采取Fireworks进行切片的制作。 5.2 图像切片的制作 1.打开效果图文件 使用Fireworks CS3打开效果图文件“领跑者首页.PNG”，使用切片工具进行图片切片的制作，可以放大图形，选择部分选定工具进行图片边界的调整，如图所示。 5.2 图像切片的制作 2.切片的技巧 在进行图像切片的时候，要尽量将网页图像整齐的分成几个横向的块，因为在使用Dreamweaver进行网页表格排版时，能够避免一些麻烦，而且规则的表格能够提高网页加载的速度。所以，我们先把效果图切成几行，然后在行中进行列的切片，也就是说，先做出大的行的切片，再进行行中列的切片。 5.2 图像切片的制作 3.整体切片的划分 这里，我们先创建四个横向的切片，如图所示。因为我们在设计效果图时，已经借助辅助线做好第二行和第三行之间的图像，使第二个切片底部能够正好在右侧两个认证图形中间穿过，便于排版布局。右侧之所以保留是因为右侧图像和左侧图像界限很清楚，最后用一条很窄的图像作为背景而实现。 5.2 图像切片的制作 4.顶部和主图的切片 下面进行行中列的切片制作，将第一行切出标志、网站名称、各链接文字。第二行切成左右两部分，而右侧的内容分为上下两部分，是为了将Microsoft认证图形切出来，如图所示。 3.2 网页底部的设计 2.文字信息的输入