Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание макета страницы на рождественскую тему

Создание макета страницы на рождественскую тему

Автор: sondar | Категория: Уроки Photoshop » Web | 20-12-2012, 12:25
С приближением рождества мы все чаще представляем себе наряженные елки, подарки, Санта Клауса, рождественские орнаменты. Именно поэтому мы решили объединить все эти элементы в создаваемом макете страницы на рождественскую тему. Ниже вы можете увидеть заголовок, созданный на этом уроке по фотошопу.

Создание макета страницы на рождественскую тему


Я подготовил несколько иллюстраций на тему рождества. В моем распоряжении есть белая рождественская елка, несколько подарков, маленький Санта, плюс кое-какие рождественские орнаменты.

Создание макета страницы на рождественскую тему


Создание макета страницы на рождественскую тему


Шаг 1
Теперь давайте объединим эти изображения в один коллаж. Сначала откройте новый проект (CTRL+N) размером 1000x900 пикселей. Теперь, прежде чем приступить к созданию коллажа, давайте выберем красивый фоновый цвет. Так как основная тема – рождество, то остановимся на красном. Итак, зальем фон красным цветом #ab232a.

Создание макета страницы на рождественскую тему


Шаг 2
Далее, создадим полоску шириной 16 пикселей вдоль верхнего края холста, и зальем ее темно-красным цветом #590405. Затем, ниже этой полоски, прочертим еще одну 1-пиксельную линию еще более темного оттенка красного #5a0405, чтобы создать в этом месте двухтональный эффект.

Создание макета страницы на рождественскую тему


Шаг 3
По центру полоски я создал пятно красного свечения, имитирующее падающий сверху свет. Создайте для этого новый слой и воспользуйтесь инструментом Кисть (Brush tool) размером 200 пикселей, и цветом #f84f57.

Создание макета страницы на рождественскую тему


Теперь просто кликните по центру плоски, и вы заметите, что “свечение” распространяется за ее пределы. Удерживая Ctrl, кликните по слою полоски на палитре слоев.

Создание макета страницы на рождественскую тему


Выделив, таким образом полоску, пройдите в меню Выделение > Инвертировать (Shift+Ctrl+I) и нажмите Delete. В результате, свечение, распространяющееся вне полоски, будет удалено, а оставшаяся небольшая часть свечения создаст эффект переливающегося света на блестящей праздничной ленточке.

Создание макета страницы на рождественскую тему


Создание макета страницы на рождественскую тему


Шаг 4
Наша верхняя полоска готова. Теперь добавим логотип. Я набрал некоторый текст на тему рождества. Здесь был использован белый цвет, что делает текст довольно выделяющимся. Ниже я добавил слоган розового ((#ff979d) цвета, так, чтобы он не перекрывал основной текст.

Создание макета страницы на рождественскую тему


Шаг 5
Чтобы создать рождественскую атмосферу, добавим рядом с логотипом кое-какой тематический орнамент. Я добавил несколько маленьких елочек, яркую звезду и шары, придавая им вид, как будто они подвешены к верхней ленточке. Добавляя каждый новый элемент, не забывайте создавать для него отдельный слой.

Создание макета страницы на рождественскую тему


Шаг 6
Настало время заняться навигацией. Постараемся сохранить наши дизайн достаточно простым. Так как я уже добавил декоративные элементы в верхнюю часть макета, мы создадим простую панель навигации при помощи текста. Наберите несколько пунктов навигации: Магазин, Идеи, О нас, Контакты, используя для этого розовый цвет ((#ff979d). Затем прочертите линию, отделяющую шапку страницы и панель навигации.

Создание макета страницы на рождественскую тему


Шаг 7
Теперь давайте украсим наш макет непосредственно рождественским коллажем. Здесь я использовал рождественскую елку, Санта Клауса и несколько подарочных упаковок. Для начала расположите елку с левого края макета и увеличьте ее размер так, чтобы звезда на макушке оказалась вровень с логотипом. Вот так:

Создание макета страницы на рождественскую тему


Шаг 8
Отлично. Пора звать Санту. Расположите Санта Клауса прямо перед елкой, только не по самому центру, сдвиньте ее чуть правее. Далее, позади него разместите подарки, один слева, и еще один справа. Так как показано ниже. Получился прекрасный коллаж.

Создание макета страницы на рождественскую тему


Шаг 9
Теперь в правой части макета крупными буквами добавим краткое тематическое описание, например “ It’s Christmas Time !!!”. Воспользуйтесь цветом #000000.

Создание макета страницы на рождественскую тему


Я также добавил яркую красную обводку вокруг букв, для чего просто дважды кликните по слою с текстом и примените стиль слоя Обводка (Stroke), задав цвет #e02c35 и размер 2 пикселя. Под коллажем нужно провести еще одну линию, чтобы отделить его от области контента.

Создание макета страницы на рождественскую тему


Шаг 10
Наконец, еще некоторый текст и несколько дополнительных кнопок. Выберите инструмент Прямоугольник со скруглёнными краями (Rounded Rectangle Tool) и начертите небольшую фигуру для будущей кнопки. Затем выберите инструмент Градиент (Gradient tool) установив Основной цвет (Foreground) #4b8708 (ярко-зеленый), и Фоновый цвет (Background) - #3e6e08 - более темный зеленый. Откройте вкладку Контуры (Path) и выберите прямоугольный контур, который мы только что начертили.

Создание макета страницы на рождественскую тему


Наложите на контур градиент сверху вниз. Затем дважды кликните по этому слою и добавьте стиль слоя Обводка (Stroke).

Создание макета страницы на рождественскую тему

Создание макета страницы на рождественскую тему


Добавьте на кнопку надпись “Читать далее”. Ну вот, ваш макет страницы на рождественскую тему готов! Надеюсь, вы получили удовольствие от процесса его создания.

Создание макета страницы на рождественскую тему


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

Другие новости по теме:


Просмотров: 4010 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.