You are on page 1of 112

С ножом против паровоза

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

Вадим Макеев

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

Спасибо!

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

112