Мультипликационный макет сайта.

Перед тем как мы начнём, давайте взглянем на изображение, которое мы будем создавать. Макет сайта мы будем рисовать в гранж стиле. Сейчас это популярно в web-дизайне, поэтому урок будет полезен многим.

Шаг1. Создаём новый документ размером 1024х768 пикселей. Залейте фон цветом, который показан на изображении ниже. Возьмите инструмент Rectangle Tool (Прямоугольник) и нарисуйте прямоугольник. Он должен занимать верхнюю половину полотна.

Залейте прямоугольник цветом, как на рисунке. Растрируйте прямоугольник. Для этого идём Layer – Rasterize - Shape (Слой – Растрировать - Фигура).
Переименуйте слой с прямоугольником в «Top Layer». Используя Lasso Tool (Лассо), нарисуйте фигуры на нижней стороне прямоугольника. Это будут разрывы бумаги. Нажмите Delete.

Это быстрый способ нарисовать разрывы. Вы, если желаете, можете использовать маску слоя.

Шаг2. Создайте новый слой, ниже слоя «Top Layer». Выберите инструмент Brush Tool (Кисть). Выберите кисть Soft Mechanical, диаметром 100 пикселей и  #484536 цвета. Используйте эту кисть для того, чтобы создать тень на слое «Top-Shadow».

Далее мы применим некоторые стили слоя. Нужно применить белую внешнюю обводку для слоя «Top Layer» размером 1 пиксель. Далее применим наложение текстуры, с режимом смешивания мягкий свет и стандартной текстурой Rust Flakes.

Шаг3. Создайте новый слой, выше слоя «top layer». Создайте маску слоя. Для той же кисти установите цвет #d8ce9d. Кистью пройдитесь по краям «top layer» для создания потёртостей.

Шаг4. Создайте прямоугольник, далее Edit - Free Transform (Редактирование - Свободная трансформация). Поверните прямоугольник как показано на изображении. Далее Edit – Transform - Warp (Редактирование – Трансформация - Деформация). Загибаем правый нижний уголок, как на рисунке.

Шаг5. Используя инструмент Pen Tool (Перо), нарисуйте тень под прямоугольником. Примените к тени Размытие по Гауссу на 5 пикселей. Установите режим смешивания слоёв на Multiply (Умножение).

Шаг6. Далее необходимо зажать Ctrl и кликнуть на прямоугольнике для его выделения. Идём Select – Modify – Contract - 10px (Выбор – Модификация – Сжать - 10px).

Создаём новый слой выше этого и заливаем белым цветом выделение. Слоем выше располагаем понравившееся вам фото. Зажимаем Alt и кликаем на палитре слоёв между слоем с фотографией и слоем с белым прямоугольником для создания маски слоя.
Таким образом ваша фотография аккуратно впишется в прямоугольник.

Используйте Polygonal Lasso Tool (Полигональное лассо) для рисования клейкой ленты. Создайте новый слой и залейте его белым цветом. Установите прозрачность слоя 47%. Для этого слоя установите внутреннюю обводку размером 1 пиксель,  #e4dec3 цвета. Прозрачность обводки 66%. Дублируйте слой с лентой и переместите так, как показано на изображении.

Шаг7. Используйте Brush Tool (B) (Кисть) для создания тени на обоих кусочках ленты. Настройки на скриншоте ниже.

Шаг8. Напишите заголовок сайта. Я использовал Bernard MT Condensed #7a745e цвета, размером 72 пикселя. Напишите основные элементы навигации.

Растрируйте шрифт. Выберите Erase Tool(E) (Ластик), используя набор кистей TB_Grunge Brush случайным образом сотрите надписи, чтобы придать им потёртый вид.
Если не любите разрушающие методы, можете использовать маску слоя для создания того же эффекта.

Шаг9. Увеличьте полотно и с помощью инструмента Pen Tool(B) (Перо) нарисуйте стрелку. Затрите её так же как шаг назад.

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

Шаг11. Наш Хедер готов. У нас есть основное тело сайта. Теперь давайте нарисуем Футер.

Выберите инструмент Rectangle Tool (Прямоугольник) и нарисуйте прямоугольник высотой в 40 пикселей внизу макета. Залейте его #302e26 цветом. Затем растрируйте его. Идите Layer – Rasterize - Shape (Слой –Растрировать - Фигура).

Используя такую же технику как при работе со слоем «top layer» «порвите» верх прямоугольника. Установите стили слоя для этого прямоугольника как показано на скриншотах ниже.

Финальное изображение. Теперь почти всё готово. Осталось только добавить три белых прямоугольника. Установите для них эффект отбрасывания тени в стилях слоя. Добавьте три изображения на свой вкус. Подгоните их под размер прямоугольников используя маску слоя. Вот что у нас получилось.

Автор: Chan Kai Loon