现在公司里做事,基本都是团队协作;网页和UI设计师,只要是显示在屏幕上的独立网站,都会与前端接触;有共同的沟通方式就是最好的提高效率的方法;


推荐用驼峰命名法在命名做组名;

编组要合理;

不要合并图层,如果想看着舒服,推荐用智能矢量图层;

做的元素和央视便于复用

1、养成编组和智能矢量图层的习惯

PS常用的分类方法有两种,

一是编组,二是智能矢量图层;

还有一个关联方法,就是用链接的的方式;个人不推荐用链接;推荐用编组或者智能矢量图层;

对PSD进行分组,不仅可以可以方便自己,而且对以后与别人与维护都非常搞笑;

图层编组后,可以方便设计师对快速查找目标图层;也可以快速的移动,比如设计banner的时候,可能选择中间布局;也可以选择右对齐或者左对齐;这时候如果一个一个的移动,那就太苦逼了!图层还可以整体删除,显示,隐藏,修改透明度,批量混合模式,图层样式,蒙版等;对图层操作就是相当于批量操作单个图层;

选择图层,我用的是alt+鼠标右键;很多设计师也喜欢用ctrl+左键;但是左键在图层锁定,或者选择编组内图层的时候就不好使了;这时候ALT的方法可以完全hold住全场,指哪儿打哪儿!

在做比较大的设计稿时候,经常看不清全局的分组,这个时候只需要点击鼠标右键,就可以出来了;这个非常有用;可以非常直观的看清楚设计稿之间的关联!

QQ图片20150826233920

 

聊一聊智能对象:

这个我个人比较喜欢的;我一般用在外部素材引入的时候用;

最最常用的是做效果图展示的时候,用这个,简直的简单粗暴有效果!

如果想把图层/组转成智能对象;方法如下;

QQ图片20150826234156

需要注意的时候,智能矢量对象不一定是储存PS的文件,也可以储存AI的文件;等,是在里面另外开辟一个空间储存文件信息的;如果修改的话,可以双击打开,就可以修改了;

关于效果图的用法,这个应该是最常用的一个用处了;

这个可以在我以前做的:http://taobao.fm/archives/1179这里面查看;

千万不要合并图层,因为这是不可逆的操作!

千万不要合并图层,因为这是不可逆的操作!

千万不要合并图层,因为这是不可逆的操作!重要的事说三遍!!!

2、推荐使用驼峰命名法对编组命名

驼峰命名法就是看起来骆驼的背部一样,有高有低的;这样一眼扫过去就直接知道意思了;这个命名法是来自编程语言里的;编程语言里由驼峰命名法还引申到了匈牙利命名法,但是匈牙利明发对于设计者来说就并没有什么软用了!

很多人也使用【-】链接的方法,因为这个在输入的时候不好输入;下面演示下驼峰命名法的优势

wrapTitle    downloadBtn 这种的就是;第一个单词首字母小写,其他有意义的单词首字母大写;

后面写大写字母的时候,不需要切换到大写字母的;只需要按住shift,然后点所需要的字母即可;多试几次你会彻底爱上驼峰命名法的,抛弃那些用-来链接的方法吧,那个太low了;

实例如下:

网页设计框架命名

container:这个是属于最顶级的一个组;是用来包裹所有组的;图中我没有用;因为我感觉这个是前端撸代码的时候需要注意的,设计师做的时候没必要用这个;与他相似的还有wrap、wrapper、page;具体就看不同人的习惯了;

header:这个就是顶部的意思;包含logo之类的元素;

logo;这个就是网站的标示;一般都是用logo来表示;但是也有用严格模式来表示;headerLogo这种表示header下面的logo组;这样的更严格,也更容易理解;

nav:这个一般用来表示导航掉;是典型的网页元素,一个网页可以没有header。但是肯定会有nav的;这部分还可以用navbar来表示;

banner:这个是网页最突出的页面,一般做轮播图;属于海报宣传的页面,所以用banner来表示;

sider:侧边栏,这个也有用sidebar表示,

footer:表示页脚;这里是结束的标志,也有用版权部分来表示,名为copyright;

命名时候需要注意的

1、元素类型-元素作用/内容;比如

搜索按钮:btnSearch;

登录表单;formLogin;

新闻列表:listNews

2、设计到交互行为的元素命名:

通常会有正常,悬停,点击,已浏览等不同的样式;

悬停 ::hover(注意是:hover。这个属于CSS的伪类)、

点击:click

已浏览:visited

常用的命名汇总

页头 header 标签页 tab
登录条 oginbar 文章列表 list
标志 logo 提示信息 msg
侧边栏 sidebar 小技巧 tips
广告条 banner 栏目标题 title
导航 nav 链接 links
子导航 subNav 页脚 footer
菜单 menu 服务 service
子菜单 subMenu 热点 hot
下拉菜单 dropMenu 新闻 news
工具条 toolbar 下载 download
表单 form 注册 regsiter
栏目 column 状态 status
箭头 arrow 按钮 btn
搜索 search 投票 vote
搜索按钮 btnSearch 合作伙伴 partner
滚动条 scroll 版权 copyright
内容 content 网站地图 sitemap
       
       

 

 

 

 

~~~~~~