第七章Photoshop网页效果图设计.ppt

第七章Photoshop网页效果图设计主要内容7.1网页标志设计领跑者网页标志的设计本着“领跑”的含义，采用图形与文字相结合的方式，使用猎豹的造型，牵动前进的旗帜，旗帜的造型通过字母“L”即“领”字的第一个字母来设计，展示领跑者的形象，色彩采用蓝灰色和白色相结合的方式，体现科技色彩。7.1.2PhotoshopCS3界面介绍7.1.3网页上部背景的设计7.1.3网页上部背景的设计7.1.3网页上部背景的设计7.1.3网页上部背景的设计7.1.3网页上部背景的设计7.1.3网页上部背景的设计7.1.4标志曲线造型7.1.4标志曲线造型7.1.5标志上色描边7.1.5标志上色描边7.1.5标志上色描边7.1.5标志上色描边7.1.6网站名称设计7.1.6网站名称设计7.2网页导航设计7.2.1导航背景的设计7.2.1导航背景的设计7.2.1导航背景的设计7.2.2导航文字的设计7.3主页栏目设计1.素材的部分选择
打开大楼的素材，使用多边形套索工具沿大楼轮廓单击鼠标，选择大楼的主体，选择菜单“编辑|复制【CTRT+C】”，选择“网页背景”图层，单击创建新图层图标，在“网页背景”图层上面创建新图层，改名为“大楼”，选择菜单“编辑|粘贴【CTRL+V】”。注意：快捷方法是，使用移动工具直接将选中的大楼图形拖动到目标效果图中，Photoshop会自动新建图层放置该图形。2.图片的变形
按【CTRL+T】对大楼进行自由变形，选中变形选项中的锁定宽高比按钮，保持比例关系。然后按回车键确认变形操作（后面的自由变形命令使用同样的方法），并调整大楼的位置。
3.选区的载入
单击网页背景图层，按住【CTRL】键用鼠标单击图层面板中“网页背景”图层的图层缩览图图标，载入网页背景的选区。选择大楼图层，选择菜单“选择|反选”命令，按【Delete】键删除多余的部分按【CTRL+D】，取消选区。同样方法，在大楼图层上新建“人物”图层，打开人物素材，并删除多余部分。
4.文字的设计
使用文本工具，输入文字“TOBEFIRST”，设置文字字体颜色选择白色并倾斜。同样输入中文文字信息。我们可以选择选择工具单击输入的文字，按【CTRL+T】键对文字进行进一步变形。7.3.1网页主图的设计7.3.2网页底部的设计7.3.2网页底部的设计7.3.2网页底部的设计7.3.3信息中心栏目的设计7.3.3信息中心栏目的设计7.3.3信息中心栏目的设计7.3.3信息中心栏目的设计7.3.3信息中心栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.4热点链接栏目的设计7.3.5认证栏目的设计7.3.5认证栏目的设计7.3.5认证栏目的设计7.4子页栏目设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.1子页主图的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.2左侧导航的设计7.4.3右侧内容的设计7.4.3右侧内容的设计7.4.3右侧内容的设计7.4.3右侧内容的设计7.4.3右侧内容的设计7.5Fireworks网页图像切片制作
7.5.1图像切片的作用7.5.2图像切片的制作7.5.2图像切片的制作7.5.2图像切片的制作7.5.2图像切片的制作7.5.2图像切片的制作7.5.2图像切片的制作7.5.3图像切片的优化7.5.3图像切片的优化7.5.3图像切片的优化7.5.4图像切片的导出2.个别切片的导出
如果只想导出某个切片，可以在原始视图中使用部分选择工具单击该切片，单击鼠标右键选择“导出所选切片”。最后选择菜单“文件|另存为”命令，将文件保存为“领跑者首页切片.png”，以备以后使用。1.保存不带文字的图片
对于子页的设计中，左侧栏目、栏目条目、右侧栏目只存在文字的不同，因此可以在效果图设计完毕后，将栏目等文字隐藏再保存效果图文件，如图所示。2.图片切片导出
在Fireworks中对效果图进行切片，注意将栏目等切片独立切开，如图所示。3.在Fireworks中输入文字
使用Firework打开导出的没有文字的图片，使用文本工具输入文字即可，我们发现，在Fireworks中写入的文字非常清晰，所以一般情况是按这种方法进行实际的设计制作。然后保存为PNG格式，对于其它的网页子页，只需修改文字然后导出图片即可，省去了重复切片与制作的过程，如图所示。