《网站首页制作》PPT课件.ppt

《《网站首页制作》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网站首页制作商务网页设计子任务1：确定首页风格、色调及布局子任务2：设计首页页头区子任务3：设计首页主内容区子任务4：设计首页页尾区子任务5:生成首页效果图商务网页设计项目二任务1：首页设计商务网页设计1、观察色调及布局商务网页设计项目二2、首页的策划分析3、首页设计的最终效果图子任务1：确定首页风格、色调及布局要点商务网页设计商务网页设计项目二子任务1：确定首页风格、色调及布局风格色调布局简洁大气精细实用蓝色灰色红色白色商务网页设计商务网页设计项目二子任务1：确定首页风格、色调及布局商务网页设计商务网页设计项目二制作标志区和导航区（1）从【开始】︱【程序】中打开Photoshop软件新建

2、文档（快捷键：Ctrl+N），设置相应属。（提示：如果设计中画布的大小不合适，可以从菜单命令【图像】︱【画布大小】进行调节。）（2）保存文件（快捷键：Ctrl+S），这里保存到文件夹“商务网页设计与制作/源文件”中。（提示：一般在网站项目开发时需要将文件夹分类建好，源文件单独放在一起，方便以后查找编辑。例如这里存放源文件的文件夹“商务网页设计与制作”。）子任务2：设计首页页头区商务网页设计商务网页设计项目二（3）在【图层】面板中新建组，双击默认组名重命名为“top”；（提示：双击组名称，可在文字上双击，也可在文字旁边双击，这时会弹出图层组属性窗口，可选择组的颜色，以便区别于其他的组。）（4

3、）在【图层】面板中新建组，双击默认组名重命名为“导航栏”；（5）在【图层】面板，新建图层，双击默认图层名重命名为“导航栏背景”；4选择工具栏中的【矩形选框工具】，绘制1280*100px的选区。制作标志区和导航区子任务2：设计首页页头区商务网页设计商务网页设计项目二（6）改变前景色为#ebebeb。（提示：“#”后为十六进制的颜色值，每两位分别代表“R”“G”“B”的值。）（7）单击【文件】按钮，导入logo文件，右击图层，选择复制该图层，在弹出的“复制图层”窗口中选择需要复制到的目标文档为“index”文件。（8）选中logo图层，按“CTRL+T”键调整logo大小；打开标尺（快捷建：

4、Ctrl+R），按住鼠标左键，从标尺上拖出参考线。制作标志区和导航区子任务2：设计首页页头区商务网页设计商务网页设计项目二（9）制作导航，在工具栏中选择【文字工具】，输入文字“首页公司简介产品展示行业动态售后服务分销合作”然后确认。（10）在“窗口”中打开“字符”面板，在字符面板中更改文字属性（大小12PX、字体：宋体、颜色：黑色）（11）打开本书配套资源“项目资料库/素材”中的文件1.jpg（Ctrl+O）,使用工具栏中【移动工具】或者方向键移动红色条纹，使其紧贴左边缘和水平线。制作标志区和导航区子任务2：设计首页页头区商务网页设计商务网页设计项目二（12）制作导航，在工具栏中选择【文字

5、工具】，输入文字“首页公司简介产品展示行业动态售后服务分销合作”然后确认。（13）在“窗口”中打开“字符”面板，在字符面板中更改文字属性（大小12PX、字体：宋体、颜色：黑色。（14）打开本书配套资源“项目资料库/素材”中的文件1.jpg（Ctrl+O）,使用工具栏中【移动工具】或者方向键移动红色条纹，使其紧贴左边缘和水平线。制作标志区和导航区子任务2：设计首页页头区商务网页设计商务网页设计项目二导航区最终效果图子任务2：设计首页页头区商务网页设计商务网页设计项目二(15)在【图层】面板中新建组，双击默认组名，重命名为“banner”。(16)在【图层】面板，新建图层，双击默认图层名重命名

6、为“banner背景”选择工具栏中的【矩形选框工具】，绘制1280*185px的选区。(17)在【图层】面板中，【添加图层样式】，选择渐变叠加，渐变角度为0度，设置渐变颜色为#3271F0到#76A3FF。子任务3：设计首页主内容区商务网页设计商务网页设计项目二（18）单击【文件】按钮打开素材中图“pbdn.jpg”，在工具栏中选择【磁性套索工具】,设置羽化值0.5px。（19）按快捷键Ctrl+M,打开“曲线”面板，调节界面。（20）在工具栏中选择【文字工具】选择“横排文字工具”建立文字图层，在【窗口】中打开【字符】面板设置字体为宋体，字号为16px,并输入文字。子任务3：设计首页主内容

7、区商务网页设计商务网页设计项目二（21）创建文字图层，输入文字（开启劲爆“约惠”模式），在【字符】面板中调节“约惠”字体大小为60px，并设置颜色为#FAFD01。“其他字体”为36px并设置颜色为#FFFFFF。（22）在工具栏中选择【形状工具】中的矩形工具，绘制矩形并为其填充颜色。（23）选中形状图层，单击【图层】面板中的【添加图层蒙板】按钮为形状图层添加蒙版。子任务3：设计首页主内容区商务网页设计商务网页设计项目二