Дизайн реалистичного фона и текста из нержавеющей стали [Учебник по Photoshop]

Веб-дизайнеры и веб-мастера любили классные стальные или металлические эффекты до Веб 2.0 штормы и смыли все; оставляя WWW с глянцевыми, оскорбительными сайтами градиентов. Apple.com всегда был связан с хорошим дизайном интерфейса Web 2.0, но эти парни никогда не теряли крутых черных и серебристых эффектов и не сумели улучшить их в дизайне и типографике.

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

Фон из нержавеющей стали

Шаг 1

Создайте пустой новый документ размером 600 × 400. Создайте новый слой, назовите его 'фон' и залейте его серым цветом [# c0c0c0]. дублировать 'фон' слой, назовите новый слойстальной фони поместите его поверхфон'.

Шаг 2

С выбранным слоем «стальной фон», применить Фильтр -> Добавить шум и введите следующие параметры:

• Количество: 14.21
• Распределение: гауссовский
• Монохроматический проверил

Шаг 3

С 'стальной фонслой еще выбран, иди Фильтр -> пятно -> Размытость и введите следующие параметры:

• Ангел: 0
• Расстояние: 34 пикселя

Щелкните правой кнопкой мышистальной фон', Выбрать Параметры наложения и введите следующие настройки для Градиентное наложение - Градиентный редактор:

Цвет Стоп 1

• Цвет: # 000000
• Непрозрачность: 50%
• Расположение: 0%

Color Stop 2

• Цвет: #ffffff
• Расположение: 50%

Color Stop 3

• Цвет: # 000000
• Непрозрачность: 50%
• Расположение: 0%

Металл Текст

Шаг 4

Ваш фон из нержавеющей стали в основном сделан, мы продолжим вставлять металлический текст, который должен выглядеть одинаково. Использовать Текстовый инструмент, напишите что-нибудь посередине, желательно жирным шрифтом (здесь я использую Myriad Pro Bold). Щелкните правой кнопкой мыши (или дважды щелкните) текстовый слой, чтобы запустить Параметры наложения диалог.

1. Drop Shadow

• Непрозрачность: 38%
• Расстояние: 1px
• Распространение: 1%
• Размер: 2 пикс.

• Глубина: 100%
• Размер: 0px
• Смягчить: 0px
• Непрозрачность выделения: 42%
• Непрозрачность тени: 32%

Ваш текст должен выглядеть примерно так:.

Шаг 5

Вот то, что вам нужно строго следовать. Удерживать клавишу управления (Mac: клавиша Command) и щелкните левой кнопкой мыши на текстовом слое, чтобы выделить его контур. Убедитесь, что контур все еще там, выберите «стальной фонслой, и нажмите Control + J (Mac: Command + J)

Делая это, вы дублируете стальной фон в форме вашего текста. Переименуйте слой в 'текстовый фони переместить его на вершину.

Шаг 6

Изменить 'текстовый фонк Цветной огонь, принести это помутнение до 67%.

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

Скачать файл .PSD.