•วิธีทำsKin&hEadคลุมพร้อมcOdeจ้า/ลายเซ็น/อธิบายปรับทุกอย่างอยู่ตรงกลางไม่ซ้อนกัน

[‘•ÄOÐz¥•’]

สวัสดีค่ะ เห็นมีหลายๆคนมาถามวิธีทำสกินในm
จะอธิบายเป็นตัวอักษรอย่างเดียวก็คงไม่เข้าใจแน่ๆ เลยเปิดกระทู้สอนคนที่อยากทำอยากตกแต่งเอง
เริ่มที่วิธีการทำสกิน+เฮดคลุม วิธีทำลายเซ็นและโค้ดที่ใช้กับสกินและเฮดจะอยู่ข้างล่างค่ะ
การปรับส่วนต่างๆให้อยู่ตรงกลางแบบเรียงลงมา โดยที่เราสามารถลบหัวข้อ-ส่วนที่ไม่ต้องการออกได้ หน้า3ค่ะ
รวมBGแบบในรูปตัวอย่างเยอะมากๆ http://www.thaihi5.com/board/index.php/topic,13822.0.html

  ขอแค่คำขอบคุณก็ดีใจแร้วค่ะ  

วิธีทำ skin&head โดยโปรแกรมPhotoshop

- เปิดโปรแกรมphotoshopขึ้นมา เลือกเมนูด้านบนสุด>open เลือกรูปที่ต้องการใช้ กดOK
- ทำการก๊อปปี้รูปที่เราเปิดขึ้นมาโดยกดปุ่ม ctrlและa บนคีย์บอร์ดเพื่อเลือกทั้งรูป ตามด้วยปุ่ม ctrlและcเพื่อก๊อปปี้
ตามด้วยปุ่ม ctrlและn เพื่อสร้างรูปใหม่
ตามด้วยปุ่มctrlและVเพื่อวางรูปที่เราก๊อปปี้มา เสดแระก็ทำตามขั้นตอนในรูปนะค่ะ

[‘•ÄOÐz¥•’]

๏•cOde•๏
อธิบายการใส่โค้ด : ขึ้นต้นด้วย <style type="text/css"> ตามด้วยโค้ดที่1,โค้ดที่2,โค้ดที่3,...บราๆๆ ใส่<style>ลงท้ายหลังโค้ดสุดท้าย
ไม่จำเป็นต้องใส่<style type="text/css"> <style> กับทุกโค้ด เพราะโค้ดมันจะเต็ม โค้ดหลังๆจะไม่ติด

โค้ดสำหรับBGส่วนนอก
body{background:url(urlรูป) ;
background-repeat:repeat;
background-attachment:fixed; top}

โค้ดสำหรับBGส่วนใน
#p_container{background:url(urlรูป);
background-repeat:repeat;
background-position:top center;}

โค้ดสำหรับใส่hEad
#p_nav_header{background:url(urlรูป);
background-repeat:no-repeat;width:ความกว้างpx;height:ความสูงpx;
background-position:bottom center;}

โค้ดhi5ใสทั้งเพจและลบเส้นขอบ
#user-details { border: none; }
.section .content { border: none; }
#profile-nav { background-color: transparent; }
.section h1 { background-color: transparent; border: none; }
.section h2 { background-color: transparent; border: none; }

โค้ดลบเส้นสีเทาๆข้างล่างhEad
#p_nav_header,{border:none}

โค้ดเฮดคลุมส่วนบนสุดตรงคำว่า home profile...แบบไม่ลบlinkพวกนี้ออก
#new_header,#top_header , #primenu li.on,#p_nav_primary ,#nav_select{ background:none !important; border:none; }

โค้ดเฮดคลุมส่วนบนสุดตรงคำว่า home profile...แบบลบlinkพวกนี้ออก
#new_header,#top_header , #primenu li.on,#p_nav_primary{display:none;} ,#nav_select{background:none !important; border:none; }

ลิ้งและชื่อprofileอยุ่ตรงกลาง
#profile-name, #profile-nav, .section h2 {background:none;text-align:center}

วิธีปรับขนาดส่วนต่างๆ ไม่ให้เลยออกมานอกBGส่วนใน
ขั้นตอนนี้ต้องใจเย็นๆนะค่ะ ค่อยๆปรับตัวเลข ตัวเลขที่เราให้มาในโค้ดเราปรับจากskinตัวอย่างในรูปค่ะ
ดูรูปประกอบนะค่ะ จะได้เข้าใจง่ายๆ ถ้ามีข้อสงสัยอะไรโพสไว้นะค่ะ เราจะเข้ามาตอบเย็นหรือดึก ค่า

#content-right{width:350px;position:relative;top:5em;right:6em !important}
อธิบายโค้ด
width:350px กำหนดขนาดความกว้างของ #content right
right:6em ถ้าเพิ่มจะขยับไปทางซ้าย ถ้าลดจะขยับไปทางขวา

#content-left {width:420px;position:relative;top:5em;right:-7em !important;}
อธิบายโค้ด
width:420px กำหนดขนาดความกว้างของ #content left
right: -7em ถ้าเพิ่มจะขยับไปทางขวา ถ้าลดจะขยับไปทางซ้าย

#user-details{width:750px;position:relative;top:em;right:-8em !important}
อธิบายโค้ด
width:750px กำหนดขนาดความกว้างของ #user-details
right: -8em ถ้าเพิ่มจะขยับไปทางขวา ถ้าลดจะขยับไปทางซ้าย

#about-right
{width:px;position:relative;top:em;right:3em !important}
อธิบายโค้ด
right: 3em ถ้าเพิ่มจะขยับไปทางซ้าย ถ้าลดจะขยับไปทางขวา

#about-center
{width:px;position:relative;top:em;left:-3em; !important}
อธิบายโค้ด
left: -3em ถ้าเพิ่มจะขยับไปทางขวา ถ้าลดจะขยับไปทางซ้าย


ขอบคุณ คุณUP Jump'hubมากนะค่ะ สำหรับกระทู้ชำแหละส่วนต่างๆ
ช่วยให้เราดัดแปลงไปๆมาๆจนได้โค้ด ปรับส่วนต่าง ^^

[♥_ProJunG_♥]

ขอบคุณมากๆเรยจร้า เป็นประโยชน์มากๆเรย เด๋วจาลองทำม่าง อิอิ   

[choconate]

  ขอบคุณมากเรยค้า

[‘•ÄOÐz¥•’]

การทำรูปหรือข้อความลิ้ง

ไปที่หัวข้อตามรูปเลยนะค่ะ

[kwang.xx.ii.zz]

  ขอบคุณนะคะที่แวะมาสอนกัน จะเก็บไปฝึกทำมั่ง

[หัวใสเรืองเเสง]

งงอ่ะจ้ะ
อยากรู้ว่าจะเเบ่งส่วนเฮด กะ บีจียังไงอ่ะจ้ะที่มันเปนเส้นๆอ่ะ
กั้นเเยกระหว่าง ส่วนที่1 กะสอง เเบ่งไงเหรอค้ะ

[. Cнσ¢қ3я]

  ขอบคุนคะ

[‘•ÄOÐz¥•’]

งงอ่ะจ้ะ
อยากรู้ว่าจะเเบ่งส่วนเฮด กะ บีจียังไงอ่ะจ้ะที่มันเปนเส้นๆอ่ะ
กั้นเเยกระหว่าง ส่วนที่1 กะสอง เเบ่งไงเหรอค้ะ

เห็นเส้นเล็กๆใช่มั้ยค่ะ เส้นนี้คือเส้นที่แบ่งรูปให้เป็น2ส่วน
ใช้เครื่องมือ slice tool ลากแบ่งส่วนเป็น2ส่วน โดยลากจากมุมซ้ายสุด มาขวาสุด ให้เป็นกล่องสี่เหลี่ยม
คลุมที่ส่วนเฮดตามขนาดที่เราต้องการ พอลากคลุมเฮดเสร็จ มันจะแบ่งให้เป็น2ส่วนโดยอัตโนมัติค่ะ
คือ ส่วนเฮด(ที่เราลากเส้นคลุม) และส่วน BGใน(ที่เราไม่ได้ลากเส้นคลุม) พอจะเข้าใจรึป่าวเอ่ย

[B o k o a Z]

กระทู้ดีมีประโยชน์ ปักหมุดเรย 

[♥ C '3RIANLY =]]] *]

ลองทำแล้วคร่า




น่ารักๆมากๆๆ




แต่ว่าคือมีปัญหานิดนึงอ่าคร้ะ


คือพอทำเสดแล้ว ข้างล่างอ่าคร้ะ




มันเกินออกมาจากBGอ่าคร่า






พวกคอมเม้นประมานนั้นอ่าคร่ะ

มีทางแก้มั้ยคร้ะแบบว่าต้องขยายขนาดเฮด บีจี รายงี้หรือป่าวว





หรือว่าเปนงั้นอยุ่แล้วอ่าคร้ะ


ตอบด้วยน้ะคร้ะ







ขอบคุนคร่า^^

[:: ConVerS ::]

ขอบคุณสำหรับความรู้ดี ๆ ที่แนะนำค่า


 

[‘•ÄOÐz¥•’]

ลองทำแล้วคร่า
น่ารักๆมากๆๆ
แต่ว่าคือมีปัญหานิดนึงอ่าคร้ะ
คือพอทำเสดแล้ว ข้างล่างอ่าคร้ะ
มันเกินออกมาจากBGอ่าคร่า
พวกคอมเม้นประมานนั้นอ่าคร่ะ
มีทางแก้มั้ยคร้ะแบบว่าต้องขยายขนาดเฮด บีจี รายงี้หรือป่าวว
หรือว่าเปนงั้นอยุ่แล้วอ่าคร้ะ
ตอบด้วยน้ะคร้ะ
ขอบคุนคร่า^^

หาโค้ดปรับขนาดได้แร้วค่ะ เด๋วจะอัพให้น๊า

[real..,]

แจ่มไปเลยค่ะ

ขอบคุณนะค่ะ

+1โลด

[Thedebemo]

ขอบคุนน้าคร้า

>.<
.
.
เปนประโยดมากมาย

 

[~~PIW~~♥]

ทำและไม่เปนแบบนี้อ่ะค่ะ

[PD ~BooMBiiM ~]

 

[‘•ÄOÐz¥•’]

ทำและไม่เปนแบบนี้อ่ะค่ะ

ไม่เป็นยังไงหรอค่ะ  กดปุ่มบนคีย์บอร์ด ตามที่เราพิมรึป่าวเอ่ย
เลือกส่วนที่ต้องการให้เป็นพื้นส่วนนอกก่อนนะค่ะ(ใช้เครื่องมือแบบในรูป) แล้วก็กดแป้นบนคีย์บอร์ด
แบบในรูปเลยค่ะ

[neekung]

ขอบคุงจ้า

[~~PIW~~♥]

เนี่ยอ่ะค่ะ

พอทำถึงตรงนี้แล้ว

พอลากเสร็จแล้ว

กดอารัยต่อหรือป่าวอ่ะ

หนูทำถึงแค่ตรงนั้นอ่ะ

เพราะมะรุ้คลิกอารัยต่อ

ถึงจาได้รูปแบบที่พี่ทำอ่ะคะ

ที่เปนกรอบเล็กๆอ่ะ

ในขั้นต่อมาอ่ะ

งง

[‘•ÄOÐz¥•’]

เนี่ยอ่ะค่ะ

พอทำถึงตรงนี้แล้ว

พอลากเสร็จแล้ว

กดอารัยต่อหรือป่าวอ่ะ

หนูทำถึงแค่ตรงนั้นอ่ะ

เพราะมะรุ้คลิกอารัยต่อ

ถึงจาได้รูปแบบที่พี่ทำอ่ะคะ

ที่เปนกรอบเล็กๆอ่ะ

ในขั้นต่อมาอ่ะ

งง

อ๋อ ใช้เครื่องมือ Rectangular tool คลิกค้างแร้วลากนะค่ะ     ^
พอลากเสดนะค่ะมันจะมีเส้นปะเป็นกรอบสี่เหลี่ยมแบบในรูปข้างบนอะค่ะ ^
                                                                                         
เสดแร้วก็ทำขั้นตอนนี้ กดctrlและc กดctrlและn พอถึงขั้นตอนนี้จะมีกล่องเมนูขึ้นมา1กล่อง

[อะบ๊ะจะโบ๊ย!!~*]

ขอบใจจ้าา 

[~~PIW~~♥]

ได้แล้วค่ะ

[หัวใสเรืองเเสง]

งงอ่ะจ้ะ
อยากรู้ว่าจะเเบ่งส่วนเฮด กะ บีจียังไงอ่ะจ้ะที่มันเปนเส้นๆอ่ะ
กั้นเเยกระหว่าง ส่วนที่1 กะสอง เเบ่งไงเหรอค้ะ

เห็นเส้นเล็กๆใช่มั้ยค่ะ เส้นนี้คือเส้นที่แบ่งรูปให้เป็น2ส่วน
ใช้เครื่องมือ slice tool ลากแบ่งส่วนเป็น2ส่วน โดยลากจากมุมซ้ายสุด มาขวาสุด ให้เป็นกล่องสี่เหลี่ยม
คลุมที่ส่วนเฮดตามขนาดที่เราต้องการ พอลากคลุมเฮดเสร็จ มันจะแบ่งให้เป็น2ส่วนโดยอัตโนมัติค่ะ
คือ ส่วนเฮด(ที่เราลากเส้นคลุม) และส่วน BGใน(ที่เราไม่ได้ลากเส้นคลุม) พอจะเข้าใจรึป่าวเอ่ย

เเล้วถ้าเราจะเเบ่งตามขนาดที่กำหนดอ่ะจ้ะ เเบบว่าต้องการเฮดสูง 500 ต้องเเบ่งยังไงจ้ะ

[‘•ÄOÐz¥•’]

เเล้วถ้าเราจะเเบ่งตามขนาดที่กำหนดอ่ะจ้ะ เเบบว่าต้องการเฮดสูง 500 ต้องเเบ่งยังไงจ้ะ

แหะๆ เราก็ไม่รุ้อะค่ะ ว่าระหว่างที่แบ่งมันดูขนาดของแต่ละส่วนได้
ลองใช้วิธีนี้ดูนะค่ะ ค่อนข้างจะยุ่งยากนิดนึงน๊า