AdobePhotoshop
เริ่มต้นกับการใช้โปรแกรม
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 กำหนดรูปแบบของ Blackground
การเปิด - ปิดส่วนประกอบต่าง ๆ ในPhotoshop CS3
ส่วนประกอบต่าง ๆ ในโปรแกรมสามารถปิด – เปิดได้ โดยอาศัยเมนูในหัวข้อ Window เป็นการปิด
และเปิดแถบเครื่องมือ ( Tools)
1.เลือก เมนู Window - Tools
2. แถบเครื่องมือ ( Tools ) จะหายไปทันที
3. หากต้องการเปิดแถบเครื่องมือกลับคืนมา ให้เลือกเมนู Window – Tools
นอกจากที่แสดงในตัวอย่างแล้ว ทั้งแถบตัวเลือก ( Option ) และพาเลทต่าง ๆ ล้วนสามารถเปิด – ปิดได้โดยเมนูในหัวข้อ Window นี้ทั้งสิ้น
เริ่มต้นกับการใช้โปรแกรม
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 กำหนดรูปแบบของ Blackground
- สามารถปรับขนาดภาพที่เหมาะสมสำหรับภาพที่จะนำไปอัดหรือพิมพ์
- สามารถปรับขนาด สัดส่วน และ Resolution ของภาพให้มีความเหมาะสม
- สามารถพิมพ์ภาพสีและขาวดำได้โดยตรง
- สามารถพิมพ์ภาพแบบเป็นชุดหรือหลายๆขนาดได้ตามความต้องการ
- สามารถปรับแต่งการดูเอกสารก่อนพิมพ์ได้อย่างง่ายดาย ผ่านทางไดอะล็อค
5.Cloning และ Healing
พาเล็ตต์ Clone Source เป็นพาเลตต์ที่ทำให้ผู้ใช้สามารถเห็นกระบวนการทำงานในภาพรวมได้ดียิ่งขึ้น ซึ่งทำให้ผู้ใช้ควบคุมการทำงานได้อย่างรวดเร็ว
1. Pixel Dimensions เป็นส่วนที่ระบุขนาดความจุของชิ้นงานนั้น ๆ (หมายเลข 3)
2. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ในมุมมองของหน้าจอแสดงผลของคอมพิวเตอร์ หน่วยเป็น Pixels หรือ Percent (หมายเลข 4)
3. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ซึ่งในส่วนนี้จะระบุเป็นขนาดจริงของภาพเมื่อทำการ Print ภาพออกมาทางเครื่องพิมพ์ (หมายเลข 5)
4.Resolution จำนวนจุดสีของภาพต่าหน่วยพื้นที่ เมื่อสั่งพิมพ์ชิ้นงาน (หมายเลข 6)
5. ส่วนควบคุมความสัมพันธ์ข้อมูล เป็นส่วนที่เลือกระบุความสัมพันธ์ ระหว่างความกว้าง/สูงของภาพ เพื่อไม่ให้อัตราส่วนของภาพ มีความผิดเพี้ยนไปจากเดิมหมกเกินไป (หมายเลข 7
พื้นที่ทำงานใน 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
Dreamweaver CS3
การสร้างไฟล์ CSS แบบ external ทำได้โดยการทำตามขั้นตอนข้างล่างนี้
1. ไปที่เมนู File แล้วเลือก New
2. ตรงช่องของตัวเลือก Page Type เลือก CSS
3. กดปุ่ม Create แล้ว save ไฟล์ไว้ในโฟล์เดอร์เดียวกับที่เก็บเว็ปไซด์คุณ แต่ผมแนะนำให้สร้างโฟล์เดอร์ย่อยขึ้นมาใหม่ อาจจะตั้งชื่อว่า style หรืออะไรก็ได้ที่จะทำให้คุณรู้ว่าโฟล์เดอร์นั้นเกี่ยวกับ style sheet แล้วก็ตั้งชื่อไฟล์ แล้วก็ save ไฟล์ไปในนั้น ไฟล์ตัวนั้นจะมี extension หรือนามสกุลเป็น .css
1. Copy ส่วนใดส่วนหนึ่งในหน้าเว็ปที่คุณต้องการจะทำเป็นตัว include
2. สร้างหน้า html ขึ้นใหม่ โดยไปที่เมนู File แล้วเลือก Blank Page ตรงช่อง Page Type: เลือก HTML ตรงช่อง Layout: เลือก
3. เข้าไปดูที่ code html ของหน้าใหม่ที่เพิ่งสร้างขึ้น โดยไปที่เมนู View แล้วเลือก Code หรือกดปุ่ม Code ดังรูปตัวอย่างข้างล่าง หลังจากนั้นก็เลือก code ทั้งหมดที่ dreamweaver สร้างไว้ให้ แล้วก็ delete มันออกไป
5. ถ้าคุณมีสิ่งที่เป็น link และรูปภาพ อยู่ในสิ่งที่จะเป็นตัว include คุณต้องเช็คให้แน่ใจว่าทั้ง link และรูปภาพทั้งหมดของสิ่งที่อยู่ในนั้น จะตั้งเป็นแบบ Relative to: Site Root ไม่ใช่แบบ Document คุณสามารถเช็คได้โดยเลือกสิ่งที่ใช้เป็นตัว link หรือรูปภาพ แล้วคลิกที่รูปโฟลเดอร์เพื่อเปิด dialog box ของ Select File คุณสามารถดูตัวอย่างวิธีทำได้จากรูปข้างล่าง รูปแรกเป็นแบบที่สิ่งที่ใช้ link เป็นตัวหนังสือ ส่วนรูปที่สองเป็นแบบที่สิ่งที่ใช้ link เป็นรูปภาพ ซึ่งตัวนี้คุณต้องตั้งทั้งตรงช่อง Src และ Link ใหม่ หลังจากที่ dialog box ของ Select File เปิดขึ้นมาแล้ว คุณก็เลือกตรงช่อง Relative to: เป็น Site Root
การสร้าง Library item ทำได้โดย
1. เลือก แล้ว copy ส่วนที่คุณอยากทำเป็น Library items ใน template
2. ไปที่เมนู File เลือก New แล้วก็ Blank Page แล้วก็ Library item แล้วคลิก Create
3. ไฟล์ Library ก็เปิดขึ้นมา คุณก็ paste สิ่งที่คุณ copy มา ไปในนั้น
4. คุณก็ save แล้วก็ตั้งชื่อที่เหมาะสมให้กับไฟล์
ถ้าคุณต้องการเปลี่ยนแปลง style ของ Tag ที่มีอยู่แล้วใน code Html คุณก็เลือก Tag โดยทำตามขั้นตอนข้างล่าง
1. ตรงส่วนของ Selector Type: คุณก็เลือก Tag
2. เลือก Tag ที่คุณต้องการจะเปลี่ยนแปลงรูปแบบจากเมนูที่ให้เลือกทางขวาของ Tag: เช่น h1 อย่างในรูป
3. ตรงส่วนของ Define in: คุณก็เลือก style_main.css หรือชื่ออื่นๆที่คุณตั้ง แล้วก็คลิกที่ปุ่ม OK
การสร้างไฟล์ CSS แบบ external ทำได้โดยการทำตามขั้นตอนข้างล่างนี้
1. ไปที่เมนู File แล้วเลือก New
2. ตรงช่องของตัวเลือก Page Type เลือก CSS
3. กดปุ่ม Create แล้ว save ไฟล์ไว้ในโฟล์เดอร์เดียวกับที่เก็บเว็ปไซด์คุณ แต่ผมแนะนำให้สร้างโฟล์เดอร์ย่อยขึ้นมาใหม่ อาจจะตั้งชื่อว่า style หรืออะไรก็ได้ที่จะทำให้คุณรู้ว่าโฟล์เดอร์นั้นเกี่ยวกับ style sheet แล้วก็ตั้งชื่อไฟล์ แล้วก็ save ไฟล์ไปในนั้น ไฟล์ตัวนั้นจะมี extension หรือนามสกุลเป็น .css
