• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 詳細解析作品包裝和展示中的用色技巧—- 設計教程




    教學主題: 詳細解析作品包裝和展示中的用色技巧

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 詳細解析作品包裝和展示中的用色技巧

    這教學的重點為這幾點 [ 展示,技巧,包裝,作品,解析,詳細,內容,效果,界面,配色, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    快年底了,大家又要開始着手整理這一年的作品集,那麼如何快速的提升作品集的展示效果,增強自己作為專業設計師的逼格?相信是很多同學關心的事。

    快年底了,大家又要開始着手整理這一年的作品集,那麼如何快速的提升作品集的展示效果,增強自己作為專業設計師的逼格呢,相信是很多同學關心的事,一說到作品包裝,有些同學想到的是套用Mockup。

    詳細解析作品包裝和展示中的用色技巧

    拉透視

    詳細解析作品包裝和展示中的用色技巧

    還有一些同學在展示布局上特別用心

    詳細解析作品包裝和展示中的用色技巧

    有人用了這些方法,作品立刻脫穎而出,而更多的人卻被說成表面功夫,這是為什麼?

    排版固然重要,但色彩的運用同樣不能忽視,有時色彩甚至是作品脫穎而出的關鍵

    試想一下,在Dribbble 有很多高人氣作品,雖然內容平平,但只要顏值到位,依然可以圈粉無數

    詳細解析作品包裝和展示中的用色技巧

    在這看臉的時代,沒有顏值的作品,縱使布局考究,也鮮受關注

    設計師的作品必須精緻,像女人一樣精緻

    衍生閱讀《沒義務透過邋遢的外表,發現你優秀的內在》

    如何快速打造有顏值的作品包裝,讓你作品備受青睞

    很多設計師都為此苦惱

    今天就和大家聊聊,如何提高作品逼格

    [ 前言 ]

    首先你要明白一件事非常、非常、非常重要的事

    作品包裝不是設計圖的簡單羅列,更不是讓你世界展現產品的線上截圖,作品包裝包好比女生用美顏相機自拍

    詳細解析作品包裝和展示中的用色技巧

    為的是展現作品最完美的一面,下面將為大家講述,如何提升作品的顏值

    NO.1

    包裝色調

    目前主流的 APP 界面配色都是下面這樣

    詳細解析作品包裝和展示中的用色技巧

    APP 界面中品牌色已淪為點綴色,界面的顏色主要來自內容

    且 APP 的品牌色通常不會隨着設計師的主觀意願進行調整

    既然設計師無法改變 UI 界面的顏色,那我們就從包裝的背景色着手,常見的配色手法有四種:

    ( 長圖太占空間,下面均以小圖示意 )

    1.同色系配色

    (最常見)

    詳細解析作品包裝和展示中的用色技巧

    指主色和副色都在同一色相上,在配色上營造一致性

    2.類似/鄰近配色

    詳細解析作品包裝和展示中的用色技巧

    這種方法最為常見,可以讓頁面顏色更加豐富,且色相過度柔和,看起來非常和諧

    3.中性配色

    詳細解析作品包裝和展示中的用色技巧

    即背景以黑白灰為主,突出內容(UI 界面),使之不受背景色的干擾,這種配色不經非常經典,還很百搭

    4.對比色配色

    詳細解析作品包裝和展示中的用色技巧

    背景和內容色彩間的對比形成強烈的視覺衝擊,使內容變得更加突出

    NO.2

    界面色

    上文提到,目前 UI 界面中的色彩主要來自內容

    詳細解析作品包裝和展示中的用色技巧

    在新版 Apple Music 中,蘋果讓每張專輯自己說話:展現專輯本來之美

    詳細解析作品包裝和展示中的用色技巧
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    類似的理念,在 Instagram 改版中也早有體現,其設計主管 Ian Spalter表示

    「我們相信色彩應該直接來自社交的照片和視頻才對」

    對此,我們可以寬泛的理解為

    界面色=內容色

    如今,目前越來越多的 APP 朝着突出內容的方向發展

    詳細解析作品包裝和展示中的用色技巧
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    在內容變得越發突出的同時,內容的質量也變成一把雙刃劍

    好的內容不僅可以提升產品氣質有的時候,可以撐起整個作品,如下

    詳細解析作品包裝和展示中的用色技巧

    詳細解析作品包裝和展示中的用色技巧

    而差的內容則卻能讓產品氣質瞬間歸零,以 Ins 為例

    詳細解析作品包裝和展示中的用色技巧

    線上產品內容質量受 UGC、運營編輯、後台技術等多種限制,很難以最完美的效果呈現給大家

    慶幸的是,設計師在包裝環節可以通過自己精妙的配圖,展現作品最完美的一面

    但是,配圖並不是簡簡單單的去扒一些美圖那麼簡單

    不僅要根據整個包裝的配色反覆斟酌,還要符合產品原有的氣質,選圖的思路如下

    1.展現美的內容

    詳細解析作品包裝和展示中的用色技巧

    如果你對內容質量的把控度不高,建議你可挑選專業攝影師的作品

    詳細解析作品包裝和展示中的用色技巧

    人像用模特硬照或明星寫真(含網紅),這類的圖片都是經過專業修片,質量有保障

    2.色調和諧

    在確定包裝的整體色調后,內容的色調根據包裝的整體效果進行挑選

    下面這張圖來自Dribbble

    詳細解析作品包裝和展示中的用色技巧

    用下面兩張圖替換原作品中的圖片,結果會怎麼樣?

    詳細解析作品包裝和展示中的用色技巧

    詳細解析作品包裝和展示中的用色技巧

    雖然內容質量過關,但卻破壞了原包裝的整體色調,拉低了展示效果

    3.完善細節

    我總結了幾個選圖要點,希望可以幫助大家規避一些問題

    ① 烘托氛圍

    出於某些原因,國內很多設計師時常會出一些英文設計稿

    詳細解析作品包裝和展示中的用色技巧

    詳細解析作品包裝和展示中的用色技巧

    如果要做英文設計,在內容配圖上最好以外國人為主

    而類似於“今日故宮”這樣帶有中國風的產品,在選圖的時候,如果插入老外圖片則顯得很跳戲

    ② 背景不重色

    詳細解析作品包裝和展示中的用色技巧

    如果 UI 界面中背景為白色,那麼圖像背景色要避免大面積出現白色

    避免與 UI 背景色相同,造成圖片沒有邊緣感

    ③ 慎用藍天白雲

    詳細解析作品包裝和展示中的用色技巧

    藍天白雲是中國民間最為常用的素材,作為一個有逼格的設計師你好意思在配圖中出現這個?

    如果要用,除了避免大面積出現以外,還要調整圖片的整體色調

    ④ 主體適當

    詳細解析作品包裝和展示中的用色技巧

    儘可能選擇或截取近景圖

    圖像的主體可佔到圖片尺寸的1/2左右

    案例分享

    下面將實例講解以往個人作品的包裝思路

    詳細解析作品包裝和展示中的用色技巧

    背景

    去年受某培訓機構邀請,做一個通過配色提升包裝效果的範例

    範例主要想體現在簡單排版的情況下精通過“色”的修改提升包裝效果

    包裝對象

    愛奇藝啪啪奇6.1設計圖,如下

    詳細解析作品包裝和展示中的用色技巧

    包裝開始

    1.確定包裝的主色

    初步設定:產品的主色為綠色,故在整體配色上,以冷色係為主,同時選用綠色的類似色進行搭配

    詳細解析作品包裝和展示中的用色技巧

    豐富:接着我又在背景色中加入了紫色

    不僅可以使包裝顏色更加豐富,形成柔和的漸變,還可以增加一絲神秘感,提升整體感覺

    詳細解析作品包裝和展示中的用色技巧

    2.確定素材

    原設計圖中所用素材人物,多以微笑為主和藍紫色的冷艷氣質不符

    為此我把目標鎖定在面無表情的 Model 上,並結合展示布局

    詳細解析作品包裝和展示中的用色技巧

    如果整體都是艷麗的顏色,不僅會造成視覺疲勞,且會降低素材的新意

    所以需要找到藍紫色和白色兩套素材

    原本打算以亞洲模特為主,無奈亞洲模特可用素材不多,不僅顏色相對單一,且多為雜誌封面

    詳細解析作品包裝和展示中的用色技巧

    最終還是選用了國外模特

    詳細解析作品包裝和展示中的用色技巧

    3.中文 or 英文

    啪啪奇原始的設計稿為中文

    我是真真切切不想將其替換成英文(嫌麻煩)

    可在中文界面下,部分頁面展示效果較差,大家可通過下面兩組對比自行感受下

    詳細解析作品包裝和展示中的用色技巧

    最後出於對展示效果的考慮,還是將界面中的漢字替換成了英文

    中英文視差的相關分析,可詳見《iOS10新設計的弊端》最後一節

    4.細節調整

    至此,文字變成了英文,圖片素材採用國外模特,為了進一步完善包裝效果

    將頁面中的圓角改為直角(直角更符合冷艷氣質),並調整蒙層的細節

    詳細解析作品包裝和展示中的用色技巧

    同時將界面和包裝中出現的社交圖標,如QQ、微信、微博等國內應用

    逐一換成Facebook、Twitter、Ins等國外應用

    詳細解析作品包裝和展示中的用色技巧

    5. 輸出成品

    詳細解析作品包裝和展示中的用色技巧

    文字是展示的一部分,在包裝環節可結合產品特點及包裝整體效果選擇文字內容(中/英文、字體)

    對某些字體特殊的產品,如 今日故宮

    詳細解析作品包裝和展示中的用色技巧

    在包裝上,採用與APP相同的中文+方正清刻本悅宋字體

    包裝效果自然更佳

    [ 後記 ]

    詳細解析作品包裝和展示中的用色技巧

    以上三類產品,都可以通過上述辦法快速提升包裝效果

    比如下面的界面

    詳細解析作品包裝和展示中的用色技巧

    雖然布局簡單,卻能做出酷炫的包裝

    詳細解析作品包裝和展示中的用色技巧

    [ 結束語 ]

    詳細解析作品包裝和展示中的用色技巧

    作品的展示包裝固然重要,但優秀的設計思維才是支撐設計師未來道路的基石,如果沉迷於包裝,忽略真實的產品設計,反倒會給自己帶來無盡的煩惱

    『 顏值只能攬客,活好才是硬道理,設計師應當內外兼修 』

    最後祝大家在年底收穫更好的機會,2017年有更多更好的作品出街面世。

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 詳細解析作品包裝和展示中的用色技巧 這教學會喜歡

    文章標題: 骨子愛創意- 詳細解析作品包裝和展示中的用色技巧–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 展示,技巧,包裝,作品,解析,詳細,內容,效果,界面,配色,

    本文永久連結 :詳細解析作品包裝和展示中的用色技巧

    本文轉載自 :VIA