3 网站首页制作

作者:admin 发布时间:2019-12-06 点击率:89次

  3 网站首页制作_互联网_IT/计算机_专业资料。网站首页制作 商务网页 设计 商务网页设计 项目二 任务 1:首页设计 子任务1:确定首页风格、色调及布局 子任务2:设计首页页头区 子任务3:设计首页主内容区 子任务4:设计首页页尾区 子任务

  网站首页制作 商务网页 设计 商务网页设计 项目二 任务 1:首页设计 子任务1:确定首页风格、色调及布局 子任务2:设计首页页头区 子任务3:设计首页主内容区 子任务4:设计首页页尾区 子任务5: 生成首页效果图 商务网页 设计 子任务1:确定首页风格、色调及布局 要点 1、观察色调及布局 2、首页的策划分析 3、首页设计的最终效果图 商务网页设计 项目二 商务网页 设计 子任务1:确定首页风格、色调及布局 风格 色调 简洁 灰色 精细 大气 布局 蓝色 实用 白色 红色 商务网页设计 项目二 商务网页 设计 子任务1:确定首页风格、色调及布局 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 制作标志区和导航区 (1)从【开始】︱【程序】中打开Photoshop软件新建文档(快捷键: Ctrl+N),设置相应属。 (提示:如果设计中画布的大小不合适,可以从菜单命令【图像】︱【画布大小】 进行调节。) (2)保存文件(快捷键:Ctrl+S),这里保存到文件夹“商务网页设计与制作/ 源文件”中。 (提示:一般在网站项目开发时需要将文件夹分类建好,源文件单独放在一起, 方便以后查找编辑。例如这里存放源文件的文件夹“商务网页设计与制作”。) 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 制作标志区和导航区 (3)在【图层】面板中新建组,双击默认组名重命名为“top”; (提示:双击组名称,可在文字上双击,也可在文字旁边双击,这时会弹出图层 组属性窗口,可选择组的颜色,以便区别于其他的组。) (4)在【图层】面板中新建组,双击默认组名重命名为“导航栏”; (5)在【图层】面板,新建图层,双击默认图层名重命名为“导航栏背景”; 4选择工具栏中的【矩形选框工具】,绘制1280*100px的选区。 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 制作标志区和导航区 (6)改变前景色为#ebebeb。 (提示:“#”后为十六进制的颜色值,每两位分别代表“R”“G”“B”的 值。) (7)单击【文件】按钮,导入logo文件,右击图层,选择复制该图层,在弹 出的“复制图层”窗口中选择需要复制到的目标文档为“index”文件。 (8)选中logo图层,按“CTRL+T”键调整logo大小;打开标尺(快捷建: Ctrl+R),按住鼠标左键,从标尺上拖出参考线。 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 制作标志区和导航区 (9)制作导航,在工具栏中选择【文字工具】,输入文字“首页 公司简介 产 品展示 行业动态 售后服务 分销合作”然后确认。 (10)在“窗口”中打开“字符”面板,在字符面板中更改文字属性(大小 12PX、字体:宋体、颜色:黑色) (11)打开本书配套资源“项目资料库/素材”中的文件1.jpg(Ctrl+O),使用 工具栏中【移动工具】或者方向键移动红色条纹,使其紧贴左边缘和水平线。 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 制作标志区和导航区 (12)制作导航,在工具栏中选择【文字工具】,输入文字“首页 公司简介 产品展示 行业动态 售后服务 分销合作”然后确认。 (13)在“窗口”中打开“字符”面板,在字符面板中更改文字属性(大小 12PX、字体:宋体、颜色:黑色。 (14)打开本书配套资源“项目资料库/素材”中的文件1.jpg(Ctrl+O),使 用工具栏中【移动工具】或者方向键移动红色条纹,使其紧贴左边缘和水平线。 商务网页设计 项目二 商务网页 设计 子任务2:设计首页页头区 导航区最终效果图 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (15)在【图层】面板中新建组,双击默认组名,重命名为“banner”。 (16)在【图层】面板,新建图层,双击默认图层名重命名为“banner背 景” 选择工具栏中的【矩形选框工具】,绘制1280*185px的选区。 (17)在【图层】面板中,【添加图层样式】,选择渐变叠加,渐变角度 为0度,设置渐变颜色为#3271F0到#76A3FF。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (18)单击【文件】按钮打开素材中图“pbdn.jpg”,在工具栏中 选择【磁性套索工具】,设置羽化值0.5px。 (19)按快捷键Ctrl+M,打开“曲线”面板,调节界面。 (20) 在工具栏中选择【文字工具】选择“横排文字工具”建立文 字图层,在【窗口】中打开【字符】面板设置字体为宋体,字号为 16px,并输入文字。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (21)创建文字图层,输入文字(开启劲爆“约惠”模式),在【字符】面 板中调节“约惠”字体大小为60px,并设置颜色为#FAFD01。“其他字体” 为36px并设置颜色为#FFFFFF。 (22)在工具栏中选择【形状工具】中的矩形工具,绘制矩形并为其填充颜 色。(23)选中形状图层,单击【图层】面板中的【添加图层蒙板】按钮为 形状图层添加蒙版。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (24)选中蒙版图层,利用多边形套索选出要被隐藏遮盖的区域,调节前景色为 黑色,按Alt+Delete填充。 (25)复制“小白条”图层,移动到矩形右侧。 (26)新建字体图层,输入文字(百大品牌齐聚惠,好货等抢),双击字体图层, 选中要改变大小的字体,设置为宋体,黑色、16px。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (27)在【形状选择工具】中选择圆角矩形工具,在形状属性工具栏中设置颜色 为#B1ABAB、半径为30px。 (28)新建文字图层,在【字符】面板中设置颜色为EFOE19,字体为宋体, 14px、颜色为ff0000,选中将形状图层和文字图层右击鼠标悬着“合并图层”,方 便移动。 (29)打开本书配套资源“项目资料库/素材“white.png”、“rad.png”、 “gray.png”文件。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (30)选中图层“gray”,打开【图层样式】面板,在【投影】面板中设置 投影角度为160度,距离为10px、大小为5px。 (31)选中“giay”图层右击,选择拷贝图层样式。 (32)选中图层“white”、“rad”,右击选择,粘贴图层样式。 (33)调整图层位置和图层顺序。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 商务网页设计 项目二 Banner效果图 商务网页 设计 子任务3:设计首页主内容区 (34)在菜单栏中选择【矩形选框】,新建图层,绘制矩形选区。选中图层, 单击添加图层样式,打开图层样式面板,选择渐变叠加,设置渐变属性值。 (35)在【图层】面板中,单击新建组按钮,双击组名,重命名为“产品类 别”。 (36)在【图层】面板中新建图层,双击默认图层名称,重命名为红色小横 条。 (37)在菜单面板中选择【矩形工具】,绘制矩形选区。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (36)在工具栏中,选择前景色,将前景色改为#EA1227,按“Alt+Delete” 键填 充颜色。 (37)复制“红色小横条”图层,重命名为“灰色小横条”填充色为“b5afaf”。 (38)按Ctrl+T调节图层大小。 (39)在工具栏中选择【文字工具】中的横排文字工具,新建文字图层,设置文字 宋体、填充颜色为#000000、字符大小为18px、加粗。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (40)打开素材文件夹中的“3.png”。将“3.png”图层重命名为“项目符 号”,并将其复制移动至相应的位置。 (41)打开素材文件中的“4.jpg”文件,将其移动到相应的位置。 (42)新建图层,用选框工区画出1280px*715px的选区,并将其颜色填充为 “#ebebeb” ,绘制虚线在图层面板中新建图层,重命名为“虚线”,在工具栏 中选择画笔工具。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (43)在【画笔】面板中,设置形状为圆点、像素大小为3px、颜色为 “b8b2b2”、间距为200px,如图所示。 (44)在【图层】面板中,选中“虚线”的图层。按住鼠标左键,拖动到新建图 层按钮上,进行图层复制。 (45)新建文字图层,输入下面文字在【字符】属性面板中,设置文字属性为 宋体、黑色和#686565、12px。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (46)在【画笔】面板中,设置形状为圆点、像素大小为3px、颜色为 “b8b2b2”、间距为200px (47)在【图层】面板中,选中“虚线”的图层。按住鼠标左键,拖动到新 建图层按钮上,进行图层复制。 (48)新建文字图层,输入下面文字在【字符】属性面板中,设置文字属性 为宋体、黑色和#686565、12px。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (49)在【图层】面板中新建组,双击重命名组为“站内公告” 。 (50)打开“素材”文件夹中的“6.png”文件,并复制图层移动到相应的 位置。 步骤66:新建文字图层“站内公告”在图层面板中设置文字属性,字体为 宋体、14px、加粗、#ffffff。 (51)复制组“产品分类”中的“虚线”调整大小,并移动到相应的位置。 复制组“产品分类”中的“项目符号”图层,并移动到相应的位置。复制组 “产品分类”中“虚线”图层,并移动到相应的位置。 商务网页设计 项目二 商务网页 设计 子任务3:设计首页主内容区 (52)打开“素材”文件中“7.jpg”文件,并将其移动到相应的位置。 (53)新建文字图层,输入以下文字,在字符面板中设置文字属性为字体宋 体、12px、#191717。 复制组“站内公告”,将其移动到相应的位置,更改组名为“行业动态”。 (54)新建文字图层,输入以下文字,在字符面板中设置位置属性为字体宋 体、12px、#bcbbbb。 商务网页设计 项目二 商务网页 设计 子任务4:设计首页页尾区 (55):复制“价格图层”移动到相应的位置。新建文字图层,并在相应位 置输入以下文字,设置字体为宋体、加粗、12.03px,颜色为白色。 (56):在【图层】面板中新建组,重命名为 “次导航”,如图2-49所示。 (57):新建文字图层,在【字符】面板中设置字体为宋体,14px,颜色为 #1C8CBA。输入“次导航”文字“+返回首页 +添加收藏 +友情链接 +联 系我们” 。 商务网页设计 项目二 商务网页 设计 子任务5:生成首页效果图 (58):新建图层,使用选框工具画出“1280px*100px”的选框,填充为 “#b2adad”色;新建文字图层,在“字符”面板中设置字体为宋体,12px、 颜色为黑色,输入以下文字信息。 (59):存储文件为Web所有格式,快捷键为Ctrl+Alt+Shift+S,在弹出的 对话框中悬着优化的文件格式“JPEG”,压缩品质为“最佳”,存储在源文 件文件夹中,命名为“index.jpg”。 商务网页设计 项目二 商务网页 设计 子任务5:生成首页效果图 商务网页设计 项目二

澳门堵场网址@版权所有

粤ICP备11036291号-1

手机版>>