如何從svg生成多種顏色的圖標

雖然聖誕節與西方人的信仰有關，但對我們中國人來說，它是壹個與浪漫、娛樂和送禮有關的節日。然後，我們用AI畫壹組SVG格式的聖誕狂歡節圖標。網頁設計師應該很熟悉。網頁的字體圖標通過SVG插入網頁，保持了高清的完美細節，在多平臺網頁中受到追捧。本教程將教妳如何通過AI繪制SVG圖標，並通過在線工具生成字體圖標。讓我們壹起狂歡吧！壹、了解SVG圖標首先我們來說說SVG的圖片格式。SVG對WEB非常友好，尤其是近年來顯示屏的革新。為了滿足無數不同尺寸的手機屏幕的要求，矢量圖形發揮了自己的特點，即無論屏幕大小，都顯示得非常清晰，而像素級的畫面則相形見絀。對於網絡，全屏？壹直是個問題(因為沒人願意等壹張重量級的圖片通過手機加載)，而SVG是簡化的矢量格式，用XML傳輸，很多都是不必要的？細節？被清除，留下相對較輕的文件。最後，SVG文件的內容可以復制，也可以像WEB中的其他元素壹樣進行美化。SVG的某些部分可以分離出來，並且可以改變圖片的顏色，重置筆畫大小，設置透明度，我們還可以給它壹些效果(比如模糊)甚至動畫效果？這壹切都可以通過CSS和JS來完成。SVG不僅可以做成圖標，還可以做成LOGO、標語、文字等等。二、畫出圖標1，確定大小。在繪制圖標之前，我們應該對整個圖標的大小有壹個清晰的概念。也就是說，有時候妳打開全屏畫的圖標，等它縮小了(圖標壹般都是縮小的)，但效果往往是另壹回事。矢量圖標的大小通常不是大問題，因為矢量的優勢在於無限的可擴展性。不過，最好有兩個方案再畫。圖標文件的大小是多少？圖標線有多少像素？規劃好之後，可以試著畫壹個很簡單的草圖，然後稍微縮小壹下看看效果。只有這樣才能判斷線的大小多少才合適。2.用網格線打開AI，新建文檔。在這裏，我建立了壹個800px*800px的文檔。根據剛才的粗略判斷，我把我要畫的圖標設置為:筆畫為16px，內部線條為8px，其中8px為基本單位。那麽，我們就可以知道我們要畫的矩形網格也是8pt。因此，對於新創建的文檔，選擇View >；顯示網格並對齊網格。編輯時>:首選項>在參考線和網格中？網格線間距？可以設置為8px。其他請參考我提供的設置參數。3.試著用鋼筆工具和基本圖形的筆畫出輪廓。我這裏設置的筆畫大小是16pt。先畫出聖誕襪的輪廓。使用鋼筆工具繪制時，存在鼠標控制不當導致的錯誤，線條不夠流暢。此時，您可以在工具欄中找到平滑工具來平滑對齊路徑。這個工具經常可以幫助妳自動平滑手繪線條。記得在平滑之前選擇相應的路徑。4.畫圖案接下來，我要給聖誕襪添加壹些圖案，但是這裏請記住，如果我們要制作SVG圖標，就要避免使用圖案。在畫圖標的過程中，每壹個細節都要用路徑來畫。畫雪花有兩種方法。壹種是直接用矩形畫，然後我們要把筆畫關了。另壹種是仍然使用線條。選擇哪壹個完全是個人習慣問題。我們用矩形來構造雪花的形狀。先畫三個矩形，旋轉-45？，下面排列1的樣式。這三個矩形被分組，然後復制，復制的形狀向左對稱形成如下圖2所示的樣式。將此圖形分組後，在頂部添加壹個矩形，並將其旋轉45？，然後將兩個形狀在中間對齊。然後分組。接下來，我們用這個已經做好的圖案做壹個花的圖案。這個時候，妳可以用比較？傻？方法，即直接復制粘貼旋轉角度。當然，想提升技能的童鞋還有壹個辦法？旋轉工具。選擇這個對象，然後點擊旋轉工具，按住ALT鍵，將中心點拖動到下圖所示的底部，這就是我們將要建立的圖案的中心。松開ALT鍵後，會彈出旋轉工具的設置面板。我們把旋轉角度設為90？，點擊？復制？，會有壹個新的復制圖案，繞中心點旋轉90？。此時，保持選中新圖案並單擊？ctrl+D？重復前面的操作兩次。這樣壹個圖案就完成了，我們可以在中間加壹個長方形。把上面做好的雪花圖案分組，然後復制粘貼兩張到另壹個地方做裝飾。如圖所示。接下來，我們在剩下的空白處添加壹點格子圖案。由於我們最後要做的是壹個SVG圖像，所以在生成SVG圖標之前，我們要註意的是路徑不能有重疊。換句話說，我們做的圖形，首先必須是矢量，可以自由縮放。二是全面展開成封閉的填充格局。為此我放棄了通過建立模式來畫網格，剩下的方法只能用矩形拼湊？幸運的是，在和幾個網友討論了這個問題後，我找到了壹個方便有效的方法，就是用虛線畫格子。這裏，我要畫的網格的大小是壹個邊長為8pt的正方形。因此，我首先在這裏選擇線條工具，並將線條筆畫大小設置為8pt。點擊？中風？，進入筆畫設置面板，將虛線設置為8pt。這樣，線條就可以變成壹排排網格，從而畫出網格圖案。接下來可以繼續加壹點格子圖案，在喜歡的地方畫虛線。我們的聖誕襪子圖案終於完成了。但是請記住，在制作SVG圖標之前，需要以下步驟。5.SVG圖標的準備選擇所有對象並輸入對象>；展開，然後檢查？在彈出的擴展設置面板中。中風？然後呢。填充？。按住ctrl+shift+f9調出？路徑查找器？，選擇？季連？，這是用於合並形狀的按鈕。此時，整個格局已經形成了壹個封閉的路徑格局。三、生成SVG圖標要生成SVG圖標，只需將文件保存為。SVG，然後輸入icomoon在線字體圖標生成，點擊？導入圖標？選擇SVG文件開始上傳。在我的收藏夾中還有其他在線字體圖標生成工具和網站資源的集合。可以點擊去看看。上傳成功後，選擇？生成字體？，進入編輯頁面，在這裏可以修改文件名和其他編輯方式。圖標下面有壹個？獲取代碼？按鈕，點擊後可以彈出字體圖標的代碼，這個代碼還是妳做網頁時復制使用的。4.聖誕狂歡福利學完教程，自己動手當然必不可少。為了讓聖誕節輕松壹點，我想介紹壹下已經完成的聖誕圖標福利。點擊這裏下載到我的微盤上。提前祝大家聖誕快樂！