Читать

Урок 38. Рисуем футер для сайта

13.04.2019 / Уроки

Нельзя недооценивать важность такого элемента веб-страницы, как футер! Если посетитель прокрутил страницу до самого низа, значит он не нашёл чего-то выше и задачей футера, в данном случае, является предоставление посетителю самой краткой информации, по которой он сможет связаться с администрацией, к примеру, либо перейти в нужный раздел.

Графически наилучшим решением будет отделить футер от всей страницы цветом или чёткой границей. Особенно это важно, если содержимое (контент) страницы и, непосредственно, футер располагаются на общей подложке. Например, так:


Рисуем футер для сайта


Рисуем поверх общей подложки прямоугольник, перекрывающий боковые и нижнюю границы подложки:


Рисуем футер для сайта


Создаём обтравочную маску нажатием комбинации клавиш Alt+Ctrl+G, чтобы прямоугольник принял форму подложки:


Рисуем футер для сайта


Прежде, чем приступить к наполнению футера информацией, необходимо определиться с объёмом информации и разделить область на колонки. Сейчас мало кто работает без сеток, но если вдруг так случилось, что вы дошли до отрисовки футера без использования сетки, можно сделать простое разделение на несколько равных столбцов с равными отступами. Линейки примагничиваются к конкретным фигурам, поэтому достаточно создать один прямоугольник, прилепить к его боками линейки, затем передвинуть фигуру на строго определённое расстояние, снова воспользоваться линейками и т.д. Двигаться лучше всего от центра полотна, чтобы отступы по краям были одинаковыми. Допустим, в нашем примере мы будем использовать 3 колонки:


Рисуем футер для сайта


Понятное дело, линейки помогут нам с распределением информации. Выбрав инструмент "Текст" и создав область, ограничивающую пространство для текста (простите за тавтологию), расставляем небольшие заголовки, которые подскажут посетителю к какой тематике относятся те или иные ссылки:


Рисуем футер для сайта


Для примера я использую информацию из футера данного проекта. И под ссылками также проведу линию, которая отделит второстепенную информацию от основной:


Рисуем футер для сайта


Ниже обычно размещают информацию о правах (копирайт), а также кнопки социальных сетей. Чтобы кнопки выглядели согласно стилистике сайта придётся немного попотеть, нарисовав иконки самостоятельно или скачав готовые иконки в сети и адаптировав их под свои нужды. Я воспользовался первым вариантом:


Рисуем футер для сайта


Также можно разместить в футер поиск: чтобы посетитель уж наверняка смог найти то, что ищет. Или форму подписки на обновления. Решать вам. Используя фигуры, рисуем поле с текстом по умолчанию ("Поиск по сайту...") и кнопку, эквивалентную клавише "Enter":


Рисуем футер для сайта


Футер готов! Для придания ему некоторой уникальности, можно добавить немного графики в оформление. В данном примере я решил воспользоваться инструментом "Перо" и нарисовать (над слоем с тёмной подложкой) пару фигур с волнистой формой:


Рисуем футер для сайта


Снова создаём обтравочную маску, чтобы новые фигуры не выходили за границы общей подложки, уменьшаем прозрачность волнистых фигур таким образом, чтобы они не мешали информации и были слегка заметны на фоне:


Рисуем футер для сайта


Собственно, всё! Если что-то осталось непонятным, смотрите прикреплённый исходник урока или задавайте вопросы в комментариях.


По обыкновению, выкладываю исходник урока — zip-архив (75 Кб)

Скачать архив




Самые первые уроки, рассчитанные для начинающих, смотрите здесь.





Просмотров: 18 / Теги: рисуем, урок, дизайн, футер, веб, фотошоп

Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ


ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ