恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
看了你的图层分组,我都想砸了你的电脑!!!
0.0°
2016-10-09 原创文章 经验/观点 举报 1689 9 8 0

图层整理的必要性

写在前面

上述的几个案例你是否遇到过,当你打开同事的文件或者自己的文件时,有没有上述几种的反映呢?Image title


1、关于图层的整理术

对图层整理也是一种设计,是对图层结构的一种思考,它不仅有利于清理设计完稿后的无用的设计元素和图层,还可以提高整个工作流程中协同修改的作用。

对整理图层就像是整理生活中的衣柜,如果乱七八糟的堆放各种衣物,那么肯定会在你下次找东西时无从下手,一是浪费时间,二是不知所措。


Image title


图片来自:http://www.hellorf.com 海洛创意



在设计工作中,你会遇到这样的情况吗?

当你在拿到同事的文件时,被眼前井井有条的图层结构所吸引时,并且立马找到相关的元素时,这时你会感叹“哇!好专业”的psd。



Image title


但你在碰到下面几种情况时,就会有一种抓甚至想死的心:

1.在成千上万个图层中,怎么快速找到1px的小细节,想扔键盘的心有木有?

2.打开psd时运行速度特别慢时,想摔鼠标的心有没有?

3.图层杂乱无章没有分组整理时,想砸电脑的心有没有? 


Image title



此时此刻,如果你发现自己有图层不分组的坏习惯时,那么从现在开始,从自身做起,好好来清理一下自己的图层结构,为了让团队协作更快速和高效。

2、图层整理术的优点

1.提高团队协作能力   2.快速找到相关图层     3.文件更专业



3、图层分组方法

用前端开发中代码命名进行整理

比如说:分组时可参考网页代码的结构定义来对图层进行位置上的定义:


Image title


这种定义分组的方式常用于网站界面设计中,根据前端代码的书写基础结构来对页面元素进行分组。更方便的与前端同学进行对接。



按页面内容对图层进行分组Image title



这种方式常用于电商类的专题促销中,以不同的区块进行命名,如:头图区、内容推荐区、返回区等;

当然命名的方式不一定非局限于此,重点是要培养出对图层整理的一种设计习惯,利于自己,方便他人。



对图层组进行颜色的区分

利用Photoshop的图层分组颜色属性,把不同的信息用颜色区分,用于快速区别相应内容;比如:红色组用于重点图层、蓝色用于区别次要图层等。



3、图层整理的3大好处

1、设计出稿前的最后一步,梳理设计并删除多余元素;


2、在最终完稿中,要对该文件中的图层进行必要的梳理和分组,分组建立图层组的最大意义就在于逐一去删除页面中多余的图层,使呈现在页面上的设计更简洁和实用;


3、在梳理图层时,可以发现在设计过程中有意或无意的添加了许多重复的、无用的元素或图层。删除它们就是对设计作品的简洁化整理;不多余一个图层,每个图层都有必要存在的意义;



4、快速找到图层的3种招数

其实,对图层进行分组后,找图层相对来说会很简单,而图层分组的最大目的就是:马上找到图层、马上看清页面结构。

而这样的工作方式也更好的方便前端同事、同组设计同事快速了解图层结构,并且找到相关的内容;


1、加选:按住Shift加单击某个元素,就可以把相应的图层加上一起选中了(此时图层面板选中的图层会高亮显示)

2、框选:选勾中移动工具条中的“自动选择”图层选项,然后放大画布,或缩小画布后,画出选择框,框中想所的对象。(被选定的图层除外)

3、点选:按住ctrl+点击对象,此对象就会被选中。

4、筛选

图层面板中的筛选功能,不得不说这个功能真是太强大了,它把Photoshop完全魔化成一个庞大的档案库,如果遇到图层很多的时候,你可以利用图层的筛选功能。



Image title


那么如果你认为

整理图层是必须的,有好处的习惯。

那么,

请每次做到图层的整理与分组吧。Image title


马良重生 的不错研究室,欢迎关注!

一个非科班出身的电商设计师,新书正在书写中,敬请期待 :)




更新:2016-10-09

收藏

9人已收藏

  • 6

    作品

  • 25

    粉丝

  • 9

    关注

  • 分享实录|C4D&UI进阶 x 搜狗高级设计师
  • 「视频回顾」四昼夜(初级设计师快速进阶) x  应昼雨成
  • 母爱之花[母亲节电商创意]
  • 2013端午[粽子+水墨]
相关标签
设计分享经验

    猜你喜欢

      2016-10-09 原创文章 经验/观点 举报 1689 9 8 0

      看了你的图层分组,我都想砸了你的电脑!!!

      0.0°

      你确定要举报看了你的图层分组,我都想砸了你的电脑!!!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      9
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录