Читать

Урок 40. Рисуем временную линию

06.07.2019 / Уроки

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

Предположим, что наша линия идёт сверху вниз. Такой вариант подойдёт для длинных временных линий, которые по горизонтали не умещаются или рождают длинную прокрутку. Проводим линейку посередине рабочего пространства и рисуем вверху круг, используя инструмент "Окружность". Выбираем инструмент «стрелка» (А), копируем фигуру (Ctrl+C), вставляем (Ctrl+V) и трансформацией (Ctrl+T) немного уменьшаем. Получившийся уменьшенный круг нужно вычесть из большего:


Урок фотошопа. Рисуем временную линию


При активном контуре получившегося «бублика» зажимаем Shift и рисуем вытянутый прямоугольник, который, собственно, и будет играть роль временной линии:


Урок фотошопа. Рисуем временную линию


Теперь расставляем на этой линии кружочки поменьше, которые будут определять временные этапы:


Урок фотошопа. Рисуем временную линию


СРазу можно обозначить верхнюю и нижнюю позиции, т. е. начало линии и её конец (может быть открытым):


Урок фотошопа. Рисуем временную линию


Переходим к событиям. Предлагаю выводить текстовые блоки на подложках. Для этого рисуем прямоугольники со скруглёнными углами и добавляем на одну из граней фигуру квадрат - трансформируем его, повернув на 45 градусов, чтобы получилась эдакая стрелочка:


Урок фотошопа. Рисуем временную линию


Перекрашиваем получившуюся фигуру в белый цвет и в стилях слоя (по двойному щелчку в палитре слоёв) настраиваем тень:


Урок фотошопа. Рисуем временную линию


Создавая дубли этой подложки и отражая их по горизонтали, расставляем по временным точкам так, чтобы одно событие шло слева, а следующее — справа, и так далее:


Урок фотошопа. Рисуем временную линию


Естесственно, это примерное расположение событий, так как мы ещё не наполнили их информацией. Где-то нужно будет уменьшить высоту подложки и тогда событие поднимется немного вверх, а где-то, наоборот. увеличится и, соответственно, спустится вниз. Заполняем подложки текстом:


Урок фотошопа. Рисуем временную линию


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


Урок фотошопа. Рисуем временную линию


По обыкновению, выкладываю исходник урока — zip-архив (84 Кб)

Скачать архив




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





Просмотров: 21 / Теги: урок, тайм лайн, Веб-дизайн, фотошоп

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

avatar


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

Урок 20. Рисуем новогоднюю открытку

Предновогоднее настроение само навевает тему следующего урока. Неинтересно использовать готовые открытки из интернета, которыми пестрят ленты близких людей. Куда оригинальнее смотрятся открытки "сделанные своими руками"!


25.12.2016 / Уроки

Урок по фотошопу. Мини-профиль в стиле фэнтези

В одном из уроков мы уже рисовали простенький мини-профиль с налётом фэнтезийной темы. Вдохновившись «Варкрафтом», мне захотелось нарисовать ещё один вариант, но на этот раз сильнее выразить в нём стиль фэнтези.


19.09.2016 / Уроки

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


27.03.2015 / Отзывы

Для творческого человека новогоднее настроение играет особую вдохновляющую роль. Создать это настроение можно и самому. К примеру, своими руками изготовить украшения для дома или работы.


08.12.2016 / Любопытное



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