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

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
คณิตคิดเร็วโดยใช้นิ้วมือ
Advertisements

โปรแกรมฝึกหัด การเลื่อนและคลิกเมาส์
บทเรียนเรื่องการตกแต่งภาพโดย Photoshop
พลังงานในกระบวนการทางความร้อน : กฎข้อที่หนึ่งของอุณหพลศาสตร์
การซ้อนทับกัน และคลื่นนิ่ง
Microsoft Office PowerPoint 2003
แนวทางการรายงานผลการปฏิบัติราชการโดยผ่านระบบเครือข่ายอินเตอร์เน็ต
Packet Tracer Computer network.
วิชาสื่อ ประสม ง แบบทดสอบกลางภาค
การสืบค้นข้อมูลจาก Web OPAC
เทคโนโลยีสารสนเทศในห้องสมุดเฉพาะและศูนย์สารสนเทศ
เรื่อง การประยุกต์ใช้ : ลูกเล่นโฟโต้ช๊อป
เรื่อง การประยุกต์ใช้ : โปสการ์ด/กรอบรูป
การวาดและการทำงานกับวัตถุ
By…Porta Boonyatearana
Microsoft Word XP โดย พิสมัย น้ำจันทร์.
จำนวนนับใดๆ ที่หารจำนวนนับที่กำหนดให้ได้ลงตัว เรียกว่า ตัวประกอบของจำนวนนับ จำนวนนับ สามารถเรียกอีกอย่างว่า จำนวนเต็มบวก หรือจำนวนธรรมชาติ ซึ่งเราสามารถนำจำนวนนับเหล่านี้มา.
การสร้างเงาจากรูปวัตถุ
การสร้างเงาของวัตถุหลายชิ้น
21. การกำหนดขอบเขตของภาพ (1 จาก 5)
เทคนิคการใช้งาน Adobe Photoshop นรินทร บุญพราหมณ์
การขอเบิกเงินนอกงบประมาณ
การสร้างภาพเคลื่อนไหว
การสืบค้นข้อมูลจาก Web OPAC
การสร้าง Digital Video ด้วย Window Movie Maker
การใช้งาน Microsoft Windows XP
Install Driver Token Key
Office of information technology
การติดตั้ง จัดการแฟ้มเสียง บันทึกเสียง และ effect
สรุปผลการสำรวจ ความต้องการของประชาชนเกี่ยวกับ
ข้อมูลเศรษฐกิจการค้า
1 การสัมมนาผู้ตรวจ ประเมินคุณภาพภายใน ปีการศึกษา 2552 วันพฤหัสบดีที่ 21 ตุลาคม 2553 ณ ห้องประชุม 3222 อาคารสิริคุณากร.
การใส่ภาพลงบน Work Sheet...
รายงาน เรื่อง จัดรูปแบบข้อมูล จัดทำโดย ด. ญ. ธิกานดา วัลยาภรณ์ ชั้นม.2/1 เลขที่ 19 เสนอ อาจารย์ ภานุมาศ ชาติมองแดง โรงเรียนวชิรธรรมสาธิต.
โปรแกรม SwishMAX.
วาดภาพสวยด้วย Paint.
ณัฏฐวุฒิ เอี่ยมอินทร์
การปรับแต่งกราฟฟิกภาพ,สี,Effect ด้วยโปรแกรม Adobe Photoshop CS
การเรียนรู้ Internet Explorer 6.0
การแต่งรูปภาพด้วยโปรแกรม
Extra_08_Test_Modular_Calculator
Principle of Graphic Design
การเลือกและปรับรูปทรงวัตถุ การเลือกและปรับรูปทรงวัตถุ
การใช้งานโปรแกรม Microsoft Power Point
Tips and Tools MS Excel By คนควน.
บทที่ 3 การทำงานกับฟอร์ม (Form)
บทที่ 3 การทำงานกับฟอร์ม (Form)
วาดรูปด้วย Paint ชั้นประถมศึกษาปีที่ 3
รู้จักกับชนิดของภาพกราฟิกบนเว็บ
พื้นฐานเกี่ยวกับโปรแกรม Flash CS3
Tip & Trick ตัดต่อ และซ้อนภาพ ปรับแต่งภาพให้สีสันสดใส
รายวิชา คอมพิวเตอร์กราฟิก
บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับภาพกราฟฟิกส์
การจัดการเกี่ยวกับรูปภาพตอนที่ ๒ การเรียงภาพหลายภาพเป็นภาพ เดียวกัน ๑. เข้าใช้งานชุดคำสั่ง ADOBE PHOTOSHOP รุ่น ๕. ๕.
Lesson01 แมวเหมียว การแสดงภาพและเสียง. 1. คลิก New Project.
โหมดสี ใน Photoshop เรื่องของสีมีความสำคัญอย่างมากในการใช้งานโปรแกรม Photoshop เพราะจะมีผลกับภาพที่เราต้องการปรับแต่งโดยตรง เราสามารถกำหนดโหมดสีใน รูปแบบต่างๆ.
บทที่ 9 การใช้งานฟอร์มและคอนโทรลต่าง ๆ
ชั้นมัธยมศึกษาปีที่ 2 ผู้สอน นายกฤษชนะ สิงคาร
ผลการทดสอบทางการศึกษาระดับชาติขั้นพื้นฐาน
เริ่มต้น Photoshop CS5.
Adobe Photoshop เทคนิคพิเศษ และฟิลเตอร์
Lesson02 paintpot การวาดเส้น. คลิก New Project ตั้งชื่อ paintpot.
การค้นในปริภูมิสถานะ
Graphic Design 03.
กราฟเบื้องต้น.
เรื่อง การประยุกต์ใช้ : การม้วน ขอบภาพ / รุ้ง ใบความรู้ โดย..... ครูนิ่มอนงค์ เดชภูงา โรงเรียนศรีปทุมพิทยาคม สำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 33.
โครงสร้างข้อมูลแบบ สแตก (stack)
กราฟเบื้องต้น.
ผลการประเมิน คุณภาพการศึกษาขั้นพื้นฐาน ปีการศึกษา
GIMP : Graphics Design for Web
ใบสำเนางานนำเสนอ:

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