• <menu id="s2mg8"></menu>
    <tt id="s2mg8"></tt>
    <object id="s2mg8"><label id="s2mg8"></label></object>
    • 思緣論壇首頁
    • 思緣圖庫
    • PS教程
    • 論壇搜索
    • 下載記錄
    • 每日簽到
    • 設計軟件,PS下載
    • VIP素材區預覽
    • VIP素材區下載
    • 緣分幣充值
    發新話題
    打印

    [精彩實例] Illustrator設計卡通風格的網頁分享圖標

    Illustrator設計卡通風格的網頁分享圖標

    來源:站酷     作者:公眾UI設計微課堂

    先看看效果圖



    1.如何設置新文檔

    由于我非常確定您已經在后臺運行了Illustrator,因此請將其啟動,并使用以下設置設置新文檔(文件>新建或控制-N):

    畫板數量: 1

    寬度: 800像素

    身高: 600 px

    單位: 像素

    然后從高級選項卡:

    顏色模式: RGB

    柵格效果:屏幕(72ppi)

    預覽模式:默認



    快速提示:你們中的一些人可能已經注意到,將新對象與像素網格對齊選項丟失。這是因為我正在運行該軟件的新版CC 2017版本,其中Illustrator 處理形狀捕捉到底層像素網格的方式發生了很大變化。

    2.如何設置自定義網格

    由于我們將使用像素完美的工作流創建圖標,因此我們需要設置一個漂亮的小網格,以便我們可以完全控制我們的形狀 - 也就是說,如果我們運行的是舊版本的該軟件。

    步驟1

    轉到編輯>首選項>指南和網格子菜單,然后調整以下設置:

    網格線: 1 px

    細分: 1



    快速提示:通過深入閱讀Illustrator網格系統的工作原理,您可以更多地了解網格。

    第2步

    一旦我們設置了自定義網格,我們需要做的就是確保我們的形狀看起來很清晰,可以在視圖菜單下找到對齊網格選項,每當您進入像素預覽時就會轉換為對齊像素模式。

    現在,如果您對整個“像素完美的工作流程”很陌生,我強烈建議您仔細閱讀我如何創建像素完美的藝術作品教程,這將有助于您立即拓寬技術技能。

    3.如何設置圖層

    在創建新文檔的情況下,使用幾個圖層來構建項目將是一個不錯的主意,因為通過這種方式,我們可以一次關注一個圖標,從而保持穩定的工作流程。

    這就是說,調出圖層面板,并總共創建四個圖層,我們將重新命名為:

    第1層:參考網格

    第2層:電話共享

    第3層:電子郵件共享

    第4層:即時通訊分享



    4.如何創建參考網格

    該 基準網格 (或基礎網格)是一組精確的界定參考面,這讓我們專注于規模性和一致性,以建立我們的圖標。

    通常,網格的大小決定了實際圖標的大小,并且它們應該始終是您在開始新項目時做出的第一個決定,因為您始終希望從最小的可能大小開始并在此基礎上進行構建。

    現在,在我們的例子中,我們將只使用一個尺寸創建圖標包,更確切地說是128 x 128像素,這是一個相當大的尺寸。

    步驟1

    首先鎖定除參考網格圖層以外的所有圖層,然后抓住矩形工具(M)并創建一個128 x 128像素的橙色(#F15A24)方形,這將有助于定義圖標的整體大小。



    第2步

    添加另一個更小的120 x 120 px one(#FFFFFF),它將作為我們的活動繪圖區域,從而為我們提供全方位4 px填充。



    第3步

    使用Control-G鍵盤快捷鍵對組成參考網格的兩個方塊進行分組,然后在彼此距離為40 px的位置創建兩個副本,確保將它們對齊到畫板的中心。

    完成后,鎖定當前圖層并轉到下一個圖層,在那里我們將開始處理第一個圖標。



    5.如何創建電話共享圖標

    隨著文檔的全部設置,讓我們通過確保我們位于正確的圖層(這將是第二個)然后放大第一個參考網格來啟動項目,以便我們可以更好地了解我們的圖標的形狀。

    步驟1

    使用帶有8像素角半徑的56 x 94像素圓角矩形創建其主體 ,然后將其置于底層活動繪圖區域的左下角,開始使用左手機,確保將 4 px缺口為其大綱。#C4CEE8



    第2步

    通過創建它的一個副本(Control-C),我們將在前面粘貼(Control-F),然后通過將其顏色更改為#2B3249,然后將其重量設置為8 px。

    完成后,使用Control-G鍵盤快捷鍵選擇并將兩個形狀組合在一起。



    第3步

    通過創建一個32 x 58像素的矩形開始工作,我們將使用該像素的顏色#8195C1,然后水平居中對齊到我們剛分組的兩個形狀,距離填充形狀頂部邊緣12像素可見表面。



    步驟4

    使用Stroke方法 為顯示器顯示8 px厚的輪廓(#2B3249),然后將兩個形狀選擇并分組(Control-G)。



    第5步

    使用我們將使用的8 x 8像素圓圈創建手機的底部圓形按鈕,#2B3249然后居中對齊。



    第6步

    打開“ 像素預覽”模式,然后使用筆尖工具(P)在前置揚聲器單元中繪制,使用帶有圓形帽的12 px寬, 4 px厚行程(我們將使用該顏色),然后居中對準可見手機上部的表面。#2B3249



    第7步

    使用12 x 4像素的矩形創建手機的電源按鈕,我們將使用該矩形進行彩色#2B3249,然后將其放置在距離當前繪圖區域左邊緣12像素的較大輪廓上。



    第8步

    調整我們剛剛創建的形狀,方法是在“ 變形”面板的“ 矩形屬性”中將頂角的半徑 設置為2 px,然后將所有手機的構圖形狀選擇并分組(Control-G)。



    第9步

    使用我們剛完成工作的副本(Control-C> Control-F)創建第二部手機,我們將在水平和垂直方向上進行反射(右鍵單擊>變換>反射>水平/垂直),然后然后定位到活動繪圖區域的右側,將其與其頂部邊緣對齊。



    第10步

    通過創建一個20 x 20像素圓來開始工作,通過創建一個20 x 20像素圓,我們將使用該圓,#ED664C然后將其放置在左側手機顯示屏上,距離其頂邊9像素,左邊距6像素。



    第11步

    通過創建另外兩個20 x 20像素圓圈(#ED664C),繼續在心臟上工作,在右側定位一個,使其最終重疊第一個表面 4個像素,最后一個在底部,這樣它重疊其他兩個表面 8個像素。



    第12步

    一旦你有三個圓圈,選擇并使用探路者的統一形狀模式將它們合并成一個更大的形狀。



    步驟13

    通過刪除統一過程中創建的中心錨點,只需使用刪除錨點工具( - )單擊它們即可調整生成的形狀。



    第14步

    繼續調整新的形狀,方法是選擇錨的手柄并拖動它們,以便在每個側面都獲得良好的曲率。完成之后,用圓形連接將生成的形狀繪制為8像素厚的輪廓(#2B3249),然后選擇兩個形狀并將它們組合在一起。



    第15步

    由于我們希望心臟保持在手機顯示屏的可見表面,因此我們必須使用一個24 x 50像素的矩形(用黃色突出顯示)屏蔽它,我們將中心對準顯示屏。然后,只需選擇心臟和矩形,右鍵單擊并選擇“ 制作剪輯蒙版”,確保使用Control-G鍵盤快捷鍵將它和左側手機分組在一起 。



    步驟16

    通過創建蒙面心臟的副本完成圖標,然后將其對準右側手機的顯示屏,確保垂直翻轉(右鍵單擊>變換>反射>垂直)。

    一旦到位,將其與電話一起分組(Control-G),然后對所有圖標的組成部分進行相同處理。



    6.如何創建電子郵件共享圖標

    假設你已經移動到下一層(這將是第三層),放大第二個參考網格,讓我們開始吧。

    步驟1

    使用一個96 x 64像素的矩形創建信封的主體,我們將使用這個矩形進行著色#ED664C,然后居中對齊底層的有效繪畫區域,距離其底邊4像素。



    第2步

    通過在“ 變形”面板的“ 矩形屬性”中將 其底角的半徑設置為8像素,調整剛創建的形狀。



    第3步

    使用Stroke方法 為生成的形狀繪制一個8像素厚的輪廓(#2B3249),只有這次將其角設置為圓形加入,確保在之后選擇并將兩個形狀分組(Control-G)。



    步驟4

    使用一個96 x 64像素的矩形創建信封的上半部分,我們將使用該矩形,#BF402E 然后居中對齊其底部,將其定位,使其下半部分與其重疊。



    第5步

    通過使用添加錨點工具(+)向其每個邊緣的中心添加一個新的錨點,然后刪除其角點(使用參考圖像突出顯示)在刪除錨點工具( - ) 。



    第6步

    給出生成的形狀為8像素厚的輪廓(#2B3249),確保將筆畫的角設置為圓形加入,之后將兩個形狀選擇并分組(Control-G)。



    第7步

    選擇鋼筆工具(P),并 使用帶有圓帽的8 px厚行程 (#2B3249)繪制信封的兩條對角線細節線。



    第8步

    使用一個64 x 80像素的圓角矩形創建字母的主體,該矩形具有8 像素的圓角半徑,我們將使用該顏色#F4E9E9 ,然后居中對齊底層的有效繪圖區域,距離其頂邊4像素。



    第9步

    給出我們剛剛創建了8像素厚輪廓的#2B3249形狀(),然后使用Control-G鍵盤快捷鍵選擇并分組兩個形狀。

    第10步

    快速解鎖前一層,然后創建一個我們已蒙版的心臟副本(Control-C),并將其粘貼回(Control-F)到當前圖層上,中心對準信封的字母,將它定位在一定距離的8 PX從填充形狀的可見表面。

    然后,一旦完成,使用Control-G鍵盤快捷鍵選擇并分組它們。



    第11步

    通過創建信封上部的副本(Control-C)(我們將在前面粘貼Control-F),然后通過刪除其頂部錨點進行調整,來掩蓋我們剛剛分組的兩個圖形。然后關閉路徑,使其跟隨信封本身的寬度。



    第12步

    現在,正如您可能已經看到的那樣,我們需要通過雙擊它來隔離掩模,然后添加口袋輪廓的向下部分的副本,以正確掩蓋字母的表面。

    完成后,您可以選擇遮罩的形狀和信封的上部分并將其組合(Control-G),以防止意外分離。

    步驟13

    選擇鋼筆工具(P),并使用4 px厚的筆畫(#2B3249),繪制箭頭的前部分,確保將頭部的帽和角設置為圓形。

    慢慢來,一旦完成,使用Control-G鍵盤快捷鍵選擇并分組這兩條路徑。

    第14步

    使用28 px寬 4 px粗Stroke(#2B3249)繪制箭頭的后部分,我們將在活動繪圖區域的左邊緣和字母的輪廓之間放置該Stroke()。



    第15步

    使用12 x 12像素的正方形創建小圓角,我們將使用該正方形進行著色#EAA74E,然后居中對齊箭頭的背部,距離當前繪圖區域的左邊緣2像素。



    步驟16

    調整我們剛剛通過添加新的定位點到每個使用它的側邊緣的中心創建的形狀添加錨點工具(A) , 然后選擇和通過的距離,將他們推向右側6 PX使用的移動工具(右擊>變換>移動>水平> 6 PX)。



    步驟17

    通過給出生成的形狀一個4 px厚的輪廓(#2B3249)以圓形連接,分組(Control-G),然后將它們發送到箭頭背部的背面(右鍵單擊>變換>排列>發送返回)。

    完成后,請不要忘記使用Control-G鍵盤快捷鍵選擇并分組所有圖標的組成部分。



    7.如何創建IM共享圖標

    我們現在下降到第三個也是最后一個圖標,所以假設您已經移動到最后一層,放大其參考網格并讓我們完成這一步。

    步驟1

    使用一個88 x 68 px矩形創建左邊的文本框的主體,我們將使用這個矩形進行著色#C2A6DD,然后將其放置在底層活動繪圖區域的左上角,并在其周圍留出4 px的空隙作為輪廓。

    第2步

    通過在“ 變形”面板的“ 矩形屬性”中將其頂部和右下角的半徑 設置為8像素,調整剛創建的形狀。



    第3步

    切換到 像素預覽模式(Alt-Control-Y),然后使用添加定位點工具(+)為文本框的底邊添加一個新的定位點,將其定位在距離其左側20像素的位置。



    步驟4

    使用直接選擇工具(A)選擇其左下角定位點,然后使用移動工具(右鍵單擊>變換>移動>垂直> 16像素)將其下移16個像素點,從而繼續調整形狀。



    第5步

    使用圓形連接 為生成的形狀提供8像素厚的輪廓(#2B3249),然后使用Control-G 鍵盤快捷鍵選擇并將它們組合在一起。



    第6步

    從之前的一個圖標 創建一個小心臟的副本(Control-C),然后粘貼(Control-F)到當前圖層上,中心對齊到文本框的主體。



    第7步

    使用三個6 x 6像素圓形在距彼此2 px的位置創建小點,我們將使用這些圓點進行著色#2B3249,組(Control-G),然后將其放置 在文本框的右下角,留下一個4 px的差距在他們周圍。

    完成后,使用Control-G鍵盤快捷鍵選擇并組合迄今為止創建的所有形狀。



    第8步

    創建左側文本框的填充和輪廓的副本(Control-C> Control-F),并將它們與底層活動繪圖區域的右下角對齊,確保之后水平翻轉它們(右鍵單擊>變換>反射>水平),將填充形狀的顏色更改為#9F88BA。



    第9步

    打開 像素預覽模式(Alt鍵-控制-Y )和繪制使用小文本行18像素寬, 4 PX厚行程線(#2B3249),隨后加入另一34像素寬, 4 PX粗線在距離4 PX從它。組(Control-G)這兩個形狀,然后將它們放置在距文本框左邊緣和底邊緣8 px的 距離處。



    第10步

    通過選擇并將(Control-G)所有正確的文本框的合成形狀分組在一起,然后將它們發回到后面(右鍵單擊>排列>發送到后面),結束圖標。

    噢,別忘了將所有圖標的組成部分分組,因為你不想讓它們四處飛舞。



    OK完成了老鐵們!

    你有它 - 一個可愛的小圖標包,可以用來與那個特別的人分享你的愛。我希望你已經設法跟隨每一步,并且像在這個過程中一樣有樂趣。


    加入論壇VIP,下盡您想要的素材,點擊進入!

    如果您在做圖或者看教程(PHOTOSHOP方面),遇到任何問題請到問題交流區提問,地址:http://www.ucvv.tw/forum-41-1.html;我們會在第一時間幫助您解決問題,如果在教程后面跟帖,一律不給予解決!~

    TOP

    感謝樓主分享,多練習,提高技術

    感謝樓主分享,多練習,提高技術,效果還行吧,給自己點個贊

    附件

    ai制作卡通風格的網頁分享圖標.jpg (45.91 KB)

    2018-9-21 23:59

    ai制作卡通風格的網頁分享圖標.jpg


    TOP

    發新話題

    關于本站 廣告服務 聯系我們 版權隱私 合作站點 網站地圖 免責申明 管理團隊

    工信部備案:滬ICP備09005587號 蘇州市公安局備案編號:32058302001042

    Powered by Discuz Copyright © 2005-2015 www.ucvv.tw All rights reserved.

    11选5 定单双套利