Академический Документы
Профессиональный Документы
Культура Документы
Вадим Макеев
1
С ножом против паровоза
Яндекс.Субботник — 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
полноцветный
(PNG
24/32)
4.
PNG
8‐битный
5.
GIF
8‐битный
6.
JPG
полноцветный
6
Рабочий станок
Тщетные поиски альтернативы
Флагманы
1. Adobe Photoshop 2. Adobe Fireworks
7
Рабочий станок
Тщетные поиски альтернативы
Чисто поржать
3. Photoshop Elements 4. 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
RGB
Color
—
Cmd
+
Shift
+
R
12
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
1.
Конвертация
в
RGB
RGB
Color
—
Cmd
+
Shift
+
R
2.
Отражение
слоёв
Flip
Horizontal
—
Cmd
+
Opt
+
H
Flip
Vertical
—
Cmd
+
Opt
+
V
13
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
3.
Размер
изображения
и
холста
Image
Size
—
Cmd
+
Opt
+
I
Canvas
Size
—
Cmd
+
Opt
+
C
14
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Горячие клавиши
3.
Размер
изображения
и
холста
Image
Size
—
Cmd
+
Opt
+
I
Canvas
Size
—
Cmd
+
Opt
+
C
4.
Отражение
холста
Flip
Canvas
Horizontal
—
Cmd
+
Shift
+
H
Flip
Canvas
Vertical
—
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. Диалог «Save for Web & Devices» + Нож…
25
26
27
28
29
30
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
31
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
2. Настройки экспорта…
32
33
34
35
36
37
38
39
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Эффективный экспорт
1. Диалог «Save for Web & Devices» + Нож
2. Настройки экспорта
3. Теперь правила ваши…
40
41
42
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. Любимые грабли
43
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. Любимые грабли
2. Простое решение…
44
45
46
47
48
49
50
51
Особенности укрощения Ps
От мольберта к фрезеровочному станку
Цветовые профили
1. View > Proof Setup > Monitor RGB
2. Edit > Color Settings > Monitor Color, Ask
3. File > Save for Web > Convert to sRGB
4. Open… Convert document colors to…
52
Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
53
Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
2. Использование вещей по назначению
54
Приёмы кунфу
Быстрее, выше, сильнее
При чём тут холодное оружие?
1. Экономия времени
2. Использование вещей по назначению
3. Примеры…
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Cmd + Shift + Left
69
Cmd + Alt + H
70
Cmd + Shift + Down
71
Cmd + Alt + V
72
73
74
Приёмы кунфу
Быстрее, выше, сильнее
Торт слоёный
1. Выход из двумерного пространства
75
Приёмы кунфу
Быстрее, выше, сильнее
Торт слоёный
1. Выход из двумерного пространства
2. Дискретность…
76
77
wtf.jpg
78
79
wtf.gif
80
wtf.jpg
81
Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
82
Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
2. AlphaImageLoader для IE6 — проклятие на века
83
Приёмы кунфу
Быстрее, выше, сильнее
Проще говоря
1. PNG‐24 — это отлично
2. AlphaImageLoader для IE6 — проклятие на века
3. А всегда ли он нужен?
84
85
86
87
88
89
90
91
92
93
Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1.
pngcrush
‐rem
alla
‐brute
‐reduce
src.png
dest.png
jpegtran
‐copy
none
‐optimize
src.jpg
dest.jpg
94
Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1.
pngcrush
‐rem
alla
‐brute
‐reduce
src.png
dest.png
jpegtran
‐copy
none
‐optimize
src.jpg
dest.jpg
2. PngThing, PngCrusher (Mac OS X)
95
Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1.
pngcrush
‐rem
alla
‐brute
‐reduce
src.png
dest.png
jpegtran
‐copy
none
‐optimize
src.jpg
dest.jpg
2. PngThing, PngCrusher (Mac OS X)
96
Изображения на диете
Быть умнее Паровоза
Экономим на спичках
1.
pngcrush
‐rem
alla
‐brute
‐reduce
src.png
dest.png
jpegtran
‐copy
none
‐optimize
src.jpg
dest.jpg
2. PngThing, PngCrusher (Mac OS X)
3. Smush.it…
97
98
Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
99
Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
2. Мгновенная отрисовка
100
Изображения на диете
Быть умнее Паровоза
Спрайты
1. Экономия на http‐запросах
2. Мгновенная отрисовка
3. От 28‐ми до 1‐й…
101
102
103
104
105
106
Изображения на диете
Быть умнее паровоза
Спрайты
1. http://webo.in (по‐русски)
2. http://yuiblog.com/blog (по‐английски)
107
Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
108
Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
2. Макетонарезочные автоматы
109
Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
1. Photoshop не только для «эффекта красных глаз»
2. Макетонарезочные автоматы
3. Смерть оформительской графики…
110
Что дальше?
Развитие — ключ к успеху
Не верстальщик, но веб-технолог
3. Смерть оформительской графики
box‐shadow
border‐radius
border‐image
text‐shadow
Подробнее — http://css3.info
111
С ножом против паровоза
Яндекс.Субботник — 31 января ’09
Спасибо!
112