GIMP : Graphics Design for Web - PowerPoint PPT Presentation

1 / 63
About This Presentation
Title:

GIMP : Graphics Design for Web

Description:

Title: GIMP Author: Boonlert Aroonpiboon Keywords: GIMP, OSS, Open Source Software, Boonlert Aroonpiboon, TIAC, Web Design Last modified by: Boonlert Aroonpiboon – PowerPoint PPT presentation

Number of Views:130
Avg rating:3.0/5.0
Slides: 64
Provided by: Boonle9
Category:
Tags: gimp | design | graphics | inch | ruler | web

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com