Задание 1. Подобрать цвета для своего сайта опираясь на теорию цвета.
Исходя из значения цвета подберите тот, что будет хорошо сочетаться с вашим дизайном.
Используйте правило 60–30–10. Этот прием, неподвластный времени, поможет подобрать сбалансированную цветовую гамму: 60% должно приходиться на доминирующий цвет, 30% на вторичный цвет и 10% на цветовой акцент. Такое соотношение гарантирует цветовое равновесие и комфортный переход взгляда от одного объекта к другому.
Формула
60% + 30% + 10% – это залог сбалансированности используемых цветов.
Полезные сервисы для подбора цветов и градиентов:
- Текущие цветовые трендции в разных отраслях от творческих сообществ Behance и Adobe Stock на сайте Adobe Color в разделе тенденции;
- Список безопасных цветов на сайте Color Scheme;
- Генератор градиента на сайте Color Desinger;
- Создание сложных градиентов на сайте Mesh Gradients.
Разновидности шрифтов:
- Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
- Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
- Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.
Задние 3. Создать макет сайта по прототипу, созданному на прошлых занятиях. При создании макета избегайте ошибок, описанных ниже.
Ошибки в создании макета сайта
Самые распространенные ошибки при макетировании можно разделить на две группы — ошибки, которые влияют на восприятие и общую «красоту» сайта, и ошибки, из-за которых верстальщик неправильно создает сайт по готовому макету.
Ошибки в дизайне
Когда на сайте экономят, то нанимают дешевого дизайнера или
вовсе поручают дело непрофессионалу. Тогда появляются типичные ошибки в
дизайне, которые портят вид макета сайта.
Избегайте этих ошибок:
- Несбалансированная цветовая гамма или несочетающиеся шрифты;
- Избыток элементов — слишком много блоков, кнопок, надписей. Посетитель потеряется на такой странице и не выполнит целевое действие;
- Отсутствие мобильной версии сайта.
Ошибки, критичные для верстки
Иногда с макетом сайта все хорошо, а при верстке вылезают недочеты. Это происходит, потому что остались незаметные ошибки, которые верстальщик не понимает и переносит «как есть». Вот чего нужно избегать, чтобы макет был сверстан идеально:
- Беспорядок в слоях. Нужно удалить ненужные слои — скрытые, пустые. Нормально назвать все оставшиеся и логически сгруппировать. В идеале нужно делать это на этапе разработки макета сайта, а не при сдаче, иначе сами запутаетесь;
- Эффекты прозрачности и наложения. Чтобы сделать цвет светлее, просто используйте другой цвет, но ни в коем случае не прозрачность. Не применяйте эффекты наложения — они непредсказуемо отображаются в разных браузерах;
- Элементы «гуляют» туда-сюда на пару пикселей. Выравнивайте все строго по сетке, иначе верстальщик может просто обрезать объект, который выступает за направляющую;
- Путаница с отступами. Проверьте отступы — они должны быть выражены целым четным числом, чтобы верстальщику было проще их перенести.
- Недокомплект файлов. Приложите шрифты и все изображения к макету — отдельный архив для шрифтов, отдельный для изображений. Если шрифты есть на Google Fonts, можете дать ссылки на них.
Макет сайта в фотошопе
Создаем новый файл в Photoshop. Можете настроить самостоятельно или перейти
на вкладку «Для Интернета». По умолчанию программа предлагает макет «Заказная»
размерами 1366 на 4000 пикселей, я немного округлю ширину до 1380 пикселей. Это
распространенный размер, подходящий под размер экрана компьютера или ноутбука.
Цветовая модель — RGB, разрешение — 72 пикселя на дюйм, фон прозрачный.
Создание нового файла в Photoshop с параметрами под макет сайта
Теперь задаем
модульную сетку. Заходим во вкладку «Просмотр» верхнего меню и выбираем там
пункт «Новый макет направляющей». По умолчанию программа предлагает создать
восемь столбцов с полями и внутренними отступами, но мы сделаем 12 — так будет
удобнее делить страницу на 2, 3, 4 или 6 блоков.
Также зададим значение
средника в 15 пикселей (это внутренний промежуток между колонками), верхнее и
нижнее поле поставим по нулям, правое и левое — 30 пикселей. Вы можете выбрать
свои значения, но помните, что отступы и поля должны быть кратны одной цифре,
например, 5.
Первый шаг — создать сетку
направляющих, предпочтительно из 12 столбцов
Теперь зальем фон. Для
этого используем корректирующий слой — так будет проще при необходимости менять
его цвет, чтобы не заливать по новой. В панели «Слои» выбираем значок кружка,
кликаем на него и выбираем опцию «Цвет», указываем нужный оттенок. Теперь
остается лишь удалить маску с этого слоя, чтобы остался только цвет:
Создаем фоновый
слой и заливаем его одним цветом
Не забудьте
переименовать слой — лучше на латинице, и можете сразу его заблокировать с
помощью кнопки с иконкой замка в панели слоев.
Переименуйте и заблокируйте фоновый
слой
Комментарии
Отправить комментарий