1 GIMP : Graphics Design for Web บุญเลิศ อรุณพิบูลย์ นักวิชาการ 1 ศูนย์บริการสารสนเทศทางเทคโนโลยี (TIAC) สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.)
2 ติดตั้งโปรแกรม ดาวน์โหลด GIMP และ GTK+ จากเว็บไซต์ ติดตั้ง GTK+ ก่อน จากนั้นติดตั้ง GIMP
3 หน้าต่างโปรแกรม หน้าต่างแบบลอย (Floating Window) Image Windows Toolbar Options Dialog
4 เปิดไฟล์ภาพ เลือกคำสั่ง File, Open...
5 ภาพสำหรับเว็บ JPG ภาพสีมาก โหมด RGB Resolution 72 dpi Quality Progressive Effect GIF ภาพสีน้อย โหมด Indexed Color Resolution 72 dpi Interlaced Effect
6 RGB model ชุดสีบนจอภาพคอมพิวเตอร์ Red (แดง), Green (เขียว), Blue (น้ำเงิน) Red Green Blue
7 CMYK model ชุดสีสำหรับเอกสารงานพิมพ์, เครื่องพิมพ์ Cyan (ฟ้า), Magenta (บานเย็น), Yellow (เหลือง), blacK (ดำ)
8 GIF / JPEG
9 GIF or JPEG?
10 ภาพสำหรับเว็บ PNG ฟอร์แมตภาพใหม่ ที่นำ ความสามารถของ GIF และ JPG มาผสมรวมกัน TIF ฟอร์แมตภาพเฉพาะ สำหรับการทำห้องสมุด ดิจิทัล
11 มาตรฐานรูปแบบการนำเสนอภาพ 100 100 pixels 300 250 pixels Size 72 dpi Resolutio n PNGPNG / JPEG / GIF / TIF Format PreviewWebsite
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 Progressive & Interlaced Effect รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
14 GIF Graphics Interlace File จำนวนสีและความละเอียดของภาพไม่สูงมากนัก ต้องการพื้นแบบโปร่งใส ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบ ละเอียด (Interlaced) ควบคุมจำนวนสีที่ต้องการได้ (Bit Depth) ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว ส่วนขยายคือ.gif
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 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 Transparent GIFs การทำให้พื้นของภาพ เป็นพื้นโปร่งใส
18 Animation GIF
19 JPEG Joint Photographer's Experts Group เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ สามารถกำหนดขนาดของไฟล์ได้ตามความ เหมาะสม (File Compression) สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่า คุณสมบัติ Progressive ส่วนขยายของไฟล์รูปแบบนี้คือ.jpg หรือ.jpeg
20 JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality
21 PNG Portable Network Graphics รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่าย อินเทอร์เน็ต สามารถแสดงผลได้ในระบบสีเต็มพิกัด (True Color), มีขนาดไฟล์เล็ก และควบคุมคุณภาพ ได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็น พื้นโปร่งใสได้ (Transparent) รวมทั้งการ แสดงผลแบบหยาบสู่ละเอียด (Interlaced) ส่วนขยายของไฟล์รูปแบบนี้คือ.png
22 TIFF Tagged-Image File Format รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer), Annotation, โหมดภาพ ทั้งระบบ CMYK, RGB, Lab Color ตลอดจน ข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และ ภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ ปัจจุบันนำฟอร์แมตนี้มาใช้กับเอกสารเว็บด้วย ส่วนขยายของไฟล์รูปแบบนี้คือ.tif
23 โหมดภาพ และขนาดภาพ 640 x 480 ขนาดของภาพ โหมดภาพ RGB
24 เปลี่ยนโหมดภาพ เลือกคำสั่ง Image, Mode...
25 ปรับขนาดภาพ (Image Size) เลือกคำสั่ง Image, Scale Image... ปรับค่า Width หรือ Height โดยให้ระวังหน่วย ควรเป็น pixels คลิกที่รูปโซ่ เพื่อยกเลิกความสัมพันธ์ ของค่าความกว้างและ ความสูงของภาพ
26 บันทึกภาพ JPEG เลือกคำสั่ง File, Save As... เลือกไดร์ฟ/โฟลเดอร์ เลือกประเภทของไฟล์ภาพ
27 บันทึกภาพ JPEG เลือกคุณภาพ (Quality) เลือก Progessive
28 ตัดภาพ (Crop) เลือกเครื่องมือ Crop กำหนดขอบเขตสำหรับภาพที่ต้องการ สามารถย่อ/ขยาย หรือย้ายตำแหน่งพื้นที่ได้ เมื่อได้พื้นที่แล้วให้คลิกเมาส์ 1 ครั้ง โปรแกรมจะตัด ภาพให้อัตโนมัติตามขนาดพื้นที่ที่ำกำหนด ยกเลิกการตัดภาพได้ด้วยปุ่มคีย์ลัด
29 กำหนดเส้นควบคุมการตัดภาพ เส้นควบคุมในการตัดภาพ หรือทำงานกับภาพ เรียกว่า Guide นำเมาส์ไปชี้ใน ไม้บรรทัด (Ruler) แล้วลากเส้นออกมา สามารถปรับตำแหน่ง หรือดึงกลับไปเก็บได้ ยกเลิกเส้น Guide เลือก Image, Guides, Remove All Guides
30 หมุนภาพ พลิกภาพ เลือกคำสั่ง Image, Transform,...
31 ตัึดสีพื้นภาพ
32 ตัึดสีพื้นภาพ เปิดไฟล์ภาพที่ต้องการตัดสี คลิกเลือกเครื่องมือ Select regions by Color เลือกโหมดการเลือกเป็น Add จาก Option Tab
33 ตัึดสีพื้นภาพ นำเมาส์ไปคลิกตำแหน่งสีของพื้นภาพที่ต้องการเลือก สามารถคลิกได้หลายครั้ง เพื่อเลือกเฉดสีอื่นๆ ที่ ต้องการ ลบพื้นภาพได้โดยการกดปุ่ม จะปรากฏ สีใหม่ของพื้นภาพตามค่าสี Background Foreground Color Background Color
34 ยกเลิกขั้นตอนการทำงาน การทำงานที่ทำผ่านไปแล้ว จะบันทึกไว้ Undo History Dialog สามารถยกเลิกการทำงานก่อนๆ ได้โดยเปิด Undo History Dialog ด้วยคำสั่ง Edit, Undo History... คลิกเลือกขั้นตอนที่ต้องการยกเลิก โดยขั้นตอนครั้งล่าสุดจะอยู่ด้านล่าง
35 ภาพ Transparent ภาพ Transparent คือภาพที่ไม่มีพื้นภาพ (พื้น โปร่งใส) ขั้นตอนการทำภาพพื้นโปร่งใส จากภาพสีใช้ขั้นตอน เดียวกับการตัดสีพื้นภาพ แต่ก่อนกดปุ่ม เพื่อลบพื้นภาพเดิม กดปุ่มขวาของเมาส์ที่ภาพ เลือกคำสั่ง Layer, Transparency, Add Alpha Channel
36 ภาพ Transparent
37 ภาพ Transparent
38 บันทึกภาพ GIF Transparent ภาพที่มีพื้นโปร่งใส จะต้องบันทึกในฟอร์แมต GIF ดังนี้ เลือกคำสั่ง File, Save As... เลือกฟอร์แมตภาพเป็น GIF เลือกไดร์ฟ/โฟลเดอร์ กำหนดชื่อไฟล์ภาพ แล้วคลิกปุ่ม Save
39 บันทึกภาพ GIF Transparent โปรแกรมจะแสดงให้ทราบว่าจะมีการเปลี่ยนโหมดเป็น Indexed Color คลิกปุ่ม Export เพื่อแปลงโหมดสีของภาพ
40 บันทึกภาพ GIF Transparent กรณีที่ภาพมีขนาดโต ให้คลิกเลือกรายการ Interlace เพื่อแสดงภาพแบบ โครงร่างก่อน คลิกปุ่ม Save เพื่อบันทึกภาพ
41 ภาพขอบมน
42 ภาพขอบมน เปิดไฟล์ภาพ ปรับขนาดภาพตามเหมาะสม คลิกเลือกเครื่องมือ Select rectangle regions สร้างขอบเขตสำหรับภาพ เลือกคำสั่ง Select, Rounded Rectangle...
43 ภาพขอบมน กำหนดค่าตัวเลขความมน คลิกปุ่ม OK เลือก Selection ด้านนอก ด้วยคำสั่ง Select, Invert กดปุ่ม เพื่อ ลบพื้นที่ขอบนอก ยกเลิก Selection ด้วยปุ่ม
44 ปรับแต่งภาพ การปรับแต่งความคมชัด สี หรือความสว่างของภาพ จะใช้เมนูคำสั่ง Color,...
45 สร้างไฟล์ใหม่ เลือกคำสั่ง File, New... ระบุความกว้าง (Width) และความสูง (Height) หน่วยควรเป็น pixels คลิก Advanced Options เลือก Color space เป็น RGB color
46 ตัวอักษรเงา สร้างไฟล์ใหม่ เลือกเครื่องมือ Text คลิกเมาส์ ณ ตำแหน่งที่ต้องการ พิมพ์ข้อความ พิมพ์ข้อความใน GIMP Text Editor
47 ตัวอักษรเงา กำหนดลักษณะตัวอักษณจาก Text Option ย้ายตำแหน่งข้อความ โดยเปลี่ยนไปเลือก เครื่องมือ Move
48 ตัวอักษรเงา เปิดใ้้ช้งาน Layer Dialog จะพบว่ามีชั้นเลเยอร์ 2 ชั้น คลิกปุ่มขวาของเมาส์ที่เลเยอร์ข้อความ เลือกคำสั่ง Duplicate Layer
49 ตัวอักษรเงา คลิกเืลือกเลเยอร์ตัวอักษร เลเยอร์ล่าง เืลือกคำสั่ง Filter, Blur, Gaussian Blur... ปรับค่า ความเบลอ เพื่อให้ได้ตัวอักษรที่มีลักษณะเป็นเงา เลือกเครื่องมือ Move ย้ายข้อความในเลเยอร์ล่าง ตามต้องการ
50 Background ลายน้ำ สร้างไฟล์ใหม่ เลือกคำสั่ง Filter, Render, Lava เลือก Gradient เป็น Horizon 2 คลิกปุ่ม OK
51 Layer การทำงานของ GIMP ให้ยึดหลัก 1 วัตถุต่อ 1 เล เยอร์ เลเยอร์พื้นฐานคือ Background ไม่ควรวาดในเลเยอร์ นี้
52 ออกแบบ Pattern สร้างไฟล์ใหม่ขนาด 10 x 10 pxs ขยายจอภาพระดับ 1600% (View, Zoom,...) เลือก Pencil ขนาด 1 x 1 วาด Pattern ตามต้องการ
53 ออกแบบ Pattern บันทึก Pattern ด้วยคำสั่ง File, Save As เลือกโฟลเดอร์เป็น เลือกฟอร์แมตเป็น GIMP Pattern (.pat)
54 ใช้งาน Pattern สร้างไฟล์ใหม่ เปิด Pattern Dialog (Dialog, Pattern) คลิกปุ่ม Refresh patterns เลือกคำสั่ง Edit, Fill with Pattern
55 Path เครื่องมือวาดรูปทรง อิสระ วาดเส้นโค้ง สร้างไฟล์ใหม่ สร้างเลเยอร์ใหม่ แบบ Transparent คลิกเลือกเครื่องมือ Path คลิกเมาส์ 3 ครั้งดังนี้ ยกเลิกการสร้าง Path ใช้
56 Path - เส้นโค้ง เลื่อนเมาส์มาชี้ที่จุด Handle ตำแหน่งกึ่งกลาง กดปุ่ม ค้างไว้แล้วเลื่อนเมาส์ เพื่อปรับให้เป็น เส้นโค้ง โดยจะมีแกนยึดออกมา 1 เส้น เลื่อนเมาส์ไปคลิกที่ปลายของแกน (ตำแหน่ง สี่เหลี่ยม) เพื่อปรับความโค้งได้อิสระ กดปุ่ม ค้างไว้ พร้อมกับลากเมาส์ออกจาก ตำแหน่งจุดกึ่งกลาง โดยลากไปอีกด้าน จะปรากฏ แกนควบคุมอีก 1 แกน ปรับได้ิอิสระ เช่น
57 Path - เส้นโค้ง ปรับให้เป็นเส้นโค้งตาม ต้องการ เติมสีให้กับเส้นโดย คลิกปุ่ม Stroke path จาก Path Options ปรับค่าของเส้น คลิกเครื่องมืออื่น เพื่อ ปิด Path
58 Path Path ที่สร้างไ้ว้จะปรากฏอยู่ใน Path Dialog ซึ่งมี ลักษณะการทำงานคล้ายกับ Layer Dialog
59 Close Path การสร้าง Path ที่มีลักษณะปิด เทคนิคการออกแบบเส้นกรอบ หรือขอบ หรือรูปทรง ลักษณะต่างๆ
60 Close Path สร้าง Path ตามลักษณะปกติ แต่ตำแหน่งสุดท้าย จะต้องมาคลิกที่ตำแหน่งเริ่มต้น พร้อมๆ กับการกดปุ่ม ค้างไว้ เติมสีภายใน Path ได้โดย คลิกปุ่ม Create Selection from Path จาก Path Option เลือกสีหรือลวดลาย เติมสีด้วยคำสั่ง Edit, Fill..
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 Path Move single anchorDrag & Drop Move entire pathAlt + Drag Move one handleCtrl + Drag Move both handlesShift + Drag
63 การประยุกต์ใช้งาน Close Path