任务21首页布局设计.ppt

任务2-1首页布局设计任务要求 1、掌握使用Photoshop进行网站首页的版面设计方法 2、掌握使用Photoshop制作网页各版面元素的设计技巧和方法任务效果图任务2-1首页布局设计操作步骤:1、运行AdobePhotoshopCS2,新建一个文件名为“首页结构草图”,宽度、高度分别为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-1首页布局设计尝试练****按照图2-1_1所示,参照步骤1-6尝试完成网页结构草图的绘制,看你能完成吗?(1)绘制banner的矩形区域,并标注像素要求:700*70。(2)绘制“导航条”的矩形区域,并标注像素要求:900*40。(3)分别绘制“登陆框”“商品导航”“商品排行”“友情链接”的矩形区域,并标注它们的宽度像素要求:200。(4)绘制“商品搜索”、“新品上架”、“精品推荐”矩形区域,并标注它的像素的要求:690。(5)绘制“版权信息”矩形区域,并标注它的像素要求:900*40。任务2-1首页布局设计任务2-2导航设计任务要求根据“衢州恒创网上商城”的网站主题,设计该网站logo和导航。任务效果图任务2-2导航设计操作步骤:1、运行photoshopCS2,新建一个名为“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所示。任务2-2导航设计任务效果图任务2-2导航设计操作步骤:1、新建一个名为“导航”,宽度、高度分别为“912×34px”,其它参数默认的“psd”文档。 2、绘制“矩形形状”,操作如图2-2_11所示。 3、“删格化”矩形形状并将其作为选区载入,操作如图2-2_12所示。 4、收缩选区,操作如图2-2_13所示。 5、给选区填充颜色,操作如图2-2_14所示。 6、输入文本“网站首页”,然后设置“图层样式”,操作如图2-2_15所示。任务2-2导航设计尝试练****按图2-2_12所示,参照“网站首页”制作步骤,完成如下操作:1、输入“新到商品”、“畅销商品”、“推荐商品”、“搜索商品”、“商品分类”等文字。2、分别设置它们的图层样式同“网站首页”。3、在各个栏目文字间输入“竖线”。任务2-2导航设计