Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ตัวอย่าง Workshop โปรแกรม Photoshop

7,585 views

Published on

Published in: Education
  • Be the first to comment

ตัวอย่าง Workshop โปรแกรม Photoshop

  1. 1. Workshop สร้างสรรค์ผลงานด้วยโปรแกรม Adobe Photoshop CS3 จัดทําโดย นางสาวฮายาตี มูเซะ ครู คศ.1 โรงเรียนชุมชนบ้านพงสตา ชื่อ........................นามสกุล......................ชันมัธยมศึกษาปีที......... ้ ่ ภาคเรียนที่ 2 ปีการศึกษา 2556 โรงเรียนชุมชนบ้านพงสตา สํานักงานเขตพื้นที่การศึกษาประถมศึกษาปัตตานี เขต 2 สํานักงานคณะกรรมการการศึกษาขั้นพื้นฐาน กระทรวงศึกษาธิการ
  2. 2. Workshop สร้างสรรค์ผลงานด้วยโปรแกรม Adobe Photoshop CS3 เมื่อผู้เรียนได้ทําการศึกษารายละเอียดต่าง ๆ ของการใช้โปรแกรม Photoshop CS3 มา จนครบแล้ ว ผู้ เ รี ย นควรที่ ไ ด้ ฝึ ก ทบทวนการใช้ คํ าสั่ ง และเครื่ อ งมื อ ต่ า ง ๆ เหล่ า นั้ น โดยใน บทเรียนนี้จะให้ผู้เรียนได้นํารูปภาพ หรือสร้างสรรค์ผลงานต่าง ๆ โดยใช้คําสั่งและเครื่องมือ ต่าง ๆ ตามที่ได้ศึกษามาตั้งแต่ หน่วยการเรียนรู้ที่ 1 - หน่วยการเรียนรู้ที่ 8 เพื่อเป็นการฝึก ทักษะในการสร้างสรรค์ผลงานจากโปรแกรมการตกแต่งภาพ ผู้เรียนจะได้สามารถนําความรู้ เหล่านี้ไปใช้ในชีวิตประจาวันได้เกิดประโยชน์สูงสุดต่อไปได้ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  3. 3. Workshop1 การเปลี่ยนสีผม ในตัวอย่างการสร้างสรรค์ผลงานชิ้นที่ 1 จะเป็นการเปลี่ยนสีเส้นผมของนางแบบให้เป็น สีผมแบบอื่น ๆ ตามต้องการ โดยการเปลี่ยนจะเป็นการเปลี่ยนสีเฉพาะจุดหรือเฉพาะบริเวณที่ ต้องการเท่านั้น โดยมีข้นตอนของการเปลี่ยนสีผมดังต่อไปนี้ ั 1. เปิดไฟล์รูปภาพที่ต้องการแก้ไข 2. สร้าง Layer ขึ้นมาใหม่อีก 1 Layer เพื่อคัดลอกต้นฉบับไว้ไม่ให้ไฟล์ต้นฉบับนี้ เสียหาย โดย การคัดลอก Layer ต้นฉบับ โดยผู้เรียนจะทําการตกแต่งในเฉพาะ Layer ที่ คัดลอกมา 3. คลิกเมาส์เลือกเครื่องมือ Magnetic Lasso Tool เพื่อเลือกบริเวณที่ต้องการ ใน ที่นี้ให้เลือก เฉพาะบริเวณเส้นผมทั้งหมด โดยสร้าง Selection บริเวณผม สร้าง Selection บริเวณผมทั้งหมด 1 3 2 4. จากนั้นทําการปรับภาพ หรือ ทําให้บริเวณที่เลือกนุ่มนวลขึ้น โดยใช้คําสั่ง Select>>Modify >> Feather โดยใส่ค่าลงไปคือ 3 WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  4. 4. 5. จากนั้นคลิกเมาส์เลือกคําสั่ง Image เลือกคําสั่ง Adjustment เลือกคําสั่ง Color balance จะปรากฏไดอะล็อกซ์บล็อกซ์ของการปรับแต่ง ให้ผู้เรียนปรับค่าสีโดยลากแท่ง สี่เหลี่ยมของหัวข้อ Cyan , Magenta และ Yellow ไปทางซ้ายหรือขวา หรือ ใส่ค่าที่ต้องการ ในช่อง Color Levels จากนั้นดูผลการเปลี่ยนสีของผมจากรูปได้ทันที เมื่อปรับสีได้ตาม ต้องการแล้วคลิก OK. ก็จะสามารถปรับสีผมได้ตามต้องการ ส่วนที่เป็น Selection คือบริเวณเส้นผม จะเปลี่ยนสีตามต้องการ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  5. 5. Workshop2 การสร้างขอบรูปภาพในรูปแบบต่าง ๆ ในโปรแกรม Photoshop CS3 นี้ผ้เรียนสามารถที่จะสร้างสรรค์รปแบบต่าง ๆ ให้กับ ู ู รูปภาพ เพื่อให้รูปภาพมีความสวยงาม และแปลกตามากยิ่งขึ้น โดยตัวอย่างจะทําการปรับแต่ง รูปภาพโดยให้ขอบของรูปภาพมีรปแบบที่หลากหลายแตกต่างจากเดิม โดยขั้นตอนของการ ู สร้างขอบรูปภาพในรูปแบบต่าง ๆ มีดังนี้ 1. เปิดไฟล์รปภาพทีต้องการแก้ไข ู ่ 2. เลือกเครืองมือ ่ ต้องการสร้างเส้นขอบ ไว้ตามรูป เพื่อสร้าง Selection เป็นเส้นขอบ โดยเว้นบริเวณที่ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  6. 6. 3. กลับด้าน Selection ที่เลือกให้ตรงกันข้าม โดยคลิกเมาส์ทีเมนูคาสั่ง Select เลือก ่ คําสั่งย่อย Inverse 4. คลิกไอคอน จะเป็นสีแดง ดังรูป Edit in Quick Mode บน Toolbox เพื่อบังส่วนที่ไม่ต้องการตกแต่ง WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  7. 7. 5. คลิกเมนูคาสั่ง Filter เลือกคําสั่ง Distort เลือกคําสั่ง Ripple จะปรากฏ ํ ไดอะล็อกซ์บล็อกซ์สําหรับการปรับแต่ง โดยกําหนดค่า Amount เป็น 300 จากนั้นคลิกปุ่ม OK ปรับค่าต่าง ๆ ในคําสัง Ripple ่ ปรากฏเส้นขอบเป็นรอยหยักในรูปภาพ 6. ออกจากมุมมอง Edit in Quick Mode โดย คลิกที่มมมองปกติ Edit in Standard Mode ุ สาหรับการแก้ไขภาพ
  8. 8. 7. กดปุ่ม Delete เพื่อลบเส้นขอบ ด้านนอกที่ไม่ต้องการออก จะได้เส้น ขอบที่มรูปแบบตามที่ผ้เรียนต้องการ ี ู ดังรูป หากต้องการตกแต่งเพิ่มให้เติม สีต่าง ๆ หรือไล่เฉดสีลงไปในเส้นขอบ ด้านนอกก็ได้ ไล่เฉดสีโดยใช้ Gradient Tool บริเวณเส้นขอบสีขาว เพื่อให้ได้ รูปภาพที่สวยงามมากยิ่งขึน ้ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  9. 9. Workshop3 การปรับภาพให้ดูนุ่มนวล ในตัวอย่างนี้จะปรับภาพธรรมดาให้มีความนุ่มนวลมากยิ่งขึ้น โดยจะทาให้ภาพดู สวยงามและหลากหลาย โดยมีข้นตอนของการทํางานดังต่อไปนี้ ั 1. เปิดไฟล์รูปภาพที่ต้องการแก้ไข 2. ในพาเล็ต Layers ให้ทําการคัดลอกเลเยอร์ Background เพิ่มอีกหนึ่งเลเยอร์ เป็นเลเยอร์ ชื่อ Background Copy จากนั้นให้เลือก Mode ของเลเยอร์เป็น Soft Light ดังรูป 3. จากนั้นปรับค่าในเลเยอร์ Background copy โดยเลือกเมนูคําสัง Filter เลือกคําสั่ง Blur เลือกคําสั่ง ่ Gaussian Blur แล้วปรับค่า Radius เป็น 2.0 Pixels WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  10. 10. 4. คลิกที่เลเยอร์ Background copy แล้วเลือกหัวข้อ Create new adjust Layer แล้วเลือกคําสั่ง Levels เพื่อปรับค่าให้ภาพดูน่มนวลลง โดยปรับที่ค่ากราฟแล้วดูผลที่รปภาพ เมื่อได้ภาพทีน่มนวลจน ุ ู ่ ุ เป็นที่พอใจแล้วคลิกเมาส์ที่ป่ม OK ผู้เรียนก็จะได้ภาพที่ดูน่มนวลและสามารถนาไปใช้ในรูปแบบอื่น ๆ ุ ุ ได้ โดยอาจจะบันทึกเป็นไฟล์ใหม่ ภาพที่ได้หลังการปรับแต่ง WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  11. 11. Workshop4 การสร้างตัวอักษรแบบโลหะ 3 มิติ ในตัวอย่างการสร้างสรรค์ผลงานชิ้นนี้จะเป็นการสร้างตัวอักษรโดยใช้คําสั่งต่าง ๆ ที่ได้ศึกษา มาแล้วในบทเรียนก่อนหน้านี้มาใช้งานร่วมกัน โดยมีข้นตอนของการสร้างตัวอักษรดังนี้ ั 1. สร้างหน้ากระดาษขึ้นมาใหม่ โดยใช้คําสั่ง File เลือก New จากนั้นกําหนดรายละเอียดต่าง ๆ ของหน้ากระดาษ ตามตัวอย่างด้านล่าง 2. พิมพ์ข้อความโดยกําหนดขนาดเท่ากับ 200 และเป็น สีดํา WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  12. 12. 3. สร้าง Selection ให้กบข้อความโดยการกด Ctrl ค้างไว้แล้วคลิกเมาส์ที่ Layer ข้อความ จะเป็นการ ั สร้าง Selection ให้กบข้อความโดยอัตโนมัติ ดังรูป ั 4. สร้าง Layer ขึ้นมาใหม่ จากนั้นคลิกทีเครื่องมือ Gradient Tool โดยเลือกสีพ้ืน Foreground เป็นสีดํา ่ และสีพื้น Background เป็นสีขาว จากนั้นลากเมาส์ให้ผ่านตัวอักษร จากด้านบนลงล่าง เพื่อไล่โทนสีของ ตัวอักษรให้เป็นดังภาพ 5. ทาตัวอักษรให้เป็นลายนูนโดยคลิกที่เมนูคําสั่ง Filter เลือกคําสั่ง Blur เลือกคําสั่ง Gaussian Blur จากนั้นกําหนดค่า Radius เท่ากับ 2.2 Pixel WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  13. 13. 6. คลิกที่เมนูคําสั่ง Filter เลือกคําสั่ง Render เลือกคําสั่ง Lighting Effect จากนั้นกําหนดค่า ดังรูป 7. ปรับตัวอักษรให้เกิดเงาแบบโลหะโดยคลิกที่ป่ม บนพาเล็ต Layers เลือกคําสั่ง Curve จะปรากฏ ุ ไดอะล็อกซ์บล็อกซ์สําหรับการปรับแต่งให้วาดเส้นโค้งให้เป็นดังรูป โดยคลิกแล้วลากที่เส้นได้ทนที ั WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  14. 14. 8. สร้าง Selection ที่ตัวอักษรแล้วทําการลดขนาด Selection โดยใช้เมนูคําสั่ง Select เลือก คําสั่ง Modify เลือกคําสั่ง Contract กําหนดขนาดใหม่โดยใส่ขนาดเท่ากับ 6 จะสังเกตเห็น เส้น Selection มีขนาดเล็กลงกว่าข้อความดังรูป WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  15. 15. 9. สร้างเลเยอร์ใหม่ขึ้นมาอีก 1 เลเยอร์จากนั้นเลือกสีพื้น Foreground เป็นสีขาว แล้วคลิกเลือก เครื่องมือ Paint Bucket Tool แล้วเติมสีขาวลงในส่วน Selection ที่ย่อขนาดไว้จะได้ดังรูป 10. คลิกเมาส์ที่คําสั่ง Filter เลือกคําสั่ง Noise เลือกคําสั่ง Add Noise แล้วกําหนดรายละเอียด ตามรูป จากนั้นคลิกปุ่ม OK แล้วยกเลิก Selection โดยการกดปุ่ม Ctrl + D 11. เลือกคําสั่ง Layer Style จากนั้นคลิกหัวข้อคําสั่ง Bevel and Emboss แล้วกําหนดค่า ดังรูป WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  16. 16. 12. สร้างลายโลหะโดยคลิกเมาส์ทีเลเยอร์ Curve1 จากนั้นคลิกไอคอน บนพาเล็ตเลเยอร์แล้ว เลือก ่ คําสั่ง Hue/Saturate แล้วทาการกําหนดค่าตามรูป 13. เมื่อกําหนดรายละเอียดต่าง ๆ แล้วจะได้ตัวอักษรที่เป็นลักษณะโลหะ 3 มิติ ดังรูป WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  17. 17. Workshop5 การสร้างกราฟิก Banner องค์ประกอบที่สาคัญสาหรับเว็บเพจคือ ส่วนที่เป็นหัวเว็บเพจที่อยู่ด้านบนสุด โดยทั่วไปจะ แสดงเกี่ยวกับเจ้าของเว็บไซท์น้ัน เช่น ชื่อเว็บไซท์ กราฟิกที่เป็นเอกลักษณ์ และแถบเนวิเกชั่นหัวเรื่องที่ ใช้บอกว่าเว็บไซท์นี้มีบริการหรือเนื้อหาหลัก อะไรบ้าง ซึ่งเราจะเห็นอยู่ในรูปแบบของ ปุ่มบ้าง แถบสี บ้าง ขึ้นอยู่กับการออกแบบของเจ้าของเว็บไซท์ ในหัวข้อนี้จะแนะนําวิธีการสร้างกราฟิกหัวเรื่อง มาตรฐานที่นิยมใช้งานกันทั่วๆ ไป (หลังจากสร้างเสร็จแล้วต้องนําไปใส่ไว้ในหน้าเว็บเพจ โดยใช้ โปรแกรมจัดหน้าเว็บเพจ เช่น Dreamweaver) ขั้นตอนการสร้าง Banner ในตัวอย่างนี้จะแนะนําวิธีการสร้างกราฟิกฺ Banner แบบง่ายๆ โดยการใช้เครื่องมือพื้นฐานที่เรา ได้ใช้มาแล้ว เช่น วาดรูปทรงต่างๆ การนาภาพมาใส่ การกําหนดเอฟเฟ็คต์เลเยอร์ และพิมพ์ข้อความ เป็นต้น 1. เลือกคําสั่ง File >> New สร้างไฟล์ใหม่ขนาด 769x150 Pixels 2. ใช้เครื่องมือ พื้นที่ Rectangle วาดรูปสี่เหลี่ยม 2 ชิ้น โดยเลือกวาดแบบ Shape Layersลงไปใน ใช้เครื่องมือ Rectangle วาดรูปสี่เหลียม 2 ชิ้น ่ กําหนดสีหรือเลือกรูปแบบ Styles ให้กับรูปสี่เหลี่ยมวาดทั้ง 2 เลเยอร์ เลเยอร์รูปทรง WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  18. 18. 3. กําหนดสีหรือเปิดพาเลต Styles แล้วเลือกสไตส์ให้กับสี่เหลี่ยมทั้ง 2 เลเยอร์ให้สวยงาม 4. สร้างเลเยอร์ขึ้นมาใหม่แล้วทําการก็อบปี้รูปภาพที่ต้องการนํามาตกแต่ง สร้างเลเยอร์ขึ้นมาใหม่ ก็อบปีรูปภาพที่ต้องการนํามาตกแต่งโดยรูปแรกให้นามาทําเป็นพื้นหลังดังรูป ้ ํ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  19. 19. ก๊อปปี้รูปภาพมาวางตกแต่งแล้วจัด ตําแหน่งตามความเหมาะสม จากนั้น เลือกวิธีการผสมเลเยอร์ และกําหนดค่าความโปร่งใส เลือกการผสมเลเยอร์เพื่อให้ภาพ ของภาพ (Opacity) = 81% กลมกลืนกับฉาก 5. หลังจากจั ดวางรูปภาพเรียบร้อยแล้ ว อาจกําหนดเอฟเฟ็คต์การผสมเลเยอร์และค่าความ โปร่งใสให้กับเลเยอร์ภาพ เพื่อทําให้ภาพดูกลมกลืนกับฉากหลังกําหนด Opacity = 81% 6. ใช้เครื่องมือ Polygon วาดรูปทรงหลายเหลี่ยมไว้ที่มุมด้านซ้าย และกําหนดสไตล์ให้กับปุ่ม ใช้เครื่องมือ Polygon วาดรูปทรงหลายเหลี่ยม WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  20. 20. 7. ใช้เครื่องมือ Rectangle วาดรูปสี่เหลี่ยมขนาดเล็กเพื่อทําเป็นปุ่มเนวิเกชั่น แล้วเลือกสไตล์ ให้กับปุ่มให้เข้ากับกราฟิกอื่นๆ (สร้างเป็นปุ่มต้นแบบ 1 ปุ่ม) ใช้เครื่องมือ Rectangle วาดรูปสี่เหลียม ่ 8. ใช้คําสั่ง Layers >> Duplicate Layers… หรือกดปุ่ม Ctrl+J แล้วคัดลอกปุ่มเนวิเกชั่นที่สร้างไว้ให้ ครบตามจํานวนปุ่มที่ต้องการ แล้วคลิกจัดตําแหน่งให้เหมาะสม เลือกเลเยอร์ป่มต้นแบบ กดปุ่ม Ctrl+J ุ คัดลอกปุ่มเนวิเกชั่นที่สร้างไว้ให้ครบตามจํานวนปุ่มทีต้องการ ่ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  21. 21. 9. เลือกปุ่มสุดท้ายด้านซ้ายสุด กดคีย์ Ctrl+T เพื่อให้เกิดสี่เหลี่ยมล้อมรอบปุ่ม แล้วคลิกลากขยาย ปุ่มให้กว้างขึ้น โดยกดคีย์ Ctrl ค้างไว้ จากนั้นคลิกลากปรับมุมด้านข้างบนโดยยุบให้เป็นรูป สามเหลี่ยม กดคีย์ Ctrl+T แล้วคลิกลากขยายปุ่มให้กว้างขึ้นโดยกดคีย์ Ctrl ค้างไว้ จากนั้นคลิกลากปรับมุมให้เป็นรูปสามเหลี่ยม ปรับมุมให้เป็นรูปสามเหลี่ยม จากนั้นเลือกเลเยอร์พื้นหลัง แล้วกําหนด Styles เป็น Double Ring Glow หรือเลือก Styles อื่นๆ ตามใจชอบ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  22. 22. 10. ใช้เครื่องมือ Type พิมพ์ข้อความบนปุ่ม 11. พิมพ์ข้อความอื่นๆ ที่ต้องการลงบนกราฟิก 12. ใช้เครื่องมือ Type พิมพ์ข้อความที่ต้องการให้แสดงบนปุ่มเนวิเกชั่นแต่ละปุ่ม 13. ใช้เครื่องมือ Type พิมพ์ข้อความอื่นๆ เช่น ชื่อเว็บไซท์, สโลแกน หรือข้อความทั่วไปที่ต้องการ นําเสนอลงบนภาพ และทําการตกแต่ง 14. ทําแถบเนวิเกชั่น (Navigation) คือแถบของปุ่มที่ใช้สําหรับนําทางให้กับผู้ชมที่เรียกเข้าเว็บไซท์ ได้รู้ว่าภายในเว็บไซท์นี้มีอะไรอยู่ที่ไหนบ้าง โดยปกติแถบเนวิเกชั่นอาจจะเป็นส่วนหนึ่งของ กราฟิกหัวเรื่อง(เหมือนตัวอย่างหัวข้อที่ผ่านมา) แต่บางครั้งก็มีการสร้างแยกไว้ต่างหาก เพื่อ ความสะดวกต่อการแก้ไขเปลี่ยนแปลงหรือสร้างลิงค์ลงบนปุ่ม ในหัวข้อนี้จะแสดงตัวอย่างการ ออกแบบแถบเนวิเกชั่น โดยใช้เครื่องมือ ใส่รูปทรงสําเร็จรูปโดยเลือกจากชุด Web ใส่รปทรงสําเร็จรูปโดยเลือกจากชุด Web ู WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  23. 23. ใช้เครื่องมือ ใส่รปทรงสําเร็จรูปและทําการตกแต่งด้วย Styles ู ผลลัพธ์ภาพกราฟิกที่จะนําไปใช้บนหน้าเว็บเพจ 15. เลือกคําสั่ง File >> Save เก็บบันทึกเป็นไฟล์ Photoshop (.psd) ไว้ก่อน หลังจากนั้นจึงบันทึก เพื่อนําไปใช้เว็บเพจต่อไป WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  24. 24. Workshop6 การสร้างเมนูบนเว็บเพจ องค์ประกอบที่สําคัญสําหรับอีกอย่างหนึ่งเว็บเพจคือ ส่วนทีเป็นเมนูที่อยู่ด้านข้างหรือ ่ ด้านบนล่างหัวเว็บ โดยทั่วไปจะแสดงเกี่ยวกับหัวเรื่อง หรือรายละเอียดในเว็บไซต์ เช่น หน้า หลัก เมนูย่อย เกี่ยวกับองค์กร และเมนูอืนๆที่เจ้าของเว็บไซต์ต้องการนําเสนอ ขึ้นอยู่กบการ ่ ั ออกแบบของเจ้าของเว็บไซท์ (หลังจากสร้างเสร็จแล้วต้องนาไปใส่ไว้ในหน้าเว็บเพจ โดยใช้ โปรแกรมจัดหน้าเว็บเพจ เช่น Dreamweaver) ขั้นตอนการสร้าง Menu ในตัวอย่างนี้จะแนะนําวิธีการสร้างกราฟิก Menu แบบง่ายๆ โดยการใช้เครื่องมือ พื้นฐานที่เราได้ใช้มาแล้ว เช่น วาดรูปทรงต่างๆ การนําภาพมาใส่ การกําหนดเอฟเฟ็คต์เลเยอร์ และพิมพ์ข้อความ เป็นต้น 1. สร้างไฟล์ใหม่ และกําหนดพื้นที่สีเขียว 2. ใช้เครื่องมือ วาดรูปสี่เหลียมแบบเลเยอร์ ่ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  25. 25. 3. ใช้เครื่องมือ วาดรูปวงรีเพือตัดสี่เหลี่ยมออก ่ วาดรูปวงรีตัดรูปสี่เหลี่ยม พื้นที่ใหม่ที่จะได้ 4. ใช้เครื่องมือ วาดรูปวงกลมแบบเลเยอร์ 5. เลือกเอฟเฟ็คต์ Bevel and Emboss และกําหนด size = 100 WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  26. 26. 6. กดคีย์ Ctrl แล้วคลิกบนเลเยอร์ 7. คลิกสร้างเลเยอร์ 8. เลือก Select>>Modify>>Contract ลดขนาด selection ลง 4 พิกเซลแล้วเติมสี ขาวลงไป 9. เลือก Select>Trancform คลิกลาก เลื่อนลงมา แล้วกดคีย์ Enter 10. เลือก Select>>Refine Edge กําหนดค่า feather = 11 11. กดคีย์ Delete WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  27. 27. 12. กดคีย์ Ctrl แล้วคลิก ได้ Selection 13. .สร้างเลเยอร์ใหม่ 14. เลือกเครื่องมือสร้าง Selection รูปสี่เหลี่ยมแบบตัดพืนที่ออก ้ 15. วาด Selection ลงบนพื้นทีด้านบนวงกลม ่ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  28. 28. 16. วาด Selection ลงบนพื้นทีด้านล่างวงกลม ่ 17. ใช้เครื่องมือ เติมสีลงไป 18. กดคีย์ Ctrl+T และคลิกปุ่ม Warp แล้วปรับปรุงทรง 19. กําหนดสไตล์ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  29. 29. 20. ใช้เครื่องมือ 21. คลิกปุ่ม Type พิมพ์ข้อความบนปุ่ม สร้างกรุ๊ปกับเลเยอร์ของปุ่ม 22. ลากเลเยอร์กรุ๊ปของปุ่มไปวางที่ เพิ่อก๊อปปี้ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  30. 30. 23. ก๊อปปีให้ครบตาม จํานวนปุ่มที่ต้องการ ้ 24. ใช้เครื่องมือ คลิกลากจัดตําแหน่งของปุ่มแต่ละกรุ๊ป 25. เปลี่ยนสีและเปลี่ยนข้อความของปุ่มแต่ละกรุ๊ป ตามต้องการ ดับเบิลคลิกเข้าไปเปลี่ยนสี WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  31. 31. 26. เลือกคําสั่ง File>>Save for Web & Devices เพื่อบันทึกไปใช้งานบนเว็บเพจ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  32. 32. Workshop7 การสร้างงานกราฟิกแบบอินเทรนด์ นอกนี้เรายังสามารถสร้างงานกราฟิกอื่นๆเพื่อใช้ในงานต่างๆ เช่น ใบปลิว แผ่นพับ หรือป้ายโฆษณาต่างโดยใช้เทคนิคการตัดต่อและใช้รปทรงต่างๆ ในตัวอย่างเป็นการสร้างงาน ู ให้ภาพเกิดมิติและเป็นจุดเด่นโดยการสร้างฉากหลังแบบลําแสง 1. สร้างไฟล์ใหม่ขนาด 450x350 เลือกสีพื้นหลังเป็นขาว 2. คลิกสร้างเลเยอร์ใหม่ 3. เลือกเครื่องมือ Polygonal Lasso วาดแบบต่อเนื่อง 4.คลิกวาด Selection หลายๆชิ้น 5.เลือกเครื่องมือ Baint Bucket เพื่อเติมสี 6.คลิกเติมสีลงใน Selection WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  33. 33. 7. กด Ctrl+D ปิด selection แล้วเลือกเครืองมือ ่ วาดรูปวงกลมสีดําในเลเยอร์ใหม่ 8. เลือกเลเยอร์ลายเส้น แล้วเลือก Filter>>Blur>>Gaussian Blur กําหนดค่า Radius ประมาณ 0.2 9.ใช้เครื่องมือ Custom Shape วาดรูปภาพทรง อื่นๆ เพื่อตกแต่งภาพ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  34. 34. วาดรูปทรงต่างๆ ในเลเยอร์ใหม่ 10.ก๊อบปีรูปภาพมาวางตกแต่ง ้ เลเยอร์รูปภาพ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  35. 35. 11.กดคีย์ Ctrl แล้วคลิกบนเลเยอร์ภาพ 12.เลือกเครื่องมือ Paint Bucket 13.เลือกสี FG สีดํา WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ
  36. 36. 14.คลิกเติมสีหรือกดคีย์ Alt+Delete 15.เปลี่ยนพื้นวงกลมเป็นสีอื่นๆ ได้ตามต้องการ WorkShop..............................................................................................................................................................Adobe Photoshop CS3 โดย...ครูฮายาตี มูเซะ

×