艾靓化妆品公司网站的美工及实现毕业设计.pdf

毕 业 设 计 毕 业 设 计 题 艾靓化妆品公司网站的美工及实现 毕业设计类型 产品设计 工艺设计 方案设计 姓名 班级 所属系部 物信系 专业 电子商务 指导教师 职称 完成时间 年 月 日 摘 要 本论文将对我所设计的艾靓化妆品网站美工及实现进行探讨，当今社会，人们对自己的形象定位越来越注重，本公司网站为广大朋友们提供了能让自己变得越来越靓的产品和产品介绍，对网站进行的美工方法主要是网页的结构、栏目的设置、网页的风格颜色搭配、文字图片的运用等；也只有这样对网站进行美工才能使它有个性、有特色，更具有吸引力。关键词：艾靓 艾靓化妆品 美工 实现 目 录 前 言-1 第一章 VI 形象识别系统 1.1 VI 的作用-2 1.2 LOGO 的设-2 1.3LOGO 的设计理念-3 1.4 公司名片的设计-3 1.5 公司的宣传海报-4 第二章 页面布局-5 2.1 网页框架的搭建-5 2.2 页面的基本结构-6 第三章 页面美化-7 3.1 首页的美工-8 3.2 网页的细节美化-9 3.3 网页图片美化-11 第四章 总体-12 4.1 设计思想-12 4.2 项目规划-13 总结-14 致谢-15 参考文献-16 1 前 言 随着互联网的迅速发展，人们都不仅仅在网络上浏览信息，更多的是参与其中，拥有自己的网站，这似乎成为一种潮流。如果说个人建立网站是为了追求时尚，那么公司建立网站是必然的选择。在网化的今天，依托互联网保持用户之间的联系和交流，显得非常方便，因此进行这方面的研究也十分有意义。艾靓网站的实现树立了很好的化妆品形象，扩大了对化妆品的宣传。在设计的过程中，我主要负责美化，图片的选择、网站的布局、网站的搭建和对色彩的搭配，有独特的见解和独特的风格以及良好的排版水平。在网站美工的过程中，涉及到 PS、flash、dreamwever 等技术，下面我就将我网站美工的过程所采用的技术、思路等方面详细的介绍。第一章、VI 形象识别系统 1.1、VI 的作用 为了传达本企业的经营理念和企业文化，以形象的视觉形式宣 2 传企业，将我公司与其他企业区分开来的同时又确立我公司明显的行业特征，用自己特有的视觉符号系统吸引公众的注意力并产生记忆，使消费者对本公司所提供的产品或服务产生最高的品牌忠诚度，以确保公司在经济活动当中的独立性和不可替代性，提高该企业员工对企业的认同感，提高企业士气。1.2 LOGO 的设计 在我看来，LOGO 的设计其实还蛮简单的，但是等自己亲自动手做的时候，才发现，要设计一个有创意性的 LOGO 还是蛮困难的，还是要花费一些功夫的；我在进行 LOGO 的设计时，我先选好了我所需要的图片，然后利用 Photoshop 工具对图片进行美化和组合，下面是我为公司所设计的 LOGO，如图 1-1-1 所示 图 1-2-1 1.3、LOGO 的设计理念 艾靓化妆品公司遵循“有诚信、好质量”的服务原则，展现给广大消费者们，当今社会，人们的生活水平越来越高，对生活的质量要求也越来越高，无论是人还是公司都需要树立好一个好形象给大家看。LOGO 的设计一个花色的圆筒里面再加一个“靓”字，是 3 告诉人们做人做事要圆且要给人们树立一个靓丽美好的形象在人们的心中。LOGO 的设计不仅简洁、大气更有国际化，中心的“靓”字也更代表了人们心中的美好形象，突出产品和公司的直接用途。1.4 公司名片的设计 作为公司，名片的设计必不可少，这是作为当今时代重要的宣传手段。从某种意义上，名片代表了一个公司的形象，起到宣传自我，宣传企业等作用 名片正面 1.4 公司的宣传海报 海报宣传的许多优点是其他许多媒介无法替代的。它有着强烈的视觉冲击力和内涵创意，通过夸张、恢谐等表现手法，给人以强烈的印象。在开业之前和开业当天我们可以通过海报传播美容店铺 4 的经营理念和经营品牌；在促销活动现场宣传活动的主题和内容；在产品展示时明确表达最实在的优惠，以刺激顾客购买欲。因此设计出一张足够吸引人的海报显得尤为重要。宣传海报 第二章 网页布局 网页是一个网站构成的基本元素，良好的网页设计是一个网站 提高访问量的利器；而网页布局是一张网页的框架，良好的布局能让网页看起来不仅美观，更是一种享受 2.1 网页框架的搭建 5 框架结构是指利用（frame)这个标签将一个网页分成若干个窗口。网页的布局大致分为“国字型”、“挂脚型”、“综合框架型”、“Flash 型”、“变化型”等。我们只要把握好网站的定位，然后做出合理的框架布局，其设计将会起到事倍功半的作用。艾靓网站选择的是“国字型”布局。2.2、页面的基本结构 网站的页面设计主要是页面的布局，功能区分，导航形式等内容的组合，它们之间相互影响，共同构成了页面的整体结构。在艾靓网站美工美化中，不仅要把首页的基本结构布局好，还要把其它超链接的导航栏的那些显示的页面布局好，在此之前，做好页面的布局，才能更好的美化网站，下面是我设计艾靓网站的首页布局结构，如图 2 所示 图 2-2-1 6 下面一张是我设计的导航栏链接页面的布局结构.如图 2-2-3 图 2-2-3 第三章、页面美化 如果说网页的布局是建一座房子的话，那么网页美化就是装修，装修的好看直接影响网站的点击力，一张网页美化的好，不仅体现了设计师的能力，也是一种视觉享受，3.1 首页的美工 在美化艾靓网站的首页时，我们对于色彩功能的选择，比如：对比色、色调、均衡、比例、渐变等等，以及色彩的搭配显示出来的效果是美丽动人，这样，艾靓首页在显示出来后给人们一种愉快 7 的心情。所以我的网站美化有良好的审美观和创新力。下面是我艾靓公司首页的美工完之后的效果图，如图 3-1-1 和图 3-1-2 所示 3-1-1 图 3-1-2 3.2 网页细节美化（1）背景 可以使 background-color 属性为元素设置背景色，这个属性接受任何合法的颜色值。但是大部分的网页是不需要深色来作为背景色的，像那种大型的网站页面都是用默认的白色为背景，也有一些 8 网站会用稍微比白色深一点的图片作为背景，以提高视觉效果。除此之外，还可以用图片来作为背景，虽然可以起到美化的作用，但是网页的加载速度回明显变慢，不建议这样做。所以我在美化艾靓网站的时候，我没有利用这个来设置背景色，而是用一张图片来作为它的背景图，让浏览者看起来更加鲜艳和美丽如图 3-2-1 所示 图 3-2-2（2）文本 在艾靓网站美化中，文本我是很用心来想的，因为我知道，语言的力量是非常强大的，同时文本是一个页面主要信息传达者，要让文本很快而且深刻地传到读者的脑海中，好的文字修饰是非常重要的。所以我在文字的大小、颜色、间隔、对齐方式进行设置，这样使它能够达到我们想要的那个效果。下面是我对公司的介绍文字所进行的排版，这样就不会显得那么单调和难看。如图 3-2-3 所示 9 图 3-2-4 3.3 网页图片美化 一张适当的图片能起到很好的视觉作用，而图片的美化主要靠美化工具，图片美化最常用的工具就是 Photoshop。Photoshop 的主要功能包括：图像编辑、图像合成、校色调色及特效制作部分等；图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、透视等；也可以进行辅助、去除斑点、修补、修饰图像的残损等。所以我在美化的时候都会先把选好的图片进行认真的处理，以达到我需要的那种效果。1 0 图 3-3-1 图 3-3-2 1 1 第四章 总 结 4.1、设计思想（1）网页的文字排版和图片制作 做好艾靓化妆品公司网页的美工，文字的排版和图片选择、制作是非常重要的。一个化妆品网站，突显化妆品的美感和能够吸引人的文字，页面的排版和图片放置的位置也显得尤为重要。我首先把我选好的图片利用 PS 把它处理得更加漂亮，更加有美感，图片的色彩搭配也是根据网站的定位来实施。在写文字的时候把文字写到一些图片上，看上去有些图片就不那么单一。除了文字和图片的搭配，我只是把文字排版好，在排版的同时保证与之表述的内容一致。我在前期的时候更改字的字体颜色、形状和大小等，以此来吸引客户，引起客户的关注度。（2）网页的主题定位和浏览群定位 我做的是艾靓化妆品网站的美化，那么主题是与化妆品、皮肤有关，我定的主题是“美容美颜，靓丽而行”。对于为什么定这样的主题，主要原因是当今时代，人们对形象看的越来越重，形象也在这个社会存在着重大的意义。我这个主题就正好突显了这一点，告诉人们，无论走在何方，请靓丽而行。对于浏览群的定位，除婴儿、老年人之外，其他的都在我的定位内，都属于我的消费群体，男女比例平等。4.2、项目规划（1）导航栏目的超链接规划及页面布局规划 1 2 在导航栏的每一个栏目设置好超链接，链接到你所要指向的那个栏目，如图 10 所示 图 4-2-1 页面布局规划，我则是先对照自己做好草图然后用 dreamwever利用表格对页面进行规划，如图 4-2-2 所示 图 4-2-2 1 3 总 结 通过这个论文的写作，让我学到了很多知识，通过对工具的查阅和借用网络的发达，在写论文的时候，将遇到的困难都解决了，不仅以前的只是得到了巩固，也让我学到了很多新的东西。而其中让我学到的最多是布局的排版和文字的修饰及一些样式规则。通过这个写作，我也更清楚的知道一张网页是如何从只有一张别表格、一个层慢慢变成一张精美网页的过程，其中最主要的还是一些细节，让我知道做任何事都不能马虎，都要认真对待；无论是做什么，我们都要努力的去完成，做自己的东西，因为自己是独一无二的，始终的相信自己。有道是“水手不怕风雨，少年不惧未来”。1 致 谢 经过长时间的忙碌和学习，本次毕业论文设计已接近尾声，作为一个大学生的毕业设计，由于平时动手经营的匮乏，难免有许多考虑不周全的地方，如果没有知道老师的督促知道，想要完成这个设计还是很困难的。本次研究的课题是在老师的亲切关怀和悉心指导下完成的，老师始终给予我细心的知道和不懈的支持，同时也感谢各位老师对我的培养和教育，她们细心指导我大学期间的学习，关心我的生活。因此，我向每位老师深深的鞠一个躬。感谢我的学校，让我在这里不仅提高了自我修养还增强了自身的综合素质，更教会了我如何做人，做一个出色的人。在论文即将完成之际，我的心情无法平静，感谢老师给予我的帮助，让我掌握了坚实的专业基础，为我以后的杨帆远航注入了动力。1 参考文献 1王家林，李利。网页设计入门 M 人民出版社 2000 2吴文龙，洪政。学习网页设计制作教程 M 新疆工业出版社 2004 3 陈达杰，张伟。网页简单应用教程 M 山西工业出版社 2004 4魏宏欣，洪大民。网页设计教程 M 江西工业出版社 1998 5崔建成 网页美工全彩 M 电子工业出版社 2010 6徐延章 网页美工与创意 M 科学出版社 2009