วันพฤหัสบดีที่ 27 สิงหาคม พ.ศ. 2552

การใช้งาน Dreamweaver CS3 และ photoshop CS3

การใช้งาน Dreamweaver CS3



Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย
เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง

Editor ที่มีประสิทธิภาพตัวหนึ่งในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น

โปรแกรมจัดการเว็บไซต์ที่ดีDreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น 1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสำรองไว้ในเครื่องเราตลอดด้วย

2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด

ช่วยให้เราทำเว็บได้ง่ายขึ้น สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก

ปรับแต่ง Dreamweaver ให้ทำงานกับภาษาไทยได้ 1.ปรับแต่งระบบ dreamweaver ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Dreamweaver ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preferenceจากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูป

การเปลี่ยน fontอาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้ Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design) Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวกในการอ่าน codeจากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูป

การเปลี่ยน head ของเอกสารใหม่ เมื่อเราเลือกที่ new document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยน Default encoding เป็น Thai ตามภาพ เสร็จแล้วก็ให้ไปที่ default document อีกทีเลือก CSS และเปลี่ยน Default encoding เป็น thai อีกเช่นเดียวกันแค่นี้ Dreamweaver ก็สามารถทำงานกับภาษาไทยได้แล้ว ติดตามตัวอย่างการใช้งาน Dreamweaver ในบทต่อไป

เครื่องมือต่างๆ 1.Document window เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กำลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบเสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทำงานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บเพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย 2.Insert Bar ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้ 1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ 2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ แบบ layout 3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น 4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก 5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น 6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ 7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้ 3.Property inspector property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น 4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels 5.menu เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย 6.Status bar ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้ 7.Document Tool bar ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title ของหน้าเว็บเพจอีกด้วย หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา

ขั้นตอนการกำหนด site 1.ไปที่ Menu เลือก Site > New site จะปรากฏหน้าต่างดังรูปข้างล่างขึ้นมา 2.ที่แถบด้านบนสุดเลือก Advanced ถ้าเราเลือกที่แถบ Basic จะเป็นการกำหนดแบบอัตโนมัติซึ่งโปรแกรมจะถามเราไปที่ละขั้นตอน 3.แถบ Category ทางซ้ายมือให้เลือก Local Info 4.ช่อง Site name จะใส่ชื่ออะไรลงไปก็ได้ เป็นแค่ชื่ออ้างอิงที่ใช้ในโปรแกรมเท่านั้น เพราะผู้ใช้งาน Dreamweaver อาจทำเว็บไซต์มากกว่า 1 จึงต้องตั้งชื่ออ้างอิงเอาไว้ 5.ช่อง Local root folder ให้เราคลิกที่รูป folder สีเหลืองเพื่อเลือก folder ที่ใช้ในการเก็บไฟล์ทั้งหมดของเว็บไซต์ เราจะสร้าง folder นี้ไว้ที่ใดก็ได้ ถ้าคุณมีเว็บไซต์ที่ทำเสร็จแล้วต้องการจะแก้ไขก็ให้เลือก folder ที่เก็บไฟล์ของเว็บนั้นได้เลย 6.ช่อง Default image folder ให้เราระบุสถานที่เก็บไฟล์รูปภาพของเว็บไซต์ แนะนำว่าให้เราสร้าง folder ชื่อ image เอาไว้ใน Local root folder เพื่อเก็บไฟล์รูปทั้งหมดไว้ในนั้น 7.Links Relative to ให้เราเลือก Document เป็นการกำหนดการเขียน link ในเว็บไซต์ของเรา ส่วนการกำหนดแบบ site root จะนิยมใช้เมื่อทำงานกันหลายคนจะใช้วิธีการเขียนลิงค์โดยอ้างอิง root folder 8.Http address เป็นชื่อเว็บไซต์ของเรา เราอาจปล่อยช่องนี้ว่างไว้ก็ได้ถ้ายังไม่มีชื่อเว็บ (url) 9.Case-Sensitive Link ให้เลือกช่องนี้ด้วย เพื่อกำหนดให้การเขียน link เขียนแบบ case sensitive คือคำนึงถึงตัวพิมพ์ใหญ่ หรือพิมพ์เล็กในภาษาอังกฤษด้วย 10.Enable Cache ให้เลือกช่องนี้ เพื่อกำหนดให้ dreamweaver สร้างหน่วยความจำเอาไว้จำทำให้เราสามารถทำงานได้เร็วขึ้น 11.คลิก ok แค่นี้การกำหนด site ของเราก็เสร็จเรียบร้อย ให้เราไปเปิดดูที่ panel ทางขวามือ ในหัวข้อ file จะเห็นรายละเอียดของไฟล์ต่างๆที่เราสร้างไว้ ดังรูปด้านล่าง ในรูปตั้งชื่อเว็บว่า ex1 และกำหนด Local root folder ชื่อ ex และ save ไว้ที่ C: และสร้าง folder ชื่อ images เพื่อใช้ในการเก็บไฟล์รูป ถ้าเราต้องการแก้ไข site ก็ให้เลือกที่ site > manage site ก็จะทำการแก้ไขการกำหนดค่าของ site ได้ ถ้าเรามีหลายไซต์สามารถเลือกแก้ไขแต่ละไซต์ได้โดยคลิกที่ปุ่มที่วงกลมสีแดงไว้ จะแสดง site ทั้งหมดที่เรามีอยู่

การใช้งานเครื่องมือ Page Properties สามารถทำได้ดังนี้ 1.เปิดเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ 1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง 2.ไปที่ Menu เลือก Modify > Page Properties 3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป

รายละเอียดต่างๆของเครื่องมือมีดังนี้ 1.Page font ใช้ปรับแต่งชนิดของ font ที่แสดงผล ด้านหลังจะมีสัญลักษณ์ B (ทำให้แสดงผลในหน้านี้เป็นตัวหนาทั้งหมด) และ I (ทำให้แสดงผลในหน้านี้เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้ 2.Size ในช่องนี้คือขนาดของตัวอักษรที่จะแสดงในเว็บเพจ 3.Text color ใช้กำหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก 4.Background Color ใช้กำหนดสีพื้นหลังของเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก 5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง 6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้ 1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว 2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ 3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น 4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น 7.Margin เป็นคำสั่งที่ใช้กำหนดระยะห่างของตัวอักษร และภาพ กับเว็บเพจ มีรายละเอียดดังนี้ 1. left margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางซ้ายเป็นระยะที่เรากำหนด 2. right margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางขวาเป็นระยะที่เรากำหนด 3. top margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านบนเป็นระยะที่เรากำหนด 4. bottom margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านล่างเป็นระยะที่เรากำหนด คลิกโอเค เว็บเพจก็จะปรับหน้าตามที่เราได้ตั้งไว้







photoshop CS3

การทำกรอบภาพแบบ Halftone 1.เปิดภาพที่ต้องการทำกรอบขึ้นมา ดับเบิ้ลคลิ๊กที่คำว่า Background บน Layer ของภาพ แล้วก็กด Enter เพื่อปลดล็อค Layer
2.จากนั้นคลิ๊กที่ปุ่ม Edit in Quick Mask Mode แล้วเลือกเครื่องมือ Rectangular Marquee Tool เพื่อเลือกบริเวณที่จะทำกรอบ( Halftone จะใหญ่กว่า Selection ที่เลือกไม่มาก) 3. ต่อจากนั้นก็กด Ctrl+Delete เพื่อเทสีดำลงไป แต่เพราะผู้ใช้ทำงานใน Quick Mask Mode จึงแสดงผลออกมาเป็นสีแดง แล้วกด Ctrl+D เพื่อยกเลิก Selection 4. จากนั้น ไปที่Menubar เลือก Filter > Pixelate > Colour Halftone แล้วปรับค่าต่างๆตามภาพ (ค่า Max. Radius ถ้าปรับมากกว่านี้ จะทำให้ขนาดของวงกลมที่ขอบ ใหญ่และกว้างมากขึ้น) 5. จากนั้นคลิ๊กที่ปุ่ม Edit in Standard Mode ก็จะได้พื้นที่ Selection แล้วก็กด Delete เพื่อลบส่วนที่ไม่ต้องการออก ก็จะได้ภาพที่มีกรอบสไตล์ Halftone

การประยุคใช้ Photoshop CS3
เปลี่ยนสีดวงตาในภาพถ่ายให้เป็นสีต่างๆ โดยเปลี่ยนสีจากตาสีฟ้าของนางแบบ
1. เลือกเครื่องมือ Elliptical Maquee เพื่อเลือกพื้นที่วงกลม2. เลือกพื้นที่ของดวงตาทั้ง 2 ข้าง3. เลือกเครื่องมือ Color Replacement4. คลิกเลือกที่ Foreground color5. เลือกสีเขียว (หรือสีที่ต้องการ)6. ระบายสีในส่วนที่เลือกไว้

ส่วนประกอบต่าง ๆ ในโปรแกรมสามารถปิด – เปิดได้ โดยอาศัยเมนูในหัวข้อ Window เป็นการปิด
และเปิดแถบเครื่องมือ ( Tools)
1.เลือก เมนู Window - Tools
2. แถบเครื่องมือ ( Tools ) จะหายไปทันที
3. หากต้องการเปิดแถบเครื่องมือกลับคืนมา ให้เลือกเมนู Window – Toolsนอกจากที่แสดงในตัวอย่างแล้ว ทั้งแถบตัวเลือก ( Option ) และพาเลทต่าง ๆ ล้วนสามารถเปิด – ปิดได้โดยเมนูในหัวข้อ Window นี้ทั้งสิ้น

Menu bar เป็นส่วนที่แสดงชื่อเมนูต่างๆ ของโปรแกรมก็จะประกอบด้วย File , Edit , Image , Layer , Select , Filter , View , Window , Help
1.File หมายถึง คำสั่งเกี่ยวกับการจัดเก็บและเรียกใช้ไฟล์รูปภาพต่างๆ2.Edit หมายถึง คำสั่งเกี่ยวกับการแก้ไขลักษณะของรูปภาพและ Image ต่างๆ3. Image หมายถึง คำสั่งการจัดการรูปภาพและ Image ต่างเช่น การเปลี่ยนสีและการเปลี่ยนขนาด4. Layer หมายถึง ชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects5. Select เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น

หน้าต่างสำหรับการปรับขนาดชิ้นงาน (Image Size) จะประกอบด้วยส่วนต่าง ๆ ที่สำคัญหลายส่วน คือ
1. Pixel Dimensions เป็นส่วนที่ระบุขนาดความจุของชิ้นงานนั้น ๆ
2. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ในมุมมองของหน้าจอแสดงผลของคอมพิวเตอร์ หน่วยเป็น Pixels หรือ Percent 3. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ซึ่งในส่วนนี้จะระบุเป็นขนาดจริงของภาพเมื่อทำการ Print ภาพออกมาทางเครื่องพิมพ์
4.Resolution จำนวนจุดสีของภาพต่าหน่วยพื้นที่ เมื่อสั่งพิมพ์ชิ้นงาน 5. ส่วนควบคุมความสัมพันธ์ข้อมูล เป็นส่วนที่เลือกระบุความสัมพันธ์ ระหว่างความกว้าง/สูงของภาพ เพื่อไม่ให้อัตราส่วนของภาพ มีความผิดเพี้ยนไปจากเดิมหมกเกินไป

พื้นที่ทำงานใน Photoshop CS3
1. Menu bar เป็นเมนูที่รวบรวมคำสั่งต่าง ๆที่ใช้ในการจัดการกับภาพ หรือ ไฟล์ภาพ การปรับค่าต่าง ๆ ในการกำหนดคุณสมบัติของภาพ หรือ ไฟล์ภาพ
2. Toolbox กล่องเก็บเครื่องมือซึ่งส่วนนี้จะรวบรวมเครื่องมือที่ใช้ในการทำงานของ Photoshop ที่สำคัญ และใช้บ่อยไว้
3. Option bar เป็นส่วนที่ใช่ในการปรับแต่งค่าต่าง ๆ ของเครื่องมือใน Photoshop ซึ่งในส่วนนี้เริ่มมีใช้ในเวอร์ชั่น 6.0 จากเดิมที่ต้องปรับแต่งเครื่องมือเองในส่วน
4. พื้นที่ทำงาน เป็นส่วนหลักที่ทำงานจริงของภาพ เป็นตัวเก็บงานที่กำลังดำเนินงานอยู่ และยังเป็นพื้นที่ทำงานจริงของโปรแกรมอีกด้วย
5. Palette เป็นวินโดว์ย่อยที่เป็นส่วนเก็บรายละเอียดและปรับแต่งชิ้นงาน ซึ่ง จะถูกแบ่งเป็นส่วน ๆ ตามงานเละคุณสม บัติของงานต่าง ๆ เพื่อสะดวกในการปรับชิ้นงาน

เครื่องมือที่สำคัญในการตกแต่งภาพ
1. Marquee ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบขอบเขตมาตรฐาน2. Lasso ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบกำหนดขอบเขตเอง3. Move เครื่องมือสำหรับการเครื่อนย้ายงานหรือส่วนของงานที่เลือกไว้4. Magic Wand ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบสุ่มค่าสี5. Crop ตัดภาพเฉพาะในส่วนที่ต้องการ6. Clone Stampใช้สำหรับ Copy สีในภาพเดียวกัน7. Paing Bucket เทสีในส่วนที่ทำการเลือกไว้8. Eraser ลบเม็ดสีที่ไม่ต้องการออก9. Blur กระจายเม็ดสีออกไปรอบ ๆ10. Horizontl Type แทรกตัวอักษร ข้อความลงในชิ้นงาน11. Rectangle รูปทรงอัตโนมัติ12. Note แทรกข้อความ/เสียงในชิ้นงาน13. Eyedropper บันทึกค่าสีที่ต้องการ14. Hand ใช้เลื่อนดูมุมมองของชิ้นงาน15. Zoomขยายงานเพื่อแก้ไข16. สีพื้น/ใช้งานสีที่ใช้เป็นพื้นหลังหรือทึ่ต้องการจะใช้กับชิ้นงานนั้น


ขั้นตอนการบันทึกชิ้นงาน ใน Photoshop CS3 ไปที่ Menu Bar เลือก File จะปรากฏคำสั่งสำหรับการบันทึกชิ้นงาน 3 รูปแบบ คือ
1.Save การบันทึ่รูปแบบงานแบบมาตราฐานที่สุด ใช้สำหรับงานที่มีการบันทึกไว้แล้วในขั้นแรก และทำการบันทึกการใช้งาานซ้ำหลังจากการแก้ไขหรือปรับแต่งชิ้นงานเพิ่มเติม
2.Save As…การบันทึกชิ้นงานใหม่ หรือต้องการบันทึกรูปแบบการตกแต่ง แก้ไข ไว้อีกชุดหนึ่ง หรือเพื่อสำรองชิ้นงานไว้เพื่อใช้งานอื่น หรือต้องการบันทึกเพื่อเปลี่นยรูปแบบชิ้นงาน ให้เป็นรูปแบบอื่น ๆ
3.Save for Web…เป็นการบันทึกชิ้นงานเพื่อให้ออกมาในรูปแบบของ Webpage

วันพุธที่ 19 สิงหาคม พ.ศ. 2552

การใช้เครื่องมือ photoshop


กล่องเครื่องมือหรือ Tool Box จะมีอุปกรณ์ที่ใช้งานในโปรแกรมดังนี้
อุปกรณ์มาคี (Marquee Tools )เป็นอุปกรณ์ที่ใช้ในการเลือกพื้นที่ ของภาพตามต้องการ โดยมีให้เลือกโดยการคลิ๊กเม้า ค้างตรงรูปสามเหลี่ยมเล็กๆด้านข้าง โดยจะมีแบบให้ เลือก ทั้ง สี่เหลี่ยม วงรี เส้นนอน เส้นตั้ง
อุปกรณ์เคลื่อนย้าย (Move Tool ) เป็นอุปกรณ์ ที่ใช้ในการเคลื่อนย้ายภาพ หรือบนชั้น Layer ที่เรากำลังทำงานอยู่ไปในตำแหน่งต่างๆ
อุปกรณ์แลซโซ ( Lasso Tools) เป็นอุปกรณ์ที่ใช้ในการเลือกพื้น ที่การทำงานแบบอิสระโดยเริ่มจากพื้นที่จากจุดเริ่มจน วนมาพบกันอีกครั้ง โดยตัดในลักษณะใดก็ได้รูปแบบ ใดก็ได้ แล้วต้องกลับมาบรรจบที่จุดเริ่มต้นกันอีกครั้ง ซึ่งจะเกิดเส้น Selection ขึ้นมา.
อุปกรณ์เมจิควอนด์ ( Magic Wand Tool ) เป็นอุปกรณ์ให้เลือกพื้นที่ การทำงานเช่นกันโดยจะเลือกพื้นที่ที่มีสีโทนเดียว กันหรือมีสีโทนคล้ายๆกัน..ใช้ในการสร้างเส้น.. Selcetion
เฉพาะพื้นที่
อุปกรณ์พ่นสี (AirBrush Tool) ใช้พ้นสีที่เราเลือกบนพื้นที่ที่เรา ต้องการ ซึ่งลักษณะที่ได้จะเหมือนกับการพ่นด้วย Air Brush
อุปกรณ์ Paint Brus เป็นอุปกรณ์สำหรับการ วาดภาพและระบายสีซึงลักกษณะการใช้งานจริง ๆ จะมีให้เลือกใช้หลายตัว
อุปกรณ์รับเอร์ สแตมป์ ( Rubber stemp Tool ) ลักษณะในการใช้ก็คล้าย กับตารางยางนั้นแหละครับเป็นการคัดลอกชิ้นงานออกมา ลักษณะการใช้งานก็ไปคลิ๊กที่รูปภาพโดยให้กดปุ่ม Alt ค้างไว้ด้วยพูดอีกอย่างเป็นการโคลนนิ่งภาพนั้นเอง
อุปกรณ์ยางลบ ( Eraser Tool ) ก็ทำหน้าที่คล้าย..ยางลบนั้น แหละใช้ลบส่วนต่างๆ ที่เราไม่ต้องการ
อุปกรณ์ดินสอ ( Pencil Tool ) ลักษณะการทำงานก็คล้ายดินสอ ใช้วาดภาพ เป็น อุปกรณ์เครื่องมือ แบบเดียวกับ Paint Brush
อุปกรณ์โฟกัส ( Blur Tool )เป็นอุปกรณ์ที่ใช้สำหรับปรับค่า ความคมชัดของสีภาพ ซึ่งจะประกอบด้วยBlur, Sharpen เลือกโดยการคลิ๊กเม้าส์ค้างไว้
อุปกรณ์โทนนิ่ง ( Dodge Tool ) ใช้ในการปรับค่าโทนสีของ ภาพให้สว่างหรือมืด ซึ่งจะมีเครื่องมือให้เลือกอีกคือ Dodge,Burn,Sponge
อุปกรณ์ปากกา ( Pen tool )ใช้ในการสร้างเส้นภาพสำ หรับวาดภาพซึ่งจะสร้างเส้นตรงก่อนแล้วดัดให้ โค้งตามต้องการ
อุปกรณ์ไทป์ ( Type Tool ) เป็นอุปกรณ์ที่สำคัญและใช้บ่อยด้วย ใช้สำหรับสร้างตักอักษรซึ่งสามารถนำมาจัดประกอบ ภาพได้ทันที โดยคุณสามารถเลือกสีได้ด้วยและมีให้ เลือก2แบบ ได้แก่ การสร้างตัวอักษรทึบและแบบ โปร่งเพื่อเติมสีทีหลังเหมาะสำหรับจะนำภาพ มาสร้างตัวอักษร
อุปกรณ์ไล่ระดับสี ( Linear Gradient Tool ) เป็นการระบายสีภาพโดย การไล่เฉดสีที่เราต้องการเมื่อดับเบิ้ลคลิ๊กจะมีให้ เลือกหลายลักษณะตามที่เราต้องการ
อุปกรณ์ถังสี ( Paint Bucket Tool ) ใช้ในการเท หรือละเลงสีระบายลง บนภาพหรือพื้นที่ที่ได้เลือกใว้ เหมาะกับการเทลงพื้น ที่ขนาดกว้าง
อุปกรณ์ดูดสี ( Eyedropper Tool ) เป็นเครื่องมือในการดูดสีที่มีอยู่ใน ภาพเพื่อนำสิ่งนั้นไปใช้ในบริเวณอื่นโดยจะถือเป็น Foreground Corlor
อุปกรณ์แฮนด์ ( Hand Tool ) เป็นเครื่องมือใช้เลื่อนภาพบนจอ จะสามารถใช้ได้ก็ต่อเมื่อเราได้ขยายภาพล้นหน้าจอ แล้วเท่านั้น
อุปกรณ์แว่นขยาย ( Zoom Tool ) ใช้ในกรณีที่เราต้องการ ที่จะย่อ / ขยายภาพในจอ หรือ ขยายเพื่อจะได้ทำ ได้ละเอียดมากยิ่งขึ้น



ผลงานการตกแต่งภาพ Adobe Photoshop


ใช้เคื่องมือ
-clear
-Magic Wand
-Move
-Free Transform
-Deselect
-Custom Shape Tool
-EditypeLayer

วันพุธที่ 12 สิงหาคม พ.ศ. 2552

แนะนำตัว


นายสันติชัย วงศ์กูล ชื่อเล่น นิล
รหัสนักศึกษา 425151901023-4

คณะวิทยาศาสตร์และเทคโนโลยี

สาขา เทคโนคอมพิวเตอร์

ศึกษาที่ ม.ท.ร.(ทุ่งใหญ่)

วันเกิด 29/07/32

สีที่ชอบ สีฟ้า

สัตว์ที่ชอบ นก,ปลา