当前位置: 网站建设 > 网页设计 > 建站经验 >

网页设计实例 PSD也要合理分层结构清晰

时间:2013-03-02 04:13来源:未知 作者:admin 点击:

标签:网页设计实例 PSD也要合理分层结构清晰 实例(55)PSD(3)网页设计(881)也要(3)分层(1)结构(6)清晰(3)合理(8)Web(57)
web设计中,最禁忌糊糊的感到了。因为许多东西是需要准确到像素的。 如果你做的是大喷绘 psd 有个7,80M 能够懂得。但是你做的是web设计稿也那么大,就有点不可理喻啦。 究竟切图仔的电脑老是不设计师的强盛哇,并且咱们还要跑个IDE编纂器, 网页设计大师Nicholas Zakas详解CSS3圆角(译文) ,跑个虚构机,再跑N个阅读器。这个时候要是还要翻开一个70M的PSD设计稿(预计占用内存1G),这个时候 谁蛋疼谁晓得哇 ?rz 公道分层,构造清楚 如果切图仔逝世了,死因很可能是一份恐怖的psd
网页设计实例 PSD也要合理分层结构清晰》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234M62013.htm

web设计中,最禁忌糊糊的感到了。因为许多东西是需要准确到像素的。

如果你做的是大喷绘 psd 有个7,80M 能够懂得。但是你做的是web设计稿也那么大,就有点不可理喻啦。
究竟切图仔的电脑老是不设计师的强盛哇,并且咱们还要跑个IDE编纂器,网页设计大师Nicholas Zakas详解CSS3圆角(译文),跑个虚构机,再跑N个阅读器。这个时候要是还要翻开一个70M的PSD设计稿(预计占用内存1G),这个时候 谁蛋疼谁晓得哇 ?rz

公道分层,构造清楚 如果切图仔逝世了,死因很可能是一份恐怖的psd 1. psd 文件尺寸 居然有71M,(兴许看着感到还好,但是一开ps 就杯具了,内存不够 = =) 2. psd 图层上百个,各种看不懂的图层。毫无法则的图层分组让人菊花一紧。 3. 设计稿完整是个插画,怎么看都不像个网页,无从下手切图。(巴不得把psd 吃下去 >.<) 4,网页设计参考 网页中文字体对应的英文名. GUI为矢量图,边界不清晰。(切图结果,糊得一比)。

不论你做的是设计,仍是插画。结构设计也是一种设计,当你合理并且清晰的计划好你的设计稿,那么这个设计就有十之八九了。
那么如何对网页设计稿进行分组分层呢?

 

1.外形隐约,有些时候应用形状工具因为没有对齐到像素(见配图),导致做出来的形状边沿都糊糊的。
解决措施很简略,使用选取工具(A),小移一下形状让它对齐到像素即可,或者罗唆栅格化形状擦去模糊的局部即可。 2.素材模糊,素材让人觉得糊糊得看起来不是那么专业? 简单的锐化一下,会发明很好用(我用的比较多的就是USM锐化)。 3.文字模糊,有些时候发现矢量的字体怎么调大小都认为边缘糊糊的。果断,复制一份(备份用),然后栅格化,小小的锐化一下。^_^

Tag:结构   清晰   合理   实例   网页设计     结构   清晰   合理   实例   网页设计     --> [网站建设之]网页设计实例:PSD也要合理分层结构清晰

“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的,如后期可编辑的文字(大段文字,小按钮里的宋体文字),圆角,渐变效果(高等浏览器可实现)。
“图片输出” 则是指出了代码输出以外的东西,如图标icon,背景后果,以及一些 使用代码不可实现的文字效果(如艺术字体)。

——————————————

代码需要注解,设计稿也同样需要注释。同样是两份设计稿,相信你一定很爱好带注释的设计稿。
相信我,给你的psd 新建一个组叫正文(comments),那么切图仔的眼睛里必定闪耀着晶莹的东西,网页设计偷懒的方法。^__^

在企鹅村玩代码玩了半年多,玩起psd来都有点陌生了。
最近对设计MM 给的psd文件发生了点暗昧。有感悟抒发一下。看看是不是都有一样的迷惑和同样的问题。


配图:近日帮友人设计的瀑布流 taobao站 漂亮格子 ^__^。
作为设计师,应该将设计稿的最完美一面表示给其别人看。就像jobs 说的一样,好设计师,不会使用烂木头作为衣柜的背板。固然你终极的设计稿很完善,但是你的psd让人觉得很蹩脚,同样会让之后的切图仔觉得你不是个优良的设计师,对不起死去的jobs哇~ XD

减少尺寸,去其痔疮是症结 1. 按框架分。(网页分 ,头部head , 主题 main,底部 foot,以此类推)。 2. 按模块分。(每个小原件,小装潢,合成一个大物件就能做为一个模块) 3. 按属性分。(这点比拟重要,设计师如果做的是web界面,需要懂得什么是“图片输出” 和 “代码输出”, 起因是当切图的时候,我们需要将 “代码输出”类型所属的图层隐蔽掉,然后再进行导出)。还有一些注释(注释好重要,后面有讲)相关的东西。 4. 按状态分,(web设计跟插画设计 一个很大的差别就是 web设计是有交互的,网页设计使用Iframe注意事项,需要针对各个交互状态进行分层分组) 良好的解释图层,凸现专业气质 1.去除没用的大尺寸素材图层,(当设计稿须要交接给切图仔的时候,最好复制一份设计稿,去除psd中无用途的原始素材图)。由于素材图片是独一难紧缩的货色(psd尺寸大良多时候是因为这个),且运行时占内存大。 2.去除无关图层,(这个是禁忌哇,假如跟设计稿不相干的最好删掉,或者新建一个temp组丢那里面,不然很轻易误导切图仔,而且还占内存,别认为暗藏掉就不占内存啦 XD)。 3.慎用智能图层。(智能图层在CS4的时候就开端有了。) 很好用,因为不影响原素材的品质,如放大缩小,然而TMD 占内存,吃cpu哇 >.< 4.合并列表型块状设计,(这点很纠结,也很主要) web设计稿中有一些设计是列表型的。如:文章列表,信息列表。通常设计的时候是先制造一份,而后复制个十几个。 但是。。。。但是,复制太多了占内存哇。0 0,武断保存要害的一份,或者表现多少种状况的几份。然后把其余的都合并图层了。 信任我,这样做切图仔会很开心。^__^ 边界清晰,不再含混

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

作为切图仔,网页设计人员应该看下的几点,临时就列了这么些 遇到的问题。相信有跟多人有同感。
那么作为设计师MM的你们又应当如何去防止呢? 隔靴搔痒 逐一破解。


(责任编辑:网站建设)
网页设计实例 PSD也要合理分层结构清晰相关文章
上一篇:网页设计大师Nicholas Zakas详解CSS3圆角(译文) 下一篇:网页设计师的灵感在来自那里?
回到顶部