2010年7月23日 星期五

自製Blogger標題圖片(橫幅)

image

題圖片的DIY,比設計背景圖來得簡單(不是說設計圖,而是在瀏覽器的呈現上),dnowba也從設計標題圖片來細訴一些結合css語法的方式。

&了解自已blogger版面設定方式:

標題橫幅在設計前一定要注意寬度,瀏覽者習慣是在看網頁利用滑鼠滾輪來完成上下捲動的需求,所以網頁長度是不設限的,但是寬度上若是太寬常會造成瀏覽的不便,所以我們在設計網頁(尤其是需美工的網頁),在寬度上是斤斤計較的。同樣為了兼顧使用者瀏覽解析度,我們必須先適當的取好寬度,寬度取捨的問題在套用blogger設計範本的時候,我們會發現版面配置→調整寬度中已經設了1000px的上限,像筆者在部落格上放了較多的圖片,所以我後來放棄解析度800*600的瀏覽群…以17吋螢幕來說調成1024的解析度自已覺得還能適應。
image 

這也說明了blogger認識的目前市場主流,瀏覽器在23吋以下大家會調用的解析度還是1000上下…畢竟太高的解析度配不到大螢幕觀看的舒適度也不好。而這1000px指的是文字區域而不是背景圖(背景圖我們把瀏覽器比例縮小來看會發現大了許多),所以在做橫幅時我們最好設計在1000px以下(視你版型調整的寬度)。
image 

再來是了解一下blogger放橫幅的方式和可使用的檔案類型…早期我記得是只可以放純文字的,現在blogger可以選擇從本機、網路的方式來放圖,圖片的位置有三種放置方式,其中「輸入標題和說明之後」的意思譯得不好,應該翻成「文字在前、圖片在後」(word上我們習慣的敘述方式),最後面還有個「縮減以符合頁面(圖片將會縮減為760像素),恩…google在預設是760…照顧了800px寬的群眾。
image

至於可以放的檔案類型在google說明上沒有很清楚…我們在瀏覽裡面可以找到上傳格式的限制…目前可以用的是gif、jpg、jpeg、png、htm、html這些…不過後面我們在放圖片的時候是不用blogger這個工具放圖,因為橫幅在製作好後的調整都得到html裡去修css,偏偏用這個工具貼上去的圖,dnowba在html編輯器裡遍尋不找,索性就直搗黃龍進html放圖了,前提是你要有圖床,若是你要用上傳圖片到blogger空間裡就只能乖乖用這個功能。
image

&設計的思維:

設計面上我們可以有二種思維搭配不同模式來製作。

以下分別說明…

①簡單可省頻寬的方式,當然就是用一張小圖無限延伸的方式
.在PI裡開一張2×150px的圖,用百寶箱裡的填充工具來作就可以
image
.作好的圖存成jpg,看是要上傳還是放到圖床裡,然後我們進html編輯器裡修改些東西
   在html裡找到h1,其中應該會有三個字項,行1-6是標題、行10-14是標題下的敘述文字。我修改了

把標題、敘述字給置中:預設是靠左…我填加了如行4、12的語法
在標題、敘述字後加背景:預設是沒有,我填加了行5、13,這裡注意後面加了個repeat-x意思就提x軸無限延伸

.Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
text-align: center;
background: url("圖床位置") repeat-x;
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: 130%;
text-align: center;
background: url("圖床位置") repeat-x;

}


.成果如下…陽春,
image
如果要妙用的話就設計圖的寬度加寬,放一些不規則圖型,如下,dnowba是在photoimpact拉一張150×90的圖來做,無限延伸後可以接在一起(雖然還是看到接縫)
image

②給有點設計概念適用,photoimpact製作,dnowba也不是學設計的,所以每次都是拉拉別人的圖仿製一下,像下面就是用用PI上的幾何圖然後設邊緣透明色。
image
image
.製作完後的圖還是到html裡修改css,因為是不規則的圖型,所以在背景和文字分離的狀況下,我們要適當的把文字放到圖的中間位置,以下是程式碼。行4是背景圖位置(不設背景顏色,圖片不重複),行5是整個h1這塊的高度,比較不同的時因為圖文分離的原因,所以我們最後要協調一下圖和文,理想是垂直置中,但在css語法是沒有像html的valign,這塊不是div而是單行也不可以用vertical-align,在有設高度的情形下用padding、margin也不適合,只好用line-height…也不知道這觀念對不對…如果有css高手路過也請指導一下。

.Header h1 {  
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
text-align: center; background: url("圖的位置") no-repeat;
height:263px;
line-height:263px;
}

最後的成果如下…勉強過得去,圖和字不能配合是敗筆…圖文分離的原因,是因為這標頭字是帶連結的。
image

2 則留言:

  1. 這個太有用了!
    可是......
    我發現我貼成功之後,圖片只有預期的一小部分,
    要怎麼寫html語法,才能使貼上去的圖示整個的大小呢?
    又或者要怎麼更動尺吋呢?

    太謝謝了!我覺得你是我逛的網站中,對完全不會html的人來說最親切的了!

    回覆刪除
  2. 謝謝你的誇讚
    終於有人看出來我寫這些東西的對象是盡可能的平易近人了
    為了這個點還動了些腦袋來修正平常寫這類文章的方式

    這篇文章提到的關於標題圖片的設計
    只不過是應用到blogger開放的css碼並提及一些css的應用
    說穿了還是走後門…

    你可以去看看我老婆的網站…http://www.fishweep.blogspot.com
    現在設計標題圖倒不用如此大費周章了
    直接在後台做上傳即可(png的透明圖片也可以喔)
    最後再謝謝你的支持
    剛看了一下你的網頁…
    設計的比我還有feel呢

    回覆刪除

Related Posts Plugin for WordPress, Blogger...
// Dnow Function