Читать

Урок 33. Рисуем календарь, вырезанный в дереве

19.11.2018 / Уроки

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

Начнём, как обычно, с основы: скрестим в центре рабочего файла линейки и нарисуем прямоугольник, который послужит нам в будущем деревянной доской.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Чтобы буквы и надписи не плясали, стоит сделать разметку для них. Можно сделать это посредством линейки, а можно нарисовать прямоугольник и размножить его, растянув дубликаты на равные промежутки в разные стороны.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Теперь переходим к надписям. Шрифт лучше выбирать без засечек, жирное начертание. В готовом виде при этом условии мы увидим более выразительный вариант, нежели, если бы мы использовали витиеватый или другой сложный шрифт.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Можно переходить к текстуре дерева. Изображение понравившейся текстуры переносим в рабочий файл и располагаем над доской-основанием. Дублируем слой с текстурой (Ctrl+J) и переносим дубликат над слоем с плашкой (под наименованием месяца). Для обоих слоёв с текстурой (поочерёдно) создаём обтравочную маску (Ctrl+Alt+G).


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Нижнюю текстуру немного затемняем - это можно сделать с помощью уровней (Ctrl+L). А затем рисуем ещё один прямоугольник, начиная от нижней грани плашки с названием месяца, по ширине с фигурой-основанием. Создаём слой-маску и градиентом уводим новую фигуру в прозрачность. А режим наложения слоя меняем на "Умножение".


Урок по фотошопу. Рисуем календарь, вырезанный в дереве

Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Предположим, что наименование месяца у нас вырезано внутрь дерева. Дублируем затемнённую текстуру дерева и перемещаем над слоем с месяцем. Не помешает даже ещё немного затемнить слой с текстурой. Создаём обтравочную маску. Теперь переходим в стили слоя с названием месяца (двойным щелчком) и настраиваем эффекты.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве

Урок по фотошопу. Рисуем календарь, вырезанный в дереве

Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Для дальнейшей работы, нужно слить слои с числами и сокращениями дней недели в один слой (выделяем слои и жмём Ctrl+E), а затем выделением отметить нужные фрагменты и вырезать их на новый слой (выделяем, кликаем правой кнопкой и в выпавшем списке выбираем "Вырезать на новый слой"). Таким образом получится 3 отдельных слоя: дни недели, числа текущего месяца, числа неактивного месяца.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Теперь проделываем то же самое, что мы делали на шаге с названием месяца, но уже с числами неактивного месяца. В нашем примере это первые числа ноября. Стиль слоя копируем со слоя с названием месяца и вставляем на слой с числами неактивного месяца. Текстуру можно затемнить ещё сильнее.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Переходим к числам текущего месяца. Дублируем светлую текстуру и переносим на её над слоем с числами. Оборачиваем их текстурой (создав обтравочную маску), а затем двойным кликом в палитре слоёв переходим к стилям слоя с числами.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве

Урок по фотошопу. Рисуем календарь, вырезанный в дереве

Урок по фотошопу. Рисуем календарь, вырезанный в дереве


С днями недели проделываем всё то же самое. Стили слоя можно скопировать с предыдущего слоя. Слой с текстурой осветляем ещё немного, чтобы дни недели были светлее чисел текущего месяца.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Осталось выделить сегодняшний день на календаре. Я произвольно выбрал 17 октября. Под этим числом рисуем фигуру "прямоугольник со скруглёнными углами". Стили для этого слоя копируем со слоя с наименованием месяца. Цвет прямоугольнику придаём тёмно-коричневый. И меняем уровень заливки этого слоя на 50%


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Практически всё! Осталось добавить небольшой блик сверху и затемнения снизу. Рисуем прямоугольники: один вверху над слоем с плашкой под названием месяца, второй - внизу этой самой плашки, а третий (чуть более широкий) - внизу доски-основания. Все прямоугольники не должны выходить за пределы общих границ нашего календаря. Цвет прямоугольникам можно выставить такой же, как цвет дерева под ними. Меняем режим наложения этих фигур. Для верхней - на "Экран", для нижних - на "Умножение".


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


В-общем-то, всё! Можно, конечно, добавить ещё большую реалистичность, сделав края дерева неровными, текстуру не столь правильной, и т.д., но в случае с реализацией идеи как таковой, и тем более, с использованием подобной графики в веб-дизайне, мы создали практически идеальный вариант календаря, вырезанного в дереве.


Урок по фотошопу. Рисуем календарь, вырезанный в дереве


Исходник урока, запакован в zip-архив весом 5,7 МБ

Скачать архив (Яндеск.Диск)




Самые первые уроки, рассчитанные для начинающих, смотрите здесь.






Комментарии (0)

avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА


ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ