หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp

50 %
50 %
Information about หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp
Education

Published on July 24, 2014

Author: krukad

Source: slideshare.net

Description

หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp

หน่วยที่ 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 pixelsSize 72 dpi72 dpiResolution PNGPNG / JPEG / GIF / TIFFormat PreviewWebsite

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 colors1-bit 4 colors2-bit 8 colors3-bit 16 colors4-bit 32 colors5-bit 64 colors6-bit 128 colors7-bit 256 colors8-bit 32.8 thousand colors15-bit 65.5 thousand colors16-bit 16.7 million colors24-bit 16.7 million colors + 8 bit grayscale mask32-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

Add a comment

Comments

moncler 2014 spring summer | 11/12/14
Genuinely no matter if someone doesn't be aware of after that its up to other people that they will help, so here it takes place. moncler 2014 spring summer http://www.4gatty.it/moncler/aTekc87t4V/
chaquetas north face por mayor | 17/12/14
It is actually a great and helpful piece of information. I am glad that you shared this helpful information with us. Please keep us informed like this. Thank you for sharing. chaquetas north face por mayor http://www.centermedical.pl/layouts/libraries/cms/es-northface/Zc7Ym59Wdn/

Related presentations

Related pages

หน่วยที่ 3 รู้ถ่องแท้ ...

หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp from krukad. GIMP ... หน่วยที่ 3 รู้ ...
Read more

หน่วยที่3การขยาย ...

หน่วยที่ 3 ... หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp หน่วยที่ 3 ...
Read more

หน่วยที่ 1 :: การใช้งาน ...

วิธีที่ 1 ให้ดับเบิลคลิกที่ไอคอนโปรแกรม gimp ... 3] โปรแกรม gimp ...
Read more

3. Instalar Gimp 2.6 - Education

หน่วยที่ 3 รู้ถ่องแท่โปรแกรม Gimp หน่วยที่ 3 ...
Read more

หน่วยที่ 1:: ความรู้ ...

3. ... GIMP เป็นตัวย่อมาจาก G NU I mage M anipulation P rogram ซึ่งหมายถึง ...
Read more

หน่วยที่ 4 ระดับของ ...

ตกแต่งภาพด้วย Gimp ... ← หน่วยที่ 3 ...
Read more

มิถุนายน | 2010 | everywhere from Kroobee

หน่วยการเรียนรู้ที่ 4 การใช้งานโปรแกรม gimp ... หน่วยที่ 3 ...
Read more