ตัวอย่าง workshop โปรแกรม photoshop

Post on 27-May-2015

4.923 Views

Category:

Education

20 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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 บรเวณผมทงหมด

4. จากนนทาการปรบภาพ หรอ ทาใหบรเวณทเลอกนมนวลขน โดยใชคาสง

Select>>Modify >> Feather โดยใสคาลงไปคอ 3

3

2

1

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. ใชเครองมอ Type พมพขอความบนปม

21. คลกปม สรางกรปกบเลเยอรของปม

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 โดย...ครฮายาต มเซะ

top related