Рубрика: Photoshop Уроки | Урок прочитали: 712
 (голосов: 0)

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

Поскольку Web 2.0 завоевал интернет, нижняя часть страницы, так называемый Footer, стала более важной, чем прежде.
 В этом уроке показывается, как сделать стильный Footer (Футер - дублирование основного меню внизу сайта, как правило, с указанием координат изготовителя и Copyright’а.)  для сайта в Photoshop.

На изображении представлено то, что мы будем создавать. Нажмите на изображение ниже, чтобы увидеть изображение в полноэкранном режиме:

Шаг 1. Характерной чертой стиля Web 2.0 являются расплывчатые цвета, градиенты.
Для создания нашей нижней части, будем использовать сборник градиентов, с помощью которых можно получить прекрасный внешний вид. Сборник Градиентнов можно скачать здесь

Шаг 2. Откройте новый файл в Photoshop. Автор создал изображение больших размеров - 1440х900px. Это не показатель того, что и Ваши размеры должны быть такими, но это даёт представление того, когда окно браузера растягивается.
Выберите цвет фона, в случае Автора выбор для фона простой градиент с #b0b0b0 и #e1e1e1. Удерживая SHIFT, протяните градиент сверху вниз слоя.

Шаг 3. В веб-дизайне очень важно представлять то, чего хотим добиться.
То есть выбор между плавающей схемой (что не повторяется в браузере) или
постоянный (во многих сайтах в стиле Web 2.0 элементы фиксированы, и, как правило, находятся в центре). В нашем случае, мы будем работать с фиксированным форматом 760х420px. Это гарантирует, что даже на экране 800х600px, наше изображение будет отображаться правильно.
Будем использовать направляющие, что бы видеть границы создаваемого сайта.
Если Вы хотите, чтобы Ваше творение корректно отображалось на разрешении 1024х768рх, то следует разместить направляющие так, чтобы они очерчивали область 995х600рх.

Шаг 4 . Нижний Footer фиксированной ширины, но это значит, что вся остальная область будет пустой.
Для этого мы будем использовать узор сделанный Автором урока в Photoshop,
который имитирует металлическую пластину.
Чтобы скачать узор нажмите здесь
Откройте изображение в фотошопе и перейдите Редактировать>Определить узор (Edit>Define Pattern) и выберите название для него.

Теперь откройте новый файл 1440х86px, и перейдите Редактирование>Выполнить заливку (Edit>Fill) и выберите узор, который только что определили. Выделите все (CTRL+A), а затем вырежьте и вставьте изображение в основание первого документа.
Вы получите результат, показанный ниже.

Шаг 5. Теперь пришло время для того, чтобы использовать набор градиентов (Шаг 1).
Создайте новый слой и создайте прямоугольник, используя Инструмент Прямоугольная область (Marquee Tool (M)), размером 100% от ширины документа и 21px высотой.
Теперь выберите Инструмент Градиент (Gradient Tool (G)) и выберите градиент холодного оттенка. Автор выбрал "Black5 - Gloss" из градиентного пакета.
Протяните градиент вертикально над выделением, удерживая "SHIFT", это обеспечит вертикальное направление.

Теперь переместите получившейся слой в вершину формы, созданной в 4 шаге. У Вас должно получиться нечто похожее на то, что представлено на скриншоте.

Шаг 6. Теперь мы добавим эффект тени на слой который создали в шаге 5.

Шаг 7. Теперь устанавливаем цвет переднего плана на #545557 и цвет фона #1e211f.
Создайте новый слой ниже слоя, созданного в 4 шаге. Используя инструмент Прямоугольная область (Marquee Tool (M)). Выделите содержание слоя, созданного в 4 шаге. Выберите Градиент (Gradient Tool (G))), выберите первый градиент (комбинация из цветов переднего и заднего плана).
Нарисуйте вертикальный градиент. Теперь переходим к слою созданному на 4 шаге и устанавливаем режим смешивания слоя на Умножение (Multiply).

Шаг 8. Теперь создайте новый слой поверх всех остальных слоев и нарисуйте прямоугольник с закругленными углами между наших направляющих, выбрав цвет #dfdfdf. Щелкните правой кнопкой мыши по слою, выберите Параметры наложения (Blending Options), а затем создать тень для прямоугольника.
Затем щелкните правой кнопкой мыши на эффект слоя и выберите "Создать слой".
Это создаст тень на отдельном слое.

Теперь у вас есть слой прямоугольник и слой с тенью, перемещайте и изменяйте размер тени, чтобы получить результат, как показано ниже.
Вы можете нажать CTRL-T, чтобы воспользоваться Свободной трансформацией, потом выберите пункт Перспектива, а затем перетащите текстуру. Также вы можете перемещать тень вниз и мягким Ластиком стереть верхние края.

Шаг 9. Чтобы закончить дизайн добавьте какой-нибудь текст, информация об авторских правах и Вашим логотипом.

Шаг 10. Наш Footer готов для использования в HTML, просто удалите текст (текст будет добавлен в HTML), слейте слои, вырежьте Footer с фона и вставьте в новый документ.

В CSS документе вы не будете работать с футером в том размере, в котором сейчас его создали. На самом деле для последующей работы в документе CSS вам понадобится лишь небольшой участок созданного футера. Это всё для того, чтобы повысить производительность загрузки изображения.

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

Вот вы и сделали красивый элемент страницы сайта!

Автор: Daniel Lopes
Переводчик: Лукша Юрий
Ссылка на источник

           

Похожие файлы и публикации:

Футер для сайта в стиле Web 2.0
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Футер для сайта в стиле Web 2.0
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Футер для сайта в стиле Web 2.0
Финальное изображение
Футер для сайта в стиле Web 2.0
В этом уроке я расскажу вам один из подходов к созданию смайлика, а затем, использую его, чтобы создать красивый эффект текста.
Футер для сайта в стиле Web 2.0
Восьмидесятые возвращаются - их влияние ощущается всюду, от моды до музыки, но нигде больше чем в цифровом искусстве.
Футер для сайта в стиле Web 2.0
Шаг 1. Итак, начнем с создания нового документа размером 900х700px. Создайте новый слой в документе и залейте его любой текстурой, похожей на дерево.
Футер для сайта в стиле Web 2.0
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Футер для сайта в стиле Web 2.0
 Чтобы приступить к работе, давайте сначала посмотрим на конечный результат.
Футер для сайта в стиле Web 2.0
Сегодня мы создадим симпатичную кнопку-переключатель, которую вы сможете использовать в своих работах. Для начала взглянем на финальное изображение.
Футер для сайта в стиле Web 2.0
Шаг 1. Создайте новый документ размером 900 на 790 px (пикселей) и залейте фон черным цветом. Создайте новый слой и назовите его "Создание формы". Выберите инструмент  Ellipse Tool (Эллипс) (U) на панели инструментов:
Футер для сайта в стиле Web 2.0
В этом уроке я покажу вам процесс, который я использовал для разработки этого действительно классного, абстрактного стиля заголовка для сайта.
Футер для сайта в стиле Web 2.0
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Футер для сайта в стиле Web 2.0
В этом уроке вы узнаете, как создать стильные удивительно красивые алмазы и научитесь создавать обои из них.
Футер для сайта в стиле Web 2.0
Шаг 1. Создание фона Зайдите в меню File > New (Файл > Новый) и создайте новый документ 600 х 200px с белым фоном. Посмотрите на изображение ниже, если вы не уверены в настройках.
Футер для сайта в стиле Web 2.0
Введение Я хотел написать этот урок, поскольку, большинство моих обучающих программ нацелено к промежуточным или продвинутым пользователям Фотошопа, тогда как этот – предназначен для новичков.
Футер для сайта в стиле Web 2.0
Вы, наверное, видели где-нибудь в интернете надписи, нацарапанные на плитке, например на Tumblr и Pinterest. Они все очень разные, но не всегда их легко создавать.
Футер для сайта в стиле Web 2.0
Ниже приведены ссылки для загрузки материалов. Но ссылок на векторные фигуры не будет. Поэтому скачайте их самостоятельно на любом дизайнерском сайте.  Это не сложно, потому что таких векторов куча.
Футер для сайта в стиле Web 2.0
Текстурированные элементы в современном веб-дизайне сейчас модная тенденция. Узнайте, как создать собственную текстуру, а затем применить ее к своему лэйблу.