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

Сложность: высокая
Время: более 1 часа

Навыки для «прокачки»
- создание разметки сайта
- работа со свойствами слоев и режимами смешивания
- использование линеек и направляющих
- создание объема и теней элементов

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

Скачайте Шрифты : Chunkи Gabrielle
Скачайте бесплатно кисти клякс

Также скачайте рисованные иконки

Для начала надо сделать набросок сайта. Примерно так это выглядит на бумаге:



Наш макет, фон, размером 500 500 пикс.
Итак, давайте начнем с создания нового документа 500 500 пикселей в Photoshop. Убедитесь в том, что у вас установлено разрешение 72 пикс/дюйм, так как это идеальное разрешение для изображений, предназначенных для сеток.



Залейте фон цветом # d9cfc0



Вставьте текстуру бумаги. Вы можете найти ее интернете. Теперь мы обесцветим ее с помощью  Shift + Ctrl + U, изменим режим смешивания на Умножение=Multiply и Непрозрачность= Opacity до 20%.
У вас должно получиться что-то вроде этого



Это изображение будет фоном нашего документа. Перейдите в Редактировать-Определить узор=Edit-Define Pattern и придумайте название.



Теперь мы можем заполнить фон макета, созданного ранее. Выберите фоновый слой и зайдите в Редактирование-Выполнить заливку=Edit-Fill.



Создайте новый слой и, используя большую, мягкую Кисть=Brush, создадим нежный эффект света в верхней части макета. Уменьшим Непрозрачность= Opacity этого слоя до 30%.



Также создадим еще один слой и закрасим его с помощью приложенных к уроку кистей. Это позволит добавить больше деталей к верхней части.  Как только фон готов, сгруппируйте все слои (выберите все слои и нажмите Ctrl + G) назовите эту группу Фон.

 

Создайте новый документ 20 60 пикселей и залейте его белым цветом. Теперь нажмите и перетащите линейку, чтобы создать горизонтальную направляющую и поместите ее на высоте 50 пикселей.



 

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



Нажмите Alt и на кнопку Маски слоя =Add a mask в нижней части палитры слоев. Это создаст маску, которая будет скрывать выделенную область.



Создайте круг с диаметром 20 пикселей. Чтобы создать форму с фиксированными размерами выберите инструмент Эллипс=Ellipse Tool, с настройками как на картинке ниже.



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



В основном документе, создайте новый слой, и сделайте выделение на 60 пикселей высотой в верхней части.



Заполните это выделение и уменьшите Непрозрачность= Opacity слоя на 50%



Создайте прямоугольник 5 пикс. высоты, цвет # 506271 и поместите его в верхней части макета.



После завершения фона заголовка, мы можем добавить меню в правом верхнем углу. В уроке используется шрифт Arial и размер шрифта 13pt. Цвет текста используется синий для верхней панели.



Для логотипа, создадим Эллипс= Ellipse Tool со следующими настройками:

designlessons.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте:

И в Твиттере: twitter.com/DesignLessons