การออกแบบเว็บเพจ
ตอนที่1
แค่จัดวาง
โดย Sexpert

ในการทำงานอะไรซักอย่างหนึ่งนั้น การเริ่มต้น การพัฒนามักจะเป็นในลักษณะลำดับขั้น ซึ่งบางครั้งก็เริ่มต่างกัน พัฒนาได้เร็วช้าต่างกัน อาจมีการข้ามขั้นบ้าง แต่ยังไงก็ต้องเป็นลำดับ อาจจะเริ่มจาก
ห่วยแตก ==> พอทน ==> พอใช้ ==> ดี ==> ดีเยี่ยม ==> เพอร์เฟค ==> ระดับชาติ ==> ระดับโลก ==> ตำนาน
ซึ่งอาจจะมีคำจัดกัดความอย่างอื่นก็เป็นได้ แต่ผมแค่ยกตัวอย่างให้เห็นภาพ.. ทีนี้เรื่องของการออกแบบเว็บเพจก็เช่นกันคนที่ทำได้สวยที่สุด ผมคิดว่าก็ทำออกมาห่วยแตก มาก่อนแล้วจึงพัฒนาไปเรื่อย ในตอนนี้ ผมจึงจะสร้างภาพร่าง คร่าวๆ ให้เห็นก่อนว่าการออกแบบในระดับที่พอทนทำอย่างไร(อย่างน้อยก็ข้ามขั้นห่วยแตกไปได้) ซึ่งการออกแบบในที่นี้ เป็นการทำอย่างง่ายๆ ทั้งนี้ คุณอาจจะบอกว่าไม่สวย ธรรมดาไป ฯ ก็ต้องเรียนก่อนว่าอย่างที่ได้กล่าวไปแล้วมันเป็นลำดับขั้น สำหรับคนที่เพิ่งเริ่มต้น หรือคนที่อ่อนทางด้านการออกแบบ ให้มีแนวคิดต่อๆ ไป
     ทั้งนี้ทั้งนั้นการสร้าง “แนวคิด” ต้องมาจากตัวตนผู้นั้นเองด้วย ผมแนะนำได้เพียง “แนวทาง” เท่านั้น เรามาเริ่มกันเลยครับ

................................................................................................................................................................................

1. สร้างภาพขึ้นมาในหัว หรือเขียนแบบร่างเอาไว้ก่อนลงกระดาษ บางคนอาจถามว่าแล้วเอาแนวคิดตรงนี้มาจากไหน ก็เอาไว้ติดตามตอนต่อไป จะเป็นบทความถึงแนวคิดล้วนๆ ในตอนนี้ผมสมมติเอาว่า ภาพร่างในหัวผมออกมาเป็นลักษณะนี้

เป็นอย่างไรครับ ภาพร่างของผม ครับมันก็ดูธรรมดาๆ แต่อย่างที่กล่าวไว้ในตอนต้น สำหรับผมแล้วมันดูดีกว่าเว็บแรกที่ผมทำซะอีก อย่างน้อยผมว่ามันไม่ห่วยแตก ทีนี้เมื่อเรามีภาพร่างแล้วเรามาดูขั้นตอนการทำ หน้าเพจง่ายๆ แบบนี้กัน ก่อนอื่นต้องบอกว่า ผมใช้โปรแกรม Adobe Photoshop เวอร์ชั่นไหนก็ได้ครับ เพราะไม่ได้ใช้เครื่องมือพิเศษๆ อะไรของโปรแกรมเลยไม่งั้นมันจะง่ายได้ไง ^^”

2.เมื่อคุณเปิดโปรแกรมแล้ว ก็ต้องเริ่มจากเปิดแผ่นงานขึ้นมา ขนาดก็ประมาณเอาตามความกว้างหน้าเพจที่คุณต้องการ

จากนั้นผมก็เริ่มลากสี่เหลี่ยมขึ้นมาด้วยเครื่องมือดังภาพ

แล้วลากสี่เหลี่ยมขึ้นมาประมาณหนึ่ง จากนั้นเทสีลงไปตามที่ต้องการ เพื่อให้เป็นไปตามภาพร่างที่ได้ออกแบบไว้ ก็ปรับให้มันบิดๆ เบี้ยวๆ สักหน่อยโดยเครื่องมือ ตามภาพ

3. จากนั้นไปที่ กล่อง Layer

แล้วสร้าง Layer ใหม่ขึ้นโดยการ คลิ๊กรูปที่ทำเครื่องหมายไว้ ทั้งนี้ในการแยกส่วนแต่ละส่วนเป็นแต่ละ Layer จะทำให้คุณสะดวกในเรื่องการแก้ไขหรือดัดแปลง ซึ่งคงต้องบอกว่าทำไปๆ ก็จะเข้าใจประโยชน์ของมันอย่างลึกซึ้งขึ้นเอง(พูดง่ายเนอะ)

หลังจากได้ Layer ว่างๆ ขึ้นอีกอันแล้ว ก็ผมก็ทำเหมือนเดิมคือ สร้างรูปสี่เหลี่ยมขึ้นมาอีกอัน เพื่อซ้อนอันเดิม ตามรูปแบบที่ได้ออกแบบไว้ ดังภาพ

4. ขั้นตอนต่อไปผมจะเริ่มที่บาร์ด้านบนก่อน เช่นเคย ผมก็ สร้าง Layer ขึ้นมา ลากสี่เหลี่ยมขนาดพอประมาณแล้วเทสีลงไป ตรงนี้จะใส่ความสวยงามนิดหนึ่งด้วยเครื่องมือ ตามรูป

ทั้งนี้การใช้เครื่องมือนี้จะไม่เหมือนเครื่องมือรูปกระป๋องสีที่เราใช้เทสี แต่จะได้ภาพออกมาลักษณะไล่สีตามภาพ

การไล่สีจะเป็นการไล่สีระหว่างสีหน้าและสีหลังของ กล่องเครื่องมือส่วนแสดงสี ซึ่งวิธีการเปลี่ยนสีก็คลิกไปตรงส่วนนั้นที่ต้องการเปลี่ยนได้เลย ในที่นี่ผมเลือกแล้วเป็นสีม่วงไล่ขาวตามรูป

ซึ่งหลังจากลองใช้ไป ใช้มา ก็เชื่อว่า คุณจะได้ลักษณะที่เหมาะสมตามที่คุณต้องการ

5. หลังจากได้บาร์ที่เหมาะสมมาหนึ่งอัน ทีนี้ผมก็ Copy บาร์นั้นขึ้นมาอีกอัน โดยการเลือกไปที่กล่อง Layer ลาก Layer ที่ต้องการ Copy ไปที่รูปกระดาษ (ที่เดียวกับสร้าง Layer ใหม่ข้อ 3) ก็จะได้ บาร์เหมือนเดิมมาอีกอัน ตามรูป

6. จากนั้นใช้เครื่องมือ

ลาก Layer แยกออกจากกัน จากนั้นปรับระดับสีให้แตกต่างกัน โดยปรับจากที่ตามรูป

จะได้ออกมาลักษณะ ดังรูป

จากนั้นลากไปซ้อนตามความเหมาะสมอย่างที่ต้องการ

7. จากนั้นมาเราก็มาทำส่วนของชื่อเว็บ ซึ่งใช้หลักการเดียวกับข้อ 6 แต่ต่างกันนิดหน่อย โดยเริ่มจากการพิมพ์ข้อความตามที่ต้องการขึ้นมาก่อน

เมื่อได้ดังภาพแล้ว เราก็ Copy ข้อความนั้นมาอีก Layer หนึ่ง

แล้วก็เลือกที่ Layer ข้อความใหม่ เพื่อเปลี่ยนสีให้แตกต่าง โดยเปลี่ยนสีได้ที่ตำแหน่งตามรูป

จากนั้นเมื่อได้ปรับสีได้ตามต้องการแล้ว ก็ปรับตำแหน่งให้เหมาะสม ลักษณะเดียวกับ แถบบาร์สีม่วงใน ข้อ 6. จะได้ลักษณะดังภาพ (หากใครอยากได้ โลโก้แบนเนอร์สวยๆ กว่านี้ ติดตามตอนต่อไปนะครับ)
** นาย sexpert สัญญาตรงนี้แล้วว่าจะทำบทความสอนทำ Logo มาให้เราอ่านครับ **

8. ในขั้นตอนนี้ก็ไม่มีอะไรมากแล้ว ก็แค่นำรูปที่ผมเตรียมไว้ มาวางตามตำแหน่งที่ได้ออกแบบไว้ ดังรูป

9. จากนั้นก็พิมพ์ข้อความส่วนที่เป็นเมนู ลงไป ดังรูป

10. เท่านี้ก็เสร็จสิ้นขั้นตอนการออกแบบ ด้วย Photoshop แล้ว ก็เหลือเพียงการนำไปทำเป็นเว็บไซต์ ทั้งนี้ถ้าเป็นผม ก็จะใช้วิธีตัดภาพนี้ออกเป็นสี่เหลี่ยม ทีละส่วนๆ แบบตาราง แล้วนำไปจัดวางในลักษณะตาราง ซึ่งหลักเกณฑ์เรื่องตารางนี้มีอยู่แล้วในบทความของเว็บไซต์ dwthai.com นี้

................................................................................................................................................................................

ข้อสังเกต : สิ่งที่ฝากไว้คือ จะสังเกตได้ว่าผม จะใช้สีหลัก กับเว็บเพจนี้เพียง 3 สี คือ เหลืองอ่อน เขียวแก่ และม่วง นี่ก็เป็นจุดหนึ่งที่ทำให้เว็บไม่ดูลิเกเกินไป และจะเห็นว่าทั้งหมดใช้การจัดวางที่ถูกทีถูกทาง โดยไม่มีเทคนิคด้านกราฟฟิคมากมายเลยและทำให้ได้เว็บเพจหน้าตาเป็นเช่นนี้

................................................................................................................................................................................