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

 

 

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

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

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

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

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

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

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

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

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

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

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

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

Продублируйте слой с маленьким прямоугольником и  разместите его на левой стороне полосы. Далее используйте инструмент Текст , чтобы добавить текст (в нашем случае это будет сообщение Твиттер)добавьте ему стили слоя :

Теперь воспользуйтесь ссылкой для добавления значка Твиттер  http://www.iconfinder.com/, затем добавьте значок в наш макет  и добавьте ему три стиля слоя: внутренняя тень, тень и наложение цвета. Выполните настройки, указанные ниже:

Вот что должно у вас получиться:

Следующий шаг – создаем окно контента.
Наш сайт будет включать в себя две колонки , которые будут отображать новости, интервью и галерею фотографий.
Создаем прямоугольник со скругленными углами (510*350 пикселей) и радиусом округления 10 пикселей , темно красного цвета # 860609.

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

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

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

Создайте новую группу слоев. Используя Прямоугольник со скругленными углами создайте форму  размером 100*100 пикселей.

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

Добавьте изображение на созданную область.

В завершении работы над этим объектом – нанесите текст  - название и описание.

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

Далее создаем следующий элемент – заголовок списка новостей.
Заголовок списка новостей должен  быть ровно под предыдущим блоком. Поэтому создаем новый  прямоугольник  с закругленными углами  510*40 пикселей. Цвет  тот же , что использовался раннее.

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

Далее наносим текст, добавляем к нему стиль:

Скопируйте красный прямоугольник, на копии залейте его желтым цветом  # ee931a. Используя маску слоя и Полигональное лассо для того, чтобы заместить половину прямоугольника желтым цветом.

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

Используйте инструмент Текст для нанесения ссылок под заголовком.

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

Создаем подвал сайта.

Для подвала создайте прямоугольную форму  с закругленными углами 980*80 пикселей.

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

Продублируйте логотип с верхней части и разместите копию в нижней правой части макета.

Добавим иконки Twitter, Facebook и / или RSS.

Вот и закончен наш макет.

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

Источник.