สวัสดีครับ วันนี้ก๊อตจะสอนการออกแบบ Layout ของเว็บไซต์ในโปรแกรม Photoshop กันครับ โดยธีมหลักของครั้งนี้คือ เว็บผู้ให้บริการโฮสติ้งครับ โดยสีหลักของเว็บคือ สีเหลือง เทา-ขาว และสีดำ ครับ
สภาพตอนเสร็จแล้ว
เริ่มลงมือทำกันเลย
1. เริ่มแรกเลย เปิดโปรแกรม Photoshop เลยครับผม
- สร้างเอกสารใหม่ File > New…
- กำหนดความกว้าง 1200px ยาว 1200px
2. ทำพื้นหลังไล่จากสีเทาลงมาเป็นสีขาวหม่น
- คลิกที่ Foreground แล้วตั้งเป็นสี #CECECE ส่วน Background เป็น #EEEEEE
- คลิกที่เครื่องมือ Gradient Tool หรือ คีย์ลัดคือ G
- คลิกที่ Linear Gradient ด้านบน เพราะเราต้องการไล่สีเป็นเส้นตรง
- คลิกที่ด้านบนของหน้าเว็บแล้วลากลงไปจนสุดด้านล่าง
3. กด Ctrl+R เพื่อเปิดไม้บรรทัดขึ้น เพื่อง่ายต่อการจัดเลย์เอาท์ครับ ให้ลากเส้น Guide แนวตั้งที่ไปที่เลข 100 และ 1100 ซึ่งส่วนประกอบของเว็บไซต์จะอยู่ในเส้นขอบสีฟ้านี
4. ต่อไป เราจะสร้างพื้นหลัง Header กัน
- เลือกเครื่องมือ Rectangular Marquee Tool
- Style ด้านบน ให้เลือก Fixed Size
- กำหนดขนาดความกว้าง 1200px ความสูง 330px
- แล้วสร้าง Selction บนหน้ากระดาษเว็บ ให้ติดชิดขอบบน – ซ้าย – ขวา ดังรูป
- สร้างเลเยอร์เปล่า อันใหม่
- เลือกสี Foreground เป็น #FFA434 และ Background เป็น E66E00
- เลือกเครื่องมือ Gradient Tool
- ด้านบนเลือกเป็น Radial Gradient เพื่อไล่เสีเป็นลักษณะรัศมีวงกลม
- คลิกเมาส์แล้วลากไปตำแหน่งตามรูปด้านล่าง
- เพิ่ม Layer Style ให้กับ Header ตั้งค่าตามรูปด้านล่างนี้
5. ต่อไปคือการทำแถบดำด้านบน Header ครับ
- สร้างเลเยอร์เปล่าขึ้นใหม่
- เลือกสี Foreground เป็นสีดำ หรือ #000000
- เลือก Shape Tool
- เลือก Fill Pixel เพื่อวาดลงไปในเลเยอร์ที่เราสร้างขึ้นใหม่เลย
- เลือก Rectangle Tool เพราะเราจะวาดกล่องลักษณะสี่เหลี่ยม
- สร้างแถบสีดำตามรูปด้านล่าง
- เลือก Rounded Rectangle
- แล้วลากลงในเลเยอร์เดิมที่เป็นแถบสีดำ ลักษณะดังรูปด้านล่าง
- เพิ่ม Layer Style ให้กับแถบสีดำ
6. ทำชื่อเว็บของคุณ ในที่นี่ผมใช้คำว่า kotzhul hosting นะครับ
- พิมคำวา kotzhul ด้วยสีอะไรก็ได้ ในตัวอย่างผมใช้สีเหลือง
- ผมใช้ฟอนต์ที่ชื่อว่า Khmer UI ขนาด 34 pt
(มีฟอนต์อื่นที่มีลักษณะคล้ายกับที่ผมใช้ หาโหลดได้ที่นี่ครับ)
- ใส่ Layer Style ให้กับ kotzhul ตามนี้
- พิมคำว่า hosting ต่อท้ายคำว่า kotzhul
- เพิ่ม Layer Style ให้กับเลเยอร์ hosting
** Drop Shadow ใช้ค่าเดียวกับคำว่า kotzhul ส่วน Gradient ให้ใส่ค่าตามด้านล่างนี้
7. ต่อไปพิมพ์เมนูลงไปด้านข้างชื่อเว็บ เลยครับ
8. วิธีทำเส้นแบ่ง (เมนู)
- สร้า Layer ใหม่
- เลือก Line Tool และเลือกสี Foreground เป็นสีดำ / ด้านบนซ้ายให้เลือกเป็น Fill Pixels / ช่อง Weight ให้ใส่ค่า 1px
- ลากเส้นลงไปในช่องว่างระหว่างกลางแต่ละเมนู
- ต่อไปเปลี่ยนสี Foreground เป็นสีขาว แล้วลากเส้นให้ติดกับเส้นสีดำ (ขนาดและความยาวต้องมีขนาดเท่ากัน)
- Select เลเยอร์เส้นสีขาวดำ โดย กด Ctrl ค้าง แล้วคลิกที่ Layer Thumbnail
- เลือกเครื่องมือ Move Tool หรือคีย์ลัด (V)
- Copy เส้นขาวดำโดย กด Alt ค้างแล้วลากเส้นขาวดำ ไปอยู่ช่องว่างระหว่างเมนูอันอื่นๆ
- เปลี่ยน Layer Mode เป็น Soft Light เสร็จแล้วจะเป็นแบบรูปด้านล่าง
9. เราจะมากันต่อในส่วน Header
- ทางด้านซ้ายจะเป็นสรรพคุณของเว็บ ใส้ตัวอักษรสีขาว และฟอนต์ที่คุณชื่นชอบ
ถ้าคุณไม่รูว่าจะพิมพ์อะไร คุณสามารถใช้ตัวตัว Dummy จาก Lorem Lipsum ก่อนได้
- เพิ่ม Layer Style ตามนี้
10. ต่อไปเราจะมาทำในส่วน Hosting Plan กันนะครับ
- เลือกเครื่องมือ Rounded Rectangle เลือกสี Foreground เป็นสีขาว
- ขนาดกว้างประมาณ 967 px สูง 250 px ไม่ต้องขนาดเป๊ะๆ กับผมมากก็ได้นะครับ เอาขนาดที่คุณคิดว่าเหมาะสม
* เลเยอร์ สี่เหลี่ยมสีขาวนี้ต้องอยู่ล่างของเลเยอร์ รูปโฮสติ้ง
- ใส่ Layer Style ให้กับสีเหลี่ยมสีขาวขอมมน ตามนี้
- พิมพ์หัวข้อของแต่ละ Plane – M, L, XL
- ใช้ Rectangle Shape Tool กับสี #F26522 แล้วเปลี่ยน Layer Mode เป็น Linear Light
(เลเยอร์นี้วางอยู่ใต้หัวข้อ M,L,XL)
- ใช้รูป Hosting ที่ผมหาได้จาก Google Image มาตัดพื้นหลังออก แล้วนำมาแปะในแต่ละแพลน
- พิมพ์รายละเอียดในแต่ละแพลน ของผมใช้ฟอนต์ Arial ขนาด 12 pt
- ใช้ Rounded Rectangle Shape Tool สร้างในแต่ละแพลน แล้ว Add Layer Style ด้วย Gradient ไล่โทนสีส้มไปเหลือง
- พิมพ์คำว่า Learn More ในแต่ละสี่แหลี่ยม
- ทำเส้นแบ่งในแต่ละแพลน วิธีทำ เหมือนกับการทำเส้นแบ่งเมนู ในข้อ 8
- เสร็จแล้วจะได้รูปแบบประมาณนี้
11. ใส่เนื้อหาด้านล่างถัดลงจาก Hosting Plane
- Icon ในหัวข้อ Kotzhul Hosting และ News and Update สามารถโหลดได้จากที่นี่ครับ
- ทำเส้นแบ่งเนื้อหา (วิธีทำเหมือนเส้นแบ่งเมนู) แล้วทำให้มันจางหายไป โดยคลิก อยู่ด้านขวาล่างของโปรแกรม
แล้วเลือกเครื่องมือ Gradient Tool ตั้งสีขาวไล่ไปสีดำ แล้วลากจากบนลงล่าง
- สร้าง Layer ใหม่แล้ว สร้างสี่เหลี่ยมสีเทา #CACACA ดังรูปด้านล่าง
- คลิกที่ ที่อยู่ด้านขวาล่างของโปรแกรม แล้วเลือก Gradient Tool สีขาวไล่ไปดำ แล้วลากจากซ้ายไปขวา
เพื่อให้ฝั่งด้านขวาจางหาย
12 สุดท้ายแล้ว เรามาสร้าง Footer กัน
- ใช้ Rectangle Shape Tool สี #111111 วาดลงไปให้ความสูงประมาณ 100 px
- Add Layer Style ตามนี้
- ใส่ข้อความให้เรียบร้อย สวยงาม เป็นอันเสร็จแล้วครับ :D
ยินดีด้วยครับ เสร็จแล้ว !!
ขอบคุณทุกท่านที่อ่านและทำตามจนจบนะครับ ถ้าใครมีข้อสงสัย สามารถคอมเม้นท์ถามผมได้เลยนะครับ ผมจะมาคอยตอบให้ครับ ถ้าใครเห็นว่า Tutorial นี้มีประโยชน์แล้วละก็ อย่าลืม ReTweet หรือ Share ลง Facebook ของท่านด้วยนะครับ ขอบคุณมากครับ :D