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

การใช้งานโปรแกรม Adobe Photoshop และโปรแกรม Macromedia Dreamweaver


Adobe Photoshop CS3

เริ่มต้นกับการใช้โปรแกรม
1.ในส่วนของ Mene Bar คลิ๊กที่ File แล้วเลือก New จะปรากฏหน้าจอ New เพื่อกำหนดคุณสมบัติของงานใหม่
2.หน้าจอ New จะต้องกำหนดค่าต่าง ๆ ให้กับหน้าจอทำงานใหม่ที่ผู้ใช้ต้องการสร้างขึ้นซึ่งสามารถแจกแจงได้ตามนี้
1) Name ชื่อของชิ้นงานใหม่ที่เราสร้างขึ้น
2) Image Size ขนาดของชิ้นงานใหม่ที่เราสร้างขึ้น (กำหนดอันโนมัติ)
3) Preset Sizes ความกว้าง / สูงของชิ้นงานใหม่ที่สร้างขึ้น หน่วยเป็น Pixels
4) Width /Height ส่วนกำหนดความกว้าง/สูง ของชิ้นงานใหม่ โดยผู้ใช้เป็นผู้กรอกข้อมูลในส่วนนี้
5) ส่วนที่ใช้กำหนดหน่วยของความ กว้าง/สูง ของชิ้นงานใหม่
6) Resolution กำหนดจำนวน Pixels ต่อหน่วยพื้นที่
7) Mode กำหนดรูปแบบการแสดงผลของงาน
8) Contents กำหนดรูปแบบของ Background

การสร้างเอกสารใหม่ ใน Photoshop CS3
เมื่อสร้างไฟล์ใหม่ก็จะปรากฏหน้าต่าง new ก็จะมี Name = การตั้งชื่อหัวข้อเหนือไฟล์ Image Size = ขนาดความสูงความกว้างของ พื้นที่ Mode = เป็นการกำหนด Mode สีถ้า เป็นมาตรฐานจะเป็น RGB Color Contents ก็จะเป็นลักษณะพื้นหลังก็จะมี White ( สีขาว) , Background Color ( สีที่เรากำหนด) , Transparent ( สีพื้นแบบ - โปร่งใส , ไม่แสดงสีพื้นโล่ง)

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 เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น

หน้าต่างสำหรับการปรับขนาดชิ้นงาน (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 เป็นวินโดว์ย่อยที่เป็นส่วนเก็บรายละเอียดและปรับแต่งชิ้นงาน ซึ่ง จะถูกแบ่งเป็นส่วน ๆ ตามงานเละคุณสมบัติของงานต่าง ๆ เพื่อสะดวกในการปรับชิ้นงาน

Toolbox (กล่องเครื่องมือ)
Toolbox เป็นส่วนที่เก็บเครื่องมือที่ใช้ในการตกแต่งภาพซึ่งเครื่องมือแต่ละตัวจะทำงานแตกต่างกันไป ซึ่งเครื่องมือต่าง ๆ จะทำงานในส่วน ของตนเองเท่านั้นเว้นแต่ในบางกรณีที่ต้องการทำงานแบบผสมผสานกันหลาย ๆ รูปแบบจะมีการใช้ปุ่มคำสั่งบนคีย์บอร์ดช่วย
เครื่องมือที่สำคัญในการตกแต่งภาพ
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

ฟังก์ชั่นการทำงานใหม่ ใน Photoshop CS3
1. Camera Raw
Camera Raw คือฟีเจอร์ในการตกแต่งภาพจากกล้องดิจิตอล ที่ยังคงรักษาคุณภาพของภาพไว้ 100 เปอร์เซ็นต์ ซึ่งโปรแกรม Adobe Photoshop CS3 มีฟังชั่นการทำงานที่ดีกว่า Photoshop CS2 มาก และฟังก์ชั่นที่ใช้งานได้ดีกว่าเดิมคือ Fill Light Slider (เช่นเดียวกับ Shadow Slider) และ Vibrance Slider ซึ่งเป็นตัวเพิ่มความเข้มของภาพ โดยไม่กระทบ ต่อไฟล์ต้นฉบับ
นอกจากนี้ยังมีฟังก์ชั่นใหม่ๆ อย่าง Parametric Curve ซึ่งช่วยให้การปรับแต่งนั้นทำได้ง่ายดายยิ่งขึ้น เพราะระบบ Live Preview ให้ผู้ใช้สามารถเห็นการเปลี่ยนแปลงแบบ ซีนต่อซีน ทำให้มีความสะดวกยิ่งขึ้น
2.Quick Selection Tool
เป็นเครื่องมือที่ใช้ในการปรับแต่งขอบของ Selection และตัดต่อภาพกราฟิก สิ่งที่สำคัญคือการเลือกพื้นที่บนรูปภาพ จากนั้นจึงใช้คำสั่งต่างๆ เพื่อให้เกิดผลเฉพาะบนพื้นที่ดังกล่าว การเลือกพื้นที่ใน Photoshop CS3 เรียกการสร้าง “ซีเล็คชั่น” ซึ่งจะเป็นเครื่องมือที่ใช้งานง่าย โดยมีฟีเจอร์ที่มีจุดเด่นคือ RefineEdge floating palette ที่จะให้ผู้ใช้ควบคุมการเลือกได้ดีกว่า Photoshop CS2
3. Mo Better Curves
Curves เป็นคำสั่งที่มีประสิทธิภาพสูงเพราะสามารถเลือกปรับเพิ่มหรือลดแสงเงาของภาพที่ค่าความสว่างต่างๆ ได้อย่างอิสระกว่าคำสั่ง Level และ Shadow/Highlight และเป็นเครื่องมือในการตกแต่งรูปโดยการคลิกลากที่เส้นกราฟเพื่อปรับแสงสว่างชองพิกเซลนอกจากนี้ยังมี AdobeClipping Warning และ In-Dialog เพื่อช่วยให้ผู้ใช้สามารถทำงานได้ง่ายขึ้น
4.Printing Done Right
Adobe Photoshop CS3 ได้มีการพัฒนาการสั่งพิมพ์ของโปรแกรมให้มีความสามารถมากขึ้น โดยผู้ใช้สามารถกำหนดออปชั่นและตั้งค่าการพิมพ์ได้ดังนี้
- สามารถปรับขนาดภาพที่เหมาะสมสำหรับภาพที่จะนำไปอัดหรือพิมพ์
- สามารถปรับขนาด สัดส่วน และ Resolution ของภาพให้มีความเหมาะสม
- สามารถพิมพ์ภาพสีและขาวดำได้โดยตรง
- สามารถพิมพ์ภาพแบบเป็นชุดหรือหลายๆขนาดได้ตามความต้องการ
- สามารถปรับแต่งการดูเอกสารก่อนพิมพ์ได้อย่างง่ายดาย ผ่านทางไดอะล็อค
5.Cloning และ Healing
พาเล็ตต์ Clone Source เป็นพาเลตต์ที่ทำให้ผู้ใช้สามารถเห็นกระบวนการทำงานในภาพรวมได้ดียิ่งขึ้น ซึ่งทำให้ผู้ใช้ควบคุมการทำงานได้อย่างรวดเร็ว

........................................................................................................
Macromedia Dreamweaver CS3

Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ 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 มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย

เครื่องมือต่างๆในโปรแกรม Dreamweaver
สำหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" เราสามารถใช้หน้าจอเสมือนจริงของ 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 ของหน้าเว็บเพจอีกด้วย

ไม่มีความคิดเห็น:

แสดงความคิดเห็น