Chia Yi Lai

Calendar

calendar-800

初體驗

這個日曆圖示是我第一次嚐試畫 icon,是一個農民曆專案網站,需要顯眼的日期告知使用者目前的日期。

製作流程

  • 1. 使用黑色作為底盤,加上了些許的雜訊、漸層和陰影。
  • 2. 黑底襯托日曆的紅色檔頭和白色紙張 (黑白紅絕對是最經典永不退流行的組合之一);
  • 3. 不讓紙張太死白,加了淡淡的淺灰白漸層。
  • 4. 最後加上撕紙的效果,增加擬物與生動性。

verdana 很適合用在數字上

月份英文縮寫字型使用 verdana regular,日期數字則使用 verdana bold,有一致性也有區隔。(IKEA 產品價格字型也是使用 verdana 字型!)

About HTML & CSS

月份和日期的文字要用 HTML 來製作,CSS 使用 position:absolute 屬性來定位,並且設定寬度等於整個日曆寬,再加上 text-align:center 的屬性,這樣就可以使文字準確地置中在日曆裡了。

keyboard_arrow_up