基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧

來源:優(yōu)設(shè) 作者:Micu設(shè)計(jì) 學(xué)習(xí):4739人次

對(duì)齊與間距,無非左右上下的關(guān)系,怎樣才能讓符合用戶的視覺感知呢?蕓蕓眾生,紅塵滾滾,有幸讓他(她)瞄上一眼,留下個(gè)“很舒服”的第一印象,非常重要,而且在實(shí)際設(shè)計(jì)的流程中,如果經(jīng)常因?yàn)槟睦餂]對(duì)齊被批,會(huì)影響整個(gè)團(tuán)隊(duì)效率,你在團(tuán)隊(duì)中信任度也會(huì)降低。不要迷信什么大神了,還是把自己當(dāng)前水平該掌握的基礎(chǔ)知識(shí),拿到手,更靠譜。

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

說的玄乎點(diǎn)是設(shè)計(jì)師的態(tài)度,說大白話就是基礎(chǔ)不牢固,還總要建高樓。好,不念經(jīng)了,說基礎(chǔ),希望能發(fā)揮點(diǎn)作用。

一、基礎(chǔ)操作方式

工欲善其事,必先利其器。

利用參考線對(duì)齊。在Photoshop的【編輯】-【首選項(xiàng)】菜單中可以設(shè)置合適的網(wǎng)格尺寸。

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

在設(shè)計(jì)前期將界面進(jìn)行設(shè)置框架參考線,通過參考線將按鈕、文字、圖形對(duì)齊。

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

PS參考線小插件-GuideGuide

這是一個(gè)非常便捷的畫參考線的工具,讓你節(jié)省了時(shí)間去算參考線。在插件你可以輸入一些數(shù)字,GuideGuide可以通過你設(shè)定的單位自動(dòng)劃分號(hào)好網(wǎng)格。這個(gè)軟件最強(qiáng)大的地方就是:可以通過畫布中選區(qū)的大小生成對(duì)應(yīng)的網(wǎng)格參考線。真是畫參考線的神器也!

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

界面中常用對(duì)齊形式

對(duì)齊三大招:齊行、居左、居中。(貌似初一就學(xué)過,干活卻老忘)

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

齊行式:運(yùn)用在閱讀性文本中,比較長的文本段。一般用在詳情頁中。(圖:貓眼電議)

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

居左式:這種用的比較多,常常運(yùn)用在APP的設(shè)計(jì)中,列表信息展示等。這種對(duì)齊方式比較容易閱讀,能很好的區(qū)分主次文本的層次。(圖:淘寶)

基礎(chǔ)知識(shí),分享常用的對(duì)齊技巧_www.theoat.com.cn

居中式:主要使用在信息流式的文本表現(xiàn)方式中。(圖QQ音樂)

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
寶貝^O^卜乖2018-06-02 04:17
加油
yangzwl2017-05-28 10:11
表示菜鳥看不大懂
來著不懼_噢耶2017-05-28 09:55
值得學(xué)習(xí)的教程
笑容最美2017-05-28 09:18
剛接觸PS感覺好難
凡星20122017-05-28 07:54
女友有一孿生妹妹,千方百計(jì)的哄了過來,比她姐有情調(diào)多了,我們?nèi)靸深^的約會(huì),還經(jīng)常出去玩,女友一直沒察覺,約好了就這樣維持下去。那天去她家吃飯,她媽媽說:“佳佳沒少讓你受氣吧,我們就這一個(gè)孩子,從小慣壞了!

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!