Навигация в стиле Xbox360 - Школа Photoshop
Баннер Xbox 360 Баннер Xbox 360

Навигация в стиле Xbox360

26.09.2008Категория урока: Веб-графика

Добро пожаловать в мой урок по созданию баннера в стиле xbox360, вы научитесь создавать простую навигационную панель, а также получите несколько хороших советов и научитесь нескольким приемам, в конце у вас должно выйти что-то вроде этого:

Баннер Xbox 360

Приблизительное время выполнения: 5 минут

Шаг 1

Создайте новый документ размером 700×500, залейте его цветом #565656, создайте новый слой и нарисуйте в нем прямоугольник размером 4-5 пикселей слева направо и залейте его цветом #3abc00, теперь используйте такие blending options (кликните правой кнопкой на слое, выберите blending options).

Gradient Overlay

Баннер Xbox 360

Навигация в фотошопе

Шаг 2

Теперь давайте создадим секцию с баннером, выберите marquee tool и нарисуйте прямоугольник большого размера, между левой частью и центром, далее зайдите в ‘Select > Modify > Smooth > 4px‘, залейте это либо белым, либо каким-нибудь светлым цветом в новом слое, залив, сотрите нижнюю часть, потому что нам не нужная эта кривая.

Навигация в фотошопе

Шаг 3

В этом шаге мы должны улучшить этот белый прямоугольник, который мы только что создали, так что выберите marquee tool, выберите форму, создайте новый слой и затем зайдите в ‘Select > Modify > Expand > 3px‘, передвиньте его вниз на палитре слоев так, чтобы он находился за белой фигурой и залейте его серым, теперь обрежьте нижнюю часть, если она перекрывает зеленую панель.

Баннер Xbox 360

Теперь мы применим blending options в слое с серой границей, так что кликните на него правой кнопкой и выберите blending options, затем используйте такие настройки:

Drop Shadow: Просто поставьте галочку, не меняйте никаких настроек.

Inner Shadow

Баннер Xbox 360

Gradient Overlay

Навигация в фотошопе

Шаг 4

Далее нам нужно сделать внутреннюю часть баннера более симпатичной, так что выберите magic wand и залейте цветом #33c500, это очень симпатичный зеленый, вот увидите. Теперь создайте новый слой и сделайте его высотой 50 пикселей и шириной приблизительно с весь баннер, когда вы сделаете это, зайдите в ‘Select > Modify > Smooth > 4px‘, поставьте цвет на белый и выберите gradient tool, протяните сверху донизу выделения marquee, теперь поставьте blending option на overlay, это добавило приятного блеска.

Навигация в фотошопе

Шаг 5

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

Логотип Xbox:

Баннер Xbox 360

Баннер Xbox 360

Шаг 6

Теперь мы добавим текст, выберите text tool, наберите там название сайта, зайдите в blending options и теперь в опциях gradient overlay введите такие настройки:

Gradient Overlay

Навигация в фотошопе

Далее я использовал эту текстуру, вставьте её в новый документ и зайдите в ‘Edit > Define Pattern‘, теперь используйте её внизу вашего баннера, поставьте в режим overlay и поиграйте теперь с ‘Fill‘, он находится под Opacity в палитре слоев.

Текстура:

Навигация в фотошопе

Баннер Xbox 360

Шаг 7

Это последний шаг. Выберите marquee tool и нарисуйте прямоугольник слева направо высотой примерно 30 пикселей, теперь создайте новый слой и залейте его цветом #2dbe00,  переместите его за сам баннер и создайте блеск, как мы делали это раньше, в шаге 3.

Баннер Xbox 360

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

Навигация в фотошопе

Источник: Xbox360 Banner




Смотрите также:

Понравился урок? Поделитесь им в социальных сетях:



7 комментария(-ев) к уроку “Навигация в стиле Xbox360”

  1. :smile: Большое спасибо, весьма познавательно.

    Fiesta

  2. Только качество скриншотов очень низкое…

    Fiesta

  3. а чем скрины не угодили? :grin:

    Аниматор

  4. я бы не стал называть это именно «стиль xbox»

    а за урок, спасибо :wink:

    System of a Down

  5. Хм, “стиль xbox” — лучше можно найти)))

    Поисковая система

  6. Лучше можно найти, но дизайн отличный!

    создание сайта

  7. Спасибо за урок. Ясно и понятно.С gradient overlay можно поиграться и на свое усмотрение.

    ephoto

Прокомментировать урок

 


Rambler's Top100