ไทยกราฟ : ขอปัญญาเกิดแด่ท่าน
สวัสดีขอรับท่านผู้เรียนรู้ทุกท่าน และแล้วไทยกราฟก็คลอดซีดีชุดใหม่ขึ้นมา ชื่อว่า Episode Cd จะเป็นซีดีเกี่ยวกับแนวทางการออกแบบ และพัฒนาเวป โดยตรงทั้งนี้ก็จะถ่ายทอดประสบการณ์จาก การพัฒนาเวปไทยกราฟ มาตลอดระยะเวลากว่า 10 ปีของเรา มาเผยเคล็ดลับและทิปต่างๆในการ
ออกแบบ และพัฒนาเวปตั้งใจจะให้ท่านได้เห็นความเป็นไปของการพัฒนาเวปจากซีดีชุดEpisode
ตั้งแต่แผ่นแรกนี้ จะเป็นการประยุกต์ไอเดียร์ แนวความความคิดในการออกแบบทำเทมเพทโดยจะสาธิตการแกะเทมเพทและประยุกต์ออกมาเป็นหน้าเวปให้สวยงามดั่งใจ .. "ขอปัญญาเกิดแด่ท่าน"
Step1 : ขั้นตอนที่1.
หลักการนำแนวความคิดจากตัวอย่างมาประยุกต์ออกแบบเวป
การใช้มุมมองแนวความคิดจากเวปตัวอย่างมาเผยหลักการ
ออกแบบหน้าเวป โดยใช้มุมมองจากไทยกราฟมาแกะการ
ออกแบบและนำมาประยุกต ์เป็นหน้า Layout Web
Play to VDO
Step2 : ขั้นตอนที่ 2.
หลักการแบ่งสัดส่วนของเวปอย่างมีระบบ
การแบ่งสัดส่วนของเวปอย่างมีระบบโดยการใช้มุมมองใน
การออกแบบส่วน ของ Layout และใช้ระนาบมากำหนด
สัดส่วน ต่างๆ ของหน้า Layout เวป โดยใช้ Photoshop
Play to VDO
Step3 : ขั้นตอนที่ 3.
หลักการแบ่งสัดส่วนของเวปอย่างมีระบบ
การแบ่งสัดส่วนของเวปอย่างมีระบบโดยการใช้มุมมองในการออกแบบส่วนของ Layout และใช้ระนาบมากำหนดต่ำแหน่ง
สัดส่วนต่างๆของ Layout เวป โดยใช้ Photoshop
Play to VDO

Step4 : ขั้นตอนที่ 4.
หลักการสร้างมิติให้กับระนาบ
การปรับระนาบจากไม่มีมิติทำให้มีมิตินูนเว้าสวยงามด้วย
ขั้นตอนวิธีการง่ายๆโดยใช้หลัการไล่เฉดสีสองสีน้ำหนักต่าง
กันมาไล่เฉดให้มีมิติแล้วใช้หลักการปรับค่าแสง
Play to VDO

Step5 : ขั้นตอนที่5.
หลักการการวางระนาบในส่วนของ Graphic title
และทำให้โค้งมนสวยงามหลักการนี้เป็นการวางตำแหน่ง
ของกราฟิกที่เราจะออกแบบ แล้วปรับลักษณะระนาบให้
เป็นแบบโค้งมนสวยงาม โดยใช้ Selection ในการปรับ
Play to VDO

Step6 : ขั้นตอนที่6.
หลักการทำ Graphic title แบบแนวตัดสีตัดแสง
การนำภาพหลายๆ ภาพมาประกอบกันให้เป็นเรื่องราว
โดยใช้ Effects ตัดสีตัดแสงมาเสริมมิติ ให้เกิดความสมดุล
เคล็ดลับคือ เราต้องเลือกภาพที่มีมิติและได้อารมณ์
Play to VDO


Step7 : ขั้นตอนที่7.
หลักการวางสัดส่วนของ Information
นำกราฟิกมาจัดสัดส่วนของ Information แล้วใช้ Effects
มาทำให้ น่าสนใจ แล้วสร้างเส้นมาจัด สัดส่วน โดยทำ เส้น
แนวตั้ง และเส้นแนว นอน และ ทำไอค่อนในสัดส่วน
Play to VDO

Step8 : ขั้นตอนที่8.
การแยกสัดส่วนหน้า Layout และบันทึก
รวม Layer ทั้งหมดแล้วนำสัดส่วนทั้งภาพ และพื้นหลัง
และ ไอค่อนเอาไปใช้กับเวปโดยการ Save for Web
ให้ไฟล์ มีขนาดเล็กลง เมื่อเอาไป ใช้แล้วทำให้เวปโหลดไว
Play to VDO

Step9 : ขั้นตอนที่9.
หลักการใช้โปรแกรม Macromedia Dreamweaver 8.0
โดยเริ่มการ Set page เริ่มภาค Dreamweaver 8.0
เพื่อเอา ใว้ใช้ออก แบบหน้าเวป โดยการนำเอา Layout
จาก Photoshop มาประกอบเป็น หน้าเวปใน Dream
โดยมีหลัการ Set ค่าต่างๆ เพื่อเริ่ม ออกแบบ หน้าเวป
Play to VDO

Step10 : ขั้นตอนที่10.
หลักการจัดการในส่วนของ Header และ Navication bar
ขึ้นส่วน Header หรือส่วนหัวของเวปประกอบด้วย ส่วน
ของ Logo และส่วนของ Navication bar โดยใช้ Table
ในการวางสัดส่วน Logo และ Navication bar
Play to VDO

Step11 : ขั้นตอนที่11.
หลักการวาง Layout ในส่วนของ graphic info..
และ graphic titleวางระบบในสัดส่วนที่ 2 คือ ส่วนของ
graphic information และ graphic title โดยใช้ table
ในการแบ่งสัด ส่วนและใส่ ภาพกราฟิก ลงไปใน table
Play to VDO

Step12 : ขั้นตอนที่12.
หลักการวางสัดส่วนของ Main menu
โดยการว่างสัดส่วนด้วย Table และทำให้เกิดเส้นขั้น
บางๆ ด้วย pixels image เพื่อกำหนดความ สูงความ
กว้างของเส้น แล้วใส่รายละเอียด menu ของเวปลง Table
Play to VDO

Step13 : ขั้นตอนที่13.
หลักการวางระบบ Table ในส่วนของ Center Information จัดวางสัดส่วนตรงกลางโดยแบ่ง Table ออกเป็นสัดส่วนต่างๆ
แล้วใช้ Pixels image มาทำให้เกิดเส้นขั้นระว่างข้อมูลให้
สวยงาม แล้วใส่ข้อมูลลงไปใน table
Play to VDO

Step14 : ขั้นตอนที่14.
หลักการวางสัดส่วนของ Right Menu
จัดสัดส่วนของหัวข้อด้านขวา โดยวาง table แล้วใช้ pixels
image มาทำให้เกิดเส้นบางๆ ภายในtable แล้วใส่ข้อมูลต่างๆ
ลงใน Table ให้สมบูรณ์
Play to VDO
Go to topGo to top
เวปไซต์ไทยกราฟ : www.thaigraph.com : ขอปัญญาเกิดแด่ท่าน.
โทร.09 - 1119575 E-Mail : info@thaigraph.com