หนวยท 3 รถองแทโปรแกรม Gimp
• Open Source Software ทชวยในงานออกแบบ
• ลกษณะเดยวกบโปรแกรม Adobe PhotoShop
• ท างานไดกบแฟมเอกสาร .psd
• สนบสนนการสรางสรรคงานกราฟกทหลากหลาย โดยเฉพาะงานกราฟกส าหรบเวบ
• The Gimp (ยอมาจาก GNU Image Manipulating Program ชอตองม The น าหนาเสมอดวย) โปรแกรมวาดรปสดเกงของลนกซ
GIMP
องคประกอบ
Elements of the program
• หนาตางแบบลอย (Floating Window)
4
Toolbar
Tool Options
Dialog
Image Windows
Tools Icon
Tools Icon
เปดไฟลภาพ • เลอกค าสง File, Open...
7
ภาพส าหรบเวบ
• JPG
– ภาพสมาก
– โหมด RGB
– Resolution 72 dpi
– Quality 60 - 90
– Progressive Effect
• GIF
– ภาพสนอย
– โหมด Indexed Color
– Resolution 72 dpi
– Interlaced Effect
8
RGB model • ชดสบนจอภาพคอมพวเตอร
• Red (แดง), Green (เขยว), Blue (น าเงน)
9
Red
Green
Blue
CMYK model • ชดสส าหรบเอกสารงานพมพ, เครองพมพ
• Cyan (ฟา), Magenta (บานเยน), Yellow (เหลอง), blacK (ด า)
10
GIF / JPEG
11
GIF or JPEG?
12
ภาพส าหรบเวบ
• PNG
–ฟอรแมตภาพใหม ทน า
ความสามารถของ GIF
และ JPG มาผสมรวมกน
• TIF
– ฟอรแมตภาพเฉพาะส าหรบ
การท าหองสมดดจทล
13
มาตรฐานรปแบบการน าเสนอภาพ
14
100 100 pixels 300 250 pixels Size
72 dpi 72 dpi Resolution
PNG PNG / JPEG / GIF / TIF Format
Preview Website
72/300 dpi • 72 dpi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch
• 300 dpi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch
15
Progressive & Interlaced Effect
16
รปภาพทแสดงในโหมดปกต
การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
GIF • Graphics Interlace File
– จ านวนสและความละเอยดของภาพไมสงมากนก
– ตองการพนแบบโปรงใส
– ตองการแสดงผลแบบโครงรางกอน แลวคอยแสดงผลแบบละเอยด (Interlaced)
– ควบคมจ านวนสทตองการได (Bit Depth)
– ตองการน าเสนอภาพแบบภาพเคลอนไหว
– สวนขยายคอ .gif
17
Bit Depth
18
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
Bit depth
19
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
Transparent GIFs • การท าใหพนของภาพ เปนพนโปรงใส
20
Animation GIF
21
JPEG • Joint Photographer's Experts Group
– เหมาะสมกบการน าเสนอทงระบบสอมลตมเดย และเวบไซต
– สามารถก าหนดขนาดของไฟลไดตามความเหมาะสม (File Compression)
– สามารถก าหนดคณสมบตการแสดงผลแบบหยาบ แลวคอยๆ ละเอยดเมอเวลาผานไป ทเรยกวาคณสมบต Progressive
– สวนขยายของไฟลรปแบบนคอ .jpg หรอ .jpeg
22
JPEG File Format
23
JPEG - 19K Low Quality
JPEG - 60K Max Quality
PNG
24
Portable Network Graphics รปแบบลาสดในการน าเสนอภาพผานเครอขายอนเทอรเนต
สามารถแสดงผลไดในระบบสเตมพกด (True Color), มขนาดไฟลเลก และควบคมคณภาพไดตามทตองการ มการก าหนดใหพนภาพเปนพนโปรงใสได (Transparent) รวมทงการแสดงผลแบบหยาบสละเอยด (Interlaced)
สวนขยายของไฟลรปแบบนคอ .png
TIFF
25
Tagged-Image File Format รปแบบทใชเกบภาพพรอมรายละเอยดตางๆ เชน เลเยอร (Layer),
Annotation, โหมดภาพทงระบบ CMYK, RGB, Lab Color ตลอดจนขอมลประกอบอนๆ ตามตนฉบบเดมของภาพ
เหมาะสมตอการเกบบนทกภาพตนฉบบ และภาพส าหรบใชประกอบ การสรางสอสงพมพ
ปจจบนน าฟอรแมตนมาใชกบเอกสารเวบดวย
สวนขยายของไฟลรปแบบนคอ .tif
การตดตงโปรแกรม
Setup GIMP
การใชงานGIMP
ปรบขนาดภาพ (Image Size)
• เลอกค าสง Image, Scale Image...
38
ปรบคา Width หรอ Height
โดยใหระวงหนวย ควรเปน pixels
คลกทรปโซ
เพอยกเลกความสมพนธ ของคาความกวางและ
ความสงของภาพ
บนทกภาพ JPEG • เลอกค าสง File, Save As...
39
เลอกไดรฟ/โฟลเดอร
เลอกประเภทของไฟลภาพ
บนทกภาพ JPEG
• เลอกคณภาพ (Quality)
• เลอก Progessive
40
ตดภาพ (Crop) • เลอกเครองมอ Crop
• ก าหนดขอบเขตส าหรบภาพทตองการ – สามารถยอ/ขยาย หรอยายต าแหนงพนทได
• เมอไดพนทแลวใหคลกเมาส 1 ครง โปรแกรมจะตดภาพใหอตโนมตตามขนาดพนททำก าหนด – ยกเลกการตดภาพไดดวยปมคยลด <Ctrl><Z>
41
ก าหนดเสนควบคมการตดภาพ • เสนควบคมในการตดภาพ หรอท างานกบภาพ เรยกวา Guide
42
น าเมาสไปชใน ไมบรรทด (Ruler) แลวลากเสนออกมา
สามารถปรบต าแหนง หรอดงกลบไปเกบได ยกเลกเสน Guide
เลอก Image, Guides, Remove All Guides
หมนภาพ พลกภาพ
• เลอกค าสง Image, Transform, ...
43
ตดสพนภาพ
44
ตดสพนภาพ • เปดไฟลภาพทตองการตดส
• คลกเลอกเครองมอ Select regions by Color
• เลอกโหมดการเลอกเปน Add จาก Option Tab
45
ตดสพนภาพ
• น าเมาสไปคลกต าแหนงสของพนภาพทตองการเลอก
• สามารถคลกไดหลายครง เพอเลอกเฉดสอนๆ ทตองการ
• ลบพนภาพไดโดยการกดปม <Delete>จะปรากฏ สใหมของพนภาพตามคาส Background
46
Foreground Color
Background Color
ยกเลกขนตอนการท างาน • การท างานทท าผานไปแลว จะบนทกไว Undo History Dialog
• สามารถยกเลกการท างานกอนๆ ไดโดยเปด Undo History Dialog ดวยค าสง Edit, Undo History...
• คลกเลอกขนตอนทตองการยกเลก โดยขนตอนครงลาสดจะอยดานลาง
47
ภาพ Transparent
• ภาพ Transparent คอภาพทไมมพนภาพ (พนโปรงใส)
• ขนตอนการท าภาพพนโปรงใส จากภาพสใชขนตอนเดยวกบการตดสพนภาพ แตกอนกดปม <Delete> เพอลบพนภาพเดม
– กดปมขวาของเมาสทภาพ
– เลอกค าสง Layer, Transparency, Add Alpha Channel
48
ภาพ Transparent
49
ภาพ Transparent
50
บนทกภาพ GIF Transparent
• ภาพทมพนโปรงใส จะตองบนทกในฟอรแมต GIF ดงน
• เลอกค าสง File, Save As...
• เลอกฟอรแมตภาพเปน GIF
• เลอกไดรฟ/โฟลเดอร
• ก าหนดชอไฟลภาพ แลวคลกปม Save
51
บนทกภาพ GIF Transparent
• โปรแกรมจะแสดงใหทราบวาจะมการเปลยนโหมดเปน Indexed Color
• คลกปม Export เพอแปลงโหมดสของภาพ
52
บนทกภาพ GIF Transparent • กรณทภาพมขนาดโต ใหคลกเลอกรายการ Interlace เพอแสดงภาพแบบ
โครงรางกอน
• คลกปม Save เพอบนทกภาพ
53
ภาพขอบมน
54
ภาพขอบมน • เปดไฟลภาพ
• ปรบขนาดภาพตามเหมาะสม
• คลกเลอกเครองมอ Select rectangle regions
• สรางขอบเขตส าหรบภาพ
• เลอกค าสง Select, Rounded Rectangle...
55
ภาพขอบมน • ก าหนดคาตวเลขความมน
• คลกปม OK
• เลอก Selection ดานนอก ดวยค าสง Select, Invert
• กดปม <Delete> เพอ ลบพนทขอบนอก
56
ยกเลก Selection ดวยปม
<Ctrl><Shift><A>
ปรบแตงภาพ • การปรบแตงความคมชด ส หรอความสวางของภาพ จะใชเมนค าสง Color, ...
57
สรางไฟลใหม
• เลอกค าสง File, New...
• ระบความกวาง (Width) และความสง (Height) หนวยควรเปน pixels
• คลก Advanced Options
• เลอก Color space เปน RGB color
58
ตวอกษรเงา
• สรางไฟลใหม
• เลอกเครองมอ Text
• คลกเมาส ณ ต าแหนงทตองการ พมพขอความ
• พมพขอความใน GIMP Text Editor
59
ตวอกษรเงา • ก าหนดลกษณะตวอกษรจาก Text Option
• ยายต าแหนงขอความ โดยเปลยนไปเลอก เครองมอ Move
60
ตวอกษรเงา • เปดใชงาน Layer Dialog จะพบวามชนเลเยอร 2 ชน
• คลกปมขวาของเมาสทเลเยอรขอความ เลอกค าสง Duplicate Layer
61
ตวอกษรเงา • คลกเลอกเลเยอรตวอกษร เลเยอรลาง
• เลอกค าสง Filter, Blur, Gaussian Blur... ปรบคาความเบลอ เพอใหไดตวอกษรทมลกษณะเปนเงา
• เลอกเครองมอ Move ยายขอความในเลเยอรลางตามตองการ
62
Background ลายน า • สรางไฟลใหม
• เลอกค าสง Filter, Render, Lava
• เลอก Gradient เปน Horizon 2
• คลกปม OK
63
Layer • การท างานของ GIMP ใหยดหลก 1 วตถตอ 1 เลเยอร
• เลเยอรพนฐานคอ Background ไมควรวาดในเลเยอรน
64
ออกแบบ Pattern
• สรางไฟลใหมขนาด 10 x 10 pxs
• ขยายจอภาพระดบ 1600% (View, Zoom, ...)
• เลอก Pencil ขนาด 1 x 1
• วาด Pattern ตามตองการ
65
ออกแบบ Pattern
• บนทก Pattern ดวยค าสง File, Save As
• เลอกโฟลเดอรเปน
• เลอกฟอรแมตเปน GIMP Pattern (.pat)
66
ใชงาน Pattern
• สรางไฟลใหม
• เปด Pattern Dialog (Dialog, Pattern)
• คลกปม Refresh patterns
• เลอกค าสง Edit, Fill with Pattern
67
Path • เครองมอวาดรปทรงอสระ
• วาดเสนโคง
68
สรางไฟลใหม
สรางเลเยอรใหม แบบ Transparent
คลกเลอกเครองมอ Path
คลกเมาส 3 ครงดงน
ยกเลกการสราง Path
ใช <Ctrl><Z>
Path - เสนโคง
• เลอนเมาสมาชทจด Handle ต าแหนงกงกลาง
• กดปม <Ctrl> คางไวแลวเลอนเมาส เพอปรบใหเปนเสนโคง โดยจะมแกนยดออกมา 1 เสน
• เลอนเมาสไปคลกทปลายของแกน (ต าแหนงสเหลยม) เพอปรบความโคงไดอสระ
• กดปม <Ctrl> คางไว พรอมกบลากเมาสออกจากต าแหนงจดกงกลาง โดยลากไปอกดาน จะปรากฏแกนควบคมอก 1 แกน ปรบไดำอสระ เชน
69
Path - เสนโคง
• ปรบใหเปนเสนโคงตามตองการ
• เตมสใหกบเสนโดย – คลกปม Stroke path จาก Path
Options
– ปรบคาของเสน
• คลกเครองมออน เพอปด Path
70
Path
• Path ทสรางไวจะปรากฏอยใน Path Dialog ซงมลกษณะการท างานคลายกบ Layer Dialog
71
Close Path • การสราง Path ทมลกษณะปด
• เทคนคการออกแบบเสนกรอบ หรอขอบ หรอรปทรงลกษณะตางๆ
72
Close Path • สราง Path ตามลกษณะปกต แตต าแหนงสดทายจะตองมาคลกท
ต าแหนงเรมตน พรอมๆ กบการกดปม <Ctrl> คางไว
• เตมสภายใน Path ไดโดย
– คลกปม Create Selection from Path จาก Path Option
– เลอกสหรอลวดลาย
– เตมสดวยค าสง Edit, Fill..
73
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
74
Path
• Move single anchor Drag & Drop
• Move entire path Alt + Drag
• Move one handle Ctrl + Drag
• Move both handles Shift + Drag
75
การประยกตใชงาน Close Path
76