เว็ปแนะนำให้ใช้ในการช่วยออกแบบ
960.gs
Small.cat ช่วย generate keyword ให้อัตโนมัติ http://small.cat/cap จะเข้าไปที่ guideguide.me
ให้ download CS5,CS6& CC downloadจะได้ guideguide-2.14.zip ให้ upzipและ install ลงในเครื่องที่มี photoshop cs6 ซึ่ง guideguideเป็นเหมือน plugin
จากนั้น ให้เข้า photoshop cs6 open new file ด้วย ctrl N = file-new
ตั้งค่าไฟล์web ใน cs 6
การตั้งค่า pixel เพื่อแบ่ง column
View-Ruler คลิกขวา เลือก pixel เป็นการตั้งค่าไม้บรรทัดให้หน่วยเป็นpixel
Window-Extention-GuideGuide
วิธีการคำนวณ หน้าจอ 1020 pixelต้องการ 12 colum 11 gutter
ช่องละ 60 pixel x 12ช่อง = 720 pixel
Gutter 20pixel x 11 ช่อง = 220 pixel =940 pixel
=1020 – 940 = 80 pixel
=80/2 = 40 pixel = left/right margin ด้านข้างละ 40 pixel
จะได้การตั้งค่า GuideGuide ดังภาพ
