[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ
คราวที่แล้วเราพูดเรื่องขั้นตอนการทำ theme กันไปแล้ว นะครับคราวนี้เรามาดูการออกแบบ กันดีกว่าครับ

ใครยังไม่ได้อ่าตอนที่ 1 แนะนำตามไปอ่านก่อนนะครับ>>> http://www.thaiseoboard.com/index.php/topic,267068.msg3678435/topicseen.html

วันนี้เราจะมาทำไอ้เจ้านี้กันครับ

Demofile :http://www.mediafire.com/download.php?lp687ru4kt4zxvy

Thanks:   ฝากรูป

:wanwan020:มาต่อกันเลย

ขั้นตอนการออกแบบ สำหรับผมนั้นจะแบ่งออกเป็น 3 ขั้นตอนไหญ่ๆดังนี้ครับ
1. ขั้นวางแผน
ขั้นวางแผนนั้นผมถึอเป็นขั้นตอนที่สำคัญที่สุดของการออกแบบที่มเลยที่เดี่ยวเพราะ ว่าเราออกแบบทีมเพื่อขายคนอื่นดังนั้นทีมที่เราออกแบบจะต้องสามารถนำไปประยุคใช้ได้หลายแบบ สีจะไม่คงตัว font จะสามารถเปรี่ยนได้หรืออี่นๆ ที่เราจะทำขั้นวางแผนที่ดีนั้นควรเริ่มต้นเป็นขั้นตอน สำหรับผมจะมีขั้นตอนดังนี้ครับ

1.1   กำหนดเป้าหมาย
กำหนดเป้าหมายครับว่าเราจะทำ theme เพื่ออะไร ย้ำนะครับว่าเพื่ออะไร เช่น ทีมเพื่อเว็บข่าว ทีมเพื่อบริษัท ทีมเพื่อแสดงผลงาน ฯลฯ
ตัวอยางของผมนะครับ ผมจะทำ theme เพื่อเว็บที่รับทำ SEO

1.2   กำหนดองค์ประกอบหลัก
การกำหนดองค์ประกอบหลักคือการกำหนดสี โครงสร้างคร่าวๆ เช่น จะมี 4 สี มี slider มีคอลัมกี่ คอลัม ฯลฯ
แล้วนำองค์ประกอบมาออกแบบ เป็นโครงหลักครับ เอาโครง วาดองค์ประกอบลงกระดาษครับผม

ตัวอย่างเน่าๆ ครับผม

Thanks:   ฝากรูป
ใครฝีมือดีก็ออกมาดีครับ ของผมห่วยครับเลยได้แค่นี้
สังเกตุดูครับ ผมจะแบ่งออกเป็น 4 ส่วนใหญ่ๆ คือ

header
slider
content
footer
ที่ผมแบ่งเป็นแบบนี้เพราเราจะทำให้ Wordpress ครับ จะใด้ง่ายต่อการตัด HTML และอื่นๆ
ส่วนใครอยากได้เพิ่ม ก็แล้วแต่เลยนะครับ

ปล. เพื่อนๆที่ออกแบบไม่เก่งหรือนึกไม่ออกว่าจะทำ lay ยังไงดีผมแนะนำแนวทางการโกงนิดๆครับ

ไปที่ themeforest แล้วเลือกที่ขายดีๆเอามาลองดูเป็นตัวอย่างหรือเป็นไกน์ไล ครับ  
หรือชอบเว็บแนวไหนก็ลองเอามาออกเลกันดูครับ อ้อ อย่าไปก๊อปเค้ามาทั้งดุ้นนะครับ เอาแค่โครงสร้างพอ สีภาพ เราควรที่จะทำเองนะครับ

ตอนที่ 2.2 อยู่ข้างล่างครับ

ตอนที่ 2.3
http://www.thaiseoboard.com/index.php/topic,267091.msg3686508.html#msg3686508

ขั้นตอนที่ 2 เป็นขั้นตอนการออกแบบครับ
ส่วนตัวผม ได้โหลด ตรางมาใช้ เพื่อง่ายต่อการออกแบบ ครับโดยเพื่อนๆ สามารถโหลดได้จาก url นี้ ครับ
http://www.teehanlax.com/downloads/teehanlax_baseline_grid.zipแก้ไขแล้วครับ
หน้าตาจะเป็นแบบนี้ครับ

Thanks:   ฝากรูป

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

เอาละเรามาเริ่มทำงานกันดีกว่า ครับ
จากlayout กระดาษเน่าๆ ตอนแรก นั้น มันจะกลายเป็นwebที่สวยได้อย่างไร หลายๆ คนคงคิดใช้ใหมครับ งั้นเรามาดูกันครับ

1 ผมเริ่มทำจาก header ส่วนแรกก่อนนะครับนะครับ

Thanks:   ฝากรูป
เวลาเราทำเราควรแบ่ง layer กลุ่มๆ เพื่อง่ายต่อการดีไซน์นะครับ

Thanks:   ฝากรูป
หลังจากได้ LOGO และ header ส่วนที่ 1 แล้วนั้น
ผมก็จะเริ่มทำในส่วนของ navigator นะครับตามที่ร่างใว้
อ้อ bg ไม่ควนทับกันนะครับควรที่จะพอดีไม่ซ้อนกันนะครับ

Thanks:   ฝากรูป

แก้ไข ต่อเวลา 14:20:26
หลังจากที่เราทำ ในส่วนของheader เส็จแล้วนะครับเราจะมาทำในส่วนที่ 2 ก็คือ content นะครับ
ในตอนออกแบบ ผมได้ออกแบบ content กับ slider ใว้เป็น3 ส่วนนะครับ
คือ เนื้อความส่วนบน slider แล้วก็เนื้อความส่วนที่เป็น คอลัม 3 คอลัม ครับ

ผมทำเนื้อความส่วนบนก่อน พร้อมแก้ logo นิดหน่อยให้เหมาะสม

Thanks:   ฝากรูป

หหลังจากนั้นทำในส่วนของ Slider


Thanks:   ฝากรูป


ต่ออีกนิดครับ
หลังจากนั้นก็เพิ่มในส่วนของ arrow กับ ปุ่มเข้าไป ครับ


Thanks:   ฝากรูป

เดี่ยวไว้มาต่อ วันพรุ่งนี้ครับ พอดี ขอไปทำงานด่วนก่อน

ปูเสื่อ พร้อมหมอนกับหมอนข้างรอ 

+ครับเอาอัก

อ้างถึงจาก: arusgroup ใน 21 เมษายน 2012, 13:42:19
[แชร์แบบบ้านๆ] ตอนที่ 2 ออกPSD Layout ยังไงดีนะ
คราวที่แล้วเราพูดเรื่องขั้นตอนการทำ theme กันไปแล้ว นะครับคราวนี้เรามาดูการออกแบบ กันดีกว่าครับ

ใครยังไม่ได้อ่าตอนที่ 1 แนะนำตามไปอ่านก่อนนะครับ>>> http://www.thaiseoboard.com/index.php/topic,267068.msg3678435/topicseen.html

:wanwan020:มาต่อกันเลย

ขั้นตอนการออกแบบ สำหรับผมนั้นจะแบ่งออกเป็น 3 ขั้นตอนไหญ่ๆดังนี้ครับ
1. ขั้นวางแผน
ขั้นวางแผนนั้นผมถึอเป็นขั้นตอนที่สำคัญที่สุดของการออกแบบที่มเลยที่เดี่ยวเพราะ ว่าเราออกแบบทีมเพื่อขายคนอื่นดังนั้นทีมที่เราออกแบบจะต้องสามารถนำไปประยุคใช้ได้หลายแบบ สีจะไม่คงตัว font จะสามารถเปรี่ยนได้หรืออี่นๆ ที่เราจะทำขั้นวางแผนที่ดีนั้นควรเริ่มต้นเป็นขั้นตอน สำหรับผมจะมีขั้นตอนดังนี้ครับ

1.1   กำหนดเป้าหมาย
กำหนดเป้าหมายครับว่าเราจะทำ theme เพื่ออะไร ย้ำนะครับว่าเพื่ออะไร เช่น ทีมเพื่อเว็บข่าว ทีมเพื่อบริษัท ทีมเพื่อแสดงผลงาน ฯลฯ
ตัวอยางของผมนะครับ ผมจะทำ theme เพื่อเว็บที่รับทำ SEO

1.2   กำหนดองค์ประกอบหลัก
การกำหนดองค์ประกอบหลักคือการกำหนดสี โครงสร้างคร่าวๆ เช่น จะมี 4 สี มี slider มีคอลัมกี่ คอลัม ฯลฯ
แล้วนำองค์ประกอบมาออกแบบ เป็นโครงหลักครับ เอาโครง วาดองค์ประกอบลงกระดาษครับผม

ตัวอย่างเน่าๆ ครับผม

Thanks:   ฝากรูป
ใครฝีมือดีก็ออกมาดีครับ ของผมห่วยครับเลยได้แค่นี้
สังเกตุดูครับ ผมจะแบ่งออกเป็น 4 ส่วนใหญ่ๆ คือ

header
slider
content
footer
ที่ผมแบ่งเป็นแบบนี้เพราเราจะทำให้ Wordpress ครับ จะใด้ง่ายต่อการตัด HTML และอื่นๆ
ส่วนใครอยากได้เพิ่ม ก็แล้วแต่เลยนะครับ

ปล. เพื่อนๆที่ออกแบบไม่เก่งหรือนึกไม่ออกว่าจะทำ lay ยังไงดีผมแนะนำแนวทางการโกงนิดๆครับ

ไปที่ themeforest แล้วเลือกที่ขายดีๆเอามาลองดูเป็นตัวอย่างหรือเป็นไกน์ไล ครับ  
หรือชอบเว็บแนวไหนก็ลองเอามาออกเลกันดูครับ อ้อ อย่าไปก๊อปเค้ามาทั้งดุ้นนะครับ เอาแค่โครงสร้างพอ สีภาพ เราควรที่จะทำเองนะครับ

ตามมา +1 ครับ
กระทู้ดีมีประโยชน์
ขอให้รวยๆครับ ชาวไทยทุกคน

ตามคอร์สดีๆ
+

สวยดีครับ 

ขอบคุณครับ จะรอตามอ่าน

เยี่ยม +1 ให้ครับ

จัดไปครับ

แจ่มคับ +1 ครับ

คงเหมือนการปั่นจักรยานสมัยเด็กมั้ง พอมันเป็นแล้ว มันก็เป็นเลย  ได้ธีมแรกมา ธีมต่อไป คงสบายครับ

เดือนหน้าต้องทำธีมขายให้ได้  เป้าหมายมีไว้ให้สอยยยย   

มีใครเขียนธีมอ็อฟชั่นเก่งๆ มั้ยครับ มาหุ้นกัน ผมออกแบบ อีกคนโมธีม

ผมทำ PSD ส่งไปแล้ว เขาบอกว่าให้ลองทำเป็น template หรือ wordpress จะผ่านง่ายกว่า PSD เพราะหมวด PSD มาตรฐานสูงมาก

ดีครับ เป็นไอเดียเริ่มต้นได้ดีมากเลย 

ได้ความรู้ใหม่ดีครับ ขอบคุณครับ 

ขอบคุณ สำหรับความรู้
มันจะมีประโยชน์กับผมแน่นอน เพราะกำลังหัดทำธีมอยู่

ต่อ ครับ ต้องขอโทษด้วยที่ มาต่อช้าเรามาต่อให้จบเลยดีกว่า
หลังจากคราวที่แล้วเราต่อจนถึง slider แล้ว
เราก็มาทำต่อ ส่วนของ คอลั้ม ใต้ slider กันต่อครับ

Thanks:   ฝากรูป

หลังจากทำในส่วนของ content กันเส็จแล้ว เรามาต่อในส่วนของfooter กันครับ
ผมเพิ่มในส่วนของ social barลงไปก่อนครับ

Thanks:   ฝากรูป

แล้วปิดด้วยส่วน footer ที่เป็น menu ครับ


Thanks:   ฝากรูป

แล้วก็เส็จเรียบร้อยแล้วครับ จากเลกระดาษกากๆ กลายเป็นเลสวยๆ เอาไปตัด Html กันได้เลยครับผม

แล้วตัด HTML ยังไงครับรออยู่นะครับ 

อ้างถึงจาก: LighteningZz ใน 25 เมษายน 2012, 11:02:07
แล้วตัด HTML ยังไงครับรออยู่นะครับ 

กำลังหาเวลาว่างมาเขียนต่อให้ครับ

ขอบคุณครับ ผมเองไม่ค่อยได้ตัดจากรูปเท่าไร อยากทำแบบนั้นบ้างแต่ยังไม่มีที่ปรึกษาเลยครับ