网页前端设计毕业论文(含设计附图)

学院毕业论文(设计)图STYLEREF1\s3.2.1所示。图STYLEREF1\s3.2.1布局

3、图饰：页面的装饰会使用到一些图片和纹饰等素材，图片纹饰的风格是最直接表现风格的要素，本网站以展示时尚设计图片展示，图片直接合理的搭配及文字排版，给浏览者更直观的感受。4、界面：简化界面布局，精炼界面元素和信息，在保证浏览者对于页面以及产品有足够的认知的情况下，使界面做得尽量简洁，从而传达出更轻盈的视觉感受。3.2.2网站内容结构网站的首页涵盖了四大专题页的主要内容，以板块的形式展示。每个专题页都都有一个详细页展示。如图STYLEREF1\s3.2.2所示。轻奢生活网首页轻奢生活网首页设计名品家居乐活注册登入设计详细页名品详细页乐活详细页家居详细页图STYLEREF1\s3.2.2结构3.2.3首页效果图制作确定了网站的风格，开始制作首页的效果图，因为首页奠定了整个网站的基调，所以尤为重要，具体制作过程如下：打开photoshop软件，新建宽：1380px,高：2235px的页面，然后文件另存为轻奢生活网首页.psd，注意要边做边保存，防止程序突然崩溃等意外情况发生。如图3.2.3-1所示。图3.2.3-1背景添加效果，图案叠加，选择已准备的素材文件。如图3.2.3-2所示。图3.2.3-21)制作导航条与logo：1.用矩形工具、圆形工具，画出基本形状然后在图层样式里设置描边、投影、浮雕达。2.在顶部左上方用“迷你简柏青”输入“轻奢活”三个字。用“刘德华字体”输入“生”，下方输入英文字体Interiordesign，组合成网页的logo。简洁又不失精致。3.页面首页制作搜索框、帮助、连接邮箱设计制作。主要采用圆角矩形工具和图案叠加效果。如图3.2.3-3所示。图3.2.3-32)制作导航条与logo：1.第一部分为三行四列的表格式图片展示。先画好矩形用对齐工具将其排列整齐。然后加入素材使用蒙版工具。文字背景部分颜色填充黑色，然后在蒙版上使用黑到白到黑的渐变，使背景两边透明。2.第二部分为一个细分的小导航，由于篇幅关系，没有做连接效果图。主要是通过圆形描边和斜线等绘制。3.页面主题部分为四大专题页的四个板块，主要以图片展示为主，另外加上点、线、面等视觉元素的搭配。主要涉及到的技术有图层透明度设置，钢笔工具的运用，自定义形状工具绘制导航箭头。4.网页底部信息编辑，运用文字工具和填充工具即可。效果图如图3.2.3-4所示。图3.2.3-43.2.4“设计”专题页及子页制作1)制作子页标题“泛设计”，将字体复制三次，分别填充白色、蓝色、黑色。依次移动一定像素得到阴影效果。2)左边导航通过文字、背景、线条制作。中间背景图形使用滤镜-模糊-高斯模糊设置一定像素，再在上方绘制形状不一的矩形，排列在页面中，并且设置其投影和描边。如图3.2.3-5所示。图3.2.3-53)在这些矩形上通过，剪切蒙版放入素材图形，也便于下次更换图形。最终效果图如图3.2.3-6所示。图3.2.3-64)“泛设计”子页，制作登入框。用圆角矩形工具画框，设置描边为1像素，黑色到白色渐变。渐变叠加为灰色到白色。投影为105°，距离设置为3。其他按钮制作方法一样。如图3.2.3-6所示。图3.2.3-63.2.5“名品”专题页制作1)左边导航栏制作，输入导航栏文字，设置不同颜色，不同等级的字体不同大小。2)右边不同颜色区块填充并且放入图片，输入文字。如图3.2.3-7所示。图3.2.3-73.2.6“乐活”专题页及子页制作1)将背景设置为浅蓝色，左边导航用文字工具输入。2)钢笔工具画出不规则图形，按下“Ctrl+Enter”转换为选区，填充白色，并且画上蓝色线条。周围大小不等的圆圈，设置描边为2像素，填充蓝色，加入白色素材。再将准备好的彩色素材用剪切蒙版的方式放入页面中。如图3.2.3-8所示。图3.2.3-83)同样制作出它的子页面，黑色矩形设置透明度。效果如图3.2.3-9所示。图3.2.3-93.2.7“家居”专题页及子页制作1)将背景设置为浅蓝色，左边导航用文字工具输入。2)椭圆工具，按住shift绘制小正圆，设置渐变叠加白色到蓝色，描边为白色到蓝色渐变，大小为15像素，不透明度为67%。并且在图形上输入白色、12像素、宋体文字，居中放置。如图3.2.3-10所示。在大正圆里放置图片素材。图3.2.3-103)将背景设置为浅蓝色，左边导航用文字工具输入。大小不同的两行字。用变形文字工具，大文字设置样式为扇形，弯曲31%。小文字设置样式为扇形，弯曲-27%，水平扭曲2%。画笔设置如图3.2.3-11所示。用钢笔工具画出爱心状曲线，在路径面板下，点击将路径转化为描边按钮。得到效果图如图3.2.3-12所示。图3.2.3-11图3.2.3-124)椭圆工具，按住shift绘制小正圆，设置渐变叠加白色到蓝色，描边为白色到蓝色渐变，大小为15像素，不透明度为67%。并且在图形上输入白色、12像素、宋体文字，居中放置。如图3.2.3-13所示。在大正圆里放置图片素材。图3.2.3-103.2.7“家居”专题页及子页制作3.2.8构图设计在网页中的应用1)几何图形在页面中往往能起到大梁的作用，也是网页内容最为常用的承载面板。不同的几何形状有不同的性格，圆形是活泼可爱的，方形是平稳整齐的，三角形就是尖锐动感的。图形与文字之间合理的搭配和有效的穿插，能使页面除了信息传达外，更具层次感和观赏性。如“设计”专题页中把圆角矩形巧妙地与信息模块穿插在一起，在营造了网站的主体富有节奏的形状之外，更加强了页面的层次感，使页面不在枯燥单调。如图3.2.8-1所示。图3.2.8-1同样是矩形的穿插结合，色彩填充的图形交集既展示了重要信息又勾勒出”名品”专题页的奢华时尚又有质感的风格形态。图3.2.8-2所示。图3.2.8-2不同大小和色彩的圆形的结合搭载了轮播广告和重要信息，使得“家居”专题页的整个页面既有亮点又不失简洁。如图3.2.8-3所示。竖着的大圆角矩形和线条勾勒出整个完整画面，各种信息镶嵌于各个形状之中，使其相得益彰。如图3.2.8-3所示。图3.2.8-3三角形的不平衡性及其尖锐性能够增强视觉上的刺激，快速吸引用户，可以用于科技和时尚这种风格同样比较“锋利”的网页。上图，将同色系小三角形均匀的拼贴起来，马上就营造出一种钻石璀璨般的时尚感。但实践的时候要注意加减法，不能乱堆一通，点到为止即可。如图3.2.8-4所示。图3.2.8-4比萨斜塔之斜是地质沙化下沉还是设计师故意为之，至今还是有人在争论。抛开争议，斜塔的魅力让许多人都想来到它身边一睹这位倾斜美人之容。凑巧的是，在浩瀚的宇宙中最美丽的星球，也就是地球，也斜着身子对着太阳转着。话题扯的比较远，斜线，或者说是斜着的物体，似乎天生有一种张力。在网页设计中亦是如此。而在这里所表现的为视觉的张力，是种视觉心里上的延伸力而非物理上的。当页面过于平均，毫无亮点时，打破通体的平均尤为重要。打破平均的方式有很多，而斜线似乎是网页设计中最常用的一招。一般的页面版式都是方方正正，四平八稳，有点呆板。如果将局部或整体适当的旋转，打破稳定的构图，画面就会动感有趣一些。这种基调轻松活泼又恰好内容比较少的页面来说，主体整个旋转后，画面马上轻松活泼起来，看过现在这个画面，真是无法想象未旋转前的平淡。同时，相比大块的方形空白，不规则的余白也不会显得空洞。斜线的张力让整个页面富有动感和延伸性，即可为页面起到修饰的作用，又能作为信息的承载模块，两者有机的融合并不让人觉得倾斜的标题不好识别或者有碍阅读，反之更能让整个页面富有形式感和表现力。“乐活”专题页上内容为社区交流、网站用户信息展示，故应用斜线的方式，更显动态和时新。如图3.2.8-5所示。如图3.2.8-53)与直线相比，曲线具有圆润的特点，让人感觉轻松、愉悦。增强视觉感的同时也能够营造活跃的气氛。蓝色的字构成的曲线穿插在网页中，用曲线来分割背景和焦点就显得理所当然了，画面中曲线合理的运用也提高了层次感，机器人和红色标题都更突出，如图3.2.8-6所示。图3.2.8-63.4创作总结在这次网页设计中，我查阅了很多资料，也对网页设计有了一个新的认识，不仅要了解代码知识，考虑设计的可行性。同时，从平面设计的范畴来定义，网页设计打破了传统的二维静态空间的限制，这使网页设计成为一个崭新的设计领域。平面构成对网页设计具有着重要的指导作用。就本论文的论点而言，构图设计在网页上运用的几个点，如果深入掌握这些知识，那么在下次网页设计中依然具有指导意义。本次创作，我还收获如下几点经验，首先，设计是有目的的策划，网页设计是这些策划将要采取的形式之一。在网页设计中需要用视觉元素来传播你的设计设想和计划，用文字和图形把信息传达给浏览者，让人们通过这些视觉元素了解你的设想和目的才是设计的主要目的，所以设计之前必须做充分的准备。第二，要做好网站的整体规划，选择好温和主题的色系和网站风格。第三，在设计过程中，对于PS软件的操作，图层的命名的修改以及图层文件夹分类管理是提高效率和后续维护的一个重要习惯。第四点是除了在大学期间计算机应用上基础学习后，还需要不断的更新知识库，除了在专业上精益求精外，平时我还涉猎了大量电子商务网站运营、平面设计、网页设计等知识。并且相信在以后理论与实际结合当中，能有更大提高。4设计自评4.1理念与市场“轻”代表的是一种优雅态度，低调，舒适，却无损高贵与雅致。“奢”指的是奢华。奢华并非令郎满目的时尚品牌、动辄上万的标价和暴发户富二代的消费水平，而是一种对着装的态度。之所以选择“轻奢生活”这个网页的设计，首先是个人的喜爱，另外这些优秀的设计不仅给人带来视觉享受还能激起人们对生活的热爱。著名的CocoCha-nel女士也有赞美：“它以最小的体积，凝聚了最大的价值。”对都市人来说，奢侈品的意义是不言自明的，在多元的社会交往中，没有一些画龙点睛之物压阵，的确让人有些底气不足。“轻奢生活”的现代意义在于可以提升品位、提升身份认同感，一个真正的都市人懂得巧用奢侈品来为自己加分。而这个时尚信息平台就可以汇集最新信息，引领质感生活。同时“轻奢”的概念越来越受到大众的喜爱，其市场前景也被看好。因此在这个信息平台里放入推荐购买网站，方便浏览者的消费需求。并且能通过需求刺激消费，带动电子商务产业的发展。同时也让优秀的设计师拥有他们展示的舞台。将设计市场化、信息化。在做这个网站时，将设计师商品分为“设计”、“名品”、“家居”等几大类，用户注册后，可在“乐活”页面拥有类似微博的主页，评论、分享商品，或直接点击购买链接，进入淘宝页面。这个平台将连接起这类消费者与优秀设计师。4.2创作与社会效益制作这个网站，需要收集到很多信息，另外运营这个网站，也需要不断汇聚好设计、优秀的作品。为独立设计师商品提供广阔的线上展示空间与市场，帮助独立设计师品牌完成电商市场运营。另外在这个网站上还能聚合一些理念爱好相似的人，热爱时尚，钟情于设计。每天了解新鲜动态。通过浏览该网页即可收录来自“轻奢生活”网的大量优秀信息。将时尚商品设计、生活分享社区、网上购物平台完美结合，为您提供全方位的轻奢时尚生活服务。引导给中国的人们在生活去享受高质量生活，拥有一颗懂得享受生活的心，是网站的最大目的。致谢毕业设计的顺利完成，分不开老师的指点与鼓励，毕竟自己的知识是有限的，创作过程中难免会遇到这样那样的问题，在此向指导我毕业论文的许丽莉老师表示由衷的感谢！参考文献［1］山田章博.山田章博的世界[M].安徽：安徽文化音像出版社,2003.［2］林明庆.动感CG—Painter古典风格插画设计[M].北京：中国电力出版社,2008.［3］冲麻实也.冲麻实也16年白金画集(邪道|JADOU）[M].长春：长春电影制片厂银声音像出版社，1998.［4］子弹.插画之梦·CG动漫全程详解[M].江西：江