排版練習2:PSD to html with Bootstrap

less than 1 minute read

第二個練習一樣學習tuts的課程,選擇課程的好處是做到一半不知道該怎麼做時,有video解答可以看。看看高手怎麼做總是比自己亂弄的好的多。我選擇的課程是需要付費的,tuts還有一些免費的教材可以學習,影片或是文章教學都有,有興趣的自己發掘囉。第二個練習跟第一個練習不同之處在於本練習會使用bootstrap的grid system來排版,並且icon與logo會使用sprite css的方式來製作。

Sprite sheets

sprite 說的是利用將 icon 集中在一張圖片上,藉由CSS設定不同顯示區域,來實現每一個不同的icon。這樣的好處是很可降低圖片request數,減少server負擔。現在我們要使用sprite的方法實作的是右上角的五個social-icon和左上角的mumbo logo。

Create Sprite Sheets

  1. 首先在photoshop中用方框工具圈選5個icon
  2. 點選file > copy merge複製五個icon
  3. file > new 建立新檔案,圖像大小設定為250 X 250。
  4. 開啟ruler(view > ruler)
  5. 從左側ruler拉進隔線每50px拉一條,這是為了等等區隔複製過來的icon,每個間隔會是50px。
  6. 使用方框工具(第二個工具)選取後,用移動工具(第一個工具)將icon對齊左上角(如果右下角的layer選錯的話,方框工具會選不到圖案)。
  7. 接著將mumbo logo也複製進來,放在第二排,對齊左上角,製作好的photoshop檔案會是長得像這樣。 註:
  8. 將photoshop檔案 save for web,存成檔名為sprite.png的檔案。放在imgs資料夾下。
  9. 製作好圖片之後來實際做做看social-list,關鍵是將background設成sprite.png。再利用個別的class鎖定不同的位置,這樣就會顯示不同的icon。
    .social-list li{
      display: inline-block;
      margin: 0 2px;
    }
    .social-list li a {
      display: inline-block;
      width: 37px;
      height: 37px;
      background: url(../imgs/sprite.png) no-repeat 0 0;
    }
    .social-list li a.vimeo {
      background-position: -50px 0;
    }
    .social-list li a.lastfm {
      background-position: -100px 0;
    }
    .social-list li a.linkedin {
      background-position: -152px 0;
    }
    .social-list li a.dribble {
      background-position: -200px 0;
    }
    
  10. 這樣就完成social-icon了。
  11. 接著要把左上方的logo用sprite的手法改寫。
    header hgroup h1 a{
      display: block;
      width: 172px;
      height: 25px;
      background: url(../imgs/sprite.png) no-repeat 0 -50px;
    }
    
  12. 如此一來便大功告成。使用photoshop手動製作sprite是比較沒效率的作法,現在已經有很多方便的工具可以使用,藉由這個練習了解sprite的原理,之後再學習快速開發的工具便容易許多。

學習筆記

  1. 先來進行header的h1與h2排版,要達成的效果如下圖。還在苦惱怎麼使用純CSS設定長寬和box-model讓他服服貼貼的時候,突然發現有.pull-left可以用。真是太方便了。

  2. 使用font-style: italic;就可以讓標題有傾斜的效果。

  3. 如何讓li前面的dot變色?對li加上color: #ff6b39;就可以將dot一同變色。

Leave a Comment