» Форма входа

»Мoy-weB ver.4.1

» Статистика

Главная » 2008 » Сентябрь » 10 » Создание Рождественского веб-сайта

Создание Рождественского веб-сайта
10.Сен.2008 | 16:17:39
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 не получилось):
Создание Рождественского веб-сайта

Результат должен получиться как на картинке ниже:
Создание Рождественского веб-сайта

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

Ваш SideBars должен все еще напоминать мой:
Создание Рождественского веб-сайта

Теперь
мы должны этот 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 horisontal_type.gif, и впишите кое-что подобное этому “Christmas Site”.
Создание Рождественского веб-сайта

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

Теперь у вас должен быть такой текст:
Создание Рождественского веб-сайта

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

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

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

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

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

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

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

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

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

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

Теперь ваши кнопки должны напомнить это!
Создание Рождественского веб-сайта

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

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

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

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

Заполните это выделение синим цветом (я использовал #1d78c4).
Создание Рождественского веб-сайта

Больше стилей слоя. Примените следующие стили слоя и настройки:
Создание Рождественского веб-сайта
Создание Рождественского веб-сайта

У Вас должно получиться что-то вроде этого:
Создание Рождественского веб-сайта

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

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

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

Мои снежинки теперь напоминают это:
Создание Рождественского веб-сайта

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

Ради крошечных деталей, я также добавил темный градиент в 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 .
Создание Рождественского веб-сайта

Конечный результат:
Создание Рождественского веб-сайта


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

Автор/Оригинал: PhotoShopSTAR
Перевод: GOBLOiD
Категория: Уроки фотошоп | Просмотров: 556 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]