Рисуем шаблон для блога на WordPress

Конечный результат:

Рисуем шаблон для блога на WordPress

Используемые материалы:

  1. Узоры
  2. Лупа
  3. Значок RSS
  4. Отверстие в бумаге

Создайте новый документ размером 1280х1150, с разрешение 72 пикс/дюйм. На новом слое создайте выделение размером 128х128 пикселей. Заполните его узором Gold Vellum из стандартного набора Фотошоп Color Paper (Цветная бумага). К получившейся фигуре примените команду Free Transform (Свободное трансформирование) Ctrl + T, измените размер до 116х116 и создайте новый шаблон Edit > Define Pattern (Редактирование - Определить узор).

Рисуем шаблон для блога на WordPress

Заполните фоновый слой созданным нами шаблоном и примените цветовые корректировки. Для этого перейдите в меню Image > Adjustments > Selective Color (Изображение - Коррекция - Выборочная коррекция цвета) и установите следующие значения:

Для Red (Красный):

  1. Cyan (Голубой): 10%
  2. Magenta (Пурпурный): -9%
  3. Yellow (Желтый): 52%
  4. Black (Черный): 50%

Для Neutrals (Нейтральный):

  1. Cyan (Гоубой): 3%
  2. Magenta (Пурпурный): 8%
  3. Yellow (Желтый): 10%
  4. Black (Черный): 11%

Рисуем шаблон для блога на WordPress

Создайте новый слой и заполните его любым цветом, установите значение Fill (Заливка) 0%. К нему примените стиль Pattern Overlay (Наложение узора), настройки смотрите ниже.

Рисуем шаблон для блога на WordPress

Pattern Overlay (Наложение узора):

Рисуем шаблон для блога на WordPress

Снова создайте новый слой и заполните его светло-желтым цветом #fff6b6.

Рисуем шаблон для блога на WordPress

Поменяйте режим наложения на Dissolve (Затухание) и понизьте значение Opacity (Непрозрачность) до 16%.

Рисуем шаблон для блога на WordPress

Слейте созданные слои в один новый, нажав комбинацию клавиш Ctrl+Alt+Shift+E, и измените значение Opacity (Непрозрачность) до 76%.

Рисуем шаблон для блога на WordPress

К получившемуся слою примените стили:

Drop Shadow (Тень):

Рисуем шаблон для блога на WordPress

Bevel and Emboss (Тиснение):

Рисуем шаблон для блога на WordPress

Продублируйте и объедините все три фоновых слоя - слой Color Paper (Цветная бумага), слой с винтажным орнаментом и слой с желтой заливкой. Теперь у нас есть фон для дальнейшей работы.

На панели инструментов выберите Rounded Rectangle Tool (Прямоугольник со скругленными углами), установите значение радиуса 6 пикселей и на новом слое создайте прямоугольник размером 850х850 пикселей.

Рисуем шаблон для блога на WordPress

Для этого слоя примените следующие стили:

Рисуем шаблон для блога на WordPress

Создайте две формы: прямоугольник и эллипс, объедините их в один слой. Размер объединенной формы должен быть 892х189 пикселей.

При помощи инструмента Eraser Tool (Ластик) создайте рваные края, предварительно установив маленькую круглую кисть. К этому слою примените стиль Color Overlay (Наложение цвета), для получившейся формы установите цвет #f5eed8.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Загрузите выделение для этой формы и выше создайте новый слой. Обработайте края формы маленькой круглой кистью белого цвета, для создания эффекта рваной бумаги.

Рисуем шаблон для блога на WordPress

Теперь загрузите выделение для внутренней области и на новом слое обрисуйте ее любым цветом. Установите значение Fill (Заливка) для этого слоя 0% и примените стиль Inner Shadow (Внутренняя тень).

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

На панели инструментов выберите Brush Tool (Кисть) и добавьте светлое пятно, настройки для кисти смотрите ниже.

Рисуем шаблон для блога на WordPress

Возьмите инструмент Pen Tool (Перо) и создайте форму свитка, чтобы верхний и нижний края получились как бы рваными, подкорректируйте края инструментом Eraser Tool (Ластик). Размер формы 78х177 пикселей.

Рисуем шаблон для блога на WordPress

К слою со свитком примените стиль Gradient Overlay (Наложение градиента).

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

В редакторе градиентов установите такие цвета:

Рисуем шаблон для блога на WordPress

Вернитесь к фоновым слоям оригиналам. Выберите слой Color Paper и слой с желтой заливкой. Слейте эти два слоя в один (слой с орнаментом не используйте). Загрузите выделение для формы с градиентом. Скопируйте и вставьте выделенную область на новый слой и наложите на форму с градиентом.

Уберите видимость слоя с желтой заливкой, нажав на значок глаза слева от названия слоя.

Рисуем шаблон для блога на WordPress

Поменяйте режим наложения для слоя с формой на Multiply (Умножение) и понизьте значение Opacity (Непрозрачность) до 25%.

Рисуем шаблон для блога на WordPress

Снова загрузите выделение формы, создайте новый слой, перейдите в меню Edit > Stroke (Редактирование - Выполнить обводку) и установите такие параметры: размер 1 пиксель, цвет белый, расположение - Outside (Снаружи).

Рисуем шаблон для блога на WordPress

Сотрите левый и правый края формы при помощи мягкой кисти.

Рисуем шаблон для блога на WordPress

Для слоя с обводкой задайте режим наложения Soft Light (Мягкий свет).

Рисуем шаблон для блога на WordPress

Повторите предыдущие действия и создайте вторую часть свитка поменьше. Поместите это слой чуть ниже слоя с первой формой.

Рисуем шаблон для блога на WordPress

Для этого слоя примените стиль Gradient Overlay (Наложение градиента).

Рисуем шаблон для блога на WordPress

Откройте редактор градиентов и установите такие цвета:

Рисуем шаблон для блога на WordPress

К созданной форме свитка добавьте тень, предварительно загрузив выделение второй части свитка. На новом слое заполните выделенную область коричневым цветом. Поменяйте режим наложения на Multiply (Умножение) и понизьте значение Opacity (Непрозрачность) до 40%. Сотрите выделенную область, используя ластик с мягкими краями.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Создайте форму, как показано ниже.

Рисуем шаблон для блога на WordPress

Примените к ней стиль Gradient Overlay (Наложение градиента).

Рисуем шаблон для блога на WordPress

Откройте редактор градиентов и установите следующие цвета:

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

Так же к нему примените стиль Gradient Overlay (Наложение градиента):

Рисуем шаблон для блога на WordPress

В редакторе градиентов установите такие цвета:

Рисуем шаблон для блога на WordPress

Таким же способом добавьте тень.

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

Для этого слоя задайте режим наложения Multiply (Умножение) и уменьшите значение Opacity (Непрозрачность) до 30%.

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

Примените к ней стиль Gradient Overlay (Наложение градиента):

Рисуем шаблон для блога на WordPress

В редакторе градиентов установите такие цвета:

Рисуем шаблон для блога на WordPress

В итоге у вас должен получиться эффект рваной бумаги.

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

Примените фильтр Filter > Blur > Gaussian Blur (Фильтр - Размытие - Размытие по Гауссу), установите значение радиуса 1%. Затем примените стиль Color Overlay (Наложение цвета) и переместите созданную форму немного вниз и влево.

Рисуем шаблон для блога на WordPress

Продублируйте размытую форму и снова примените фильтр Gaussian Blur (Размытие по Гауссу) со значением радиуса 2.5%. Переместите его на 3 - 4 пикселя вниз и влево.

Рисуем шаблон для блога на WordPress

Примените к этой форме стиль Color Overlay (Наложение цвета).

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

К этому слою примените такие стили:

Рисуем шаблон для блога на WordPress

Создайте круглую форму размером 34х34 пикселя. Создайте выделение размером 31х31 пиксель и вырежьте выделенную область.

Рисуем шаблон для блога на WordPress

К этой форме примените такие стили:

Bevel and Emboss (Тиснение):

Рисуем шаблон для блога на WordPress

Gradient Overlay (Наложение градиента):

Рисуем шаблон для блога на WordPress

Откройте редактор градиентов и установите такие цвета:

Рисуем шаблон для блога на WordPress

Чтобы создать увеличительное стекло, откройте изображение лупы, выделите стекло и поместите в наш документ на новый слой. Наложите его на круглую форму и примените коррекцию Image > Adjustments > Photo Filter (Изображение - Коррекция - Фотофильтр), установив следующие значения: фильтр - Warming Filter (85) (Теплый фильтр (85)), Density (Плотность) - 60%. Поменяйте режим наложения для этого слоя на Multiply (Умножение) и понизьте значение Opacity (Непрозрачность) до 35%.

Рисуем шаблон для блога на WordPress

Продублируйте слой со стеклом и примените коррекцию Image > Adjustments > Black & White (Фильтр - Коррекция - Черно-белое). Теперь откройте окно уровней, зайдя в меню Image > Adjustments > Levels (Изображение - Коррекция - Уровни). Передвиньте левый черный и белый правый ползунки к центру.

Рисуем шаблон для блога на WordPress

Для слоя копии со стеклом установите режим смешивания Screen (Экран).

Рисуем шаблон для блога на WordPress

Создайте следующую форму для ручки, установите значение Fill (Заливка) для этого слоя 0%.

Рисуем шаблон для блога на WordPress

Для слоя с ручкой примените такие стили:

Bevel and Emboss (Тиснение):

Рисуем шаблон для блога на WordPress

Gradient Overlay (Наложение градиента):

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

И еще один прямоугольник в один пиксель белого цвета.

Рисуем шаблон для блога на WordPress

Создайте выделение для всех форм, относящихся к лупе, кроме стекла. На новом слое заполните выделения темно-коричневым цветом. Примените фильтр Filter > Blur > Gaussian blur (Фильтр - Размытие - Размытие по Гауссу), установите значение 1 пиксель.

Рисуем шаблон для блога на WordPress

Переместите полученную тень на 1 пиксель влево и вниз.

Рисуем шаблон для блога на WordPress

Теперь пришло время добавить текст для меню с белой тенью. Некоторые браузеры поддерживают тени для текста при помощи CSS стилей. Настройки для текста смотрите ниже.

Рисуем шаблон для блога на WordPress

К этому слою примените такие стили:

Drop Shadow (Тень):

Рисуем шаблон для блога на WordPress

Так же добавьте значки Twitter, Facebook, Email и другие. И примените к ним такие стили слоя.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Теперь мы добавим значок RSS общим размером 135х82 пикселя.

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

К этой форме примените стили Inner Shadow (Внутренняя тень) и Color Overlay (Наложение цвета) - используйте такие же настройки, как для большой формы меню.

Рисуем шаблон для блога на WordPress

Загрузите выделение для этой формы. Перейдите в меню Select > Inverse (Выделение - Инверсия). На новом слое обработайте эту форму по краям небольшой круглой кистью белого цвета, чтобы создать эффект рваной бумаги.

Рисуем шаблон для блога на WordPress

Создайте форму свитка, как на изображении ниже.

Рисуем шаблон для блога на WordPress

К этой форме примените стиль Gradient Overlay (Наложение градиента):

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

В редакторе градиентов установите такие цвета:

Рисуем шаблон для блога на WordPress

Загрузите выделение для формы свитка. Скопируйте и вставьте выделенную область на новый слой, расположите его ниже слоя со свитком. Установите режим наложения Multiply (Умножение) и понизьте значение Opacity (Непрозрачность) до 27%.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Добавьте значок RSS. Примените к нему некоторые стили слоя.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Добавьте текст для названия и описания блога.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

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

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Создайте разделительную линию в 1 пиксель для украшения. Цвет установите #d0c397.

Рисуем шаблон для блога на WordPress

Ниже первой линии создайте вторую размером 1 пиксель, цвет #fffbec.

Рисуем шаблон для блога на WordPress

Введите текст для названия статьи и дополнительной информации.

Рисуем шаблон для блога на WordPress

Введите текст и вставьте изображение для контента.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Добавьте боковую панель для меню. Настройки для текста смотрите ниже.

Рисуем шаблон для блога на WordPress

Рисуем шаблон для блога на WordPress

Для украшения создайте такие же разделительные линии.

Рисуем шаблон для блога на WordPress

В нижней части сайта (футере) добавьте дополнительную информацию и копирайт.

Рисуем шаблон для блога на WordPress

Конечный результат:

Рисуем шаблон для блога на WordPress

Ссылка на источник урока.