【网页设计】网站首图设计小结

author：&Carlton

course：图形图像设计

tag：前端

topic：网站首图设计

time：2023 年 7 月 4 日

---

任务简介

内容

        用PS设计一张网站首页效果图，主题为“我”。可以围绕自己的兴趣爱好、个人经历、网站功能进行内容组织与页面设计，也可以选择大学初年的学习、兼职、活动、友情等。

要求

        页面宽度为1920像素宽，内容板块限定在960-1200像素的居中区域。

        网页具有完整的结构（如有合适的logo、导航、文字、图片等）。

        具有符合网站主题的色彩、风格、版式。

        具有良好的整体效果。

        提交PSD文件，保留图片处理主要过程。

       

成果总结

        我设计的网站首页定位于介绍自己，主题是记录自己的成长经历与感悟。

        以head、content、foot三个模块进行分类，大量使用了蒙版，效果设计进行渲染、修饰。

        最后做出了1920*3500大小的首图效果图，包含上百个图层，素材比较丰富。

   

 

反思与感悟

如何开始？经验总结

        老师推荐的顺序给予了我很大的帮助，给我指明了方向：主题确定-内容思考-素材寻找-画草图-框架图实现-细节填充-后期加工

        实际情况大体也是如此：

        ①本次首页设计我先确定了主题为介绍自己，从三个角度介绍自己，每个角度自成一模块，我在笔记本上记录了各个模块的内容（文案初稿、图片素材寻找方向）

        ②然后我开始设计结构，我搜索学习了很多网站的首图，比如各个高校官网，一些个人博客的首页等等，学习一些现代化、优秀的样式。再结合自己的主题内容，思考各个模块内容的组合布局形成自己的风格，例如head包括的logo，导航，通栏如何摆放，由哪些元素构成，需要什么元件等等？

        ③画完草图后通过数学计算，得出水平、垂直参考线的位置，目的是间隔适合、统一，满足内容居中等等，在PS软件里用参考线勾勒出框架图（包括元件、图片等等排放的位置，在其位置勾勒出设计好的空间）

        ④寻找素材（是的，我去找图片稍微靠后一些）之前，先用记事本记录思考需求是什么，具体要找什么内容，附上一些描述与后期设计想法，一次性思考所有要找的素材。我认为在工程量不太大、实际可行的情况下，这么做既能一次性完成思考的过程，又可以相互建立联系，帮助设计，而且记录下来有提醒作用，综合而言寻找的效率更高。

        ⑤内容填充与后期加工。一个板块一个板块来就好，需要时间，而且很可能要修改。因为有时做出来这一块后发现之前的设计不够好，推翻重新设计也是很常见的。边做要边整理图层关系，比如用文件夹以及调整上下层关系，方便后期通过文件夹这个对象控制其包含的所有内容的可视性，便于其他内容的修改调整。

迎难而上？遇到的难点

        ①内容选择困难，范围大难以切入。

                任务内容限制少，选择范围大。但我最后是通过确定最希望表现的主题与思想切入，去定位，将内容确定下来。

        ②对画草图没想法，设计结构无从下手。

                从无到有的创造性工作难度较高。我后面是去参考学习高校官网网址、一些做得好的个人博客首页，渐渐蹦出一些想法。

        ③效果不尽人意，不知如何改进。

                一开始想的比较理想，做出来后效果不好。我也是去分析优秀的例子最后呈现的效果，分析、学习他可能的构建过程，然后大胆尝试，多试试就有可能得到更好的效果。

       

        总体而言，有两大教训：

        ①要大胆尝试。先往某个方向尝试，在深入的过程中想法会越来越多，不合适再修改。

        ②应积极学习。多阅览优秀的样例，关注细节，结合自己的主题、内容，形成自己的风格。

知来者之可追？以后应当注意的点

        ①最后要导出PNG文件看一眼效果图，检查与PS环境下看到的是否有不同，及时调整修改。

        ②尽早确定网站风格下的主题颜色，并紧紧围绕其设计，确保风格统一、和谐。

        ③及时存储当前进度。

谢谢！收获与感恩

        谢谢我的任课老师赖老师！通过一学期的学习我自己基本掌握了PS的基础功能，最后也原创性地独立设计出了个人网站首图，体验了一下网页设计的过程。