Дизайн реалістичного фону з нержавіючої сталі та тексту [Підручник Photoshop]

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

Натхненний їхніми проектами, я намагаюся повернути ці стилі назад до мого особистого дизайну і таким чином створив щось тверде і виглядає трохи як шматок металу з нержавіючої сталі. Повний Photoshop підручник після стрибка.

Фон з нержавіючої сталі

Крок 1

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

Крок 2

За допомогою вибраного шару «сталевий фон» застосуйте Фільтр -> Додати шум і введіть такі налаштування:

• Сума: 14,21
• Розподіл: гауссовий
• Монохроматична перевірена

Крок 3

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

• Ангел: 0
• Відстань: 34 пікселя

Клацніть правою кнопкою миші 'сталеві фону', виберіть Параметри накладання і введіть наступні параметри для Накладання градієнта - редактор градієнтів:

Стоп кольору 1

• Колір: # 000000
• Непрозорість: 50%
• Місцезнаходження: 0%

Стоп кольору 2

• Колір: #ffffff
• Місцезнаходження: 50%

Стоп кольору 3

• Колір: # 000000
• Непрозорість: 50%
• Місцезнаходження: 0%

Металевий текст

Крок 4

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

1. Тінь

• Непрозорість: 38%
• Відстань: 1px
• Спред: 1%
• Розмір: 2px

• Глибина: 100%
• Розмір: 0px
• Пом'якшення: 0px
• Виділити непрозорість: 42%
• Непрозорість тіні: 32%

Текст повинен виглядати приблизно так, як показано нижче.

Крок 5

Ось щось, чого потрібно стежити. Утримуйте клавішу Control (Mac: клавіша Command) і клацніть лівою кнопкою миші на текстовому шарі, щоб виділити її контур. Переконайтеся, що контур все ще існує, виберіть "сталеві фону'layer, і Натисніть Control + J (Mac: Command + J)

Роблячи це, ви дублюєте сталевий фон у формі вашого тексту. Перейменуйте шар на "фон тексту'і перемістіть його вгору.

Крок 6

Змінити "фон тексту'до Запис кольору, принесіть це Непрозорість аж до 67%.

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

Завантажити файл .PSD.