PS网页设计流程及操作指导.docx
《PS网页设计流程及操作指导.docx》由会员分享，可在线阅读，更多相关《PS网页设计流程及操作指导.docx（12页珍藏版）》请在冰豆网上搜索。
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、设置矩形选区框样式为“固定大小”，大小为660x320像素；
2、在“视图”菜单下将“对齐到（T）”设置为“参考线”或者“全部”；
3、在“背景”图层上新建图层，命名为“LeadStory”；
4、选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位；
5、将选区填充为灰色；
6、将文件存储为“02创建布局块之一LeadStory.psd”。
效果如文件“02创建布局块之一LeadStory.psd”所示。
三、创建布局块之二（Story1-4）
1、保持矩形选区框样式为“固定大小”，大小为325x260像素；
2、在图层“LeadStory”上建立一个图层，命名为“Story1”；
3、选中图层“Story1”，用矩形选区框工具建立一个选区，将选区移动到位；
4、将选区填充为灰色；
5、用同样方法建立相同大小的图层Story2、Story3、Story4；
6、将文件存储为“03创建布局块之二Story1-4.psd”。
效果如文件“03创建布局块之二Story1-4.psd”所示。
四、创建布局块之三（FeatureStory）
1、保持矩形选区框样式为“固定大小”，大小为320x260像素；
2、在图层“Story4”上建立一个图层，命名为“FeatureStory”；
3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位；
4、将选区填充为灰色；
5、将文件存储为“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像素；
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”所示。
八、创建广告区域布局块（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”。
效果如文件“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为参考图层，在上面分别建立一个“Text”图层，选区大小均为325x105像素，对齐到参考图层底部，填充为深灰色；
8、同样在图层“FeatureStory”为参考图层，在上面建立一个图层“Text”，选区大小为320x40像素，对齐到参考图层顶部，填充为深灰色；
9、将文件存储为“11建立文字区域Text.psd”。
效果如文件“11建立文字区域Text.psd”所示。
十二、格式化区域一
1、将图层LeadStory、Story1、Story2、Stroy3、Story4、FeatureStory、Text设置样式为l像素描边（位置为内部）和白色颜色叠加；
2、将文件存储为“12格式化区域一.psd”。
效果如文件“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”，将图层“Header”移动到该图层组中；
4、将图层“Header”添加样式，去掉样式中的白色颜色叠加，使其与其他图层风格一致；
5、将文件存储为“14加入网页头部图片.psd”。
效果如文件“14加入网页头部图片.psd”所示。
十五、加入尾部图片
1、打开文件Header.psd；
2、选择Header.psd文件右部的电缆图片；复制到真正制作的网页文件的图层组“Footer”上面，建立新的图层“cable”，移动图层，左边对齐，并剪切图层；
3、设置图层“Footer”样式的黑白渐变叠加，角度为-90，透明度为50%；
4、输入底部的文字并适当调整；
5、将文件存储为“15加入尾部图片.psd”。
效果如文件“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”所示。
十七、加入Story1图片
1、打开文件Stuff.psd；
2、选择图层“Story1”，取消其图层样式的颜色叠加，在其上建立新的图层，取名为“Story1bg”；
3、切换到文件“Stuff.psd”，选取橙色背景图片，使用矩形选区工具选择，将其移动到“Story1bg”图层中，并建立剪切图层；
4、在图层“Story1bg”上建立新的图层，取名为“Robot1”；
5、切换到文件“Stuff.psd”，使用套索工具选取较小的机器人，移动到图层“Robot1”中，调整大小方向，建立剪切图层；
6、复制两个“Robot1”图层，取名为“Robot2”和“Robot3”，调整两个图层机器人的大小和方向；
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、打开文件Stuff.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”，使用套索工具选取带扳手的机器人图片，将其移动到新建的“Robot”图层中，并建立剪切图层；
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”，使用套索工具选取科学家图片，将其移动到新建的“Scientist”图层中，并建立剪切图层；
4、在图层“FeatureStory”选择图层区域，填充为白色；
5、将文件存储为“21加入FeatureStory图片.psd”。
效果如文件“21加入FeatureStory图片.psd”所示。
二十二、加入标题文字
1、选择图层组“LeadStory”中的“Text”图层，在该图层上建立文字图层，输入标题文字，调整大小和位置；
2、运用同样方法建立其他各处的标题文字；
3、将文件存储为“22加入标题文字.psd”。
效果如文件“22加入标题文字.psd”所示。
二十三、加入段落文字
1、选择图层组“LeadStory”中的标题文字图层，在该图层上建立文字图层，输入段落文字，调整大小和位置；
2、运用同样方法建立其他各处的段落文字；
3、将文件存储为“23加入段落文字.psd”。
效果如文件“23加入段落文字.psd”所示。
二十四、头部切片
1、选中“Header”图层，在“图层（L）”菜单选择“新建基于图层的切片（B）”命令建立切片；
2、用切片工具选中切片01，点击鼠标右键，选择“提升为用户切片”；
3、用切片工具选中切片01，点击鼠标右键，选择“划分切片”，将其划分为logo、banner和导航条图片等切片。
4、将文件存储为“24头部切片.psd”。
效果如文件“24头部切片.psd”所示。
二十五、区域切片
1、同时选中“|LeadStory、Story1、Story2、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切片属性
1、使用切片工具选择Logo切片，点击鼠标右键，选择“编辑切片”选项，设置相应项目，参考设置如下：
2、将文件存储为“27设置Logo切片属性.psd”。
效果如文件“27设置Logo切片属性.psd”所示。
二十八、设置其他用户切片属性
1、使用切片工具选择其他用户切片，点击鼠标右键，选择“编辑切片”选项，设置相应项目，主要设置有意义的切片名称；
2、设置完成后，将文件存储为“设置其他用户切片属性.psd”。
效果如文件“设置其他用户切片属性.psd”所示。
二十九、导出为表格布局页面
1、在“文件（F）”菜单下选择“存储为Web和设备所用格式（D）”命令；
2、选择对不同的切片根据需要设置不同的图片属性；
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、完成制作。
升级会员 