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

  PS网页策画流程及操作指挥_揣度机软件及使用_IT/揣度机_专业材料。本文首要先容用PS软件筑造网页,内部有周详的办法,生机对你有所帮帮

  本文由耐霸切割机收拾上传 Photoshop 网页策画案例教学网页框图 本文由耐霸切割机收拾上传 Photoshop 网页策画案例教学周详操作办法: 一、创筑文献及结构参考线 像素,RGB 形式,白色靠山,如图所示: 2、 成立结构参考线 像素; (2) 纵向 2 对参考线 创筑文献及结构参考线.psd” 。 成就如文献“01 创筑文献及结构参考线.psd”所示。 二、创筑结构块之一(LeadStory) 1、 成立矩形选区框样式为“固定巨细” ,巨细为 660x320 像素; 2、 正在“视图”菜单下将“对齐到(T)”成立为“参考线、 正在“靠山”图层上新筑图层,定名为“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”所示。 七、征战告白区域结构参考线、消除参考线、成立告白区域结构参考线 对参考线 征战告白区域结构参考线.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、消除参考线、遵照网页页面从上到下的规律对图层实行排序,使之相符风俗: 排序前 排序后 3、将文献存储为“09 图层排序.psd” 。 本文由耐霸切割机收拾上传 成就如文献“09 图层排序.psd”所示。 十、图层分组 1、将图层按块征战分组如下图所示: 2、将文献存储为“10 图层分组.psd” 。 成就如文献“10 图层分组.psd”所示。 十一、征战文字区域(Text) 1、裁切 Footer 图层以下多余的画布; 2 成立矩形选区框样式为“固定巨细” ,巨细为 660x105 像素; 3、正在“视图”菜单下将“对齐到(T)”成立为“参考线、正在“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、正在“成立”当选择“其他”进入输出成立对线)选拔“切片”选项; (2)点击“天生表格”单选按钮; (3)实行其他成立后单击“确定”按钮; 7、点击“生存(S) ”按钮告终导出。 三十、导出为 DIV+CSS 结构页面 本文由耐霸切割机收拾上传 1、 正在“文献(F)”菜单下选拔“存储为 Web 和筑立所用式子(D)”下令; 2、 选拔对差别的切片依据需求成立差别的图片属性; 3、点击“存储按钮” ; 4、正在“生存类型”当选择“HTML 和图像(.html)”选项; 5、正在“切片”当选择“全盘切片” ; 6、正在“成立”当选择“其他”进入输出成立对线)选拔“切片”选项; (2)点击“天生 CSS”单选按钮; (3)实行其他成立后单击“确定”按钮; 7、点击“生存(S) ”按钮告终导出。 三十一、页面后期经管 1、 用 Dreamweaver 打引导出的页面; 2、 删除文字站位图片; 3、 增加现实文字; 4、 文字编排经管; 5、 网页其他经管; 6、 告终筑造。