GIMP : Graphics Design for Web

1
GIMP Graphics Design for Web

• ??????? ???????????
• ?????????? 1
• ???????????????????????????????
  (TIAC)???????????????????????????????????????????
  ? (????.)
• boonlert_at_nstda.or.th
• http//www.tiac.or.th
• http//www.boonlert.net

2
??????????????

• ????????? GIMP ??? GTK ???????????http//www.gim
  p.org/windows/
• ??????? GTK ????
• ?????????????? GIMP

3
???????????????

• ?????????????? (Floating Window)

Toolbar
Options
Image Windows
Dialog
4
???????????

• ??????????? File, Open...

5
?????????????

• JPG
• ????????
• ???? RGB
• Resolution 72 dpi
• Quality 60 - 90
• Progressive Effect

• GIF
• ?????????
• ???? Indexed Color
• Resolution 72 dpi
• Interlaced Effect

6
(No Transcript)
7
(No Transcript)
8
GIF / JPEG
9
GIF or JPEG?
10
?????????????

• PNG
• ?????????????? ?????????????????? GIF ??? JPG
  ???????????

• TIF
• ?????????????????????????????????????????

11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
GIF

• Graphics Interlace File
• ???????????????????????????????????????
• ?????????????????????
• ???????????????????????????? ?????????????????????
  ??? (Interlaced)
• ?????????????????????????? (Bit Depth)
• ????????????????????????????????
• ??????????? .gif

15
(No Transcript)
16
Bit depth
8 bit color 256 colors 518k
8 bit gray scale 256 shades of gray 518k
24 bit color 16 million colors 1.55 MB
1 bit dithered image 64k
17
(No Transcript)
18
(No Transcript)
19
JPEG

• Joint Photographer's Experts Group
• ??????????????????????????????????????????
  ???????????
• ??????????????????????????????????????? (File
  Compression)
• ???????????????????????????????????? ?????????
  ?????????????????????? ????????????????????
  Progressive
• ??????????????????????????? .jpg ???? .jpeg

20
JPEG File Format
JPEG - 60K Max Quality
JPEG - 19K Low 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 ?????
  ??????????????????????????????????????????????????
  
• ????????????????????????????????? ltCtrlgtltZgt

29
????????????????????????

• ????????????????????? ??????????????? ????????
  Guide

?????????????? ????????? (Ruler) ????????????????
????????????????? ???????????????????? ?????????
? Guide ????? Image, Guides,Remove All Guides
30
??????? ???????

• ??????????? Image, Transform, ...

31
?????????????
32
?????????????

• ??????????????????????????
• ??????????????????? Select regions by Color
• ????????????????????? Add ??? Option Tab

33
?????????????

• ???????????????????????????????????????????????
• ?????????????????????? ????????????????????
  ??????????
• ???????????????????????? ltDeletegt????????????????
  ??????????????? Background

Foreground Color
Background Color
34
?????????????????????

• ??????????????????????? ??????????? Undo History
  Dialog
• ????????????????????????? ?????????? Undo
  History Dialog ?????????? Edit, Undo History...
• ????????????????????????????????
  ???????????????????????????????????

35
??? Transparent

• ??? Transparent ?????????????????????
  (???????????)
• ?????????????????????????? ???????????????????????
  ?????????????????? ????????????? ltDeletegt
  ??????????????????
• ???????????????????????
• ??????????? 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
• ?????? ltDeletegt ????????????????????

?????? Selection???????? ltCtrlgtltShiftgtltAgt
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 ??? ltCtrlgtltZgt
56
Path - ????????

• ?????????????????????? Handle ???????????????
• ?????? ltCtrlgt ??????????????????????
  ???????????????????????? ?????????????????? 1
  ????
• ?????????????????????????????? (?????????????????)
  ?????????????????????????
• ?????? ltCtrlgt ??????? ????????????????????????????
  ???????????? ??????????????? ???????????????????
  1 ??? ????????????? ????

57
Path - ????????

• ?????????????????????????????
• ???????????????????
• ???????? Stroke path ??? Path Options
• ??????????????
• ?????????????????? ???????? Path

58
Path

• Path ????????????????????????? Path Dialog
  ???????????????????????????? Layer Dialog

59
Close Path

• ???????? Path ??????????????
• ??????????????????????? ???????
  ?????????????????????

60
Close Path

• ????? Path ????????????? ?????????????????????????
  ?????????????????????? ?????? ???????????? ltCtrlgt
  ???????
• ??????????? Path ??????
• ???????? Create Selection from Path ??? Path
  Option
• ?????????????????
• ???????????????? Edit, Fill..

61
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

62
Path

• Move single anchor Drag Drop
• Move entire path Alt Drag
• Move one handle Ctrl Drag
• Move both handles Shift Drag

63
????????????????? Close Path