PS网页设计流程及操作指导.docx
《PS网页设计流程及操作指导.docx》由会员分享,可在线阅读,更多相关《PS网页设计流程及操作指导.docx(12页珍藏版)》请在冰豆网上搜索。
![PS网页设计流程及操作指导.docx](https://file1.bdocx.com/fileroot1/2023-1/22/82f8fab3-d1ea-488f-a6ee-64cc18450fbb/82f8fab3-d1ea-488f-a6ee-64cc18450fbb1.gif)
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、完成制作。