|
在網頁設計制作中，會(huì)經(jīng)常用到一些小圖标來裝飾美化一些局部位置。但這(zhè)些小圖标有時(shí)候需要鼠标放上去有顔色變化或者其它效果，而且經(jīng)常會(huì)需要背景色和圖标顔色一起(qǐ)變動。這(zhè)樣的話用圖标會(huì)非常不方便。因爲，如果使用圖标隻有兩(liǎng)種(zhǒng)解決方案。一是用css樣式來把彩色圖片換成(chéng)黑白的，當鼠标移動上去再變回原樣，這(zhè)樣做法兼容性不高，而且經(jīng)常跟自己想要的顔色不一定完全一緻。第二種(zhǒng)就(jiù)是使用兩(liǎng)個不同的圖片，兩(liǎng)種(zhǒng)不同顔色的，需要顯示哪個用js來更換。但是，這(zhè)兩(liǎng)種(zhǒng)無論哪種(zhǒng)，都(dōu)不太好(hǎo)控制。
做網站的都(dōu)知道(dào)，字體圖标使用時(shí)非常方便，直接引用一個樣式，就(jiù)可以顯示一個圖标，而且可以像設置普通文字那樣設置大小和顔色。今天，我們就(jiù)爲大家介紹一下，網頁制作如何把圖标處理成(chéng)字體使用。讓你在使用圖标時(shí)可以更加方便控制。
圖标處理成(chéng)字體使用制作流程：
第一步：把一些圖片或圖案用photoshop摳圖，處理成(chéng)png圖片（當然，如果你會(huì)在Illustrator摳圖，可以省略這(zhè)一步）。存檔時(shí)分辨率存大一點，一般超出512*512的png圖片才可以在ai軟件中正常不顯示背景色。
第二步：打開(kāi)AI軟件，然後(hòu)點文件打開(kāi)這(zhè)個PNG文件，可以拖動出畫布外，看下這(zhè)個png是不是沒(méi)有背景色。把圖片調整合适的大小。
第三步：選中這(zhè)個圖片，點擊軟件中的圖像描摹，如果點擊後(hòu)不顯示右邊的小窗口，可以在工具條上的窗口下，找到圖像描摹把前面(miàn)打上對(duì)号。在右邊小窗口中選擇預設下邊的“高保真度照片”。
第四步：選擇工具欄中的擴展，點擊下後(hòu)下圖
第五步：如上圖點擊完擴展的效果，就(jiù)算是png圖片，那個圖片的周邊也會(huì)有藍色描邊，這(zhè)樣的話如果直接存成(chéng)svg（生成(chéng)的圖标按藍色描邊選擇的區域生成(chéng)），那在生成(chéng)ttf時(shí)會(huì)是一個黑色塊。所以要把白色沒(méi)用的部分去掉，分兩(liǎng)種(zhǒng)方式，一種(zhǒng)是用橡皮擦一點點擦除。但這(zhè)樣一是麻煩，二是經(jīng)常有角落裡(lǐ)擦除不到。所以用第二種(zhǒng)方式。就(jiù)是直接雙擊或點擊中間想要的區域，然後(hòu)按ctrl+x剪切到剪切闆。再把剩餘的部分選中删除。然後(hòu)再按ctrl+v粘貼過(guò)來。這(zhè)樣就(jiù)是自己想要的部分了。
第六步：存儲爲.svg文件
第七步：打開(kāi)iconfont.cn網站并登錄
1、點擊右上角雲彩（雲朵）小圖标上傳。
2、中間上選擇文件功能(néng)，選擇自己的.svg文件。
3、選擇下邊保留顔色并生成(chéng)。
4、鼠标移動到生成(chéng)後(hòu)的小圖标上會(huì)有四個選項，點擊加入購物車選項。
5、點擊右上角的購物車圖标，選拔下邊的下載代碼。
6、代碼中有樣式文件、字體文件和.html示例代碼。
|
