—»     —»   Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут
  Раздел: Образование и Изучение   Комментариев: 1  

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут



Мы привыкли к графическому, блочному и табличному представлению данных, облегчающему нам усвоение информации. Таблицы-прейскуранты уже давно используются многими фирмами и индивидуальными предпринимателями в качестве реестров сводных данных о предлагаемых ими услугах. Если тариф у вас всего один, то составлять таблицу-прейскурант нет смысла. Но если их несколько, тогда это весьма удобный и презентабельный способ представления информации сразу обо всех и о каждом в отдельности. Мы построим таблицу-прейскурант средствами программы Adobe Photoshop, справимся минут за 20-30.

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Готовы?

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Шаг 1

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Создайте новый документ размера 1200x600 пикселов. Сам прейскурант будет 1000x340 пикселов, но нам нужно место ещё и для его обработки, поэтому оставляем себе некоторый запас.

Шаг 2

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Задействуйте лекало построения прямоугольника со сглаженными углами (Rounded Rectangle Tool (U)) и начертите контур размером 1000x340 пикселов. Наложите эффект едва заметной подсветки снаружи и обводку плотностью в 1 пиксел. Цвет штриха обводки выберите чуть темнее окраски самого контура.

Шаг 3

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Разобьём нашу таблицу-прейскурант на три части. "Заголовок", "полезное содержимое" и "призыв к действию". "Заголовок" полностью отведём названию услуги. Задействуйте лекало построения прямоугольника (Rectangle Tool (U)) и начертите контур шириной в 1000 пикселов и высотой в 70 пикселов. Залейте его тёмно-серой (#e0e3e3) краской и наложите тень (Drop Shadow) для достижения того же эффекта, что и посредством применения наружной подсветки (“Outer Glow”), с той лишь разницей, что оттеняться будет та сторона, которую мы укажем (задав величину угла).

Шаг 4

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Наша таблица-прейскурант будет содержать описания четырёх тарифных планов, на которые можно подписаться. Обычно один из пунктов такого списка выделяется и помечается как "Лучший выбор" или ещё как-то подобным образом. Задействуйте лекало построения прямоугольника со сглаженными углами (Rounded Rectangle Tool (U)) и начертите контур размером 250x290 пикселов. Наложите на него те же эффекты, что и на слой основы.

Шаг 5

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Повторите третий шаг, сделав поправку для заголовка. Залейте его поле серой краской более тёмного тона (#d1d1d1).

Шаг 6

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Текстовые фрагменты в нашем прейскуранте будут набираться двумя шрифтами - “Open Sans” и “Helvetica”. Названия тарифов в заголовочной части таблицы наберите полужирным “Open Sans”.

Шаг 7

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Стоимость услуг для каждого из тарифов наберите шрифтом “Helvetica”. Чтобы выделить наш “Особый” тариф, добавим яркости его красному ценнику.

Шаг 8

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Переходим к "полезному содержимому". Описывать услуги, которые вы предлагаете потребителю, будем в три строки. Схема довольно проста. Текст наберём шрифтом “Open Sans”. Цифры - жирным, размер 24 типографских пункта. Текст - обычным, размер - 14 типографских пунктов. Отделим описание каждого параметра точечными линиями, легко заменимыми на сплошные.

Шаг 9

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

К описанию каждого тарифа нужно добавить кнопку с призывом к действию, нажатием на которую клиенты могли бы запускать его выполнение. Будет ли это получение дополнительных сведений или переход к оплате, но кнопка такая в любом случае нужна. Задействуйте лекало построения прямоугольника со сглаженными углами (Rounded Rectangle Tool (U)) и нарисуйте серую плашку, наложите тёмно-серую тень (Drop Shadow).

Шаг 10

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Наложите эффект градиента (Gradient Overlay), выбрав способом смешивания (Blend Mode) мягкую подсветку (Soft Light), предел прозрачности (Opacity) установите в 40 %.

Шаг 11

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Доведите кнопку до кондиции, обведя её объёмным штрихом.

Шаг 12

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Нанесите на кнопку надпись жирным шрифтом “Open Sans” размера 24 типографских пункта. "Выбрать тариф", по-моему, здесь вполне к месту. Теперь дважды повторите этапы заполнения поля "полезного содержимого" и кнопок призыва к действию, выровняйте объекты. Если боитесь ошибиться, сверяйтесь с готовым макетом.

Шаг 13

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Оформление поля "Особого" тарифа будет отличаться, разве что, большей яркостью ценника и кнопки призыва к действию. Красная кнопка строится так же, как серая, разница лишь в цветах заливки основы (#ed161c) и штриха обводки, как показано ниже.

Шаг 14

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

Замените серую обводку красной вот такого вида и доведите кнопку до кондиции.

Готовый макет

Уроки Photoshop: Построение в Photoshop прейскуранта за 20 минут

* Хотите вникнуть в детали? – Скачать PSD

Что вы скажете об этом пособии? Поделитесь вашим мнением!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop
Опубликовал Design FactoRy   Прочитано (раз): 6972   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 сентября 2012 @ 20:34
Написал: 74enko — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Шаг 4. "и начертите контур размером 250x290 пикселов." - наверное имелось в виду 250х390, а то 290 очень уж мало получается.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Газовое пожаротушение москва
Газовые и дизельные электростанции. Оборудование газовой хроматографии
газовое-пожаротушение.москва
Купить стальные двери в г. Ступино
Защищеные стальные двери с любым видом покрытия. Долговечно и надежно
argusmsk.ru
Ангары купить
Бескаркасные арочные ангары. Изготовление и монтаж
vseangari.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31