网站美工设计大作业(2013).docVIP

《网站美工设计》课程考试大作业 课程名称 网站美工设计 考试成绩 项目名称 雅诗兰黛网页设计 批阅教师 王旋 姓名 学号 专业班级 电商1111 完成日期 2013.6.11 一、大作业任务书 1.大作业的选题和内容 利用photoshop进行设计一个作品，可选如下： 1.XXX形象设计：卡通形象、标志等———侧重于鼠绘； 2.XXX平面设计：图书、杂志、贺年卡、明信片、包装盒、包装袋、宣传册等； 3.XXX广告设计：公益广告、商业平面广告——侧重于特效设计； 4.XXX主题海报设计: 淘宝促销海报、电影、电视、校园活动促销等； 5.XXX照片处理：婚纱照、艺术照（侧重于人物图片的处理）； 6.XXX网页设计：首页效果图、网页切片（输出文件是Html文档）。 2.大作业的评分标准 具体评分标准和内容如下： 1.作品符合主题要求，内容丰富健康向上 (10%)； 2.作品尺寸、结构（布局）合理，色彩搭配自然和谐，有视觉冲击力 (10%)； 3.作品新颖有一定的创意，作品的文字、图片等具有设计感，整体效果好(20%)； 4.有一定技术含量，能够合理的应用各种所学技术。（图层数量不能少于10，选区（蒙版）、图像调整、修饰方法、图层样式、滤镜等技术必须包括）(20%)； 5.设计报告完成质量，图片输入打印符合第14课要求（40%） 3.大作业的要求 1.独立完成，禁止抄袭和直接进行网上下载，否则一律视为不合格； 2.上交时必须同时上交电子作品和打印版（即设计报告），其中电子版提交PSD格式文件，图层一律不合并。打印版包括任务书、设计效果图、设计步骤思路、设计心得等。 3.16周之前完成。 二、设计效果图（推荐用彩色，其余用黑白）（此页不用打印，单独输出打印无表格边框版本） 三、设计思路与步骤 PS：写出操作步骤及思路，并详细说明用了哪些技术（可加页） 设计思路（含设计的目的，设计的内容—作品布局、风格设定、素材选择、创意与实施） 设计的目的：化妆品给了人们极大的美容满足,因为它促使人们变得美丽,而且还让肌肤变得靓丽和水润,所以化妆品是人们爱美的最佳选择.为了使人们更加的了解“雅诗兰黛”化妆品的好处，满足人们爱美的需要，以及促进本店的销售，建设此网站是为了更好的做好宣传，实现消费者与本店的互利。 设计的内容：设计的是一个有关“雅诗兰黛”化妆品的网页，其中包含标题，导航、基本的内容，以及底部内容 作品的布局：作品基本成对称分布，布局较简单清晰 风格：为了突出化妆品的主题，本网页以棕色为主，文字大部分也是呈现的棕色，这样使整体看起来比较的协调。 素材： 创意：将图片进行变形，这样让图片看起来比较的有立体感，能够很好的吸引需求者的眼球，以及合理的运用了方格，更添加了网页的效果 设计步骤（关键步骤+截图） （1）点击文件-新建，创建一个宽为960px，高为400px的图像，其名称为图层一，将拾色器（前景色）改为浅灰色，使用渐变工具对画布进行填充，然后在此画布上添加相关的文字，并设置文字的大小和颜色： （2）点击文件-新建创建一个宽慰960px，高为500px的画布，点击视图中的标尺工具，根据参考线进行,利用钢笔工具进行描绘,在点击菜单栏中的编辑-自定义图案,再利用油漆桶工具进行填充，然后调整方格图片， （3）点击新建文件。创建一个宽为1024px，高为1024px的图像，其名称为背景，将图层一移动到背景图层中，在文件夹下选择一张图片，将其移动到背景图片中，点击菜单栏中的“编辑”—“变换”中的“变形”和“斜切”进行图片的调整，在图片中添加本主题网页的相关产品（有三幅图片） （4）.然后再主题“雅诗兰黛”的下方添加与主题相关的图片和文字，并调整图片的相应的大小，给文字添加不同的颜色和调整大小 （5）在背景图片上添加“达人分享”专区，添加相应的文字和大小，并利用直线工具进行描绘，最后添加联系方式和电子邮箱以及授权，最终的效果图片如下： （6）图片的最终的效果图片如下所示： （7）利用工具中的切片工具进行切图，切片的效果如下： （8）选择“切片选择工具”，选中一张图片，双击鼠标，会弹出如下的对话框： （9）给选中的切片进行命名，并将URL设置为“#”，选择菜单“文件”—“储存为Web和设备所用格式”，按住shift键，并选择“选择切片工具”，从对话框的右边的“预设”下拉列表中选择“JPEG中”，点击“储存”，将图片命名为html格式，起名为“雅诗兰黛1.html，预览该网页，效果图如下： 四、设计心得与体会(不少于300字) 作为用ps制作网页的初学者，我对用此方法设计网页非常感兴趣，想设计出一个美观、实用、内容丰富的并且是自己一直想制作的网页。在老师的指导下以及同学的帮助下，自己动手、动脑，通过网络资源，在