Webmaster แถลงการ
โย่... ในที่สุดก็ทำออกมาสำเร็จจนได้สำหรับ CD Training ในภาค Special Course
ในตอนที่1. คือ Webdesign By photoshop หลังจากที่ได้ใช้เวลาเรียบเรียงพอสมควร
เกือบหนึ่งเดือนเต็ม โดยถ่ายทอดตามหลักสูตรที่ นำไปสอน สมาชิก ตามขั้นตอนที่สอนเลย
ก็เกือบ 25 ขั้น จากหน้าเวปโล่งจนออกมาเป็นเวปที่สมบูรณ์ หลักการเหล่านี้ธนาได้จากการ
สังเกต โดยจากการใช้ Photoshop ในการออกแบบกราฟิค จนมาประยุกต์ในการออกแบบ
หน้าเวปได้ดั่งใจได้ เป็นหลักการที่ตายตัวเลยก็ว่าได้ ใช้ได้จริง และใช้มาหลายงานแล้วหละ
ก้เอามาเผยหมดเปลือกเพื่อเป็นในทางสำหรับท่านผู้ที่สนใจหรือกำลังทำเวปที่อยากจะทำ
เวปให้สวยงามและเป็นระบบ โดยอาศัยพัฒนาฝีมือก่อนจะมาเป็น CD Training นี้มาเป็น
เวลา 5 ปี เต็มในการทำไทยกราฟ หวังว่าท่านที่ศึกษาความรู้จาก CD Training นี้คงได้
ประโยชน์และสามารถสร้างงานสร้างรายได้ นะขอรับ หากแม้มีข้อผิดพลาดประการใดขอ
อภัยมา ณ ที่นี้ด้วย ...
ธนา mastertana

"ขอปัญญาเกิดแด่ท่าน"

การใช้ Dreamweaver MX ในการออกแบบเวปขั้นต้น
- เป็น ก้าวแรกของการใช้โปรแกรม Dreamweaver MX ที่ถูกต้อง ในการออกแบบเวป
 
1.การ Change Workspace
ในการทำการ Change Workspace เพื่อให้การทำงานเป็นแบบ Dreamweaver4 ซึ่งจะทำให้ใช้งานสะดวกกว่าแบบ MX และง่ายกว่าด้วย ถือว่าเป็นการเริ่มต้นการ ใช้งานโปรแกรมฯ เลยทีเดียว
 
2. การ Setpage
เป็นอีกขั้นตอนหนึ่งในการใช้งาน Dreamweaver MX ในการออกแบบ ซึ่งเราจะทำการ ตั้งระบบของเวปเช่น ระบบ Title และ ระบบ Link และระบบ Document Encoding เพื่อให้เวปเราใช้ไทยได้ 100%ก่อนที่จะลงมือทำอะไรในพื้นที่การใช้งาน
 
3.การใช้ Properties
การใช้ Properties เพื่อการจัดเรียงหน้าเวปของเราไม่ว่าจะเป็น Properties ตัวอักษรและรูปภาพทางด้านการจัดตำแหน่ง เช่น ตรงกลางด้านล่างด้านบน และจัดการเรื่องขนาดสีต่างๆ ได้ ซึ่งถือว่าเป็นจุดสำคัญจุดหนึ่ง ที่เราไม่ควร มองข้ามในการใช้ Dreamweaver ในการทำเวป
 
4.หลักการใช้ Table เพื่อทำการจัดตำแหน่งสัดส่วนของ ภาพและตัวอักษร
Table เป็นส่วนสำคัญไม่น้อยในการจัดวางระบบหน้าเวปให้ได้ดังใจ ให้ได้ความห่างที่ตามที่เราต้องการและจัดเรียงหน้าในลักษณะต่างๆ ให้เหมือนหน้าหนังสือได้เลย
 
5.การซ้อน Table ทำให้เกิดกรอบข้อความ
ซึ่งการซ้อนต้องซ้อนสอง Table ขึ้นไปจะทำให้ได้ขอบที่บางสวยงาม และสามารถ ใช้หลักการไปประยุกต์ให้เกิดขอบในลักษณะต่างๆ ได้ดั่งใจ เพิ่มความน่าสนใจ ให้เวปเราไม่น้อยเลย
 
6.การใช้ Table ในการขอบเขตเวปขั้นต้น
Table เราใช้กำหนดตำแน่งและลักษณะของเวปเราได้ดั่งใจ ไม่ว่าจะแบ่งเวป ของเราเป็น สองส่วนคือส่วนเมนูและส่วนข้อมูล หรือเมนูสองข้าง ข้อมูล อยู่ ตรงกลางอีกด้วย ซึ่งจะทำให้เราออกแบบเวปอย่างเป็นระบบได้
 
การใช้ Photoshop กำหนดหน้าเวป ให้ได้ดั่งใจ
- ใช้ Photoshop เป็นตัวช่วยวางระบบหน้าของเวปให้ได้ดั่งใจเรา
 
1.การใช้ Photoshop ออกแบบ หน้าเวปขั้นต้น
โดยเราทำการ Print Screen Capture หน้า Browser มาทำการสร้างไฟล์ใหม่ใน Photoshopแล้วใช้อุปกรณ์และคำสั่งต่างๆ บรรจงก่อร่างสร้างหน้าเวปของเรา โดยการซ้อน layer ให้ดูเป็นโครงร่างสัดส่วนคร่าวๆ ของเวปออกมาก่อน
 
2.การใช้ Photoshop ในการเลือกสีในการออกแบบเวป
เราสามารถผสมสีได้ดั่งใจเราภายใน Photoshop ซึ่งจะมีการแปลงโคสส ีให้เราเป็นที่เรียบร้อย เราสามารถเอาโคสสีไปใช้ในเวปได้เลย โดย การเลือกจะมีหลักการมุมมองในการวิเคราะสีให้สัมพันธ์กับเวปของเรา
เพื่อให้ได้สีที่สื่อถึงเรื่องหรือข้อมูลเวปที่เราจะทำนั้นเอง
 
3.การใช้เส้น Selection ในการกำหนดจุดโค้งงอให้กับเวป
เส้น Selection เป็นอีกตัวหนึ่งที่มีความสำคัญในการใช้เลือกพื้นในการที่จะทำ Effects ให้ได้ดั่งใจเราและเราสามารถใช้เส้น Selection มาทำให้หน้าเวป ของ เรามีลักษณะโค้งงอได้ดั่งใจเราอีกด้วย ทำให้เวปเราดูนุ่มนวลสวยงาม ดูดีได้
 
4.การซ้อน Layer เพื่อทำให้เวปดูนูนมีมิติ
ในการซ้อนจะต้องซ้อนสองสีด้วยกัน ซึ่งจะต้องตัดกันอย่างลงตัว จะต้อง มีสองสี ที่เข้ามาช่วย เช่น สีที่แทนแสงคือสีที่สว่างนั้นเอง และสีที่แทนเงา คือสีที่ออก แนวทึบๆ เมื่อสองสีมาซ้อนกันก็จะทำให้หน้าเวปเรามีลักษณะนูนมีมิติยิ่งขึ้น
 
5.การใช้อุปกรณ์ Linear Gradient Tool ไล่เฉดทำให้หน้าเวปมีลักษณะ นูนมน
เทคนิคนี้จะทำให้หน้าเวปของเราตอนแรกที่มีลักษณะนูนออกมา แต่มันจะดูลักษณะ แข็งไปหน่อย เราก็เอา Gradient มาช่วยให้ไล่เฉดสีทำให้เวปเราดูนูนและ นุ่ม สวยงาม ดูดี
 
6.การออกแบบ GraphicTitle Web ในลักษณะผสมผสานเรื่องราว
การออกแบบกราฟิคนี้จะนิยมนำเอาภาพหลายๆ ภาพมาซ้อนกันและให้แสงที่ต่างกัน และตัดกันอย่างลงทำให้เวปเราดูเด่นและสวยงามได้ ขั้นตอนค้อนข้างยุ่งยาก เหมือน กัน จะต้องเอาหลักการทางกราฟิคมาช่วยในการออกแบบไม่น้อยเลยทีเดียว
 
7.การทำกรอบเมนูแบบ Dot Pixels
ซึ่งจะใช้หลักการ การใช้ Pattern มาประยุกต์ โดยต้องสร้างไฟล์ ขึ้นมาใหม่และ ทำให้เป็น Pattern แล้วทำการ Fill สีในเส้น Selection Effects ที่ได้จะเป็นลักษณะ เส้นประรอบรูปสี่เหลี่ยม สวยงาม
 
8.การ Save ภาพเพื่อนำไปใช้งานบนเวป ขั้นที่1.
ซึ่งเราต้องทำการรวม Layer ให้เป็นหนึ่งก่อน หลังจากนั้นใช้เส้น Selection เลือกส่วนที่เราต้องการไม่ใช่าเราจะใช้การตัดใน ImageReady คิดผิดแน่แต่ภาพ ที่ทำการ Save นั้นมีไม่กี่ภาพที่เอาไปใช้ หลายคนอาจจะงง ต้องดูวีธีการทำถึง จะรู้ว่าทำไง อิอิ ไม่บอกปล่อยให้ งง
 
9.การ Save ภาพไปใช้บนเวป ขั้นที่2.
ขั้นนี้จะต้องกำหนดกราฟิคที่มีความละเอียด และองค์ประกอบที่มีความละเอียด แยกกันออกเป็นชิ้นๆ เช่นมุมโค้งก็ต้องแยกออกเป็นสีมุมและทุกมุมต้องเท่ากันหมด ส่วนใหนแยกได้ส่วนไหน ใช้รวมกันได้ก็บันทึกเป็นไฟล์ไปใช้ในเวป งง หละสิ ต้องดูอีกหละ อธิบายไม่ถูกหละ
 
การใช้ Dreaweawer ในการคำนวนสัดส่วนของเวปโดยใช้ Table
- ขั้นสุดท้ายนำมาประกอบเป็นเวปที่สมบูรณ์แบบและสามารถเป็นระบบได้
 
1.การกำหนดสัดส่วน Toppage ของเวป
ก่อนอื่นเราก็จัดการสร้างส่วนด้านบนก่อน โดยใช้ Selection ใน Photoshop วัดขนาดความกว้างของเวป เมื่อได้ขนาดความกว้างแล้วเราก็ สามารถใช้ Table โดยกำหนดความกว้างให้เป็นแบบ pixels ตามขนาดที่เรา ได้วัดใว้ แล้วซ้อนจน ได้เป็นส่วนบนของเวป
 
2.การกำหนดสัดส่วนด้านนอก BodyPage ของเวป
เช่นกันเราก็คำนวนสัดส่วนจำนวน Columns ของ Table ให้ได้สัดส่วนตาม Photoshop หลังจากนั้นเราทำการใช้ Pixelsimg.gif มาทำให้ Table หมดตัว
ให้บางที่สุดตามที่เราต้องการ เราก็จะได้ส่วนBody page นอก

 
3.การกำหนดสัดส่วนด้านใน Bodypage ของเวป
คราวนี้มาสร้างรายละเอียดย่อยภายใน Table ใหญ่ที่เราทำเป็น Body ใว้โดยคำนวน Table ของ Graphic Title โดยอ้างอิงความกว้างที่แน่นอนการ Photoshop และสีจาก Photoshop และมาประกอบกับ Table ก็จะได้ สัดส่วนด้านใน
 
4.การซ้อน Table ให้มีกรอบ Dot pixels
ซึ่งจะใช้สอง Table ด้วยกัน ซึ่งจะใช้พื้นหลังที่เป็น Dotpixels เป็นพื้นหลังของ Table ด้านนอก หลังจากนั้นก็ทำการซ้อนอีก Table หนึ่งโดยกำหนด Cellspace เท่ากับความกว้างของ Dotpixels ก็จะได้เป็นกรอบ เส้นประโดยรอบ
 
5.การซ้อน Table เป็นขอบหักมุม
ก่อนอื่นต้องไปแยกสัดส่วนใน Photoshop ก่อนแล้วก็มาคำนวนเป็น
Table ใน Dreamweaverและก็สร้างตารางแยกเป็นส่วนต่างๆหลังจาก
นั้นก็ทำการควบคุมให้ยืดหยุ่นได้โดยใช้ตารางหนึ่งตารางควบคุม
อธิบายยิ่ง งง เหมือนกันต้องไปดู VDO เองหถึงจะเข้าใจ
 
6.การวางเนื้อหาลงในพื้นที่เวป
ให้ทำการนำเอา Textหรือข้อมูลที่เราทำการพิมพ์เอาใว้มาใส่ในโครงร่าง เวปที่เราออกแบบ ถือว่าเป็นขั้นตอน ที่สำคัญเลยหละ โดยแทรก Table จัดสัดส่วนต่างๆ ลงในกรอบที่เราเตรียมใว้ไม่ว่าจะเป็นกรอบแบบ dot และ
เป็นแบบหักมุม แล้วเรียบเรียงเนื้อหาตามที่เราต้องการ
 
7.การรวมระบบ Table เวปให้เป็นหนึ่ง
เราจะทำการกรอบล้อมรอบเป็นกรอบของเวปซึ่ง Table ที่เป็นกรอบจะควบคุม ข้อมูลไม่ว่าจะเป็นความกว้างความสูงของ Table ภายในจะทำให้เวปเรา สามารถ ยืดหยุ่นได้ และปรับได้ดั่งใจเรา
 
*** VDO CD นี้ตั้งใจถ่ายทอดออกมาเพื่อให้คนไทยได้เรียนรู้และชี้แนะแนวทางในการ ออกแบบกราฟิคที่ถูกต้อง ขอความกรุณา อย่าลอกเรียนแบบหรือ ทำซ้ำออกมาขาย รักกันจริงต้องช่วยกันต่อต้าน
หากแม้ใดทำการ copy เอาทำเชิงการค้าโดยไม่ได้รับอนุญาติก็ "ขอปัญญาอย่าได้เกิดแด่ท่าน"
รายได้จะนำมาพัฒนาเวปไซต์ต่อไป เพื่อให้มีไทยกราฟอยู่คู่คนไทยตลอดไป***


Copyright thaigraph.com 2003 contact us sale@thaigraph.com
Thaigraph Special training Course On.2 Webdesign
by Photoshop

(เรียนรู้การออกแบบเวป แบบฉบับไทยกราฟ วันเดียวจบ)