GIMP : Graphics Design for Web

งานนำเสนอเรื่อง: "GIMP : Graphics Design for Web"— ใบสำเนางานนำเสนอ:

1 GIMP : Graphics Design for Web
บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.)‏

2 GIMP GIMP - GNU Image Manipulation Program Open Source Software
photo retouching image composition image construction Open Source Software ลักษณะการทำงานแบบเดียว กับ Adobe PhotoShop ทำงานได้กับแฟ้มเอกสาร .psd มีหลายคำสั่งแตกต่างกัน สนับสนุนการสร้างสรรค์งานกราฟิกที่หลากหลาย โดยเฉพาะงานกราฟิกสำหรับเว็บ จุดเด่นการสร้างภาพโปร่งใสฟอร์แมต PNG มี Plug-ins สนับสนุนหลายอย่าง Wilber, the GIMP mascot

3 ความสามารถของ GIMP simple paint program
expert quality photo retouching program online batch processing system mass production image renderer image format converter etc.

4 ดาวน์โหลด/ติดตั้งโปรแกรม
ดาวน์โหลด GIMP จากเว็บไซต์

5 หน้าต่างโปรแกรม หน้าต่างแบบลอย (Floating Window)‏ Toolbox Options
Image Windows Dialog

6

7 ปรับเปลี่ยนระบบภาษา คลิกขวาเมาส์ ที่ My Computer
เลือกคำสั่ง Properties คลิกแท็บ Advanced คลิกปุ่ม Environment Variables คลิกปุ่ม New ที่ System Variables ระบุคำสั่ง LANG = en

8 Toolbox & Tool Options ปรับแต่งด้วยคำสั่ง Edit, Preferences, Toolbox
แนะนำให้เปิด Brush/Pattern/Gradient และ Active Image Tool Options หาย เปิดได้จากคำสั่ง Windows, Dockable Dialogs, Tool Options

9 เปิดไฟล์ภาพ เลือกคำสั่ง File, Open... ปุ่ม Add, Remove
เพื่อเลือกโฟลเดอร์ที่ ใช้งานบ่อยๆ

10 เปิดภาพตรงจากเน็ตสู่จอ
File, Open Location

11 Image Window Title Bar Image Menu Menu Button Ruler QuickMask Toggle
Pointer Coordinates Navigation Control Units Menu Zoom Button Status Area

12 Title & Status bar ปรับแก้ไขข้อมูล ที่แสดงผลด้วย คำสั่ง Edit, Preferences, Image Windows, Title & Status

13 ภาพสำหรับเว็บ JPG GIF ภาพสีมาก โหมด RGB Resolution 72 dpi
Quality Progressive Effect GIF ภาพสีน้อย โหมด Indexed Color Resolution 72 dpi Interlaced Effect Transparent Background

14 Progressive & Interlaced Effect
รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ แบบ Progressive การแสดงผลภาพแบบ Interlaced

15 GIF Graphics Interlace File จำนวนสีและความละเอียดของภาพไม่สูงมากนัก
ต้องการพื้นแบบโปร่งใส ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบ ละเอียด (Interlaced)‏ ควบคุมจำนวนสีที่ต้องการได้ (Bit Depth)‏ ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว ส่วนขยายคือ .gif

16 Bit Depth 256 colors 16 colors 2 colors 1-bit 4 colors 2-bit 8 colors
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 256 colors 16 colors

17 Bit depth 24 bit color 16 million colors 1.55 MB 8 bit color
518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k

18 Transparent GIFs การทำให้พื้นของภาพ เป็นพื้นโปร่งใส

19 Animation GIF

20 JPEG Joint Photographer's Experts Group
เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ สามารถกำหนดขนาดของไฟล์ได้ตามความ เหมาะสม (File Compression) สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่า คุณสมบัติ Progressive ส่วนขยายของไฟล์รูปแบบนี้คือ .jpg หรือ .jpeg

21 JPEG File Format JPEG - 60K Max Quality JPEG - 19K Low Quality

22 GIF / JPG

23 GIF or JPG?

24 PNG Portable Network Graphics
รูปแบบล่าสุดในการนำเสนอภาพผ่าน เครือข่ายอินเทอร์เน็ต สามารถแสดงผลได้ในระบบสีเต็มพิกัด (True Color), มีขนาดไฟล์เล็ก และควบคุมคุณภาพ ได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็น พื้นโปร่งใสได้ (Transparent) รวมทั้งการ แสดงผลแบบหยาบสู่ละเอียด (Interlaced) ส่วนขยายของไฟล์รูปแบบนี้คือ .png

25 มาตรฐานรูปแบบการนำเสนอภาพ
 100  100 pixels  300  250 pixels Size 72 dpi Resolution JPG / GIF PNG / JPG / GIF Format Preview Website

26 72/300 dpi 72 dpi = 72 pixels high x 72 pixels wide = pixels in a square inch 300 dpi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

27 RGB model ชุดสีบนจอภาพคอมพิวเตอร์
Red (แดง), Green (เขียว), Blue (น้ำเงิน)‏ Red Green Blue

28 CMYK model ชุดสีสำหรับเอกสารงานพิมพ์, เครื่องพิมพ์
Cyan (ฟ้า), Magenta (บานเย็น), Yellow (เหลือง), blacK (ดำ)‏

29 โหมดภาพ และขนาดภาพ 640 x 480 ขนาดของภาพ โหมดภาพ RGB

30 เปลี่ยนโหมดภาพ เลือกคำสั่ง Image, Mode...

31 ปรับขนาดภาพ (Image Size)‏
เลือกคำสั่ง Image, Scale Image... ปรับค่า Width หรือ Height โดยให้ระวังหน่วย ควรเป็น pixels คลิกที่รูปโซ่ เพื่อยกเลิกความสัมพันธ์ ของค่าความกว้างและ ความสูงของภาพ

32 Interpolation กระบวนการคำนวณทางคณิตศาสตร์ของ GIMP เพื่อคํานวณ และสร้าง Pixels ขึ้นมาใหม่ตามจํานวน Pixels ที่เปลี่ยนแปลง เมื่อมีการใช้คำสั่งปรับขนาดภาพ โดยเฉพาะการขยายภาพ เล็กให้มีขนาดโต อันส่งผลให้จํานวน Pixels ลดหรือเพิ่มไป ตามอัตราขยาย อาจจะเรียกว่า Resample Image linear จะใช้ค่า Pixels ข้างเคียงมาหารเฉลี่ย cubic จะมีการถ่วงน้ำหนักในการหารเฉลี่ยค่ารอบข้าง ทำให้เกิดการเบลอเมื่อขยายภาพ Sinc - Lanczos เป็นวิธีที่น่าจะถือได้ว่าดีที่สุดในการขยายภาพ

33 XCF ฟอร์แมตของ GIMP ส่วนขยายของแฟ้มภาพ GIMP คือ .xcf
eXperimental Computing Facility

34 บันทึกภาพ JPEG เลือกคำสั่ง File, Save As... เลือกไดร์ฟ/โฟลเดอร์
เลือกประเภทของไฟล์ภาพ

35 บันทึกภาพ JPEG เลือกคุณภาพ (Quality)‏ เลือก Progessive

36 ตัดภาพ (Crop)‏ เลือกเครื่องมือ Crop กำหนดขอบเขตสำหรับภาพที่ต้องการ
สามารถย่อ/ขยาย หรือย้ายตำแหน่งพื้นที่ได้ เมื่อได้พื้นที่แล้วให้คลิกเมาส์ 1 ครั้ง โปรแกรมจะตัด ภาพให้อัตโนมัติตามขนาดพื้นที่ที่ำกำหนด ยกเลิกการตัดภาพได้ด้วยปุ่มคีย์ลัด <Ctrl><Z>

37 กำหนดเส้นควบคุมการตัดภาพ
เส้นควบคุมในการตัดภาพ หรือทำงานกับภาพ เรียกว่า Guide นำเมาส์ไปชี้ใน ไม้บรรทัด (Ruler)‏ แล้วลากเส้นออกมา สามารถปรับตำแหน่ง หรือดึงกลับไปเก็บได้ ยกเลิกเส้น Guide เลือก Image, Guides, Remove All Guides

38 หมุนภาพ พลิกภาพ เลือกคำสั่ง Image, Transform, ...

39 Selection Selection Shift – add selection Ctrl – Subtract selection
Shift + Ctrl – Intersection Alt – Move selection border โดยต้องกดปุ่มแป้นพิมพ์ก่อน จึงคลิกเมาส์ Shift – สี่เหลี่ยมจตุรัส, วงกลมจริง Ctrl – วาดจากจุดศูนย์กลาง โดยต้องคลิกปุ่มซ้ายเมาส์ก่อนแล้ว จึงกดปุ่ม Shift, Ctrl

40 ตัึดสีพื้นภาพ

41 ตัึดสีพื้นภาพ เปิดไฟล์ภาพที่ต้องการตัดสี
คลิกเลือกเครื่องมือ Select regions by Color เลือกโหมดการเลือกเป็น Add จาก Option Tab

42 ตัึดสีพื้นภาพ นำเมาส์ไปคลิกตำแหน่งสีของพื้นภาพที่ต้องการเลือก
สามารถคลิกได้หลายครั้ง เพื่อเลือกเฉดสีอื่นๆ ที่ ต้องการ ลบพื้นภาพได้โดยการกดปุ่ม <Delete>จะปรากฏ สีใหม่ของพื้นภาพตามค่าสี Background Foreground Color Background Color

43 ภาพ Transparent ภาพ Transparent คือภาพที่ไม่มีพื้นภาพ (พื้น โปร่งใส)‏
ขั้นตอนการทำภาพพื้นโปร่งใส จากภาพสีใช้ขั้นตอน เดียวกับการตัดสีพื้นภาพ แต่ก่อนกดปุ่ม <Delete> เพื่อลบพื้นภาพเดิม กดปุ่มขวาของเมาส์ที่ภาพ เลือกคำสั่ง Layer, Transparency, Add Alpha Channel

44 ภาพ Transparent

45 ภาพ Transparent

46 ยกเลิกขั้นตอนการทำงาน
การทำงานที่ทำผ่านไปแล้ว จะบันทึกไว้ Undo History Dialog สามารถยกเลิกการทำงานก่อนๆ ได้โดยเปิด Undo History Dialog ด้วยคำสั่ง Edit, Undo History... คลิกเลือกขั้นตอนที่ต้องการยกเลิก โดยขั้นตอนครั้งล่าสุดจะอยู่ด้านล่าง

47 บันทึกภาพ GIF Transparent
เลือกคำสั่ง File, Save As... เลือกฟอร์แมตภาพเป็น GIF เลือกไดร์ฟ/โฟลเดอร์ กำหนดชื่อไฟล์ภาพ แล้วคลิกปุ่ม Save

48 บันทึกภาพ GIF Transparent
โปรแกรมจะแสดงให้ทราบว่าจะมีการเปลี่ยนโหมดเป็น Indexed Color คลิกปุ่ม Export เพื่อแปลงโหมดสีของภาพ

49 บันทึกภาพ GIF Transparent
กรณีที่ภาพมีขนาดโต ให้คลิกเลือกรายการ Interlace เพื่อแสดงภาพแบบ โครงร่างก่อน คลิกปุ่ม Save เพื่อบันทึกภาพ

50 ภาพขอบมน

51 ภาพขอบมน เปิดไฟล์ภาพ ปรับขนาดภาพตามเหมาะสม
คลิกเลือกเครื่องมือ Select rectangle regions สร้างขอบเขตสำหรับภาพ เลือกคำสั่ง Select, Rounded Rectangle...

52 ภาพขอบมน กำหนดค่าตัวเลขความมน คลิกปุ่ม OK
เลือก Selection ด้านนอก ด้วยคำสั่ง Select, Invert กดปุ่ม <Delete> เพื่อ ลบพื้นที่ขอบนอก ยกเลิก Selection ด้วยปุ่ม <Ctrl><Shift><A>

53 ปรับแต่งภาพ การปรับแต่งความคมชัด สี หรือความสว่างของภาพ จะใช้เมนูคำสั่ง Color, ...

54 สร้างงานใหม่ เลือกคำสั่ง File, New...
ระบุความกว้าง (Width) และความสูง (Height) หน่วยควรเป็น pixels คลิก Advanced Options เลือก Color space เป็น RGB color เลือกลักษณะ Background จาก Fill with

55 Poster Size Standard The Small Size 11” x 17” Medium Size 18” x 24”
Large Size ” x 36” or 27” x 39” Movie Poster Sizes 27” x 41”

56 เครื่องมือวาดเส้น เลือกสี ใช้ Shift ควบคุม เพื่อให้เป็นเส้นตรง
ติดตั้ง Brush C:\Documents and Settings\user-name\.gimp-2.6\brushes

57 ตัวอักษรเงา สร้างไฟล์ใหม่ เลือกเครื่องมือ Text
คลิกเมาส์ ณ ตำแหน่งที่ต้องการ พิมพ์ข้อความ พิมพ์ข้อความใน GIMP Text Editor

58 ตัวอักษรเงา กำหนดลักษณะตัวอักษณจาก Text Option
ย้ายตำแหน่งข้อความ โดยเปลี่ยนไปเลือก เครื่องมือ Move

59 ตัวอักษรเงา เปิดใ้้ช้งาน Layer Dialog จะพบว่ามีชั้นเลเยอร์ 2 ชั้น
คลิกปุ่มขวาของเมาส์ที่เลเยอร์ข้อความ เลือกคำสั่ง Duplicate Layer

60 ตัวอักษรเงา คลิกเืลือกเลเยอร์ตัวอักษร เลเยอร์ล่าง
เืลือกคำสั่ง Filter, Blur, Gaussian Blur... ปรับค่า ความเบลอ เพื่อให้ได้ตัวอักษรที่มีลักษณะเป็นเงา เลือกเครื่องมือ Move ย้ายข้อความในเลเยอร์ล่าง ตามต้องการ

61 Background ลายน้ำ สร้างไฟล์ใหม่ เลือกคำสั่ง Filter, Render, Lava
เลือก Gradient เป็น Horizon 2 คลิกปุ่ม OK

62 Layer การทำงานของ GIMP ให้ยึดหลัก 1 วัตถุต่อ 1 เลเยอร์
เลเยอร์พื้นฐานคือ Background ไม่ควรวาดใน เลเยอร์นี้

63 ออกแบบ Pattern สร้างไฟล์ใหม่ขนาด 10 x 10 pxs
ขยายจอภาพระดับ 1600% (View, Zoom, ...)‏ เลือก Pencil ขนาด 1 x 1 วาด Pattern ตามต้องการ

64 ออกแบบ Pattern บันทึก Pattern ด้วยคำสั่ง File, Save As
เลือกโฟลเดอร์เป็น เลือกฟอร์แมตเป็น GIMP Pattern (.pat)‏

65 ใช้งาน Pattern สร้างไฟล์ใหม่ เปิด Pattern Dialog (Dialog, Pattern)‏
คลิกปุ่ม Refresh patterns เลือกคำสั่ง Edit, Fill with Pattern

66 ใช้ <Ctrl><Z>
Path เครื่องมือวาดรูปทรง อิสระ วาดเส้นโค้ง สร้างไฟล์ใหม่ สร้างเลเยอร์ใหม่ แบบ Transparent คลิกเลือกเครื่องมือ Path คลิกเมาส์ 3 ครั้งดังนี้ ยกเลิกการสร้าง Path ใช้ <Ctrl><Z>

67 Path - เส้นโค้ง เลื่อนเมาส์มาชี้ที่จุด Handle ตำแหน่งกึ่งกลาง
กดปุ่ม <Ctrl> ค้างไว้แล้วเลื่อนเมาส์ เพื่อปรับให้เป็น เส้นโค้ง โดยจะมีแกนยึดออกมา 1 เส้น เลื่อนเมาส์ไปคลิกที่ปลายของแกน (ตำแหน่ง สี่เหลี่ยม) เพื่อปรับความโค้งได้อิสระ กดปุ่ม <Ctrl> ค้างไว้ พร้อมกับลากเมาส์ออกจาก ตำแหน่งจุดกึ่งกลาง โดยลากไปอีกด้าน จะปรากฏ แกนควบคุมอีก 1 แกน ปรับได้ิอิสระ เช่น

68 Path - เส้นโค้ง ปรับให้เป็นเส้นโค้งตาม ต้องการ เติมสีให้กับเส้นโดย
คลิกปุ่ม Stroke path จาก Path Options ปรับค่าของเส้น คลิกเครื่องมืออื่น เพื่อ ปิด Path

69 Path Path ที่สร้างไ้ว้จะปรากฏอยู่ใน Path Dialog ซึ่งมี ลักษณะการทำงานคล้ายกับ Layer Dialog

70 Close Path การสร้าง Path ที่มีลักษณะปิด
เทคนิคการออกแบบเส้นกรอบ หรือขอบ หรือรูปทรง ลักษณะต่างๆ

71 Close Path สร้าง Path ตามลักษณะปกติ แต่ตำแหน่งสุดท้าย จะต้องมาคลิกที่ตำแหน่งเริ่มต้น พร้อมๆ กับการกดปุ่ม <Ctrl> ค้างไว้ เติมสีภายใน Path ได้โดย คลิกปุ่ม Create Selection from Path จาก Path Option เลือกสีหรือลวดลาย เติมสีด้วยคำสั่ง Edit, Fill..

72 Path Begin a new path Click Begin a new component path Shift + Click
Add a new anchor path Click Add a new anchor between ... Ctrl + Click Close path Ctrl + Click Delete an anchor path Ctrl + Shift + Click

73 Path Move single anchor Drag & Drop Move entire path Alt + Drag
Move one handle Ctrl + Drag Move both handles Shift + Drag

74 การประยุกต์ใช้งาน Close Path