Вадим Макеев "Оптимизация и нарезка графики для профессиональной вёрстки"

Вадим Макеев

1

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


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

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

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

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

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

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

2

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

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

3



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

4



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




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

10




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

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

11


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

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

RGBColor—Cmd+Shift+R

12



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

RGBColor—Cmd+Shift+R

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

FlipHorizontal—Cmd+Opt+H

FlipVertical—Cmd+Opt+V

13



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

ImageSize—Cmd+Opt+I

CanvasSize—Cmd+Opt+C

14



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

ImageSize—Cmd+Opt+I

CanvasSize—Cmd+Opt+C

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

FlipCanvasHorizontal—Cmd+Shift+H

FlipCanvasVertical—Cmd+Shift+V

15



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

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

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

16



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

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

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

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

17


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

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

18

19

20

21



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

22




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

23




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

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

24


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

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

25

26

27

28

29

30



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

31




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

32

33

34

35

36

37

38

39




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

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

40

41

42


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

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

43



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

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

44

45

46

47

48

49

50

51



1.View>ProofSetup>MonitorRGB

2.Edit>ColorSettings>MonitorColor,Ask

3.File>SaveforWeb>ConverttosRGB

4.Open…Convertdocumentcolorsto…

52

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

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

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

53




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

54




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




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

84




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





2.PngThing,PngCrusher(MacOSX)

96






97






3.Smush.it…

98

99


Спрайты

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

100


Спрайты


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

101


Спрайты


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

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

102

103

104

105

106

107

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

Спрайты

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

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

http://webo.in

http://webo.in

http://yuiblog.com/blog

http://yuiblog.com/blog

108

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

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

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

109




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

110




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

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

111



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

box‐shadow

border‐radius

border‐image

text‐shadow

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

http://css3.info

http://css3.info

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

Спасибо!


112

http://pepelsbey.net

http://pepelsbey.net

Technology

Вадим Макеев "Оптимизация и нарезка графики для профессиональной вёрстки"