Автор урока: Lax Papineni - автор многих уроков, блоггер и дизайнер из Великобритании. Много знает о дизайне и любит делиться своими знаниями. Ведёт несколько блогов, в том числе и работает с небольшой группой друзей (которые также являются дизайнерами).
Предварительный просмотр
Нажмите на изображение, чтобы увидеть его в полном масштабе.
Шаг 1: Создайте новый документ Photoshop
File> New, задайте параметры, как показано ниже и нажмите кнопку ОК. Обратите внимание, что вариант для фона выбран прозрачный, поэтому в результате автоматически будет создан прозрачный слой с именем "Layer 1" по умолчанию.
Шаг 2: Стиль фона
Давайте создадим фоновую основу, которая будет дополнять нашу таблицу цен. Используйте Paint Bucket Tool (G), чтобы заполнить прозрачный слой "Layer 1" любым нужным вам цветом.
Затем дважды щелкните на слое в панели слоев, чтобы открыть диалоговое окно Layer Style. Добавьте наложение вертикального градиента с плавным переходом от темно-серого до светло-серого.
Вот наш фон сейчас:
Шаг 3: Создание средней колонки цен
В целом мы собираемся создать три колонки с ценами, но средняя будет немного больше, чем две других, чтобы предложить лучший план для пользователя при выборе. Это популярный шаблон дизайна для таблиц с ценами, когда предлагается тарифный план более оптимальный, чем другие планы.
Выберите Rounded Rectangle Tool (U), убедитесь, что вы находитесь в режиме Shape Layers (проверьте на панели параметров) и, с радиусом 10px, нарисуйте прямоугольник размером 200 × 330px.
Дважды щелкните прямоугольник слоя в палитре слоев, чтобы открыть диалоговое окно Layer Style. Задайте для слоя с прямоугольником параметры Inner Glow, Gradient Overlay и Stroke.
Inner Glow
Gradient Overlay
Stroke
Результат стилей слоя выглядит следующим образом:
Теперь мы собираемся создать небольшой прямоугольник под название тарифного плана, который будет загнутой 3D лентой (еще одна популярная тенденция в веб-дизайне).
В верхней части колонки создайте небольшой скругленный прямоугольник с радиусом в 5 пикселей и размерами 130 × 40 пикселей, используя инструмент Rounded Rectangle Tool.
Применим к маленькому прямоугольнику Drop Shadow и Gradient Overlay.
Drop Shadow
Gradient Overlay
Используйте Pen Tool (P), чтобы нарисовать небольшие диагональные закрылки по обе стороны небольшого прямоугольника (как показано ниже). Это придаст вид, будто бы это обтекание колонки.
Выберите Horizontal Type Tool (T) и - с размером шрифта 20px, белого цвета, шрифт по вашему выбору, напишите название плана (в данном случае, план называется "Standard"). Я использовал шрифт Myriad Pro, но вы можете использовать любой шрифт, который захотите.
Задайте для текстового слоя Drop Shadow и Color Overlay.
Drop Shadow
Color Overlay
Затем добавьте цену в деталях (как показано ниже), в соответствии с названием плана. Очень хорошая идея использовать тот же шрифт для всего текста, но оформлять их по-разному.
Задайте для текста наложение серого цвета и мягкую тень.
Теперь, после цены, мы составим список опций, включенных в тарифный план «Standard». Под каждым элементом списка нарисуйте 2 линии высотой 1px. Сделайте первую линию темнее фона, а другую линию светлее фона, это будет создавать хороший эффект вставки (популярная техника для границ и делителей).
Далее, давайте создадим современную и изящную веб кнопку. Используйте Rounded Rectangle Tool (U) с радиусом в 5 пикселей, чтобы сделать прямоугольник размером в 100 × 38px внизу колонки.
Задайте для слоя с кнопкой Drop Shadow, Gradient Overlay и Stroke.
Drop Shadow
Gradient Overlay
Stroke
Чтобы сделать кнопку глянцевой, нам нужно сделать для нее стеклянное отражение в верхней части. Я покажу вам простой метод как это сделать, его можно использовать во многих ситуациях графического дизайна.
Во-первых, Ctrl-click/Cmd-click на слое с кнопкой в палитре слоев, чтобы загрузить выделение вокруг нее.
Теперь выберите инструмент Rectangular Marquee Tool (M). На верхней панели инструментов выберите режим Intersect with Selection. Сделайте выделение в верхней части текущего выделения кнопки, это позволит в итоге получить то, что будет выделена только верхняя часть кнопки.
Создайте новый слой и с помощью Paint Bucket Tool (G) залейте выделение белым цветом. Уменьшите непрозрачность нового слоя до 10%.
Теперь мы добавим верхний блик на веб-кнопку. Создайте новый слой для верхнего блика. Приблизьте изображение, чтобы вам было легче видеть, что вы делаете. Нарисуйте светло-серую линии, как показано ниже.
Используйте Horizontal Type Tool (T), чтобы добавить какой-то текст, например "Sign Up" или "Присоединяйтесь к нам". Я использовал все параметры и стиль текста с темного прямоугольника.
В настоящее время мы закончили одну из наших колонок.
Шаг 4: Создание другие столбцов с ценами
Теперь, когда мы создали ценовую колонку, мы можем просто дублировать её и вносить изменения в дубликаты.
Во-первых, в панели слоев, выделите все слои, кроме фонового слоя и поместите их в группу слоев (Layer> Group Layers).
Затем дублируйте слой группы 2 раза и расположите их рядом друг с другом (как показано ниже). Изменить детали новых колонок так, чтобы они отличались друг от друга.
Шаг 5: Увеличение среднего столбца цен
Для того, чтобы средний столбец выделялся, нажмите на его группу слоев в палитре слоев, чтобы сделать её активным слоем, а затем, используя Free Transform (Ctrl / Cmd + T), расширьте его. Убедитесь, что группа слоев средней колонки в палите слоев находится выше других групп.
Чтобы сделать окно более заметным, отредактируйте слой Gradient Overlay, влияющий на кнопку, и цену сделайте любого нужного вам цвета. Я использовал синий.
Шаг 6: Последние штрихи
Я покажу Вам, как добавить некоторые интересные тени, падающие от столбцов. Выберите Ellipse Tool (U) и нарисуйте черный, короткий и широкий эллипс, как показано ниже:
Чтобы смягчить форму, используйте Filter> Blur> Gaussian Blur. Radius в 4px должно быть достаточно.
Разместите слой с тенью прямо над фоновым слоем. Дублируйте форму два раза, так что у вас получится 3 тени, по одной для каждого из столбцов цен. Поместите тень под каждый столбец.
Краткий обзор урока
Мы только что подошли к концу урока. Я надеюсь, вам понравилось, и если у Вас возникли вопросы, просто напишите комментарий ниже! Мы рассмотрели множество простых и популярных методов веб-дизайна, такие как создание веб-кнопок, создание обтекания для баннеров (для названий тарифных планов) и многое другое.
Перевод урока: PS-Studio.Info
Предварительный просмотр
Нажмите на изображение, чтобы увидеть его в полном масштабе.
Шаг 1: Создайте новый документ Photoshop
File> New, задайте параметры, как показано ниже и нажмите кнопку ОК. Обратите внимание, что вариант для фона выбран прозрачный, поэтому в результате автоматически будет создан прозрачный слой с именем "Layer 1" по умолчанию.
Шаг 2: Стиль фона
Давайте создадим фоновую основу, которая будет дополнять нашу таблицу цен. Используйте Paint Bucket Tool (G), чтобы заполнить прозрачный слой "Layer 1" любым нужным вам цветом.
Затем дважды щелкните на слое в панели слоев, чтобы открыть диалоговое окно Layer Style. Добавьте наложение вертикального градиента с плавным переходом от темно-серого до светло-серого.
Вот наш фон сейчас:
Шаг 3: Создание средней колонки цен
В целом мы собираемся создать три колонки с ценами, но средняя будет немного больше, чем две других, чтобы предложить лучший план для пользователя при выборе. Это популярный шаблон дизайна для таблиц с ценами, когда предлагается тарифный план более оптимальный, чем другие планы.
Выберите Rounded Rectangle Tool (U), убедитесь, что вы находитесь в режиме Shape Layers (проверьте на панели параметров) и, с радиусом 10px, нарисуйте прямоугольник размером 200 × 330px.
Дважды щелкните прямоугольник слоя в палитре слоев, чтобы открыть диалоговое окно Layer Style. Задайте для слоя с прямоугольником параметры Inner Glow, Gradient Overlay и Stroke.
Inner Glow
Gradient Overlay
Stroke
Результат стилей слоя выглядит следующим образом:
Теперь мы собираемся создать небольшой прямоугольник под название тарифного плана, который будет загнутой 3D лентой (еще одна популярная тенденция в веб-дизайне).
В верхней части колонки создайте небольшой скругленный прямоугольник с радиусом в 5 пикселей и размерами 130 × 40 пикселей, используя инструмент Rounded Rectangle Tool.
Применим к маленькому прямоугольнику Drop Shadow и Gradient Overlay.
Drop Shadow
Gradient Overlay
Используйте Pen Tool (P), чтобы нарисовать небольшие диагональные закрылки по обе стороны небольшого прямоугольника (как показано ниже). Это придаст вид, будто бы это обтекание колонки.
Выберите Horizontal Type Tool (T) и - с размером шрифта 20px, белого цвета, шрифт по вашему выбору, напишите название плана (в данном случае, план называется "Standard"). Я использовал шрифт Myriad Pro, но вы можете использовать любой шрифт, который захотите.
Задайте для текстового слоя Drop Shadow и Color Overlay.
Drop Shadow
Color Overlay
Затем добавьте цену в деталях (как показано ниже), в соответствии с названием плана. Очень хорошая идея использовать тот же шрифт для всего текста, но оформлять их по-разному.
Задайте для текста наложение серого цвета и мягкую тень.
Теперь, после цены, мы составим список опций, включенных в тарифный план «Standard». Под каждым элементом списка нарисуйте 2 линии высотой 1px. Сделайте первую линию темнее фона, а другую линию светлее фона, это будет создавать хороший эффект вставки (популярная техника для границ и делителей).
Далее, давайте создадим современную и изящную веб кнопку. Используйте Rounded Rectangle Tool (U) с радиусом в 5 пикселей, чтобы сделать прямоугольник размером в 100 × 38px внизу колонки.
Задайте для слоя с кнопкой Drop Shadow, Gradient Overlay и Stroke.
Drop Shadow
Gradient Overlay
Stroke
Чтобы сделать кнопку глянцевой, нам нужно сделать для нее стеклянное отражение в верхней части. Я покажу вам простой метод как это сделать, его можно использовать во многих ситуациях графического дизайна.
Во-первых, Ctrl-click/Cmd-click на слое с кнопкой в палитре слоев, чтобы загрузить выделение вокруг нее.
Теперь выберите инструмент Rectangular Marquee Tool (M). На верхней панели инструментов выберите режим Intersect with Selection. Сделайте выделение в верхней части текущего выделения кнопки, это позволит в итоге получить то, что будет выделена только верхняя часть кнопки.
Создайте новый слой и с помощью Paint Bucket Tool (G) залейте выделение белым цветом. Уменьшите непрозрачность нового слоя до 10%.
Теперь мы добавим верхний блик на веб-кнопку. Создайте новый слой для верхнего блика. Приблизьте изображение, чтобы вам было легче видеть, что вы делаете. Нарисуйте светло-серую линии, как показано ниже.
Используйте Horizontal Type Tool (T), чтобы добавить какой-то текст, например "Sign Up" или "Присоединяйтесь к нам". Я использовал все параметры и стиль текста с темного прямоугольника.
В настоящее время мы закончили одну из наших колонок.
Шаг 4: Создание другие столбцов с ценами
Теперь, когда мы создали ценовую колонку, мы можем просто дублировать её и вносить изменения в дубликаты.
Во-первых, в панели слоев, выделите все слои, кроме фонового слоя и поместите их в группу слоев (Layer> Group Layers).
Затем дублируйте слой группы 2 раза и расположите их рядом друг с другом (как показано ниже). Изменить детали новых колонок так, чтобы они отличались друг от друга.
Шаг 5: Увеличение среднего столбца цен
Для того, чтобы средний столбец выделялся, нажмите на его группу слоев в палитре слоев, чтобы сделать её активным слоем, а затем, используя Free Transform (Ctrl / Cmd + T), расширьте его. Убедитесь, что группа слоев средней колонки в палите слоев находится выше других групп.
Чтобы сделать окно более заметным, отредактируйте слой Gradient Overlay, влияющий на кнопку, и цену сделайте любого нужного вам цвета. Я использовал синий.
Шаг 6: Последние штрихи
Я покажу Вам, как добавить некоторые интересные тени, падающие от столбцов. Выберите Ellipse Tool (U) и нарисуйте черный, короткий и широкий эллипс, как показано ниже:
Чтобы смягчить форму, используйте Filter> Blur> Gaussian Blur. Radius в 4px должно быть достаточно.
Разместите слой с тенью прямо над фоновым слоем. Дублируйте форму два раза, так что у вас получится 3 тени, по одной для каждого из столбцов цен. Поместите тень под каждый столбец.
Краткий обзор урока
Мы только что подошли к концу урока. Я надеюсь, вам понравилось, и если у Вас возникли вопросы, просто напишите комментарий ниже! Мы рассмотрели множество простых и популярных методов веб-дизайна, такие как создание веб-кнопок, создание обтекания для баннеров (для названий тарифных планов) и многое другое.
Перевод урока: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
