在逛別人的部落格常可以發現有 一些小貼紙(尺寸多為80X15),也可視為Sticker/button/icon的東西, 除了上面寫的字之外,它更提供一個連結的功能或是方便進行串聯。那麼要如何做出屬於你自己的blog貼紙呢? 以下介紹四個外國製作貼紙的網站。

取得貼紙的來源有 (Where to get/make a sticker?)
 1.Rss-Icon  
http://www.rss-icon.com/icon.php  (英數中文字搭配皆可,尺寸可調)

這是個日本網站,英文與數字的顯示沒有問題,但如果想要顯示中文需在"文字タイプ"的地方選擇no.12 or 13的字型(本篇介紹的只有這個網站可以打上中文)。



將左右文字的內容,顏色背景設定成你想要的樣式


按下網頁下方的"アイコンを作成!"


便會將結果顯示在網頁上方 (字看起來太小怎麼辦?)



沒關係`,將文字サイズ(size)調整為10,アイコンの高さ改成18(會產生80X18的貼紙)。是不是好多了呢?


我想將上圖左半部加大要怎麼做? 此時需要加大"中心のボーダーの位置"的值(單位為pixel,由左而右開始計算),也就是要把中間的Bar往右移。

我又想把圖例的"三商"兩字往右邊移一點,那就需要加大左ボックス-間隔的值 (網頁左方 How to make icon有說明,左邊的間隔是文字相對於左邊界的距離,右間隔是右方文字與Bar的距離,而"外(內)側のボーダーの太さ"為整個貼紙外(內)框的厚度。)


貼紙完成後在其上方按右鍵-另存圖片到你的電腦,存下來會發現是個網頁。此時要先顯示完整檔名(我的電腦-上方"工具"-"資料夾選項"-"檢視"-拉下來找到"隱藏已知檔案類型的副檔名",該方格不要打勾),會發現剛做好的貼紙被存成xxx.htm,此時將檔名改成xxx.gif即可。


2.80x15 Brilliant Button Maker
 http://www.lucazappa.com/brilliantMaker/buttonImage.php
 (文字僅支援英數,貼紙固定為80x15,可傳圖檔當背景)

調整完按Create預覽結果,滿意的話Save it!按下去就幫你存成png圖檔
教學可參考 Christabelle的藝想世界
                     e-Totem 

3.Button Maker  http://tools.blogflux.com/buttonmaker/
(文字僅支援英數,貼紙有80x15及88X31可選)

產生方法與上述兩種大多雷同,顏色都可以從色碼旁的圖示得到色表方便選色。
這邊的文字(text)可直接由Text Alignment and Divider Alignment的下拉式選單決定要置中還是置左等。
Generate Button後,Save image直接送你GIF檔

4.E-Mail Icon Generator可產生與上方有點不同的e-Mail貼紙
 http://services.nexodyne.com/email/ 

輸入帳號,選你的信箱服務業者名稱,Generate可出現你的信箱貼紙(它提供網址或是供你自行下載)。便可產生如 這樣的mail貼紙

網頁下方有備註,希望你將貼紙連到http://services.nexodyne.com/email/ 讓更多人能使用到這像服務。



剛剛都在說產生的過程,接下來介紹如何在貼紙上加上連結的功能
(How to add a link on your sticker?)
你需要將以下的code放入你的網誌 (pixnet的話就自訂個欄位丟進去)
<a href="貼紙要連過去的網址" target="_blank"><img" src="存放貼紙的網址" border="0" /></a>

Copy the code below into your site 
<a href="The URL you want to link " target="_blank"><img" src="The URL of your sticker" border="0" /></a>

存放貼紙的網址? 要先將存到電腦的貼紙上傳到相簿,點選該張圖片按右鍵-內容,網址(URL)那出現http開頭gif, png, 或jpg結尾的就是你"存放貼紙的網址"

e.g.<a href="http://blog.pixnet.net/umin27" target="_blank"><img src="http://p8.p.pixnet.net/albums/userpics/8/8/72688/1198162246.gif" border="0" /></a>
範例以上只有修改"連結網址"與"存貼紙的網址",便可以看得到貼紙連到我這邊 

如果你只想要有個貼紙寫寫字(不用連到世界各地),貼以下的code就可以
<img src="存放貼紙的網址"border="0"/>
此篇介紹的流程可以做個結論:先製作含文字的貼紙(算是寫死),再把它當作圖片,並加上連結。

更多資訊可參考: 
ppy's blog 
媒觀系

arrow
arrow
    全站熱搜

    umin 發表在 痞客邦 留言(2) 人氣()