Home Here
PAGE REQUIREMENT 1024*768 32 bit screen resolution
and Internet Explorer 7 or Mozilla firefox 2+ is Requirement
For the great experience to watch.


กำลังเร่งปรับปรุงเนื้อหาใหม่ครับ

เราจะมาเปิดคอร์สเร่งรัดกันครับพี่น้อง !

มาๆ ขยับกันมาใกล้ๆคับ แล้วทีนี้เราจะมาสอนกัน

เบื้องต้นที่สุด *_* ปล. ที่ไหนเขาก็มีกันอ่ะนะ

1. ไปที่คำสั่ง Change My Skin ใต้รูปดิสเพลของเพื่อนๆพี่ๆครับผม

2. เมื่อเข้ามาแล้วให้ไปที่ Made a Profiles Skin >> มันจะอยู่มุมบนด้านขวานะครับ

3. เมื่อมาถึงแล้วมันจะเป็นหน้านี้ .....

แต่เดี๋ยวก่อนนน ที่ไหนเขาก็สอนกันครับไอ้แบบนี้หน่ะ มาดูกันชัดๆครับว่าเขามีไอ้เหล่านี้ไว้ทำไมกัน

แต่อันดับแรกใส่ชื่อให้มันก่อนครับ .....

แล้วเราก็ลุยกันต่อไปเลย

hi5 มีกำหนดการนิดหน่อยเกี่ยวกับชื่อเสียงเรียงนามและขนาดกับตำแหน่งของมันทั้งหลายทั้งปวงครับถ้า ไม่ตรงกับข้อบังคับของมันรับรองว่ามันไม่ยอมให้เราเอาขึ้นแน่นอน-*- เพราะเราลองมาแล้ว เราจะมาดูชัดๆกันครับ

3.1 Page Global !

Page Background ขนาดต้องไม่เกิน 1600*900 px คับ แต่จริงๆแล้วลองเอาแค่ 1280*900 ก็ไม่ยอมแล้วครับ -*- เพราะมันใหญ่เกินไปมันว่า เพราะฉะนั้น วิธีที่จะโมให้ดูโปรทำอย่างไรครับ เอ้า จัดมา

3.1.1 Page Background

ต้องไม่ใหญ่ไปกว่า 1024*768 เพราะมันก็ยอมให้ทำแค่นั้นจริงๆเสียด้วยสิ -*- หรือ ไม่ใช้เลย ใช้แค่โค้ดของสีเท่านั้น ที่ส่วนของ Background Color

Code สี
http://www.ma-tang.com/EmerBoard/colors.htm
*โค้ดเหล่านี้ต้องใช้ตลอดนะคับ hi5 ยังไม่มีบริการทำโค้ดสำเร็จรูปให้

3.1.2 Postion, Attachment, Repeat

Postion

สำคัญมากๆๆ อย่าละเลยทีเดียวเพราะว่ามันจะลายตาหรือไม่อยู่ตรงนี้เท่านั้น ถ้าเราออกแบบมาสวยเช้งแต่ลองคิดสภาพดูว่ามันเอามาเรียงอัดแน่นจนเต็มหน้าจอหรือว่าวางผิดตำแหน่งรับรองว่า ลายตาแน่นอนรับรองได้ ! แล้วไอ้ตุ่มๆนี่หมายความว่าไงเหรอครับ ก้อตำแหน่งที่เราจะวางรูปนั่นไงครับ สมมุติว่าเราอย่างจะวางรูปที่เราทำไว้เก๋ๆแค่ด้านบนมุมซ้ายบนของจอเท่านั้น เราก็แค่คลิกตุ่ม position ไว้ที่มุมบนซ้ายและใช้คำสั่ง Scroll คับ ส่วนคำสั่ง Repeat ห้ามเลยทีเดียว นี่คือ Position คับ

Attachment

เอาไว้ในงาน Design หน้าครับว่า เราจะทำให้แบกกราวน์เคลื่อนไหวได้ (Scroll)หรือว่าอยู่กับที่ (Fixed) มันจะให้เราเลือกได้แค่สองอย่างครับ และที่สำคัญไม่ว่าท่านจะทำแบบใด ถ้าท่านอยากให้มันอ่านรู้เรื่อง! มีคำแนะนำอยู่ 3อย่างครับ

  • (Scroll) ถ้าใช้แบบนี้ลายได้ไม่เป็นไร แต่อย่าลายมากครับ
  • (Fixed) ถ้าใช้แบบนี้ลายขอบได้ แต่ห้ามลายตรงกลางครับมันจะดูสวยมาก! และถ้าแบบFixed แนะนำ position เป็น ตุ่มตรงกลางทั้ง 3 แบบได้เลยครับและใช้ Repeat แบบ Down จะดูดีที่สุด

Repeat

สำหรับรูปภาพที่เป็นลายต่อเนื่องกัน (ย้ำ ต่อเนื่องกัน!) ให้ใช้ down+across ได้เลยครับ จะดูสวยงามและทำให้รูปกระจายเต็มหน้าครับ (และทำให้ตาลายได้เช่นเดียวกัน) Down คือการสั่งให้รูปย้ำกันในแนวนอน Across คือการสั่งให้รูปย้ำกันในแนวตั้ง

3.1.3 Text headers + Page Colors

ฟ้อนท์แนะนำเป็น Tahoma กับ Arial นะครับเพราะมัน Support ภาษาไทย

สีๆๆๆๆๆๆๆสำคัญมากๆๆที่จะทำให้หน้าเราดูดีที่สุด และอ่านออกคือการใช้สีตรงกันข้ามกันนะครับ อย่างเช่นในรูปนี้เป็นวงจรสี ถ้าใช้พื้นสีส้ม ตัวอักษรสีเขีวก็น่าจะเป็นทางเลือกที่ดี หรืออื่นๆเป็นต้น สามารถดูจากนี้ได้เลยครับ สังเกตุได้ว่าจะมีลูกศรที่ชี้ตรงกันข้ามอยู่ ให้เราใช้สีที่อยู่ตรงกันข้ามในฝั่งวงล้อนี้นะครับ หรือใช้สีโทนเดียวกัน หรือถ้าคิดไม่ออกจริงๆ http://www.colorhunter.com/ครับ มันเรียกว่า Color palette ครับ เป็นชุดสีที่เข้ากันในการออกแบบทุกอย่าง หรือง่ายๆว่าให้เราใช้สีเข้มกับตัวอักษร สีอ่อนกับพื้นหลังนั่นเองครับ

แล้วๆๆๆๆ มาดูส่วนที่ 2 กัน

เรามีของมาแจกกกกกกคับ คลิกด้านบนนี้ได้เลย มันเป็นTemplate ที่เราทำให้ท่านด้วยควาสะดวกสบายที่สุดสำหรับการโม hi5 ที่หรูหราของท่านเอง นี่คือเคล็ดลับที่ทำให้ทุกท่านสามารถ Design hi5 ที่มีสกินที่ต่อกันได้ อย่างไม่ต้องสงสัย วิธีใช้คือการ Download Template นี้ไปใช้ในการทำ Skin ด้านหัวของท่านให้สวยงาม (เป็นต้นแบบในการทำครับผม) เมื่อท่านสำเร็จในการดีไซน์แล้วให้ท่านไปที่นี่เลยครับในโปรแกรม Photoshop

เมื่อได้ตามนี้แล้วมันจะมีหน้าต่างให้ท่านเลือกเซฟครับ ให้ทำตามนี้เลย

เลือกขนาดตามเหมาะสม แนะนำเป็น JPEG Medium นะครับ แล้วก็กด Save และขั้นตอนต่อไปสำคัญมากๆๆๆๆๆๆๆ นะครับ ก่อนที่เราจะกด Saveไปนั้น ให้เราทำการเลือกโฟลเดอร์ที่เราจะเซฟ ตั้งชื่อให้มันก่อนแล้วเราก็เลือก Save as type ให้เป็น HTML and Images(*.html) ก่อนนะครับ

แล้วเมื่อเรากดไปแล้ว เราก็จะได้ไฟล์มาตามนี้ในโฟล์เดอร์ที่เราต้องการ มีทั้งหมด 1 File กับ 1 Folde

r

เราตั้งชื่อไว้ให้แล้ว อัพโหลดตามนี้ได้เลยครับ

แล้วๆๆๆ พวกเมนูยิบย่อยอ่ะคับ?

มีเหมือนกันๆๆๆๆ

แจกๆๆๆ วิธีใช้เหมือนกับตัวใหญ่ครับ และอัพโหลดตามนี้เลย

Section header กับ Section Background สามารถทำให้ใหญ่ประมาณที่ hi5 กำหนดได้เลยนะครับ แต่ถ้าจะอิงตามที่เราแนะนำก็สามารถเช่นกัน

ส่วนคำสั่ง Postion, Repeat วิธีใช้อยู่ด้านบนครับ อ่านเอาได้เลย หุหุหุ

เมื่อๆๆๆๆ เราทำเสร็จแล้ว อย่างไรต่อไป ให้เรากด เพื่อทำการอัพโหลดรูป ได้เลยๆๆ ครับ และกดพรีวิวเพื่อดูผล (ขอให้ลองพรีวิวดูก่อนนะครับ) แล้วเมื่อพอใจแล้ว กด Save ได้เลยๆๆ

เมื่อเซฟแล้ว ให้ไปที่โหมด Skins I Made ครับ แล้วมันจะมีรูปตัวอย่างของสกินที่เราทำหราเอาไว้ แล้วทีนี้ เราจะใช้ทำอย่างไร ให้เรากด

ได้เลยคร้าบบบ



Copyright by l3lackchocolate Studio 2008 : http://black-choco-late.hi5.com