photoshop基础常用对齐技巧心得分享一览
更新时间：2016年9月14日 23:44 点击：1527
今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说基础的常用对齐技巧心得，各位想知道具体心得的使用者们，那么各位使用者们就来跟着小编看下吧。
给各位photoshop软件的使用者们来详细的解析分享一下基础的常用对齐技巧心得。
心得分享：
一、基础操作方式
工欲善其事，必先利其器。
利用参考线对齐。在Photoshop的【编辑】-【首选项】菜单中可以设置合适的网格尺寸。
在设计前期将界面进行设置框架参考线，通过参考线将按钮、文字、图形对齐。
PS参考线小插件-GuideGuide
这是一个非常便捷的画参考线的工具，让你节省了时间去算参考线。在插件你可以输入一些数字，GuideGuide可以通过你设定的单位自动划分号好网格。这个软件最强大的地方就是：可以通过画布中选区的大小生成对应的网格参考线。真是画参考线的神器也!
界面中常用对齐形式
对齐三大招：齐行、居左、居中。(貌似初一就学过，干活却老忘)
齐行式：运用在阅读性文本中，比较长的文本段。一般用在详情页中。(图：猫眼电议)
居左式：这种用的比较多，常常运用在APP的设计中，列表信息展示等。这种对齐方式比较容易阅读，能很好的区分主次文本的层次。(图：淘宝)
居中式：主要使用在信息流式的文本表现方式中。(图QQ音乐)
二、解构分析
有对齐的意识，也进行对齐，但为什么不够高大上呢?设计出来的效果怪怪的……
一般设计师会这样设计，大感觉上也没有什么问题。(下图)
其实对齐也是有规律的，善于发现设计中的联系。
我们来看一下其他几个用户体验不错的输入框设计，凭啥就这么舒服呢?和大家解构一下它们的设计。
小米的登录页。
在小米的登录页设计中，主标题与副标题进行了左对齐。
输入框提示文字与输入框基于中心线对齐，让提示信息和输入框看起来更为整体舒服。
内容划分明确，明确了哪些是需要输入的，哪些只是描述。
苹果的登录页
在苹果的登录页面中更为讲究，标题和输入框利用了不同对齐方式拉开了层次。
请登录标题和取消按钮是左对齐的，而输入框与提示文字则是居中对齐的。
将用户的视线引入到了输入框的上面，从而加强了提示文字与输入框之间的关系，并用大间距拉开了标题和内文的层次。
在对齐的方式里我们找到了规律，层级关系，框框框!
通过对其方式来区分内容的层级关系，这就是隐形对齐框的作用。将信息层级通过这种方式罗列在用户眼前。让用户最近视角展示产品的核心信息。提炼出用户在场景中最为关注的诉求，解决用户的问题。
对齐也是有层次的。有左对齐、右对齐、居中对齐。(都懂都懂，就是用不好)左对齐和右对齐主要是对屏幕内容的规整性，居中对齐则是对内容文本的划分。
三、常用间距
将框框框融入到APP界面中，将主要的，用户想找的内容突出出来。
在设计中一般间距设定的大小单位10px，这样更容易统一整个画面的一致性。
在界面中常用间距来划分内容的层级关系，让内容与导航取分出来。
在导航上的左右间距是20px，而在内容列表信息程序时左右间距调整到了30px。
通过这种方式区分了上下层级的关系。
那么在主文本信息中还将上下间距统一一致都设定为30px，使整个内容的边框看起来更为整体舒服。
我们常会设计到双行文字的列表，QQ的设计是120px，随着设备屏幕的变大，更加注重了页面的留白。为了加强内容的突出性。我在设计中高度设定为130px
再往深的走，界面中还会有其他的信息。如时间、消息气泡等。它们的对齐模式会根据字号大小进行控制。
为了保证内容阅读的舒适性，字号大小不一致的文本我们还会用到居中对齐的方式(比如，上图中的主标题和时间的对齐方式)，让内容显得更为规整。
总之，以内容为中心的设计能让用户快速找到想要的。使用正确的对齐和间距，能让界面更为整齐，信息更为明确。
好了，以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的基础的常用对齐技巧心得解析分享的全部内容了，各位看到这里的软件使用者们，小编相信大家现在那是非常的清楚了技巧心得了吧，希望小编上面的对齐的技巧心得能够给各位软件的使用者们带去有用的帮助。
相关文章
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程，各位想知道具体制作方法的使用者们，大家就快来看一看小编给...2016-09-14
- 今天小编在这里就为各位photoshop的这一款软件的使用者们带来了想象力无边界超现实合成图，各位想知道这些超现实的合成图都是些什么呢?那么下面各位就来跟着小编一起看...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程，各位想知道具体制作方法的使用者们，那么大家就快来看一看教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说合成爱丽丝漫游仙境的小人国场景制作教程，各位想知道具体的合成制作方法的使用者们，那么各位就快来...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程，各位想知道具体后期处理步骤的使用者们，那么大家就快来跟着小编来看...2016-10-02
- 今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程，各位想知道方法的使用者们，那么下面就快来跟着小编一...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下火龙变冰龙的制作教程，各位想知道具体的制作步骤的使用者们，那么下面就快来跟着小编一起看看制作教程吧。...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说制作延时摄影城市照片效果的教程，各位想知道具体制作方法的使用者们，那么就快来看看教程吧。 给...2016-09-14
- 这篇文章算是超级入门级别的了，我们下面来给各位介绍在photoshop画斜线/直线/虚线的教程了，希望下面这篇文章给你入门来帮助。 PS怎么画斜线 选择铅笔工具，或者画笔...2016-09-14
- 有时我们接受或下载到的PSD文件打开是空白的，那么我们要如何来解决这个 问题了，下面一聚教程小伙伴就为各位介绍Photoshop打开PSD文件空白解决办法。 1、如我们打开...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说制作菱形编织图案的无缝纹理背景的教程，各位想知道具体制作方法的，那么下面就来跟着小编一起看一看吧。...2016-09-14
- photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计暗红色金属文字效果的制作步骤，各位想知道具体制作步骤的使用者们，那么各位朋友们就快来跟着小...2016-10-10
- 不知不觉功夫熊猫这部电影已经出到3了，今天小编在这里要教大家的是用Photoshop制作功夫熊猫3的海报，各位想知道制作方法的，那么下面就来跟着小编一起看看吧。 给各...2016-09-14
- Photoshop的这一款软件小编相信很多的人都已经是使用过了吧，那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程，想知道制作步骤的玩家们，那么下面...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说下AI源文件转photoshop图像变模糊问题的解决教程，各位想知道具体解决方法的使用者们，那么下面就快来跟着小编...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说一说日系小清新通透人像的调色教程，各位想知道具体的调色步骤的使用者们，那么下面就快来跟着小编一起看一看...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14