ดีไซน์พื้นหลังเว็บเบลอๆ แบบ full screen+css

การใช้งานพื้นหลังในเว็บไซต์นั้น สามารถทำได้หลายรูปแบบตามแต่ความต้องการ และความเหมาะสมของ แต่ละเว็บ เช่นที่เราเคยนำเสนอไปแล้วพื้นหลังแบบ Noise หรือจะเป็นแบบ Pattern เรียงต่อกันจนเต้มพื้นที่  แต่ปัจจุบันเราจะสังเกตเห็นได้ว่าหลายเว็บส่วนใหญ่นิยมใช้ พื้นหลังแบบ full screen อาจจะเป็นทั้งภาพ หรือ แบบเบลอๆ ทำให้ดูมีมิติ และไม่เรียบจนเกินไป วันนี้จึงจะขอนำเสนอ วิธีการพร้อมกับ การนำไปใช้กันครับ


ขั้นตอนที่ 1 ค้นหารูปที่โดนใจใช่เลย 
แนะนำเครื่องมือที่ใช้ค้นหารูปแบบ advanced Google Advanced Image Search.

ขั้นตอนที่2 สร้างชิ้นงานใหม่
เปิด Photoshop พร้อมกับ สร้างพื้นที่การทำงานใหม่ เลือก ขนาด 300×300 resolution 72

ขั้นตอนที่ 3 นำเข้ารูปภาพพร้อมปรับอัตราส่วน
Import รูปภาพ เข้าใน Photoshop พร้อมกับ ปรับอัตราส่วนของภาพให้ได้ส่วน โดยระหว่าง ที่ปรับอัตราส่วนภาพนั้น กด shift+alt พร้อมกัน จะเป็นการขยายอัตราส่วนภาพจากตรงกลางทำให้ภาพที่ มีอัตราส่วนที่คงที่ ไม่ว่าจะย่อหรือขยาย

ขั้นตอนที่ 4 เบลอให้ได้ดั่งใจ
ปรับภาพของคุณให้เบลอตามใจต้องการ โดยเข้าไปที่ Filter>Blur>Gaussian blur

สำหรับคนที่ขี้เกียจมานั่งทำเอง ก็นี่เลย สามารถดาวน์โหลดได้ที่ pepsized.com

ขั้นตอนที่ 5 export for web
เข้าไปที่ File > Save For Web และกำหนด format ของภาพเป็น JPEG

วิธีการใช้งาน ใน css
เพียงแค่น้ำโค้ดนี้ไปใส่ใน css ของคุณแล้วระบุ Path ให้ถูกต้อง
body{
margin: 0;
background: url('img/bg.jpg');
background-size: 100% 100%;
background-attachment: fixed;
}

เพียงเท่านี้ก็จะได้พื้นหลังเว็บแบบ fullscreen

ตัวอย่างการใช้งานจริงใจเว็บ

sanyaindy

เป็นเว็บบล็อกเล็กๆ ที่สอนกราฟิก และงานออกแบบพื้นฐาน และนำเสนอผลงานสร้างแรงบันดาลใจในการออกแบบ รวมไปถึงงาน DIY ซึ่ง Blogger เพียงแค่นักศึกษาไอที ที่มีใจรักในงานออกแบบ รักการเป็นบล็อกเกอร์และ ฝันว่าสักวัน จะเป็นเป็นเจ้าของเว็บไซต์ที่ทุกคนรู้จัก

You may also like...