วันที่ 4-5 วิธี color , font , grid & baseline @ 18-20/11/2555หลังจากหายไป 4 วันเนื่องจากผมติดงานด่วนและต้องไปเครียงานจึงไม่มีเวลาว่างมาเขียนบทความ ตอนนี้ผม ว่างและ
หลังจากหายไป ผมใช้เวลานำสิ่งที่เขียนมาลงเป็น Photoshop ครับเรามาดูวิธีกันเลยดีกว่าว่าผมเริ่มเขียน อย่างไร ครับ
1
Color ชุดสีที่สวยที่สุดคือสีที่เหมาะกับงานนั้นๆ สิ่งหนึ่งที่ web Designer หลายคนส่วนใหญ่ไม่มีในการทำงานคือ ชุดสีครับ
ถามว่า แล้วจะมีทำไม ไม่มีก็ทำได้นิ เว็บก็ออกมาสวยนะ
ใช่ครับ ไม่มีชุดสีก็สร้างเว็บได้ ครับแต่มันจะขาดความลงตัวครับ
ชุดสีมีประโยชน์อย่างไร
ชุดสีจะเป็นตัวกำหนดรูปแบบของงาน ทิศทางของงานและทำไห้งานมีอารมไปในทิศทางเดี่ยวกันครับ
แล้วการเลือกสีละทำอย่างไร
การเลือชุดสีมาใช้งานเราควรเลือชุดสีให้เหมาะสมกับงานครับมี หลายที่ที่มีชุดสีแจก และเว็บหลายแห่งให้ใช้ฟรีครับส่วนตัวผมชอบ
https://kuler.adobe.com/#create/fromacolor 
เป็นเว็บแจกชุดสีของ ADOBE ครับ
อ้ออย่าลืมครับ
ชุดสีที่สวยมักมีน้ำหนักครบทั้ง เข้ม กลาง อ่อน
ที่มาครับ 
2
font ไม่ว่าจะสวยขนาดไหนแต่มันอยู่ที่ไม่ควรอยู่มันก็ไม่สวย!!!เมื่อได้ชุดสีที่ลงตัวเล้วเราก็มาเลือ Font ครับ
ทำไมต้องเลือก Font เป็นสิ่งแรกๆเลยละ หลายคนคงมีคำถามนี้อยู่ในใจใช่ไหมครับ ผมสามารถตอบได้ในทันที่ครับว่า website ที่สวยนอกจาก Layout ที่ดี รูปที่สวยแล้วนั้น Font เป็นอีกหนึ่งหัวใจหลักของ web เลยก็ว่าได้
เพราะ Content Is King ครับ เว็บจะเป็นเว็บไม่ได้ถ้าไม่มีเนื้อหา และ ส่วนประกอบหลักของเว็บก็คือเนื้อหาด้วย
ดังนั้น Font ที่ดีก็จะทำให้ได้งานที่ดีด้วย
การเลือ font ก็ควรเลือ ตามงานที่เรา design ครับ เช่น งานคุณเป็น Modern Font ของคุณก็ควร เป็นฟอนต์สไตล์ Sans-Serif คือฟอนต์ที่ไม่มีเส้นปิดหัวปิดท้าย เป็นต้น
3 grid & baseline จากA4ขาวๆกลับสู่สมุดเรียนประถม หลายคนไม่รู้จักเลยก็ว่าได้ว่า grid & baseline มันคืออะไรแล้วทำไมต้องทำ
คุณลองนึกถึงตอนเรียนประถม สมุดเรียนของคุณจะมีเส้นแบ่งบรรทัดและมีเส้นแดงๆแบ่งด้านซ้ายมือไว้ไห้เขียนวันที่ใช่ไหมครับ นั้นและครับมันคือ grid & baseline มันจะทำไห้คุณเขียนตรงและเป็นระเบียบครับ
เช่นกันบนงาน web มันก็จะทำให้คุณออกแบบได้เป็นระเบียบและเป็นมืออาชีพครับ

grid ตารางสมมติที่ใช้ช่วยกะระยะ และตำแหน่งในการทำงานกับรูปภาพ โดยมีลักษณะเป็นตารางสีเทาที่มีระยะห่างของแต่ละช่องเท่า ๆ กัน
grid ของเว็บนั้นมีหลากหลาย ซึ่งแล้วแต่เราจะออกแบบครับโดยส่วนใหญ่แล้ว grid บนงาน webdesign ของเมืองนอกจะ นิยม grid 960 เป็นหลักครับเพราะมีการวิจัยออกมาว่าความกว่างขนาด 960 จะแสดงผลออกมาได้ดีที่สุด
ผมไม่รู้ว่าจริงไม่จริงอย่างไร เพราะผมก็ใช้บ้างไม่ใช้บ้างเหมือนกันครับ


grid 960
baseline คือเส้นบันทัดครับ จะทำให้webของเรา มีระเบียบและสวยขึ้นครับเราควรกำหนด baseline ให้พอดีกับขนาด Font ครับเช่น เราใช้ font 14 baselineเราควรจะ อยู่ที่ 150% หรือ 21 ครับการใช้ baseline ไม่ค่อยตายตัวครับแต่ควรจะอยู่ระหว่า 130-160% เพื่อให้อ่านง่าย ครับ

จากภาพ ทางซ้าย ไม่ได้ตั่งค่า baseline แต่ทางขวาจะใช่ครับ สังเกตุว่าทางซ้ายจะอ่านยากกว่าทางขวาครับ
คร่าวหน้าเราจะมาดูเรืองการสร้าง theme PSD กันครับ