Создаём в Photoshop современный макет игрового сайта (Часть 4)
Вход Регистрация

Создаём в Photoshop современный макет игрового сайта (Часть 4)

← Третья часть урока

Выбрав Line tool (Линия), я разделю разлинованную область пополам, проведя, рядом друг с другом, две вертикальные линии (белую и черную) с пониженной непрозрачностью, предварительно подготовив для них просвет простым выделением/удалением. Затем я добавлю какой-нибудь текст.

Скриншот 76

Справа от таблицы я нарисую на новом слое прозрачный (Feel/Заливка = 0) прямоугольник, как на рисунке ниже:

Скриншот 77

Затем добавлю Inner Glow (Внутреннее свечение) с указанными ниже параметрами:

Скриншот 78

Я ограничу прямоугольник сверху светлой линией 1 рх, как в левом блоке, затем добавлю какой-нибудь текст, включив Horizontal type tool (Горизонтальный текст), и нарисую загрузочную панель. Это будет у нас видеоплеер.

Скриншот 79

В центральной области контента я добавлю другие элементы. Думаю, что это достаточно легко и не требует объяснений.

Скриншот 80

Дальше я выбираю (Эллипс) и создаю очередную фигуру для следующего элемента.

Скриншот 81

И этому слою я, конечно, добавлю эффекты.

Скриншот 82

Скриншот 83

Скриншот 84

На новом слое выше эллипса в палитре слоев я добавлю пару иконок, расположив их, как на рисунке ниже:

Скриншот 85

Теперь я добавлю несколько элементов с правой стороны области контента, и снова я не стану объяснять, как заполнил это поле. Как вы и сами видите, здесь присутствуют несколько линий, радио-кнопки, текст, несколько иконок флагов и красивый баннер с классным 3D компьютером.

Скриншот 86

В правом, верхнем блоке я создам на новом слое выделение в шапке таблицы и залью его прозрачным (Feel/Заливка = 0) цветом.

Скриншот 87

Для этого слоя я добавлю следующие режимы смешивания:

Скриншот 88

Скриншот 89

Вот мой результат:

Скриншот 90

Включив Pen tool (Перо), я нарисую кнопку изящной формы над видеоплеером справа. Это очень просто сделать, если включить сетку (grid).

Скриншот 91

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

Скриншот 92

Теперь с помощью Pen tool (Перо) я нарисую еще одну фигуру в шапке макета справа.

Скриншот 93

Добавляю несколько эффектов.

Скриншот 94

Скриншот 95

Скриншот 96

Скриншот 97

Вот мой результат:

Скриншот 98

Добавляю сюда логотип.

Скриншот 99

Теперь я создам выделение вокруг нашей фигуры, перейдя в Select > load selection (Выделение > Загрузить выделение), или кликнув с нажатой клавишей Ctrl по миниатюре фигуры в палитре слоев, и на новом слое добавлю простой узор. На рисунке ниже показан паттерн, который я здесь использовал. Вы можете найти в сети и скачать такой набор пиксельных узоров.

Скриншот 100

Вот результат:

Скриншот 101

Затем я возьму Eraser tool (Ластик) с круглой, мягкой кистью и сотру внизу рисунок узора, как показано ниже:

Скриншот 102

С правой стороны шапки я создам точно такую же фигуру с тем же набором стилей и таким же узором. Для этого элемента я использовал логотип сайта Grafpedia.

Скриншот 103

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

Это мой окончательный результат. Надеюсь, что он вам понравился.

Скриншот 104


Комментировать

captcha

  #1 / Гость
26 декабря 2012 / Ответить  

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

Вход

Зарегистрируйтесь, если нет учетной записи

Напомнить пароль
Регистрация
Напомнить пароль
Войти в личный кабинет