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

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

2. С ножом против паровоза
Яндекс.Субботник — 25 апреля ’09
1. Верстальщик и графика
2. Рабочий станок
3. Особенности укрощения Ps
4. Приёмы кунфу
5. Изображения на диете
6. Что дальше?
2

3. Верстальщик и графика
Особенности профессии
1. Графика — основное выразительное средство
3

4. Верстальщик и графика
Особенности профессии
1. Графика — основное выразительное средство
2. Верстальщик — связующее звено
4

5. Верстальщик и графика
Особенности профессии
1. Графика — основное выразительное средство
2. Верстальщик — связующее звено
3. Форматы графики и редактор
5

6. Верстальщик и графика
Форматы графики
1. PSD — отраслевой стандарт
2. PNG слоёный
3. PNG полноцветный (PNG 24/32)
4. PNG 8‐битный
5. GIF 8‐битный
6. JPG полноцветный
6

7. Рабочий станок
Тщетные поиски альтернативы
Флагманы
1. Adobe Photoshop 2. Adobe Fireworks
7

8. Рабочий станок
Тщетные поиски альтернативы
Чисто поржать
3. Photoshop Elements 4. GIMP, GIMP#
8

9. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Adobe Паровоз
1. Всё самое грустное в названии (Photoshop)
9

10. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Adobe Паровоз
1. Всё самое грустное в названии (Photoshop)
2. Остальное — в меню Filter и 3D
10

11. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Adobe Паровоз
1. Всё самое грустное в названии (Photoshop)
2. Остальное — в меню Filter и 3D
3. В руки — напильник…
11

12. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
1. Конвертация в RGB
RGB Color — Cmd + Shift + R
12

13. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
2. Отражение слоя
Flip Horizontal — Cmd + Opt + H
Flip Vertical — Cmd + Opt + V
13

14. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
2. Отражение слоя
Flip Horizontal — Cmd + Opt + H
Flip Vertical — Cmd + Opt + V
3. Отражение холста
Flip Canvas Horizontal — Cmd + Shift + H
Flip Canvas Vertical — Cmd + Shift + V
14

15. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
4. Поворот холста
90° CW — Cmd + Shift + C (по часовой)
90° CCW — Cmd + Shift + Opt + C (против часовой)
15

16. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
4. Поворот холста
90° CW — Cmd + Shift + C (по часовой)
90° CCW — Cmd + Shift + Opt + C (против часовой)
5. Размер изображения и холста
Image Size — Cmd + Opt + I
Canvas Size — Cmd + Opt + C
16

17. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
6. Работа со стилями слоя
Copy Layer Style — Ctrl + Cmd + C
Paste Layer Style — Ctrl + Cmd + V
Clear Layer Style — Ctrl + Cmd + X
17

18. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
7. Дублирование слоя
Duplicate Layer — Cmd + Shift + D
18

19. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
7. Дублирование слоя
Duplicate Layer — Cmd + Shift + D
8. Создание слоя для экспорта
New Layer Based Slice — Cmd + Shift + L
19

20. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
7. Дублирование слоя
Duplicate Layer — Cmd + Shift + D
8. Создание слоя для экспорта
New Layer Based Slice — Cmd + Shift + L
9. Ваше любимое действие…
20

21. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Инструменты и панели
1. Под рукой только самое необходимое…
21

22. 22

23. 23

24. 24

25. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Инструменты и панели
1. Под рукой только самое необходимое
25

26. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Инструменты и панели
1. Под рукой только самое необходимое
2. Остальное — повешено на горячие клавиши
26

27. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Инструменты и панели
1. Под рукой только самое необходимое
2. Остальное — повешено на горячие клавиши
3. Все настройки сохраняются в профиль (Workspace)
27

28. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож…
28

29. 29

30. 30

31. 31

32. 32

33. 33

34. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
34

35. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
2. Настройки экспорта…
35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
2. Настройки экспорта
43

44. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
2. Настройки экспорта
3. Теперь правила ваши…
44

45. 45

46. 46

47. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. Любимые грабли
47

48. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. Любимые грабли
2. Простое решение?
48

49. Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. Любимые грабли
2. Простое решение?
3. Ну, не совсем простое :)
49

50. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
1. Стандартное цветовое пространство для веба — sRGB
50

51. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
1. Стандартное цветовое пространство для веба — sRGB
2. Средняя гамма приравнивается к значению 2.2
51

52. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
1. Стандартное цветовое пространство для веба — sRGB
2. Средняя гамма приравнивается к значению 2.2
3. Гамма Windows — 2.2
52

53. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
1. Стандартное цветовое пространство для веба — sRGB
2. Средняя гамма приравнивается к значению 2.2
3. Гамма Windows — 2.2
Гамма Mac OS X 10.5 Leopard — 1.8
53

54. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
1. Стандартное цветовое пространство для веба — sRGB
2. Средняя гамма приравнивается к значению 2.2
3. Гамма Windows — 2.2
Гамма Mac OS X 10.5 Leopard — 1.8
Гамма Mac OS X 10.6 Snow Leopard — 2.2
54

55. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
4. Windows XP, Vista и Linux используют для
изображений без профиля sRGB
55

56. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
4. Windows XP, Vista и Linux используют для
изображений без профиля sRGB
5. Mac OS X использует для изображений без профиля
цветовой профиль монитора
56

57. Особенности укрощения Ps
Цвет в профиль и анфас
Теория
4. Windows XP, Vista и Linux используют для
изображений без профиля sRGB
5. Mac OS X использует для изображений без профиля
цветовой профиль монитора
6. Браузеры не используют профили вообще *
57

58. Особенности укрощения Ps
Цвет в профиль и анфас
Идеальным веб-дизайнерам
1. Калибровать монитор с гаммой 2.2
58

59. Особенности укрощения Ps
Цвет в профиль и анфас
Идеальным веб-дизайнерам
1. Калибровать монитор с гаммой 2.2
2. В качестве рабочего профиля использовать sRGB
К примеру — Europe Web/Internet
59

60. Особенности укрощения Ps
Цвет в профиль и анфас
Идеальным верстальщикам
1. Калибровать монитор с гаммой 2.2
2. В качестве рабочего профиля использовать sRGB
К примеру — Europe Web/Internet
60

61. Особенности укрощения Ps
Цвет в профиль и анфас
Идеальным верстальщикам
1. Калибровать монитор с гаммой 2.2
2. В качестве рабочего профиля использовать sRGB
К примеру — Europe Web/Internet
3. И ещё кое‐что…
61

62. 62

63. 63

64. 64

65. 65

66. 66

67. 67

68. Особенности укрощения Ps
Цвет в профиль и анфас
Несчастным верстальщикам
1. Рабочий профиль sRGB, Гамма 2.2
68

69. Особенности укрощения Ps
Цвет в профиль и анфас
Несчастным верстальщикам
1. Рабочий профиль sRGB, Гамма 2.2
2. В диалоге о несовпадении цветовых профилей…
69

70. 70

71. 71

72. 72

73. 73

74. 74

75. Особенности укрощения Ps
Цвет в профиль и анфас
Несчастным верстальщикам
1. Рабочий профиль sRGB, Гамма 2.2
2. В диалоге о несовпадении цветовых профилей… Гм.
75

76. Особенности укрощения Ps
Цвет в профиль и анфас
Несчастным верстальщикам
1. Рабочий профиль sRGB, Гамма 2.2
2. В диалоге о несовпадении цветовых профилей… Гм.
3. В чём же правда, брат?
76

77. Особенности укрощения Ps
Цвет в профиль и анфас
Решение
1. Всем работать в sRBG и не иметь проблем
77

78. Особенности укрощения Ps
Цвет в профиль и анфас
Решение
1. Всем работать в sRBG и не иметь проблем
2. В особых случаях — конвертировать в рабочий профиль.
Но конвертировать осторожно, без дизеринга.
78

79. Особенности укрощения Ps
Цвет в профиль и анфас
Решение
1. Всем работать в sRBG и не иметь проблем.
2. В особых случаях — конвертировать в рабочий профиль.
Но конвертировать осторожно, без дизеринга.
3. Использовать неадекватный цветовой профиль.
И да поможет вам бог…
79

80. Особенности укрощения Ps
Цвет в профиль и анфас
Решение
1. sRBG, Proof Colors, Convert to sRGB
2. sRGB, Proof Colors, Convert to sRGB
Convert to the Working Space, Use Dither
3. sRBG, Proof Colors, Convert to sRGB,
Use the embedded profile
80

81. Особенности укрощения Ps
Цвет в профиль и анфас
Решение
p.s. Отдельное спасибо Александру Шуваеву
81

82. Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
82

83. Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
2. Использование вещей по назначению
83

84. Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
2. Использование вещей по назначению
3. Примеры…
84

85. 85

86. 86

87. 87

88. 88

89. 89

90. 90

91. 91

92. 92

93. 93

94. 94

95. 95

96. 96

97. 97

98. Cmd + Shift + Left
98

99. Cmd + Alt + H
99

100. Cmd + Shift + Down
100

101. Cmd + Alt + V
101

102. 102

103. 103

104. Приёмы кунфу
Быстрее, выше, сильнее
Торт слоёный
1. Выход из двумерного пространства
104

105. Приёмы кунфу
Быстрее, выше, сильнее
Торт слоёный
1. Выход из двумерного пространства
2. Дискретность…
105

106. 106

107. wtf.jpg
107

108. 108

109. wtf.gif
109

110. wtf.jpg
110

111. Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
111

112. Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
2. AlphaImageLoader для IE6 — проклятие на века
112

113. Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
2. AlphaImageLoader для IE6 — проклятие на века
3. А всегда ли он нужен?
113

114. Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
2. AlphaImageLoader для IE6 — проклятие на века
3. А всегда ли он нужен? Ответ — не всегда.
114

115. Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1. pngcrush, optipng, jpegtran
115

116. Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1. pngcrush, optipng, jpegtran
2. PngThing, PngCrusher (Mac OS X)
116

117. Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1. pngcrush, optipng, jpegtran
2. PngThing, PngCrusher (Mac OS X)
3. ImageOptim…
117

118. 118

119. 119

120. Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1. pngcrush, optipng, jpegtran
2. PngThing, PngCrusher (Mac OS X)
3. ImageOptim
120

121. Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1. pngcrush, optipng, jpegtran
2. PngThing, PngCrusher (Mac OS X)
3. ImageOptim
4. SmushIt…
121

122. 122

123. Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
123

124. Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
2. Мгновенная отрисовка
124

125. Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
2. Мгновенная отрисовка
3. От 28‐ми до 1‐й…
125

126. 126

127. 127

128. 128

129. 129

130. 130

131. Изображения на диете
Быть умнее паровоза
Спрайты
1. http://webo.in (по‐русски)
2. http://yuiblog.com/blog (по‐английски)
131

132. Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
132

133. Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
2. Макетонарезочные автоматы
133

134. Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
2. Макетонарезочные автоматы
3. Смерть оформительской графики…
134

135. Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
3. Смерть оформительской графики
box‐shadow
border‐radius
border‐image
text‐shadow
Подробнее — http://css3.info
135

136. С ножом против паровоза
Яндекс.Субботник — 25 апреля ’09
Спасибо!
Вадим Макеев — http://pepelsbey.net
136