[แชร์แบบบ้านๆ] ตอนที่ 3 วิธีทำ PSD ให้เป็น Html step by step

BesTZeroPlus · 24 มกราคม 2013, 18:24:51

ขอบคุณมากคับ

c0untry-m@n · 24 มกราคม 2013, 19:11:13

ว้าวววว

สุดยอดครับ

ขอบคุณมากๆ เลยครับ

tutorclip · 25 มกราคม 2013, 15:17:49

สุดยอดๆๆๆๆๆ คร๊าบๆๆๆๆๆๆ

paidoogun · 14 มีนาคม 2013, 12:01:09

เยี่ยมยอดกระเทียมดองครับ

Eak04

เสียดายรูปหายไปหมด

thaiauto

มี Blog ส่วนตัวไหมครับจะตามไปอ่านครับ

ถ้าสนใจจะลองทำธีม Crowdfunding ผมจะรอซื้อบอกด้วยนะครับ http://www.thaiseoboard.com/index.php/topic,321589.20.html

rujirot

เสียดายรูปหาย

jutarat

อ้างถึงจาก: arusgroup ใน 25 เมษายน 2012, 16:47:36
[แชร์แบบบ้านๆ] ตอนที่ 1 เรามาทำ wordpress theme ขายกัน
[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ
[แชร์แบบบ้านๆ] ตอนที่ 3 วิธีทำ PSD ให้เป็น Html step by step
ต่อตอนที่ 3.2 http://www.thaiseoboard.com/index.php/topic,267875.msg3688725.html#msg3688725
ต่อตอนที่ 3.3 http://www.thaiseoboard.com/index.php/topic,267875.msg3689329.html#msg3689329
ต่อตอนที่ 3.4 http://www.thaiseoboard.com/index.php/topic,267875.msg3689620.html#msg3689620
ต่อตอนที่ 3.5 http://www.thaiseoboard.com/index.php/topic,267875.msg3691166.html#msg3691166
ต่อตอนที่ 3.6 http://www.thaiseoboard.com/index.php/topic,267875.msg3691266.html#msg3691266
ต่อตอนที่ 3.7[end] http://www.thaiseoboard.com/index.php/topic,267875.msg3692962.html#msg3692962
สามารถดูตัวอย่างได้ที่
http://www.arus-group.com/4lief

หลังจากโดนเรียกร้องมาพอสมควรผมก็จัดสอนให้ตามคำขอ
กับการตัด HTML จาก psd แบบ step by step แต่ผมจะค่อยๆ เขียนนะครับอย่าดาม่าผมนะผมเวลาน้อย
เอาละคราวที่แล้วเราได้รู้เรื่องการออกแบบ PSD กันไปแล้ว ไม่รู้ว่าอ่านกันรู้เรื่องหรือป่าวหรือถ้าใครยังไม่ได้อ่านวิธีทำก็แนะนำให้ไปอ่านก่อนได้ที่ตอนที่ 2 นะครับเอาละมาเริ่มกันเลยครับไม่ยากแล้วก็ไม่ง่ายครับ
หลังจากที่เราได้ Psd แล้วตามแบบนะครับ

เราก็มาเข้าใจก่อนว่ามีส่วนไหนใน theme ของเราบ้าง โดยของผมแบ่งตามนี้ครับ

ของใครจะแบ่งอย่างไรก็แบ่ง ครับแล้วแต่ครับผม
เมื่อเราแบ่งได้แล้วเราก็จะมาเริ่มกันครับ
เปิด text editor หรือโปรแกลม ที่ใช้ทำไฟร์ html ของท่านขึ้นมา ตามถนัดเลยครับผม
สร้างไฟร์ ชื่อตามนี้ครับ

index.html
styles.css
แฟ้ม
img
อย่าลืมตั้ง ค่าเป็น utf-8 นะครับ

จะได้ตามนี้นะครับ

เอาละเปิด index.html ด้วยโปรแกลมแก้ของท่านครับ

พิมพ์code ตามนี้ลงไปครับ
โค้ด เลือก ขยาย
<html> <head> <title>ตามใจท่านนะครับ</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
แท็ก link จะทำหน้าที่ดึง styles.css มาครับ
เราก็เริ่มพิมพ์ divมาใส่ ครับ
ตามนี้ลงไปใน tag body ครับ
โค้ด เลือก ขยาย
<body>  <div id="header"> header </div>   <div id="guild"> guild </div>   <div id="slider"> slider </div>   <div id="container"> container </div>   <div id="footer"> footer </div>  </body> </html>

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

Thanks: ฝากรูป

ต่อตอนที่ 3.2 http://www.thaiseoboard.com/index.php/topic,267875.msg3688725.html#msg3688725
ต่อตอนที่ 3.3 http://www.thaiseoboard.com/index.php/topic,267875.msg3689329.html#msg3689329
ต่อตอนที่ 3.4 http://www.thaiseoboard.com/index.php/topic,267875.msg3689620.html#msg3689620

เก็บค่ะ

ninehax

ขอบคุณครับ