|
|
发表于 2012-3-28 10:05:40
|
显示全部楼层
|阅读模式
来自 广东省广州市天河区
Jbos乔帮主说过：“好的设计师，不会使用烂木板作为衣柜的背板”。虽然你最终稿的设计很美，但你的psd很糟糕，当别人用你的psd的话会觉得你这个设计师很不负责任的。
一份让人觉得可怕的psd有如下特点：
1. psd 文件尺寸 竟然有71M，
2. psd 图层上百个，各种看不懂的图层。
3. 设计稿完全是个插画，怎么看都不像个网页，无从下手切图。
4. GUI为矢量图，边界不清晰。
合理分层，结构清晰
不管你做的是设计，还是插画。结构设计也是一种设计，当你合理并且清晰的规划好你的设 计稿，那么这个设计就有十之八九了。
如何对网页设计稿进行分组分层呢？
1. 按框架分。(网页分 ，头部head ， 主题 main，底部 foot，以此类推)。
2. 按模块分。(每个小原件，小装饰，合成一个大物件就能做为一个模块)
3. 按属性分。(这点比较重要，设计师如果做的是web界面，需要了解什么是“图片输出” 和 “代码输出”,
原因是当切图的时候，我们需要将 “代码输出”类型所属的图层隐藏掉，然后再进行导出)。还有一些注释(注释好重要，后面有讲)相关的东西。
4. 按状态分，(web设计跟插画设计 一个很大的区别就是 web设计是有交互的，需要针对 各个交互状态进行分层分组)
在这里解释一下什么是“代码输出”和“图片输出”
“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的，如后期可编辑的文字(大段文字，小按钮里的宋体文字)，圆角，渐变效果(高级浏览器可实现)。
“图片输出” 则是指出了代码输出以外的东西，如图标icon，背景效果，以及一些 使用代码不可实现的文字效果(如艺术字体)。
下图是一个良好结构的示范：
http://www.itlead.com.cn/article/html/150/2012-03-27/content-8157.shtml本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿
，本站保留追究责任的权利。
|
|
