2012年11月28日 星期三

使用CSS3來產生icon 圖示


ICON 圖示主要是用在:
  • Facebook 粉絲團,還有Facebook的App
  • 把網站加到iPhone/iPad 桌面(主頁) 上的圖示
  • 等等...
那我現在有五個邦,請人設計一個3000~5000元好了,那不就要15000~25000?如果真請人設計,自己也不太會審核。當然我不排除這個選項,我先想一下需求好了...
主要的用途是在 iPhone/iPad加到桌面的 icon,觀察一下目前的 icon 型態,有幾個特色:
  • 幾乎沒有使用相片來做,因為圖片會太複雜,也不明顯。原本我想這麼做的,想說去找個旅遊的照片,然後加上「旅遊邦」三個字。
  • 你不能塞太多字,英文有先天上的優勢,可以用代號。中文最多塞四個字。
    pinterest 和 TED
  • 卡通類的圖示:這就一定要請人設計了,完全沒概念。
    evernote 和 大家想吃什麼
圖示怎樣才能明顯?當使用者一回到 iphone 桌面,就是 (web) app 廠商間的一個戰爭:
  • 如果使用者只是下載下來看看。那你的圖示就要越有特色越好,以我個人的經驗,我 iphone 裡有N個app都沒點開來看過。但這個 case 比較不適用於OO邦。
  • 如果使用者對你的 app 或網站有個底,在想要用的時候,也需要花心力在 iphone 桌面中尋找一番。但你大可放心,使用者絕對不會沒事想起你的App的!
  • 如果使用者只是到桌面晃晃,icon 明不明顯真的很重要!不然很容易被Facebook或safari這種大咖吸走。
許多 app 都用一個英文字來代表,英文只有二十六個,中文的機會多了許多,那我就來試試吧!我很尊重著作權的(認真貌),所以電腦連 MS Office 沒有,更沒有PhotoShop (其實我也不太會用)。那我就用HTML5 + CSS3當做我的圖片編輯器,使用到的項目如下:
  • 環境是 Chrome + Win 7
  • 字體設成 "微軟正黑體" ,比細明體和古板的標楷體好看多了,也比較有特色,但微軟正黑體不能是粗體,不然看起來怪怪的。
  • 使用CSS text-shadow來做字體陰影。(Firefox好像不支援)
  • 使用CSS的rotate來做左上角的...貼紙。
  • jquery UI 的 theme roller 尋找底色的素材,好像有一些網站有免費的,但是有的會有奇怪的條款(比如說要求網站加連結)。找好素材,再到 這個網站去把jquery theme轉換成永久連結。
  • 每一個邦底色、顏色、字體陰影的粗細都要配色配很久很久,我是請我老婆一邊看的,自己沒什麼概念。
細節不多說,這就是成品了!


別跟我說要用canvas轉成data uri再存到server,才五個而已,簡單 print screen 再貼到小畫家存起來就好啦!