Читать

Урок 23. Рисуем прайс-таблицу

18.05.2017 / Уроки

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

Не нужно далеко ходить, возьмём для примера пакеты услуг Ucoz.


Урок по фотошопу. Рисуем прайс-таблицу


Начнём с основы - нарисуем подложки «Прямоугольником со скруглёнными углами».


Урок по фотошопу. Рисуем прайс-таблицу


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


Урок по фотошопу. Рисуем прайс-таблицу


Можно продублировать получившуюся «шапку» для двух других пакетов услуг. Добавим заголовки текстом. И сразу можно выделить цветом одну из подложек, показав тем самым состояние при наведении курсором.


Урок по фотошопу. Рисуем прайс-таблицу


Непосредственно информацию располагаем под заголовком. Она не должна быть слишком яркой, но и бледным цветом её тоже нельзя показывать.


Урок по фотошопу. Рисуем прайс-таблицу


Цены пакетов не должны сливаться с общей информацией, поэтому их пишем крупным шрифтом. И тут же необходимо разместить кнопку, побуждающую к приобретению пакета.


Урок по фотошопу. Рисуем прайс-таблицу


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


Урок по фотошопу. Рисуем прайс-таблицу


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


Урок по фотошопу. Рисуем прайс-таблицу

Урок по фотошопу. Рисуем прайс-таблицу


Исходник урока, запакован в архив - 65 КБ

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




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





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

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

avatar


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

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


28.01.2016 / Веб-дизайн

В новом уроке попробуем нарисовать простой сайдбар (навигационное вертикальное меню) для вымышленного сайта, к примеру, для портфолио некоего художника. В большинстве своём, сайдбары...


01.12.2014 / Уроки

В новом уроке мы нарисуем календарь. Только в данном случае будем рисовать не на весь год, а на один месяц. Покажу на примере весеннего месяца марта. Почему это так важно - определиться с месяцем? Потому что...


01.12.2014 / Уроки

Вдохновляющие примеры веб-дизайна

В новой подборке вдохновляющих примеров современного дизайна я вновь обратился к ресурсу Behance. Далее представлены фрагменты любопытных на мой взгляд работ от развивающихся веб-дизайнеров.


01.09.2016 / Веб-дизайн



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