《WEB设计指南》.pdf

WEB设计指南！ 文件管理 我们从PS文件管理开始，教大家一些古老但是却很有效的管理外部文件的方式。也就是说， 如果你连文件管理都不能做的很靠谱，那里面的设计再棒又有什么用呢？ 巩固你的PSD 千万不要撒欢儿似的使用Ctrl/Cmd+N（创建新文件）：用最少的PSD文件个数完成你的 设计。 合理命名文件 等等，我凌乱了，是应该用 新.psd 还是最新.psd ？ 话说最终版本2.psd 怎么样？ 将用到的图标，素材等和PSD文件放在一起。 将用到的 photos/icons 文件和PSD放在同一个文件夹，并命名，千万不要放到桌面上一 个叫”一些东西”的文件夹。 将你的UI元素制作成模板 大型网站需要这种UI元素的统一，建立一个统一的模板对前端工作人员也是有益的，更多 内容可以搜索一下CSSSpirit。 将文件同时保存在云端 Boss:Sohpie，这个文件在哪？怎么给我？ Sohpie:我已经放在网盘/共享文件夹了～ Boss:GoodJob! 一定要记得管理好文件会给你带来巨大的好处。 图层 和你的基友协同工作的过程中，可以说对PSD图层的命名和管理是最大的冲突所在，一堆 不知所云的新建图层和图层1副本只会让基友抓狂，想爆你菊花！ 命名图层而且要合理且精确地命名 不要嫌麻烦，一旦设计的层次多了，要找到一个图层就非常困难。对每一个图层都要命名，” 图层1副本 副本2″这样的图层名字是要严格禁止的。 合理使用图层分组（图层文件夹） 图层分组可以更快地看清楚整个文件的架构，并且可以很快的找到想要的那一层。 删除不必要的图层 你是一个图层堆积狂吗？ 删除不必要的图层会使文件更易用。 整合合并共同元素 把一个logo复制5遍并且分别为他们设置不同的样式是没有理由的，如果可以的话，尽量 做一个主图层，其他的把样式设置在一个这个对象上。 使用图层复合和智能对象 智能对象可以不用建立很多PSD文件，同时在修改的时候可以反映到任何一个使用了同样 的智能对象的图层。 一定要记得好好的给图层命名哦！ 图片 对图片的处理一切都要是非破坏性的，你肯定不希望添加了不可挽回的效果导致图片或者按 钮再也无法被继续修改了。相信我！哪怕只犯一次，也会痛不欲生。 不要强行拉伸或者压扁按钮。 最好的情况：尽量让所有元素保持矢量，这样你在拉伸的时候可以保持元素的精度，否则的 话将矢量文件备份，再进行操作，以便随时恢复。 将遮罩统一化 将遮罩放在图层组上而不是图层上，这样修改的时候可以非常方便的应用到整个组的图层。 对齐 对齐网格，对齐像素，对齐任何一切可以对齐的东西，做一个火眼金睛的像素眼！ 谨慎使用混合模式 那个颜色是怎么得到的？ 别告诉我你用了两层叠加，4个副本和16个颜色的渐变混合的啊 啊啊? 非破坏性设计 善用蒙版，智能对象，各种方式尽量保证原图没有没损伤任何内容。 一定要记得哦保持可扩展性。 字体 不管PS和浏览器的字体渲染多么不一样，Photoshop字体的问题还是无法得到完美解决， 但是你可以控制的是，设计里面文本的各种参数和属性。 使用整数值 使用PS的字体调整工具调整字体，尽量给字号一个整数。 使用正版字体 不要超越版权界限，确保你所使用的字体都是正版的，保护其他同样和你一样职业的设计师 们。 不要随意拉伸字体 除了会使字体变得难看模糊之外， HTML/CSS也无法实现这种效果。 控制你的文本框（PS文本框） 先赞一下使用文本框（PS文本框）的你，只是不要让他们比实际的文本长5公里。 使用分开的文本框（PS文本框） 标题？单独用一个文本框处理，正文？也单独使用一个文本框处理，不要混合在一起。 一定要记得让你的PSD在控制之中。 特效 适量的使用图层样式和滤镜，更多的滤镜不一定等于更好的设计。 适当地使用颜色叠加 我们把这个蓝色的形状对象加一个红色叠加吧（其实这个有时候也会用到，最好是直接通过 双击方块更改颜色，而不是再次进行颜色叠加） 平铺纹理图像 如果你的设计中底纹不能通过平铺重复的背景图来达到，劝你放弃这个底纹。 达到目的就行，不要刻意炫技 设计好不好不是靠特效数量多不多来决定的。 色阶问题 话说，这个图层应该是一个渐变或是32个略有不同的颜色的条纹？我 合理的使用描边