• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI培訓班分享6個矢量圖標繪制使用技巧

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2016-12-12 12:02

        今天達內UI培訓班要介紹的這6個圖標繪制招數,簡單易懂,但功效卓著。久習可得奇效,達到任何矢量圖形都易如反掌,無論各種橫的,豎的,奇形怪狀的圖形都信手拈來。(以下界面演示以Photoshop CC為演示工具)

        第一劍 少商劍 形狀圖層

        特點:劍路雄勁,頗有石破天驚,風雨大至之勢。

        PS是一個像素處理軟件,可以做到和AI一樣繪制各種復雜的矢量圖形。有讀者會問為什么不用AI,而要學習PS繪制路徑,因為PS才是適合UI設計的工具軟件,且各種圖形PS可以做到像素對齊,AI繪制的路徑導入PS還是要二次調節。所以下面教你如何通過形狀圖層來繪制矢量圖標。

        ① 前景色選擇黑色,前景選擇的顏色就是繪制出形狀圖層的顏色

        ② 工具模式選擇路徑,一定要選擇路徑,而不是形狀,因為直接生成的形狀黑乎乎一大片,非常不利于二次編輯路徑。

        【6個矢量圖標繪制設計技巧】

        ③ 形狀屬性面板中可以設置圓角。

        【6個矢量圖標繪制設計技巧】

        這是Photoshop CC版本中一個非常棒的功能。尤其是對UI設計師而言。形狀屬性位于屬性面板中,我們可以自由設置各種參數。

        例如:圖形尺寸、填充顏色、描邊顏色、描邊寬度、描邊樣式(包括虛線、對齊方式、線段端點和合并類型)、圓角半徑選項(對橢圓形不可用)

        【6個矢量圖標繪制設計技巧】
        【6個矢量圖標繪制設計技巧】

        一個矢量的圓角矩形就畫好了。

        第二劍 中沖劍 自定義形狀工具

        特點:大開大闔,氣勢雄邁

        PS里內置了非常多的形狀,很多基礎圖形不需要自己繪制,直接在使用相應的圖形即可。

        【6個矢量圖標繪制設計技巧】

        首先新建一個圖層,然后使用多邊形工具,選擇3邊

        【6個矢量圖標繪制設計技巧】

        然后用形狀圖層工具繪制一個三角形

        【6個矢量圖標繪制設計技巧】

        如圖:

        【6個矢量圖標繪制設計技巧】

        第三劍 商陽劍 布爾運算

        特點:巧妙靈活,難以捉摸。

        一些復雜的圖形,都是靠各種圖形相加相減得到的。所以我們需要靈活運用布爾運算工具,來達到組合最終圖形的目的。

        按住Ctrl同時選中圖層形狀1、形狀2

        【6個矢量圖標繪制設計技巧】

        直接按住Ctrl+E合并兩個路徑:

        【6個矢量圖標繪制設計技巧】

        通過合并得到一個對話框圖形。

        直接按住Ctrl+E合并兩個路徑:

        菜單頂部有路徑組合工具,可以嘗試不同的路徑組合,體會一下不同路徑組合布爾運算的效果。

        直接按住Ctrl+E合并兩個路徑:

        第四劍 關沖劍 分層繪制

        特點:以拙滯古樸取勝。

        很多復雜的基本型不要在一個層上繪制,可以分層繪制,通過各個層的分別繪制,最終再整體合并。

        新建圖層,畫三個圓形矢量圖形,必須要新建一個圖層哦。如果直接繪制路徑,新的路徑和原有的路徑混在一起,調整非常不方便,路徑約復雜,你會感受分層繪制的好處!

        【6個矢量圖設計使用技巧】

        選中圓圈圖形的圖層,Ctrl+C

        【6個矢量圖設計使用技巧】

        在圓角矩形層上Ctrl+V,圓圈路徑粘貼在圓角矩形層上:

        【6個矢量圖設計使用技巧】

        然后:

        【6個矢量圖設計使用技巧】
        【6個矢量圖設計使用技巧】

        第五劍 少沖劍 路徑選擇工具

        特點:輕靈迅速

        當編輯圖標中一堆復雜路徑的時候,想要快速選中某個路徑可能不是一件非常輕松的事情,這時候可以使用路徑選擇工具。

        【6個矢量圖設計使用技巧】

        這2個箭頭有什么區別了,黑色箭頭可以選中全部路徑,而白色箭頭可以選中局部路徑。

        【6個矢量圖設計使用技巧】

        第六劍 少澤劍 鋼筆工具

        特點:忽來忽去,變化精微

        有一些圖形的形狀,造型奇異,比如下面這個茄子,不可以直接通過基本圖形得到,這時候只能使用大招,鋼筆工具!掌握鋼筆工具,可以自由的畫出各種圖形。

        【6個矢量圖設計使用技巧】

        選擇鋼筆工具

        【6個矢量圖設計使用技巧】

        繪制一下弧形路徑,按住Alt鍵點選這個路徑的端點,為什么需要點選一下?大家可以試驗一下,假如不切換這個端點,繪制的下一個路徑就會有一個弧度。不能按照自己想法繪制相應方向的路徑。

        【6個矢量圖設計使用技巧】

        點選后的路徑如下

        【6個矢量圖設計使用技巧】

        然后我們再繪制下一段路徑

        【6個矢量圖設計使用技巧】

        再次點選路徑的端點

        【6個矢量圖設計使用技巧】

        依次繪制出如下的路徑

        【6個矢量圖設計使用技巧】

        再繪制一個切割圖形的路徑,并用布爾運算工具切除:

        【6個矢量圖設計使用技巧】

        最后用鋼筆工具用如上的步驟繪制茄子的把子。

        【6個矢量圖設計使用技巧】

        最終得到這個茄子的矢量圖形:

        【6個矢量圖設計使用技巧】

        今天的課程就講到這里,不知道通過這個六脈神劍的招數大家可以自由繪制各種矢量圖形了嗎?

        看的多不如去練習一下,大家可以以這個茄子去練習一下作業。大家別忘了有什么問題記得來我們UI培訓班官網尋找答案哦

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:10款常用的UI設計軟件區別&作用
        下一篇:10個PPT高級操作技巧-UI培訓分享
        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>