
Создайте стильный сайт используя свет и тени. Сделайте его так, будто вырезали его ножницами из бумаги и рисовали цветными карандашами. Получится очень стильно и профессионально!
Сложность: высокая
Время: более 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 со следующими настройками:

Stadion-Kuban.ru
Виджет на Яндексе: yandex.ru/?add=111794
Мы ВКонтакте:
И в Твиттере: twitter.com/Stadion-Kuban