Этот урок показывает, как создать милую нижнюю часть сайта из влюбленных кроликов для шаблона ко дню Святого Валентина.
Сегодня мы научимся делать милый красивый низ шаблона с темой дня Святого Валентина. Когда вы создадите эту нижнюю часть сайта, вы добавите несколько трюков в ваш багаж, состоящих из создания иллюстраций похожих на наклейки прикрепленные к шаблону, создание хорошего узора для фона и хорошо сбалансированной картинки.
Вы можете скачать шаблон «Влюбленные кролики» вместе с полным 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
Просмотров: 4561
 Ваш коментарий будет первым | |
