Posted by admin on 7th October 2009

twitter background

ช่วงนี้ twitter ในบ้านเราช่างฮิตและฮอตจริงๆ ทั้งนักการเมือง ทั้งดารา ทั้งบริษัท จนเกิดอาชีพใหม่ อาชีพนัก twitter เลยทีเดียว :S แล้วทีนี้จะทำยังไงดีให้คนเข้ามาหน้าเว็บ twitter แล้วรู้เลยว่านี่คือ เว็บ twitter ของเรา จะให้เห็นกันชัดๆก็เปลี่ยน background ซะ!

สิ่งที่ควรรู้ก่อนจะเปลี่ยน background นั้น

ส่วนที่เปลี่ยนไม่ได้

  • พื้นที่ส่วน timeline, เมนูด้านบน, footer เป็นสีขาวเสมอเปลี่ยนไม่ได้
  • logo ของ twitter นั้นเปลี่ยนไม่ได้

ส่วนที่เปลี่ยนได้

  • sidebar สามารถเปลี่ยนสีได้, สี font สี link สามารถเปลี่ยนสีได้
  • พื้นหลังสามารถเปลี่ยนสีได้ หรือจะใส่เป็นรูปก็ได้ และรูปสามารถ repeat ได้

อื่นๆ

  • รูปพื้นหลังนั้นจะเริ่มจากมุมบนซ้ายเสมอ
  • พื้นที่ timeline หรือตรงข้อความที่เรา tweet นั้น กับส่วน sidebar ด้านข้าง มันจะอยู่ตรงกลางเสมอไม่ว่าหน้าจอเราจะขนาดเท่าไร

เทคนิคการทำ background นั้นมีหลายอย่าง เอาตัวอย่างมาให้ดูกัน เช่น

@adamplitt

timeline มันเปลี่ยนสีไม่ได้ ก็เลยทำให้มันกลืนไปกับ background ซะ ข้อเสียของวิธีนี้ คือ มัน fixed หน้าจอ การทำวิธีนี้หน้าเว็บจะดูสวยที่ขนาดเดียวเท่านั้น ถ้าเกิดหน้าจอใครความละเอียดสูงๆ จอกว้างๆ timeline กับ background มันก็จะไม่พอดีกัน เว็บจะดูเละเลยทีเดียว

adamplitt-b

@Doubleolee

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

Doubleolee-b

@robingood

ทำ sidebar หลอกตาไว้ข้างๆ ดูเหมือนจะคลิกได้แต่ก็ไม่ได้ ทำ sidebar ขึ้นมาเพื่อจะแสดง detail เพิ่มเติม เช่น hi5, facebook ของเรา หรืออะไรก็ได้ที่อยากให้คนอื่นรู้ บลาๆ

robingood-b

@elitistsnob

ใส่ส่วนของ header เข้าไป ทำให้เมนูและโลโก้ดูเด่นขึ้น ทำให้เว็บดูมีลูกเล่น เทคนิคนี้เราชอบนะ น่าสนใจดี

elitistsnob-b

@SohTanaka

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

SohTanaka-b

@happytreefriend

อันนี้เป็นรูปภาพแล้ว repeat ลูกเล่นแบบนี้ก็โอเค เทคนิคมันคือ ทำมารูปนึงแต่ให้เวลาต่อกันแล้วมันเนียนๆ

gallery-happytreefriend

เราลองสังเกตมาหลายเว็บละ ถ้าเว็บไหนที่ทำเป็นรูปใหญ่ๆรูปเดียว ไฟล์ background มันก็จะใหญ่ กว่าจะโหลดได้ก็ช้า เราเองยังปิดไปหลายเว็บเลย ขี้เกียจรอ :( ถ้าจะเร็วขึ้นมาหน่อยก็เป็นพวกที่ใช้รูปภาพเล็กๆ แล้ว repeat หรือไม่ก็เป็นสีพื้น

มาสรุปกันหน่อยดีกว่า หลังจากที่ดูตัวอย่างมาหลายแบบแล้ว เราคิดว่าการทำ twitter background ที่ดีนั้น

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

ท้ายนี้ ขอขอบคุณและอ้างอิงมาจาก http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/

    1 Response

  1. donuzz says:

    เพิ่งเข้ามาอ่าน เขียนเก่งนะเนี่ย ให้ข้อมูลดีเชียว มีแนะนำด้วยว่าอะไรเปลี่ยนได้ เปลี่ยนไม่ได้ เก่งมากๆ

    ถ้าภาพการ์ตูนใช้สีดีๆ นี่ช่วยเซฟขนาดได้เยอะนะ
    อย่างของ @opendream นี่ Background ใหญ่มาก แต่ save เป็น PNG 8bit แล้วได้ขนาดไฟล์แค่ 40KB เอง

Post your comments