Вадим Макеев "Оптимизация и нарезка графики для...

Вадим Макеев

1

С ножом против паровозаЯндекс.Субботник — 31 января ’09

С ножом против паровозаЯндекс.Субботник — 31 января ’09

1.Верстальщикиграфика

2.Рабочийстанок

3.ОсобенностиукрощенияPs

4.Приёмыкунфу

5.Изображениянадиете

6.Чтодальше?

2

Верстальщик и графикаОсобенности профессии

1.Графика—основноевыразительноесредство

3

Верстальщик и графикаОсобенности профессии

1.Графика—основноевыразительноесредство

2.Верстальщик—связующеезвено

4

Верстальщик и графикаОсобенности профессии

1.Графика—основноевыразительноесредство

2.Верстальщик—связующеезвено

3.Форматыграфикииредактор

5

Верстальщик и графикаФорматы графики

1.PSD—отраслевойстандарт

2.PNGслоёный

3.PNGполноцветный(PNG24/32)

4.PNG8‐битный

5.GIF8‐битный

6.JPGполноцветный

6

Рабочий станокТщетные поиски альтернативы

Флагманы

1.AdobePhotoshop2.AdobeFireworks

7

Рабочий станокТщетные поиски альтернативы

Чисто поржать

3.PhotoshopElements4.GIMP

8

Особенности укрощения PsОт мольберта к фрезеровочному станку

Adobe Паровоз

1.Всёсамоегрустноевназвании(Photoshop)

9

Особенности укрощения PsОт мольберта к фрезеровочному станку

Adobe Паровоз

1.Всёсамоегрустноевназвании(Photoshop)

2.Остальное—вменюFilterи3D

10

Особенности укрощения PsОт мольберта к фрезеровочному станку

Adobe Паровоз

1.Всёсамоегрустноевназвании(Photoshop)

2.Остальное—вменюFilterи3D

3.Вруки—напильник…

11

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

1.КонвертациявRGB

RGBColor—Cmd+Shift+R

12

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

1.КонвертациявRGB

RGBColor—Cmd+Shift+R

2.Отражениеслоёв

FlipHorizontal—Cmd+Opt+H

FlipVertical—Cmd+Opt+V

13

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

3.Размеризображенияихолста

ImageSize—Cmd+Opt+I

CanvasSize—Cmd+Opt+C

14

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

3.Размеризображенияихолста

ImageSize—Cmd+Opt+I

CanvasSize—Cmd+Opt+C

4.Отражениехолста

FlipCanvasHorizontal—Cmd+Shift+H

FlipCanvasVertical—Cmd+Shift+V

15

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

5.Поворотхолста

90°CW—Cmd+Shift+C(почасовой)

90°CCW—Cmd+Shift+Opt+C(противчасовой)

16

Особенности укрощения PsОт мольберта к фрезеровочному станку

Горячие клавиши

5.Поворотхолста

90°CW—Cmd+Shift+C(почасовой)

90°CCW—Cmd+Shift+Opt+C(противчасовой)

6.Вашелюбимоедействие…

17

Особенности укрощения PsОт мольберта к фрезеровочному станку

Инструменты и панели

1.Подрукойтолькосамоенеобходимое…

18

19

20

21

Особенности укрощения PsОт мольберта к фрезеровочному станку

Инструменты и панели

1.Подрукойтолькосамоенеобходимое

22

Особенности укрощения PsОт мольберта к фрезеровочному станку

Инструменты и панели

1.Подрукойтолькосамоенеобходимое

2.Остальное—повешенонагорячиеклавиши

23

Особенности укрощения PsОт мольберта к фрезеровочному станку

Инструменты и панели

1.Подрукойтолькосамоенеобходимое

2.Остальное—повешенонагорячиеклавиши

3.Всенастройкисохраняютсявпрофиль(Workspace)

24

Особенности укрощения PsОт мольберта к фрезеровочному станку

Эффективный экспорт

1.Диалог«SaveforWeb&Devices»+Нож…

25

26

27

28

29

30

Особенности укрощения PsОт мольберта к фрезеровочному станку

Эффективный экспорт

1.Диалог«SaveforWeb&Devices»+Нож

31

Особенности укрощения PsОт мольберта к фрезеровочному станку

Эффективный экспорт

1.Диалог«SaveforWeb&Devices»+Нож

2.Настройкиэкспорта…

32

33

34

35

36

37

38

39

Особенности укрощения PsОт мольберта к фрезеровочному станку

Эффективный экспорт

1.Диалог«SaveforWeb&Devices»+Нож

2.Настройкиэкспорта

3.Теперьправилаваши…

40

41

42

Особенности укрощения PsОт мольберта к фрезеровочному станку

Цветовые профили

1.Любимыеграбли

43

Особенности укрощения PsОт мольберта к фрезеровочному станку

Цветовые профили

1.Любимыеграбли

2.Простоерешение…

44

45

46

47

48

49

50

51

Особенности укрощения PsОт мольберта к фрезеровочному станку

Цветовые профили

1.View>ProofSetup>MonitorRGB

2.Edit>ColorSettings>MonitorColor,Ask

3.File>SaveforWeb>ConverttosRGB

4.Open…Convertdocumentcolorsto…

52

Приёмы кунфуБыстрее, выше, сильнее

При чём тут холодное оружие?

1.Экономиявремени

53

Приёмы кунфуБыстрее, выше, сильнее

При чём тут холодное оружие?

1.Экономиявремени

2.Использованиевещейпоназначению

54

Приёмы кунфуБыстрее, выше, сильнее

При чём тут холодное оружие?

1.Экономиявремени

2.Использованиевещейпоназначению

3.Примеры…

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

Cmd + Shift + Left

70

Cmd + Alt + H

71

Cmd + Shift + Down

72

Cmd + Alt + V

73

74

75

Приёмы кунфуБыстрее, выше, сильнее

Торт слоёный

1.Выходиздвумерногопространства

76

Приёмы кунфуБыстрее, выше, сильнее

Торт слоёный

1.Выходиздвумерногопространства

2.Дискретность…

77

78

wtf.jpg

79

80

wtf.gif

81

wtf.jpg

82

Приёмы кунфуБыстрее, выше, сильнее

Проще говоря

1.PNG‐24—этоотлично

83

Приёмы кунфуБыстрее, выше, сильнее

Проще говоря

1.PNG‐24—этоотлично

2.AlphaImageLoaderдляIE6—проклятиенавека

84

Приёмы кунфуБыстрее, выше, сильнее

Проще говоря

1.PNG‐24—этоотлично

2.AlphaImageLoaderдляIE6—проклятиенавека

3.Авсегдалионнужен?

85

86

87

88

89

90

91

92

93

94

Изображения на диетеБыть умнее Паровоза

Экономим на спичках

1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png

jpegtran‐copynone‐optimizesrc.jpgdest.jpg

95

Изображения на диетеБыть умнее Паровоза

Экономим на спичках

1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png

jpegtran‐copynone‐optimizesrc.jpgdest.jpg

2.PngThing,PngCrusher(MacOSX)

96

Изображения на диетеБыть умнее Паровоза

Экономим на спичках

1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png

jpegtran‐copynone‐optimizesrc.jpgdest.jpg

2.PngThing,PngCrusher(MacOSX)

97

Изображения на диетеБыть умнее Паровоза

Экономим на спичках

1.pngcrush‐remalla‐brute‐reducesrc.pngdest.png

jpegtran‐copynone‐optimizesrc.jpgdest.jpg

2.PngThing,PngCrusher(MacOSX)

3.Smush.it…

98

99

Изображения на диетеБыть умнее Паровоза

Спрайты

1.Экономиянаhttp‐запросах

100

Изображения на диетеБыть умнее Паровоза

Спрайты

1.Экономиянаhttp‐запросах

2.Мгновеннаяотрисовка

101

Изображения на диетеБыть умнее Паровоза

Спрайты

1.Экономиянаhttp‐запросах

2.Мгновеннаяотрисовка

3.От28‐мидо1‐й…

102

103

104

105

106

107

Изображения на диетеБыть умнее паровоза

Спрайты

1.http://webo.in(по‐русски)

2.http://yuiblog.com/blog(по‐английски)

108

Что дальше?Развитие — ключ к успеху

Не верстальщик, но веб-технолог

1.Photoshopнетолькодля«эффектакрасныхглаз»

109

Что дальше?Развитие — ключ к успеху

Не верстальщик, но веб-технолог

1.Photoshopнетолькодля«эффектакрасныхглаз»

2.Макетонарезочныеавтоматы

110

Что дальше?Развитие — ключ к успеху

Не верстальщик, но веб-технолог

1.Photoshopнетолькодля«эффектакрасныхглаз»

2.Макетонарезочныеавтоматы

3.Смертьоформительскойграфики…

111

Что дальше?Развитие — ключ к успеху

Не верстальщик, но веб-технолог

3.Смертьоформительскойграфики

box‐shadow

border‐radius

border‐image

text‐shadow

Подробнее—http://css3.info

Вадим Макеев — http://pepelsbey.net

Спасибо!

С ножом против паровозаЯндекс.Субботник — 31 января ’09

112