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

Вадим Макеев

1

С ножом против паровозаЯндекс.Субботник — 25 апреля ’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,GIMP#

8

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

Adobe Паровоз

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

9




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

10




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

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

11


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

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

RGBColor—Cmd+Shift+R

12



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

FlipHorizontal—Cmd+Opt+H

FlipVertical—Cmd+Opt+V

13



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

FlipHorizontal—Cmd+Opt+H

FlipVertical—Cmd+Opt+V

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

FlipCanvasHorizontal—Cmd+Shift+H

FlipCanvasVertical—Cmd+Shift+V

14



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

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

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

15



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

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

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

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

ImageSize—Cmd+Opt+I

CanvasSize—Cmd+Opt+C

16



6.Работа со стилями слоя

CopyLayerStyle—Ctrl+Cmd+C

PasteLayerStyle—Ctrl+Cmd+V

ClearLayerStyle—Ctrl+Cmd+X

17



7.Дублирование слоя

DuplicateLayer—Cmd+Shift+D

18





8.Создание слоя для экспорта

NewLayerBasedSlice—Cmd+Shift+L

19





8.Создание слоя для экспорта

NewLayerBasedSlice—Cmd+Shift+L

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

20


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

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

21

22

23

24



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

25




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

26




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

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

27


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

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

28

29

30

31

32

33



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

34




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

35

36

37

38

39

40

41

42




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

43




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

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

44

45

46


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

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

47




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

48




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

3.Ну,несовсемпростое:)

49

Особенности укрощения PsЦвет в профиль и анфас

Теория

1.Стандартноецветовоепространстводлявеба—sRGB

50


Теория


2.Средняягаммаприравниваетсякзначению2.2

51


Теория



3.ГаммаWindows—2.2

52


Теория




ГаммаMacOSX10.5Leopard—1.8

53


Теория




ГаммаMacOSX10.5Leopard—1.8

ГаммаMacOSX10.6SnowLeopard—2.2

54


Теория

4.WindowsXP,VistaиLinuxиспользуютдля

изображенийбезпрофиляsRGB

55


Теория



5.MacOSXиспользуетдляизображенийбезпрофиля

цветовойпрофильмонитора

56


Теория



5.MacOSXиспользуетдляизображенийбезпрофиля

цветовойпрофильмонитора

6.Браузерынеиспользуютпрофиливообще *

57


Идеальным веб-дизайнерам

1.Калиброватьмониторсгаммой2.2

58


Идеальным веб-дизайнерам


2.ВкачестверабочегопрофиляиспользоватьsRGB

Кпримеру—Europe Web/Internet

59


Идеальным верстальщикам




60


Идеальным верстальщикам




3.Иещёкое‐что…

61

62

63

64

65

66

67


Несчастным верстальщикам

1.РабочийпрофильsRGB,Гамма2.2

68




2.Вдиалогеонесовпадениицветовыхпрофилей…

69

70

71

72

73

74




2.Вдиалогеонесовпадениицветовыхпрофилей…Гм.

75




2.Вдиалогеонесовпадениицветовыхпрофилей…Гм.

3.Вчёмжеправда,брат?

76


Решение

1.ВсемработатьвsRBGинеиметьпроблем

77


Решение

1.ВсемработатьвsRBGинеиметьпроблем

2.Вособыхслучаях—конвертироватьврабочийпрофиль.

Ноконвертироватьосторожно,без дизеринга.

78


Решение

1.ВсемработатьвsRBGинеиметьпроблем.

2.Вособыхслучаях—конвертироватьврабочийпрофиль.

Ноконвертироватьосторожно,без дизеринга.

3.Использоватьнеадекватныйцветовойпрофиль.

Идапоможетвамбог…

79


Решение

1.sRBG,ProofColors,ConverttosRGB

2.sRGB,ProofColors,ConverttosRGB

ConverttotheWorkingSpace,UseDither

3.sRBG,ProofColors,ConverttosRGB,

Usetheembeddedprofile

80


Решение

p.s.ОтдельноеспасибоАлександру Шуваеву

81

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

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

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

82




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

83




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

3.Примеры…

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

Cmd + Shift + Left

99

Cmd + Alt + H

100

Cmd + Shift + Down

101

Cmd + Alt + V

102

103

104


Торт слоёный

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

105


Торт слоёный

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

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

106

107

wtf.jpg

108

109

wtf.gif

110

wtf.jpg

111


Проще говоря

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

112




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

113





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

114





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

115

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

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

1.pngcrush, optipng, jpegtran

116




2.PngThing, PngCrusher (MacOSX)

117





3.ImageOptim…

118

119

120





3.ImageOptim

121





3.ImageOptim

4.SmushIt…

122

123


Спрайты

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

124


Спрайты


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

125


Спрайты


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

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

126

127

128

129

130

131

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

Спрайты

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

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

http://webo.in

http://webo.in

http://yuiblog.com/blog

http://yuiblog.com/blog

132

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

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

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

133




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

134




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

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

135



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

box‐shadow

border‐radius

border‐image

text‐shadow

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

http://css3.info

http://css3.info

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

Спасибо!


136

http://pepelsbey.net

http://pepelsbey.net

Technology

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