ออกแบบเว็บไซต์ สร้างเฟรมหลัก

เริ่มลงมือทำ

เมื่อได้โครงร่างแบบที่ลองร่างไว้แล้ว ทีนี้ก็มาเริ่มใช้งานโปรแกรม Photoshop เพื่อ สร้างเว็บไซต์ กันสักที โดยการกำหนดขนาดเฟรมนั้น ผมใช้กว้าง 960px ตามคำแนะนำที่บอกในบทที่แล้ว และสูงประมาณ 500px ความสูงนี่แล้วแต่ แต่ละคนจะกำหนดเองได้เลย

พื้นหลัง: มือใหม่ แนะนำให้ลองเลือกเป็น Forground หรือ Background ไปก่อนแล้วค่อยไปเปลี่ยนสีเอานะครับ หากใครตั้งใจเอาพื้นหลังสีขาวหรือดำไว้แล้วก็ข้ามไปได้เลย

ส่วนตัวอย่างในภาพนี้ Transparent เป็นการกำหนดพื้นหลังแบบโปร่งใส

ทำความคุ้นเคยกับเฟรมหลัก

หากของใครกำหนดเป็นขาว หรือ ดำตาม Background หรือ Forground แล้ว Photoshop ก็จะสร้างเฟรมหลักนั้นมาให้คุณ แต่ของผมเลือกเป็นโปร่งใสแล้วมาเทสีน้ำเงินครามเป็นสีพื้นหลังของผมก็จะได้แบบดังภาพ ( ขนาดจริงคือ 960×500 px ) เนื่องจากรูปมีความใหญ่ คุณสามารถกดที่ภาพเพื่อขยายดูได้ทุกรูปที่สอนครับ

เมื่อได้เฟรมหลักก็เริ่มจัดการใส่องค์ประกอบต่างๆ ที่ร่างแบบไว้ครับ ใครจะทำอะไรแบบไหนก็ตามสะดวกได้เลย เครื่องมือหลักๆที่จะใช้ก็เช่นพวก Shape Tool ต่างๆวาดรูปครับ
และสิ่งที่ลืมไม่ได้เลยคือการแยก Layer การทำงานให้เป็นระบบ เช่น Layer ของ Background ก็แบ่งเป็นของพื้นหลังไปเลย ห้ามมีวัตถุอื่นๆมาอยู่ใน Layer นี้ เพื่อเวลาการย้ายตำแหน่ง การใส่สีใส่ effect ต่างๆจะทำได้โดยง่าย และไม่ต้องมาปวดหัวทีหลัง

ใครจะตั้งชื่อหรือไม่ก็ได้ แต่เพื่อการจดจำง่ายก็ควรตั้งไว้ ไม่เสียหาย

Layer เปรียบเสมือนแผ่นกระดาษ A4 แต่ละแผ่นครับ ถ้าเอากระดาษ A4 ที่เป็นชื่อ Background มาไว้ล่างสุด พอมองจากข้างบน เราก็จะเห็นเป็นชั้นๆลงไป เช่น ถ้าเอาวัตถุที่เป็นตัวหนังสือมาวางในอีก Layer นึงแล้ว ให้มันอยู่บน Layer ของพื้นหลัง เราก็จะมองเห็นตัวหนังสืออยู่บนพื้นหลังปกติ

แต่หาก เราเอา Layer พื้นหลังขึ้นมาไว้บนสุด เราก็จะมองไม่เห็นตัวหนังสือหรือวัตถุใดๆที่อยู่ข้างล่าง
การสร้าง Layer ใหม่ ทำได้โดยกดที่ รูปไอค่อนกระดาษพับมุมข้างๆรูปถังขยะครับ

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

อย่าลืมนะครับ ความสนใจของคนเข้าเว็บส่วนมาก จะอยู่ที่มุมซ้ายบนก่อน เพราะฉะนั้น ผมจึงเอาโลโก้ไว้บนซ้ายเป็นธรรมชาติไปโดยปริยาย..

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

ใจร้อน คือ อุปสรรค

การทำงานพวกนี้ต้องใจเย็นๆ อาจจะต้องใช้เวลามากหน่อยกับการปรับแต่งให้ได้ตามใจในแต่ละรูป แต่ละที แต่เมื่อมีการวางแปลนเว็บไว้ก่อนแล้ว จะทำให้เราย่นระยะเวลาไปได้มากเลยทีเดียว

ส่วนเว็บโหลดฟ้อนต์หรือตัวหนังสือสวยๆนั้นมีอยู่หลายแห่ง ซึ่งส่วนมากจะฟรี ที่ผมแนะนำของคนไทย โดยคนไทย คือ f0nt.com ส่วนของฝรั่งก็จะเป็น dafont.com ครับ การเลือกตัวหนังสือนั้นค่อนข้างสำคัญไม่แพ้กัน หากได้ตัวหนังสือที่อ่อนช้อยตามประเภทเว็บไซต์ หรือ หนักแน่นตามที่ต้องการแล้ว
มันจะช่วยสื่อสารกับผู้ชมเว็บของเราได้ง่ายขึ้นด้วย

หากใครไม่มีไอเดียใน การสร้างเว็บไซต์ หรือวาดร่างแบบเว็บไซต์เลย ให้ลองไปหาเว็บ Templatemonster.com แล้วลองดูแบบที่เขา สร้างเว็บไซต์ ขึ้นมาครับ อาจจะทำได้ไม่เหมือน แต่อยากน้อยก็ทำให้เราได้ความคิดและไอเดียสวยๆจากเขามาบ้างเหมือนกัน

Jir4yu.