本教程主要使用Photoshop設(shè)計(jì)卡通風(fēng)格的薅羊毛游戲界面，文章把“薅羊毛”小游戲的整體思路與設(shè)計(jì)過(guò)程詳細(xì)的寫(xiě)了下來(lái)，希望能在整理的過(guò)程得到提高。感興趣的朋友可以下載PSD源文件，下面一起來(lái)學(xué)習(xí)吧。

教程源文件：卡通風(fēng)格的游戲界面設(shè)計(jì)PSD源文件

“薅羊毛”小游戲初稿展示

項(xiàng)目設(shè)計(jì)思路的詳細(xì)過(guò)程

1、先確定基本思路

流程圖畫(huà)好以后又做了一些小的修改，制作的方向基本是確定了，由于我們的游戲并非真正意義上手機(jī)端APP游戲，只是網(wǎng)頁(yè)或者微信端的小游戲，故而我設(shè)定的頁(yè)面為三個(gè)：開(kāi)始頁(yè)面、游戲頁(yè)面、領(lǐng)獎(jiǎng)頁(yè)面。另外此次游戲?yàn)?ldquo;薅羊毛”帶有一定惡趣味的感覺(jué)，所以定位為Q版畫(huà)風(fēng)。

2、畫(huà)第一稿(開(kāi)始頁(yè))

經(jīng)驗(yàn)告訴我們，做好先給領(lǐng)導(dǎo)看，是非常正確的。樣子定了再說(shuō)后面的內(nèi)容。

做好后領(lǐng)導(dǎo)和客戶(hù)反映還不錯(cuò)，那么就可以繼續(xù)下面的了，由于此次游戲講究短頻快的原則，所有我把游戲規(guī)則直接放在了開(kāi)始頁(yè)面，快速讀取，快速游戲，背景加了個(gè)可愛(ài)的小羊，做到吸引點(diǎn)擊的作用。

此頁(yè)面所含原素：

3、游戲頁(yè)

是整個(gè)游戲最復(fù)雜的頁(yè)面，需要從游戲的動(dòng)態(tài)效果來(lái)吸引用戶(hù)，而且這個(gè)小游戲的宗旨是以最快速度讓用戶(hù)了解規(guī)則，進(jìn)而為“碼上天翼”平臺(tái)做推廣。故而初稿就先做了一只羊，并未制作過(guò)多的小羊表情，另外由于在繪畫(huà)的過(guò)程中時(shí)間過(guò)于緊迫，第一稿的羊是仿照韓國(guó)sheepo又加了些自己的設(shè)計(jì)。