Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





Как создать футер в стиле дня Святого Валентина

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

Вы можете скачать шаблон «Влюбленные кролики» вместе с полным PSD файлом в разделе BoxedArt’s members, так же как и другие шаблоны вебсайтов и продуктов веб дизайна. Сначала определимся с картинками, которые нам понадобятся. У нас есть 2 милых кролика, влюбленные девочка и мальчик, подарок в саду и бумажка с ярлычком Валентинки.

Первая часть дизайна области footer шаблона сайта – это воспроизведение фоновой картинки. Для этого мы начнем с нового документа размером 42x30 пикселей, затем добавим новый слой и зальем его светлым пастельным синим цветом #d5e5f1.

Далее давайте нарисуем несколько маленьких сердечек, но помните, сначала создать новый слой. Затем воспользуйтесь custom shape tool (Произвольные фигуры), выберите фигуру heart card.

Измените цвет переднего плана на белый, а затем нарисуйте несколько маленьких сердечек и дублируйте их как на рисунке.

После этого зададим узор с помощью Edit > Define Pattern (Правка>Задать узор) и назовем ее loves.

Теперь, когда у нас есть любовный узор, пришло время создать милую нижнюю часть сайта. Начните с нового документа (1000x900 пикселей). Создайте новый слой и залейте его светлым пастельным синим цветом #d5e5f1.

Затем двойной щелчок по слою, который только что создали, и у вас откроется окно стилей слоя. Выберите Pattern Overlay (Наложение узора) и щелкните по узору, у вас откроется окно выбора узора, выберите созданный вами узор и щелкните OK.

Вы увидите слой, залитый фоном с маленькими сердечками.

Далее нарисуем квадрат с закругленными углами для контекстной области шаблона как на рисунке.

Для этого воспользуйтесь rounded rectangle tool (Прямоугольник с закругленными углами) с радиусом 20px и убедитесь, что цвет переднего плана установлен на белый.

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

Как сделать, чтобы картинка была похожа на наклейку? Просто добавить следующие настройки стилей слоя к векторной картинке.

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

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

Теперь как-то пустовато слева… давайте поместим там бумажный ярлык. И добавим текст на ярлык. Я разместил дату дня Святого Валентина.

Наконец, добавим белую полосу ниже всего остального для текста авторские права и условия.

Сделайте ее прозрачной, установив opacity 20%

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

как создать нижнюю часть сайта в стиле дня Святого Валентина на основе шаблона с кроликами

Источник: boxedart.com
Просмотров: 8546

  Ваш коментарий будет первым

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама


Error. Page cannot be displayed. Please contact your service provider for more details. (18)