《网站首页制作》PPT课件.ppt
,网站首页制作,商务网页设计,子任务1：确定首页风格、色调及布局子任务2：设计首页页头区子任务3：设计首页主内容区子任务4：设计首页页尾区子任务5:生成首页效果图,商务网页设计 项目二,任务 1：首页设计,商务网页设计,1、观察色调及布局,商务网页设计 项目二,2、首页的策划分析,3、首页设计的最终效果图,子任务1：确定首页风格、色调及布局,要点,商务网页设计,商务网页设计 项目二,子任务1：确定首页风格、色调及布局,风格,色调,布局,简洁,大气,精细,实用,蓝色,灰色,红色,白色,商务网页设计,商务网页设计 项目二,子任务1：确定首页风格、色调及布局,商务网页设计,商务网页设计 项目二,制作标志区和导航区,（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：设计首页页头区,商务网页设计,商务网页设计 项目二,导航区最终效果图,子任务2：设计首页页头区,商务网页设计,商务网页设计 项目二,(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：设计首页主内容区,商务网页设计,商务网页设计 项目二,子任务3：设计首页主内容区,Banner效果图,商务网页设计,商务网页设计 项目二,（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。,子任务3：设计首页主内容区,商务网页设计,商务网页设计 项目二,（55）：复制“价格图层”移动到相应的位置。新建文字图层，并在相应位置输入以下文字，设置字体为宋体、加粗、12.03px，颜色为白色。（56）：在【图层】面板中新建组，重命名为“次导航”，如图2-49所示。（57）：新建文字图层，在【字符】面板中设置字体为宋体，14px,颜色为#1C8CBA。输入“次导航”文字“+返回首页+添加收藏+友情链接+联系我们”。,子任务4：设计首页页尾区,商务网页设计,商务网页设计 项目二,（58）：新建图层，使用选框工具画出“1280px*100px”的选框，填充为“#b2adad”色；新建文字图层，在“字符”面板中设置字体为宋体，12px、颜色为黑色，输入以下文字信息。（59）：存储文件为Web所有格式，快捷键为Ctrl+Alt+Shift+S，在弹出的对话框中悬着优化的文件格式“JPEG”，压缩品质为“最佳”，存储在源文件文件夹中，命名为“index.jpg”。,子任务5：生成首页效果图,商务网页设计,商务网页设计 项目二,子任务5：生成首页效果图,
