此分享内容基于adobe photoshop CC版本，该版本的诸多功能已非常完美的解决了网页视觉设计的诸多问题，例如字体还原系统环境的渲染效果，以及图层或组的CSS样式导出功能等。
首先举一个关于Mac LCD功能使用的例子，小伙伴们，你们用过吗？
字体渲染反馈实际线上效果已经非常的接近真实，这个功能对于网页视觉设计真的是非常有价值！
基本准备
先来确认下你的PS里 是否开启了以下两项从CS6版本就开始支持的网格对齐功能，从此再也无需100%视图来对齐像素网格了。
首选项 —— 常规 —— 选项 ——
调整好你的图形处理器设置，否则会极大的影响你工作的效率。
首选项 —— 性能 —— 选项 ——
移动工具
还在使用command配合鼠标右键的图层选择方式吗？
尝试来习惯使用自动选择功能（类似illustrator的移动选择工具），好处多多，特别在多图层选择，移动等操作上，极大的方便图层操作，稍后会做详细的介绍。
辅助显示
开启几个非常有用的辅助显示
图层边缘
作为当前图层选择的可视化标示，图层边缘显示可以让你很清楚的知道目前所选择的图层，它不会像显示变换控件那样让你抓狂，并且在框选图层的时候清楚的看到选择的图层数（你可以自己在ps中开启测试一下，感受一下两者的区别）
智能参考线
用过illustrator的同学都知道，使用智能参考线能极大的提高元素间的对齐效率，特别对于产品级别的页面，高保真原形的严谨极为重要。
参考线
参考线对于网站设计最为有效的用法是使用GuideGuide插件。
安装的方法也很简单，
!1. 直接从 http://guideguide.me/ 下载该插件的最新版本
2. 双击下载文件启动adobe Extension Manager ，并安装到对应的ps程序中
3. 在PS中，找到菜单——窗口——扩展功能——GuideGuide
GuideGuide最大的好处！
那些数学老师XX早，亦或是体育老师教的数学，都是极大的福音！
字体（T）看着小
调整字体功能中列表显示为超大，没有不大的理由吧，就为看着舒服，用着过瘾（如果你是CS6以下版本，请在设置首选项中找到）类型 —— 字体预览大小 —— 超大
使用形状图形绘制页面结构元素
在CC版本中，圆角的绘制已经得到了很大的优化，不仅可以随时调整圆角大小值，更可以对四个角做不同的大小设置，使得在页面设计中，psd图层更加高效规范。
示例说明几种实现的差别
--可随时调整4角像素值尺寸
--可调整WH（Width，Height）值并保证圆角不变形
--准确可读取WH值信息
正确读取或测量形状图形高宽值的方法：
以此选中图形为例
使用直接选择工具（A），选择所需查看的图层，在选项栏内读取WH值
TIPS：看到数值，938px，而非实际页宽940px，由于CSS中，border是向外描边，那么为得到940的页宽，需要设置容器的宽度为398。因此在PS视觉设计高保真原形的时候，我们也要做同样的外描边才是最规范的。
智能对象及模块化
智能对象是包含栅格或矢量图像（如 Photoshop 或 Illustrator 文件）中的图像数据的图层。智能对象将保留图像的源内容及其所有原始特性，从而让您能够对图层执行非破坏性编辑。
http://help.adobe.com/zh_CN/photoshop/cs/using/WS41A5B796-6846-4e95-8459-95243441E126.html
包裹智能对象的原则
栅格化的图层需要无损随意拉伸缩放
需要频繁编辑的一个组
需要批量使用的单个元素
多文件共享使用的元素模块
智能对象使用的小贴士：
1. 避免过多对象的包裹
2. 裁切智能对象psb文件为内容范围的画布大小，这将非常有利于前端的使用。
类似于这样的按钮或图标，前端可以轻松的从智能对象中导出所需的切片，非常方便，且精确。
模块化
聚划算在今年2013的改版之初即确立了引入模块化的概念，我们没有选择栅格化响应式的布局方式，原因是，聚划算的布局相对简单，我们的主元素就是商品单元items，保证两个尺寸的显示效果，1280宽度尺寸下可以容下左侧类目，1024下收起左侧类目显示完整商品列表。聚划算的各种排序规则，招商规则，资源展现规则等限制了我们在现阶段使用响应式的可行性。产品形态网站，或是信息架构复杂的网站，UED之间要解决高效协同的问题，DPL（Design Pattern Library ）当然是首选，但，如果网站发展较快，变化较多，规模也并非yahoo般级别，那么我建议可以考虑这种思路简单的模块化规则来协同设计。
视觉模块化处理，
将网站标准交互控件，组件，和公共模块视觉化，利用智能对象分别打包导出成单独的PSB文件。当然，在这之前，交互设计已经完成了网站的信息架构及交互方案。视觉就可以更专注于视觉展现的方案。模块化搭建完后的页面移交给前端重构，并且随模块的不断增加做迭代的维护。甚至，前端可以利用组件模块建立一个页面搭建平台，轻松快速的搭建业务需求的产品级页面。视觉设计师需要专注的是，设计复用性强且风格融合度高的规范化模块，以及页面搭建的规范规则。
模版化，
网站资源（banner广告投放，商品图片，专题页氛围图等）有很多需要内外部的设计师来提供，因此网站在做视觉设计的时候就需要充分考虑规范化这些资源模块。
图层整理为前端优化
使用移动工具框选需要成组的图层，Command + G包裹成组，使用Command + Shift + ]将此组排序到图层列表顶端
通常情况下视觉设计师在处理页面设计的过程中，图层其实都是上下混乱的，并会产生大量无用或备用的设计过程图层（大多数时候它们是被你隐藏的）。框选可以很快的选中你需要分类成组的图层，快速群组在一起，置顶之后你甚至可以暂时隐藏它们，通常我都
是这样做的，这样做的好处就是可以避免不必要的误选图层，提高框选效率。全部分组置顶之后你就可以为这些分组命名，并且去除置底的那些无用的图层。（通常情况下提交前端的PSD文件应该全部都是有效信息）
TIPS：CC的bug...
坦白的讲，CC在框选图层功能上实际存在一个极其反人类的bug，当你在隐藏图层的时候选择的是隐藏该组，而非隐藏该组下的单个图层，那么很抱歉，在你框选图层的时候这些“没有隐藏的图层“依然会被选中，从而产生一系列烦人的问题，并且此bug受影响的还包括被锁定的图层。。。
解决方案是，选中该组下所有的图层，并逐一隐藏（这真的很不合理），或者你恰好没有删除低版本的PS，那么抱歉的恭喜你，请使用低版本来完成整理图层的工作吧。。。
图层命名，
列举常规命名：
图层命名的大规则需要按照各自的业务做针对性的处理，通常需要协同前端一起来制定最为合适。
页头:header 登录条:login-bar 标志:logo 侧栏:sidebar 广告条:banner 导航:main-Nav
子导航:sub-Nav 菜单:menu 子菜单:sub-Menu 下拉菜单:drop_Menu 工具条: toolbar
类目:category 表单:form 背景:background 栏目:column 箭头:arrow 搜索:search
搜索按钮:btn-Search 滚动条:scroll 内容:content 标签页:tab 列表:list 提示信息:msg
小提示:tips 栏目标题:title 链接:links 页脚:footer 服务:service 热点:hot 新闻:news
下载:download 注册:register 状态:status 按钮:btw 投票:vote 合作伙伴:partner
版权:copyright 网站地图: sitemap
组合命名规则:
[元素类型]-[元素作用/内容]
主背景图：bg-main
聚划算列表导航：ju-list-nav
总之，设计师使用PS的良好习惯在于，细节，习惯，坚持！！！