close

版型語法製作教學



分類:有福同享

2012/04/17 00:28


 




本篇~是針對完全不會做版型的格友設計的,
方法不見得完全正確,
但~希望用這種方式能教會大家如何製作版型,
也真的希望對大家能有所幫助。


但~請先看完製版前言..
製版時~先麻煩完全按照月的做法去學習製作與摸索,
因為語法上每家有所不同,簡單與複雜度也各有不同,
所以月選了較為簡單的(Tina~小小世界 部落格版型(402) Green Spring )
本篇主旨為~版型主圖製作教學,不教語法部份,
因為~月看也不懂語法...都是自行摸索的...
月在這提供一個語法解釋與說明:常用的css語法整理


★事前準備:
1.原版語法來源:Tina~小小世界 部落格版型(402) Green Spring


2.月重新編製的語法:no.3櫻花之美版型語法


3.部落格主圖位置:櫻花之美版型教學主圖


4.部落格底圖位置:櫻花之美版型教學底圖


5.版型圖片上傳空間:免費圖片上傳空間


6.製作用的軟體名稱:PhotoImpact 12 請自行尋找
7.其他素材,因為圖檔較小,可以直接點右鍵存在您的桌面上使用,或月的x日誌 ,找各式素材。


(上標背景圖)



(左右欄位~上標背景圖) 


                (管理按鍵)


       (文章前小圖)    (左右欄位小圖)
 



 



★首先製作版型底色


開啟
點→檔案→開啟舊點,找月提供的版型底色,



先找工具欄左側的(剪裁工具),接著在底色上裁出自己想要的長與寬度。
但~請先照著月提供的數字,這樣方便學習唷^^



如圖中所示裁出長與寬度,各框內數字分別為0X200X1680X195
接著連點滑鼠兩下,他就會出現1680X195的圖案,這就是製版用的(底圖色),
然後按另存新檔。



點→選取區下方的箭頭,按往左邊的復原鍵後,
        再點一下左排的↖(挑選工具鍵盤,這樣就會回到最原本的~版型底色。



★再來是~主圖製作
點工作區上面的(物件)→插入影像物件→從檔案,選取主圖的圖檔。



不管主圖檔案有多大,按下(變型工具)後,直接在圖上點右鍵,會跳出對話欄,
選第二項(位置與大小),把維持寬高比(R)這裡的ˇ 去掉。




再把(大小)下方(寬度(W))裡的數字3888及(高度(G))的數字2592改掉,
寬度改980,高度改500,再把上面(位置)→左(L)改成350,上(P)改35後,按確定即可。
P.S:A、B、C、D的順序不能顛倒,不然會亂掉唷^^


一定要先改大小,才能改左跟上,不然圖會亂掉!


 



用工具欄左側的(剪裁工具)再剪一次版型主圖,同時注意B區剪裁後的數字,


要與月提供的相同唷,不然會套不上語法的。


因為月附上的是左右兩邊有花的背景底圖,所以在裁剪時,要注意上~主圖與下~背景底圖的接縫問題,可以看一下紅色的箭頭一跟二那個地方....


因為月準備的主圖高度為650,會太過長,不但沒這麼美觀,而且版面大,開啟的速度也會慢一點點吧...


再者~有些上傳空間有檔案容量限制,所以~建議還是做的夠用、夠美、省空間,且檔案小一點就好。


各框內數字分別為0X0X1680X595


接著連點滑鼠兩下,他就會出現1680X595的圖案,這就是製版用的(版型主圖),
然後按另存新檔。



★回應區下面的圖片製作
用工具欄左側的(剪裁工具),接著在剛才製作完成的主圖中間,
剪裁圖中櫻花的大圖,在上方數字改350X35X980X500後,連點兩下滑鼠,


在工作區~螢幕右邊有一個→百寶箱
百寶箱→圖庫→找按鈕→選R12這個框框連點兩下滑鼠,這樣框就出來了,
點變形工貝→把上面的鎖頭圖案點開,原本的數字為980X500,
我們直接把這裡改成350X235即可完成~回應區下面的圖片囉


 



★按鍵製作:
點→檔案→開啟舊點,找月提供的按鍵小圖
在左側工具欄這T (文字工具),挑自己喜歡的字型與大小、顏色後,
在圖上點左鍵打上您需要的文字,
在打好的字上直接點左鍵,跳出對話框後,
選最下面的(內容)後,再跳出對話框,
把文字位置調掉您想要的地方即可完成。




★捲軸區色彩設定:
在語法中的~捲軸區色彩設定,要如何選色呢?
點工具欄左邊的(色彩選取工具),
接著~
在底圖處隨意點上您想要的顏色或地方,
他會跳出一個對話框~如圖所示...
在對話框最下排~Hex框內有個(#F6E2E3)的代號,
這就可以用來設定成部落格裡右邊捲軸的顏色了...


★舉一反三~
凡在語法中看到#....的,就是要設定顏色或是改變顏色的地方唷^^


/*捲軸區色彩設定*/也可參照教學圖no13,方便您快速修改
html{SCROLLBAR-FACE-COLOR:#F6E2E3;
SCROLLBAR-3DLIGHT-COLOR:#F6E2E3;
SCROLLBAR-ARROW-COLOR:#ffffff;
SCROLLBAR-TRACK-COLOR:#ffffff;
SCROLLBAR-DARKSHADOW-COLOR:#F6E2E3;
SCROLLBAR-BASE-COLOR:#F6E2E3;}






★數字設定上的差異:
在主圖製作時,月提供了一組設定的數字,
寬度改980,高度改500,再把上面(位置)→左(L)改成350,上(P)改35
在最後一項為什麼會設定35呢??
請大家參加一下,上面三張圖:


第一張:
寬度980,高度500,再把上面(位置)→左(L)改成350,上(P)設定0
這樣版型主圖如果是在面板設定→各式樣板→XX類→no.X款時,
尤其是上方是不透明色的時,會碰到主圖好像被遮掉了一小部份,
同時也失去了些美感。


第二張:
寬度980,高度500,再把上面(位置)→左(L)改成350,上(P)設定30
這樣版型主圖如果是在面板設定→各式樣板→XX類→no.X款時,
尤其是上方是不透明色的時,主圖會與上方設定剛好接合。


第三張:
寬度980,高度500,再把上面(位置)→左(L)改成350,上(P)設定35
這樣版型主圖如果是在面板設定→各式樣板→XX類→no.X款時,
尤其是上方是不透明色的時,主圖會與上方設定有一點點距離。


月會比較建議選二或第三項唷^^


★.這種教學方式,不知道大家看懂了嗎??希望大家能學的愉快,也能自製出屬於自己的版型唷
★ 本篇教學圖片如有看不清楚的地方,請到的部落格相簿~(部落格版型圖示區)看, 會有大圖讓您看的更清楚唷^^



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 oreokimo 的頭像
    oreokimo

    培迪 的痞客邦部落格

    oreokimo 發表在 痞客邦 留言(0) 人氣()