萬聖節 Halloween- CSS樣式更新+ 設計流程分享

配合萬聖節來應景囉~

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 萬聖節快樂~

相關主題:

CSS, 視覺設計, 漫畫及各種心得雜論