任务2 1 首页布局设计.pptVIP

任务2-1 首页布局设计 任务要求 　　１、掌握使用Photoshop进行网站首页的版面设计方法 　　 ２、掌握使用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 首页布局设计 尝试练习： 　　按照图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、运行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所示。 任务2-2 导航设计 任务效果图 任务2-2 导航设计 操作步骤： 　　1、新建一个名为“导航”，宽度、高度分别为“912×34px” ，其它参数默认的“psd”文档。 　　２、绘制“矩形形状”，操作如图2-2_11所示。 　　３、“删格化”矩形形状并将其作为选区载入，操作如图2-2_12所示。 　　４、收缩选区，操作如图2-2_13所示。 　　５、给选区填充颜色，操作如图2-2_14所示。 　　６、输入文本“网站首页”，然后设置“图层样式”，操作如图2-2_15所示。 任务2-2 导航设计 尝试练习： 按图2-2_12所示，参照“网站首页”制作步骤，完成如下操作： 1、输入“新到商品”、“畅销商品”、“推荐商品”、“有哪些信誉好的足球投注网站商品”、“商品分类” 等文字。 2、分别设置它们的图层样式同“网站首页”。 3、在各个栏目文字间输入“竖线”。 任务2-2 导航设计 任务2-3 Banner设计 一、什么是Banner? bnnaer,又称网幅广告、旗帜广告、横幅广告，它是用于表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。 二、任务要求 1、掌握使用Photoshop CS2中的钢笔工具绘制图形轮廓路径 2、掌握使用Photoshop CS2中的直接选取工具和转换点工具调整路径 3、掌握使用Photoshop CS2中的路径与选区的转化 4、掌握使用Photoshop CS2中的渐变色的设置与填充 5、掌握使用Photoshop CS2中的魔术棒工具抠图的应用 6、掌握使用Photoshop CS2中的任意变形工具的使用 任务2-3 Banner设计 任务效果图 任务2-3 Banner设计 操作步骤： 1、运行Adobe photoshop CS2，新建一名称为“banner”，宽度、高度分别为“700×70px”的psd文档。 2、新建一图层，并命名为“banner”。 3、使用“钢笔工具”绘制一城市轮廓，操作如图2-3_2所示。 ４、使用“直接选取工具”和“转换点工具”，调整“城市”轮廓，操作如图2-3_3所示。 ５、将路径转化为选择区，操作如图2-3_4所示。 ６、切换到