Как сделать шапку в фотошопе

В современном веб-дизайне и маркетинге шапка сайта — это первое, что видит пользователь. Она задаёт тон взаимодействия, формирует доверие и напрямую влияет на конверсию. Даже если вы не веб-дизайнер, но работаете с брендом, рекламой или контентом, умение создать профессиональную шапку в Photoshop — базовый навык. Это не просто «набор текста и логотипа». Шапка — это визуальный якорь, который объединяет навигацию, брендинг и призывы к действию. И если вы хотите, чтобы ваша шапка выделялась среди конкурентов, не полагайтесь на шаблоны. Научитесь создавать её с нуля — и вы получите контроль над каждым пикселем.

Что такое шапка сайта и зачем она нужна

Шапка — это верхняя часть веб-страницы, которая остаётся на экране даже при прокрутке. Она выполняет три ключевые функции: идентификация бренда, навигация по сайту и акцентирование призывов к действию. Согласно исследованиям Nielsen Norman Group, пользователи формируют первое впечатление о сайте за 50 миллисекунд. Шапка — главный элемент, формирующий это впечатление. Если она выглядит неаккуратно, перегружена или непонятна, пользователь уходит — даже если контент идеален.

Большинство успешных сайтов используют шапки с фиксированным положением. Это повышает удобство: пользователь всегда видит меню, кнопку «Заказать» или логотип. Визуальная стабильность снижает когнитивную нагрузку. Шапка не должна быть украшением — она должна быть инструментом. В Photoshop вы создаёте не картинку, а прототип интерфейса, который позже будет реализован в HTML/CSS. Поэтому важно мыслить не как художник, а как дизайнер взаимодействия.

Подготовка к созданию: настройки документа и ресурсы

Перед тем как начать рисовать, определите размеры. Для десктопных сайтов стандарт — 1920 пикселей в ширину. Высота шапки варьируется от 80 до 120 пикселей, в зависимости от сложности элементов. Создайте новый документ в Photoshop: Файл → Новый, установите ширину 1920 пикселей, высоту 120, разрешение 72 ppi, цветовой режим RGB. Фон — белый или цвет бренда, но не прозрачный: это упростит экспортирование.

Заранее подготовьте ресурсы: логотип в векторном формате (SVG или EPS), шрифты, иконки, цветовые палитры. Если логотип в PNG — убедитесь, что фон прозрачен. Скачивайте шрифты из проверенных источников: Google Fonts, Adobe Fonts, Fonts.com. Установите их в систему, чтобы они отображались в Photoshop. Не используйте шрифты с неизвестной лицензией — это рискованно.

Создайте папку с слоями: «Фон», «Логотип», «Навигация», «CTA», «Декор». Это упростит редактирование и передачу файла разработчику. Включите сетку: Вид → Показать → Сетка. Установите шаг 10 или 20 пикселей — это поможет выравнивать элементы. Также включите «Привязку к сетке» для точного позиционирования.

Пошаговое создание шапки в Photoshop

1. Создайте фон. Залейте слой «Фон» однотонным цветом, градиентом или текстурой. Не используйте слишком яркие или движущиеся элементы — они отвлекают.
2. Добавьте логотип. Перетащите его на холст, уменьшите до высоты 60–80 пикселей. Разместите слева, отступ от края — 20–40 пикселей. Убедитесь, что он не перекрывается с другими элементами.
3. Создайте навигацию. Используйте инструмент «Текст» (T). Наберите пункты меню: «Главная», «Услуги», «О нас», «Контакты». Выберите шрифт, соответствующий бренду. Расположите их горизонтально, равномерно распределяя. Отступ между пунктами — 30–50 пикселей.
4. Добавьте кнопку CTA. Создайте прямоугольник (U) размером 120×40 пикселей. Залейте его цветом, контрастным фону. Надпись: «Заказать звонок» или «Получить консультацию». Выровняйте её по правому краю, отступ от края — 20–40 пикселей.
5. Добавьте тень или разделитель. Для визуального отделения шапки от контента добавьте тень под слоем «Фон»: Стиль слоя → Тень. Установите угол 90°, расстояние 5 пикселей, размытие 10. Или используйте горизонтальную линию толщиной 1 пиксель.
6. Проверьте выравнивание. Выделите все элементы навигации и кнопку, выберите «Выравнивание по вертикали» и «Равномерное распределение». Это гарантирует симметрию.

Типографика и цвет: как выбрать правильные решения

Выбор шрифта — один из самых недооценённых аспектов. Он должен быть читаемым на всех устройствах. Для шапок рекомендуются sans-serif: Montserrat, Open Sans, Lato, Helvetica Neue. Избегайте декоративных шрифтов — они не читаются в миниатюре. Размер текста в меню — 14–16 пикселей. Для кнопки CTA — 16–18. Жирность: регулярная или полужирная. Не используйте курсив или подчёркивание — это вводит в заблуждение (пользователи ассоциируют подчёркивание со ссылками).

Цвета должны соответствовать бренд-буку. Если у вас чёрный логотип, используйте светлый фон. Кнопка CTA — всегда контрастная: зелёная на белом, оранжевая на синем. Проверяйте контрастность с помощью инструмента Color Contrast Analyzer (расширение для Chrome). Минимальный коэффициент — 4.5:1 для текста на фоне.

Используйте цвет для визуальной иерархии: логотип — основной цвет бренда, меню — серый или чёрный, CTA — акцентный. Не более трёх цветов в шапке. Если вы используете градиент — он должен быть тонким и не отвлекать. Например, лёгкий переход от #2563EB к #1D4ED8 под кнопкой — это уместно. Яркие радужные градиенты — в прошлом.

Создание навигации: от кнопок до мобильного адаптива

Навигация — сердце шапки. Она должна быть интуитивной. Пункты меню — не более пяти. Если их больше — используйте выпадающие меню. В Photoshop их можно смоделировать: создайте отдельный слой с подпунктами, спрячьте его (нажмите глаз на слое). Позже разработчик добавит анимацию на hover.

Для мобильной версии шапка трансформируется в «гамбургер-меню». В Photoshop это делается просто: создайте три горизонтальные линии (толщина 2 пикселя, расстояние 4 пикселя) справа. Разместите их в правом углу. Это будет значок меню. Важно: он должен быть визуально выделен, но не доминировать.

Также добавьте иконки: корзина, поиск, профиль — если они есть в дизайне. Используйте иконки из библиотеки Font Awesome или Material Icons в формате PNG с прозрачным фоном. Уменьшайте их до 20–24 пикселей. Выравнивайте по центру относительно текста.

Частые ошибки и как их избежать

Самая распространённая ошибка — перегрузка. Шапка не должна быть «всё и сразу». Не добавляйте: слайдер, баннер, форму подписки, соцсети — всё это должно быть в теле страницы. Другая ошибка — несоответствие стилю бренда. Например, логотип в стиле «минимализм», а шапка — с розовыми волнистыми линиями и глитч-эффектами. Такое противоречие разрушает доверие.

Третья ошибка — неправильное размещение. Логотип должен быть слева, навигация — по центру, CTA — справа. Это стандарт, принятый в 90% успешных сайтов. Отклонения возможны, но только с тестированием. Четвёртая — низкая читаемость. Шрифт слишком мелкий, контраст низкий, тень слишком тёмная.

Также не забывайте про экспорт. Сохраняйте шапку как PNG-24 с прозрачностью, если она будет накладываться на разные фоны. Для фона — JPG или PNG-8. Не сохраняйте в PSD без слоёв — это бесполезно для разработчика. Дайте файл с именем «header_v1.psd» и отдельно — «header_export.png».

Экспертное мнение: что говорят дизайнеры

Екатерина работает с клиентами из e-commerce, SaaS и финтех-стартапов. По её опыту, лучшие шапки — те, где пользователь понимает, куда кликнуть, даже не читая. «Представьте, что вы заходите на сайт с телефона в метро. Вы не читаете. Вы смотрите. Ваша шапка должна говорить на языке жестов: вот логотип — это дом, вот кнопка — это купить, вот меню — это всё остальное».

Она рекомендует использовать «правило трёх кликов»: любой пункт сайта должен быть доступен не более чем за три клика. Шапка — первый из них. Поэтому она должна быть предсказуемой. Также она подчёркивает важность тестирования: «Покажите шапку пяти людям. Спросите: „Что здесь можно сделать?“ Если трое не ответят — перерабатывайте».

Вопросы и ответы

Заключение

Создание шапки в Photoshop — это не искусство, а методология. Это системный подход к визуальной коммуникации. Вы не рисуете красиво — вы создаёте инструмент, который ведёт пользователя к действию. Каждый элемент — логотип, шрифт, цвет, отступ — должен иметь цель. И если вы сделаете это осознанно, ваша шапка не просто будет выглядеть хорошо. Она будет работать.

• Шапка — это навигационный и брендинговый инструмент, а не декор.
• Используйте фиксированный размер 1920×120 пикселей для десктопа.
• Соблюдайте иерархию: логотип → меню → CTA. Не перегружайте.
• Цвета и шрифты должны соответствовать фирменному стилю.
• Всегда тестируйте шапку на реальных пользователях — даже на пяти.