Tags: Графика для сайта | Уроки Photoshop | уроки фотошопа бесплатно

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

Создайте новый документ 960*900 пикселей. Я заливаю фон белым цветом.

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

Сейчас мы изменим цвета первым трем формам сверху:

Четвертому слою мы добавим стиль слоя. Перейдите на слой-Стиль слоя-Наложение градиента.

Добавьте в гардиент следующие цвета:

Вот что должно у вас получится после этих действий:

На нижний слой добавляем тени:

Вот как все это должно выглядеть:

Далее берем инструмент Линия, толшиной в 1 пиксель.

Удерживая клавишу Shift создадим несколько строк. Удерживая клавишу  Shift вы сможете без труда сделать горизонтальные ровные линии.

Вот промежуточный результат:

Далее обьединим все слои, для этого в палитре слоев выберите все слои и нажмите Ctrl+E (данное действие обьединит все слои в один.)

Следующим шагом мы добавим другие формы в наш макет. Для этого я использую инструмент Прямоугольник со скругленными углами. Добавим две круглые формы в верхнюю часть макета. Какие использовать цвета - можете посмотреть на рисунке:

Для обеих форм добавим стиль слоя Обводка:

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

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

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

Для черной формы я задаю следующие стили:

Вот что у меня получилось: acheter lidocaine

В вершине макета я буду создавать кнопки инструментом Прямоугольник со скругленными углами.

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

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

Далее нажав правой кнопкой мыши на слое с кнопкой в палитре слоев я растрирую слой.

Потом инструментом Прямоугольное Лассо создадим выделение как указано на рисунке:

Далее удаляем выделенную область и снимаем выделение, нажав клавишу Ctrl+D

Далее я дублировала слой несколько раз и инструментом перемещение разместила их как указано на рисунке:

Для первой кнопки применим стили слоя:

Вот что получилось на этом этапе:

Осталось теперь добавить текст на изображение и вот мой окончательный макет:

Источник.