Top

裝飾網誌標頭圖片-用向量圖取代點陣圖

| 作者

其實在去年學illustrator時,就有做了一個網誌logo放在標頭。但是那時候放的是附檔名.png的點陣圖,這次又花了一點工夫把點陣圖換成向量圖。這篇文章會有兩個部分,第一是如何在illustrator存檔的部分,第二是如何把圖檔放到網路空間並連結到自己網誌。



圖1. PNG檔案
圖2 . SVG檔案

前言

從上面圖片可能看不太出來,可以試著把網頁放大,就會發現差別。向量圖跟點陣圖在顯示上面最大的差別,是在將圖片放大後,點陣圖會原形畢露,也就是會出現一格一格的狀況,這是點陣圖天生無法改變的特性;然而向量圖不會有這種情況,不管放多大都還是保持光滑的邊緣。我認為這種特性在螢幕解析度越來越高的現在顯得更重要(尤其有些行動裝置螢幕做到400dpi以上阿)。


圖.3
圖.4


上面是兩張圖在行動裝置上的顯示效果,圖3.png,圖4.svg向量圖,效果有些微差距


第一部分

illustrator中畫好圖後,另存新檔時選.svg這種檔案類型(不要選到.svgz)。存檔好後就有一個向量圖可以用了。至於電腦繪圖的技巧,我也只是初學者,網路上有很多文章或者可以去買書來參考。另外如果嫌自己畫圖麻煩,可以用這個網站把網路上找到的點陣圖轉換成向量圖,但是要自用的話請注意版權。根據我自己是用過的經驗,這個網站在轉換圖檔時有時候顏色和邊緣會出現錯誤,還是建議要做logo時自己話會比較有代表性。


第二部分

這個部分比較重要,是關於怎麼把檔案放到網路空間,並且使用連結連到自己網站的方法。blogger標頭放圖片有兩種方法:

  • 直接上傳圖片檔:圖片檔存在blogger主機,只限.jpg, .png, .gif檔案
  • 用網路連結連結圖片:要在網路上看到的圖片,其實都有一個網址連結可以指向它,要用.svg檔的話必須要用這個方法。
blogger後台進入「版面配置」可以找到「標頭」,點編輯之後就是這個畫面

因為第1點不能接受上傳.svg檔,我選的是上圖紅框框中的第2點。那這時就必須要有個網址指向圖片。剛好google雲端硬碟有辦法做到這件事,於是我們先到google雲端硬碟去新增一個資料夾,把資料夾設定成公開分享(否則網址連不到圖片),之後在這個資料夾中上傳剛剛存好的.svg檔。


把這個資料夾設成「公開在網路」上,可以當成是blogger的資料庫,有一些blogger裡會用到的程式碼也可以放在這裡,當然我們現在要放的是剛剛存的向量圖片檔。



檔案上傳到這個公開資料夾後,勾選它,並點右上角的圖示,下方就會出現這些畫面,在「主機」的地方看到了我們期待已久的網址。接下來只要複製網址貼上到我們剛剛提過的第2點中就完成了。(當然要按儲存,這個應該不用贅述)




後記

這是我把網誌標頭圖片換成向量圖的過程筆記,也許有更好更快的方法我沒發掘到。可以在留言中提出來討論。

其實這篇文章的重點是在「第二部分」,當在google雲端空間生成了一個公開資料夾後,放圖片還算是小事一樁(只有.svg這種才需要這麼大費周章),我目前是放一些程式碼在裡面,因為網誌上用到jQuery功能需要外連語法,把它存在這個資料夾,將分享連結嵌入網誌的程式碼。這麼做避免大家都連到同一個主機,對方主機流量太大拖慢我網頁一些功能。另外,如果對html語法熟悉的人,當然也可以在網誌中使用<img>語法,嵌入網址外連圖片。