任务21首页布局设计

任务 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 首页布局设计 1 、 L O G O 的国际标准规范 ： LOGO 规格 备注 1 88 31 互联网上最普遍的 L O G O 规格 2 120 60 用于一般大小的 L O G O 规格 3 120 90 用于大型的 L O G O 规格 4 200 70 这种规格 L O G O 也已经出现 注 ：现在随着大屏幕的显示器出现 , b a n n e r 的表现尺寸越来越大 , 7 6 0 X 7 0 ; 1 0 0 0 X 7 0 像素的大尺 寸 b a n n e r 也俏然出现 . 任务 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所示。 、切换到图层面板，给选区填充“渐变色”，具体操作： 选择工具箱中的“渐变工具”，设置“渐变色”，操作如图 2-3_5所 示。 添加新色标，操作如图 2-3_6所示。 设置新色标颜色分别为“ 1090c0”，操作如图 2-3_7所示。 任务 2- anner设计 尝试练习： 按照图 2-3_8所示，参照步骤尝试为新添加的色标设置颜色： （ 1）选取颜色“ df83f3” 。 （ 2）选取颜色“ 979690” 。 任务 2-3 Banner设计 操作步骤： 设置渐变色的“不透明度”为 100%，操作如图 2-3_9所示。 对选区填充设置好的渐变色，操作如图 2-3_10所示： 7、插入“ intel标志”图层 ,为该图层添加“ intel标志”。 打开“ F: gshop2.0images” 文件夹下的“ intel.jpg” 文件。 将整个“ intel标志”完整选中形成选区，操作如图 2-3_11所示。 将已选取的“ intel标志”复制到“ banner.psd” 文档中，操作如图 2-3_12所示。 任务 2- anner设计 尝试练习： 按照下图 2-3_13所示，完成如下操作： （ 1）选中“保持长宽比”按钮，沿对角线方向缩小“ intel” 标志。 （ 2）将“ intel” 标志移动到图示位置。 （ 3）选中“保持长宽比”按钮，沿对角线方向缩小“ intel” 标志到图 示大小。 任务 2-3 Banner设计 操作步骤： 8、输入广告语“英特尔 让城市充满色彩”，如图 2-3_14所示。 9、删格化文字，并设置文字的颜色，操作如图 2-3_15所示。 尝试练习： 按照下图 2-3_13所示，完成如下操作： （ 1）选中“保持长宽比”按钮，沿对角线方向缩小“ intel” 标志。 （ 2）将“ intel” 标志移动到图示位置。 （ 3）选中“保持长宽比”按钮，沿对角线方向缩小“ intel” 标志到图 示大小。 任务 2- anner设计 banner的国际标准规范 IAC/CASIE标准 banner规格 备注 1 120 600 “ 摩天大楼 “ 形 2 160 600 宽 “ 摩天大楼 ” 形 3 180 150 长主形 4 300 250 中级长方形 5 336 280 大长方形 6 240 400 竖长方形 7 250 250 “ 正方形弹出式 ” 广告 注： 现在随着大屏幕的显示器出现 ,banner的表现尺寸越来越 大 ,760X70;1000X70像素的大尺寸 banner也俏然出现 . 任务 2-4 左栏设计 任务要求 1、掌握使用 photoshop cs2设计制作“我购买的商品”版块 2、掌握使用 photoshop cs2设计制作“商品导航”版块 3、掌握使用 photoshop cs2设计制作“商品排行版”版块 4、掌握使用 photoshop cs2设计制作“友情链接”版块 任务 2-4 左栏设计 任 务 效 果 图 任务 2-4 左栏设计 操作步骤： 一、运行“ photoshop cs2”，并新建名为“左栏”，设高度、宽度分 别为“ 216 265px”的 psd文档。 二、设计制作“我购买的商品”矩形区域，并添加图片。 1、设计制作“我购买的商品”矩形区域，操作如图 2-4_2所示。 2、为矩形区域添加含有“我购买的商品”文字的图片，操作如图 2-4_3所示。 尝试练习： 按图 2-4_4所示，完成如下操作： 1、将“图层 1” 重命名为“标题图像”。 2、新建一图层，命名为“内容区”，使用“矩形选框”工具并设 高度、宽度分别为“ 212 224px” 。 3、使用“油漆桶工具”对矩形选区填充“ #a6e3ff” 颜色。 任务 2-4 左栏设计 操作步骤： 、为“我购买的商品”矩形区域添加文字内容，操作如图 2-4_5所示。 尝试练习： 按图 2-4_6所示，完成如下操作： 1、新建一图层，命名为“购物车”。 2、打开“ e:gshop2.0imagescart_empty.gif” 文件，并将其全 选拖曳到“左栏 .pad” 中。 任务 2-4 左栏设计 操作步骤： 四、添加一分隔直线，操作如图 2-4_7所示。 尝试练习： 按图 2-4_1所示，利用教材提供的素材，参照上述制作“我购买的商品” 模块的具体操作步骤，完成“左栏”其他版块制作： 1、制作“商品导航”模块制作。 2、制作“商品排行榜”模块制作。 3、制作“友情”模块制作。