當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

聊聊圖標設計流程及小技巧

2018-01-12 1628 0
圖標設計要求熟練運用軟件,涉獵各種矢量特性、蒙板以及構造實體幾何,因此,會需要同學們運用不同的軟件工具與技巧,今天的譯文全都是超實用的技巧干貨,周末來補充點有料的。
icons_cover 圖形創(chuàng)建 vs 圖形樣式 我認為,對矢量路徑的創(chuàng)建和圖形樣式的設定作出正確的區(qū)分是十分重要的,因為它們需要通過兩種截然不同的設計軟件來實現——Photoshop 和 Illustrator。 Photoshop 的渲染質量和蒙板功能幾乎超越了所有的設計軟件,而 Illustrator 則囊括了豐富的矢量功能。在我的漫漫圖標征途中,Illustrator 可謂是矢量路徑界的王者。 值得慶幸的是,Photoshop 和 Illustrator 兩者之間的轉換算得是無縫連接了。通常我的工作流程是這樣的:在 Photoshop 中進行簡單圖形操作,但如果涉及到整套圖標或任何復雜圖形,我會先選用 Illustrator 進行創(chuàng)建,而后移步 Photoshop 進行樣式處理。 簡而言之,Illustrator 用于創(chuàng)建圖形,Photoshop 用于設定樣式及輸出。 規(guī)格 如果你可以控制圖標尺寸,那么圖標樣式和線條粗細應有助于規(guī)格的制定,因為許多圖標都必須有一條中線。也就是說,如果一個圖標的寬度為偶數,那么中線的寬度便不能為奇數。同理,如果一個圖標的寬度為奇數,那么其中線的寬度便不可為偶數。
dimensions 當你使用的線條寬度為偶數時,圖標尺寸應為:偶數(寬)x 偶數(高)。當線條寬度為奇數時,那么圖標尺寸應為:奇數(寬)x 奇數(高)。 盡可能不要混合使用奇數和偶數尺寸(除非你不混合會抓狂,那么也確保不同軸使用不同粗細的線條)。 勿用高分別率來掩蓋這個問題——在奇數寬度的圖標中使用1pt(或 1dp)的線條,也許在 Retina 配置中看起來沒有問題,但絕對會在1× 和 3× 尺寸的分辨率中發(fā)現讓你頭大的問題。 其實,大家只要把所有的點都想象成圖標的基礎網格,避免過于細小的偏移定位,一切也沒那么復雜。要確保所有的圖標設計應該從 1× 開始。 OS X 應用圖標 使用簡單的網格系統(tǒng)可有助應用圖標的繪制。OS X 的應用圖標尺寸均為成倍增長,因此,我可以通過 16×16 像素的圖標大致界定 1024×1024 圖標的定位,這樣的工作流程就輕松多了。對于那些極小的版本,也就無需過多調整細節(jié)了。 istat-menus
然而,蘋果的圖標并沒有完全吻合網格系統(tǒng)。不知為何,它們有著幾個像素的偏差——Safari 圖標的直徑為 898 像素,而非完全吻合 1/16 網格的 896 像素。 safari 綜上所述,我定義的圖標尺寸與 Safari、iTunes和其它蘋果圖標并不完全相同,不過只是 1024 像素中的 2 像素差別而已,遵循網格對我來說更為重要。很好奇蘋果為何選擇這個尺寸。 iOS 應用圖標 iOS 應用圖標的尺寸不如 OS X 圖標那么具有匹配度,工作流程略微復雜一些。以下所列為如今所有 iOS 圖標的尺寸。 • 29×29 • 40×40 • 58×58 • 76×76 • 80×80 • 87×87 • 120×120 • 152×152 • 180×180 • 1024×1024(應用商店) 目前總共有 10 種尺寸。但是,如果你只需制作 1x 的網格尺寸,那就只需關注 5 種主要尺寸即可。 • 29 (1×), 58 (2×), 87 (3×) • 40 (1×), 80 (2×), 120 (3×) • 60 (1×), 120 (2×), 180 (3×) • 76 (1×), 152 (2×), 228 (3×) • 1024×1024(應用商店) 4 種基礎尺寸加上應用商店尺寸 1024×1024 像素,工作量直線減半。另有一個好消息,要是哪天蘋果發(fā)布 3x 尺寸的 iPad,那你基本也已經完成了適合該規(guī)格的圖標。 ios-icon 在一開始,要忍住高分辨率尺寸的誘惑,專注于 1x 尺寸是事半功倍的良方,這可以幫助我們節(jié)省時間,從而獲得更有效,更易維護的設計。當水到渠成時,再開始制作 2×、3× 或 4× 的版本也不遲。 特別要謹慎使用“智能對象”,要小心它們可能有特殊的尺寸變化。 從 Illustrator 開始 Illustrator 不但能讓你在設計 1x 網格尺寸的圖標時清晰觀察所有矢量節(jié)點,并且有著數不勝數在任何其它軟件中都無法實現的獨特功能。我對其中的許多功能真是欲罷不能,這也正是為什么我選擇 Illustrator 作為我圖標工作流程第一步的原因。 對齊網格設定 我不太喜歡 Illustrator 的對齊像素設定,不過勾選“視圖→對齊網格”后的效果還是非常理想的,記得關閉對齊新對象到像素。對齊新對象到像素可在新建文檔或變換面板中可找到。
snapping 如果你需要對像素作非常細微的調整,可以使用移動面板(對象 → 轉換 → 移動,或直接按回車鍵)。 subpixel-move 自定義工具面板 最近,我重新編輯了我的工具面板,去掉一些不常用的工具,顯示原本被隱藏的工具。 tools 路徑尋找器 如果你想對圖形進行加、減或排除操作(通常被稱為布爾操作或構造實體幾何),Illustrator 中的路徑尋找器可謂是所有矢量編輯軟件中最好用的功能了。 于路徑尋找器中,我又最鐘愛分割功能——它將重疊的圖形分割成單獨的形狀,這樣就可以輕易地刪除不需要的部分。 pathfinder 形狀生成器 形狀生成器功能比路徑尋找器更新,使用起來更快捷。如果你有幾個獨立形狀互相重疊,那么選中形狀生成器,拖動鼠標即可組合形狀,按住 option 同時拖動鼠標即可減去形狀。 shape-builder ?M 選擇形狀生成器。
 
27
評論區(qū)(0)
正在加載評論...