<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          UI設計中可借鑒平面設計技巧

          杰睿

          UI設計是隨著智能設備的飛速發展、互聯網行業的發展以及農林牧漁傳統行業的急于轉向而興起。主要是企業對移動設備交互界面的重視。在企業越來越重視界面設計的今天。傳統的平面設計能為現在我們的UI設計提供哪些參考呢,我們能從中借鑒的技巧有哪些?今天就從版式設計說起。

           

          版式設計

          在UI設計中版式設計不言而喻是非常重要的。版式設計就如同蓋房子先要搭好框架一樣。一款APP視覺呈現是不是符合商業性并兼具審美。其中的版式設計是其核心。而在平面設計中版式設計也是一個作品的核心。平面設計長時間的發展積淀了相當多實用的技巧和方法。

          一、形勢方法

          版式設計中形勢方法指的是、畫面的表現方法和原理。說白了就是畫面要出什么效果就用什么表現手法而已。平面設計中形勢方法可以分為。虛空留白、比例適度、對比調和、變化統一、變異秩序、節奏韻律、重復交錯、對稱均衡等。今天我們舉例分析一下前四個。

          1、虛空留白(適合現在極簡設計風格)

          這種版式設計主要是突出主題,給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用,能夠營造出高品質的界面風格。但是如果一旦運用不得當容易出現界面空或單調的感覺。

          2、比例適度(協調UI中各部分內容)

          平面設計中所說的比例適度主要是整體和部分的協調,采用合理的比例方法,如:黃金比例、等差等比。去協調各部分的關系使各部分要素產生聯系。在UI版面布局中正是需要調節和有機的組合各要素在有限的界面里的合理性。

          3、對比調和(UI中信息層級的表現)

          對比調和在平面設計中是經常用到的,整體版面要調和,局部版面要對比。對比是強調主次關系。對比調和用到UI設計中可以做到設計內容在主次關系的層級化。在統一調和的界面里又充滿了對比的小情調。這正是平面不平之所在,也是一個優秀的界面所必備的。

          4、變化與統一(是UI突破同質化的一種方法)

          變化與統一是形式美法則的總則。是其他方法方式的一個總結。變化所說的就是在設計中要有所創新不能總墨守成規,統一是設計要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統一也許是突破現在APP同質化的一種方法。在現在APP同質化嚴重的情況下我們能做到APP的風格統一又不墨守成規尋求變化才是營造自己風格的一種方法。

          這些平面設計里的形式美法則在UI設計中同樣受用。這些表面形式在做banner圖構圖和創意上也特別有用。

          二、版式設計基本類型

          版式設計的基本類型有特別多。我們這里著重分析其中對UI設計最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個基本類型。

          1、骨骼型(類似網格構圖)

          這里說的骨骼型就是在版式構圖中,進行橫豎向的分欄。能容嚴格按照分欄排列。版面效果沉穩厚重,井然有序,如果橫豎分欄交叉排列還可制造靈動活潑的版面氣氛。非常類似網格構圖的方法。在UI設計中也很受用,可以很好的規范個元素的位置。(如果你對目前的界面設計一籌莫展,不妨可以試試這種方法)

          2、左右分割型(瀑布流)

          左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應用是隨著扁平化卡片化的興起,在移動端界面尺寸的限制下,開始進行了信息的分割處理。橫向的卡片式布局使得一屏內所看到的信息受到了極大的限制(不利于用戶體驗,卡片式并非萬能)。所以就應用的左右分割的布局。左右分割有利于信息的呈現,可以與瀑布流結合。

          3、曲線型(UI方向1)

          曲線型主要表現的是韻律和節奏,可能符合一部分小眾APP設計界面設計,充滿了特色和戲劇性。我覺得有特色的界面設計是這些小眾APP的設計核心。可以利用另類的小眾的設計做吸引。

          4、滿版型(UI方向2)

          滿版設計在平面設計中主要表達大方、舒展的設計風格。在UI移動端界面設計中寸土寸金?,F在的扁平化,極簡設計風格都在留白提升逼格。但是未來極簡設計終將過去,我們面對的還是海量信息。

          結束語

          版式設計是平面設計的一部分,也應該是UI設計的一部分。這里僅僅是說出了版式設計的一點點內容,部分的形式美法則和版式設計的基本類型。還有很多很多對UI設計有利的點沒有發掘。站在巨人的肩上可以看的更遠,平面設計就是我們前進的加速劑。

           

          本文由 @彪形大漢 原創發布于人人都是產品經理。未經許可,禁止轉載。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          作品就要不斷打磨,這些細節點都要注意了!

          杰睿

          今天來優化一張作品

          今天我們來看一下學員作品并且優化一下!

           

          在優化之前,你們能不能看出作品還存在什么問題呢?

           

           

          是不是感覺已經是一張完成度很高的作品了,那它能不能更好呢?

           

          當然可以!我們來看看如何優化。

           

           

           

          第一步 優化構圖

           

          原圖的構圖雖然感覺挺有意思,但是并沒有做到位,對于新手來說,這種構圖也是相對比較難的,前期我建議大家可以選擇一些相對不易出錯的構圖方式,比如元素圍繞主體,營造畫面沖擊力的居中構圖。

           

           

          1.可以把元素聚集到中心周圍,讓畫面緊湊,飽滿,做出向外沖出的效果。

           

           

           

           

           

          2.可以添加兩根前后貫穿空間的光帶,增強沖擊力,讓構圖更有張力!

           

           

          這樣的構圖簡單并且容易出效果!

           

           

           

          第二步 色彩調整

           

          1.飽和度:

          原版畫面中這一層次看起來是不是特別重,導致畫面的節奏一下有點亂掉了。而且整體飽和度相對比較高,有點油膩!

           

           

          我們要適當降低畫面中部分層次的飽和度,這樣才會使整體更加高級,可以看下優化之后的效果:

           

           

          是不是舒服多了。

           

           

           

          2.統一色調:

          我們做圖的時候主體和環境要有一些呼應,這個飛碟飛碟正面有點太綠了,缺少一些呼應環境的顏色,這樣就會感覺和畫面有些割裂感,可以增加一些環境色,使其統一呼應到一起。

           

           

          我們看下前后優化的對比效果:

           

           

          這樣就和諧多了!

           

           

           

          第三步 優化空間

           

          首先我們來看原圖,是不是會覺得畫面中心有一點空,元素都在外部,導致整體不夠飽滿:

           

           

          所以我們在優化的時候,把元素平均的分布在畫面的每一個地方,使空間看起來更加的均衡:

           

           

          現在元素雖然均衡了,但是并沒有產生前后關系,所以我們讓后面的元素更弱一些,分幾個層次。

          如下圖:

           

           

          當我們把這樣的元素層次放在畫面里之后,看起來就會更加的精致飽滿,空間感十足:

           

           

           

           

           

          第四步 增加畫面趣味性

           

          其實增加趣味性的方法有很多,比如我們在這個畫面融入了很多表情,可以讓畫面更加生動。

           

          除了這樣的方法,其實一些小小的改動有時候也可以讓畫面變得更加趣味一些。

           

          比如:

          原版的飛碟太正了,顯得呆呆的,這個時候我們可以把主體歪一下,一下子它就活潑了。

           

           

           

          再比如:

          有時候元素直接漏出來顯得比較生硬,如果我們利用一層一層的波紋,藏住元素,或許也可以巧妙地增加畫面趣味性:

           

           

           

          效果還不錯吧!

           

          最后我們加上文字,看看整體優化前后的效果!這是不是要比之前的穩很多呢:

           

           

           

           

           

          總結

           

          最后,我們再來總結一些知識點吧:

           

          1.構圖:構圖的時候就要要注意整體的飽滿度,畫面穩定,元素分得太分散就會不聚焦了。

           

          2.顏色的飽和度:主體>元素>背景。

           

          3.空間:畫面不能太空,要有節奏的把畫面每一個角落都照顧到,其次我們要在視覺上有前有后,增強縱向空間上的層次感。

           

          4.趣味性:增加畫面趣味性除了利用表情以外,還可以用一些微小的變化去實現,比如歪著的可能比正的活潑一點,再比如元素的穿插互動也可以讓畫面增趣不少,大家可以多多嘗試!

           

          以上就是今天和大家分享的內容,希望對大家有所幫助!



          作者:菜心輕量文
          鏈接:https://www.zcool.com.cn/article/ZMTQ1OTYxMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          這幾個知識點終于解決了我配色的一大難題!

          杰睿

           

          1.亮色與重色的比例

           

          我們在設定界面風格的時候,少不了顏色的配比,但顏色一定是講究平衡的,其中一個最重要的平衡就是明暗的平衡,如果你的界面全屏都是很亮的顏色,那就會導致非常的刺眼,比如像瑞文同學的這個顏色設定:

           

           

          就是過于明亮了,其實當我們的顏色過于明亮時,最常用的一種方式就是,直接用黑色去壓住亮色,像下面這組圖標的做法一樣,減少亮部顏色,直接增加黑色:

           

           

          這樣就不會那么刺眼了,當我們明白了底層原理之后,再去優化配色,我們看前后的變化:

           

           

          這樣就會比之前舒服很多,當然,也可以試試頭圖變成黑色,按鈕變成綠色,把重色面積繼續加大,但不管哪一種,都會比之前全是亮色要好很多!

           

           

           

          2.這個改動可愛了太多

           

          小A同學是一個非常有潛力的同學,但是最開始交上來的吉祥物作業,也不是很理想,效果如下:

           

           

          話不多說,我們就改動一個點,五官緊湊,看看前后效果對比:

           

           

          可愛的程度完全不在一個檔次,我們再看看小A同學后面的延展效果:

           

           

          比之前強了很多很多倍,就是因為一個五官緊湊。

           

           

           

          3.對顏色的敏銳度

           

          我們在做練習的時候,很重要的一個鍛煉點就是視覺敏銳度,能夠敏銳的發現哪里不舒服,這個真的很重要。

           

          而視覺敏銳度里面就有一個維度是顏色,比如我們在看下面一兜糖同學做的質感圖標作業:

           

           

          我們應該快速的看出,第一個圖標顏色不是很和諧,沒有后面兩個那么舒服,主要是那個藍色有點臟,我們看優化后的三個圖標:

           

           

          就比之前要統一舒服很多。

           

          當我們的練習達到一定量時,敏銳度自然就會提高很多,所以一定要多去練習,把敏銳度這一塊提高上來。

           

           

           

          4.綠色好難配啊!

           

          這是潘子同學的疑惑點:

           

           

          他感覺綠色好難啊,第一次交上來的作業如下:

           

           

          先不說造型問題,就光說顏色,就有點單薄,也有點太亮了,還有就是顏色比較正。

           

          其實我們在配綠色的時候,只要把綠色加一點藍色,或者加一點黃色就會讓顏色好看很多。

           

           

          后來潘子同學把顏色進行了優化:

           

           

          這樣就比之前還要多了。

           

          還有包括檸檬同學用的綠色:

           

           

          也是比較好看的。

           

          這回再用綠色的時候,大家清楚怎么好看了吧!

           

           

           

          總結

           

          以上就是今天和大家分享的一些知識點啦,大部分是關于顏色的,顏色敏銳度、綠色怎么配,明暗的對比等等,顏色是一個非常重要的視覺維度,希望大家都能重視,并且多多練習。提高自己的色感!

           


          作者:菜心輕量文
          鏈接:https://www.zcool.com.cn/article/ZMTQ2NzIzMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          圖片海報不會做?6種方法提高形式感!

          杰睿

          在任何時候,海報的圖片處理都是設計師不可避免的一個步驟,運用對色調的處理,構圖的改變,甚至于風格化處理來調整圖片,使之能夠更加的適合版面,我們今天分享的就是通過對圖片的處理來塑造不同風格海報的設計。

           

          01-

          酸性液體金屬效果處理

          酸性風格它的體現形式通常是鐳射紋理,金屬玻璃材質,3D物體材質等,其中很多人都好奇金屬玻璃材質的做法,也就是如何將普通的圖片轉換成酸性圖片,接下來我們將講解酸性圖片效果的處理方法,二話不說,先上效果圖:


          步驟一/step 01

          導入已經摳好的素材,快捷鍵ctrl+shift+u作去色處理

           

           

          步驟二/step 02

          ctrl+j復制一層,ctrl+i反向一下,并設置模式為【差值】,ctrl+e合并這兩個圖層,這一步驟要重復2-3次左右,會形成這樣的效果,做好后的效果有點丑,但是沒關系,我們接著往下做。

           

           

          步驟三/step 03

          將圖形轉化為智能對象,執行命令:濾鏡-模糊-表面迷糊(數值自定,具體數值可以自行修改,主要將黑白部分過度更加柔和一些)

           

           

          步驟四/step 04

          執行命令:濾鏡-風格化-油畫(數值自定,這一步驟可以將黑白之間的過渡更加柔和,形成液體金屬的最終效果)

           

           

          步驟五/step 05

          執行命令:濾鏡-濾鏡庫-塑料包裝(數值自定,這一步驟還是處理黑白之間的過渡,使之更加柔和),最后可以調整一下亮度和對比度,使之與金屬更加相似。

           

           

          步驟六/step 06

          最后排版上文字,海報就完成啦。

           

           

           

           

           

          02-

          復古潮流風藝術海報

          半調網屏模式作為印刷中的重要方法,有著其特殊的處理藝術效果。在ps中,通過色彩模式可以將圖片的效果處理成半調網屏的像素狀效果。它有著復古潮流的藝術效果,下面我將講解如何在ps中給圖片添加半調網屏藝術效果,同上,先上效果圖:


          步驟一/step 01

          在PS中導入圖片,在這種潮流海報中,我們追求特殊風格海報設計,可以在摳圖時故意粗糙的摳圖出來,并執行命令:圖像-調整-黑白

           

           

          步驟二/step 02

          執行命令:圖像-模式-灰度,再次執行命令:圖像-模式-位圖,調整參數像素設為300,方法使用半調網屏,點擊確定;

           

           

          步驟三/step 03

          在上一步點擊確定后出現以下界面,頻率越小,效果越強烈,越大效果越輕,角度設置像素格的旋轉角度,形狀可以自行嘗試選擇,我這里選擇的是菱形;

           

           

          步驟四/step 04

          我們需要把位圖模式轉換成RGB,需要執行兩次命令,第一次執行:圖像-模式-灰度,第二次執行:圖像-模式-RGB

          接著是將弄好的圖片去掉白色底背景,在通道面板,按住ctrl鍵,鼠標左鍵點擊其中一個通道,得到白色選區,快捷鍵:ctrl+shife+i反選選區,快捷鍵:ctrl+j復制圖層,隱藏下面的圖層,得到了一個半調網屏的圖片。

           

           

          步驟五/step 05

          最后排版上文字,就可以得到一張復古潮流藝術風海報。

           

           

           

           

          03-

          炸裂風格圖片處理

          接下來休息下,我們來做一個非常簡單,但又非常好看且具有形式感的圖片處理方法,炸裂風格圖片海報,調整比較細的方塊可以有刺繡效果,非常具有視覺沖擊力,同時也能使版面產生非常強烈的層次感與形式感。先看最終效果:


          步驟一/step 01

          只需將圖片導入PS,執行濾鏡-風格化-凸出,這里可以自行調整參數

           

           

           

          步驟二/step 02

          在版面上排版圖片和文案,這樣一張炸裂風格的海報就做好了。

           

           

           

           

           

          04-

          長虹玻璃風格海報

          長虹玻璃效果顧名思義,就是像玻璃樣式的效果,他能給人一種朦朧的美感,與“模糊”有點類似,它比較適合潮流時尚的一些產品海報設計時使用,尤其在電商海報中特別常見,接下來我們來詳細講解這種效果的做法吧,先上效果圖:


          步驟一/step 01

          在ps中新建一個畫布,填充一個50%的中性灰,用矩形工具繪制一個細長的矩形,填充顏色為黑白的線形漸變;

           

           

          步驟二/step 02

          復制漸變的矩形框,填滿整個畫布,全選復制出來的矩形框,郵件轉換為智能對象,快捷鍵ctrl+shift+s存儲為psd文件,注這是后期用來置換的文件

           

           

          步驟三/step 03

          在畫布中倒入我們準備好的圖片文件,復制一層,執行命令:濾鏡-模糊-高斯模糊;

           

           

          步驟四/step 04

          執行命令:濾鏡-扭曲-置換,在跳出的頁面設置水平和s垂直比例都為50,置換圖:拼貼,未定義區域:折回,點擊確定后選擇剛存儲的用來置換的文件;

           

           

          步驟五/step 05

          將剛才線形漸變的矩形置于最上層,混合模式改為柔光,并且調節下透明度,這樣長虹玻璃效果就完成啦。

           

           

          步驟六/step 06

          選取工具選擇需要的部分執行蒙版,就可以得到一半有玻璃,一半沒有玻璃的效果,然后排版上文字,海報完成!

           

           

           

           

          05-

          3D炫彩海報

          3d炫彩海報適用于科技,創意等風格呈現時使用,它的本質是將一張圖進行一種3d化處理,制作起來也是相當的簡單,且特別能提升版面的形式感與立體感,制作非常簡單,我們一起來做下唄,老規矩,先上圖:


          步驟一/step 01

           

          首先我們需要找一張顏色特別豐富的圖片,最好是像這種發光的海報,執行命令:濾鏡-扭曲-旋轉扭曲,設置相應的數值

           

           

          步驟二/step 02

          執行命令:3d-從圖層新建網格-深度映射到-平面,把3d面板里面的預設改為【未照亮的紋理】

           

           

          步驟三/step 03

          在3d里面調整合適的角度后,在圖層面板選擇圖層,點擊鼠標右鍵-柵格化3d,快捷鍵ctrl+t將圖層調整適合大??;

           

           

          步驟四/step 04

          最后排版上文字,海報就完成啦!

           

           

           

           

          06-

          塑料薄膜風格海報

          最后一種是塑料薄膜風格海報,這種效果相對來說比較復雜,所以放在最后一個說,雖然不涉及圖片處理,但是對于海報設計來說可以說是錦上添花的一種存在,他能讓海報具有一種光澤的質感,使其更顯層次感和形式感,這種海報在店招海報或者產品海報中比較實用,廢話不多說,來一起來做下吧,還是老規矩,上效果圖


          步驟一/step 01

          我們需要新建一個空白圖層,填充黑色,執行命令:濾鏡-渲染-云彩

           

           

          步驟二/step 02

          執行命令:濾鏡-液化,這里你可以隨意一點畫,這是將塑料膜的紋路畫出來,這是我畫的樣子;

           

           

          步驟三/step 03

          執行命令:濾鏡-濾鏡庫-藝術效果-繪畫涂抹,畫筆類型選擇火花,這一步是將黑白顏色區分開來;

           

           

          步驟四/step 04

          再次執行命令:濾鏡-濾鏡庫-素描-鉻黃漸變,這一步同樣是為了是將黑白顏色區分開來,只不過這次的效果更加明顯;

           

           

          步驟五/step 05

          點開通道面板,按住ctrl鍵,隨意單機一個通道,得到選取,回到圖層面板,快捷鍵ctrl+j復制一層,圖層模式改為濾色,調整適合的透明度,最后在下面加上圖片,排版上文字,海報就完成啦!

           

           



          作者:歐陽威John
          鏈接:https://www.zcool.com.cn/article/ZMTUzNzA0NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          這排版確實專業,這次不獻丑了!

          杰睿

          今天來繼續聊聊慢熱視覺課里的排版部分,分享一些小干貨給大家:
           
           
           
          1.主體和畫面對比:
          這排版確實專業,這次不獻丑了!
           
           
           
          同學排版做的不錯,但是主體和背景的對比不足,導致怎么畫面有些悶悶的。 所以我們可以提亮背景,加強背景和麥克風的對比這樣畫面就不會那么悶了。
           
           
          像下面這些都是畫面對比不足導致畫面悶悶的或者層次拉不開的問題畫面:
           
          這排版確實專業,這次不獻丑了!
           
           
           
           
          我們可以在中間加一層亮色隔開,也可以增強畫面的對比:
           
           
          這排版確實專業,這次不獻丑了!
           
           
           
           
           
           
          2,整體畫面的結構比列:
           
          比如下面的這張畫面,整體可以分ABC三個部分。
          這排版確實專業,這次不獻丑了!
           
           
           
           
           
          問題就在于A/C的體量太一致了,覺得整個畫面很臃腫。怎么調整呢?其實我們可以適當調整占比,拉開A/C的差距,比如縮小C的占比,這樣整個畫面就更有主次了:
           
           
           
          這排版確實專業,這次不獻丑了!
           
           
           
           
          實際效果,頂部的標題和底部的信息拉開了主次,整個畫面才有了更好的節奏感:
           
           
          這排版確實專業,這次不獻丑了!
           
           
           
           
           
           
          3.排版的延續性
           
          看看下面的兩個案列:
          這排版確實專業,這次不獻丑了!
           
           
           
          左邊的排版感覺,就是排版和主體元素有很強的分割感,右邊的排版就比較連貫。
           
           
           
           
          要去除這種感覺,我們需要像右邊這種,在中間區域增加一些和排版同色系的圖形或者文字來起到延續的作用,這樣整個畫面才能連貫起來,不會有分割感。
           
           
           
           
          4.局部排版的比例節奏
           
          拿下面這個排版舉例:
          這排版確實專業,這次不獻丑了!
           
           
           
           
          他的文字和英文太相近了,看起來就像三根柱子,毫無變化:
           
           
          這排版確實專業,這次不獻丑了!
           
           
          調整的有主次變化,我們可以縮小其中一根,再加一些錯位:
          這排版確實專業,這次不獻丑了!
           
           
           
          表現到字體排版上就是:
           
          這排版確實專業,這次不獻丑了!
           
           
          節奏感是不是就好多了呢?
           
           
           
           
          5.排版的疏密節奏
          我們來看下這一份作業:
          這排版確實專業,這次不獻丑了!
           
           
          整個畫面非常密集,特別是背景排版全是各種小字密密麻麻布滿的整個畫面,就導致了整個畫面非常密集。
           
           
          其實這里我們需要整體畫面你的節奏感,一般來說我們背景的密集程度要和主體有所聯系,一般來說我們主體是我們畫面中最復雜的部分,其余部分如點綴元素、背景等的復雜度都要弱與主體,這樣才能很好的突出主體。
           
           
           
          我們可以用一些大塊面的字體去大面積概括畫面,不要用很小很碎的字體去堆疊:
          這排版確實專業,這次不獻丑了!
           
           
          氣質是不是一下就上來了呢?
           


          作者:菜心輕量文
          鏈接:https://www.zcool.com.cn/article/ZMTY0MDUxNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          當客戶說'不夠高級'時,我用這兩招讓設計秒變奢侈品視覺

          杰睿

          今天我們視覺課上有同學的作業畫了一個唱片機,有很多的問題,我們來看一下。
          修改前:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          修改后:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          給家分享一下修改的心得和注意事項。
           
           
          1.結構比列
           
          我們先從結構比例上來觀察,唱片的大小不合適,超出了唱片機的范圍。唱片也沒有厚度,顯得很單薄。最后是唱片機的高度很低,這樣導致了最后的整體效果有些扁扁的,不夠飽滿的和立體:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          所以我們需要把這些比列問題先調整出來。收回唱片的范圍、增加唱片的厚度、增加唱片機的高度:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          通過結構比列的調整,整體可以看到明顯地變得更穩定和飽滿了。
           
           
          2.結構組合
          原來的作業里,在唱片機側面增加了旋鈕來作為裝飾:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          但是這樣加有幾個問題。
          第一個是,左右兩邊都是旋鈕,這樣在視覺上會很重復。
          第二是,占比都很小,整體看起來就會很小氣,不飽滿。
          看下我們修改后的:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          左邊的一排旋鈕,我們減少成了一個大旋鈕和一個顯示屏:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          而右邊呢,我們可以直接不加東西,如果一定要加也盡量區別于左邊。比如可以加一個播放狀態:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          這樣是不是就更豐富飽滿了呢。
          所以我們在這些周圍加結構裝飾的時候呢,一定要注意飽滿度,然后是盡量用不同的類型去修飾,減少重復性。
           
           
          3.顏色調整
          還有一個比較大的問題,那就是顏色了,原來的顏色整體都有些悶悶的,不夠高級,左邊旋鈕的顏色也比較跳脫:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          再分析一下他的顏色選擇:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          可以看到基本是同一個顏色單純變化了明度和飽和度。
          那我們修改后的顏色呢:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          可以看到有明顯的色相變化,但是飽和度和明度基一直在中間最頂部,沒有做變化。這樣才能讓我們的的顏色始終保持干凈通透。
          原本比較跳脫的按鈕顏色也改成了和身體一致的顏色,這樣就不會顯得跳脫了:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
           
           
          4.細節表現
          原來的作業,唱片基本就是黑色,沒有光感:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          這種比較中心的元素不應該平平無奇,而是要想辦法增加更多的細節,這樣才能好看,才能吸睛!
          矩形工具拉一個藍色塊:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          用透視工具拉變形成兩個倒三角:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          剪貼蒙版到唱片上,然后調整羽化值20左右,就得到了貼合唱片的光感:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          用同樣的方法,多做幾條光:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          新建圖層填充一個中性灰,然后使用濾鏡-雜色-添加雜色功能做出這個素材:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          使用疊加模式,透明度45%把這個素材疊加在唱片上以增加顆粒感:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          接下來,我們還要加強光感對比:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          在箭頭位置都加入了更亮的顏色去提亮,讓整體的光感更通透和明亮,就不會像原來這樣整體悶悶的了:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
          最后我們再來看一下完成后的效果:
          辛辛苦苦做的設計,被客戶說沒質感,結果兩招就搞定了!
           
           
           


          作者:菜心輕量文
          鏈接:https://www.zcool.com.cn/article/ZMTYxNzExNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          快速提升設計氣質的7個版式技巧

          杰睿

          掌握一些有效的技巧,有時能事半功倍。

          排版的技巧有很多,而且隨著設計的發展,每過一段時間都會有一些新的技巧流行起來,蔥爺今天要給大家分享的這7個技巧,也是近幾年比較流行,且容易上手、容易出效果的排版技巧。

           

          比如給英文或者中文標題選擇一個筆畫很粗的無襯線字體,然后在它上面加一個或幾個比較潦草、筆畫較細的手寫英文單詞,就能得到一個很不錯的效果。

           

          由于識別性不高,手寫的英文單詞最好是無關緊要的,主要是為了起裝飾作用。
          在此基礎上還可以進行色彩搭配,而且顏色對比最好要鮮明一點,這樣就建立起了強烈的粗細對比、大小對比、剛柔對比、色彩對比等。適合在海報設計、畫冊設計、網頁設計中使用。

          undefined

           

           

           

          你是不是常常發現自己設計好的版面太過規矩,或者有點空、缺乏細節?而增加一個用英文排成的圓圈就可以解決很多類似的問題。

           

           

          因為這個圓圈文字能與版面中的圖片以及其他文字塊形成輪廓對比、面和線的對比、曲和直的對比等。為了讓其不太孤立和單調,最好最好把它疊加在圖片或其他文字上面。
          組成圓圈的文字字體可以是襯線體、無襯線體或者手寫體,但字號不宜太大,精致、秀氣一點比較好看。

           

           

          在正常的排版中我們都知道,字間距和行距都不能太大,而且間距要比行距小,而在文字比較少、版面比較空的情況下,我們可以把一些不是很重要且字數比較少的文字,采用大間距、大行距的方式排版。

           

           

          這么做等于是把單詞或者句子拆成了整齊排列的一組“點”,這樣它就能與版面的其它元素形成點、線、面的對比,可以增強版面的設計感,而且能覆蓋比較大的空間,起到裝飾的作用。

           

           

          這是類似于攝影中雙重曝光的技巧,只不過把外輪廓圖形換成了文字,所以這既是一個排版技巧,也是一種設計形式。
          為了效果比較好,用于填充圖片的文字通常是字號較大、筆畫較粗、字數較少的標題文字,圖片也要選擇質感好、顏值高的,如果是具象的圖片則要盡量保證重要部分的完整性和識別性。

           

           

           

           

           

          不是說要把文字做立體字,而是把文字按照一定的結構進行組合,或者把文字變形處理,從而達到三維效果。
          由于文字常見的狀態是扁平的,所以當打破文字這種常規的狀態,將其圖形化、賦予三維效果時,就會具有很強烈的視覺沖擊。在使用這一技巧時要注意文字的識別性。

          undefined

          這一技巧同樣也適用于標題排版,字體同樣要選擇筆畫較粗的無襯線體,而且字號要大,描邊字與無描邊字的字號要統一或者比較接近。
          這種效果比較好的原因是,描邊文字與無描邊文字組合在一起,可創造出鮮明的線面對比、虛實對比、輕重對比。為了保證文字的識別性,文字的描邊不要太細,也別太粗。

          undefined

          在圖片為人物、動物,或者產品的設計中,可以把最主要、或者質量最好的一張圖片去底,并且拉大,然后再搭配1-2張比較小的方形圖片,這樣就能形成鮮明的大小對比和輪廓對比,效果也是不錯的。
          這種排版方式在網頁設計和畫冊設計中很常見。

           

           

           

           

          總結

           

          怎么樣?以上的7個版式小技巧還不錯吧,趕緊去試一試。你們可能也發現了,其實它們都是巧妙運用了設計中的對比原則,比如大小對比、粗細對比、點線面、平面與立體對比、輪廓對比、虛實對比等等。所以熟練掌握對比非常重要,你也可以在對比的基礎上,嘗試出很多有趣、好看的排版技巧和設計形式。



          作者:蔥爺
          鏈接:https://www.zcool.com.cn/article/ZMTE0NTUwMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          7種版面構圖 讓海報立馬不一樣!

          杰睿

          在設計的創作重,很多設計師都喜歡追求軟件技法帶來的炫酷感,而忽略了構圖理論知識帶來的重要性,這篇文章就是為了解決這個問題

          海報設計對于初學者而言,是一個簡單入門,又容易出作品集的類目。在剛開始練習時不要天馬星空的去想象,最好的練習就是根據一定的構圖規范,嘗試尋找規律,建立可行的秩序,讓版面具有一定的閱讀性。

          -

          只有在版面具有基礎的閱讀性,才可以根據想法思路進行創意性的表現,而建立持續最簡單的方式之一就是運用構圖。當下主流的常用構圖,我大概總結整理有七種形式,下面我們一起來了解一下,附帶案例演示。

           

           

           

          第一種:四周壓角構圖→

          四周壓角構圖指的是將標題或者重要信息放置在版面的四個邊角處,可以是圖形或者文字,其余信息元素等則放置在畫面中間區域,使其整個版面嚴謹有序,平衡且具有視覺的張力。壓住四角一般會結合居中式構圖來呈現版面,可以產生視覺聚焦。

           

           

           

           

           

           

          將信息壓在四個角之內

           

           

           

          將信息超出頁面四角一部分

           

           

           

          將信息沿四周環繞排版

           

           

           

          第二種:對稱式構圖→

          對稱式構圖指的是將版面分成上下或者左右兩個部分,上下或左右兩部分比重相同,排版相似,對稱式構圖可以使版面更加有秩序感,適合處理信息較多,層級較為復雜的內容。對稱式構圖可以很快速的塑造出版面的平衡,視覺上的平衡幾乎就等于完成了版面的50%設計目的。是初學者中最為常見的形式之一,對稱之間互相呼應,信息處理可以從中快速打破呆板狀態,讓版面具有靈活性。

           

           

           

           

          上下對稱式構圖

           

           

          左右對稱式構圖

           

           

           

          第三種:居中式構圖→

          居中式構圖也叫中心式構圖,是指把主體信息放在版心中間,這樣容易產生視覺聚焦,其他信息圍繞版面中心來進行排版設計,放在版面中心的可以是文字、圖片、圖形或者文字等。使用居中式構圖,需要多注意畫面整體的平衡和元素之間的留白關系,讓元素組合之間留有足夠的對比與閱讀性。

           

           

           

           

           

          第四種:S型式構圖→

          S型式構圖,將主要元素按照S型排版,版面更加的自由生動,非常具有表現力,是一種很常見的靈活構圖手法,主要元素可以是圖像、圖形、標題文字、slogan等。S型式構圖是講曲線與版面進行結合,可以快速的創造出靈活的版面視覺以及節奏感,可以很好的提高版面的形式感,同時也可以有效的引導觀眾讀者的視線。

           

           

           

           

           

          第五種:三分式構圖→

          三分式構圖是指將版面分割成相等或不等的三塊區域,每個區域放置相應的信息,三分式構圖分垂直三分法和水平三分法,三分之后版面更有秩序感,適合處理文案較多,層級較為復雜的內容。難度較高,同時容易讓版面連貫性斷層,所以在運用當中需要額外留意元素與空間之間的融合表現。

           

           

           

           

          水平三分式構圖

           

           

          垂直三分式構圖

           

           

           

          第六種:傾斜式構圖→

          傾斜式構圖,是指將版面整體或者主要元素作傾斜處理,也可做透視處理或對角處理,這種構圖使版面更靈活,更加的具有形式感,作傾斜處理的元素可以是主題、圖片等元素。傾斜與對角可以提高文字或圖片的表現力,能很快速的塑造整體的空間感。

           

           

           

           

           

          第七種:散點式構圖→

          散點式構圖,是指將元素按照規律或者不按照規律自由的放置在版面的區域,散點放置的內容通常有文字,圖片等,通常散點式構圖都會結合S型式構圖搭配使用,這種構圖形式感強,更具有畫面表現力.在運用的時候,需要特別注意文字或標題的閱讀性,過于搶鏡會讓版面丟失主題。

           

           

           

           

           

           

          光說不練假把戲,實操案例來一個,這一個案例是圍繞四周壓角構圖來分享海報的制作操作技巧。

          涉及到的知識點有:

          ①四周壓角構圖的技巧;

          ②文字編排;

          ③利用文字的局部輪廓化使版面更具有形式感。

          我們先來看看最終的海報效果先。

           

           

           

          第一步:→

          所選的文案是一個攝影展,所以我們找了一張具有故事性的圖片作為底圖,新建文檔,背景填充為黑色,置入圖片,確定圖片在版面中的位置,因為我們準備做四周壓角構圖型的海報,所以我們與居中式構圖相結合,這樣能使版面的視覺聚焦。

           

           

          第二步:→

          根據圖片的構圖,我們來確定整體版面的構圖形式,由于圖片是居中偏右的,所以我們用居中式構圖加上四周壓角構圖來進行整體版面的風格呈現。

           

           

          第三步:→

          將主題文案“無限的山峰”以四周壓角構圖的方式放置在版面的四個角上,我們使用的是壓在版面以內的壓角構圖,并結合居中構圖的方式,這樣能使版面更加的規整有序,而且具有視覺張力,注意圖片和文字的聯系。

           

           

          第四步:→

          現在我們來進一步進行處理,由于主題文案相離較遠,接下來就是增強主題文字之間的聯系,我們嘗試用線來處理,線的作用就是連接與分割,我們用線將主題文字連接起來,并加上一些漢語拼音元素,使線條不會那么單調,并且更具有形式感。

           

           

          第五步:→

          先不急著下一步,我們先來觀察下版面,現在的版面被我們分割成了四份,我們把剩下的信息分別在指定的區域內進行排版。

           

           

          第六步:→

          我們將剩下的文案分別進行排版,重要的信息我們需要放大處理,不重要的信息可以偏小一些,重要的信息比如:參展藝術家、日期、地址等,這里要注意層級之間的劃分,要使版面顯得井然有序。

           

           

          第七步:→

          其實版面到這里已經處理的差不多了,但是主標題看起來稍顯平凡,跟內文的文字一樣,沒有什么特征特色,所以我們可以做更多的變化,拆分主題文字的一些筆畫,并使其輪廓化,我們還可以傾斜或放大一些筆畫,或者局部模糊,打散等等眾多效果都可以嘗試。

           

           

          第八步:→

          其最后把整體的細節稍微調整下,這樣,一張具有形式感的海報就形成了,這張海報用到了四周壓角構圖,居中式構圖,所以可得出結論,七種構圖方式之間是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。

           

           

          → 完成??!



          作者:歐陽威John
          鏈接:https://www.zcool.com.cn/article/ZMTQxMjgyMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合