任务2-1 首页布局设计
任务要求
1、掌握使用Photoshop进行网站首页的版面设计方法
2、掌握使用Photoshop制作网页各版面元素的设计技巧和方法
任务效果图
任务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-1 首页布局设计
尝试练****br/>按照图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、新建一个名为“导航”,宽度、高度分别为“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 导航设计
尝试练****br/>按图2-2_12所示,参照“网站首页”制作步骤,完成如下操作:
1、输入“新到商品”、“畅销商品”、“推荐商品”、“搜索商品”、“商品分类”等文字。
2、分别设置它们的图层样式同“网站首页”。
3、在各个栏目文字间输入“竖线”。
任务2-2 导航设计
任务21首页布局设计ppt课件 来自淘豆网www.taodocs.com转载请标明出处.