配合萬聖節來應景囉~

PIXNET 痞客幫的BLOG樣式更新成萬聖節主題模式~~ 啦啦~

基本上是用PIXNET的樣式改的,而且我相本流量早就掛掉了,所以應該不能投痞客的樣式~
如果用痞客的人也喜歡的話,再另外留言和我要吧~

應該會一直放到Halloween結束為止 XD

我畫上面那堆鬼畫的還滿開心的

這次會想改版面的設計是因為覺得內文太窄了,我想一口氣拓到1280px
看過來訪的訪客分析之後,發現大部分的訪客螢幕寬度都在1024以上,1024以下佔不到1%
(GA的訪客分析介紹

但是為了部分仍在1024左右的訪客,所以頁面設計時以內文900、側欄1-1024, 最大寬度1280px為準

讓版面靠左,這樣一來就算訪客的解析度比較小,起碼比較重要的內文都看的見
次要的是側欄1的最新文章,最末的就是廣告、連結等等~ 

所以layout就這樣設計了

因為是萬聖節風格,第一印象就是黑和南瓜色,所以用了南瓜色當底配上黑色漸層
先做一層全黑的圖層,再用擦子直接把不需要的地方擦掉,因為有狂野的印象,留下雜點還有不齊的邊緣

然後直接在上面畫出墓園,加上一些鬼臉還有大量的十字架,用不上什麼畫畫的技巧 XD

為了增加層次感,把墓園複製後透明度調30% , 反轉後放在後面
接著這次是用50%的白色畫出幽靈還有白骨人在跳舞

因為覺得不夠豐富又加了鳥之類的小怪物,為了突顯怪物發亮的眼睛
又加了一層黑色把畫面調的更暗更陰森

另外考慮到有可能有人的解析度還大於1280px ,所以把最左邊的一部分複製後

移到最右邊去畫出可以接合的圖案,然後再把這個部分貼回原位,這樣一來當使用者視窗更大的時候
就可以看到連續延出去的HEADER

 

主要文章的部分,選了比較不那麼刺目的灰色,然後直接用擦子擦掉一些邊
考慮到網頁要重覆的部分, 所以直接保留上下的直線(這是偷懶XD)

最上最的邊直接接在HEADER下面,所以畫的時候要小心不要擦過頭擦到重覆的地方

 

 

側欄就簡單的畫個燭火鬼,再設計個分隔線

整個改版就當成CSS練習XD,順便大推GOOGLE 的chrome瀏覽器~ (Chrome下載)
他有個功能,就是只要在網頁上反白選取一個區塊,再按右鍵就會看到" 檢查元素"

然後就會跳出這個頁面的CSS, 當你在CSS的行間轉換選取時, 頁面上相同的區塊也會反白顯示

這樣一來,要找出這個CSS的ID就快多啦~~
今天我差不多就是這樣改的,連DREAMWAVER 都沒用上 XDD

整個過程只用了photoshop畫圖,其他都是用chrome找到ID後直接修改CSS碼

 

因為我是拿痞客的基本模版改的,那組CSS裡面幾乎有所有的CSS選擇器
找出ID之後,再直接去樣式設計精靈的原始碼裡面修改,而且只是改改float和圖片寛高,

頂多再算上個文字改顏色,padding換數字~所以也用不太上自動語法XD

 

這個版目前先改到這樣,其實我還想加上黑貓、南瓜鬼之類的
不過時間不夠分配了~

哇哈哈~不給糖就搗蛋 XD 萬聖節快樂~

 

 


 

相關主題:

 


arrow
arrow
    全站熱搜

    CHIBC-暗月之鏡 發表在 痞客邦 留言(1) 人氣()