咨询电话:186 7916 6165 咨询电话:186 7916 6165 (微信同号)    在线QQ:181796286
DESIGN SHARING ·
设计分享
关注开优网络 关注前沿
如何避免走入网站建设的误区
网页设计师提交PSD规范

网页设计师提交PSD规范

发表日期:2017-05-03    文章编辑:南昌开优网络    浏览次数:2569    标签:网页设计,PS使用

设计师,除了需要很高的审美和熟练的设计软件操作,在一些PSD稿规范方面也需要注意。如果你的设计很完美,得到了客户的认可,但是如果你的PSD让前端工程师觉得很糟糕,同样前端不会认为你是一个优秀的设计师。

如果你项目组的web前端工程师死了,死因很可能是一份恐怖的psd:

a、psd 文件尺寸 竟然有200+MB(也许看着还好,但是一用photoshop打开PSD就悲剧了,内存不够0.0 并不是所有的办公电脑都是那么的强大)

b、psd 图层上百个,各种看不懂的图层。毫无规律的图层命名和分组让人菊花一紧。

c、设计稿完全是个插画,怎么看都不像个网页,无从下手切图。(恨不得把psd 吃下去 >.<)

d、GUI为矢量图,边界不清晰。(切图成果,糊得一比)。

作为web前端工程师,经常遇到的PSD各种问题,就拿之前同事距离说踢足球一样:“想要我接一个好球,传球给我的必须要传一个好球,如果传球乱七八糟,你让我怎么能接好。”

接下来深圳网站建设公司Clh针对如何避免web前端工程师经常遇到这种问题,来对我们的网页设计师做一些要求规范。

一、合理分组/层,结构清晰

不管你做的是设计,还是插画。结构设计也是一种设计,当你合理并且清晰的规划好你的设计稿,那么这个设计就有十之八九了。

那么如何对网页设计稿进行分组分层呢?

a、按框架分(网页分 ,头部head , banner,底部 foot,以此类推)。

b、按模块分(每个小原件,小装饰,合成一个大物件就能做为一个模块)。

c、按属性分(这点比较重要,设计师如果做的是web界面,需要了解什么是“图片输出” 和 “代码输出”, 原因是当切图的时候,我们需要将 “代码输出”类型所属的图层隐藏掉,然后再进行导出)。还有一些注释(注释好重要,后面有讲)相关的东西。

d、按状态分,(web设计跟插画设计 一个很大的区别就是 web设计是有交互的,需要针对各个交互状态进行分层分组)

[代码输出] 指的是设计稿中的一些效果是可以使用代码来实现的,如后期可编辑的文字(大段文字,小按钮里的宋体文字),圆角,渐变效果(高级浏览器可实现)。

[图片输出] 则是指除了代码输出以外的东西,如图标icon,背景效果,以及一些 使用代码不可实现的文字效果(如艺术字体)。

二、减少尺寸/文件大小,去其痔疮是关键

如果你做的是大喷绘 psd 有个二、三百M可以理解。但是你做的是web设计稿也那么大,就有点不可理喻啦。

毕竟web前端工程师的电脑总是没有设计师的强大,并且我们还要跑个IDE编辑器,跑个虚拟机,再跑N个浏览器。这个时候要是还要打开一个上百M的PSD设计稿(预计占用内存1G+),嗯,还好在公司不太好发飙,如果是自己的电脑估计早都砸了。

所以为了页面最大程度的还原设计稿,对web前端工程师好点,把psd弄小点。如何弄小点,往下看。

a、去除没用的大尺寸素材图层,(当设计稿需要交接给web前端工程师的时候,最好复制一份设计稿,去除psd中无用处的原始素材图)。因为素材图片是唯一难压缩的东西(psd尺寸大很多时候是因为这个),且运行时占内存大。

b、去除无关图层,(比如一个menu,做了好几版,最终保留定稿的一版即可,其它几版大可直接删除。这个是禁忌,跟设计稿不相关的最好删掉,或者新建一个temp组丢那里面,不然很容易误导web前端工程师,而且还占内存,别以为隐藏掉就不占内存啦)。

c、慎用智能图层,虽然很好用,因为不影响原素材的质量,如放大缩小。但是非常占内存,吃CPU

d、合并列表型块状设计,(这点很纠结,也很重要) web设计稿中有一些设计是列表型的。如:文章列表,信息列表。通常设计的时候是先制作一份,然后复制个十几个。 但是……但是……,复制太多了占内存。0_0,果断保留关键的一份,或者表示几种状态的几份。然后把其他的都合并图层了。 相信我,这样做web前端工程师会很开心。

三、边界清晰,不再模糊

web设计中,最忌讳糊糊的感觉了。千万不要凭感觉,因为很多东西是需要精确到像素的。

a、形状模糊,有些时候使用形状工具因为没有对齐到像素(见配图),导致做出来的形状边缘都糊糊的。

解决办法很简单,使用选取工具(A),小移一下形状让它对齐到像素即可,或者干脆栅格化形状擦去模糊的部分即可。

b、素材模糊,素材让人觉得糊糊得看起来不是那么专业? 简单的锐化一下,会发现很好用。

c、文字模糊,有些时候发现矢量的字体怎么调大小都觉得边缘糊糊的。先复制一份(备份用),然后栅格化,小小的锐化一下。

四、良好的注释图层,凸现专业气质

代码需要注释,设计稿也同样需要注释。同样是两份设计稿,相信你一定很喜欢带注释的设计稿。

相信我,给你的psd 新建一个组叫注释(comments),那么web前端工程师的眼睛里一定闪烁着晶莹的东西。^__^

南昌开优网络提醒各位设计师,为了保持友谊的小船不要随时翻,为了让前端同事多活几年(可能会有人拿刀互相伤害哦),从细节做起,应该将设计稿的最完美一面表现给其他人看。