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 มันก็จะไม่พอดีกัน เว็บจะดูเละเลยทีเดียว
รูป profile กับรูป background เป็นรูปเดียวกัน แบบนี้มีข้อดี เพราะเวลาเราไป tweet คนจะจำหรือติดตากับรูป profile ที่เราใช้ พอเค้าเข้ามาที่เว็บของเราก็จะจำได้ทันที
ทำ sidebar หลอกตาไว้ข้างๆ ดูเหมือนจะคลิกได้แต่ก็ไม่ได้ ทำ sidebar ขึ้นมาเพื่อจะแสดง detail เพิ่มเติม เช่น hi5, facebook ของเรา หรืออะไรก็ได้ที่อยากให้คนอื่นรู้ บลาๆ
ใส่ส่วนของ header เข้าไป ทำให้เมนูและโลโก้ดูเด่นขึ้น ทำให้เว็บดูมีลูกเล่น เทคนิคนี้เราชอบนะ น่าสนใจดี
ทำเป็นรูปภาพแต่ไม่ต้อง repeat รูป ใส่สีเข้าไปแทน เราว่าวิธีนี้เข้าท่า เพราะไม่ว่าจอจะความละเอียดเท่าไร มันก็จะยังเป็นเว็บที่ดูดีอยู่ ไม่รู้สึกว่ามันหลุด หรือแปลก
อันนี้เป็นรูปภาพแล้ว repeat ลูกเล่นแบบนี้ก็โอเค เทคนิคมันคือ ทำมารูปนึงแต่ให้เวลาต่อกันแล้วมันเนียนๆ
เราลองสังเกตมาหลายเว็บละ ถ้าเว็บไหนที่ทำเป็นรูปใหญ่ๆรูปเดียว ไฟล์ background มันก็จะใหญ่ กว่าจะโหลดได้ก็ช้า เราเองยังปิดไปหลายเว็บเลย ขี้เกียจรอ
ถ้าจะเร็วขึ้นมาหน่อยก็เป็นพวกที่ใช้รูปภาพเล็กๆ แล้ว repeat หรือไม่ก็เป็นสีพื้น
มาสรุปกันหน่อยดีกว่า หลังจากที่ดูตัวอย่างมาหลายแบบแล้ว เราคิดว่าการทำ twitter background ที่ดีนั้น
- ถ้าทำเป็นรูปอย่างเดียว ก็ควรจะให้ repeat กันทั้งแกน x และ y และตอนทำลองดูด้วยว่ามันต่อกันเนียนรึเปล่า
- ถ้าทำเป็นรูปและสีพื้นผสมกัน คือ ใช้รูปเดียวแล้วไม่ต้อง repeat ส่วนที่เหลือปล่อยเป็นสีพื้นไป แต่ให้ดีมันก็ควรจะกลืนเนียนไปกับส่วนของรูปที่ทำมาเน้อ
ท้ายนี้ ขอขอบคุณและอ้างอิงมาจาก http://www.smashingmagazine.com/2009/09/18/effective-twitter-backgrounds-examples-and-best-practices/
- Design
- Graphic design






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