SlideShare une entreprise Scribd logo
1  sur  36
Télécharger pour lire hors ligne
Workshop
สร้างสรรค์ผลงานด้วยโปรแกรม Adobe Photoshop CS3

จัดทําโดย
นางสาวฮายาตี มูเซะ
ครู คศ.1 โรงเรียนชุมชนบ้านพงสตา

ชื่อ........................นามสกุล......................ชันมัธยมศึกษาปีที.........
้
่
ภาคเรียนที่ 2 ปีการศึกษา 2556 โรงเรียนชุมชนบ้านพงสตา
สํานักงานเขตพื้นที่การศึกษาประถมศึกษาปัตตานี เขต 2
สํานักงานคณะกรรมการการศึกษาขั้นพื้นฐาน
กระทรวงศึกษาธิการ
Workshop
สร้างสรรค์ผลงานด้วยโปรแกรม Adobe Photoshop CS3
เมื่อผู้เรียนได้ทําการศึกษารายละเอียดต่าง ๆ ของการใช้โปรแกรม Photoshop CS3 มา
จนครบแล้ ว ผู้ เ รี ย นควรที่ ไ ด้ ฝึ ก ทบทวนการใช้ คํ าสั่ ง และเครื่ อ งมื อ ต่ า ง ๆ เหล่ า นั้ น โดยใน
บทเรียนนี้จะให้ผู้เรียนได้นํารูปภาพ หรือสร้างสรรค์ผลงานต่าง ๆ โดยใช้คําสั่งและเครื่องมือ
ต่าง ๆ ตามที่ได้ศึกษามาตั้งแต่ หน่วยการเรียนรู้ที่ 1 - หน่วยการเรียนรู้ที่ 8 เพื่อเป็นการฝึก
ทักษะในการสร้างสรรค์ผลงานจากโปรแกรมการตกแต่งภาพ ผู้เรียนจะได้สามารถนําความรู้
เหล่านี้ไปใช้ในชีวิตประจาวันได้เกิดประโยชน์สูงสุดต่อไปได้

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
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
โดย...ครูฮายาตี มูเซะ
5. จากนั้นคลิกเมาส์เลือกคําสั่ง Image เลือกคําสั่ง Adjustment เลือกคําสั่ง Color
balance จะปรากฏไดอะล็อกซ์บล็อกซ์ของการปรับแต่ง ให้ผู้เรียนปรับค่าสีโดยลากแท่ง
สี่เหลี่ยมของหัวข้อ Cyan , Magenta และ Yellow ไปทางซ้ายหรือขวา หรือ ใส่ค่าที่ต้องการ
ในช่อง Color Levels จากนั้นดูผลการเปลี่ยนสีของผมจากรูปได้ทันที เมื่อปรับสีได้ตาม
ต้องการแล้วคลิก OK. ก็จะสามารถปรับสีผมได้ตามต้องการ

ส่วนที่เป็น Selection คือบริเวณเส้นผม
จะเปลี่ยนสีตามต้องการ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
Workshop2
การสร้างขอบรูปภาพในรูปแบบต่าง ๆ
ในโปรแกรม Photoshop CS3 นี้ผ้เรียนสามารถที่จะสร้างสรรค์รปแบบต่าง ๆ ให้กับ
ู
ู
รูปภาพ เพื่อให้รูปภาพมีความสวยงาม และแปลกตามากยิ่งขึ้น โดยตัวอย่างจะทําการปรับแต่ง
รูปภาพโดยให้ขอบของรูปภาพมีรปแบบที่หลากหลายแตกต่างจากเดิม โดยขั้นตอนของการ
ู
สร้างขอบรูปภาพในรูปแบบต่าง ๆ มีดังนี้
1. เปิดไฟล์รปภาพทีต้องการแก้ไข
ู
่
2. เลือกเครืองมือ
่
ต้องการสร้างเส้นขอบ ไว้ตามรูป

เพื่อสร้าง Selection เป็นเส้นขอบ โดยเว้นบริเวณที่

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
3. กลับด้าน Selection ที่เลือกให้ตรงกันข้าม โดยคลิกเมาส์ทีเมนูคาสั่ง Select เลือก
่
คําสั่งย่อย Inverse

4. คลิกไอคอน
จะเป็นสีแดง ดังรูป

Edit in Quick Mode บน Toolbox เพื่อบังส่วนที่ไม่ต้องการตกแต่ง

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
5. คลิกเมนูคาสั่ง Filter เลือกคําสั่ง Distort เลือกคําสั่ง Ripple จะปรากฏ
ํ
ไดอะล็อกซ์บล็อกซ์สําหรับการปรับแต่ง โดยกําหนดค่า Amount เป็น 300 จากนั้นคลิกปุ่ม OK

ปรับค่าต่าง ๆ ในคําสัง Ripple
่

ปรากฏเส้นขอบเป็นรอยหยักในรูปภาพ

6. ออกจากมุมมอง Edit in Quick Mode โดย
คลิกที่มมมองปกติ Edit in Standard Mode
ุ
สาหรับการแก้ไขภาพ
7. กดปุ่ม Delete เพื่อลบเส้นขอบ
ด้านนอกที่ไม่ต้องการออก จะได้เส้น
ขอบที่มรูปแบบตามที่ผ้เรียนต้องการ
ี
ู
ดังรูป หากต้องการตกแต่งเพิ่มให้เติม
สีต่าง ๆ หรือไล่เฉดสีลงไปในเส้นขอบ
ด้านนอกก็ได้

ไล่เฉดสีโดยใช้ Gradient Tool
บริเวณเส้นขอบสีขาว เพื่อให้ได้
รูปภาพที่สวยงามมากยิ่งขึน
้

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
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
โดย...ครูฮายาตี มูเซะ
4. คลิกที่เลเยอร์ Background copy แล้วเลือกหัวข้อ Create new adjust Layer แล้วเลือกคําสั่ง
Levels เพื่อปรับค่าให้ภาพดูน่มนวลลง โดยปรับที่ค่ากราฟแล้วดูผลที่รปภาพ เมื่อได้ภาพทีน่มนวลจน
ุ
ู
่ ุ
เป็นที่พอใจแล้วคลิกเมาส์ที่ป่ม OK ผู้เรียนก็จะได้ภาพที่ดูน่มนวลและสามารถนาไปใช้ในรูปแบบอื่น ๆ
ุ
ุ
ได้ โดยอาจจะบันทึกเป็นไฟล์ใหม่

ภาพที่ได้หลังการปรับแต่ง

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
Workshop4
การสร้างตัวอักษรแบบโลหะ 3 มิติ
ในตัวอย่างการสร้างสรรค์ผลงานชิ้นนี้จะเป็นการสร้างตัวอักษรโดยใช้คําสั่งต่าง ๆ ที่ได้ศึกษา
มาแล้วในบทเรียนก่อนหน้านี้มาใช้งานร่วมกัน โดยมีข้นตอนของการสร้างตัวอักษรดังนี้
ั
1. สร้างหน้ากระดาษขึ้นมาใหม่ โดยใช้คําสั่ง File เลือก New จากนั้นกําหนดรายละเอียดต่าง
ๆ ของหน้ากระดาษ ตามตัวอย่างด้านล่าง

2. พิมพ์ข้อความโดยกําหนดขนาดเท่ากับ 200 และเป็น สีดํา

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
3. สร้าง Selection ให้กบข้อความโดยการกด Ctrl ค้างไว้แล้วคลิกเมาส์ที่ Layer ข้อความ จะเป็นการ
ั
สร้าง Selection ให้กบข้อความโดยอัตโนมัติ ดังรูป
ั

4. สร้าง Layer ขึ้นมาใหม่ จากนั้นคลิกทีเครื่องมือ Gradient Tool โดยเลือกสีพ้ืน Foreground เป็นสีดํา
่
และสีพื้น Background เป็นสีขาว จากนั้นลากเมาส์ให้ผ่านตัวอักษร จากด้านบนลงล่าง เพื่อไล่โทนสีของ
ตัวอักษรให้เป็นดังภาพ

5. ทาตัวอักษรให้เป็นลายนูนโดยคลิกที่เมนูคําสั่ง Filter เลือกคําสั่ง Blur เลือกคําสั่ง Gaussian Blur
จากนั้นกําหนดค่า Radius เท่ากับ 2.2 Pixel

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
6. คลิกที่เมนูคําสั่ง Filter เลือกคําสั่ง Render เลือกคําสั่ง Lighting Effect จากนั้นกําหนดค่า ดังรูป

7. ปรับตัวอักษรให้เกิดเงาแบบโลหะโดยคลิกที่ป่ม บนพาเล็ต Layers เลือกคําสั่ง Curve จะปรากฏ
ุ
ไดอะล็อกซ์บล็อกซ์สําหรับการปรับแต่งให้วาดเส้นโค้งให้เป็นดังรูป โดยคลิกแล้วลากที่เส้นได้ทนที
ั

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
8. สร้าง Selection ที่ตัวอักษรแล้วทําการลดขนาด Selection โดยใช้เมนูคําสั่ง Select เลือก คําสั่ง
Modify เลือกคําสั่ง Contract กําหนดขนาดใหม่โดยใส่ขนาดเท่ากับ 6 จะสังเกตเห็น เส้น Selection
มีขนาดเล็กลงกว่าข้อความดังรูป

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
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
โดย...ครูฮายาตี มูเซะ
12. สร้างลายโลหะโดยคลิกเมาส์ทีเลเยอร์ Curve1 จากนั้นคลิกไอคอน บนพาเล็ตเลเยอร์แล้ว เลือก
่
คําสั่ง Hue/Saturate แล้วทาการกําหนดค่าตามรูป

13. เมื่อกําหนดรายละเอียดต่าง ๆ แล้วจะได้ตัวอักษรที่เป็นลักษณะโลหะ 3 มิติ ดังรูป

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
Workshop5
การสร้างกราฟิก Banner
องค์ประกอบที่สาคัญสาหรับเว็บเพจคือ ส่วนที่เป็นหัวเว็บเพจที่อยู่ด้านบนสุด โดยทั่วไปจะ
แสดงเกี่ยวกับเจ้าของเว็บไซท์น้ัน เช่น ชื่อเว็บไซท์ กราฟิกที่เป็นเอกลักษณ์ และแถบเนวิเกชั่นหัวเรื่องที่
ใช้บอกว่าเว็บไซท์นี้มีบริการหรือเนื้อหาหลัก อะไรบ้าง ซึ่งเราจะเห็นอยู่ในรูปแบบของ ปุ่มบ้าง แถบสี
บ้าง ขึ้นอยู่กับการออกแบบของเจ้าของเว็บไซท์ ในหัวข้อนี้จะแนะนําวิธีการสร้างกราฟิกหัวเรื่อง
มาตรฐานที่นิยมใช้งานกันทั่วๆ ไป (หลังจากสร้างเสร็จแล้วต้องนําไปใส่ไว้ในหน้าเว็บเพจ โดยใช้
โปรแกรมจัดหน้าเว็บเพจ เช่น Dreamweaver)
ขั้นตอนการสร้าง Banner
ในตัวอย่างนี้จะแนะนําวิธีการสร้างกราฟิกฺ Banner แบบง่ายๆ โดยการใช้เครื่องมือพื้นฐานที่เรา
ได้ใช้มาแล้ว เช่น วาดรูปทรงต่างๆ การนาภาพมาใส่ การกําหนดเอฟเฟ็คต์เลเยอร์ และพิมพ์ข้อความ
เป็นต้น
1. เลือกคําสั่ง File >> New สร้างไฟล์ใหม่ขนาด 769x150 Pixels

2. ใช้เครื่องมือ
พื้นที่

Rectangle วาดรูปสี่เหลี่ยม 2 ชิ้น โดยเลือกวาดแบบ Shape Layersลงไปใน
ใช้เครื่องมือ

Rectangle วาดรูปสี่เหลียม 2 ชิ้น
่

กําหนดสีหรือเลือกรูปแบบ Styles ให้กับรูปสี่เหลี่ยมวาดทั้ง 2 เลเยอร์

เลเยอร์รูปทรง

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
3. กําหนดสีหรือเปิดพาเลต Styles แล้วเลือกสไตส์ให้กับสี่เหลี่ยมทั้ง 2 เลเยอร์ให้สวยงาม
4. สร้างเลเยอร์ขึ้นมาใหม่แล้วทําการก็อบปี้รูปภาพที่ต้องการนํามาตกแต่ง

สร้างเลเยอร์ขึ้นมาใหม่

ก็อบปีรูปภาพที่ต้องการนํามาตกแต่งโดยรูปแรกให้นามาทําเป็นพื้นหลังดังรูป
้
ํ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
ก๊อปปี้รูปภาพมาวางตกแต่งแล้วจัด
ตําแหน่งตามความเหมาะสม จากนั้น

เลือกวิธีการผสมเลเยอร์
และกําหนดค่าความโปร่งใส

เลือกการผสมเลเยอร์เพื่อให้ภาพ

ของภาพ (Opacity) = 81%

กลมกลืนกับฉาก

5. หลังจากจั ดวางรูปภาพเรียบร้อยแล้ ว อาจกําหนดเอฟเฟ็คต์การผสมเลเยอร์และค่าความ
โปร่งใสให้กับเลเยอร์ภาพ เพื่อทําให้ภาพดูกลมกลืนกับฉากหลังกําหนด Opacity = 81%
6. ใช้เครื่องมือ

Polygon วาดรูปทรงหลายเหลี่ยมไว้ที่มุมด้านซ้าย และกําหนดสไตล์ให้กับปุ่ม
ใช้เครื่องมือ

Polygon วาดรูปทรงหลายเหลี่ยม

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
7. ใช้เครื่องมือ
Rectangle วาดรูปสี่เหลี่ยมขนาดเล็กเพื่อทําเป็นปุ่มเนวิเกชั่น แล้วเลือกสไตล์
ให้กับปุ่มให้เข้ากับกราฟิกอื่นๆ (สร้างเป็นปุ่มต้นแบบ 1 ปุ่ม)
ใช้เครื่องมือ

Rectangle วาดรูปสี่เหลียม
่

8. ใช้คําสั่ง Layers >> Duplicate Layers… หรือกดปุ่ม Ctrl+J แล้วคัดลอกปุ่มเนวิเกชั่นที่สร้างไว้ให้
ครบตามจํานวนปุ่มที่ต้องการ แล้วคลิกจัดตําแหน่งให้เหมาะสม
เลือกเลเยอร์ป่มต้นแบบ กดปุ่ม Ctrl+J
ุ
คัดลอกปุ่มเนวิเกชั่นที่สร้างไว้ให้ครบตามจํานวนปุ่มทีต้องการ
่

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
9. เลือกปุ่มสุดท้ายด้านซ้ายสุด กดคีย์ Ctrl+T เพื่อให้เกิดสี่เหลี่ยมล้อมรอบปุ่ม แล้วคลิกลากขยาย
ปุ่มให้กว้างขึ้น โดยกดคีย์ Ctrl ค้างไว้ จากนั้นคลิกลากปรับมุมด้านข้างบนโดยยุบให้เป็นรูป
สามเหลี่ยม
กดคีย์ Ctrl+T แล้วคลิกลากขยายปุ่มให้กว้างขึ้นโดยกดคีย์ Ctrl ค้างไว้
จากนั้นคลิกลากปรับมุมให้เป็นรูปสามเหลี่ยม

ปรับมุมให้เป็นรูปสามเหลี่ยม

จากนั้นเลือกเลเยอร์พื้นหลัง แล้วกําหนด Styles
เป็น Double Ring Glow หรือเลือก Styles
อื่นๆ ตามใจชอบ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
10. ใช้เครื่องมือ Type พิมพ์ข้อความบนปุ่ม

11. พิมพ์ข้อความอื่นๆ ที่ต้องการลงบนกราฟิก
12. ใช้เครื่องมือ
Type พิมพ์ข้อความที่ต้องการให้แสดงบนปุ่มเนวิเกชั่นแต่ละปุ่ม
13. ใช้เครื่องมือ Type พิมพ์ข้อความอื่นๆ เช่น ชื่อเว็บไซท์, สโลแกน หรือข้อความทั่วไปที่ต้องการ
นําเสนอลงบนภาพ และทําการตกแต่ง
14. ทําแถบเนวิเกชั่น (Navigation) คือแถบของปุ่มที่ใช้สําหรับนําทางให้กับผู้ชมที่เรียกเข้าเว็บไซท์
ได้รู้ว่าภายในเว็บไซท์นี้มีอะไรอยู่ที่ไหนบ้าง โดยปกติแถบเนวิเกชั่นอาจจะเป็นส่วนหนึ่งของ
กราฟิกหัวเรื่อง(เหมือนตัวอย่างหัวข้อที่ผ่านมา) แต่บางครั้งก็มีการสร้างแยกไว้ต่างหาก เพื่อ
ความสะดวกต่อการแก้ไขเปลี่ยนแปลงหรือสร้างลิงค์ลงบนปุ่ม ในหัวข้อนี้จะแสดงตัวอย่างการ
ออกแบบแถบเนวิเกชั่น โดยใช้เครื่องมือ
ใส่รูปทรงสําเร็จรูปโดยเลือกจากชุด Web
ใส่รปทรงสําเร็จรูปโดยเลือกจากชุด Web
ู

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
ใช้เครื่องมือ

ใส่รปทรงสําเร็จรูปและทําการตกแต่งด้วย Styles
ู

ผลลัพธ์ภาพกราฟิกที่จะนําไปใช้บนหน้าเว็บเพจ

15. เลือกคําสั่ง File >> Save เก็บบันทึกเป็นไฟล์ Photoshop (.psd) ไว้ก่อน หลังจากนั้นจึงบันทึก
เพื่อนําไปใช้เว็บเพจต่อไป

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
Workshop6
การสร้างเมนูบนเว็บเพจ
องค์ประกอบที่สําคัญสําหรับอีกอย่างหนึ่งเว็บเพจคือ ส่วนทีเป็นเมนูที่อยู่ด้านข้างหรือ
่
ด้านบนล่างหัวเว็บ โดยทั่วไปจะแสดงเกี่ยวกับหัวเรื่อง หรือรายละเอียดในเว็บไซต์ เช่น หน้า
หลัก เมนูย่อย เกี่ยวกับองค์กร และเมนูอืนๆที่เจ้าของเว็บไซต์ต้องการนําเสนอ ขึ้นอยู่กบการ
่
ั
ออกแบบของเจ้าของเว็บไซท์ (หลังจากสร้างเสร็จแล้วต้องนาไปใส่ไว้ในหน้าเว็บเพจ โดยใช้
โปรแกรมจัดหน้าเว็บเพจ เช่น Dreamweaver)
ขั้นตอนการสร้าง Menu
ในตัวอย่างนี้จะแนะนําวิธีการสร้างกราฟิก Menu แบบง่ายๆ โดยการใช้เครื่องมือ
พื้นฐานที่เราได้ใช้มาแล้ว เช่น วาดรูปทรงต่างๆ การนําภาพมาใส่ การกําหนดเอฟเฟ็คต์เลเยอร์
และพิมพ์ข้อความ เป็นต้น
1. สร้างไฟล์ใหม่ และกําหนดพื้นที่สีเขียว
2. ใช้เครื่องมือ

วาดรูปสี่เหลียมแบบเลเยอร์
่

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
3. ใช้เครื่องมือ

วาดรูปวงรีเพือตัดสี่เหลี่ยมออก
่

วาดรูปวงรีตัดรูปสี่เหลี่ยม

พื้นที่ใหม่ที่จะได้

4. ใช้เครื่องมือ

วาดรูปวงกลมแบบเลเยอร์

5. เลือกเอฟเฟ็คต์ Bevel and Emboss และกําหนด size = 100

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
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
โดย...ครูฮายาตี มูเซะ
12. กดคีย์ Ctrl แล้วคลิก

ได้ Selection

13. .สร้างเลเยอร์ใหม่

14. เลือกเครื่องมือสร้าง Selection รูปสี่เหลี่ยมแบบตัดพืนที่ออก
้

15. วาด Selection ลงบนพื้นทีด้านบนวงกลม
่

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
16. วาด Selection ลงบนพื้นทีด้านล่างวงกลม
่

17. ใช้เครื่องมือ

เติมสีลงไป

18. กดคีย์ Ctrl+T และคลิกปุ่ม

Warp แล้วปรับปรุงทรง

19. กําหนดสไตล์

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
20. ใช้เครื่องมือ

21. คลิกปุ่ม

Type พิมพ์ข้อความบนปุ่ม

สร้างกรุ๊ปกับเลเยอร์ของปุ่ม

22. ลากเลเยอร์กรุ๊ปของปุ่มไปวางที่

เพิ่อก๊อปปี้

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
23. ก๊อปปีให้ครบตาม จํานวนปุ่มที่ต้องการ
้

24. ใช้เครื่องมือ

คลิกลากจัดตําแหน่งของปุ่มแต่ละกรุ๊ป

25. เปลี่ยนสีและเปลี่ยนข้อความของปุ่มแต่ละกรุ๊ป ตามต้องการ

ดับเบิลคลิกเข้าไปเปลี่ยนสี

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
26. เลือกคําสั่ง File>>Save for Web & Devices เพื่อบันทึกไปใช้งานบนเว็บเพจ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
Workshop7
การสร้างงานกราฟิกแบบอินเทรนด์
นอกนี้เรายังสามารถสร้างงานกราฟิกอื่นๆเพื่อใช้ในงานต่างๆ เช่น ใบปลิว แผ่นพับ
หรือป้ายโฆษณาต่างโดยใช้เทคนิคการตัดต่อและใช้รปทรงต่างๆ ในตัวอย่างเป็นการสร้างงาน
ู
ให้ภาพเกิดมิติและเป็นจุดเด่นโดยการสร้างฉากหลังแบบลําแสง

1. สร้างไฟล์ใหม่ขนาด 450x350
เลือกสีพื้นหลังเป็นขาว
2. คลิกสร้างเลเยอร์ใหม่

3. เลือกเครื่องมือ
Polygonal
Lasso วาดแบบต่อเนื่อง
4.คลิกวาด Selection หลายๆชิ้น
5.เลือกเครื่องมือ

Baint Bucket เพื่อเติมสี

6.คลิกเติมสีลงใน Selection

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
7. กด Ctrl+D ปิด selection
แล้วเลือกเครืองมือ
่
วาดรูปวงกลมสีดําในเลเยอร์ใหม่

8. เลือกเลเยอร์ลายเส้น แล้วเลือก
Filter>>Blur>>Gaussian Blur
กําหนดค่า Radius ประมาณ 0.2

9.ใช้เครื่องมือ Custom Shape วาดรูปภาพทรง อื่นๆ เพื่อตกแต่งภาพ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
วาดรูปทรงต่างๆ ในเลเยอร์ใหม่

10.ก๊อบปีรูปภาพมาวางตกแต่ง
้

เลเยอร์รูปภาพ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
11.กดคีย์ Ctrl แล้วคลิกบนเลเยอร์ภาพ

12.เลือกเครื่องมือ
Paint Bucket

13.เลือกสี FG สีดํา

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ
14.คลิกเติมสีหรือกดคีย์ Alt+Delete

15.เปลี่ยนพื้นวงกลมเป็นสีอื่นๆ
ได้ตามต้องการ

WorkShop..............................................................................................................................................................Adobe Photoshop CS3
โดย...ครูฮายาตี มูเซะ

Contenu connexe

Tendances

ใบความรู้ สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheet
ใบความรู้  สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheetใบความรู้  สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheet
ใบความรู้ สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheetPrachoom Rangkasikorn
 
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...Teacher Sophonnawit
 
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสารแผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสารวัชรพล เที่ยงปา
 
สำนวนไทย พร้อมระบายสี
สำนวนไทย พร้อมระบายสีสำนวนไทย พร้อมระบายสี
สำนวนไทย พร้อมระบายสีariga sara
 
ติวก่อนสอบ ม.2
ติวก่อนสอบ ม.2ติวก่อนสอบ ม.2
ติวก่อนสอบ ม.2ssuser456899
 
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)Petsa Petsa
 
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4Sasiprapha Srisaeng
 
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4page
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4pageใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4page
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4pagePrachoom Rangkasikorn
 
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560KiiKz Krittiya
 
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศ
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศ
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศNattapon
 
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3Mam Chongruk
 
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้ว
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้วโครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้ว
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้วstampmin
 
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1Sivagon Soontong
 
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559Panatchakorn Chaiyanon
 
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะ
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะบทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะ
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะอุษณีษ์ ศรีสม
 
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4Itt Bandhudhara
 

Tendances (20)

ใบความรู้ สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheet
ใบความรู้  สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheetใบความรู้  สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheet
ใบความรู้ สังคม ป.1-3 ภาคเรียนที่ 1+443+dltvsocp3+T1 p1 3-sheet
 
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...
คู่มือประเมินสมรรถนะสำคัญของผู้เรียนระดับการศึกษาขั้นพื้นฐาน ชั้นมัธยมศึกษาปี...
 
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสารแผนการจัดการเรียนรู้ Active Learning เรื่อง  กราฟิกเพื่อการสื่อสาร
แผนการจัดการเรียนรู้ Active Learning เรื่อง กราฟิกเพื่อการสื่อสาร
 
มาตรแม่กก ป2
มาตรแม่กก ป2มาตรแม่กก ป2
มาตรแม่กก ป2
 
สำนวนไทย พร้อมระบายสี
สำนวนไทย พร้อมระบายสีสำนวนไทย พร้อมระบายสี
สำนวนไทย พร้อมระบายสี
 
โครงสร้างรายวิชาคอม ม.1
โครงสร้างรายวิชาคอม ม.1โครงสร้างรายวิชาคอม ม.1
โครงสร้างรายวิชาคอม ม.1
 
แผนการจัดการเรียนรู้ หน้าที่พลเมือง ม.1
แผนการจัดการเรียนรู้  หน้าที่พลเมือง ม.1แผนการจัดการเรียนรู้  หน้าที่พลเมือง ม.1
แผนการจัดการเรียนรู้ หน้าที่พลเมือง ม.1
 
ติวก่อนสอบ ม.2
ติวก่อนสอบ ม.2ติวก่อนสอบ ม.2
ติวก่อนสอบ ม.2
 
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)
แบบฝึกภาษาไทยป.4 ตำที่มีตัวการันต์ (1)
 
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป.4
 
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4page
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4pageใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4page
ใบความรู้ เบญจศีล เบญจธรรม ป.3+449+dltvp3+54soc p03f 35-4page
 
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560
Powerpoint นำเสนอการประเมินวิทยฐานะครูชำนาญการ (คศ.2) - 15/09/2560
 
รายงานโครงการแข่งขันหุ่นยนต์1
รายงานโครงการแข่งขันหุ่นยนต์1รายงานโครงการแข่งขันหุ่นยนต์1
รายงานโครงการแข่งขันหุ่นยนต์1
 
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศ
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศ
ใบงานที่ 8-1 คุณธรรม จริยธรรมในการใช้เทคโนโลยีสารสนเทศ
 
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3
วิเคราะห์หลักสูตรวิทยาศาสตร์ ป 3
 
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้ว
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้วโครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้ว
โครงงานสิ่งประดิษฐ์เครื่องสกรีนลายแก้ว
 
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1
ข้อสอบปลายภาคเรียนที่ ๒ ภาษาไทย (Key)_ม.1
 
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559
รูปแบบการเขียนรายงานฉบับสมบูรณ์ โรงเรียนเสริมงามวิทยาคม 2559
 
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะ
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะบทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะ
บทสวดมนต์แปลภาษาไทยและภาษาอังกฤษ 7 บทสำหรับแข่งทักษะ
 
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4
แบบฝึกเสริมทักษะ ชุด มาตราตัวสะกด ป4
 

En vedette

ใบความรู้ที่ 3 เรื่อง การทำงานของlayer
ใบความรู้ที่ 3 เรื่อง การทำงานของlayerใบความรู้ที่ 3 เรื่อง การทำงานของlayer
ใบความรู้ที่ 3 เรื่อง การทำงานของlayerคีตะบลู รักคำภีร์
 
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์คีตะบลู รักคำภีร์
 
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสี
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสีใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสี
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสีคีตะบลู รักคำภีร์
 
ใบความรู้ที่ 7 เรื่อง การใช้งานselection
ใบความรู้ที่ 7 เรื่อง การใช้งานselectionใบความรู้ที่ 7 เรื่อง การใช้งานselection
ใบความรู้ที่ 7 เรื่อง การใช้งานselectionคีตะบลู รักคำภีร์
 
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพ
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพ
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพคีตะบลู รักคำภีร์
 
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกคีตะบลู รักคำภีร์
 

En vedette (6)

ใบความรู้ที่ 3 เรื่อง การทำงานของlayer
ใบความรู้ที่ 3 เรื่อง การทำงานของlayerใบความรู้ที่ 3 เรื่อง การทำงานของlayer
ใบความรู้ที่ 3 เรื่อง การทำงานของlayer
 
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์
ใบความรู้ที่ 5 เรื่อง การใช้งานฟิลเตอร์
 
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสี
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสีใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสี
ใบความรู้ที่ 4 เรื่อง การใช้เครื่องมือในการปรับแต่งสี
 
ใบความรู้ที่ 7 เรื่อง การใช้งานselection
ใบความรู้ที่ 7 เรื่อง การใช้งานselectionใบความรู้ที่ 7 เรื่อง การใช้งานselection
ใบความรู้ที่ 7 เรื่อง การใช้งานselection
 
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพ
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพ
ใบความรู้ที่ 6 เรื่อง การสร้างตัวอักษรลงในภาพ
 
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิกใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
ใบความรู้ เรื่อง ความรู้เบื้องต้นเกี่ยวกับคอมพิวเตอร์กราฟิก
 

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

Lesson 1.1 Photoshop
Lesson 1.1 PhotoshopLesson 1.1 Photoshop
Lesson 1.1 PhotoshopKung Piyapong
 
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)somdetpittayakom school
 
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flash
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flashคู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flash
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flashprawit trakoonvidthayanan
 
ขั้นตอ
ขั้นตอขั้นตอ
ขั้นตอJiraporn Kru
 
คู่มือการใช้งาน Class start
คู่มือการใช้งาน Class startคู่มือการใช้งาน Class start
คู่มือการใช้งาน Class startJiraporn Kru
 
บทที่ 4 ผลการดำเนินงาน
บทที่ 4  ผลการดำเนินงานบทที่ 4  ผลการดำเนินงาน
บทที่ 4 ผลการดำเนินงานchaiwat vichianchai
 
ใบงานที่1
ใบงานที่1ใบงานที่1
ใบงานที่1Bee Saruta
 
ใบงานที่ 2
ใบงานที่ 2ใบงานที่ 2
ใบงานที่ 2Bee Saruta
 
แผนคอมฯ ม.2 4
แผนคอมฯ ม.2 4แผนคอมฯ ม.2 4
แผนคอมฯ ม.2 4Surapong Jakang
 
Blender manual
Blender manualBlender manual
Blender manualougoug
 

Similaire à ตัวอย่าง Workshop โปรแกรม Photoshop (20)

Lesson 1.1 Photoshop
Lesson 1.1 PhotoshopLesson 1.1 Photoshop
Lesson 1.1 Photoshop
 
แผนการจัดการเรียนรู้ที่1
แผนการจัดการเรียนรู้ที่1แผนการจัดการเรียนรู้ที่1
แผนการจัดการเรียนรู้ที่1
 
แผนการจัดการเรียนรู้ที่2
แผนการจัดการเรียนรู้ที่2แผนการจัดการเรียนรู้ที่2
แผนการจัดการเรียนรู้ที่2
 
Lesson1.1
Lesson1.1Lesson1.1
Lesson1.1
 
แผนการจัดการเรียนรู้ที่8
แผนการจัดการเรียนรู้ที่8แผนการจัดการเรียนรู้ที่8
แผนการจัดการเรียนรู้ที่8
 
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)
ใบงานที่ 2.3 เครื่องมือในกลุ่มต่างๆ บนกล่องเครื่องมือ (toolbox)
 
แผนการจัดการเรียนรู้ที่3
แผนการจัดการเรียนรู้ที่3แผนการจัดการเรียนรู้ที่3
แผนการจัดการเรียนรู้ที่3
 
Photoscape
PhotoscapePhotoscape
Photoscape
 
เรื่องที่ 1
เรื่องที่ 1เรื่องที่ 1
เรื่องที่ 1
 
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flash
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flashคู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flash
คู่มือการสร้างภาพเคลื่อนไหวด้วยโปรแกรม Flash
 
ขั้นตอ
ขั้นตอขั้นตอ
ขั้นตอ
 
คู่มือการใช้งาน Class start
คู่มือการใช้งาน Class startคู่มือการใช้งาน Class start
คู่มือการใช้งาน Class start
 
แผนการจัดการเรียนรู้ที่10
แผนการจัดการเรียนรู้ที่10แผนการจัดการเรียนรู้ที่10
แผนการจัดการเรียนรู้ที่10
 
บทที่ 4 ผลการดำเนินงาน
บทที่ 4  ผลการดำเนินงานบทที่ 4  ผลการดำเนินงาน
บทที่ 4 ผลการดำเนินงาน
 
Unit6
Unit6Unit6
Unit6
 
แผนการจัดการเรียนรู้ที่9
แผนการจัดการเรียนรู้ที่9แผนการจัดการเรียนรู้ที่9
แผนการจัดการเรียนรู้ที่9
 
ใบงานที่1
ใบงานที่1ใบงานที่1
ใบงานที่1
 
ใบงานที่ 2
ใบงานที่ 2ใบงานที่ 2
ใบงานที่ 2
 
แผนคอมฯ ม.2 4
แผนคอมฯ ม.2 4แผนคอมฯ ม.2 4
แผนคอมฯ ม.2 4
 
Blender manual
Blender manualBlender manual
Blender manual
 

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

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