News : คุยกับไทยกราฟ

CD Training On.1
เผย step การใช้งาน
Photoshop ตั้งแต่ง่าย
ไปหาซับซ้อน ...

CD Training On.2
ตกแต่งภาพได้ดั่งใจ
ด้วย Photoshop เผย ทุกแง่มุมการตกแต่ง
ภาพด้วย Photoshop

CD Training On.3
ใช้ photoshop สร้าง
สรรค์ ประยุกต์ ออกมา
เป็นภาพได้ดั่งใจสวย
งาม ....

CD Training On.4
หลักการตัดสีตัดแสง
สร้างอารมณ์ มิติ สะดุด
ตา สะดุดใจให้กับภาพ
ด้วยหลักการ ...

CD Training On.5
หลักการ Bgraphic มา
ประยุกต์เพื่อทำให้งาน
กราฟิกดูน่าสนใจมี
เรื่องราวในตัว ...

Special CD
ใช้ photoshop layout
หน้าเวปให้สวยงามดั่ง
ใจแล้วคำนวน table
ใน dreamweaver ...

Call Now 06-8100708

Photoshop Layout Web
หลักวิธีการ print screen หน้า browser ลงใน photoshop
เป็นการเริ่มต้นของการออกแบบเวปทุกครั้ง เพื่อให้ได้พื้นที่และมุมมองที่ใกล้เคียงกับ
การ peview เวปใน browser เลยทำให้ สะดวกและเราได้เห็นหน้าตาเวปของเรา
คราวๆ ที่สำคัญมุมมองกราฟิก เราสามารถ สรรสร้างได้เต็มที่ มีความแน่นอนสูงเลย ทีเดียว
....
 
หลักวิธีการ เลื่อกสีพื้นหลังในเวป
การเลือกสีพื้นหลังเป็นการเริ่มต้นการขึ้น layout ใน layer แรกในเวปเลยทีเดียว ก็จะ มีการเลือกในลักษะต่างทั้งนี้ขึ้นอยู่กับ ลักษะของเวปของเรา จะออกมาโทนไหนนุ่มนวล
เพราะการโหลดเวปครั้งแรกจะโหลดพื้นหลังก่อนใคร ถ้าไม่ทำให้ดูนุ่มนวล ทำให้ไม่
ค่อยน่าติดตามเท่าไหร่ ขั้นตอนนี้ก้าวแรกของการ layout หน้าเวปเลยหละ ....

 
หลักวิธีการ เลื่อกสีพื้นหลังแบบไล่เฉดสองมิติ
การเลือกสีแบบไล่เฉดนั้นทำให้เกิดอารมณ์และนุ่มนวลให้กับเวปยิง่ขึ้นเพราะมีอำนาจ
สีสองสีมาผสมผสานกัน ทำให้เวปมีมิติ ทั้งนี้ต้องขึ้นอยู่กับการเลือกสีน้ำหนักสีสองสี
ที่สัมพันธ์กันอีกด้วยถึงจะได้มิติและสวยงาม ดังใจเรา ....

 
การวางระนาบ body web
การวางระนาบ body web นั้นเป็นการขึ้นสัดส่วนเวป เช่น กำหนดความกว้างให้กับ
เวปของเรา แล้วมีการวางสีพื้นของเวปอีกด้วยแล้วยังมีการใช้น้ำมาเชื่อมแสงทำให้ดูเข้า
กันและสมดุลรวมกันเป้นอันหนึ่งอันเดียวกันไม่โดดออกมาจนเกินไป ...
 
การวางระนาบ ภายในเวป
การวางระนาบ ภายในเวปนั้น ทำให้เรากำหนดสัดส่วนเวปภายในได้ให้เป็นโครงร่าง
เวปให้เห็นในการจัดตำแหน่งต่างๆ การ วางช่องไฟ ขั้นต้นได้ โดยระนาบนั้นก็จะออก
มาในลักษณะต่างๆ เช่น โคงงอ หรือ แบบหักมุม สีเหลี่ยม ก่อนที่เราจะขึ้นกราฟิกนั้นเอง

 
การทำกราฟิก Navications Bar ให้ใสเหมือนแก้ว
ขึ้นระบบ layout graphic แรกเลยตรงที่ ระบบ navications bar กันเลย โดยใช้
เทคนิคหลักการออกแบบมุมมองกราฟิกให้เป็นลักษะใสเหมือนแก้ว ทั้งนี้ต้องหลัการ
เลือกสีและผสมแสงให้ดูดีมีมิติ แล้วยังมีการให้ช่องไฟและน้ำหนักสีมาผสมผสานอีก ...

 
การระบบ Logo และ Pattern space
โลโก้ก็สำคัญอย่างยิ่งถ้าเราวางในตำแหน่งที่ให้เนื้อที่ไม่เหมาะสมก็จะทำให้ไม่เด่น
และช่องไฟที่เกิดขึ้นถ้าห่างจนเกินไปก็จะดูโล่งต้องมีการวาง pattern ที่มีระแสง
ที่ต่างกันมาช่วยให้ไม่โล่งจนเกินไปและที่สำคัญจะต้องทำไม่แข็ง ต้องนุ่นนวลโดยการ
ใช้การไล่เฉดแบบโปร่งใสเข้ามาช่วย สร้างอารมณ์ที่นุ่มนวลลงตัวอีกด้วย ...
 
การออกแบบกราฟิกให้ดูกลมกลืนและสะดุดตาด้วยสีและแสง
กราฟิกจุดพิกัตระดับสายในเวปจุดที่เด่นที่สุดสวยงามที่สุด สื่อถึงเรื่องราวต่างๆ ที่เกิด
ขึ้นในเวปเป็นจุดที่โชว์ความเด่นของเวป แนวทางนี้ต่างประเทศใช้กันพอสมควร และ
ที่สำคัญจะออกแบกราฟิกให้สวยงามนั้นต้องมีหลากหลายหลัการมาผสมผสานกันถึง
จะได้กราฟิกที่สวยงามและสะดุดตา และได้อารมณ์ ...
 
การออกแบบกราฟิกในส่วยของ News informations
ส่วนของ news information นี้เป็นจุดหนึ่งที่ทำหน้าที่แจ้งข่าวสารความเคลื่อนไหว
ของเวป ที่สำคัญจุดหนึ่ง ถ้าเราทำไม่ดูน่าสนใจคนเขาคงจะไม่สังเกตเห็นและสนใจอ่าน
เราต้องมีการออกแบบเวปการวางพื้นหลังที่เป็นรูปที่ดูน่าสนใจ ทำให้ดึงดูดให้คนเข้า
อ่านเขาสารที่แจ้งจากเวป ...
 
การวางระบบกราฟิกในส่วนของ Data informations
ส่วนที่เป็นเนื้อหาก็สำคัญไม่น้อยถ้าเราจัดไม่ดีดูลกๆ ไม่ สะอาดตา หรือว่าใส่กราฟิกเยอะ
เกินไปจนไปขัดกับกราฟิกไตเติ้ลในเวปแล้วหละก็คงไม่ดีแน่ เพราะฉะนั้นเราต้องทำการ
จัดดูไม่อึดอัเกินไปมีช่องไฟให้ดู สบายๆ ตา แล้วถ้าจะมีกราฟิก็ทำไม่ให้เด่นกว่ากราฟิก
ไตเติ้ลมากนัก ....
 
การแยกชิ้นส่วน layout เพื่อนำไปใช้บนเวป
เมื่อเราทำการ layout web เสร็จหมดแล้วและได้เห็นโครงเวปคราวๆ แล้ว กระบวน
การสุดท้ายใน photoshop ก็คือ การแยกชิ้นส่วนกราฟิกเพื่อ save ไปใช้ในเวป
ซึ่งเราจะทำการแยกชิ้นส่วนได้นั้นต้องทำการรวม layer ใน photoshop เสียก่อน
แล้วใช้ slection ตัดสัดส่วนต่างไปไช้ในเวป ...
 
Dreamweaver Template Web
 
การ Setpage และการขึ้น ระบบ พื้นหลังในเวป
มาถึงกระบวนการใน dreamweaver แล้วกระบวนการแรกคือการ setpage และทำการคำนวน table ในระบบ พื้นหลังในเวป ทั้งนี้ก็ทำการใช้ Selctions ใน
photoshop วัดช่องไฟความกว้างและความสูงของพื้นหลังเวป ...
 
การ คำนวน Table ในส่วนของ Navications Bar
มาเริ่มต้นการทำ Layer Table ในส่วนของ Navications Bar ตรงนี้เราต้อง
อาศัยค่า Width ค่า Height ใน Photoshop มาคำนวนให้เข้ากับค่าใน table
ใน Dreamweaver อีกด้วยและใส่จำนวน Columns แล้วใส่ค่า Width แต่ละ
Columns ให้สมดุลกันกับค่า Width ของ image อีกด้วย นับว่าละเอียดทีเดียว ...
 
การ คำนวน Table ในส่วนของ Logo และ Pattern Space
วางระบบ Layer Table ในส่วนของ Logo และ Pattern Spece ก็ต้องคำนวน
โดยใช้ Slections จาก photoshop อีกนั้นหละให้สอดคล้องกับค่า Width และ Height ใน Dreamweaver เพื่อให้ออกมาเหมือนใน Photoshop ...
 
การ คำนวน Table ในส่วนของ Graphic title และ News info ...
วางระบบ Layer Table ในส่วนของ Graphic title และ News info นั้นต้องใช้
การวัดค่า Width ค่า Height ให้เข้ากับ Table ด้วยถึงจะลงตัวและเหมือนใน
photoshop ทั้งนี้ยังมีการใช้ cellspacing มาช่วงให้เกิดเส้นขอบช่องไฟอีกด้วย
 
การ คำนวน Table ในส่วนของ Data Informations
เป็นการวางระบบเวปในส่วนสุดท้ายของระบบกราฟิกและข้อมูลในเวปทำให้เราเห็น
โครงร่างเวปที่เป็นลักษณะ Tempalte Web เพื่อจะเอาไปทำระบบต่างๆ ในเวป
ได้ ทั้งนี้เราลองไปเทียบกับที่เรา layout ใน photoshop แล้วจะเห็นว่าไม่ต่างกัน
ลงตัวทุกมุมมอง เหมือนกัน เพราะเราใช้ความละเอียดในการคำนวนค่า Table ทำ
ให้ออกมา สมบูรณ์แบบ ...



"เงินตราคือสิ่งสมมุติปัญญานั้นแหละคือความจริง"

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

*** VDO CD นี้ตั้งใจถ่ายทอดออกมาเพื่อให้คนไทยได้เรียนรู้และชี้แนะแนวทางในการ ออกแบบเวปและ กราฟิคที่ถูกต้อง ขอความกรุณา อย่าลอกเรียนแบบหรือ ทำซ้ำออกมาขาย รักกันจริงต้องช่วยกันต่อต้าน รายได้จะนำมาพัฒนาเวปไซต์ต่อไป เพื่อให้มีไทยกราฟอยู่คู่คนไทยตลอดไป***


Copyright thaigraph.com 2003 contact us sale@thaigraph.com Hots Line 06-8100708
เนื้อหาในนี้เป็น ลิขสิทธิ์ ทางปัญญาของ ไทยกราฟ อณุญาติให้ใช้ทางการศึกษาได้ แต่ไม่อณุญาติในในเชิงพาณิชย์