任务21首页布局设计.ppt

１、掌握使用Photoshop进行网站首页的版面设计方法
　　 ２、掌握使用Photoshop
任务效果图
1
任务2-1 首页布局设计
操作步骤：
1、运行Adobe PhotoshopCS2，新建一个文件名为“首页结构草图”，宽度、高度分别为900px(像素)、600px的psd文件。
　　2、新建一个图层，并命名为“logo”。
　　3、选择“工具箱”上的“矩形工具”，并设置“前景色”为“浅黄色”，在“logo”图层上画一矩形，操作如图2-1_2所示。
　　4、给“logo”图层进行2像素的外部描边，操作如图2-1_3所示。
　　5、新建名称为“logo”图层，选择“T”工具，并设置字体、字号、颜色分别为“Arial”、“36点”、“#7e3a0c”，然后输入“logo”，如图2-1_4所示。
　　6、新建名为“(200*70)”的图层，使用“T”输入“200*70”，如图2-1_5所示。
2
任务2-1 首页布局设计
尝试练****br/>按照图2-1_1所示，参照步骤1-6尝试完成网页结构草图的绘制，看你能完成吗？
（1）绘制banner的矩形区域，并标注像素要求：700*70。
（2）绘制“导航条”的矩形区域，并标注像素要求：900*40。
（3）分别绘制“登陆框”“商品导航”“商品排行”“友情链接”的矩形区域，并标注它们的宽度像素要求：200。
（4）绘制“商品搜索”、“新品上架”、“精品推荐”矩形区域，并标注它的像素的要求：690。
（5）绘制“版权信息”矩形区域，并标注它的像素要求：900*40。
3
任务2-1 首页布局设计
4
任务2-2 导航设计
任务要求
　　根据“衢州恒创网上商城”的网站主题，设计该网站logo和导航。
任务效果图
5
任务2-2 导航设计
操作步骤：
1、运行photoshop CS2，新建一个名为“logo”，宽度、高度分别为“324×70px”的psd文档。
　　2、新建“图层1”制作logo左边的半椭圆图案，操作如图2-2_2所示。
　　3、选区填充颜色，操作如图2-2_3所示。
　　4、制作白色线条，操作如图2-2_4所示。
　　5、调整白色线条，操作如图2-2_5所示。
　　6、制作“飞鸟”图案，操作如图2-2_6所示。
　　7、给“飞鸟”图案填充白色，操作如图2-2_7所示。
　　8、复制“飞鸟”图案，操作如图2-2_8所示。
　　9、输入文字“衢州恒创网上商城”，操作如图2-2_9所示。
6
任务2-2 导航设计
任务效果图
7
任务2-2 导航设计
操作步骤：
1、新建一个名为“导航”，宽度、高度分别为“912×34px” ，其它参数默认的“psd”文档。
　　２、绘制“矩形形状”，操作如图2-2_11所示。
　　３、“删格化”矩形形状并将其作为选区载入，操作如图2-2_12所示。
　　４、收缩选区，操作如图2-2_13所示。
　　５、给选区填充颜色，操作如图2-2_14所示。
　　６、输入文本“网站首页”，然后设置“图层样式”，操作如图2-2_15所示。
8
任务2-2 导航设计
尝试练****br/>按图2-2_12所示，参照“网站首页”制作步骤，完成如下操作：
1、输入“新到商品”、“畅销商品”、“推荐商品”、“搜索商品”、“商品分类” 等文字。
2、分别设置它们的图层样式同“网站首页”。
3、在各个栏目文字间输入“竖线”。
9
任务2-2 导航设计
10