Tags: дизайн сайта | Уроки Photoshop | уроки веб дизайна

При помощи этого урока вы сможете создать макет сайта, который сможет использоваться в дальнейшем  для веб-сайта о звездах, и шоу-бизнесе. Это яркий, стильный макет , на изготовление которого потребуется не так много времени и сил, но  не оставит равнодушным ни одного посетителя.

Создайте новый документ 1200*1500 пикселей.

Создайте новую группу слоев , назовите их «Заголовок» или что-то в этом роде. Создайте при помощи инструмента Прямоугольное выделение  область, размером примерно 1000*110 пикселей. Это будет фон Заголовка , используя инструмент Заливка , залейте на новом слое выделенную область. Добавьте новому слою следующие стили, как показано на рисунке ниже:

Добавьте в верхнюю часть логотип.

Далее создадим окно поиска , для этого инструментом Прямоугольник со скругленными углами , радиусом 10 пикселей создадим область, как показано на рисунке ниже. Добавим на область иконку поиска и текст.

Применим к кнопке «Поиск» следующие стили:

Далее создайте новую группу слоев и назовите его «Меню». Инструментом Прямоугольник со скругленными углами и радиусом 4 пикселя создайте прямоугольную форму по всей ширине макета.

Далее на эскизе слоя  щелкните правой кнопкой мыши и выберите из меню Выделить пикселы. Перейдите в меню Выделение-Модификация-Уменьшить . Введите 1 пиксель и нажмите Применить.
Измените цвет переднего плана на  черный , далее наложите градиент, так как показано на рисунке от серого к прозрачному, как показано на рисунке.

Далее нанесем текст на меню навигации. Добавим в тексте белые тени, шириной в 1 пискель.

Следующим шагом создайте прямоугольную форму, при помощи инструмента Прямоугольник. Далее перейдите в меню Редактирование – Трансформация –Перспектива. Трансформируйте прямоугольник, добавьте ему такой же тип градиента как и для кнопки поиска.

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

Используя инструмент Перемещение разместите прямоугольник, как показано на рисунке ниже: