商务网站建设的前台设计.doc
《商务网站建设的前台设计.doc》由会员分享,可在线阅读,更多相关《商务网站建设的前台设计.doc(84页珍藏版)》请在三一文库上搜索。
1、前台开发意杨1 商务网站前台开发跟踪项目环节一【教学目标】终极目标:能熟练设计商务网页页面效果图促成目标: l 能熟练操作Photoshop软件并了解其它相关软件的使用l 能进行合理的页面设计规划l 能初步掌握商务沟通的方法与技巧【项目概述】 小张在完成了朗声科贸商务网页策划后,接下来应该依据策划结果,设计该网站首页和子页,为后续网页制作工作做好准备。【项目分析】1、通过网站策划可得到哪些有价值的信息?完成了朗声科贸商务网站策划书后,我们得到这样一些有价值的内容,一是对朗声科贸的所属行业,网页的风格、色调、布局等作了分析及规划,生成了朗声科贸商务网页设计与制作指导文案,二是勾画出了该网站的首页
2、及子页设计草图,三是建立了网页设计与制作所需的项目资料库,这些都为项目二的工作做好了铺垫准备。2、设计商务网站页面效果图需要什么工具?一般企业电子商务应用服务商的技术人员在设计商务网站页面效果图时大都使用Photoshop图像处理软件设计,需要熟练灵活地使用Photoshop软件中的各个设计工具对设计效果进行准确把握,此外,还有许多其它的图形图像处理软件作为辅助,希望大家能多了解、多接触、灵活使用。3、首页设计和子页设计有何异同?一般的商务网站各个页面之间都保持着统一性,整体性,和谐型。首页的风格、色调、布局等确定后,子页也会和其保持和谐统一。因此一般在对首页进行良好设计后,可复制首页设计源文
3、件,再根据子页的策划思想对子页页面进行局部重新设计以形成新的子页设计效果,这种思路要细细地体会和学习。【任务分解】为了完成这一项目,可以把它分解为以下几个任务和子任务。 任务 1:朗声科贸网站首页设计子任务1:确定首页风格、色调、布局子任务2:设计首页页头区子任务3:设计首页主内容区子任务4:设计首页页尾区补充标准区子任务5:生成网页首页效果图任务 2:客户沟通、优化、定案子任务1:给客户演示首页效果图子任务2:整理沟通客户建议子任务3:优化并定案首页面效果图任务 3:子页设计子任务1:子页设计规划子任务2:设计子页页头区子任务3:设计子页主内容区子任务4:设计子页页尾区子任务5:生成子页效果
4、图下面,将分别对这些任务的目标进行确认,并对任务的实施给予理论与实际操作的指导。【学习目标】 在完成任务的过程中思考、体会、学习本书中的“注”、“提示”、“隐性知识”、“提问”、“知识点” 在本书的指导下能独自完成其他子页面的设计 学会自己分析问题,充分学会举一反三目 录任务 1:朗声科贸网站首页设计3子任务1:确定网站的风格、主色调、辅色调4子任务2:设计首页页头区效果4子任务3:设计首页主内容区效果47子任务4:设计首页页尾区效果81补充标志区83子任务5:生成网页首页效果图84任务 2:客户沟通、优化、定案84子任务1:给客户演示首页效果图、讲解网页设计思路;84子任务2:整理、沟通客户
5、所提建议84子任务3:优化、并最终确定首页面效果图84任务3:朗声科贸网站子页设计(产品展示子页面)85子任务1:根据首页设计确定子页的设计85子任务2:设计子页也头区85子任务3:设计子页主内容区85子任务4:设计并制作子页页尾区91子任务5:生成子页效果图9184任务1 首页设计任务完成为完成本任务,需要做一下几项工作。子任务1:确定首页风格、色调、布局步骤1:打开光盘“流程图片/项目二 流程图片”文件夹中的2-1.jpg,如图2-1所示。图2-1(提示:图2-1即是我们最后首页设计的效果图,同时结合在项目一对首页的策划分析,我们可从首页页头区,内容区,页尾区逐步完成设计,如图2-2所示。
6、)(注:有些个性网页页头区,内容区,页尾区是在一起相互融合的,并不能完全清楚的独立开设计,这要视其情况而定。)图2-2步骤2:依据项目一中网页策划及所生成的指导文案可确定首页风格、色调、布局。首页风格即精细、简洁、大气、实用、有现代企业化气息、简体中文版,主要适应1024*768分辨率。主色调为蓝、灰、红,辅色调为白。(提示:在勾画中的设计草图中确定了首页的布局,在设计的时候注意应用。)子任务2:设计首页页头区A、标志区,导航区步骤1:从【开始】/【程序】中打开Photoshop软件,如图2-3所示。图2-3步骤2:关闭如图2-4所示欢迎窗口。图2-4步骤3:新建文档(快捷键:Ctrl+N),
7、设置完属性后单击【好】按钮,属性设置如图2-5所示。(提示:本书中首次提及的快捷键会注明,后面则直接使用。)(注:像素英文缩写为px,后面直接用px。)(隐性知识:如果在以后的设计中画布大小不合适,可以从菜单栏的【图像】/【画布大小】进行调节。)(知识要点: 像素 分辨率)图2-5步骤4:实际像素查看文档(快捷键:Ctrl+Alt+0),在图层面板中新建组,双击默认组名重命名为“top”,如图2-6,2-7所示。(注:双击组名称,可在文字上双击,也可在文字旁边双击,这时会弹出图层组属性窗口,可选择各式颜色,以便区别各组。)(知识要点:实际像素 画布大小 图层 组) 图2-6 图2-7步骤5:新
8、建图层(快捷键:Ctrl+Alt+Shift+N),并重命名为“logo导航背景”,如图2-8所示。(提示:重命名图层时,切记在默认的名称上双击,否则会弹出图层样式窗口。)(注:图层logo导航背景在组top中,即闭合组top前的小箭头,此图层跟随闭合。比喻解释:组就相当于文件夹,组内的图层就相当于文件夹中的文件,分组的优点同分文件夹一样。)(隐性知识:打开图层样式的方法是在图层面板的图层名称旁边双击,或通过菜单栏【图层】/【图层样式】中打开,后面会应用到。)(知识要点:图层样式 )图2-8步骤6:保存文件(快捷键:Ctrl+S),这里保存到文件夹“商务网页设计与制作/源文件”中,如图2-9所
9、示。(注:一般在项目开发时需要将文件包分类建好,源文件单独放在一起,方便以后查找编辑。例如这里存放源文件的文件包“商务网页设计与制作”。)图2-9步骤7:选择工具栏中的【矩形选框工具】,绘制1003*225px的选区,如图2-10,2-11所示。(隐性知识:绘制选区的方法一般有:1、选择选框工具2、选择套索工具3、选择魔棒工具 4、形状工具 5、路径转换为选区等。)(知识要点:选区 矩形选框工具 选框工具 套索工具 魔棒工具 路径)图2-10图2-11步骤8:打开标尺(快捷建:Ctrl+R),使用键盘的上下键移动选区到合适位置,即距上1厘米,如图2-12所示。(隐性知识:隐藏或显示标尺的快捷键
10、是Ctrl+R。)(知识要点:标尺) 图2-12步骤9:改变前景色为:#F4F4F4,背景色为:#C3C3C3,如图2-13,2-14所示。(注:“#”后为16进制的颜色值,每两位分别代表“R”“G”“B”。)(知识要点:前景色 背景色)图2-13图2-14步骤10:选择工具栏中的【渐变工具】,在属性栏中选择对称渐变,按住Shift键,从上至下拖拽,如图2-15,2-16所示,去掉选区(快捷键:Ctrl+D)。(提示:这里拖拽的时候注意图示中的起始位置和终止位置,以及属性栏中的“反向”选择。)(注:1、按住Shift键,拖拽时只能定位在45度角度倍数的方向上,这里按住Shift键方便做垂直方向
11、上的渐变。2、渐变效果与拖拽出的线段起始位置、结束位置、方向以及长短都有关系。)(知识要点:渐变 渐变工具 对称渐变)图2-15图2-16步骤11: 新建图层,重命名为“红线”, 在工具栏中的选择【直线工具】,按住Shift键,从最左端拖拽至最右端,如图2-17,2-18,2-19,2-20所示。(提示:新建的图层“红线”依旧属于组“top”)(注:作图时一定要细致,例如这里的细线是和文件的最左右端紧贴的,不容差1px。)(隐性知识:使用直线工具时,如果只想得到选区,切记选择属性面板中的路径图标,如图2-19所示,后面提及的其他绘制路径工具同理。)(知识要点:路径) 图2-17 图2-18图2
12、-19图2-20步骤12:将路径转换为选区(快捷键:Ctrl+Enter),改前景色为#B90101,填充前景色(快捷键:Alt+Delete),Ctrl+D去掉选区,并使用键盘的上下左右键移动红线至合适位置,最终效果如图2-21所示。(隐性知识:Photoshop中除了用油漆桶填充颜色外,可以很简单的先改变前景色或者背景色,然后使用快捷键填充颜色,填充前景色:Alt+Delete, 填充背景色:Ctrl+Delete。)图2-21步骤13:在此本应制作标志,但标志是一个重要的设计环节,为了思绪的完整性,可以放在最后边单独重点设计。分别拖拽垂直、水平参考线以帮助设计其他版区。将鼠标移至左、上标
13、尺,往外拖拽然后释放鼠标即可得到参考线,如图2-22,2-23,2-24所示。(注:鼠标放至左标尺上往外拖拽可得垂直参考线,放至上标尺上往外拖拽可得水平参考线。)(知识要点:参考线)图2-22图2-23图2-24步骤14:制作导航,在工具栏中选择【文本工具】,输入文字“首 页 公司简介 产品展示 行业动态 售后服务 分销合作”,然后确认,在字符段落窗口中调节文字属性,如图2-25,2-26,2-27所示,可以使用移动工具将文本移至合如图2-26所示合适位置。(提示:输入文本的方法一般分为两种,1、选择【文本工具】后,在画布上拖拽出区域,然后输入。2、直接在画布中单击然后直接输入文本。本书说的输
14、入文本是指第二种方法。)(注:Photoshop中对很多动作的确认都可以是回车确认,但是对于文本确认却不能回车,因为文本会默认为换行,所以一般有两种方法,1、切换到其他工具。2、在属性栏中选择对勾。)(隐性知识:输入导航文字时注意文字是在一个图层中,即是一气呵成输入的,中间的间距是用空格控制的,其他类似情况也是。如果必要才会一个文本项建立一个图层。)(知识要点:字符段落面板) 图2-25图2-26 图2-27步骤15:打开光盘“项目资料库/素材”中的1.jpg(快捷键:Ctrl+O),向下还原窗口,以便可以观察到其他正在编辑的窗口,如图2-28,2-29所示。图2-28图2-29步骤16:在工
15、具栏中选择【移动工具】,把1.jpg窗口中的内容拖拽到index的编辑窗口中,如图2-30,2-31所示。(知识要点:移动工具)图2-30图2-31步骤17: 使用在工具栏中的【移动工具】或者键盘的上下左右移动键移动红色条纹紧贴左边和水平线,如图2-32所示。图2-32步骤18:当拖动外部窗口的内容到编辑窗口时,系统会默认新建图层,重命名图层为“红色条纹”, 如图2-33,2-34所示。 图2-33 图2-34步骤19:使用变形复制方法复制多个红色条纹,方法如下:(1)在红色条纹右边缘加垂直参考线,如图2-35所示。按住Ctrl键,在图层缩览图窗口上单击左键,这时即选择住了红色条纹图层中的内容
16、,如图2-36,2-37所示。(2)Ctrl+Alt+T,使用键盘的向右键移动红色条纹至左边紧贴参考线,回车确认变形,如图2-38,2-39,2-40所示。(3)按住Ctrl+Alt+Shift不放开,连续多次按T,如图2-41所示。(4)Ctrl+D去掉选区,选择矩形选框工具,如图2-42,做如图2-43所示选区,按Delete删除多余的红色条纹,效果如图2-44所示,Ctrl+D去掉选区。(提示:变形复制出的红色条纹在一个图层中)(注:变形复制法是设计中很实用方便的方法,在做带有规律性图形变换上很方便,本书后面会多次用到。)(提问:如果去掉第(1)步骤,会是什么结果?)(知识要点:图层缩览
17、图窗口 ) 图2-35 图2-36 图2-37 图2-38 图2-39 图2-40图2-41图2-42图2-43图2-44步骤20:新建图层并重命名为“蓝色渐变条纹”,如图2-45所示,在工具栏中选择【矩形选框工具】,做如图2-46所示选区。图2-45图2-46步骤21:改变前景色为:#FFFFFF,背景色为:#B9DBEB,在工具栏中选择【渐变工具】,选择线性渐变,按住Shift键,从左至右拖拽,如图2-47所示,(方法类似9,10步骤中制作logo导航背景),Ctrl+D去掉选区。(知识要点:线性渐变)图2-47步骤22:在工具栏中选择【圆角矩形工具】,绘制半径为5,紧贴右边垂直参考线的圆
18、角矩形,如图2-48,2-49所示。图2-48图2-49步骤23:Ctrl+Enter将路径转化为选区,反选(快捷键:Ctrl+Shift+I),Delete删除蓝色渐变条纹多余的角,如图2-50所示。(注:这里读者也许不太了解,删除了什么东西,注意一下,前边我们做的蓝色渐变条纹是直角的,这里用圆角矩形把蓝色渐变条纹的右下角改变成了圆角。)(知识要点:反选)图2-5步骤24:新建“细线1”图层,在菜单栏中选择【编辑】/【描边】,Ctrl+D去掉选区,隐藏参考线(快捷键:Ctrl+H),观察效果,如图2-51,2-52,2-53,2-54所示。(隐性知识:Ctrl+H可再次显示参考线。) 图2-
19、51 图2-52图2-53图2-54步骤25:在工具栏中选择【矩形选框工具】选择需要留下的线条部分,如图2-55所示。然后Ctrl+Shift+I反选,Delete删除多余部分,去掉选区,隐藏参考线,如图2-56所示。图2-55图2-56步骤26:给细线1图层添加蒙版,如图2-57所示,确认前景色背景色为黑白,在工具栏中选择【渐变工具】,确认渐变为黑白的线性渐变,如图2-58所示,按住Shift键从下至上拖拽,如图2-59所示,效果如图2-60所示。(隐性知识:做渐变时如果做出的效果如果方向相反,最简单解决方法有两种,1、改变拖拽方向。2、改变属性栏中的“反向”状态。)(知识要点:蒙版 反向)
20、 图2-57 图2-58图2-59图2-60步骤27:新建图层“细线2”,同步骤11方法一样,制作颜色为#AFAFAF的细线,并放至合适位置,如图2-61,2-62所示。 图2-61图2-62B、 主宣传广告步骤1:单击top组前的灰三角,闭合top组,新建组“主广告”,并新建图层“背景”,如图2-63所示。图2-63步骤2:添加紧贴灰色渐变的水平参考线,如图2-64,在工具栏中选择【矩形选框工具】绘制如图2-65所示选区。(注:选区紧贴参考线,最左边也紧贴边缘。)图2-64图2-65步骤3:做颜色#004B68到#00DEF3的线性渐变,完成后Ctrl+D去掉选区,如图2-66,2-67所示
21、。(提示:水平拖拽做出此渐变。) 图2-66图2-67步骤4:打开素材文件夹中的2.jpg图片,使用钢笔抠图,方法如下:(1)在工具栏中选择【钢笔工具】,并调节好相应属性,如图2-68所示。(2)放大图片(快捷键:Ctrl+Alt+=)到合适大小,本图放大到300%就可以,按住空格键,按住鼠标左键拖动屏幕到合适位置,如图2-69所示。(3)使用钢笔围绕MP3边缘处点多个锚点,最后一锚点和起始的重合,即建立闭合路径,如图2-70,2-71所示。(4)在工具栏中选择【转换点工具】,在其中一锚点上单击,当锚点变为实心即可,在实心锚点上拖拽出两手柄,拖动调节手柄使路径更贴近MP3边缘,也可调节单个手柄
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商务 网站 建设 前台 设计
链接地址:https://www.31doc.com/p-5019983.html