Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем рисованную прайс-таблицу в Photoshop и Illustrator

22 мая 2013 | Опубликовано в Уроки | 4 Комментариев »

В этом уроке мы  будем создавать таблицу цен, которые вы можете добавить на ваш сайт либо использовать для дизайна полиграфической продукции. Урок не займет у вас много времени — вам понадобиться не больше получаса. Для выполнения урока мы будем использовать векторные и растровые редакторы, а именно Photoshop и Illustrator.

Подробности урока:

  • Программы: Adobe Photoshop / Adobe Illustrator
  • Версии: CS6 / CS5
  • Сложность: Beginner
  • Время: 30 Minutes

Исходники:

Конечный результат:

ptable-final

Шаг 1

Создайте в Photoshop новый файл и выберите инструмент Rectangle Tool (U) (Прямоугольник). Установите значения 250 для ширины и 600 для высоты. Заполните его цветом # FFFFFF (белый) и примените следующие стили: 

ptable-01
ptable-011
ptable-012
ptable-013

Шаг 2

Разместите текстуру бумаги и прикрепите слой с бумагой (Layer> Create Clipping Mask / Alt + Ctlr + G) к предыдущему — с белым прямоугольником.
ptable-02

Шаг 3

Теперь создайте новый файл в Illustrator. Выберите инструмент Type Tool (T) и сделайте любую надпись. Копируйте текст ( удерживайте Alt и перетащите текст). Мы не будет текст конвертировать в пульт, так как хотим сохранить редактируемый текст. Выберите один из текстов и примените обычную обводку (цвет:  C=100 M=95 Y=5 K=0). Удалите заливку  Fill — None. Затем перейдите к Effect>Distort & Transform>Roughen (Эффект>Искажение и деформация>Шипы) . Параметры будут зависеть от размера текста. В уроке был выбран шрифт Аrial Black с размерами 200pt. Не стесняйтесь эксперементировать со значениями, пока вы не будете удовлетворены результатом.

ptable-03
ptable-031

Шаг 4 

Теперь вы можете сохранить стиль, перетащив текст на панель стилей Styles.  Выберите второй текст и залейте его тем же цветом, что и в предыдущем шаге (обводку не применяйте). Затем перейдите в Effect> Stylize> Scribble (эффект > стилизация > каракули)и поэкспериментируйте с параметрами.

ptable-04

ptable-041

Шаг 5

Ваш текст должен выглядеть следующим образом:
ptable-05

Шаг 6

Выберите оба текста и нажмите Ctrl + C, чтобы скопировать их. Вернитесь в Photoshop и нажмите Ctrl + V. Поместите текст в качестве смарт-объекта и уменьшите его размеры.
ptable-06

Шаг 7

Добавьте еще текст. Для этого обратно перейдите в Illustrator и редактируйте тексты. Вы можете настроить дополнительные эффекты, чтобы придать ему более рандомный вид. 
ptable-07

Шаг 8

Добавьте несколько строк. Создавать их нужно в Illustrator, повторяя выполненный действия в 3-4шагах .
ptable-08

Шаг 9

Скачайте шрифт “Where stars shine the brightest”  из dafont.com. Создайте новый слой и выберите  инструмент Type Tool (T) (в Photoshop). Введите любой текст  (цвет: # 7d7d7d, размер: 32px) и примените следующие стили для создания эффекта надписи карандашом.
ptable-09
ptable-091
ptable-092

Шаг 10

Поместите текстуру Folded Paper Texture и измените режим наложения на  Color Burn (Затемнение основы) и уменьшите непрозрачность до 45%. Выберите белый  прямоугольник (созданный в шаге 1) и щелкните по значку маски слоя.
ptable-10

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

ptable-var

Автор: Alan Klim

Перевод: Дежурка

Возможно, Вас заинтересует:

Прайс-элементы в веб-дизайне

Создание логотипа в Adobe Illustrator — теория и практика

Создаем прайс-таблицу в Photoshop

Создаем векторные скетчи за 30 минут




Комментарии

  1. Дмитрий
    Thumb up Thumb down +8

    Урок, конечно, хорош, но на мой взгляд гораздо лучше будет просто написать ВРУЧНУЮ все то же самое на бумаге, потаскать ее денек в заднем кармане брюк и затем отсканировать.

    xerox21 Ответ:

    Thumb up Thumb down +1

    Намного эффектнее и живее получится, согласен.

  2. sfanta
    Thumb up Thumb down -1

    Ха...)Серавно прикольно^^

[an error occurred while processing the directive]


[an error occurred while processing the directive]