Макет сайта в Photoshop — это как фундамент для дома, только вместо бетона и арматуры у вас слои и фильтры. Представьте, что вы архитектор цифрового мира: рисуете не стены и окна, а кнопки и баннеры.
И если вы думаете, что макет — это просто красивая картинка, то поздравляю, вы на пути к сюрпризам! Макет — это прототип будущего сайта, который решает важные задачи, но при этом никак не отвечает за кликабельность кнопок. Это как рецепт борща: вкусно выглядит на бумаге, но без варки ничего не выйдет.
Начать стоит с составления технического задания (ТЗ).
Это как карта сокровищ для пирата-дизайнера: без неё можно заблудиться в море пикселей и слоёв. Помните, ТЗ определяет цели сайта, целевую аудиторию и сроки — иначе ваш проект рискует превратиться в бесконечный квест «Сделай красиво», где заказчик меняет мнение чаще, чем погоду в Москве.
При создании нового документа в Photoshop не забудьте про классические 1920 на 1080 пикселей — стандартный размер для десктопа. Разрешение 72 PPI — идеальный компромисс между качеством и легкостью файла.
А название проекта должно быть понятным — ведь никто не хочет искать «Безымянный_макет_финал_версия_3.psd» среди сотни файлов!
Настройка интерфейса Photoshop под себя — это как обустроить рабочее место: поставьте панели «Слои», «Свойства» и «Кисти» туда, где удобно. Горячие клавиши помогут вам работать быстрее; помните старую шутку: «Почему дизайнеры любят горячие клавиши? Потому что они горячие!» Ну или просто потому что экономят время.
Не забудьте про сетку из 12 колонок — она как невидимый архитектор вашего макета. Правильные отступы дают контенту возможность дышать; иначе элементы будут толпиться друг у друга на экране, словно пассажиры в московском метро в час пик.
Цветовая палитра должна состоять максимум из пяти цветов: основной фон, дополнительный фон (чтобы было не скучно), цвет текста и акцентный цвет для важных деталей.
Если вы вдруг запутались — Adobe Color или Coolors придут вам на помощь. Они подберут цвета так гармонично, что даже бабушка скажет: «Красиво!»
Шрифты выбирайте с умом: два варианта достаточно — один выразительный для заголовков и второй нейтральный для основного текста.
Не забывайте проверять наличие кириллицы! Бывает смешная ситуация: дизайнер выбрал шрифт из далекой страны без поддержки русского алфавита, а заказчик смотрит на набор квадратных знаков с недоумением. Бесплатные шрифты Google Fonts спасут вас от этой беды.
Верхняя часть сайта — это его визитная карточка.
Представьте себя на вечеринке: хотите произвести впечатление с первых секунд! Здесь всё должно быть аккуратно выровнено по сетке; помните анекдот про верстальщика? Он всегда знает цену одному пикселю!
Футер же содержит второстепенную информацию — контакты, копирайты и прочее мелкое хозяйство сайта.
Не игнорируйте его! Иногда именно там прячутся самые полезные ссылки… ну или хотя бы ссылка на политику конфиденциальности.
Перед сохранением проверьте макет при масштабе 100%.
Это как проверить карман перед выходом из дома: вдруг забыли ключи? Убедитесь в точности выравнивания элементов и правильной цветовой гамме. Ошибки неизбежны; кто-то сказал однажды: «Если ты не ошибаешься – значит ты ничего не делаешь».
Главное – учиться на них!