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

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

1 1 GIMP : Graphics Design for Web บุญเลิศ อรุณพิบูลย์ นักวิชาการ 1 ศูนย์บริการสารสนเทศทางเทคโนโลยี (TIAC) สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.) boonlert@nstda.or.th http://www.tiac.or.th http://www.boonlert.net

2 2 ติดตั้งโปรแกรม  ดาวน์โหลด GIMP และ GTK+ จากเว็บไซต์ http://www.gimp.org/windows/  ติดตั้ง GTK+ ก่อน  จากนั้นติดตั้ง GIMP

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

4 4 เปิดไฟล์ภาพ  เลือกคำสั่ง File, Open...

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

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

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

8 8 GIF / JPEG

9 9 GIF or JPEG?

10 10 ภาพสำหรับเว็บ  PNG  ฟอร์แมตภาพใหม่ ที่นำ ความสามารถของ GIF และ JPG มาผสมรวมกัน  TIF  ฟอร์แมตภาพเฉพาะ สำหรับการทำห้องสมุด ดิจิทัล

11 11 มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels Size 72 dpi Resolutio n PNGPNG / JPEG / GIF / TIF Format PreviewWebsite

12 12 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

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

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

15 15 Bit Depth 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

16 16 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

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

18 18 Animation GIF

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

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

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

22 22 TIFF  Tagged-Image File Format  รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer), Annotation, โหมดภาพ ทั้งระบบ CMYK, RGB, Lab Color ตลอดจน ข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ  เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และ ภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์  ปัจจุบันนำฟอร์แมตนี้มาใช้กับเอกสารเว็บด้วย  ส่วนขยายของไฟล์รูปแบบนี้คือ.tif

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

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

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

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

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

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

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

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

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

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

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

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

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

36 36 ภาพ Transparent

37 37 ภาพ Transparent

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

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

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

41 41 ภาพขอบมน

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

43 43 ภาพขอบมน  กำหนดค่าตัวเลขความมน  คลิกปุ่ม OK  เลือก Selection ด้านนอก ด้วยคำสั่ง Select, Invert  กดปุ่ม เพื่อ ลบพื้นที่ขอบนอก ยกเลิก Selection ด้วยปุ่ม

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

45 45 สร้างไฟล์ใหม่  เลือกคำสั่ง File, New...  ระบุความกว้าง (Width) และความสูง (Height) หน่วยควรเป็น pixels  คลิก Advanced Options  เลือก Color space เป็น RGB color

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

61 61 Path  Begin a new pathClick  Begin a new component pathShift + Click  Add a new anchor pathClick  Add a new anchor between...Ctrl + Click  Close path Ctrl + Click  Delete an anchor pathCtrl + Shift + Click

62 62 Path  Move single anchorDrag & Drop  Move entire pathAlt + Drag  Move one handleCtrl + Drag  Move both handlesShift + Drag

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