จริง ๆ ก็เป็น ทิปที่ไม่ยากมาก ขอเพียงมีเวลา มีศิลป์หน่อย ๆ (ไม่จำเป็นต้องเยอะ)

ก็สร้างธีม firefox ได้ด้วยตัวเอง 

 

อย่างที่ พี่ ๆ น้อง ๆ ทราบกันดีอยู่แล้ว (มั้ง) ว่าตั้งแต่อัพเดตเป็น เวอร์ชั่น 3.6 ทาง Mozilla Firefox ก็ได้เพิ่ม

ทางเลือกใหม่เกี่ยวกับ themes ขึ้นมาโดยใช้ชื่อว่า Personas

อ้าว~ แล้ว Personas ต่างกับ themes ปกติยังไหงหละ

 

ทาง จขบ. ก็ไปสืบมา (โม้จริง ๆ ) นิยามของ Personas กับ themes ที่ทางทีมงาน Mozilla บอกมานั้นคือ

themes จะเป็นการเปลี่ยนรูปลักษณ์ทั้งหมด ทั้ง header footer และรูปลักษณ์ของ รูปแบบปุ่มเมนู แถบเครื่องมือ

แต่ Personas จะเปลี่ยนแค่ header กับ footer (รวม Text color และ Accent Color ด้วยนะ) แต่รูปแบบปุ่ม 

เมนู แถบเครื่องมือ ยังคงรูปแบบเดิมไว้ (อาจจะไม่โดนใจ ขาโจ้ บางคน)

 

เกริ่นนำมา จนคนอ่านหลับไป 10 ตื่นแล้ว เพราะ อาจจะเป็นเพราะ จขบ. ไม่ค่อยอัพบล๊อคเลยพูดมากไปหน่อย 

เรามาเริ่มวิธีสร้างกันเลยดีกว่าครับ อย่างแรกที่ต้องทำคือเราต้องเตรียมอุปกรณ์กันก่อนเลยดีกว่า

  1. โปรแกรมตกแต่งภาพ แนะนำ photoshop นะ (เพราะเดี๋ยวจะใช้งานไฟล์ PSD ลำบาก)
  2. Plugins : Personas Plus (คลิกที่รูปที่ติดตั้งเลยจ้า)
  3. Personas Header Template (ไฟล์ PSD ไว้ใช้ในการวัดดูภาพ Header ของเราว่าตรงตามที่เราต้องการมั้ย) โหลดที่นี้เลยจ้า >> คลิก <<  หาคำว่า Download the Personas Header Template แล้วกดโหลดเลย
  4. ความคิดสร้างสรรค์ (เล็กน้อย)

 

มาเริ่มกันเลยดีกว่าเดี๋ยวเพื่อน ๆ จะเบื่อเอา

1. สร้าง Header ให้มีขนาดกว้าง 3000 px * ยาว 200 px นามสกุลไฟล์ png กับ jpg เท่านั้นนะ ขนาดไฟล์ไม่ใหญ่เกิน 300 kb ครับ ถ้าอยากให้ รูปแบบที่่ออกแบบมานั้นตรงตามที่ต้องการโดนไม่ต้องแก้ไขบ่อย ๆ ก็เพียงแค่เปิดไฟล์ Personas Header Template เอามาทาบกับภาพที่ทำ

 (คลิกเพื่อดูภาพขนาดเต็ม)

 

แค่นี้ ก็จะได้ภาพ Header ได้สัดส่วนตามต้องการขึ้นมาอีกนิด (เอ๊ะทำไมใช้คำว่าอีกนิดหรอครับ เพราะว่ามันอาจจะจะเบี้ยวไปนิดก็ได้ เดี๋ยวดูหัวข้อในการใช้ Personas Plus ก็จะรู้ว่าที่เราทำมาตรงตามความต้องการเพียงใด)

 

2. สร้าง Footer อันนี้ง่ายกว่า Header เพราะอย่างที่รู้ ๆ กันคือมันไม่มีปุ่ม ไอคอนอะไรมาบังมากมายเท่า Header (ยกเว้นจะใส่ Plugins กันอย่างไม่ยั้ง) ขนาดของ Footer ก็ไม่ต่างกับ Header มากต่างแค่ความสูง

Footer ใช้ขนาด กว้าง 3000 px * สูง 100 px ไฟล์นามสกุล png , jpg และขนาดไม่เกิน 300 kb เช่นเดียวกับ Header

 

 นี่คือ Footer นะครับ  (คลิกเพื่อดูภาพขนาดเต็ม)

 

 3. หลังจาก สร้าง Header และ Footer เรียบร้อยกันแล้ว ที่นี้ก็เหลือไม่กี่ขั้นตอนก็เสร็จแล้ว ขั้นตอนต่อไปนี้เป็นการ Preview ดูว่าภาพที่เราสร้างมานั้น ได้สัดส่วนตามต้องการรึเปล่า ถ้าเพื่อน ๆ ลง Plugins Personas Plus แล้ว

ใช้ทำการคลิก ที่รูปสุนัขจิ้งจอก ที่มุมซ้ายลง แล้วเลือก Preferences

 

 

 

จะเด้งเมนู pop-up ขึ้นมาให้ติ๊กถูกที่หน้าช่อง Show Custom Persona in menu

 


 

 จากนั้นให้คลิกที่รูปสุนัขจิ้งจอกรูปเดิม แล้วเลือก Custom >> Edit ตามลำดับ

 

 

 

ก็จะเด้ง pop-up ขึ้นมาอีก กำหนดค่าตามต้องการ

 

 

เมื่อกด ใส่ภาพลงไปแล้ว Plugins ก็จะแสดงตัวอย่าง Personas ที่เราทำขึ้นมา ในช่วงนี้ให้เราปรับแต่งแล้วทดลองภาพโดยใช้ Plugins : Personas Plus จนกว่าจะได้ภาพที่เราพอใจ

 

4. เมื่อเราได้ภาพที่เราพอใจแล้ว คราวนี้ก็มาถึงขั้นตอนการอัพขึ้นเว็บ ให้เราเข้าไปที่ https://www.getpersonas.com/ แล้วทำการ Login ถ้าใครยังไม่ลงทะเบียนให้ลงทะเบียนด้วยนะครับ

เมื่อ login เรียบร้อยแล้วให้ทำการกดที่ Create Your Own

 

 


แล้วกดที่ปุ่ม Finished Your Design?

 

 

 

 แล้วติ๊กเครื่องหมายที่ช่อง I agree ... แล้วเลือก Yes, I want to make my design available to everyone under a Creative Commons license

ปล.ถ้าเลือกอีกข้อจะเป็นการ จำกัดการปรับปรุง และเผยแพร่ Personas ของเรา โดยจะให้มีการเปิดให้ดาวน์โหลด ทดลองใช้ 30 วันแล้วหลังจากนับก็จะเรียกเก็บเงิน ช่วยเหลือ Mozilla (อันนี้ไม่แน่ใจว่าเจ้าของจะโดนจำกัดเวลาทดลองใช้ด้วยรึไม่)

 หน้านี้ให้กรอกข้อมูล + ใส่ภาพที่เราต้องการทำเป็น personas

 


 

 (คลิกเพื่อดูภาพขนาดเต็ม)

 

เสร็จแล้วก็กดปุ่ม Submit แล้วก็กดปุ่มที่อยู่กลางจออีกทีก็จะเป็นการเสร็จสิ้นการอัพ personas ที่เราทำครับ

 

ทิปนี้ถ้าไม่เข้าใจอย่างไร comments ถามมาได้เลยนะครับ จะตอบให้ (ถ้าทราบนะ) ครับ

ติชม ต้องการให้ปรับปรุง อย่างไรบอกได้นะครับ มือใหม่หัด รีวิวครับ T^T

 

ปล. ท่านจะสังเกตได้ว่า Personas ที่ท่านอัพไป ทำไมมาช้าจัง หลายวันก็ยังไม่มาสักที เป็นเพราะว่าทาง mozilla ต้องทำการตรวจสอบ ทุก ๆ personas ที่แต่ละบุคคลส่งมาว่า สมควรเผยแพร่หรือไม่ อย่างไร ทำให้ มีการล่าช้าในการเผยแพร่ อาจจะรอนานหน่อยนะครับ

 

ขอบคุณทุกท่านที่แวะเข้ามาอ่านนะครับ ไม่ว่าจะ comments ก็ดี หรืออ่านผ่าน ๆ ก็ดีครับ

 

Special Thank : getpersonas , Mozilla Firefox

Comment

Comment:

Tweet

Thanks for the article. I read the above post.

#2 By Chicgraphic on 2012-03-30 20:06

แอบมาอัพ Exteen ตั้งแต่เมื่อไหร่อะ !! - -''

#1 By JeLoLy_Zz on 2010-04-06 08:19