GIMP

7,588 views

Published on

แนะนำการใช้งานโปรแกรม GIMP สร้างสรรค์ออกแบบงานกราฟิก

Published in: Technology
4 Comments
0 Likes
Statistics
Notes
  • ขอบคุณมากครับอาจารย์
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ขอบคุณค่ะ จนำไปใช้กับนักเรียนค่ะ
    ครูหนุ่ย
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ขอบคุณมากครับ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ขอบคุณค่ะสำหรับความรู้ที่อาจารย์เผยแผ่ให้ ขออนูณาตนำไปพิมพ์ดูประกอบการสอนให้เด็กๆ ได้มั้ยค่ะอยากให้เขาใช้โปรแกรมที่ไม่ละเมิดลิขสิทธิ์บ้าง
    ครู กทม.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
7,588
On SlideShare
0
From Embeds
0
Number of Embeds
1,114
Actions
Shares
0
Downloads
102
Comments
4
Likes
0
Embeds 0
No embeds

No notes for slide

GIMP

  1. 1. GIMP : Graphics Design for Web บุญเลิศ อรุณพิบูลย์ นักวิชาการ 1 ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ ( สวทช .) ‏ [email_address] http://www.stks.or.th
  2. 2. GIMP <ul><li>Open Source Software ที่ช่วยในงานออกแบบ </li></ul><ul><li>ลักษณะเดียวกับโปรแกรม Adobe PhotoShop </li></ul><ul><li>ทำงานได้กับแฟ้มเอกสาร .psd </li></ul><ul><li>สนับสนุนการสร้างสรรค์งานกราฟิกที่หลากหลาย โดยเฉพาะงานกราฟิกสำหรับเว็บ </li></ul><ul><ul><li>จุดเด่นการสร้างภาพโปร่งใสฟอร์แมต PNG </li></ul></ul>
  3. 3. ติดตั้งโปรแกรม <ul><li>ดาวน์โหลด GIMP และ GTK+ จากเว็บไซต์ http://www.gimp.org/windows/ </li></ul><ul><li>ติดตั้ง GTK+ ก่อน </li></ul><ul><li>จากนั้นติดตั้ง GIMP </li></ul>
  4. 4. หน้าต่างโปรแกรม <ul><li>หน้าต่างแบบลอย (Floating Window) ‏ </li></ul>Image Windows Toolbar Options Dialog
  5. 5. เปิดไฟล์ภาพ <ul><li>เลือกคำสั่ง File, Open... </li></ul>
  6. 6. ภาพสำหรับเว็บ <ul><li>JPG </li></ul><ul><ul><li>ภาพสีมาก </li></ul></ul><ul><ul><li>โหมด RGB </li></ul></ul><ul><ul><li>Resolution 72 dpi </li></ul></ul><ul><ul><li>Quality 60 - 90 </li></ul></ul><ul><ul><li>Progressive Effect </li></ul></ul><ul><li>GIF </li></ul><ul><ul><li>ภาพสีน้อย </li></ul></ul><ul><ul><li>โหมด Indexed Color </li></ul></ul><ul><ul><li>Resolution 72 dpi </li></ul></ul><ul><ul><li>Interlaced Effect </li></ul></ul>
  7. 7. RGB model <ul><li>ชุดสีบนจอภาพคอมพิวเตอร์ </li></ul><ul><li>Red ( แดง ), Green ( เขียว ), Blue ( น้ำเงิน ) ‏ </li></ul>Red Green Blue
  8. 8. CMYK model <ul><li>ชุดสีสำหรับเอกสารงานพิมพ์ , เครื่องพิมพ์ </li></ul><ul><li>Cyan ( ฟ้า ), Magenta ( บานเย็น ), Yellow ( เหลือง ), blacK ( ดำ ) ‏ </li></ul>
  9. 9. GIF / JPEG
  10. 10. GIF or JPEG?
  11. 11. ภาพสำหรับเว็บ <ul><li>PNG </li></ul><ul><ul><li>ฟอร์แมตภาพใหม่ ที่นำความสามารถของ GIF และ JPG มาผสมรวมกัน </li></ul></ul><ul><li>TIF </li></ul><ul><ul><li>ฟอร์แมตภาพเฉพาะสำหรับการทำห้องสมุดดิจิทัล </li></ul></ul>
  12. 12. มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels Size 72 dpi 72 dpi Resolution PNG PNG / JPEG / GIF / TIF Format Preview Website
  13. 13. 72/300 dpi <ul><li>72 dpi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch </li></ul><ul><li>300 dpi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch </li></ul>
  14. 14. Progressive & Interlaced Effect รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
  15. 15. GIF <ul><li>Graphics Interlace File </li></ul><ul><ul><li>จำนวนสีและความละเอียดของภาพไม่สูงมากนัก </li></ul></ul><ul><ul><li>ต้องการพื้นแบบโปร่งใส </li></ul></ul><ul><ul><li>ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด (Interlaced) ‏ </li></ul></ul><ul><ul><li>ควบคุมจำนวนสีที่ต้องการได้ (Bit Depth) ‏ </li></ul></ul><ul><ul><li>ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว </li></ul></ul><ul><ul><li>ส่วนขยายคือ .gif </li></ul></ul>
  16. 16. Bit Depth 256 colors 16 colors 2 colors 1-bit 4 colors 2-bit 8 colors 3-bit 16 colors 4-bit 32 colors 5-bit 64 colors 6-bit 128 colors 7-bit 256 colors 8-bit 32.8 thousand colors 15-bit 65.5 thousand colors 16-bit 16.7 million colors 24-bit 16.7 million colors + 8 bit grayscale mask 32-bit
  17. 17. Bit depth 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k
  18. 18. Transparent GIFs <ul><li>การทำให้พื้นของภาพ เป็นพื้นโปร่งใส </li></ul>
  19. 19. Animation GIF
  20. 20. JPEG <ul><li>Joint Photographer's Experts Group </li></ul><ul><ul><li>เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ </li></ul></ul><ul><ul><li>สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม (File Compression) </li></ul></ul><ul><ul><li>สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive </li></ul></ul><ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ .jpg หรือ .jpeg </li></ul></ul>
  21. 21. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality
  22. 22. PNG <ul><li>Portable Network Graphics </li></ul><ul><ul><li>รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต </li></ul></ul><ul><ul><li>สามารถแสดงผลได้ในระบบสีเต็มพิกัด (True Color), มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ (Transparent) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด (Interlaced) </li></ul></ul><ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ .png </li></ul></ul>
  23. 23. TIFF <ul><li>Tagged-Image File Format </li></ul><ul><ul><li>รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ </li></ul></ul><ul><ul><li>เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ </li></ul></ul><ul><ul><li>ปัจจุบันนำฟอร์แมตนี้มาใช้กับเอกสารเว็บด้วย </li></ul></ul><ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ .tif </li></ul></ul>
  24. 24. โหมดภาพ และขนาดภาพ 640 x 480 ขนาดของภาพ โหมดภาพ RGB
  25. 25. เปลี่ยนโหมดภาพ <ul><li>เลือกคำสั่ง Image, Mode... </li></ul>
  26. 26. ปรับขนาดภาพ (Image Size) ‏ <ul><li>เลือกคำสั่ง Image, Scale Image... </li></ul>ปรับค่า Width หรือ Height โดยให้ระวังหน่วย ควรเป็น pixels คลิกที่รูปโซ่ เพื่อยกเลิกความสัมพันธ์ ของค่าความกว้างและ ความสูงของภาพ
  27. 27. บันทึกภาพ JPEG <ul><li>เลือกคำสั่ง File, Save As... </li></ul>เลือกไดร์ฟ / โฟลเดอร์ เลือกประเภทของไฟล์ภาพ
  28. 28. บันทึกภาพ JPEG <ul><li>เลือกคุณภาพ (Quality) ‏ </li></ul><ul><li>เลือก Progessive </li></ul>
  29. 29. ตัดภาพ (Crop) ‏ <ul><li>เลือกเครื่องมือ Crop </li></ul><ul><li>กำหนดขอบเขตสำหรับภาพที่ต้องการ </li></ul><ul><ul><li>สามารถย่อ / ขยาย หรือย้ายตำแหน่งพื้นที่ได้ </li></ul></ul><ul><li>เมื่อได้พื้นที่แล้วให้คลิกเมาส์ 1 ครั้ง โปรแกรมจะตัดภาพให้อัตโนมัติตามขนาดพื้นที่ที่ำกำหนด </li></ul><ul><ul><li>ยกเลิกการตัดภาพได้ด้วยปุ่มคีย์ลัด <Ctrl><Z> </li></ul></ul>
  30. 30. กำหนดเส้นควบคุมการตัดภาพ <ul><li>เส้นควบคุมในการตัดภาพ หรือทำงานกับภาพ เรียกว่า Guide </li></ul>นำเมาส์ไปชี้ใน ไม้บรรทัด (Ruler) ‏ แล้วลากเส้นออกมา สามารถปรับตำแหน่ง หรือดึงกลับไปเก็บได้ ยกเลิกเส้น Guide เลือก Image, Guides, Remove All Guides
  31. 31. หมุนภาพ พลิกภาพ <ul><li>เลือกคำสั่ง Image, Transform, ... </li></ul>
  32. 32. ตัึดสีพื้นภาพ
  33. 33. ตัึดสีพื้นภาพ <ul><li>เปิดไฟล์ภาพที่ต้องการตัดสี </li></ul><ul><li>คลิกเลือกเครื่องมือ Select regions by Color </li></ul><ul><li>เลือกโหมดการเลือกเป็น Add จาก Option Tab </li></ul>
  34. 34. ตัึดสีพื้นภาพ <ul><li>นำเมาส์ไปคลิกตำแหน่งสีของพื้นภาพที่ต้องการเลือก </li></ul><ul><li>สามารถคลิกได้หลายครั้ง เพื่อเลือกเฉดสีอื่นๆ ที่ต้องการ </li></ul><ul><li>ลบพื้นภาพได้โดยการกดปุ่ม <Delete> จะปรากฏ สีใหม่ของพื้นภาพตามค่าสี Background </li></ul>Foreground Color Background Color
  35. 35. ยกเลิกขั้นตอนการทำงาน <ul><li>การทำงานที่ทำผ่านไปแล้ว จะบันทึกไว้ Undo History Dialog </li></ul><ul><li>สามารถยกเลิกการทำงานก่อนๆ ได้โดยเปิด Undo History Dialog ด้วยคำสั่ง Edit, Undo History... </li></ul><ul><li>คลิกเลือกขั้นตอนที่ต้องการยกเลิก โดยขั้นตอนครั้งล่าสุดจะอยู่ด้านล่าง </li></ul>
  36. 36. ภาพ Transparent <ul><li>ภาพ Transparent คือภาพที่ไม่มีพื้นภาพ ( พื้นโปร่งใส ) ‏ </li></ul><ul><li>ขั้นตอนการทำภาพพื้นโปร่งใส จากภาพสีใช้ขั้นตอนเดียวกับการตัดสีพื้นภาพ แต่ก่อนกดปุ่ม <Delete> เพื่อลบพื้นภาพเดิม </li></ul><ul><ul><li>กดปุ่มขวาของเมาส์ที่ภาพ </li></ul></ul><ul><ul><li>เลือกคำสั่ง Layer, Transparency, Add Alpha Channel </li></ul></ul>
  37. 37. ภาพ Transparent
  38. 38. ภาพ Transparent
  39. 39. บันทึกภาพ GIF Transparent <ul><li>ภาพที่มีพื้นโปร่งใส จะต้องบันทึกในฟอร์แมต GIF ดังนี้ </li></ul><ul><li>เลือกคำสั่ง File, Save As... </li></ul><ul><li>เลือกฟอร์แมตภาพเป็น GIF </li></ul><ul><li>เลือกไดร์ฟ / โฟลเดอร์ </li></ul><ul><li>กำหนดชื่อไฟล์ภาพ แล้วคลิกปุ่ม Save </li></ul>
  40. 40. บันทึกภาพ GIF Transparent <ul><li>โปรแกรมจะแสดงให้ทราบว่าจะมีการเปลี่ยนโหมดเป็น Indexed Color </li></ul><ul><li>คลิกปุ่ม Export เพื่อแปลงโหมดสีของภาพ </li></ul>
  41. 41. บันทึกภาพ GIF Transparent <ul><li>กรณีที่ภาพมีขนาดโต ให้คลิกเลือกรายการ Interlace เพื่อแสดงภาพแบบ โครงร่างก่อน </li></ul><ul><li>คลิกปุ่ม Save เพื่อบันทึกภาพ </li></ul>
  42. 42. ภาพขอบมน
  43. 43. ภาพขอบมน <ul><li>เปิดไฟล์ภาพ </li></ul><ul><li>ปรับขนาดภาพตามเหมาะสม </li></ul><ul><li>คลิกเลือกเครื่องมือ Select rectangle regions </li></ul><ul><li>สร้างขอบเขตสำหรับภาพ </li></ul><ul><li>เลือกคำสั่ง Select, Rounded Rectangle... </li></ul>
  44. 44. ภาพขอบมน <ul><li>กำหนดค่าตัวเลขความมน </li></ul><ul><li>คลิกปุ่ม OK </li></ul><ul><li>เลือก Selection ด้านนอก ด้วยคำสั่ง Select, Invert </li></ul><ul><li>กดปุ่ม <Delete> เพื่อ ลบพื้นที่ขอบนอก </li></ul>ยกเลิก Selection ด้วยปุ่ม <Ctrl><Shift><A>
  45. 45. ปรับแต่งภาพ <ul><li>การปรับแต่งความคมชัด สี หรือความสว่างของภาพ จะใช้เมนูคำสั่ง Color, ... </li></ul>
  46. 46. สร้างไฟล์ใหม่ <ul><li>เลือกคำสั่ง File, New... </li></ul><ul><li>ระบุความกว้าง (Width) และความสูง (Height) หน่วยควรเป็น pixels </li></ul><ul><li>คลิก Advanced Options </li></ul><ul><li>เลือก Color space เป็น RGB color </li></ul>
  47. 47. ตัวอักษรเงา <ul><li>สร้างไฟล์ใหม่ </li></ul><ul><li>เลือกเครื่องมือ Text </li></ul><ul><li>คลิกเมาส์ ณ ตำแหน่งที่ต้องการ พิมพ์ข้อความ </li></ul><ul><li>พิมพ์ข้อความใน GIMP Text Editor </li></ul>
  48. 48. ตัวอักษรเงา <ul><li>กำหนดลักษณะตัวอักษณจาก Text Option </li></ul><ul><li>ย้ายตำแหน่งข้อความ โดยเปลี่ยนไปเลือก เครื่องมือ Move </li></ul>
  49. 49. ตัวอักษรเงา <ul><li>เปิดใ้้ช้งาน Layer Dialog จะพบว่ามีชั้นเลเยอร์ 2 ชั้น </li></ul><ul><li>คลิกปุ่มขวาของเมาส์ที่เลเยอร์ข้อความ เลือกคำสั่ง Duplicate Layer </li></ul>
  50. 50. ตัวอักษรเงา <ul><li>คลิกเืลือกเลเยอร์ตัวอักษร เลเยอร์ล่าง </li></ul><ul><li>เืลือกคำสั่ง Filter, Blur, Gaussian Blur... ปรับค่าความเบลอ เพื่อให้ได้ตัวอักษรที่มีลักษณะเป็นเงา </li></ul><ul><li>เลือกเครื่องมือ Move ย้ายข้อความในเลเยอร์ล่าง ตามต้องการ </li></ul>
  51. 51. Background ลายน้ำ <ul><li>สร้างไฟล์ใหม่ </li></ul><ul><li>เลือกคำสั่ง Filter, Render, Lava </li></ul><ul><li>เลือก Gradient เป็น Horizon 2 </li></ul><ul><li>คลิกปุ่ม OK </li></ul>
  52. 52. Layer <ul><li>การทำงานของ GIMP ให้ยึดหลัก 1 วัตถุต่อ 1 เลเยอร์ </li></ul><ul><li>เลเยอร์พื้นฐานคือ Background ไม่ควรวาดในเลเยอร์นี้ </li></ul>
  53. 53. ออกแบบ Pattern <ul><li>สร้างไฟล์ใหม่ขนาด 10 x 10 pxs </li></ul><ul><li>ขยายจอภาพระดับ 1600% (View, Zoom, ...) ‏ </li></ul><ul><li>เลือก Pencil ขนาด 1 x 1 </li></ul><ul><li>วาด Pattern ตามต้องการ </li></ul>
  54. 54. ออกแบบ Pattern <ul><li>บันทึก Pattern ด้วยคำสั่ง File, Save As </li></ul><ul><li>เลือกโฟลเดอร์เป็น </li></ul><ul><li>เลือกฟอร์แมตเป็น GIMP Pattern (.pat) ‏ </li></ul>
  55. 55. ใช้งาน Pattern <ul><li>สร้างไฟล์ใหม่ </li></ul><ul><li>เปิด Pattern Dialog (Dialog, Pattern) ‏ </li></ul><ul><li>คลิกปุ่ม Refresh patterns </li></ul><ul><li>เลือกคำสั่ง Edit, Fill with Pattern </li></ul>
  56. 56. Path <ul><li>เครื่องมือวาดรูปทรงอิสระ </li></ul><ul><li>วาดเส้นโค้ง </li></ul><ul><li>สร้างไฟล์ใหม่ </li></ul><ul><li>สร้างเลเยอร์ใหม่ แบบ Transparent </li></ul><ul><li>คลิกเลือกเครื่องมือ Path </li></ul><ul><li>คลิกเมาส์ 3 ครั้งดังนี้ </li></ul>ยกเลิกการสร้าง Path ใช้ <Ctrl><Z>
  57. 57. Path - เส้นโค้ง <ul><li>เลื่อนเมาส์มาชี้ที่จุด Handle ตำแหน่งกึ่งกลาง </li></ul><ul><li>กดปุ่ม <Ctrl> ค้างไว้แล้วเลื่อนเมาส์ เพื่อปรับให้เป็นเส้นโค้ง โดยจะมีแกนยึดออกมา 1 เส้น </li></ul><ul><li>เลื่อนเมาส์ไปคลิกที่ปลายของแกน ( ตำแหน่งสี่เหลี่ยม ) เพื่อปรับความโค้งได้อิสระ </li></ul><ul><li>กดปุ่ม <Ctrl> ค้างไว้ พร้อมกับลากเมาส์ออกจากตำแหน่งจุดกึ่งกลาง โดยลากไปอีกด้าน จะปรากฏแกนควบคุมอีก 1 แกน ปรับได้ิอิสระ เช่น </li></ul>
  58. 58. Path - เส้นโค้ง <ul><li>ปรับให้เป็นเส้นโค้งตามต้องการ </li></ul><ul><li>เติมสีให้กับเส้นโดย </li></ul><ul><ul><li>คลิกปุ่ม Stroke path จาก Path Options </li></ul></ul><ul><ul><li>ปรับค่าของเส้น </li></ul></ul><ul><li>คลิกเครื่องมืออื่น เพื่อปิด Path </li></ul>
  59. 59. Path <ul><li>Path ที่สร้างไ้ว้จะปรากฏอยู่ใน Path Dialog ซึ่งมีลักษณะการทำงานคล้ายกับ Layer Dialog </li></ul>
  60. 60. Close Path <ul><li>การสร้าง Path ที่มีลักษณะปิด </li></ul><ul><li>เทคนิคการออกแบบเส้นกรอบ หรือขอบ หรือรูปทรงลักษณะต่างๆ </li></ul>
  61. 61. Close Path <ul><li>สร้าง Path ตามลักษณะปกติ แต่ตำแหน่งสุดท้ายจะต้องมาคลิกที่ตำแหน่งเริ่มต้น พร้อมๆ กับการกดปุ่ม <Ctrl> ค้างไว้ </li></ul><ul><li>เติมสีภายใน Path ได้โดย </li></ul><ul><ul><li>คลิกปุ่ม Create Selection from Path จาก Path Option </li></ul></ul><ul><ul><li>เลือกสีหรือลวดลาย </li></ul></ul><ul><ul><li>เติมสีด้วยคำสั่ง Edit, Fill.. </li></ul></ul>
  62. 62. Path <ul><li>Begin a new path Click </li></ul><ul><li>Begin a new component path Shift + Click </li></ul><ul><li>Add a new anchor path Click </li></ul><ul><li>Add a new anchor between ... Ctrl + Click </li></ul><ul><li>Close path Ctrl + Click </li></ul><ul><li>Delete an anchor path Ctrl + Shift + Click </li></ul>
  63. 63. Path <ul><li>Move single anchor Drag & Drop </li></ul><ul><li>Move entire path Alt + Drag </li></ul><ul><li>Move one handle Ctrl + Drag </li></ul><ul><li>Move both handles Shift + Drag </li></ul>
  64. 64. การประยุกต์ใช้งาน Close Path

×