切版的二、三事 。 因本人切版還不夠嫻熟。內容若有誤還請幫忙糾正。謝謝

1. 那些年網頁PS切板的小事
Jaja

2. 目錄
 動刀前的準備
 何謂切版
 第一刀
 手術完的結果
 Reset.css & Gird System

3. 在正式開始切版之前

4. 一定要介紹本門內功心法
http://images.gamebase.com.tw/gb_img/8/001/028/1028448.jpg

5. 首先是四大秘笈
http://cdn02.pinkoi.com/product/1K05DaOI/0/16/500x0.jpg

6. 首先是四大秘笈設計原則
http://www.graphixmedia.net/graphic-designing.html

7. 重複
http://www.uisdc.com/design-high-end-poster

8. 對比
http://www.uisdc.com/design-high-end-poster

9. 親愛
http://www.uisdc.com/design-high-end-poster

10. 對齊
http://www.uisdc.com/design-high-end-poster

11. http://www.uisdc.com/design-high-end-poster

12. 接下來是圖檔介紹
http://zh.wikipedia.org/wiki/File:Windows_Live_Photo_Gallery_logo.png

13. http://www.cadiis.com.tw/lessons-learned/146-file-types-of-web-design-gif-jpg-png

14. http://www.biaodianfu.com/progressive-jpeg.html

15. http://www.uisdc.com/6-common-image-format

16. 接下來就要練個一招半式了
http://s161.photobucket.com/user/homejack2302/media/wc02.jpg.html

17. 切版其實不困難

18. 你只要把PSD檔案內容變成WEB就好了
http://i.ytimg.com/vi/T0mBQYn7Mv8/maxresdefault.jpg

20. 真有這麼簡單就好了…
http://i.bnet.com/blogs/2549180542_4a47257bd2.jpg

21. 熟記以下心法，你也可以學會切版
http://0rz.tw/WZY4n

22. 切版口訣
 先描出大致的版面區塊
 找出要切的物件：LOGO、ICON、特殊按鈕、背景
 物件背景要不要透明
 切的時候邊緣是否要留白
 能用CSS做出來的就不切 : menu 、 button 、 簡單的
background

23. 描出版面區塊
header
slider
content
footer

24. 找出要切的物件
LOGO
Product Image
Special Btn
Heading Image
ICONS

25. 注意背景是否需要透明

26. 成果圖

27. 接下來就是排版了
http://i.ytimg.com/vi/GT2v0o8Df4c/hqdefault.jpg

28. 排版心法
 先排完大區塊
 調整小區塊
 最後加上效果CSS

29. 大區塊
header
slider
content
footer

30. 小區塊 LOGO Menu

31. 範例

32. 其實CSS有一個問題

33. 各家瀏覽器都愛自已的調調

35. 想想你在FireFox排好版了

36. 結果IE版面破版了…
http://ppt.cc/NeLB

37. 好險我們現在有

38. 960 Grid System & Reset.css

39. http://ppt.cc/LWjK

40. Reset.css 用來重置並統一所有樣式

41. 使用前 使用後

42. http://ppt.cc/97QY
記得排版前先「服用」

43. 960 Grid
 固定寬度的設計
 格狀式的排版
 支持RWD

44. Blueprint
960 Grid

45. 排的時候只要「數格子」
http://ppt.cc/ehsd

46. Blueprint
 畫面總寬度 = 單位欄位寬度 x N + 單位欄位留白 x (N-1), N 為欄位數目
 預設值 : 950px = 30px x 24 + 10px x 23
http://ppt.cc/5Gc8

47. 直接看範例
 LOGO寬度為219px (這裡取220)
 所以除於 (1格+留白) = 40px
 220 / 40 = 5.5格 所以最少要配給他六格的空間

48. 賓果!!!
1 2 3 4 5 6

49. RWD
有用Grid 沒有用Grid

50. Q & A