Футер для сайта в стиле Web 2.0

Автор этого урока — Daniel Lopes, живет в Бразилии и занимается веб дизайном и веб разработкой более 7ми лет. Даниель работает графическим дизайнером, получил степень по Компьютерным технологиям. По его мнению Веб — идеальное сочетание дизайна и программирования. Именно в этой области соединяются такие разные технологии как Photoshop, 3dStudio, Flash, XHTML, CSS, JS, Rails, PHP и Flex. В этом уроке Даниель покажет, как легко и быстро создать в Фотошопе футер для сайта. Перевод урока подготовлен специально для Хронофаг.ру

[divider top=»0″]

Веб 2.0 прошелся по интернету, и хотя его популярность спадает, некоторые приемы до сих пор актуальны. В этом уроке я покажу вам, как создать в Фотошопе стильный футер для сайта.

Футер для сайта

Вот так выглядит футер, который мы будем создавать. Чтобы увидеть футер в полный рост, кликните по картинке.

Качаем градиенты

Размытые градиентные футуре и шапки сайтов — характерная черта Веб 2.0 стиля в дизайне. В этом уроке мы используем пак градиентов напоминающий 3D материалы, которые можно скачать с сайта Deziner Folio

Создаем новый документ

Откройте новый документ в Фотошопе. Я создал новый фаил с размерами 1440 px x 900px (как раз под мои 17” на ноутбуке). Конечно оригинальный футер не должен быть таким широким. Тем не менее, в веб-дизайне важно симулировать ситуацию, при которой футер будет растягиваться по разные разрешения экрана.

Выберите цвет заднего фона. В моем случае я выбрал простой градиент с цветами #b0b0b0 и #e1e1e1. Проведите курсором по экрану зажав SHIFT, чтобы создать вертикальный градиент по всей странице.

Плавающий или фиксированный макет

В веб-дизайне важно сразу решить какого типа макет мы будем создавать. Например, будет ли наш макет фиксированным или плавающим. В нашем футере мы будем создавать зафиксированный макет, с размерами 760px на 420px. С такими размерами вы будете уверены, что даже на экранах с разрешением 800 на 600px все поместится.

Используйте направляющие чтобы установить размер вебсайта, как показано ниже. Учитывайте, что если вы хотите создать макет, оптимизированный под разрешение 1024 на 768px, то направляющими нужно отмерить 955px на 600px.

Создаем Паттерн

Не смотря на то, что наш футер фиксированной ширины, мы все равно хотим иметь возможность растягивать его, чтобы уместить в оставшуюся область. Для этого мы применяем паттерн, созданный вручную в Фотошопе. Паттерн будет симулировать металлическую пластину. Скачать его можно здесь. Откройте изображение в фотошопе и примените Edit > Define Pattern выбрав название паттерна.

Теперь откройте новый фаил с размерами 1140px на 86px и примените заливку Edit > Fill в которой выберите нужный паттерн.  Выделите все CTRL+A, скопируйте и продублируйте изображение на дно документа. Получится результат, как на картинке ниже.

Рисуем градиент

Пришел черед воспользоваться красивыми градиентами о которых шла речь в начале урока. Создайте новый слой и нарисуйте прямоугольник инструментом Marquee Tool (M) во всю ширину рабочей области и высоту 21px. Теперь выберите инструмент Gradient Tool (G) и холодный градиент. Я выбрал тот, что называется “Black 5 – Gloss”. Проведите вертикальную линию этим инструментом удерживая SHIFT чтобы создать вертикальный градиент.

Получившуюся фигуру переместите наверх. У вас должно получиться нечто похожее на картинку ниже.

Стили слоя

Теперь применим стили слоя Drop Shadow.

Цвет переднего плана установите как #545557 а цвет заднего фона #1e211f на панели инструментов. Инструментом Marquee Tool (M) выберите область паттерна. Выберите инструмент градиента Gradient Tool (G) и первый градиент (копбинация из черного и темно серого цветов). Нарисуйте градиент поверх выделение удерживая SHIFT. К слою примените режим наложения Multiply.

Теперь создайте новый слой над всеми слоями. Нарисуйте прямоугольник с закругленными краями с цветом #dfdfdf. Правый клик по слою и из выпадающего меню выбираем Режимы смешивания Blending Options в которых применяем тень Drop Shadow. Далее отделяем стиль слоя от слоя Layer > Layer Style > Create Layer.

У нас два отдельных слоя, прямоугольник и тень. Сдвиньте и измените размер тени, чтобы получить результат как на картинке ниже. Можете применить трансформирование CTRL+T, затем правый клик по объекту и выбираем пекспективу Perspective. Тащим уголки рамки в разные стороны.

Либо сдвиньте тень немного ниже и скройте верхнюю часть тени резинкой.

Добавляем текст

В заключении добавляем текст, копирайт информацию и логотип.

Подготавливаем футер для HTML

Чтобы подготовить футер для резки в HTML фаил, скройте текст (текст будет добавлен в HTML), растеризуйте и слейте вместе слои. Вырезайте задний фон как показано ниже, затем сделайте Пэист в новый фаил. Паттерном можно залить фон применив настройки заднего фона в CSS фаиле. По этой причине мы вырезаем такой маленький кусочек изображения, чтобы при загрузке страницы загружалось как можно меньше графики.

Чтобы вырезать центральную часть футера выберите контент внутри направляющих и скопируйте его в новый фаил. Сохранить фаил с помощью Save > Save For Web & Devices где выберите JPG с подходящим качеством сжатия. JPG и PNG отлично подходят для сохранения изображений, где использованы градиенты. GIF больше подходит для сплошных цветов. Вот примерный алгоритм вашей работы.

Футер сайта

Вот мы и сделали приятный футер для сайта.

Постовой: Как приготовить вкусные булочки? Масса интересных и вкусных рецептов булочек всех видов на сайте bulochki.org