02 บทที่ 2-เอกสารที่เกี่ยวข้อง

35
บบบบบ 2 บบบบบบบบบบบบบบบบบบบ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใ ใใใใใใใใใ (WebBlog) ใใใใ Wordpress ใใใใใใ Protoshop ใใใ ใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใ ใใใใใใใใใใใใใใใใใใใใใ Photoshop ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใ ใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใ ใใใ Photoshop ใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใ Photoshop ใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใ ใใ ใใ ใใ ใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใ ใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใ ใใใใใใใใใใใใ ใใใใใใใใใใใใใใใใใใใใใใใใใใใใใใ

Upload: champ-wachwittayakhang

Post on 28-May-2015

392 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

บทท�� 2

เอกสารท��เก��ยวข้�อง

ในการจั�ดทำาโครงงานคอมพิ�วเตอร� การพิ�ฒนาเว�บบล็�อก (WebBlog) ด�วย Wordpress

เร��อง Protoshop น� ผู้"�จั�ดทำาโครงงานได�ศึ%กษาเอกสารทำ��เก��ยวข้�องก�บโปรแกรมน� ทำ��เก��ยวข้�องด�งต+อไปน�

Photoshop

ในการทำาภาพิวอล็ล็�เปเปอร�บางคร� งก�จัาเป-นต�องอาศึ�ยโปรแกรมตกแต+งภาพิ ซึ่%�งโปรแกรมกราฟฟ0กตกแต+งภาพิต+างๆม�อย"+มากมาย แต+ทำ��น�ยมใช้� แล็ะเป-นทำ�� ร" �จั�กก�นมากม�อย"+ ไม+ม�ก�� โปรแกรม แล็ะ Photoshop ก�เป-นหน%�งในน� น ในส+วนน� จัะนาเสนอ การใช้�งานโปรแกรม Photoshop เบ� อนต�น ไว�สาหร�บน�กแต+งภาพิม�อใหม+ได�ศึ%กษาก�น

หล็ายๆคนม�ภาพิทำ��ต�องการจัะทำาเป-นวอล็ล็�เปเปอร�อย"+แล็�ว แต+ทำาไม+เป-น มาล็องอ+านว�ธี�ใช้�โปรแกรมน� ด" จัะร" �ว+าการทำาวอล็ล็�เปเปอร�ง+ายน�ดเด�ยว ค6ณเองก�สามารถทำาได�ด�วยต�วเอง เพิ�ยงแค+ม�ภาพิทำ��อยากจัะให�เป-น wallpaper ก�บว�ธี�ตกแต+งภาพิให�สวยงามเหมาะสม ค6ณเองก�สามารถทำาวอล็ล็�เปเปอร�สวยๆไว�ประด�บหน�าจัอคอมข้องค6 ณ ไ ด� แ ล็� ว ไ ม+ ต� อ ง ไ ป ร อ ใ ห� ใ ค ร ม า ทำา ใ ห�

Page 2: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

บทำความทำ� งหมดเป-นเพิ�ยงว�ธี�ใช้�งาน ก�บต�วอย+างเบ� องต�นเทำ+าน� น หากสนใจัจัะศึ%กษาต+อ ม�เว�บเก��ยวก�บ Photoshop หร�อเว�บกราฟฟ0ก ทำ��สอนโปรแกรมกราฟฟ0กอ��นๆอ�กมากมายทำ� งเว�บไทำยแล็ะเว�บต+างประเทำศึ โดยไปหาเว�บเหล็+าน� นได�ผู้+านทำาง Graphic Link หร�อจัะเล็�อกศึ%กษาจัากหน�งส�อทำ��ม�ข้ายทำ��วไปก�ได�

โปรแกรมส�าหร�บการตกแต�งร�ปภาพ

Adobe Photoshop ค�อช้��อเต�มข้องโปรแกรมน� ทำ��ใช้�สาหร�บการตกแต+งภาพิ แก�ไข้ภาพิ ย+อข้นาด เปล็��ยนประเภทำไฟล็� หร�อหล็ายๆ คนอาจัเคยได�ย�นคา ว+ า Retouch ภาพิซึ่%� งก�ม�ความหมายในแนวเด�ยวก�น โปรแกรม photoshop น� ถ�อได�ว+าเป-นโปรแกรมท��ดี�ท��ส�ดี และน่�าใช้�ท��ส�ดีส�าหร�บการแก�ไข้ภาพก�ว+าได� เร�ยกว+า ถ�าพิ"ดถ%งการแก�ไข้ร"ปภาพิด�จั�ตอล็ ต�องพิ"ดถ%งโปรแกรม Adobe Photoshop เล็ยทำ�เด�ยว

เราสามารถเร�ยนร" �ว�ธี�การใช้�โปรแกรม Adobe Photoshop น� ได�ด�วยต�วเอง ร�บรอง ค6ณสามารถทำ��จัะทำาการแก�ไข้ภาพิ ตกแต+งภาพิ ซึ่�อนภาพิในร"ปแบบต+างๆ ได�อย+างง+ายดาย พิร�อมก�นน� ทำ��ข้าดไม+ได�ก�ค�อ การใส+ข้�อความประกอบล็งในภาพิข้องเรา  แล็ะเน��องด�วย Adobe Photoshop ม�การพิ�ฒนาโปรแกรมมาอย+างต+อเน��อง ทำาให�เราจัาเป-นต�องศึ%กษาคาส��งต+างๆ ให�เข้�าใจั

ความสามารถพ'(น่ฐาน่ข้อง Adobe Photoshop ท�� ควรทราบ

1.ตกแต+งหร�อแก�ไข้ร"ปภาพิ

Page 3: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

2.ต�ดต+อภาพิบางส+วน หร�อทำ��เร�ยกว+า crop ภาพิ

3.เปล็��ยนแปล็งส�ข้องภาพิ จัากส�หน%�งเป-นอ�กส�หน%�งได�

4.สามารถล็ากเส�น แบบฟร�สไตล็� หร�อใส+ร"ปภาพิ ส��เหล็��ยม วงกล็ม หร�อสร�างภาพิได�อย+างอ�สระ

5.ม�การแบ+งช้� นข้องภาพิเป-น Layer สามารถเคล็�� อนย�ายภาพิได�เป-นอ�สระต+อก�น

6.การทำา cloning ภาพิ หร�อการทำาภาพิซึ่ าในร"ปภาพิเด�ยวก�น

7.เพิ��มเต�มข้�อความ ใส+ effect ข้องข้�อความได�

8.Brush หร�อแปรงทำาส� ทำ��สามารถเล็�อกร"ปแบบสาเร�จัร"ปในการสร�างภาพิได� แล็ะอ��นๆ อ�กมากมาย

นอกจัากน� ย�งม�โปรแกรมเสร�มทำ��ช้+วยให�การตกแต+งภาพิด�วย Photoshop เป-นเร��องง+ายๆ อ�ก น��นค�อ Plug-ins ข้อง Photoshop ซึ่%�งได�แก+ การปร�บภาพิจัากภาพิถ+าย มาเป-นภาพิแบบวาดด�วยส�น า ภาพิล็ายการ�ต"น เป-นภาพิล็ายเส�น เป-นต�น สาหร�บ Plug-ins ทำ��เป-นทำ��น�ยมใช้�ก�บ Photoshop ได�แก+

1.AlienSkin Eye Candy

2.Extensis Photo Frame

3.Extensis Photo Graphics

4.Extensis Photo Tools

5.Kai's Power Tools

Page 4: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ส�วน่ประกอบหล�กข้อง Photoshop เพิ�� อ ให�สามารถเข้� า ในการทำา งานข้องโปรแกรม Adobe

Photoshop หร�อทำ��หล็าย ๆ คนม�กเร�ยก โฟโต�ช้�อป 'Photoshop' เฉย ๆ ได�เร�ยนร" �ได�รวดเร�วมากย��งข้% น ด�งน� น เรามาเร�ยนร" �ส+วนประกอบหล็�ก ๆ ข้อง โฟโต�ช้�อป ก+อนด�กว+า ว+าม�อะไรบ�าง แล็ะแต+ล็ะส+วนทำา

Page 5: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

หน�าทำ��อย+างไร... สาหร�บส+วนประกอบทำ��แนะนาน� เป-น โปรแกรม โฟโต�ช้�อป เวอร�ช้��น 6.0 ซึ่%� งแตกต+ างจัากเวอร�ช้��น ในป;จัจั6 บ�นทำ�� เป-น Photoshop CS บ�าง (สาหร�บผู้"�ใช้�งาน เวอร�ช้��น 4 หร�อ 5 หร�อแม�กระทำ��งเวอร�ช้��นยอดน�ยม เวอร�ช้��น 7 ก�สามารถศึ%กษารายล็ะเอ�ยดได�เช้+นก�น จัะแตกต+างก�นบ�างก�เพิ�ยงเล็�กน�อยเทำ+าน� น)

1.         Title bar หร�อแถบช้��อเร��อง เป-นตาแหน+งทำ��แสดงช้��อข้องโปรแกรม

2.         Menu bar หร�อแถบเมน" เป-นตาแหน+งแสดงคาส��งต+าง ๆ ในการทำางาน

Page 6: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

3.        Option bar เป-นตาแหน+งแสดงรายล็ะเอ�ยดข้องเคร��องม�อ (Tools) ทำ��ค6ณเล็�อกใช้�งานอย"+ในป;จัจั6บ�น  ถ�าเป-นเวอร�ช้��นทำ��เป-น CS จัะม�การแบ+งกล็6+มแล็ะเพิ��มเต�ม Tool ใหม+เข้�ามา

4.        Toolbox หร�อกล็+องเคร��องม�อ เป-นตาแหน+งทำ��เก�บรวมรวมเคร��องม�อต+าง ๆ ข้องโฟโต�ช้�อป

5.        หน่�าต�างเอกสาร เป-นหน�าต+างงานข้องเราทำ��กาล็�งสร�างอย"+ ส�งเกตด�านบนจัะเห�นช้��อข้องไฟล็� แล็ะข้นาดข้องภาพิทำ��ถ"กย+อหร�อข้ยายอย"+

6.       Pallette เป-นหน�าต+างพิ�เศึษทำ��ช้+วยในการทำางาน สามารถเพิ��มหร�อล็ดได�ตามความต�องการ (สามารถเล็�อกได�จัากเมน" window เล็�อกหน�าต+างทำ��ต�องการแสดงหร�อไม+แสดง)

7.      แถบสถาน่ะ เป-นตาแหน+งทำ��แสดงข้นาดข้องไฟล็� แล็ะรายล็ะเอ�ยดการทำางานอ��นๆ

Photoshop Tools Photoshop ม�เคร��องม�อต+างๆ ให�เล็�อกใช้�มากมาย โดยม�การจั�ดเป-นหมวดหม"+ เคร��องม�อต+าง ๆ จัะอย"+ในส+วนทำ��เร�ยกว+า Toolbox (ด�านซึ่�ายม�อ ถ�าไม+แสดง สามารถคล็�กเข้�าเมน" Window คล็�กเล็�อก Tool) เราสามารถใช้�เคร��องม�อต+าง ๆ ทำ��อย"+ใน Toolbox ได�โดยการใช้�เม�าส�คล็�กเล็�อกเคร��องม�อทำ��ต�องการ หร�อกดต�วอ�กษรทำ��แป<นค�ย�บอร�ด เช้+น T หมายถ%ง Text Tool เป-นต�น

Page 7: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

คาส��งใดๆ ก�ตามทำ��ม�เคร��องหมายสามเหล็��ยมเล็�กๆ ม6มข้วาล็+างส6ด สามารถคล็�กแล็ะจัะได�คาส��งเพิ��มเต�มแสดงออกมา

Page 8: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

 

 

ภาพท��ใช้�งาน่ใน่ Photoshop

เพิ��อเป-นการทำาความเข้�าใจัเก��ยวก�บร"ปภาพิ ข้นาดข้องร"ปภาพิแล็ะผู้ล็ข้องการกา หนดข้นาดข้องร"ปภาพิทำ��นา เข้�ามาตกแต+งในโปรแกรม Photoshop ซึ่%�งจัะม�ผู้ล็อย+างมากเวล็านาภาพิน� นๆ ไปพิ�มพิ�ล็งบนเคร��องพิ�มพิ� เราสามารถแบ+งประเภทำข้องร"ปภาพิทำ��เราเห�นๆ อย"+ในคอมพิ�วเตอร�ได�ด�งน�

ประเภทข้องร�ปภาพบน่คอมพ*วเตอร+

-Vector Graphics

ร"ปภาพิทำ��ใช้�เส�น แล็ะความโค�งเป-นหล็�กในการสร�างภาพิ การแก�ไข้ภาพิ ด�วยการย+อหร�อข้ยาย จัะไม+ม�ผู้ล็ทำาให�ภาพิน� นเส�ยหาย ร"ปภาพิทำ��สร�างจัากโปรแกรม Vector น� ส+วนมากจัะเป-นภาพิในล็�กษณะการ�ต"น ไม+ใช้+ภาพิ Photo หร�อ ภาพิถ+ายทำ��วๆ ไป

-Bitmap Graphics

ร"ปภาพิทำ��ประกอบด�วยจั6ดนามาต+อก�น เราเร�ยกจั6ดเหล็+าน� ว+า 'pixels' ถ�าจัานวน pixels มากภาพิจัะคมช้�ดกว+า เวล็าข้ยายภาพิให�ใหญ่+ข้% น ค6ณภาพิข้องภาพิทำ��ไม+ค+อยล็ดล็ง ร"ปภาพิประเภทำ bitmap เหล็+าน� ได�แก+ร"ปภาพิถ+ายทำ��วๆ ไป ทำ��ได�จัากกล็�องด�จั�ตอล็ หร�อโทำรศึ�พิทำ�ม�อถ�อ

ร"ปภาพิทำ��ใช้�ในโปรแกรม Photoshop ม�ล็�กษณะทำ��เร�ยกว+า Bitmap หมายถ%ง ภาพิทำ��ประกอบด�วยจั6ดส��เหล็��ยม (pixel) มาเร�ยงต+อเน��องก�น

Page 9: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

เป-นภาพิ ด�งน� นภาพิทำ��ม�ความล็ะเอ�ยดส"งหร�อม�จัา นวน Pixels ทำ��ส"ง เม��อทำาการซึ่"มเข้�าไปด"ใกล็�ๆ ภาพิทำ��มองเห�นก�จัะคมช้�ดเหม�อนเด�ม ไม+แตกหร�อมองเห�นเป-นร"ปส��เหล็��ยม

DPI ค'ออะไร

Dot Per Inch ค�อความล็ะเอ�ยดหร�อจัานวนจั6ดในพิ� นทำ��หน%�งตารางน� ว โดยในแต+ล็ะจั6ดเราจัะเร�ยกว+า พิ�กเซึ่ล็ Pixel

ภาพท��แสดีงบน่หน่�าจอ ควรก�าหน่ดีเท�าใดี

ถ�าภาพิใดม�จัานวนพิ�เซึ่ล็ส"ง ๆ ภาพิน� นก�จัะให�ความล็ะเอ�ยดแล็ะความคมช้�ดในการพิ�มพิ� อย+างไรก�ตามก�กาหนดจัานวนพิ�กเซึ่ล็น� น จัะต�องข้% นอย"+ก�บการนาไปใช้�ด�วย เช้+น ถ�าต�องการนาไปแสดงผู้ล็ทำ��หน�าจัอ หร�อบน web ก�อาจัใช้�จัานวนพิ�เซึ่ล็ประมาณ 72 dpi (Macintosh) หร�อ 92 dpi (PC) แต+ถ�าต�องการนาไปใช้�ในการพิ�มพิ�อาจัจัาเป-นต�องกาหนดค+าความล็ะเอ�ยดทำ�� 350 dpi เป-นต�น การกา หนดจัา นวน พิ�กเซึ่ล็ นอกจัากม�ผู้ล็ก�บความล็ะเอ�ยดแล็�ว ข้นาดข้องไฟล็�ก�จัะม�ผู้ล็ด�วย

ท*ปและเทคน่*คเพ*�มเต*มเก��ยวก�บ Pixels

การกาหนดจัานวน พิ�กเซึ่ล็ เพิ��อการพิ�มพิ� จัาเป-นต�องด"ความล็ะเอ�ยดในการพิ�มพิ�ข้องเคร��องพิ�มพิ�ด�วย เช้+น เคร��องม�อสามารถพิ�มพิ�ความล็ะเอ�ยดส"งส6ดได�ทำ�� 600 dpi ด�งน� น เราก�ไม+ควรกาหนดรายล็ะเอ�ยด

Page 10: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ข้องภาพิให�ส"งกว+า 600 dpi เพิราะเคร��องพิ�มพิ�จัะไม+สามารถพิ�มพิ�รายล็ะเอ�ยดได� แล็ะจัะทำาให�ความเร�วในการพิ�มพิ�ล็ดน�อยล็ง..

ท�าความร��จ�กโหมดีส� RGB, CMYK

ในระบบคอมพิ�วเตอร�เราสามารถกแยกแยะโหมดส�ออกเป-นประเภทำต+างๆ ได�หล็ายประเภทำ ทำ� งน� ส�บเน��องมาจัากว�ตถ6ประสงค�ในการนาไปใช้�งานทำ��แตกต+างก�น  ด�งน� นก+อนการเร�ยนร" �การแก�ไข้ภาพิด�วย Photoshop จั%งควรทำาความเข้�าใจัเร��อง mode ส�ให�ด�ก+อน จัะทำาเร�ยนร" �แล็ะทำางานได�อย+างม�ประส�ทำธี�ภาพิมากย��งข้% น

โหมดีส� RGB ค'ออะไร

ย+อมาจัาก Red Green Blue แสงส�ข้าวจัากธีรรมช้าต�หร�อแสงจัากดวงอาทำ�ยต� เก�ดจัากการผู้สมส�ข้องแม+ส�สามส�ค�อ แดง เข้�ยวแล็ะน าเง�น ซึ่%�งเหม�อนก�บส�ทำ��ปรากฏบนหน�าจัอคอมพิ�วเตอร� ซึ่%�งโหมดส� RGB น� เหมาะสาหร�บการนาภาพิไปเป-น ฟ0ล็�มสไล็ด�/เนกาต�ฟ  เวลาใช้�งาน่ใน่ Photoshp ส�วน่ใหญ่�เราจะใช้� Mode RGB ใน่การท�างาน่ ด�งน� นเวล็าเข้�าไปแก�ไข้ภาพิแล็ะไม+สามารถทำางานบางอย+างได� ให�ล็องคล็�กเข้�าไปด"ห�วข้�อ Mode ป;จั6จับ�นทำ�เราทำางานอย"+ อาจัไม+ถ"กต�องก�ได� (ด"ว�ธี�การเปล็��ยน Mode ด�านล็+าง)

โหมดีส� CMYK ค'ออะไร

ย+อมาจัาก Cyan Megenta Yellow Black เป-นล็�กษณะโหมดส�ทำ��เหมาะสาหร�บใช้�ในงานส��งพิ�มพิ� ทำ��ต�องการความล็ะเอ�ยดส"ง แล็ะได�ส�ทำ��ไม+ผู้�ดเพิ� ยน 

โหมดีส� Index ค'ออะไร

Page 11: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

โหมดส�ทำ��เหมาะสาหร�บการทำาภาพิบน web โดยจัะม�ความล็ะเอ�ยดข้องส�ไม+เก�น 256 ส� ทำ6กคร� งทำ��ค6ณแปล็งภาพิจัากโหมดส�อ�� นๆ มาเป-น Index โปรแกรมจัะทำาการตรวจัสอบรห�สส�ทำ��ได� โดยถ�าค+าส�ใดไม+ม�จัะถ"กแปล็งเป-นส�ใกล็�เค�ยงให�อ�ตโนม�ต� ด�งน� นภาพิทำ�� ได�จัะให�ความสวยงามทำ��ใกล็�เค�ยงข้องเด�ม แล็ะทำาให�ไฟล็�ม�ข้นาดเล็�กล็งด�วย

การปร�บแต�งโหมดีส�ใน่ Photoshop

เราสามารถปร�บเปล็��ยน Mode ทำ��ข้องภาพิทำ��เรากาล็�งแก�ไข้อย"+ได� โดยสามารถ

1.             คล็�กเมน" Image

2.             เล็�อกเมน" Mode

3.             จัากน� นคล็�กเล็�อกโหมดส�ได�ตามต�องการ

หมายเหต6 ข้� นตอนคาส��งข้�างต�น สามารถนาไปใช้�งานได�ก�บ Adobe Photoshop ได�ทำ6กๆ เวอร�ช้��น

Layer พ'( น่ ฐ า น่ ส�า ค� ญ่ ท�� ต� อ ง ร�� ส�า ห ร� บ Photoshop

ส*�งส�าค�ญ่ท��ส�ดีท��ต�องทราบส�าหร�บผู้��ใช้�งาน่ Photoshop

การทำางานข้องโปรแกรม Adobe Photoshop จัะม�การแบ+งข้�อม"ล็หร�อว�ตถ6 เป-นส+วนๆ หร�อแบ+งออกเป-นช้� น หร�อทำ�� photoshop เร�ยกกว+า Layer ซึ่%�งจัะม�ผู้ล็ทำาให�ข้�อม"ล็หร�อว�ตถ6น� นๆ สามารถแยกออกจัากก�นได�เป-นอ�สระ ทำาให�เราสามารถบร�หารจั�ดการส��งน� นๆ ได�สะดวกง+ายดาย

Page 12: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ต�วอย�างการท�างาน่ข้อง Layer

1.             ให�นา ร"ปภาพิเข้�ามาแก�ไข้ใน Photoshop (จัะได� Layer ร"ปดอกไม�)

2.             พิ�มพิ�ข้�อความเพิ��ม โดยคล็�กคาส��ง Type Tool ร"ปต�ว "T" จัากน� นคล็�กบร�เวณว+างทำ��หน�าต+างการทำางาน พิ�มพิ�ข้�อความ "ดอกทำ�วล็�ป" (จัะได� Layer ดอกทำ�วล็�ป)

3.             ทำดสอบโดยการป0ดร"ปดวงตา ข้อง Layer ดอกทำ�วล็�ป

4.             จัะเห�นว+า ต�วอ�กษรทำ��พิ�มพิ�หายไป

ท*ปการใช้�งาน่ Layer

-Layer ทำ��อย"+บนส6ด จัะอย"+ด�านบน Layer ด�านล็+างจัะถ"กบ�งด�วย Layer ด�านบน

-เราสามารถย�าย Layer ด�านบนมาด�านล็+างได� ด�วยการล็าก Layer แล็ะวางในตาแหน+งทำ��ต�องการ

-การป0ด Layer (ช้��วคราว) สามารถป0ดโดยการคล็�กป6?มร"ปดวงตา

Page 13: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

-การล็บ Layer เป-นการถาวร สามารถคล็�กเล็�อก Layer น� นๆ แล็ะกดป6?ม delete ได�เล็ย

ว*ธี�ต*ดีต�(ง Brushes ใน่ Photoshop CS

Brushes ใน่ Photoshop ค'ออะไร

สามารถแปล็ได�ตรงต�วเล็ย คาว+า Brushes ข้อง Photoshop ก�ค�อแปรงทำาส� น� นเอง เราสามารถเล็�อกข้นาดข้องแปล็งทำาส�ได�ด�วย แต+ทำ��เด�ดกว+าน� นค�อ เราสามารถเล็�อกแปรงเป-นร"ปภาพิต+างๆ ได� เช้+น แปรงร"ปต�นไม� ร"ปส�ตว� หร�อส�ญ่ล็�กษณ�อะไรก�ได�ดวย  โดยปกต� Photoshop จัะม�แปรงแถมมาให�แล็�วบางส+วน ซึ่%�งเราสามารถใช้�งานได�ทำ�นทำ� แต+ถ%งอย+างไรเราสามารถหา download แปรงทำาส� หร�อ Brushes เพิ��มเต�มได�อ�กด�วย เอาไว�จัะแนะนาให�ในคราวต+อไป

ว*ธี�การต*ดีต�(ง Brushes ใน่ Adobe Photoshop CS3

Page 14: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กเมน" Windows เล็�อก Brushes

3.             หร�อกดป6?ม F5 แทำนได�ด�วย

4.             ใหกดป6?มด�านข้�าง (ข้วาม�อ)

5.             เล็�อกเมน" Load Brushes

6.             เล็�อกไฟ Brushes ตามต�องการ

 

ว*ธี�ปร�บส�ภาพถ�ายอ�ตโน่ม�ต*

ภาพถ�ายสว�างไป ม'ดีไป หร'อส�ไม�สวยแก�ไดี�คร�บ

เวล็าถ+ายร"ปมา หล็ายๆ คนคงร" �ส%กเส�ยดายทำ��ภาพิถ+ายสวยๆ ข้องเรา กล็�บม�ดหร�อแสงสว+างจั�าเก�นไป ไม+ร" �จัะแก�ไข้อย+างไร จัะกล็�บไปถ+ายใหม+ก�ใช้+ทำ��  ไม+ต�องปวดห�วอ�กต+อด�วย ด�วยเคร��องม�อสาเร�จัร"ปข้อง Photoshop ช้+วยให�ค6ณสามารถปร�บแสง ปร�บส�ได�ง+ายๆ เพิ�ยงคล็�กเด�ยว คล็�กเด�ยวจัร�งๆ คร�บ ถ�าไม+เช้��อล็องด"ว�ธี�ทำาได�เล็ยคร�บ

ว*ธี�ปร�บแสงและส�ใน่ Photoshop

Page 15: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กร"ปภาพิทำ��ม�ป;ญ่หาเร��องแสง หร�อส�

3.             คล็�กเล็�อกเคร��องม�อ Image Adjustments

4.             เล็�อกปร�บแต+งแบบอ�ตโนม�ต�ได� 3 อย+าง ค�อ

o    Auto Levels - ปร�บเร��องไล็+ล็าด�บข้องแสงส�

o    Auto Contrast - ปร�บเร��องแสดงสว+าง

o    Auto Color - ปร�บเร��องส�

ว*ธี�ใส�ข้อบข้องต�วอ�กษรใน่ Photoshop

อ�กหน่1�งว*ธี�ตกแต�งต�วอ�กษรดี�วย Photoshop

อ�กหน%�งเทำคน�คสาหร�บการตกแต+งข้�อความ หร�อต�วอ�กษร น��นหน%�งค�อการใส+ข้อบข้องต�วอ�กษร ซึ่%�งทำา ให�ต�วอ�กษรด"น+าสนใจัมากย��งข้% น โปรแกรม photoshop ได�เตร�ยมเคร��องม�อช้+วยในการใส+ข้อบข้องต�ว

Page 16: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

อ�กษรไว�ให�แล็�ว แล็ะสามารถใช้�งานได�ง+ายๆ นอกจัากน� ย�งสามารถเปล็��ยนส�ได�ด�วย

ว*ธี�การเพ*�มข้อบข้องต�วอ�กษร

1.             สร�างงานข้% นมาใหม+

2.             คล็�กเล็�อกเคร��องม�อ "Type Tool"

3.             คล็�กไปบร�เวณพิ� นทำ��ว+างๆ ข้องเอกสาร

4.             พิ�มพิ�ข้�อความทำ��ต�องการ เช้+น  Stroke Text เป-นต�น

5.             มาทำ��หน�าต+าง layers คล็�กข้วาทำ�� Layers ข้�อความน�

Page 17: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

6.             เล็�อกคาส��ง Blending Options

7.             คล็�กเล็�อก Stroke แล็ะกดป6?ม OK

8.             ถ�าต�องการปร�บแต+งข้อบในร"ปแบบอ��นๆ ให�คล็�ก Stroke

9.             รายล็ะเอ�ยดข้องหน�าต+างด�านข้วาจัะเปล็��ยนไป

o    ถ�าต�องการปร�บความเข้�มข้องข้อบ ให�คล็�ก Opacity

o    ถ�าต�องการปร�บความหนาข้องข้อบ ให�คล็�กเล็�อก Size

o    ถ�าต�องการเปล็��ยนส�ข้องเงา ให�คล็�กเล็�อกกล็+องส�หร�อ Color

10.      คล็�ก OK เพิ��อย�นย�นการแก�ไข้

แปลงภาพข้าวดี�าเป2น่ภาพส�ใน่ Photoshop

ว�ธี�แปล็งภาพิส�เป-นข้าวดา ทำาได�ง+ายใน Photoshop เพิ�ยงคล็�กเป0ดไฟล็�ร"ปภาพิแล็ะคล็�กเมน" Image เล็�อก Mode เล็�อก Gray Scale แต+ถ�าต�องการทำาภาพิข้าวดา เป-นส� ต�องว�ธี�น�

Page 18: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ว*ธี�แ ป ล ง ภ า พ ข้ า ว ดี�า เ ป2 น่ ภ า พ ส� ดี� ว ย Photoshop

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กร"ปภาพิข้าวดาทำ��ต�องการ

3.             คล็�กเล็�อกเคร��องม�อ Color Replacement Tool (อย"+ในกล็6+มเคร��องม�อเด�ยวก�บ Brush Tool)

4.             คล็�กเล็�อกส�ทำ��ต�องการ จัากไอคอน Set foreground color / Set background Color

5.             ทำาส�ไปบร�เวณร"ปภาพิข้าวดาทำ��ต�องการ ภาพิจัะเปล็��ยนเป-นส�ทำ��เล็�อก

6.             ในส+วนข้องส�ข้าว จัะไม+ม�การเปล็��ยนส�

7.             เราสามารถเล็�อกทำาส�อ��นๆ ได�มากกว+าหน%�งส�ได�

ว*ธี�ใส�เงาข้องต�วอ�กษรใน่ Photoshop

ส�าหร�บผู้��ใช้�งาน่ Photoshop ท�กท�าน่

Page 19: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

การตกแต+งข้�อความ หร�อต�วอ�กษร ส��งสาค�ญ่อย+างหน%�งค�อการใส+เงา ซึ่%� งทำา ให�ต� วอ� กษรด"ม�ม�ต� แล็ะน+ าสนใจัมากย�� งข้% น โปรแกรม photoshop ได�เตร�ยมเคร��องม�อช้+วยในการเพิ��มเงาข้องต�วอ�กษรไว�ให�แล็�ว แล็ะสามารถใช้�งานได�ง+ายๆ นอกจัากน� ย�งสามารถเล็�อกส� แล็ะความเข้�มข้องเงาได�อ�กด�วย

ว*ธี�การใส�เงาให�ก�บต�วอ�กษร

1.             สร�างงานข้% นมาใหม+

2.             คล็�กเล็�อกเคร��องม�อ "Type Tool"

3.             คล็�กไปบร�เวณพิ� นทำ��ว+างๆ ข้องเอกสาร

4.             พิ�มพิ�ข้�อความทำ��ต�องการ เช้+น  Shadow Text เป-นต�น

5.             มาทำ��หน�าต+าง layers คล็�กข้วาทำ�� Layers ข้�อความน�

6.             เล็�อกคาส��ง Blending Options

Page 20: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

7.             คล็�กเล็�อก Drop Shadow แล็ะกดป6?ม OK

8.             ถ�าต�องการปร�บแต+งเงาในร"ปแบบอ�� นๆ ให�คล็�ก Drop Shadow

9.             รายล็ะเอ�ยดข้องหน�าต+างด�านข้วาจัะเปล็��ยนไป

o    ถ�าต�องการปร�บความห+างข้องเงาก�บต�วอ�กษร ให�คล็�ก Distance

o    ถ�าต�องการปร�บความหนาข้องเงา ให�คล็�กเล็�อก Size

o    ถ�าต�องการเปล็��ยนส�ข้องเงา ให�คล็�กเล็�อกกล็+องส�หร�อ Color

10.      คล็�ก OK เพิ��อย�นย�นการแก�ไข้

ว* ธี� ส ร� า ง เ ว3 บ แ ก ล เ ล อ ร�� ใ น่ พ ร* บ ต า ใ น่ Photoshop

ส�าหร�บเว3บมาสเตอร+โดียเฉพาะ

อ�กหน%�งความสามารถใหม+ๆ ข้อง Photoshop ทำ��หล็ายๆ คนสนใจั น��นค�อการทำาง Web Gallery โดยเราสามารถนากล็6+มข้องร"ปภาพิมาทำาเป-น Gallery โดยโปรแกรมจัะม�การทำาร"ปภาพิข้นาดเล็�กให�คล็�กเพิ��อด"ร"ปภาพิข้นาดใหญ่+   โดยไม+จัา เป-นต�องทำา ทำ�ล็ะภาพิ โปรแกรม Photoshop จัะจั�ดทำาให�อ�ตโนม�ต� แถมม�หล็ากหล็ายร"ปแบบให�เล็�อกอ�กด�วย พิร�อมนาไปใช้�งานบนเว�บไซึ่ต�ข้องค6ณได�ทำ�นทำ� หร�อจัะเป0ดผู้+านโปรแกรม Internet Explorer ได�ด�วย

ว*ธี�การท�า Web Gallery อ�ตโน่ม�ต*

Page 21: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กเมน" File

3.             คล็�กเล็�อกเมน"ย+อย Automate

4.             คล็�กเล็�อกเมน"ย+อย Web Photo Gallery จัะได�หน�าต+าง Web Photo Gallery

5.             เล็�อกร"ปแบบจัากห�วข้�อ Styles ใส+ช้��อ Email ข้องเรา

6.             ในห�วข้�อ Source Images ให�เล็�อก Folder ทำ��เก�บร"ปภาพิทำ��ต�องการทำา Gallery

7.             คล็�กป6?ม Destination เพิ��อเล็�อก  Folder ทำ��ต�องการจั�ดเก�บไฟล็�หล็�งจัากทำาเสร�จั

8.             คล็�กป6?ม Options ถ�าต�องการปร�บแต+งเพิ��มเต�ม (แนะนาให�ทำาทำ�หล็�ง จัะได�ไม+ส�บสน)

Page 22: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

9.             คล็�ก OK เพิ��อย�นย�นร"ปแบบทำ��ต�องการ

10.      รอส�กคร" + โปรแกรมจัะเร��มจั�ดทำา Gallery

11.      หล็�งจัากเสร�จัแล็�ว โปรแกรมจัะเป0ดหน�า Web Photo Gallery ให�ทำ�นทำ�

12.      เราสามารถนา ข้�อม"ล็ทำ� งหมดใน Folder ทำ��สร�างข้% นโดย Photoshop แล็ะ copy ไปย�งเว�บไซึ่ต�ข้องเราได�ทำ�นทำ� ไฟล็�เร��มต�นค�อ Index.htm หร�อ Index.html

ว*ธี�พ*มพ+ภาพแบบร�าน่ถ�ายร�ปใน่ Photoshop

ว*ธี�การพ*มพ+ภาพถ�ายแบบร�าน่ถ�ายร�ป

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กเมน" File

3.             คล็�กเล็�อกเมน"ย+อย Automate

Page 23: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

4.             คล็�กเล็�อกเมน"ย+อย Picture Package จัะได�หน�าต+าง Picture Package

5.             คล็�กป6?ม Browse เพิ��อเล็�อกร"ปภาพิทำ��ต�องการ

6.             จัากน� นคล็�ก Layout หร�อร"ปแบบการพิ�มพิ�ทำ��ต�องการ

7.             คล็�ก OK เพิ��อย�นย�นร"ปแบบทำ��ต�องการ

8.             รอส�กคร" + โปรแกรมจัะเร��มปร�บแต+งภาพิอ�ตโนม�ต�

9.             หล็�งจัากเสร�จัแล็�ว สามารถพิ�มพิ�ได�ทำ�นทำ�

ปร�บแต�งร�ปภาพแบบม'ออาช้�พดี�วย Filter

Photoshop Filter ค'ออะไร

Filter ค�อเคร��องม�อช้น�ดหน%�ง ทำ��ช้+วยในการปร�บเปล็��ยนร"ปภาพิ ใส+ effects ให�ก�บร"ปภาพิเพิ�� อสร�างความน+าสนใจัอ�กร"ปแบบหน%�ง ในโปรแกรม Photoshop เองได�ม� Filter ให�เราสร�างใช้�งานได�ทำ�นทำ� โดยไม+จัาเป-นต�องม�ความร" �ในการตกแต+งแต+อย+างใด เพิ�ยงแค+เล็�อกบร�เวณข้องร"ปภาพิทำ��เราต�องการตกแต+ง จัากน� นเล็�อกร"ปแบบ Filter ทำ��ต�องการ 

ว*ธี�การใส� Filter ให�ก�บร�ปภาพ

Page 24: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

1.             เป0ดโปรแกรม Photoshop

2.             เล็�อกร"ปภาพิทำ��ต�องการ

3.             คล็�กเมน" Filter

4.             ให�ล็องเล็�อกห�วข้�อ Artistic

5.             เล็�อกคาส��ง Colored Pencil

6.             ให�ทำดล็องปร�บเปล็�ยนคาส��งย+อยต+างๆ เพิ��มเต�มได�อ�ก เช้+น

o    Pencil Width

o    Stroke Pressure

o    Paper Brightness

7.             คล็�กป6?ม OK เม��อปร�บแต+งเป-นทำ��พิอใจัแล็�ว

สร�างอ�กษรน่�น่ใน่ Photoshop

ร�ปแบบต�วอ�กษรน่�น่ สไตล+ Emboss

Page 25: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ว�ธี�ทำ��จัะสร�างต�วอ�กษรน"นในร"ปแบบทำ��เร�ยกว+า Emboss น� น เราสามารถใช้�โปรแกรม Adobe Photoshop เวอร�ช้��นเก+าๆ เช้+น Photoshop 7 เป-นต�น สามารถทำาได�เช้+นก�น โดยใช้�คาส��งทำ��อย"+ใน Blending Options ทำ��เล็�อกจัาก Layer ข้�อความน� นๆ (ถ�า Layer ไม+แสดง ให�กดป6?ม F7) สาหร�บรายล็ะเอ�ยดข้� นตอนการทำา สามารถทำาได�ด�งน�

ข้�(น่ตอน่การสร�างอ�กษรน่�น่ใน่ Photoshop

1.             เป0ดโปรแกรม Adobe Photoshp แล็ะเล็�อกไฟล็� New

Page 26: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

2.             คล็�กเล็�อกเคร��องต�ว "Type Tool" หร�อส�ญ่ล็�กษณ�ต�วอ�กษร "T"

3.             คล็�กทำ��เอกสารว+างๆ แล็ะพิ�มพิ�ข้�อความทำ��ต�องการ

4.             ใส+ส�ตามต�องการ

5.             จัากน� น ให�ด"ทำ�� หน� าต+ าง 'Layer" คล็�กข้วาทำ�� Layer ข้องข้�อความทำ��พิ�มพิ�ไว� เล็�อกคาส��ง "Blending Options"

6.             จัะได�หน�าต+างแสดงรายล็ะเอ�ยดต+างๆ ข้อง Layer Style ด�งภาพิประกอบด�านบน

7.             ให�คล็�กเล็�อกให�ม�เคร�องหมายถ"กหน�าข้�อความ

o    Bevel and Emboss

o    Contour

8.             จัากน� นคล็�กป6?ม OK

ส ร� า ง ข้� อ ค ว า ม จ า ก พ'( น่ ข้ อ ง ร� ป ภ า พ Photoshop

สร�างข้�อความหร'อต�วอ�กษรใน่ Adobe Photoshop

ปกต�เราสามารถสร�างข้�อความ หร�อต�วอ�กษรสวยๆ ได�ใน Adobe Photoshop ด�วยการเล็�อกคาส��ง "Type Tool" ซึ่%�งจัะได�ส�ตามทำ��เราเล็�อกไว� แต+ถ�าเราต�องการให�ส�ข้องต�วอ�กษรเป-นภาพิ background ข้องร"ปภาพิข้องเราหล็ะ จัะทำาอย+างไรได� 

Page 27: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ว*ธี�น่�าร�ปภาพมาเป2น่พ'(น่หล�งข้องต�วอ�กษร

1.             เป0ดไฟล็�ร"ปภาพิทำ��ต�องการนามาเป-นฉากหล็�ง

2.             เล็�อกคาส��ง "Type Tool" เพิ��อพิ�มพิ�ต�วอ�กษร แต+ให�เราเล็�อกการพิ�มพิ�แบบร+าง "Horizontal Type Mask Tool"

3.             คล็�กทำ��ร"ปภาพิ (ส�ภาพิจัะเปล็��ยนเป-นส�แดงออกส�ม)

4.             พิ�มพิ�ข้�อความทำ��ต�องการ (แนะนาให�เล็�อก Font ทำ��ม�ต�วอ�กษรแบบหนาๆ)

5.             จัากน� นให�คล็�กทำ��ไอคอน Move Tool (ร"ปล็"กศึรบนส6ด)

Page 28: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

6.             จัะเห�นร"ปว+า ม�ต�วอ�กษรแบบร+าง กระพิร�บอย"+

7.             เราสามารถคล็�กแล็ะล็ากข้�อความกระพิร�บน� ไปวางทำ��ใดก�ได� หร�อ copy แล็ะ Paste ในเอกสารใหม+ได�ทำ�นทำ�

ปร�บแต�งส�ข้องร�ปภาพแบบเน่�ยน่ๆ

เทคน่*คง�ายๆ ใน่การปร�บเปล��ยน่ส�ข้องร�ปภาพ

อ�กหน%�งว�ธี�ในการตกแต+งร"ปภาพิทำ��หล็ายๆ น�ยมใช้�ก�น ก�ค�อการเปล็��ยนส�ข้องร"ปภาพิ เช้+น การเปล็��ยนส�ผู้ม, ส�ข้องส��งข้องต+างๆ, ส�ข้องดอกไม� เป-นต�น โดยปกต� ถ�าเราใช้�คาส��ง Fill (เต�มส�) จัะทำาให�ส�ทำ��ได�ม�ความแข้�งกระทำ��ง ไม+ม�ม�ต� ด�งน� น เราควรใช้�เทำคน�คการ replace color แทำนการ Fill

ว*ธี�การ Replace Color ร�ปภาพ

Page 29: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

1.             เป0ดโปรแกรม Adobe Photoshop

2.             คล็�กเมน" Images

3.             เล็�อก Adjustments

4.             เล็�อกห�วข้�อ Replace Color

5.             จัะได�หน�าต+างการปร�บค+า ให�เร��มจัากการ เอาหล็อดด"ดส� เล็�อกส�ทำ��ต�องการ

6.             จัากน� นด"ต�วอย+างส�ทำ��เล็�อกในช้+อง preview

7.             ถ�าย�งไม+ครอบคล็6มส�ทำ��ต�องการ ให�คล็�กปร�บ Fuzziness มาทำางข้วาม�อ

Page 30: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

8.            ถ�าเล็�อกส�ได�ครอบคล็6มแล็�วให�เล็�อกปร�บเปล็��ยนส�โดยการคล็�กห�วข้�อด�านล็+าง"Replacement"

9.             ทำ ด ล็ อ ง ป ร�บ ทำ� ล็ ะ ข้� อ (ม� 3 ข้� อ ค� อ Hue, Saturation, Lightness)

10.      คล็�กป6?ม OK เพิ��อย�นย�น

ว*ธี�บ�น่ท1กไฟล+ใน่ Photoshop ร�ปแบบต�างๆ หล็�งจัากม�การแก�ไข้หร�อตกแต+งร"ปภาพิด�วย Photoshop แล็�ว เราสามารถบ�นทำ%กร"ปภาพิในร"ปแบบ หร�อ Format ต+างๆ ได�หล็ายๆ ประเภทำด�งต+อไปน�

ไฟล+ประเภทต�างๆ ข้อง Photoshop

1.             PSD ไฟล+ ค'อไฟล+มาตรฐาน่ข้อง Photoshop ถ� า เราต�องการแก�ไข้หร�อเปล็��ยนแปล็งร"ปภาพิในคร� งต+อไป เราจัาเป-นต�องบ�นทำ%ก หร�อ Save ในร"ปแบบข้อง PSD เทำาน� น  Layer ต+างก�ย�งอย"+คร�บด�วย (การใช้�งานเพิ�ยงคล็�กเล็�อก File แล็ะคล็�กคาส��ง Save)

2.             Save for Web & Devices เป-นการบ�นทำ%กเพิ��อใช้�สาหร�บใช้�งานบนเว�บ หร�อส��ออ��นๆ สามารถบ�นทำ%กเป-นไฟล็�ประเภทำ Jpeg, GIF, PNG, WBMP เป-นต�น ไฟล็�ทำ��ได�ม�ข้นาดค+อนข้�างเล็�ก (การใช้�งานให�คล็�ก เล็� อกเมน" File เล็� อกคา ส��ง Save for Web & Devices)

3.             ไฟล+ประเภทอ'�น่ๆ เช้+น Jpeg, PNG, TIFF, PCX, GIF เป-นต�น สามารถส��งบ�นทำ%กได�โดยการเร�ยกใช้�คาส��งจัากเมน" File เล็�อกคา

Page 31: 02 บทที่ 2-เอกสารที่เกี่ยวข้อง

ส��ง Save หร�อ Save as (สาหร�บข้�อแตกต+างข้องการบ�นทำ%กด�วยว�ธี�น� ก�บบ�นทำ%กด�วย Save For Web & Devices ก�ค�อ ไฟล็�ทำ��บ�นทำ%กด�วย Save, Save as ไฟล็�ทำ�� ได�จัะม�ข้นาดใหญ่+กว+า แล็ะค6ณภาพิส"งกว+า

-------------------------------------------------------------------------------------------------------------------------------------------------------

แหล�งท��มา

http://www.showwallpaper.com/photoshop.php

http://www.it-guides.com/index.php/training-a-tutorial/69-adobe-photoshop-tutorial/390-replace-color-photoshop-cs