ก.พ.
28
การใช้ Photoshop สำหรับสร้าง background สำหรับเว็บไซต์
Submitted by blogmaster on จันทร์, 02/28/2011 - 16:55
ในการสร้างเว็บไซต์ สิ่งที่ขาดไม่ได้คือ Background ผู้ออกแบบเว็บไซต์ระดับมืออาชีพจะให้ความสำคัญกับ Background มาก เพราะเป็นองค์ประกอบส่วนใหญ่ของเว็บที่จะทำให้เว็บสวยหรือขี้เหร่ การออกแบบ Background ต้องคำนึงถึงองค์ประกอบอื่นๆร่วมด้วย เช่น สีฟอนต์ กราฟิกอื่นๆที่ใช้ประกอบ และ ต้องเข้ากับเนื้อหาของเว็บไซต์ด้วยเช่นกัน
ดังนั้น นักออกแบบ มักจะออกแบบส่วนของ Background ก่อน แล้วเจ้า Background นี่ทำกันยังไงเหรอ จริงๆแล้วก็ไม่มีข้อกำหนดตายตัวว่าต้องทำแบบไหน แต่แบบที่นิยมกัน ผมจะไล่ตั้งแต่แบบง่ายๆ จนถึงวิธีที่ซับซ้อนขึ้น
- แบบเบสิกสุดๆ คือใช้สีพื้นๆของ HTML โดยกำหนด Code เข้าไปในแทค <Body> เช่น <body bgcolor="#00FF00"> โดยกำหนดสีจากเลขฐาน 16 ในที่นี้คือ "#00FF00" ความหมายคือ Rad=00, Green=FF, Blue=00 ส่วนการนับเลขฐาน 16 จะไม่ข้อพูดถึงในบทความนี้
- ต่อมาก็เริ่มมีการใช้รูปภาพเป็นพื้นหลังเพื่อแสดงลวดลายที่ซับซ้อนขึ้นตัวอย่างเช่น ต้องการสร้าง background ลายแบบนี้
ถ้าเราใช้ภาพกราฟิกทั้งหมด ไฟล์นี้จะมีขนาดใหญ่เกือบ 90kB. ทำให้ใช้เวลาในการโหลดหน้าเว็บนานเกินไป ดังนั้นเทคนิคที่นักออกแบบใช้คือ การใช้กราฟิกร่วมกับ HTML ในการแสดงผล ก่อนอื่นให้เราเตรียมภาพกราฟิกขนาดเล็กก่อน ตัวอย่าง 
โดยมีวิธีการทำดังนี้
- เปิด Photoshop ขึ้นมา New file หรือกด Clt n กำหนดขนาด ในที่นี้ผมกำหนด Width 30 Height 30 Pixels Resolution 72 ตามรูป
จากนั้นกด OK แล้วสร้างลวดลาย โดยผมใช้ Eliptical Maquee Tool สร้างวงกลมซ้อนกัน เป็นรูปดอกไม้ และปรับความโปร่งใส Optical แต่ละเลเยอร์ เป็น 50% หรือจะสร้างเป็นลวดลายแบบอื่นก็ได้ แต่ต้องคำนึงถึงเวลาที่มันกลับมาต่อกันด้วย เสร็จแล้ว Save for Web เลือก Profile ตามที่ต้องการส่วนมากเป็น Gif หรือ Jpeg
เมื่อ Save ไฟล์แล้ว ใช้คำสั่ง HTML เรียกไฟล์ขึ้นมาเป็น พื้นหลังให้กับเว็บไซต์ได้ โดยใช้คำสั่ง <body background="/images/mybg.gif"> โดย "/images/mybg.gif" คือที่อยู่ของไฟล์ สิ่งสำคัญชื่อกำหนด Path และชื่อไฟล์ให้ถูกต้องด้วย เมื่อแก้ไขไฟล์ HTML เรียบร้อยแล้วสั่ง Save และลองให้แสดงผลผ่านหน้าเว็บบราวเซอร์ จะได้ผลดังรูป
จะเห็นได้ว่า บราวเซอร์จะทำการนำรูป background ของเรามาเรียงกัน จากซ้ายไปขวา และบนลงล่างเสมอ - ต่อมารูปแบบของเว็บไซต์เริ่มมีความหลากหลายมากขึ้น เราอยากได้ Background ที่มีมิติการแสดงผลมากขึ้น โดยต่อมาพัฒนาเป็นการสร้าง background แบบแนวตั้งและแนวนอน
