Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание в фотошопе лаконичного и современного прайс-листа

Создание в фотошопе лаконичного и современного прайс-листа

Автор: sondar | Категория: Уроки Photoshop » Web | 20-02-2013, 23:31
Детали урока
Использованное ПО: Adobe Photoshop CS6
Сложность: средняя
Примерное время выполнения: 1 час

То, что мы будем создавать

Создание в фотошопе лаконичного и современного прайс-листа


Фотошоп часто используется для создания графики и макетов при веб-дизайне. Данный урок по фотошопу описывает процесс создания при помощи комбинирования векторных фигур и стилей слоя, прайс-листа для хостинговой компании. Итак, приступим!

Ресурсы урока
- пиксельный узор

Шаг 1: Подготовка
Начнем с создания нового документа (Command/Ctrl + N) размером 800x600 пикселей.

Создание в фотошопе лаконичного и современного прайс-листа


Ша2
Добавьте слой коррекции Цвет (Solid Color), который будет использован в качестве фона. Задайте цвет #f7f8eb.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 3
Скачайте бесплатный пиксельный узор. Затем дважды кликните по корректирующему слою, чтобы применить к нему стиль слоя Наложение узора (Pattern Overlay).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 4
Создайте новый слой и залейте его черным цветом. Пройдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 5
Задайте на палитре слоев Режим наложения (Blend mode) – Экран (Screen).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 6: Основа
Приступаем к созданию основы. Начертите скругленный прямоугольник радиусом 10 пикселей. Залейте его очень светлым синим цветом, без обводки.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 7
Дважды кликните по данному слою, чтобы открыть окно стилей слоя. Примените стили слоя Обводка (Stroke) и Внутренняя тень (Inner Shadow) с приведенными ниже настройками.

Создание в фотошопе лаконичного и современного прайс-листа

Создание в фотошопе лаконичного и современного прайс-листа

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 8: Панель заголовка
Продублируйте эту фигуру и измените цвет копии. Создайте в ее нижней части еще один прямоугольник, задав режим рисования “Вычесть из области фигуры” (Subtract). У нас получилась вот такая небольшая панель.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 9
Примените к ней стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay) с приведенными ниже настройками.

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


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

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 10
Добавьте текстовый заголовок прайс листа. Придайте ему эффект тиснения за счет применения стиля слоя Тень (Inner Shadow).

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 11: Информация о ценах
Теперь, задав больший шрифт, добавьте саму цену. Используйте серый цвет средней насыщенности. Примените к этому слою стили слоя Внутренняя тень (Inner Shadow), Тень (Inner Shadow) и Тиснение (Bevel and Emboss).

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Ниже вы можете увидеть разницу до и после применения стилей слоя.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 12
Добавьте к цене какую-либо дополнительную информацию.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 13: Перечень (Позиции)
Продублируйте слой с основой и измените ее цвет на #f0f0f0. Начертите поверх дубликата вот такие круг и прямоугольник в режиме Вычесть из области фигуры (Subtract).

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 14
Примените стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay).

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 15
Создайте поверх этой фигуры новый слой. Прокрасьте верхнюю часть фигуры белым цветом. Нажатием Command/Ctrl + Alt + G преобразуйте этот слой в обтравочную маску. Теперь создайте еще один новый слой под этой фигурой и черными цветом добавьте ей тень.

Создание в фотошопе лаконичного и современного прайс-листа


Вот результат в масштабе 100%.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 16
Далее, при помощи инструмента Текст (Type tool) добавьте позиции в список.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 17
Разделите каждую позицию в списке 1-пиксельной черной линией.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 18
Убедитесь, что линии все еще активны, затем кликните по вот этой кнопке Другие параметры (More Options) и выберите пунктирную линию.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 19
Создайте для слоя с линиями слой-маску и прокрасьте правые и левые концы линий черными цветом.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 20: Кнопка
Начертите скругленный прямоугольник цвета #a7bed5.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 21
Примените к фигуре стили слоя Обводка (Stroke), Внутреннее свечение (Inner Glow) и Наложение градиента (Gradient Overlay).

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 22
Продублируйте кнопку, расположите копию под оригиналом и сдвиньте ее на несколько пикселей вниз.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 23
Примените к этой фигуре такие же стили слоя, как и к первой, только увеличьте Непрозрачность (Opacity) стиля слоя Наложение градиента (Gradient Overlay), чтобы сделать ее темнее.

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Так же, чтобы добавить мягкую тень вокруг кнопки, мы применим стиль слоя Тень (Inner Shadow).

Создание в фотошопе лаконичного и современного прайс-листа


Вот как она должна выглядеть в итоге.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 24
Нанесите на поверхность кнопки текст. Примените к нему Тень (Inner Shadow), чтобы придать ему эффект тиснения.

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 25
Выделите все слои, относящиеся к созданному прайс-листу, и нажатием Command/Ctrl + G объедините их в одну группу. Теперь, удерживая Alt, перетащите группу в сторону, создавая ее копию. Создайте, таким образом, 3 таблицы.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 26
Конечно же, они не должны быть идентичными, поэтому измените содержащуюся в них информацию о ценах.

Создание в фотошопе лаконичного и современного прайс-листа


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

Создание в фотошопе лаконичного и современного прайс-листа


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

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 29
Так же измените положение кнопки.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 30
Подкорректируйте фигуру основы, сделав ее чуть выше.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 31
Добавьте дополнительную информацию.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 32
Натяните правую грань второй таблицы с ценами поверх левой грани первой таблицы.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 33
Ниже вы можете увидеть результат до и после модификации фигур.

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 34
Далее еще немного приподнимем выделенный тарифный план, придав ему чуть более удлиненный вид за счет добавления тени. Сначала, удерживая Command/Ctrl, кликните по иконке слоя с основой выделенного тарифного плана на палитре слоев, чтобы образовать выделенную область.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 35
Создайте новый слой и залейте выделенную область черным цветом. Смягчите его, применив Гауссовское размытие (Gaussian Blur).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 36
Уменьшите Непрозрачность (Opacity) этого слоя.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 37
Создайте новый слой и при помощи инструмента Кисть (Brush tool) прочертите мягкую линию черного цвета.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 38
Активируйте Свободную трансформацию (Ctrl+T) и, в режиме Деформации (Warp) выберите деформацию Аркой (Arch).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 39
Поверните деформированную линию и расположите ее под выделенным тарифным планом.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 40
Уменьшите ее Непрозрачность (Opacity).

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 41
Добавьте еще одну такую же тень с другой стороны.

Создание в фотошопе лаконичного и современного прайс-листа


Шаг 42
Удерживая Command/Ctrl, кликните по боковым тарифным планам. Создайте слои с тенью для каждой из выделенной группы. Затем кликните по иконке создания слоя-маски (Add Layer Mask) в нижней части палитры слоев, чтобы создать для групп слои-маски.

Создание в фотошопе лаконичного и современного прайс-листа


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

Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа
Создание в фотошопе лаконичного и современного прайс-листа


Шаг 44
Измените цвет текста заголовка на белый, а цвет тени стиля слоя Тень (Drop Shadow) – на черный.

Создание в фотошопе лаконичного и современного прайс-листа


Законченное изображение

Создание в фотошопе лаконичного и современного прайс-листа


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

Другие новости по теме:


Просмотров: 13227 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.