14 февраля весь мир будет праздновать День Святого Валентина - покровителя всех влюбленных! И нам приятно по этому поводу представить симпатичный урок веб дизайна о создании праздничного плаката или открытки!

Время: до 1 часа

Навыки для "прокачки":

- создание сложной векторной формы (вырезание форм) - Pen tool
- корректирование векторных форм
- работа с кистью
- работа с многослойным документом
- работа со стилями слоя
- работа с масками

Для повторения урока можно скачать "набор кистей звезды №1", "набор кистей звезды №2".

Создадим новый документ (Ctrl + N) размером 1920px на 1200px и разрешением 72 точек / дюйм. Нажмите на иконку Добавить стиль слоя (Add layer style (fx)) в нижней части панели слоев и выберете Наложение градиента (Gradient Overlay). Градиент Радиальные (Radial).



Щелкните по цветовой панели, чтобы открыть редактор градиента и установить цвета как показано ниже. Нажмите OK после выбора цветов.





Далее создайте новый слой (Ctrl + Shift + N) и выберете Кисть (Brush Tool (B)) с жесткими краями (Hardness 100%).



Используйте эту кисть для создания множества мелких кругов # F00202 цвета (выбрать цвет можно, дважды кликнув внизу панели инструментов на 2-х квадратах. Выберите кисть другого размера (клавиши {}) и уменьшите Непрозрачность кисти (Opacity).



Затем начните рисовать сердце. Для этого выберете инструмент Перо (Pen Tool (P)), установите режим рисования на Фигура (Shape Layers) в панели настроек. Далее создайте такую форму, как показано на рисунке ниже.Чтобы создать изгибающиеся линии, кликайте на те же точки холста, что отмечены на скрине ниже, и, не отпуская мышь, ведите курсор в сторону. Чтобы создать острый угол, просто кликните 1 раз. Чтобы удалить неудачную точку, используйте Backspace. Чтобы закрыть контур, кликните на точку, с которой начали. Для коррекции точек на готовой фигуре, кликните, удерживая Ctrl на нужной точке и перемещайте курсор. Также можно корректировать изгибы, но кликать, удерживая Ctrl, нужно на концах "усиков". Поэкспериментируйте с фигурой.



Добавьте Стиль слоя Наложение градиента (Gradient Overlay) для фигуры.



Установите цвета градиента, как показано на рисунке. Нажмите OK.





Сделайте копию последнего слоя (Ctrl + J) и удалите стиль Gradient Overlay на этом слое (перетащите его с панели слоем в корзину). Выберете инструмент Выделение контура (Path Selection Tool (A)), чтобы выбрать путь, как показано на рисунке.



Нажмите Alt + SHIFT и, удерживая, используйте стрелку вправо на клавиатуре для перемещения пути копирования. Ваш путь раздвоится.



Выберете путь в Path Selection Tool (A) и с помощью Free Transform (Ctrl + T) сделайте его меньше (потяните за края к центру).



После уменьшения установите пункт Вычитание из формы (Subtract from shape area) как на панели в скрине ниже.



Измените цвет этого векторного слоя на белый (дважды кликнув на иконке цвета слоя в панели слоев).



Создайте маску на том же слое, выбрав Добавить маску слоя (Add layer mask) в нижней части панели слоев. Далее выберете мягкую круглую кисть черного цвета.



Используйте эту кисть, рисуя в маске (в панели слоев кликнув на иконку маски), чтобы скрыть следующие области также, как у нас:



Создайте новый слой и выберете мягкую круглую кисть. Цвет кисти # С50404. Нарисуйте произвольные пятна, как у нас:



Удерживая нажатой клавишу Alt, щелкните между новым слоем и слоем, содержащим сердце в панели слоев, чтобы создать Обтравочную маску (Сlipping mask). Разукрашенными окажутся только те области, которые находятся над белым слоем.





Сделайте еще одну копию слоя первого сердца и удалите стиль Gradient Overlay. С помощью Свободной трансформации (Free Transform (Ctrl + T)), и стрелки "вниз" переместите слой.



Создайте Маску слоя, выбрав Добавить маску слоя (Add layer mask) в нижней части панели слоев. Выберете мягкую круглую кисть черного цвета.



Рисуйте в маске, чтобы скрыть следующие области на сердце, как это показано ниже. Изменяйте Напрозрачность (Opacity) кисти для лучшего результата.



Теперь создадим верхней блик на сердце. Выберите Перо (Pen Tool (P)) и установите режим рисования на Фигуру (Shape Layers). Создайте примерно такую форму.



Установите Заливку (Fill) слоя 0% и нажмите на иконку Добавить стиль слоя (Add layer style), чтобы выбрать Наложение градиента (Gradient Overlay).



Установите цвета градиента, как показано на рисунке. Нажмите OK.





Создайте маску слоя и выберете мягкую круглую кисть черного цвета (установите Непрозрачность (Opacity) до 40%). Рисуйте в маске, чтобы скрыть области:





Объедините в группу все слои сердца (кликайте на названии слоев, удерживая нажмите CTRL) Далее, как нужные слои выделены, нажмите Ctrl + G. Сделайте копию группы (перетащив на значке нового слоя под палитрой слоев) и выберете Свободную трансформацию (Free Transform (Ctrl + T)), чтобы уменьшить и развернуть наше новое сердце (для поворота нажмите правой кнопкой на сердце и выберете Отразить по горизонтали (Flip Horizontal). Переместите его, как на нашем скрине:



Создайте новый слой. Выберете Мягкую черную кисть и кликните под сердцами. Далее, используя Свободную трансформацию растяните этот элемент. Получится тень под сердцами.



Наша открытка почти готова! Осталось только создать звездные мерцания (можно с помощью нашего набора кистей) и написать текст! Поздравляем с завершением этого урока веб дизайна!