Стильна шапка для сайту

У цьому уроці photoshop робимо стильну шапку для сайту.

Крок 1.

Створіть документ розмірами 1000x750. Подвійний клич на шар, Color Overlay > Ставимо темно-коричневий цвіт.

Крок 2.

Включите лінійки (View>Rulers). на своєму документі й додайте лінії як показано нижче.

Поставте 2 горизонтальні лінії, перша на 30px від верху, друга на 250px від верху. І дві вертикальні, перша на 100px ліворуч праворуч, друга на 900px ліворуч праворуч.

Крок 3.

Створіть прямокутник за допомогою, користуйтеся лініями для орієнтира. Перейменуйте шар в “header”.

Крок 4.

Поставте чорний цвіт як основний. Візьміть і створіть форму схожу на форму на скрине, щоб зробити тінь. Зробіть її трохи більше чим прямокутник, дивимося малюнок. Перейменуйте шар в “shadow” і поставте його під шар “header”.

Після всього цього, сконвертируйте форму в Smart Filters і застосуєте на неї Gaussian Blur. Непрозорість 60%.

Крок 5.

Відкрийте стилі шару “header”. Натисніть на вкладку Gradient Overlay. Зміните стиль градієнта на radial. А для цвіту я використовував темно-червоні тони.

Крок 6.

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

Ідемо Layer>Layer Mask>Reveal All. Використовуючи, чорно білий, на панелі зверху стиль ставимо на Radial і застосовуємо маску на групу. Градієнт ложим з ухилом від центра групи.

Крок 7.

Створюємо меню за допомогою. Цвіт білий. Всі написи групуємо й називаємо групу “White Links”.
Створіть дублікат цієї групи й перемістите його під оригінальну групу. Зміните цвіт дубліката на чорний (весь текст повинен бути чорним) і перемістите групу на 1 пиксель у верх і вліво. Це додасть гарний 3д ефект тексту.

Крок 8.

Повторите Крок 6, тільки створіть вертикальні роздільники для написів на меню. Використовуючи, спочатку намалюйте темно-червону лінію, потім праворуч від її, чорну. Згрупуйте їх і зробіть дублікат групи стільки разів, скільки вам потрібно для меню. У мене в меню 4 слова, я зробив 4 дублікати + оригінал. Розмістите ваші лінії на однаковій відстані друг від друга, дивимося скрин:

Крок 9.

Виділите всі групи з лініями й згрупуйте їх в 1 групу, назвіть її “hDividers”. Після цього застосуєте маску на цю групу, Layer>Layer Mask>Reveal All. І зробіть маску як на скрине:

Крок 10.

Відкрийте файл із візерунком, що даний нижче. Edit>Define Pattern. Назвіть його "webPattern". Створіть дублікат шару “header” і перейменуйте його в “pattern”. Відкрийте стилі шару, і заберіть галочку з Gradient Overlay, поставте на Pattern Overlay. Виберіть "webPattern" і поставте режим накладення на Overlay.

Після цього застосуєте маску на нього з радіальним градієнтом.

Крок 11.

Тепер залишається додати потрібен вам логотип.

Пишемо текст, я написав PSDTUTS, і зробив PSD жирним шрифтом, а TUTS тонким.

Далі пройдіть у стилі шару й зміните параметри Drop Shadow, Gradient Overlay, and Stroke. Після цього у вас буде прекрасний текстовий ефект.

Висновок.

Коли працюємо з веб-дизайном, ми повинні врахувати розміри файлів, сумісність із браузерами й багато інших питань. Використовуючи 2 цвіту можна створити дуже гарний візуальний ефект або унікальний стиль, не напружуючись.

Кориснi статтi:

Стильна шапка для сайту

Джерело: photoweb.com.ua