Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

208 686 чел. 399 983 работы 4 093 урока
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Легкая

Футер для сайта в стиле 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

Комментарии 114

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

простой урок, но все равно что-то узнаешь новое

кстати, есть ещё на этом сайте уроки, которые близко касаются верстки? и вообще может есть дружественный сайт по верстке, подобный этому...

Спасибо, было интересно делать!

Вроде получилось. Первый урок по графике для сайта.

Спасибо переводчику!

интересный урок! Спасибо!

Классный урок. Спасибо!

Чет я не въехала в смысл урока :)

Еще 30
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules