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的基础功能,最后也原创性地独立设计出了个人网站首图,体验了一下网页设计的过程。