Как сделать простую тему для блога
В данной статье будет показан процесс создания простой темы для блога.
Конечный результат:
1 Начнем с создания нового документа в фотошопе размером 1024 на 1200px.
![новый документ](/images/personal_blog/a.jpg)
2 Вам потребуется загрузить фоновое изображение или вы можете создать свое собственное, руководствуясь статьей, где описан процесс создания боке эффекта.
3 Возьмите инструмент Rounded Rectangle Tool
(Radius: 5px), нарисуйте фигуру размером 825х940 в центре документа и понизьте Opacity
(непрозрачность) до 60%.
![новый документ](/images/personal_blog/c.jpg)
Затем возьмите инструмент Horizontal Type Tool
и напишите заголовок к вашей теме (my personal blog). Я воспользовался шрифтом Daniel
, 36px.
![понижаем непрозрачность](/images/personal_blog/d.jpg)
C помощью инструмента Rounded Rectangle Tool
(Radius: 5px) нарисуйте фигуру размером 626х418px в центре большой фигуры и понизьте ее непрозрачность (opacity
) до 75%. Добавьте Layer Mask
(маска слоя), возьмите инструмент Gradient Tool
, выберите цвет black/white
и проведите градиент снизу вверх.
![блок для постов](/images/personal_blog/e.jpg)
4 Давайте начнем с даты поста. Возьмите Rounded rectangle Tool
(Radius: 5px), нарисуйте фигуру размером 76х29 и понизьте непрозрачность (opacity
) до 40%. Затем идите в Layer > Layer Style > Drop Shadow
и установите следующие настройки:
![дата для постов](/images/personal_blog/f.jpg)
Затем выберите Gradient Overlay
и воспользуйтесь следующими настройками (используемые цвета: #ffffff – #d4d4d4
):
![стиль для даты](/images/personal_blog/g.jpg)
Добавьте день и месяц, я воспользовался шрифтом Antipasto
, 18px.
![шрифт для даты](/images/personal_blog/h.jpg)
C помощью инструмента Rounded Rectangle Tool
(Radius: 5px) нарисуте фигуру размером 504х38 и переместите ее вниз на 160px относительно post data, затем, перейдите по Layer > Layer Style > Drop Shadow
и установите следующие параметры:
![падающая тень для блока с информацией](/images/personal_blog/i.jpg)
Возьмите инструмент Horizontal Type Tool
и добавьте некоторый текст (например, Comments, Categories, Author). Цвет ссылки необходимо выделить, например через #ffa200
.
![шрифт блока с информацией](/images/personal_blog/j.jpg)
С помощью Horizontal Type Tool
добавьте заголовок и текст поста. Я применил шрифт verdana, 14px.
![шрифт поста и заголовка](/images/personal_blog/k.jpg)
Наконец добавьте ссылки ‘далее’ и ‘назад’ у основания блога. Шрифт Verdana, 18px, bold
![шрифт ссылок для перехода по странице](/images/personal_blog/l.jpg)
В итоге получилась простая тема для блога:
Скачать PSD-исходники:
Комментарии к статье