Векторные возможности Adobe Photoshop

1. Векторные возможности Adobe Photoshop

2. Зачем Photoshop нужны векторные инструменты

Photoshop
прежде
всего
является
рас тро вы м
графичес ким
редакто ро м.
Но дизайнеру часто приходится совмещать растровые изображения и
простую векторную графику в одном документе.
Например:
• фотография + логотип;
• фотография + рекламный текстовый блок;
• баннер;
• карточка товара;
• рекламный пост;
• интерфейсный элемент;
• пиктограмма;
• простая иллюстрация;
• декоративная геометрия.

3. Что такое Shape Layer

Shape Layer позволяет хранить форму как редактируемый векторный
объект.
Поэтому мы можем:
• менять размер;
• менять положение;
• менять цвет;
• менять обводку;
• редактировать форму;
• комбинировать несколько фигур;
• трансформировать объект.

4. Контуры — Paths

Контур — это не готовая растровая
картинка.
Он описывает геометрию будущей
формы.
Контур можно:
• редактировать;
• сохранить;
• превратить в выделение;
• использовать для создания векторной
маски;
• заполнить цветом;
• обвести.

5. Инструмент «Перо» — Pen Tool

Pen To o l позволяет создавать точные контуры при помощи опорных
точек и управляющих направляющих.
Adobe описывает Pen Tool как инструмент создания плавных контуров с
помощью anchor points и handles.
Показываем:
• создание первой точки;
• создание второй точки;
• создание прямого сегмента;
• создание кривой;
• закрытие контура;
• редактирование точки.

6. Растрирование

Пока объект является векторным, Photoshop
хранит его как редактируемую форму.
После растеризации форма превращается в
пиксели.
После этого некоторые операции становятся
возможными, но мы теряем преимущества
редактируемого векторного объекта.
Adobe отдельно предупреждает: при
растеризации Shape Layer Photoshop преобразует
его в пиксели.
Фо рмула
Shape → векто р → редактируемая фо рма
Rasterize → пикс ели → рас тро вы й о б ъект

7. Три режима работы с векторными инструментами

При работе с инструментами фигур и
пера Photoshop позволяет выбирать
режим:
Shape
Создаётся Shape Layer с векторной
формой.
Path
Создаётся контур, который можно:
сохранить;
заполнить;
обвести;
превратить в выделение;
использовать для векторной маски.

8. Главное правило работы с Pen Tool

Пло хо й вариант
Студент ставит:
30–40 то чек на небо льшо й криво й.
Получается:
• трудно редактировать;
• появляются неровности;
• форма начинает «ломаться»;
• сложно менять пропорции.
Хо ро ший вариант
Студент определяет:
• начало кривой;
• конец кривой;
• характер изгиба.
И ставит минимальное количество точек.

9. Редактирование уже созданного контура

• Direct Selection Tool;
• перемещение точки;
• изменение ручек;
• добавление точки;
• удаление точки;
• изменение типа точки.

10. Объединение и вычитание форм

круг + прямо уго льник.
Можно получить:
• новую составную форму;
• отверстие;
• вырез;
• пересечение;
• отрицательное пространство.

11. Векторная маска

Обычная мас ка
Векто рная мас ка
Пиксельная
Векторная
Чёрный/белый/серый
Контур
Можно рисовать кистью
Редактируется точками
Хороша для мягких краёв
Хороша для точных геометрических краёв
Удобна для фотографий
Удобна для чётких форм

12.  Где векторная маска особенно полезна

Где векторная маска особенно полезна
• упаковка;
• логотип;
• предметная фотография;
• рекламный макет;
• карточка товара;
• интерфейс;
• геометрическая иллюстрация;
• подготовка объектов для композиции.
Особенно там, где граница должна быть:
то чно й, чис то й и мас штабируемо й.

13. НАЧАЛО БОЛЬШОЙ ПРАКТИКИ!

14. Практическая часть

Создать собственную векто рную пикто грамму в Photoshop.
Пиктограмма должна быть достаточно простой, чтобы её можно было
использовать:
• на сайте;
• в мобильном приложении;
• на плакате;
• в навигации;
• на упаковке.
После создания первой пиктограммы
верс ию то го же о бъекта.
Но меняет принцип:
Верс ия А
Только геометрические фигуры.
Верс ия Б
Геометрические фигуры + Pen Tool.

15. Продолжение

Создать мини-набо р из 5 пикто грамм для вымышленного сервиса.
Например:
«Прило жение для ко лледжа»
1. расписание;
2. преподаватели;
3. задания;
4. оценки;
5. сообщения.

16. Часть 2

Предлагаемые направления:
• технологическая компания;
• музыкальный сервис;
• игровая студия;
• кофейня;
• экологический проект;
• спортивный клуб;
• образовательный проект;
• приложение;
• арт-пространство;
• вымышленный бренд.
Например:
«Прило жение для по ис ка музыки»
Название:
SOUND
Идея:
«Музыка объединяет людей».
После этого студент должен написать:
Объект
Что изображает знак?
Идея
Что знак должен сообщать?
Характер
Выбрать 2–3 характеристики:
сделать минимум 3 разных варианта.
сначала придумать минимум три решения.
Например :
Вариант 1: наушники + круг.
Вариант 2: буква S + звуковая волна.
Вариант 3: абстрактная форма из двух пересекающихся дуг.

17. Продолжение

На основе своего знака создать:
1. Ло го тип
Знак + название.
2. Ико нка
Только знак.
3. Пикто грамма
Упрощённая версия знака.
4. Паттерн
Повторить элемент несколько раз и
создать декоративный рисунок.
5. Мини-по с тер
На нём должны присутствовать:
•знак;
•название;
•короткая фраза;
•графическая композиция.

18. Домашнее задание

Взять созданный сегодня знак.
Сделать
три
по с ледо вательны х
упро щения.
Верс ия 1
Полная.
Верс ия 2
Убрать примерно 30% деталей.
Верс ия 3
Максимально простая форма.
с тепени