Adobe Photoshop CS3
โปรแกรมตกแต่งภาพที่นิยมใช้กันมากที่สุดในขณะนี้ก็ว่าได้ ก็คือ Adobe Photoshop cs3 เป็นไฟล์ขนาดเล็กแต่ ใช้ได้ดีเกินขนาด เพราะสะดวกแก่การติดตั้งไม่ใส่รหัสใดๆ รวดเร็ว เก็บไว้ในแฮนดี้ไดรฟ์ง่ายมากอีกด้วย เสียบใส่ โน๊ตบุ๊ค ใช้งานได้ทันที
Photoshop เป็น โปรแกรมแต่งภาพยอดฮิตที่สุดในตอนนี้บนโลกดิจิตอลก็ว่าได้ ไม่ว่าช่างภาพมืออาชีพ หรือ นักออกแบบกราฟฟิก คนที่ชอบถ่ายภาพตกแต่งภาพ ตลอดจนนักเรียนนักศึกษาที่มีความสนใจเป็นพิเศษ จะใช้โปรแกรมนี้ทั้งนั้น
Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะคาดกันไว้ว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง
Editor ที่มีประสิทธิภาพตัวหนึ่งในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้กับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, 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 ให้ตรงกับความต้องการของเรา
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
ส่วนประกอบต่าง ๆ ในโปรแกรมสามารถปิด – เปิดได้ โดยอาศัยเมนูในหัวข้อ 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 หมายถึง ชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects
5. Select เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น
พื้นที่ทำงานใน 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. สีพื้น/ใช้งานสีที่ใช้เป็นพื้นหลังหรือทึ่ต้องการจะใช้กับชิ้นงานนั้น
โปรแกรมตกแต่งภาพที่นิยมใช้กันมากที่สุดในขณะนี้ก็ว่าได้ ก็คือ Adobe Photoshop cs3 เป็นไฟล์ขนาดเล็กแต่ ใช้ได้ดีเกินขนาด เพราะสะดวกแก่การติดตั้งไม่ใส่รหัสใดๆ รวดเร็ว เก็บไว้ในแฮนดี้ไดรฟ์ง่ายมากอีกด้วย เสียบใส่ โน๊ตบุ๊ค ใช้งานได้ทันที
Photoshop เป็น โปรแกรมแต่งภาพยอดฮิตที่สุดในตอนนี้บนโลกดิจิตอลก็ว่าได้ ไม่ว่าช่างภาพมืออาชีพ หรือ นักออกแบบกราฟฟิก คนที่ชอบถ่ายภาพตกแต่งภาพ ตลอดจนนักเรียนนักศึกษาที่มีความสนใจเป็นพิเศษ จะใช้โปรแกรมนี้ทั้งนั้น
Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะคาดกันไว้ว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง
Editor ที่มีประสิทธิภาพตัวหนึ่งในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้กับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, 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 ให้ตรงกับความต้องการของเรา
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
ส่วนประกอบต่าง ๆ ในโปรแกรมสามารถปิด – เปิดได้ โดยอาศัยเมนูในหัวข้อ 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 หมายถึง ชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects
5. Select เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น
พื้นที่ทำงานใน 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. สีพื้น/ใช้งานสีที่ใช้เป็นพื้นหลังหรือทึ่ต้องการจะใช้กับชิ้นงานนั้น
