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




  • [ 平面理論教程 ] 詳細解析圖標設計流程及實用技巧—- 其他教程




    教學主題: 詳細解析圖標設計流程及實用技巧

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

    今天的這個教學主題是: 詳細解析圖標設計流程及實用技巧

    這教學的重點為這幾點 [ 流程,設計,圖標,解析,詳細,Illustrator,尺寸, ]

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

    本文重點

    圖標設計要求熟練運用軟件,涉獵各種矢量特性、蒙板以及構造實體幾何,因此,會需要同學們運用不同的軟件工具與技巧,今天的譯文全都是超實用的技巧幹貨,周末來補充點有料的。

    圖標設計要求熟練運用軟件,涉獵各種矢量特性、蒙板以及構造實體幾何,因此,會需要同學們運用不同的軟件工具與技巧,今天的譯文全都是超實用的技巧幹貨,周末來補充點有料的。

    詳細解析圖標設計流程及實用技巧

    圖形創建 vs 圖形樣式

    我認為,對矢量路徑的創建和圖形樣式的設定作出正確的區分是十分重要的,因為它們需要通過兩種截然不同的設計軟件來實現——Photoshop 和 Illustrator。

    Photoshop 的渲染質量和蒙板功能幾乎超越了所有的設計軟件,而 Illustrator 則囊括了豐富的矢量功能。在我的漫漫圖標征途中,Illustrator 可謂是矢量路徑界的王者。

    值得慶幸的是,Photoshop 和 Illustrator 兩者之間的轉換算得是無縫連接了。通常我的工作流程是這樣的:在 Photoshop 中進行簡單圖形操作,但如果涉及到整套圖標或任何複雜圖形,我會先選用 Illustrator 進行創建,而後移步 Photoshop 進行樣式處理。

    簡而言之,Illustrator 用於創建圖形,Photoshop 用於設定樣式及輸出。

    規格

    如果你可以控制圖標尺寸,那麼圖標樣式和線條粗細應有助於規格的制定,因為許多圖標都必須有一條中線。也就是說,如果一個圖標的寬度為偶數,那麼中線的寬度便不能為奇數。同理,如果一個圖標的寬度為奇數,那麼其中線的寬度便不可為偶數。

    詳細解析圖標設計流程及實用技巧

    當你使用的線條寬度為偶數時,圖標尺寸應為:偶數(寬)x 偶數(高)。當線條寬度為奇數時,那麼圖標尺寸應為:奇數(寬)x 奇數(高)。

    儘可能不要混合使用奇數和偶數尺寸(除非你不混合會抓狂,那麼也確保不同軸使用不同粗細的線條)。

    勿用高分別率來掩蓋這個問題——在奇數寬度的圖標中使用1pt(或 1dp)的線條,也許在 Retina 配置中看起來沒有問題,但絕對會在1× 和 3× 尺寸的分辨率中發現讓你頭大的問題。

    其實,大家只要把所有的點都想象成圖標的基礎網格,避免過於細小的偏移定位,一切也沒那麼複雜。要確保所有的圖標設計應該從 1× 開始。

    OS X 應用圖標

    使用簡單的網格系統可有助應用圖標的繪製。OS X 的應用圖標尺寸均為成倍增長,因此,我可以通過 16×16 像素的圖標大致界定 1024×1024 圖標的定位,這樣的工作流程就輕鬆多了。對於那些極小的版本,也就無需過多調整細節了。

    詳細解析圖標設計流程及實用技巧

    然而,蘋果的圖標並沒有完全吻合網格系統。不知為何,它們有着幾個像素的偏差——Safari 圖標的直徑為 898 像素,而非完全吻合 1/16 網格的 896 像素。

    詳細解析圖標設計流程及實用技巧

    綜上所述,我定義的圖標尺寸與 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 像素,工作量直線減半。另有一個好消息,要是哪天蘋果發布 3x 尺寸的 iPad,那你基本也已經完成了適合該規格的圖標。

    詳細解析圖標設計流程及實用技巧

    在一開始,要忍住高分辨率尺寸的誘惑,專註於 1x 尺寸是事半功倍的良方,這可以幫助我們節省時間,從而獲得更有效,更易維護的設計。當水到渠成時,再開始製作 2×、3× 或 4× 的版本也不遲。

    特別要謹慎使用“智能對象”,要小心它們可能有特殊的尺寸變化。

    從 Illustrator 開始

    Illustrator 不但能讓你在設計 1x 網格尺寸的圖標時清晰觀察所有矢量節點,並且有着數不勝數在任何其它軟件中都無法實現的獨特功能。我對其中的許多功能真是欲罷不能,這也正是為什麼我選擇 Illustrator 作為我圖標工作流程第一步的原因。

    對齊網格設定

    我不太喜歡 Illustrator 的對齊像素設定,不過勾選“視圖→對齊網格”后的效果還是非常理想的,記得關閉對齊新對象到像素。對齊新對象到像素可在新建文檔或變換面板中可找到。

    詳細解析圖標設計流程及實用技巧

    如果你需要對像素作非常細微的調整,可以使用移動面板(對象 → 轉換 → 移動,或直接按回車鍵)。

    詳細解析圖標設計流程及實用技巧

    自定義工具面板

    最近,我重新編輯了我的工具面板,去掉一些不常用的工具,顯示原本被隱藏的工具。

    詳細解析圖標設計流程及實用技巧

    路徑尋找器

    如果你想對圖形進行加、減或排除操作(通常被稱為布爾操作或構造實體幾何),Illustrator 中的路徑尋找器可謂是所有矢量編輯軟件中最好用的功能了。

    於路徑尋找器中,我又最鍾愛分割功能——它將重疊的圖形分割成單獨的形狀,這樣就可以輕易地刪除不需要的部分。

    詳細解析圖標設計流程及實用技巧

    形狀生成器

    形狀生成器功能比路徑尋找器更新,使用起來更快捷。如果你有幾個獨立形狀互相重疊,那麼選中形狀生成器,拖動鼠標即可組合形狀,按住 option 同時拖動鼠標即可減去形狀。

    詳細解析圖標設計流程及實用技巧

    M 選擇形狀生成器。

    實時圓角

    Illustrator CC 2014 新添加了實時圓角功能,像小手柄一樣出現在所有轉角處。拖動小手柄即可控制圓角的角度。這個功能不僅僅針對矩形,適用於所有形狀。

    詳細解析圖標設計流程及實用技巧

    實時圓角功能實現了那些原本繪製十分困難或費時的圖形。Illustrator 的這款功能一如許多其它可愛的功能,方便了設計師們的工作。

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

    如果你希望精確定義角度,可以在控制面板中的輸入轉角直徑數值即可。

    詳細解析圖標設計流程及實用技巧
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    扭曲

    Illustrator 的扭曲以及其它封套扭曲工具可用於各種形狀的彎曲和扭轉,讓圖形變得更有趣。

    詳細解析圖標設計流程及實用技巧

    路徑輪廓

    我通常會先將筆觸轉路徑后,再進入 Photoshop 設定樣式。有些軟件也有這個功能,但是不多。對我來說,該功能是矢量編輯軟件必不可少的。

    詳細解析圖標設計流程及實用技巧

    筆觸變量

    在 Illustrator 中,我們可以對筆觸各個部位的寬度進行調整。

    詳細解析圖標設計流程及實用技巧

    選擇寬度工具(shift-W),雙擊需要編輯的節點后,會出現控制面板供輸入數據精確控制寬度。該工具可以精準繪製出其它工具所無法繪製的圖形。

    詳細解析圖標設計流程及實用技巧

    虛線

    Illustrator 中的虛線有兩種模式——轉角對齊以及常規間隔。轉角對齊虛線總是看起來更舒服,然而多數設計軟件里並不包含這一選項。虛線可轉化為路徑後置入 Photoshop 中作後續編輯。

    詳細解析圖標設計流程及實用技巧

    單個變換

    在 Illustrator 中,同時對多個對象進行大小、旋轉角度及位移等調整是相當輕鬆的,並且它還能做到以每個單獨物體為單位進行上述各類調整。這個小小的功能可以為我們省去大量的時間和精力。

    詳細解析圖標設計流程及實用技巧

    套索選擇

    當選取框無法滿足複雜的選區時,套索工具可以做到。可與按鍵結合使用套索工具:(加選), (減選)。

    詳細解析圖標設計流程及實用技巧

    圖形樣式

    為提高工作效率,我在 Illustrator 中設定了一些圖形樣式。如果你的圖標中含有很多圖形樣式相同的元素,這麼做一定能幫你節省不少時間。

    詳細解析圖標設計流程及實用技巧

    像素預覽

    說實話,Illustrator 的像素預覽圖挺爛的,案例圖中顯示了它究竟是怎麼個爛法——像素零散,沒有漸變遞色,等等這些都讓它的像素預覽無法令人信服。因為我最終會在 Photoshop 里進行樣式設定,所以 Illustrator 的像素預覽對我並沒有什麼影響,但我們還是要對這一特點有所知曉。

    大家可以在圖中看到 Illustrator 和 Photoshop 的像素預覽圖對比,差異相當明顯。

    詳細解析圖標設計流程及實用技巧

    零星的像素是很危險的,iOS 和 OS X 界面圖像的規格須為精確成倍的數據,所以一個圖像所多出的1個零散像素就會出現問題。

    Photoshop 樣式設定

    一旦完成圖標的路徑構建后,我會將他們作為形狀塗層貼入 Photoshop。如果你有多個路徑,可以在 Illustrator 中將它們同時選中拷貝,在貼入 Photoshop 后仍可以分為單獨圖層。單獨選中一個路徑,並同時按J鍵,即可將其移入一個新圖層。

    輸出

    我不建議通過 Illustrator 輸出位圖。

    我亦不將 iOS 圖標存為 PDF 格式。

    我使用 Photoshop 切片來輸出 PNG 格式或其他位圖格式。這一做法有諸多好處,譬如:可以選用一張需 10 秒載入的圖層,或是一整套需 100 秒載入的圖標;保持樣式的整體性;易編輯。(原作者另著有一篇應用設計流程,其中錄入了更多有關切片工具的詳情,如果童鞋們有興趣,小編可以進行後續編譯。)如果是輸出 SVG 格式,我通常結合使用 Photoshop 的生成器和 Illustrator。

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

    希望我們所介紹的 詳細解析圖標設計流程及實用技巧 這教學會喜歡

    文章標題: 骨子愛創意- 詳細解析圖標設計流程及實用技巧–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 流程,設計,圖標,解析,詳細,Illustrator,尺寸,

    本文永久連結 :詳細解析圖標設計流程及實用技巧

    本文轉載自 :VIA