圖標(biāo)設(shè)計(jì)技巧與靈感

0 評(píng)論 3355 瀏覽 4 收藏 7 分鐘

在過(guò)去10無(wú)數(shù)的圖形用戶界面(GUI)開(kāi)發(fā)中我們看到了很多圖標(biāo)集。圖標(biāo)是生活中的基本元素以及任何精心構(gòu)建的界面系統(tǒng)的驅(qū)動(dòng)力。
回到Windows 2000/XP的時(shí)代,我們就看到圖標(biāo)在我們的數(shù)字生活中變得更加普遍。不僅僅在軟件上有爆炸性的增長(zhǎng),在網(wǎng)絡(luò)應(yīng)用程序上也一樣。美術(shù)設(shè)計(jì)師瞬間就可以獲取成百上千的圖形學(xué)和矢量設(shè)計(jì)方面的教程。

在這篇短短的文章中我將講述一些技巧以給那些對(duì)圖標(biāo)設(shè)計(jì)感興趣的人一個(gè)好的開(kāi)頭。這是一個(gè)當(dāng)前媒體沒(méi)有關(guān)注的棘手的話題。

練習(xí)Adobe Photoshop

不管你如何進(jìn)行圖標(biāo)設(shè)計(jì)你都必須花一些時(shí)間在工作在Adobe Photoshop上。它是進(jìn)行網(wǎng)頁(yè)模板,頁(yè)面美工,橫幅,特別是像素基礎(chǔ)的圖標(biāo)創(chuàng)作日最重要的軟件套裝。
通過(guò)Photoshop練習(xí),你可以掌握一些通用的工具集并熟悉藝術(shù)環(huán)境。即使你(最先)不是要?jiǎng)?chuàng)作圖標(biāo),依然需要練習(xí)和耐心。事實(shí)上對(duì)于初學(xué)者來(lái)說(shuō)Photoshop比起類似軟件如Fireworks或IIIustrator是簡(jiǎn)單很多了。

柵格是設(shè)計(jì)圖標(biāo)的一個(gè)重要概念,事實(shí)上對(duì)于任何圖形來(lái)說(shuō)都是。當(dāng)為網(wǎng)站起草一個(gè)布局模型的時(shí)候它非常有用,他可以作為輔助線和標(biāo)尺來(lái)限制頁(yè)寬,和模型,文字域等等。圖標(biāo)也很類似,你需要將它們?cè)O(shè)置到指定的大小。下面是圖標(biāo)最常見(jiàn)得尺寸:

  • 16px x 16px
  • 24px x 24px
  • 32px x 32px
  • 48px x 48px
  • 72px x 72px
  • 128px x 128px

當(dāng)你排除重重困難為諸如iPhone/iPad這樣的領(lǐng)域設(shè)計(jì)時(shí),你會(huì)發(fā)現(xiàn)自己被限定在一系列的限制范圍內(nèi)。比如,每個(gè)iPhone/iPad應(yīng)用的圖標(biāo)在封面視圖時(shí)會(huì)被縮放到512px*512px——這是任何軟件品牌中最大的樣本尺寸。

練習(xí)草圖

作為一個(gè)設(shè)計(jì)師我覺(jué)得手繪示意圖的能力是再重要不過(guò)的了。我曾經(jīng)預(yù)想過(guò)很多布局和頁(yè)面圖像,僅僅是從我腦海里的框架開(kāi)始。只需要有簡(jiǎn)單的鉛筆和紙你就可以在一個(gè)空白的畫(huà)布上記下你所有的想法和想像。

圖標(biāo)設(shè)計(jì)特別適用于這種考慮工藝本性的行為。相對(duì)于你有了大致的想法后再開(kāi)始,直接打開(kāi)Photoshop就開(kāi)始創(chuàng)作是非常困難和受限的。事先計(jì)劃是自由和成功的關(guān)鍵。如果你想法枯竭,草圖也是最能給你一些幫助東西。
它不需要進(jìn)行到非常細(xì)節(jié)的程度。你只要自己覺(jué)得合適并且知道還需要多少工作要做。可能你只需要一個(gè)粗略的想法,比如你最終的作品會(huì)長(zhǎng)什么樣,可以去掉陰影,光澤以及其它效果。

利用透視法

制作圖標(biāo)需要你暫時(shí)走出條條框框并只考慮你希望你的作品看起來(lái)是什么樣的。最終你的工作的理想情況是產(chǎn)生一個(gè)獨(dú)特的,格式化的圖標(biāo)。它可能是一唯空間的或者甚至包含突出和陰影。
考慮你的用戶會(huì)如何觀察你的圖像的邊界。不論是從設(shè)計(jì)師還是從用戶體驗(yàn)的觀點(diǎn)來(lái)看,你的圖標(biāo)應(yīng)該給人以什么樣的感覺(jué)是非常重要的。嘗試避免任何過(guò)度復(fù)雜的形狀地貌模式,它們可能會(huì)扭曲最終的效果或產(chǎn)生混亂。

簡(jiǎn)而言之,如果你需要一個(gè)信封用于郵箱圖標(biāo),那就簡(jiǎn)單地創(chuàng)建一個(gè)信封。確保它非常明顯且當(dāng)放在文字邊上或在瀏覽器內(nèi)部時(shí)它很突出。然而我們并不需要全力的去追求太多的特效。圖標(biāo)已經(jīng)成為所有出色的用戶界面的標(biāo)記,延續(xù)簡(jiǎn)單這種強(qiáng)大的立足點(diǎn)是非常重要的。

避免覆蓋文本

一般來(lái)說(shuō)在圖標(biāo)設(shè)計(jì)中放置文字或字母是一個(gè)很大的禁忌。它通常會(huì)引起多方面的問(wèn)題,而最大的問(wèn)題就是調(diào)整尺寸。如果你用清晰的文字創(chuàng)建一個(gè)512*512的圖標(biāo),它可能會(huì)達(dá)到一個(gè)極限,這時(shí)調(diào)整尺寸就行不通了。
這限制了你的品牌發(fā)揮到極致,并且對(duì)于較小像素的圖標(biāo)需要重新設(shè)計(jì)。更需要注意的是要避免使用小短語(yǔ)或副標(biāo)題,因?yàn)樵诖蠖鄶?shù)的轉(zhuǎn)換之下它很難很好地傳承下來(lái)。

唯一可以適用這個(gè)規(guī)則的情況可能是首字母縮略詞或者縮寫(xiě)。如果你運(yùn)作的公司叫做Global Internet Bank,你的圖標(biāo)采用字母GIB可能會(huì)被認(rèn)為是鬧著玩的。這當(dāng)然也是當(dāng)前很多情況正在使用的方式,雖然這種方式已經(jīng)是很古老的了。我們?cè)谑噶坷L圖上看到無(wú)數(shù)的創(chuàng)意,這些創(chuàng)意可以比加大,加粗分散的字母更加突出。

圖標(biāo)畫(huà)廊

下面是一些從Dribbble的畫(huà)廊里找到的杰出的圖標(biāo)設(shè)計(jì)的例子。所有內(nèi)容都鏈接到他們?cè)嫉馁Y源并提供了很多普遍趨勢(shì)的觀察。圖標(biāo)藝術(shù)設(shè)計(jì)入門(mén)并不容易,但是如果有一些幫助和正確的靈感所有目標(biāo)都可以達(dá)到!

 

 

 

 

查看英文源文

來(lái)源:http://rockux.com/

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!