Создание Рождественского веб-сайта

[web-des]

Designing a Christmas-Themed Web Layout



В преддверии Новогодних и Рождественских праздников выкладываю урок по созданию Рождественского веб-сайта.

От автора: В этом уроке я покажу Вам, как создать Рождественский веб-сайт. Этот урок является, вероятно, для профессиональных пользователей Фотошопа, а не для новичков, поскольку он содержит довольно много работы.

Создание Рождественского веб-сайта

1. Создаем Новый Документ

Прежде всего, для начала создадим новый документ. Я буду использовать довольно маленький размер документа 780 x 880 пикселов для этого урока. Далее заполним фон хорошим цветом. Я использовал темно-красноватый цвет - #4f0100.

2. Создание SideBars

Теперь мы создадим sidebars в виде леденца )). Первое, с чего начнем, создадим прямоугольник с помощью rectangular marquee tool, приблизительно 10 x 80 пикселов. Убедитесь, что Вы находитесь на новом слое, заполните выделение белым цветом.



Затем, после того, как Вы создали основу SideBars, создаете другой слой, и выберите polygonal lasso tool.


Удерживая shift, сделайте выделение, подобное ниже, как на картинке:


Теперь, убедитесь, что Вы находитесь на новом слое. Заполните ваше недавно сделанное выделение ярко-красным цветом. Теперь удалите лишние грани, которые выходят за края вашего SideBara’а.


Дублируйте ваш новый слой с красной линией и пододвиньте ее приблизительно на 10 пикселов (shift+up клавиша курсора).


Сделайте еще дубликатов и так же сдвиньте их на 10 пикселов. Повторите этот шаг 2-3 раза.


Слейте ваши слои с красными полосками, и примените следующее Наложение Градиента (я Blend Mode поставил на Lighten (Светлее) и Scale на 90%, т.к. у меня с Overlay не получилось):


Результат должен получиться как на картинке ниже:


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


Теперь мы должны этот SideBar превратить в образец tilable.Слейте слой с красными линиями и слой с основной белой полосой. Сделайте выделение по всей ширине, но по высоте приблизительно столько же, сколько у меня. Левый верхний угол выделения должен начинаться сражу же после того, как кончается угол красной линии, а нижний левый угол выделения должен заканчиваться перед началом красной линии, как картинке ниже:


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


Дублируйте sidebar, отразите его по горизонтали Edit > Transform > Flip Horizontal (Редактировать> преобразовать> отразить Горизонтально), затем перемещаем его в правую сторону шаблона. Я также применял к этому слою Внешнее Свечение:



3. Создание Заголовка сайта

Продолжим. Сначала создадим новый слой, потом создадим прямоугольное выделение между нашими sidebars по всей высоте шаблона. Заполним это выделение более легким красным цветом, чем фон - #690806.



Теперь мы начнем делать сам заголовок сайта. Создайте новый набор слоя , потом создайте выделение приблизительно 738x60 пикселов на верху документа между sidebars.


Заполните выделение легким красным цветом - #7e0a07.


Теперь примените следующие стили слоя и настройки для заголовка сайта:



Для Pattern Overlay скачайте этот шаблон


На данный момент у вас должно быть, что-то вроде того, как картинке ниже:


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


Измените режим смешивания для этого слоя с градиентом на Soft Light (Мягкий Свет) и понизьте непрозрачность приблизительно на 15-30 %. Это в действительности зависит от того, как это смотрится и как Вы хотите, чтобы оно смотрелось.


Снова создайте новый слой, затем сделайте белую линию размером в 1px поперек вершины заголовка сайта.


Измените режим смешивания для этой линии на Soft Light (Мягкий Свет) и понизите непрозрачность приблизительно на 30-50 %.


Наконец для нашего заголовка, мы должны добавить какой-нибудь текст. Выберите Horizontal Type Tool , и впишите кое-что подобное этому “Christmas Site”.


В вышеупомянутом изображении я использовал этот цвет для текста - #edb27a. Если у вас нет никаких приличных шрифтов правописания, Вы можете конечно же скачать некоторые шрифты от DaFont: DaFont Calligraphy Section. Двойной щелчок по слою с текстом, что бы настроить Blending Options (Стили Слоя):



Теперь у вас должен быть такой текст:


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


В вышеупомянутом изображении я использовал: Tahoma, 11pt, Bold, #ebbe97, и Сглаживание установленное на «Никакого».


4. Панель навигации

Теперь создадим навигационную кнопочную панель. Во-первых, создайте новый слой, затем сделайте большое прямоугольное выделение под заголовком сайта (приблизительно 1 пиксел между ними):


Теперь заполните это выделение ярко-оранжевым цветом, я использовал #d53900. Вы можете заполнить выделение любым цветом, которым захотите, но для этого урока Вы можете использовать то, что использовал я!


После заливки вашего выделения, примените следующие стили слоя к вашему слою с навигационной панелью:



У вас должно получиться, что-то подобное как на картинке ниже:


Выглядит хорошо! Теперь я добавлю немного гранжа, на левую сторону панели. Неплохие гранж-кисти Вы можете скачать с PhotoshopBrushes.com.
Я люблю их!
Так, после того, как я применил эти кисти для моей навигационной панели, я изменил режим наложения слоя на Мягкий Свет и понизил непрозрачность приблизительно на 60 %.


Следующая вещь, которую мы будем делать - это добавим сами кнопки. Так, все на том же самом слое, делаем прямоугольные кнопки с расстоянием между ними в 1px, точно так же как у меня:


Мои выделения были размером 180x26 пикселов. Снова заходим в Blending Options (Стили Слоя) и для слоев с кнопками используем следующие настройки:






Теперь ваши кнопки должны напомнить это!


Пока очень хорошо. Наконец, для этих кнопок Вы должны добавить текст.


Выше я использовал: Tahoma, 12pt, Bold, #ffffff . Не плохо пока?

5. Создание графического заголовка (баннера) для сайта

Во-первых, создайте новый слой, далее сделайте выделение той же высоты, как и навигационная панель, и разместите это выделение рядом с этой панелью.


Заполните это выделение синим цветом (я использовал #1d78c4).


Больше стилей слоя. Примените следующие стили слоя и настройки:



У Вас должно получиться что-то вроде этого:


Снова, я добавил немного гранжа в верхнем левом углу баннера. Я также изменил режим смешивания на Overlay (Перекрытие) и оставил непрозрачность 100%.


Далее я добавил снежинок как хорошую деталь. Для этого, выберите Custom Shape Tool , и используйте формы снежинки на новом слое.




Снежинки выглядят весьма прохладными, поэтому я также применял следующие стили слоя и настройки:





Мои снежинки теперь напоминают это:


Следующая вещь, которую я сделал для данного заголовка, добавил рождественскую елку. Вы можете взять эту:



Ради крошечных деталей, я также добавил темный градиент в 1px от вершины баннера до навигационной панели.


Теперь я собираюсь добавить немного снега к основанию баннера. Чтобы сделать это, Вам надо сначала создать гладкую, подобную холму дорожку с помощью Pen Tool, потом инвертировать это в выделение, и заполнить белым цветом (по завершению, удалить избыток белого).
В завершение всего этого, сделайте маленькой кистью верхний покров снега, что бы выглядело более реалистично.


Наконец для нашего заголовка, Вы должны добавить в текст, предпочтительнее название вашего веб-сайта или какой-то описательный текст. Я использовал тот же самый шрифт как раньше:


К этому слою с текстом я применил следующие стили слоя:



6. Создание новостной полоски

Теперь мы будем создать полоску последних новостей (посты, статьи) для шаблона. Сначала, создадим новый слой, затем создадим фиксированное выделение приблизительно 200x30 пикселов (та же самая ширина как у навигационной панели).


Заполним наше выделение темновато-зеленым цветом - #307017, потом применим следующие стили слоя:




Итог:


Создайте новый слой, потом сделайте выделение размером на половину от только что созданного прямоугольника. Заполните это выделение градиентом от Белого к Прозрачному.


Измените режим смешивания для этого слоя на Мягкий Свет, потом уменьшите непрозрачность приблизительно на 15-30 %.


И затем создайте 1px линию сверху этой полоски. Для этого слоя изменяют режим смешивания на Мягкий Свет, и уменьшите непрозрачность приблизительно на 50 %.


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


Создайте новый слой, потом сделайте выделение немного поменьше, чем в предыдущий раз, и разместите его под ним же (размер моего выделения 200x60 пикселов)


Заполните выделение тем же самым цветом. Примените следующие стили слоя:




Итог:


Дублируйте этот слой и переместите это вниз на 16 пикселов:


Повторите предыдущий шаг приблизительно 8-10 раз. Теперь добавьте текста.


7. Создание Основной Области сайта (Последние обновления)

Здесь Вы должны сделать то же самое, как и с предыдущей полоской. Вы можете даже дублировать предыдущую полоску и переместить ее вправо, растянуть, потом изменить цвет, это - то, что я сделал, и это было легко!


Цвет, который я использовал для основной области, был #1f7bc5. Следующая вещь, которую будем делать, создадим большое выделение по всей оставшейся ширине:


Если Вы находитесь на новом слое, заполните это выделение белым цветом, потом примените следующие стили слоя:



Итог:


Добавьте любой текст:


Наконец для этой области, я добавил баннер в основании этой области с высокой непрозрачностью, я сделал его на 80px по высоте, так что это будет соответствовать баннеру.


8. Sidebar и Нижняя сноска

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


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


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


Заполните это выделение красным цветом, я использовал #7e0a07. Следующая вещь, которую сделаем - применим стили слоя:




Если хотите более легкий путь без применения этих стилей слоя, Вы можете, копировать стили слоя из слоев заголовка сайта.


Теперь Вы можете добавить солнечного света в основной области подобно как в заголовке сайта. Напоминаю Вам об этом:
1. Сделайте выделение в половину размера полоски нижней сноски.
2. Заполните выделение градиентом от белого к прозрачному.
3. Измените режим смешения слоя на Мягкий Свет и уменьшите непрозрачность на 15-30 %.
4. Сделайте линию размером в 1px сверху полоски нижней сноски, режим наложения измените на Мягкий Свет, потом уменьшите непрозрачность на 40-70 %.


Теперь для полоски нижней сноски мы добавим текст. Слева я написал слово "Copyright "в том же самом стиле, как и текст в заголовке. Потом справа я добавил в уведомлении об авторских правах.


Для маленького текста я использовал: Tahoma, 11pt, #ebbe97 .


Конечный результат:


Вот и все! Я надеюсь, что Вы наслаждались уроком, и что Вы смогли довести до конца этот урок.
_____________________________________________________

Автор/Оригинал: PhotoShopSTAR
Перевод: GOBLOiD