ยินดีต้อนรับ กรุณา สมัครสมาชิก หรือเข้าสู่ระบบ

Home » webboard » เครื่องมือในการทำเวบไซต์
เข้าชม : 1176

ออกแบบเลย์เอาท์

โพสต์เมื่อ: วันพฤหัสบดี 16 ธันวาคม 2553  20:41 น.

สวัสดีครับ วันนี้ก๊อตจะสอนการออกแบบ Layout ของเว็บไซต์ในโปรแกรม Photoshop กันครับ โดยธีมหลักของครั้งนี้คือ เว็บผู้ให้บริการโฮสติ้งครับ โดยสีหลักของเว็บคือ สีเหลือง เทา-ขาว และสีดำ ครับ
 

สภาพตอนเสร็จแล้ว

Finished Hosting Layout

เริ่มลงมือทำกันเลย

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


แทน


คุณต้องสมัครสมาชิก ถึงจะโพสกระทู้ได้

ปิดรับสมัครสมาชิกแล้ว


คำยอดฮิต :- 0