任务21首页布局设计

《任务21首页布局设计》由会员分享，可在线阅读，更多相关《任务21首页布局设计（23页珍藏版）》请在装配图网上搜索。

1、任务21首页布局设计 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望任务任务任务任务2-1 2-1 2-1 2-1 首页布局设计首页布局设计首页布局设计首页布局设计操作步骤：操作步骤：1 1、运行运行Adobe PhotoshopCS2Adobe PhotoshopCS2，新建一个文件名为，新建一个文件名为“首页结构草图首页结构草图”，宽度、高度分别为宽度、高度分别为900px(900px(像素像素)、600px600px的的psdpsd文件。文件。2 2、新建一

2、个图层，并命名为、新建一个图层，并命名为“logo”“logo”。3 3、选择选择“工具箱工具箱”上的上的“矩形工具矩形工具”，并设置，并设置“前景色前景色”为为“浅黄浅黄色色”，在，在“logologo”图层上画一矩形，操作如图图层上画一矩形，操作如图2-1_22-1_2所示。所示。4 4、给给“logologo”图层进行图层进行2 2像素的外部描边，操作如图像素的外部描边，操作如图2-1_32-1_3所示。所示。5 5、新建名称为新建名称为“logologo”图层，选择图层，选择“T T”工具，并设置字体、字号、工具，并设置字体、字号、颜色分别为颜色分别为“ArialArial”、“363

3、6点点”、“#7e3a0c#7e3a0c”，然后输入，然后输入“logologo”，如图如图2-1_42-1_4所示。所示。6 6、新建名为新建名为“(200*70)(200*70)”的图层，使用的图层，使用“T T”输入输入“200*70200*70”，如，如图图2-1_52-1_5所示。所示。任务任务任务任务2-1 2-1 2-1 2-1 首页布局设计首页布局设计首页布局设计首页布局设计尝试练习：尝试练习：按照图按照图2-1_12-1_1所示，参照步骤所示，参照步骤1 1-6 6尝试完成网页结构草图的绘制，看尝试完成网页结构草图的绘制，看你能完成吗？你能完成吗？（1 1）绘制）绘制bann

4、erbanner的矩形区域，并标注像素要求：的矩形区域，并标注像素要求：700*70700*70。（2 2）绘制）绘制“导航条导航条”的矩形区域，并标注像素要求：的矩形区域，并标注像素要求：900*40900*40。（3 3）分别绘制）分别绘制“登陆框登陆框”“”“商品导航商品导航”“”“商品排行商品排行”“”“友情链接友情链接”的矩的矩形区域，并标注它们的宽度像素要求：形区域，并标注它们的宽度像素要求：200200。（4 4）绘制）绘制“商品搜索商品搜索”、“新品上架新品上架”、“精品推荐精品推荐”矩形区域，并标矩形区域，并标注它的像素的要求：注它的像素的要求：690690。（5 5）绘制）

5、绘制“版权信息版权信息”矩形区域，并标注它的像素要求：矩形区域，并标注它的像素要求：900*40900*40。任务任务任务任务2-1 2-1 2-1 2-1 首页布局设计首页布局设计首页布局设计首页布局设计任务任务任务任务2-2 2-2 2-2 2-2 导航设计导航设计导航设计导航设计任务要求任务要求根据根据“衢州恒创网上商城衢州恒创网上商城”的网站主题，设计该网站的网站主题，设计该网站logologo和导航。和导航。任务效果图任务效果图任务任务任务任务2-2 2-2 2-2 2-2 导航设计导航设计导航设计导航设计操作步骤：操作步骤：1 1、运行、运行photoshop CS2photosh

6、op CS2，新建一个名为，新建一个名为“logo”“logo”，宽度、高度分别，宽度、高度分别为为“32470px”“32470px”的的psdpsd文档。文档。2 2、新建、新建“图层图层1”1”制作制作logologo左边的半椭圆图案，操作如图左边的半椭圆图案，操作如图2-2_22-2_2所示。所示。3 3、选区填充颜色，操作如图、选区填充颜色，操作如图2-2_32-2_3所示。所示。4 4、制作白色线条，操作如图、制作白色线条，操作如图2-2_42-2_4所示。所示。5 5、调整白色线条，操作如图、调整白色线条，操作如图2-2_52-2_5所示。所示。6 6、制作、制作“飞鸟飞鸟”图案

7、，操作如图图案，操作如图2-2_62-2_6所示。所示。7 7、给、给“飞鸟飞鸟”图案填充白色，操作如图图案填充白色，操作如图2-2_72-2_7所示。所示。8 8、复制、复制“飞鸟飞鸟”图案，操作如图图案，操作如图2-2_82-2_8所示。所示。9 9、输入文字、输入文字“衢州恒创网上商城衢州恒创网上商城”，操作如图，操作如图2-2_92-2_9所示。所示。任务任务任务任务2-2 2-2 2-2 2-2 导航设计导航设计导航设计导航设计任务效果图任务效果图任务任务任务任务2-2 2-2 2-2 2-2 导航设计导航设计导航设计导航设计操作步骤：操作步骤：1 1、新建一个名为新建一个名为“导航

8、导航”，宽度、高度分别为，宽度、高度分别为“91234px”“91234px”，其，其它参数默认的它参数默认的“psd”“psd”文档。文档。、绘制绘制“矩形形状矩形形状”，操作如图，操作如图2-2_112-2_11所示。所示。、“删格化删格化”矩形形状并将其作为选区载入，操作如图矩形形状并将其作为选区载入，操作如图2-2_122-2_12所所示。示。、收缩选区，操作如图收缩选区，操作如图2-2_132-2_13所示。所示。、给选区填充颜色，操作如图给选区填充颜色，操作如图2-2_142-2_14所示。所示。、输入文本输入文本“网站首页网站首页”，然后设置，然后设置“图层样式图层样式”，操作如

9、图，操作如图2-2-2_152_15所示。所示。任务任务任务任务2-2 2-2 2-2 2-2 导航设计导航设计导航设计导航设计尝试练习：尝试练习：按图按图2-2_122-2_12所示，参照所示，参照“网站首页网站首页”制作步骤，完成如下操作：制作步骤，完成如下操作：1 1、输入、输入“新到商品新到商品”、“畅销商品畅销商品”、“推荐商品推荐商品”、“搜索商品搜索商品”、“商品分类商品分类”等文字。等文字。2 2、分别设置它们的图层样式同、分别设置它们的图层样式同“网站首页网站首页”。3 3、在各个栏目文字间输入、在各个栏目文字间输入“竖线竖线”。任务任务任务任务2-2 2-2 2-2 2-2

10、 导航设计导航设计导航设计导航设计任务任务任务任务2-3 Banner2-3 Banner2-3 Banner2-3 Banner设计设计设计设计一、什么是一、什么是Banner?Banner?bnnaer,bnnaer,又称网幅广告、旗帜广告、横幅广告，它是用又称网幅广告、旗帜广告、横幅广告，它是用于表现商家广告内容的图片，放置在广告商的页面上，于表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。是互联网广告中最基本的广告形式。二、任务要求二、任务要求1 1、掌握使用、掌握使用Photoshop CS2Photoshop CS2中的钢笔工具绘制图形轮廓路径中的钢笔

11、工具绘制图形轮廓路径2 2、掌握使用、掌握使用Photoshop CS2Photoshop CS2中的直接选取工具和转换点工具调整中的直接选取工具和转换点工具调整路径路径3 3、掌握使用、掌握使用Photoshop CS2Photoshop CS2中的路径与选区的转化中的路径与选区的转化4 4、掌握使用、掌握使用Photoshop CS2Photoshop CS2中的渐变色的设置与填充中的渐变色的设置与填充5 5、掌握使用、掌握使用Photoshop CS2Photoshop CS2中的魔术棒工具抠图的应用中的魔术棒工具抠图的应用6 6、掌握使用、掌握使用Photoshop CS2Photos

12、hop CS2中的任意变形工具的使用中的任意变形工具的使用任务任务任务任务2-3 Banner2-3 Banner2-3 Banner2-3 Banner设计设计设计设计任务效果图任务效果图任务任务任务任务2-3 Banner2-3 Banner2-3 Banner2-3 Banner设计设计设计设计操作步骤：操作步骤：1 1、运行运行Adobe photoshop CS2Adobe photoshop CS2，新建一名称为，新建一名称为“banner”“banner”，宽度、高度，宽度、高度分别为分别为“70070px”“70070px”的的psdpsd文档。文档。2 2、新建一图层，并命名

13、为、新建一图层，并命名为“banner”“banner”。3 3、使用、使用“钢笔工具钢笔工具”绘制一城市轮廓，操作如图绘制一城市轮廓，操作如图2-3_22-3_2所示。所示。、使用、使用“直接选取工具直接选取工具”和和“转换点工具转换点工具”，调整，调整“城市城市”轮廓，操轮廓，操作如图作如图2-3_32-3_3所示。所示。、将路径转化为选择区，操作如图、将路径转化为选择区，操作如图2-3_42-3_4所示。所示。、切换到图层面板，给选区填充、切换到图层面板，给选区填充“渐变色渐变色”，具体操作：，具体操作：选择工具箱中的选择工具箱中的“渐变工具渐变工具”，设置，设置“渐变色渐变色”，操作如

14、图，操作如图2-3_52-3_5所示。所示。添加新色标，操作如图添加新色标，操作如图2-3_62-3_6所示。所示。设置新色标颜色分别为设置新色标颜色分别为“1090c0”“1090c0”，操作如图，操作如图2-3_72-3_7所示。所示。任务任务任务任务2-2-2-2-anneranneranneranner设计设计设计设计尝试练习：尝试练习：按照图按照图2-3_82-3_8所示，参照步骤尝试为新添加的色标设置颜色：所示，参照步骤尝试为新添加的色标设置颜色：（1 1）选取颜色）选取颜色“df83f3”“df83f3”。（2 2）选取颜色）选取颜色“979690”“979690”。任务任务任务

15、任务2-3 Banner2-3 Banner2-3 Banner2-3 Banner设计设计设计设计操作步骤：操作步骤：设置渐变色的设置渐变色的“不透明度不透明度”为为100%100%，操作如图，操作如图2-3_92-3_9所示。所示。对选区填充设置好的渐变色，操作如图对选区填充设置好的渐变色，操作如图2-3_102-3_10所示：所示：7 7、插入、插入“intel“intel标志标志”图层图层,为该图层添加为该图层添加“intel“intel标志标志”。打开打开“F:gshop2.0images”“F:gshop2.0images”文件夹下的文件夹下的“intel.jpg”“intel.j

16、pg”文件。文件。将整个将整个“intel“intel标志标志”完整选中形成选区，操作如图完整选中形成选区，操作如图2-3_112-3_11所示。所示。将已选取的将已选取的“intel“intel标志标志”复制到复制到“banner.psd”“banner.psd”文档中，操作如图文档中，操作如图2-2-3_123_12所示。所示。任务任务任务任务2-2-2-2-anneranneranneranner设计设计设计设计尝试练习：尝试练习：按照下图按照下图2-3_132-3_13所示，完成如下操作：所示，完成如下操作：（1 1）选中）选中“保持长宽比保持长宽比”按钮，沿对角线方向缩小按钮，沿对角

17、线方向缩小“intel”“intel”标志。标志。（2 2）将）将“intel”“intel”标志移动到图示位置。标志移动到图示位置。（3 3）选中）选中“保持长宽比保持长宽比”按钮，沿对角线方向缩小按钮，沿对角线方向缩小“intel”“intel”标志到图标志到图示大小。示大小。任务任务任务任务2-3 Banner2-3 Banner2-3 Banner2-3 Banner设计设计设计设计操作步骤：操作步骤：8 8、输入广告语、输入广告语“英特尔英特尔 让城市充满色彩让城市充满色彩”，如图，如图2-3_142-3_14所示。所示。9 9、删格化文字，并设置文字的颜色，操作如图、删格化文字，并

18、设置文字的颜色，操作如图2-3_152-3_15所示所示。尝试练习：尝试练习：按照下图按照下图2-3_132-3_13所示，完成如下操作：所示，完成如下操作：（1 1）选中）选中“保持长宽比保持长宽比”按钮，沿对角线方向缩小按钮，沿对角线方向缩小“intel”“intel”标志。标志。（2 2）将）将“intel”“intel”标志移动到图示位置。标志移动到图示位置。（3 3）选中）选中“保持长宽比保持长宽比”按钮，沿对角线方向缩小按钮，沿对角线方向缩小“intel”“intel”标志到图标志到图示大小。示大小。任务任务任务任务2-2-2-2-anneranneranneranner设计设计设

19、计设计bannerbanner的国际标准规范的国际标准规范IAC/CASIEIAC/CASIE标准标准bannerbanner规格规格备注备注1 1120120600600“摩天大楼摩天大楼“形形2 2160160600600宽宽“摩天大楼摩天大楼”形形3 3180180150150长主形长主形4 4300300250250中级长方形中级长方形5 5336336280280大长方形大长方形6 6240240400400竖长方形竖长方形7 7250250250250“正方形弹出式正方形弹出式”广告广告注：注：现在随着大屏幕的显示器出现现在随着大屏幕的显示器出现,banner,banner的表现尺

20、寸越来越大的表现尺寸越来越大,760X70;1000X70,760X70;1000X70像素的大尺寸像素的大尺寸bannerbanner也俏然出现也俏然出现.任务任务任务任务2-4 2-4 2-4 2-4 左栏设计左栏设计左栏设计左栏设计任务要求任务要求1 1、掌握使用、掌握使用photoshop cs2photoshop cs2设计制作设计制作“我购买的商品我购买的商品”版块版块2 2、掌握使用、掌握使用photoshop cs2photoshop cs2设计制作设计制作“商品导航商品导航”版块版块3 3、掌握使用、掌握使用photoshop cs2photoshop cs2设计制作设计制作

21、“商品排行版商品排行版”版块版块4 4、掌握使用、掌握使用photoshop cs2photoshop cs2设计制作设计制作“友情链接友情链接”版块版块任务任务任务任务2-4 2-4 2-4 2-4 左栏设计左栏设计左栏设计左栏设计任任任任务务务务效效效效果果果果图图图图任务任务任务任务2-4 2-4 2-4 2-4 左栏设计左栏设计左栏设计左栏设计操作步骤：操作步骤：一、一、运行运行“photoshop cs2”“photoshop cs2”，并新建名为，并新建名为“左栏左栏”，设高度、宽度分别，设高度、宽度分别为为“216265px”“216265px”的的psdpsd文档文档。二、设计

22、制作二、设计制作“我购买的商品我购买的商品”矩形区域，并添加图片。矩形区域，并添加图片。1 1、设计制作、设计制作“我购买的商品我购买的商品”矩形区域，操作如图矩形区域，操作如图2-4_22-4_2所示所示。2 2、为矩形区域添加含有、为矩形区域添加含有“我购买的商品我购买的商品”文字的图片，操作如图文字的图片，操作如图2-2-4_34_3所示所示。尝试练习：尝试练习：按图按图2-4_42-4_4所示，完成如下操作：所示，完成如下操作：1 1、将、将“图层图层1”1”重命名为重命名为“标题图像标题图像”。2 2、新建一图层，命名为、新建一图层，命名为“内容区内容区”，使用，使用“矩形选框矩形选

23、框”工具并设高工具并设高度、宽度分别为度、宽度分别为“212224px”“212224px”。3 3、使用、使用“油漆桶工具油漆桶工具”对矩形选区填充对矩形选区填充“#a6e3ff”“#a6e3ff”颜色。颜色。任务任务任务任务2-4 2-4 2-4 2-4 左栏设计左栏设计左栏设计左栏设计操作步骤：操作步骤：、为为“我购买的商品我购买的商品”矩形区域添加文字内容，操作如图矩形区域添加文字内容，操作如图2-4_52-4_5所示所示。尝试练习：尝试练习：按图按图2-4_62-4_6所示，完成如下操作：所示，完成如下操作：1 1、新建一图层，命名为、新建一图层，命名为“购物车购物车”。2 2、打开

24、、打开“e:gshop2.0imagescart_empty.gif”“e:gshop2.0imagescart_empty.gif”文件，并将其全文件，并将其全选拖曳到选拖曳到“左栏左栏.pad”.pad”中。中。任务任务任务任务2-4 2-4 2-4 2-4 左栏设计左栏设计左栏设计左栏设计操作步骤：操作步骤：四、四、添加一分隔直线，操作如图添加一分隔直线，操作如图2-4_72-4_7所示。所示。尝试练习：尝试练习：按图按图2-4_12-4_1所示，利用教材提供的素材，参照上述制作所示，利用教材提供的素材，参照上述制作“我购买的商品我购买的商品”模块的具体操作步骤，完成模块的具体操作步骤，完成“左栏左栏”其他版块制作：其他版块制作：1 1、制作、制作“商品导航商品导航”模块制作。模块制作。2 2、制作、制作“商品排行榜商品排行榜”模块制作。模块制作。3 3、制作、制作“友情友情”模块制作。模块制作。