猿梦wordpress主题制作完整系列教程三:主题设计稿

2017年12月3日20:19:58 发表评论 48

我们简单的把需求写好了,下面我们根据需求用PS设计出PSD图,我们要制作的页面有2个,一个是首页,一个是文章页,这两个做做停停的大约花了我2天,不过这都是一些简单的静态页面,有些地方是借鉴其它网站的设计,所以总体来说应该没有难度的,会用PS的人都可以做的出来的,模仿多了,自己做页面的时候灵感自然也就会来了。

网站配色

    页面背景:#F4F4F4/#ffffff

    导航黄背景:#FFD100

    高亮黄移入:#ffe366

    导航黑字:#282828

    二级导航黑字:#444444

    标题浅灰字:#999999

    文章标题黑字:#333333

    文章标题移入橙:#d36f16

    小icon浅灰:#D1D1D1

    小icon浅灰字:#BBBBBB

    页脚背景:#282828

    页脚icon:#666666

    页脚字:#5E6655

    页脚下划线:#333333


设计图解析

首先看首页的设计没有创新的地方,就是单一的布局,也比较简约,网页配色方面应该会有很多的不足,但是这毕竟也是我第一次做这个的网页设计图,也没有太多的经验,但是我能确实的是其实模仿设计一个网页是非常容易的,但是单纯自己的构思布局,配色什么的就比较难了,截图也还是很清晰,感兴趣的小伙伴可以留言,我可以私发给你我的PSD图。

猿梦wordpress主题制作完整系列教程三:主题设计稿

接下来看看设计的文章页面,文章页面我认为最要突出不光是内容还有就是文章的作者,所以我采用了站酷的设计,这样文章作者就非常的醒目了,还有就是底部也有一些用于seo优化的热门文章,相关文章,还有对用户友好的上下篇文章,既可以提高用户对网站的访问深度,以增加了用户对网站的友好度,评论区域也是比较简洁的

猿梦wordpress主题制作完整系列教程三:主题设计稿

总结:图片感觉好有一种朦朦美的感觉,吐血~,是我拉扯的,大部分的前端工程师都不需要自己做PSD图的,一般都是由设计师做好,更有些会具体的标题配色,宽度,大小等一系列详细的说明,这样我们前端工程师在写代码就非常的轻松轻松的啦。

下载PSD设计图:https://pan.baidu.com/s/1nvDXV3j

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: