从细节做起:设计师们,请善待PSD

  • 时间:
  • 浏览:28
  • 来源:小虫网


  配图:近日帮朋友设计的瀑布流 taobao站 美丽格子 ^__^。

  作为设计师,应该将设计稿的最完美一面表现给其他人看。就像jobs 说的一样,好设计师,不会使用烂木头作为衣柜的背板。虽然你最终的设计稿很完美,但是你的psd让人觉得很糟糕,同样会让之后的切图仔觉得你不是个优秀的设计师,对不起死去的jobs哇~ XD

  在企鹅村玩代码玩了半年多,玩起psd来都有点生疏了。

  最近对设计MM 给的psd文件产生了点暧昧。有感悟抒发一下。看看是不是都有一样的困惑和同样的问题。

  如果切图仔死了,死因很可能是一份可怕的psd

  1. psd 文件尺寸 竟然有71M,(也许看着觉得还好,但是一开ps 就杯具了,内存不够 = =)

  2. psd 图层上百个,各种看不懂的图层。毫无规律的图层分组让人菊花一紧。

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

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

  作为切图仔,暂时就列了这么些 碰到的问题。相信有和多人有同感。

  那么作为设计师MM的你们又应该如何去避免呢? 对症下药 一一破解。

  合理分层,结构清晰

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

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

  1. 按框架分。(网页分 ,头部head , 主题 maiN,底部 foot,以此类推)。

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

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

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

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

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


  

  减少尺寸,去其痔疮是关键

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

  毕竟切图仔的电脑总是没有设计师的强大哇,并且我们还要跑个IDE编辑器,跑个虚拟机,再跑N个浏览器。这个时候要是还要打开一个70M的PSD设计稿(预计占用内存1G),这个时候 谁蛋疼谁知道哇 囧rz

  所以对切图仔好点,把psd弄小点。如何弄小点,往下看。(毕竟俺是过来人 ^__^).

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

  2.去除无关图层,(这个是禁忌哇,如果跟设计稿不相关的最好删掉,或者新建一个temp组丢那里面,不然很容易误导切图仔,而且还占内存,别以为隐藏掉就不占内存啦 XD)。

  3.慎用智能图层。(智能图层在CS4的时候就开始有了。) 很好用,因为不影响原素材的质量,如放大缩小,但是TMD 占内存,吃cpu哇 .

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

  边界清晰,不再模糊

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

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

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

  2.素材模糊,素材让人觉得糊糊得看起来不是那么专业? 简单的锐化一下,会发现很好用(我用的比较多的就是USM锐化)。

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


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

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

  相信我,给你的psd 新建一个组叫注释(comments),那么切图仔的眼睛里一定闪烁着晶莹的东西。^__^

猜你喜欢

全国近10万部手机被感染控制

“这是你孩子的成绩单”“这个人你看认识吗?”……收到这类熟人短信,点开短信中附带的链接,手机就会被植入木马,银行卡里的钱能被洗劫一空。近日,安徽省淮北市警方成功破获一起“短信大盗”木马盗刷案。在360安全中心的技术支持协助下,淮北警方摧毁了木马制作、传播、盗刷、销赃整个犯罪团伙,跨越四省抓获9名犯罪嫌疑人。据初步调查,短短半年时间,全国近10万部手机被木马感染,近800人遭遇经济损失,团伙诈骗金

2019-07-15

前搜狐视频高管马可违反竞业限制案宣判 搜狐获胜

8月28日消息,前搜狐视频版权影视中心总经理马筱楠(马可)违反竞业限制义务被搜狐提起仲裁一案,已经宣布裁决结果,搜狐获胜。裁决结果显示,马可违反了竞业限制义务履行的约定,应承担违约责任,向搜狐双倍返还违约期间已收到的竞业限制补偿金,并继续履行对搜狐的竞业限制义务。今年2月底,马可从搜狐视频离职。她与搜狐签署的《劳动合同》中,明确包含了《不竞争协议》,约定了其离职后的竞业限制义

2019-07-15

四季沐歌畅享净水机纯净双出水,一机两用,适合家用

随着经济收入的增加,居民对生活品质越来越讲究,很多家庭开始关注日常饮用水是否纯净,同时对净水机的需求也逐渐增多。目前,我国市场中净水机企业高达4500多家,但真正掌握核心制造技术、赢得消费者肯定与信赖的企业并不多。携手清华大学、对净水机核心

2019-07-15

如何编写优质的需求文档

编写需求文档,在嵌入式开发领域是非常普遍的。需求文档被用来定义开发任务,协调大规模的研发计划。对于最终的产品,需求文档扮演着开发者行为和消费者行为之间沟通纽带的角色。当需求文档书写正确的时候,便可以发挥巨大的作用。然而,如果你在嵌入式开发领域工作的时间足够长,你就会很快发现,这个领域里不合格

2019-07-15

qq红包一元免费领取朋友圈被"8"刷屏 你肺活量有没有被嘲笑?

不知从什么时候开始,就有不少朋友在朋友圈里发8,后面有一句话解释:这是一款测肺活量的游戏,憋气(记者注:也有传是呼气),拿起手机打8,正常人是5行,超人是9行,少于5行的证明肺活量不行要戒烟了,少于3行要去医院了。到昨天下午,许多人的qq红包一元免费领取朋友圈里已变成了8的海洋。打8测肺活量游戏,昨天也一度位列新浪微博热门话题榜的第4位。昨天,你的qq红包一元免费领取朋友圈被8刷屏了吗?搜了一下,这个游戏前天晚上开始在网上出现

2019-07-15