切換
舊版
前往
大廳
主題

巴哈姆特11週年慶 - 雪娘屋改造主題上架!!

38°C的雪娘 | 2007-11-14 22:35:18 | 巴幣 0 | 人氣 3465

站慶活動:11週年小屋改造王
也來湊湊熱鬧吧
雪娘屋改造主題動工
新屋已經完成囉~


11周年慶祝版的雪娘屋,已經上架了,希望大家多多指教!!
全屋瀏覽





【改造紀錄】

站慶活動:11週年小屋改造王

  為因應巴哈姆特的生日,這一次的改造主題是:「慶祝」!玩家可以使用插畫式、寫實、攝影合成...等,方式來表達出慶祝這個主題,不需緊扣 11 週年,只要能傳達出「慶祝」這樣的感覺,就趕緊來報名吧!以上為活動說明

  雪娘又要把腦袋拿出來榨汁了,看到許多網友也有參予,雪娘也來玩玩看,當然這次的製作主題重點就是慶祝巴哈11周年,不用說,主題人物還是雪娘啦。如同活動說明提到,在設計上,如何能達到慶祝的效果卻又不會讓小屋雜亂,也是要考慮的,這次週年慶的雪娘屋,要好好想想如何設計了。

目前進度:0%..........
  施工完成進度無預期,不過雪娘不會拖太久的,小屋這次不會和之前一樣突然蹦出新面板,這段時間,各位將可以從這篇文章的圖文紀錄看到雪娘一步步的如何完成新小屋。為了避免原本雪娘屋變成失工場所,所以CSS施工地點不會在這裡囉。
到時候完成,希望大家會喜歡,並支持一下囉!大家來參加這個活動吧~
--------------------------------------------------------------------------
2007.11.15

巴哈11周年雪娘屋由於是全部改版,因此以下部分都要一一的重新設計:

20%--背景與主圖 (完成)
10%--小屋頂部(巴哈logo等..) (完成)
10%--選單設計(主選單小圖和動畫) (完成)
10%--按鈕 (完成)
10%--小屋文章欄位/勇者資料區 (完成)
10%--右方統計欄位 (完成)
5%--左上會員登出欄 (最後修改)
5%--評價區 (完成)
5%--GP區 (完成)
5%--小屋底部 (最後修改)
10%--其它(文字顏色,留言輸入欄圖片) (完成)


【素材收集】

【素材收集 01︰背景圖】
小屋最重要的就是背景圖片了,也是第一個要先製作出來的部份,背景圖將會影響整個小屋後面的配色。雪娘想了很久,選了這張背景圖:

慶祝方式就是老套的煙火啦~~ 啊?! 白天哦?
白天也可以放煙火啊! 這樣子也讓雪娘屋在視覺上會有很寬闊的感覺~
所以呢,雪娘屋可能要改成"雪娘廣場"了.. XD。 煙火到後面會放上去。

【素材收集 02︰人物圖】Memories Off的藤原 雅(就是小屋的雪娘啦)
找了好久,週年慶主題,要找個之前沒出現過的雪娘圖,既然是要慶祝,雪娘還是決定穿和服出場吧。



【修圖】

雖然說圖片都是現成素材,但是並非每一張都可以馬上使用,人物圖也要仔細的去背。
如同這張雪娘圖,由於是掃描的,因此原圖畫質並不理想,也要給他修理一下..
下面就是修圖前後的比較(左邊為美化後)


置於背景,顏色太過鮮豔,背景圖的顏色稍微改淡了。


【主選單按鈕】

雪娘屋的主選單圖,相信大家都知道那是利用背景來製作出來的,小屋選單這次要如何製作呢?? 什麼形狀?顏色? 正好看到巴哈有提供許多素材和11週年慶的小屋面板,其中選單的顏色還滿喜歡的,所以就採用了;至於形狀,再和原本的雪娘屋一樣的話就沒意思了,想了又想.....製作出方圓的選單圖吧!!

開始做囉~
畫出一個形狀,長方圓角出現嚕


鋪上漸層讓它更美


深色土黃邊框,完成!!這就是新屋的選單按鈕! XD



【版面配置】

選單按鈕作出來了,但是要如何放精準的到背景內才不會和小屋實際的選單文字有誤差呢?
接下來,就是要再繪圖軟體裡面模擬一下小屋版面了,意思就是抓一張已配置好位置的小屋圖片,來對正實際面板和你設計的面板。


這樣在設計整個小屋就不必到css改來改去了,所有小屋的圖片設計基本上都可以在繪圖軟體完成,當然,設計到一定程度後,這些圖片和搭配還是要親自到小屋"實戰"一下。

【背景加工】

說好了要放煙火啦!到網路上去搜一番,可以找到許多漂亮的煙火,也比起自己製作還要有真實性(其實是偷懶..),雪娘找到許多不錯的煙火圖。


把要加入的煙火貼上上背景

Photoshop圖層的"濾色"就可完成了!! 如何?白天也可以放煙火吧!


煙火完成,雪娘想惡搞一下,加入飛碟被煙火炸毀的有趣畫面...
找飛碟阿~~ 最後決定用Microsoft Office Word的線上多媒體藝廊的飛碟圖!

雪娘要把它製作成被煙火炸二半的畫面增加小屋觀賞的趣味性,
如此這般......以下成果!


背景圖大致上是完成了,未來有需要還會再追加內容!

【小屋頂部】

小屋頂部,主要就是巴哈logo了,慶祝主題的小屋,自然要在這方面下點功夫。
巴哈的logo,當然就是這裡下載囉,另外還要增加一隻巴哈龍,就是利用11周年活動提供的"巴哈週年慶佈景素材包",裡面就有幾種不同樣式的巴哈龍了。
雪娘選了這隻~啊,翅膀被切割了?怎麼辦?當然是要給牠加上去囉!


完成"義翅"


好了,開始加入巴哈logo,有關巴哈姆特的logo遊來和設計理念,可以到巴視覺這裡看看。
新屋背景是煙火,那麼巴哈logo也應該和背景能有融合感,才不會顯的格格不入,因此巴哈logo字體和圖案就製作成光暈效果,看起來像是煙火一般,然後把剛剛那隻巴哈龍給加入!


加入一些小效果,完成!!


別忘了搜尋按鈕也要加入啊,搜尋按鈕雪娘設計和選單按鈕一樣!
以現在新的雪娘屋的主面版稍微有點樣子了!


【選單圖示和選取動畫】

這個區域比較花時間和腦力,當然尋找像雪娘這種日式風的圖示是一個問題,找到後要挑選什麼又是一個問題,加上要自己製作選單的選取動畫,所以說是相當費時費力的。
目前選單圖初步是選用以下:

圖片和現在的雪娘屋比較之下超微縮小了一點~

接下來的動畫,就是要自製了,要在網路上找到和選單文字吻合的框選動畫幾乎是不可能的,而雪娘重新設計了2次才滿意,這是框選狀態的動畫


選單所在頁面的動畫~ 呵呵


【左上會員登出/入欄】
這就比較好設計了,欄位造型為了讓整體一致性,形狀還是和主選單按鈕一樣的方形圓角。



【小屋文章欄位/勇者資料區】
小屋文章欄位,設計成主選單按鈕一樣(又是這種..?),改變現在雪娘屋的尖角樣式,這次看起來會比較圓滑~為了避免單調,也在欄位上面加上慶祝用的禮物~ ^^(是要送給誰?)


勇者資料區,當然也改成一樣的樣式,當然愈到一些設計上的困難,畢竟CSS中,勇者資料區只能更換下半部欄位的底圖,這樣就無法做出和小屋文章欄位一樣的形狀了?
最後,乾脆直接在背景上製作,把勇者資料區全部背景顏色關閉,暫時OK!!

第一次上小屋實際測試!


【評價區】
按照傳統,脫離不了愛心,換了一顆紅心囉


【右方統計欄位】
目前是先簡單規劃,用蛋糕來作為標題圖吧!
文字旁邊的圖示,就用煙火囉!
這裡也是耗了很多時間~
蛋糕

煙火


【按鈕】

這也是美化小屋的重要元件呢!
雪娘對於按鈕的配色,通常都是和小屋文章區的色系一致,按鈕就是這樣配色出來的!



到目前為止,小屋的模樣!



【GP動畫】
雞皮和鴨皮是雪娘屋有趣的地方,
雪娘希望能做出吸引人的玩意兒,但是卻也是一樣要花時間和心思去製作。
這次的GP動畫將大擴充,共126個畫格,每一個畫格都是雪娘自己用手去一一調整和設計物件的移動方向,相當費心費力,希望大家會喜歡~

新的GP動畫




【前版效果】
這個小屋效果,主要就是利用GIF的透明背景,製作出可以在背景前面出現一些動畫的圖案(例如漂浮的汽球..)等等...,可以讓小屋生動不少。這部份也是很要命,重新製作了2次,花了一整天在設計動畫,終於差不多弄好了..(汗)。
至於是什麼?等11週年慶的雪娘屋公開大家就知道了!


【最後驗收】
大家在這篇文章所看到每一個構想,都是在製作時嚐試許多方法、或是解決一些問題後才完成的,改造也即將完工,感謝大家這幾天的支持和期待!! ^^
最後一些部份,要做個檢查,沒問題的話,星期天雪娘新屋就可以開放了!!

雪娘決定到時候讓大家來幫忙驗收啦!!^^

創作回應

會心一(*˘︶˘*)
好漂亮的小屋喔!(☆-v-)。o○((GP~
2007-12-01 15:59:40
38°C的雪娘
歡迎橘夢
感謝您的鼓勵 ^^
2007-12-01 17:47:21
風釆鈴
^ε^)^ε^)^ε^)雪大大辛苦哩,小屋超漂亮*___*。
2007-12-27 23:15:59
38°C的雪娘
歡迎風釆鈴囉
感謝您的光臨 ^^
2008-01-11 20:34:38
真是利害的雪娘
看過幾千個小屋就雪娘的我認為最有用心
2008-01-02 13:49:43
38°C的雪娘
謝謝貝米爾的鼓勵~
雪娘希望能努力的招待大家 ^^
2008-01-11 20:37:42
┌風少爺♂┐
雪姐辛苦了~

製作的很漂亮^^

好有一份心力呀!

我可沒有這麼有決心=.="
2008-01-04 23:53:43
38°C的雪娘
謝謝風少爺的鼓勵~~ ^^
2008-01-11 20:41:15
哈魯
改的還真是厲害
像我就要要弄好久
但陷在就是卡在背景圖這裡
想要放大卻會有方格出現
不知道該如何是好.......
2008-01-15 13:37:42
38°C的雪娘
這就是要看你的背景圖解析度了~圖片太小,硬要放大就會出現馬賽克
當成背景最少也要有1024X768的圖片解析度哦
以現在LCD螢幕的主流尺寸,背景至少要準備1280X1024的圖片當桌布才比較適合~
2008-01-18 17:59:42

相關創作

更多創作