PS网页设计流程及操作指导.docx

1、PS网页设计流程及操作指导 Photoshop网页设计案例教学网页框图Photoshop网页设计案例教学详细操作步骤：一、 创建文件及布局参考线1、 创建文件，大小990x1200像素，RGB模式，白色背景，如图所示： 2、 设置布局参考线：（1） 横向5对参考线，分别为140/150、 470/480、740/750、1010/1020像素；（2） 纵向2对参考线，分别为325/335、 660/670像素； 3、将文件存储为“01创建文件及布局参考线.psd”。 效果如文件“01创建文件及布局参考线.psd”所示。二、 创建布局块之一（LeadStory）1、 设置矩形选区框样式为“固定大

2、小”，大小为660x320像素；2、 在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”；3、 在“背景”图层上新建图层，命名为“LeadStory”；4、 选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位；5、 将选区填充为灰色；6、 将文件存储为“02创建布局块之一LeadStory.psd”。效果如文件“02创建布局块之一LeadStory.psd”所示。三、 创建布局块之二（Story1-4）1、保持矩形选区框样式为“固定大小”，大小为325x260像素；2、在图层“LeadStory”上建立一个图层，命名为“Story1”； 3、选中图层“St

3、ory1”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、用同样方法建立相同大小的图层Story2、Story3、Story4；6、将文件存储为“03创建布局块之二Story1-4.psd”。效果如文件“03创建布局块之二Story1-4.psd”所示。四、 创建布局块之三（FeatureStory）1、保持矩形选区框样式为“固定大小”，大小为320x260像素；2、在图层“Story4”上建立一个图层，命名为“FeatureStory”； 3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件

4、存储为“04创建布局块之三FeatureStory.psd”。效果如文件“04创建布局块之三FeatureStory.psd”所示。五、 创建布局块之四（Ads）1、保持矩形选区框样式为“固定大小”，大小为320x590像素；2、在图层“FeatureStory”上建立一个图层，命名为“Ads”； 3、选中图层“Ads”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“05创建布局块之四Ads.psd”。效果如文件“05创建布局块之四Ads.psd”所示。六、 创建布局块之五（Footer）1、保持矩形选区框样式为“固定大小”，大小为990x100像素

5、；2、在图层“Ads”上建立一个图层，命名为“Footer”； 3、选中图层“Footers”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“06创建布局块之五Footer.psd”。效果如文件“06创建布局块之五Footer.psd”所示。七、建立广告区域布局参考线1、清除参考线；2、设置广告区域布局参考线：（1）横向4对参考线，分别为440、 582、725、868像素；（2）纵向2对参考线，分别为690、 840像素；3、将文件存储为“07建立广告区域布局参考线.psd”。效果如文件“07建立广告区域布局参考线.psd”所示。八、创建广告区域布

6、局块（Ad1-Ad8）1、保持矩形选区框样式为“固定大小”，大小为125x125像素；2、在图层“Ads”上建立一个图层，命名为“Ad1”； 3、选中图层“Ad1”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为深灰色； 5、用同样方法建立相同大小的图层Ad2、Ad3、Ad4、 Ad5、Ad6、Ad7、Ad8；6、将文件存储为“08创建广告区域布局Ad1-8.psd”。效果如文件“08创建广告区域布局Ad1-8.psd”所示。九、图层排序 1、清除参考线；2、按照网页页面从上到下的次序对图层进行排序，使之符合习惯： 排序前 排序后3、将文件存储为“09图层排序.psd”。效果

7、如文件“09图层排序.psd”所示。十、图层分组1、将图层按块建立分组如下图所示：2、将文件存储为“10图层分组.psd”。效果如文件“10图层分组.psd”所示。十一、建立文字区域(Text)1、裁切Footer图层以下多余的画布；2设置矩形选区框样式为“固定大小”，大小为660x105像素；3、在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”；4、在“Leadstory”图层上新建图层，命名为“Text”；5、选中图层“Text”，用矩形选区框工具建立一个选区，将选区移动到位；6、将选区填充为深灰色；7、 同样的方法在图层Story1、Story2、Story3、Story4

8、为参考图层，在上面分别建立一个“Text”图层，选区大小均为325x105像素，对齐到参考图层底部，填充为深灰色；8、 同样在图层“FeatureStory”为参考图层，在上面建立一个图层“Text”，选区大小为320x40像素，对齐到参考图层顶部，填充为深灰色；9、 将文件存储为“11建立文字区域Text.psd”。效果如文件“11建立文字区域Text.psd”所示。十二、格式化区域一1、将图层LeadStory、Story1、Story2、Stroy3、Story4、FeatureStory、Text设置样式为l像素描边（位置为内部）和白色颜色叠加；2、将文件存储为“12格式化区域一.ps

9、d”。效果如文件“12格式化区域一.psd”所示。十三、格式化区域二1、将图层ADs、Ad1、Ad2、Ad3、Ad4、Ad5、Ad6、Ad7、Ad8设置样式为l像素描边（位置为内部）和白色颜色叠加；2、修改图层Ads样式，将白色颜色叠加去掉，改为灰色渐变叠加；3、将文件存储为“13格式化区域二.psd”。效果如文件“13格式化区域二.psd”所示。十四、加入网页头部图片1、打开文件Header02.jpg；2、选择Header02.jpg文件的图片；复制到真正制作的网页文件的图层组“LeadStory”上面，建立新的图层“Header”，移动图层，顶部对齐；3、建立图层组“Header”，将图

10、层“Header”移动到该图层组中；4、将图层“Header”添加样式，去掉样式中的白色颜色叠加，使其与其他图层风格一致；5、将文件存储为“14加入网页头部图片.psd”。效果如文件“14加入网页头部图片.psd”所示。十五、加入尾部图片1、打开文件Header.psd；2、选择Header.psd文件右部的电缆图片；复制到真正制作的网页文件的图层组“Footer”上面，建立新的图层“cable”，移动图层，左边对齐，并剪切图层；3、设置图层“Footer”样式的黑白渐变叠加，角度为-90，透明度为50%；4、输入底部的文字并适当调整；5、将文件存储为“15加入尾部图片.psd”。效果如文件“

11、15加入尾部图片.psd”所示。十六、加入LeadStory图片1、打开文件Stuff.psd；2、选择图层“LeadStory”，在其上建立新的图层，取名为“Wheels”；3、切换到文件“Stuff.psd”，使用套索工具选取滚轮机器人，将其移动到“Wheels”图层中；4、使用Ctrl+T，调整机器人大小，并移动到相应位置，建立剪切图层，取消“LeadStory”图层的白色颜色叠加样式；5、修改“LeadStory”图层的颜色填充，颜色设为rgb（235，222，207）。6、将文件存储为“16加入LeadStory图片.psd”。效果如文件“16加入LeadStory图片.psd”所示

12、。十七、加入Story1图片1、打开文件Stuff.psd；2、选择图层“Story1”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Story1bg”；3、切换到文件“Stuff.psd”，选取橙色背景图片，使用矩形选区工具选择，将其移动到“Story1bg”图层中，并建立剪切图层；4、在图层“Story1bg”上建立新的图层，取名为“Robot1”；5、切换到文件“Stuff.psd”，使用套索工具选取较小的机器人，移动到图层“Robot1”中，调整大小方向，建立剪切图层；6、复制两个“Robot1”图层，取名为“Robot2”和“Robot3”，调整两个图层机器人的大小和方向；

13、7、将文件存储为“17加Story1图片.psd”。效果如文件“17加入Story1图片.psd”所示。十八、加入Story2图片1、打开文件Stuff.psd；2、选择图层“Story2”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Robot”；3、切换到文件“Stuff.psd”，使用套索工具选取受伤的机器人图片，将其移动到“Robot”图层中，并建立剪切图层；4、在图层“Robot”上使用前景色为白色的画笔工具，将两侧灰色的区域描白；5、将文件存储为“18加Story2图片.psd”。效果如文件“18加入Story2图片.psd”所示。十九、加入Story3图片1、打开文件S

14、tuff.psd；2、选择图层“Story3”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Cables”；3、切换到文件“Stuff.psd”，使用矩形选区工具选取捆绑的机器人图片，将其移动到“Cable”图层中，并建立剪切图层；4、将文件存储为“19加Story3图片.psd”。效果如文件“19加入Story3图片.psd”所示。二十、加入Story4图片1、打开文件Stuff.psd；2、选择图层“Story4”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Robot”；3、切换到文件“Stuff.psd”，使用套索工具选取带扳手的机器人图片，将其移动到新建的“Rob

15、ot”图层中，并建立剪切图层；4、在图层“Robot”下面新建一个图层取名为“BgGredient”，使用渐变填充，颜色为rgb（239,227,239）和rgb（137,170,217），并建立剪切图层；5、将文件存储为“20加入Story4图片.psd”。效果如文件“20加入Story4图片.psd”所示。二十一、加入FeatureStory图片1、打开文件Stuff.psd；2、选择图层“FeatureStory”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Scientist”；3、切换到文件“Stuff.psd”，使用套索工具选取科学家图片，将其移动到新建的“Scienti

16、st”图层中，并建立剪切图层；4、在图层“FeatureStory”选择图层区域，填充为白色；5、将文件存储为“21加入FeatureStory图片.psd”。效果如文件“21加入FeatureStory图片.psd”所示。二十二、加入标题文字1、选择图层组“LeadStory”中的“Text”图层，在该图层上建立文字图层，输入标题文字，调整大小和位置；2、运用同样方法建立其他各处的标题文字；3、将文件存储为“22加入标题文字.psd”。效果如文件“22加入标题文字.psd”所示。二十三、加入段落文字1、选择图层组“LeadStory”中的标题文字图层，在该图层上建立文字图层，输入段落文字，调

17、整大小和位置；2、运用同样方法建立其他各处的段落文字；3、将文件存储为“23加入段落文字.psd”。效果如文件“23加入段落文字.psd”所示。二十四、头部切片1、 选中“Header”图层，在“图层(L)”菜单选择“新建基于图层的切片(B)”命令建立切片；2、 用切片工具选中切片01，点击鼠标右键，选择“提升为用户切片”；3、 用切片工具选中切片01，点击鼠标右键，选择“划分切片”，将其划分为logo、banner和导航条图片等切片。4、将文件存储为“24头部切片.psd”。效果如文件“24头部切片.psd”所示。二十五、区域切片1、 同时选中“|LeadStory、Story1、Story

18、2、Story3、Story4、FeatureStory、ADs、Footer”图层，在“图层(L)”菜单选择“新建基于图层的切片(B)”命令建立切片；2、将文件存储为“25区域切片.psd”。效果如文件“25区域切片.psd”所示。二十六、区域切片细分1、 分别选中“LeadStory、Story1、Story2、Story3、Story4、FeatureStory、ADs、Footer”各个切片，提升为用户切片，然后分别使用切片工具划分为图片、标题文字、段落文字等三种不同切片；2、将文件存储为“26区域切片细分.psd”。效果如文件“26区域切片细分.psd”所示。二十七、设置Logo切片

19、属性1、 使用切片工具选择Logo切片，点击鼠标右键，选择“编辑切片”选项，设置相应项目，参考设置如下： 2、将文件存储为“27设置Logo切片属性.psd”。效果如文件“27设置Logo切片属性.psd”所示。二十八、设置其他用户切片属性1、 使用切片工具选择其他用户切片，点击鼠标右键，选择“编辑切片”选项，设置相应项目，主要设置有意义的切片名称；2、 设置完成后，将文件存储为“设置其他用户切片属性.psd”。效果如文件“设置其他用户切片属性.psd”所示。二十九、导出为表格布局页面1、 在“文件(F)”菜单下选择“存储为Web和设备所用格式(D)”命令；2、 选择对不同的切片根据需要设置不

20、同的图片属性；3、点击“存储按钮”；4、在“保存类型”中选择“HTML和图像(.html)”选项；5、在“切片”中选择“所有切片”；6、在“设置”中选择“其他”进入输出设置对话框： （1）选择“切片”选项； （2）点击“生成表格”单选按钮； （3）进行其他设置后单击“确定”按钮；7、点击“保存（S）”按钮完成导出。三十、导出为DIV+CSS布局页面1、 在“文件(F)”菜单下选择“存储为Web和设备所用格式(D)”命令；2、 选择对不同的切片根据需要设置不同的图片属性；3、点击“存储按钮”；4、在“保存类型”中选择“HTML和图像(.html)”选项；5、在“切片”中选择“所有切片”；6、在“设置”中选择“其他”进入输出设置对话框： （1）选择“切片”选项； （2）点击“生成CSS”单选按钮； （3）进行其他设置后单击“确定”按钮；7、点击“保存（S）”按钮完成导出。 三十一、页面后期处理1、 用Dreamweaver打开导出的页面；2、 删除文字站位图片；3、 添加实际文字；4、 文字编排处理；5、 网页其他处理；6、 完成制作。