2018铜陵电大专科形考任务5、Photoshop与网页设计 - 图文

Photoshop与网页设计

1. 题目

利用Photoshop 设计制作网站界面设计稿。

2. 目的

通过使用Photoshop 软件制作网页设计稿，熟练掌握Photoshop软件网页布局、绘制网页元素的方法和技巧，使学生能够综合运用课程中所学设计原理及软件操作技巧来设计制作具有较好审美水平的网站设计稿。

3. 内容与要求

综合运用Photoshop 工具创建网页设计稿。教师指导6学时，学生课后搜集优秀网页做参照，自主选择页面主题制作网页。上机操作练习32学时以上。

实训指导

一、 绘制全站页头和页脚

首先，用模块化的思想来设计网站，原因在于这种模块化的设计不仅带来设计上的统一感，也带来了网页前端制作的便利性。设定案例网站中的所有页面都可以分解为页面头部、页脚以及页面主体三个部分。其中页面头部和页脚是全站固定不变的。

1. 绘制网站背景

Step1：启动Photoshop，新建一个文档，设置文档宽度为1000px，高度为3500px，分辨率：72dpi，其他按默认值即可，保存为“课程网站首页.psd”，如图

Step2：选择【矩形工具】，在画布上绘制一个矩形形状，填充颜色为“#f5f5f7”，无描边，调整矩形大小与页面同宽同高，即宽度为1000px，高度为3500px，这样网站背景为浅灰色，将图层名称改为“网站背景”，如图

2. 绘制头部

网站头部登录注册前如图7-25 所示，登录后出现四个图标如图

新建“网站头部”组，组内新建“登录后四个图标”“登录注册”“搜索”“logo”“导航”五个组，关系如图所示，其中“登录后四个图标”组是登录后才能显示，与“登录注册”组不同时显示。也可以先制作网页内容，然后再进行图层编组。

3. 网站页脚

Step1：选择【矩形工具】，绘制一个宽度为1000px，高度为300px的矩形，并填充颜色“#a4a4a4”灰色，将图层命名为“页脚背景”。

Step2：新建“页脚文字”组，输入所有页脚文字，如图7-44 所示，链接部分设置字体：微软雅黑，类型：Regular，字号：14 点，字体颜色“#333744”，其中“友情链接”“新手指南”“我是学生”“账户管理”“关于我们”的 文字颜色要改成白色。“Copyright?2015 -2020BIGC All Rights Reserved”和“北京印刷学院 版权所有”字号改成12 点。新建“网站页脚”组，将“页脚背景”图层和“页脚文字”组移至“网站页脚”组内。

至此，整个网站中统一的两大模块网站头部、网站页脚已经制作完毕。这两个模块可以通过复制组的方式被重复用在网站的其他页面中。 二、 绘制首页

首页的布局采用了十分常见的两栏式分栏法，左栏主要包括轮播广告、各类课程、研究团队等，是网站的核心资源；右栏主要包括注册登录面板、热门头条、资源导航、直播预告、热门下载、热门标签。首页效果图如图7-45 所示，可以看到其中部分封面和文字是重复的，在制作设计稿时可以出现这种重复，原因是最终网站上显示的绝大多数内文和课程图片是后台动态添加的，设计稿主要解决的是布局和样式的问题。

1. 轮播广告

Step1：新建“首页”组，在“首页”组内再新建“轮播广告”子图层组。选择【矩形工具】， 绘制一个宽度为634px，高度为306px的矩形，并填充颜色，其为“#ffffff”白