Уроки Веб и приложения Светлана Слуцкая 30 июня 2014

Элегантный макет для блога в Фотошоп

Сложность урока: Средний

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

Ресурсы урока:

  1. Кафе
  2. Шрифт PT Serif
  3. Шрифт Bentham

Архив

Создаем новый документ

Шаг 1

Создайте новый документ, используя настройки, которые показаны ниже (Файл - Новый) (File > New). Вы можете создать документ любого размера. Разрешение документа- 72 пиксела.

Шаг 2

Разметим документ при помощи направляющих. Добавьте новую направляющую: (Просмотр - Новая направляющая) (View > New Guide). Обычно выбираю 1000 пикселов и добавляю несколько направляющих по краям, чтобы до краев документа осталось небольшое пространство. При создании этого макета я установил направляющие по вертикали: 100px, 285px, 445px, 600px, 605px, 765px, 925px и 1100px.

Примечание: Вы можете использовать плагин GuideGuide, чтобы сделать процесс добавления направляющих быстрее.

Шаг 3

Сервис  Photoshop etiquette позволит легко организовать дизайн и легко его редактировать. Создайте четыре группы и назовите их  Header, Content, Sharing и Footer (Слой - Новый - Группа) (Layer > New > Group). Для быстрого создания группы нажмите вот на эту иконку:

Создаем область для шапки сайта

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

Шаг 1

Для начала, создадим фон для блога. Внутри группы "Header" нарисуйте прямоугольную фигуру любого цвета, используя инструмент Прямоугольник (Rectangle Tool) (U). Я нарисовал прямоугольник размером 1200x600 пикселов и поместил его в верхней части документа.
Перенесите изображение с кафе в документ и поместите его над слоем с прямоугольником. Я переименовал слой с изображением кафе в IMG. Теперь удерживая клавишу Alt, кликните под слоем с фото, чтобы создать обтравочную маску.

Таким образом, фото будет идеально помещено внутрь прямоугольника. Подгоните размер фото под размер прямоугольника (Ctrl + T).

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

Шаг 2

Нужно сделать фон блога темнее и нейтральнее. Размойте изображение кафе при помощи фильтра Размытие по Гауссу (Фильтр - Размытие - Размытие по Гауссу) (Filter > Blur > Gaussian Blur). Установите радиус размытия 3 пиксела.  Использование небольшого размытия позволит устранить резкие детали изображения - благодаря этому, посетители блога будут концентрировать внимание  на содержании блога.

Создайте новый слой (Shift + Ctrl + N) над слоем с фотографией и добавьте к нему обтравочную маску. Залейте новый слой черным цветом и уменьшите его непрозрачность до 50%. За счет этого, фотография станет немного темнее.

Шаг 3

Теперь добавим логотип. Создайте новую группу внутри группы " Header" и назовите ее "Logo". Для этого урока я использовал простой, типографический логотип. Выберите инструмент Текст (Horizontal Type Too) (T) и шрифтом Bentham, размером в 30 пикселов, напишите заголовок для блога. Расстояние между буквами установите немного больше, чем обычно, чтобы получить элегантный вид. Также, текст напишите заглавными буквами., т.к., их легче читать.

Примените к слою с прямоугольником  стиль слоя Обводка (stroke).

Уменьшите параметр Заливка (Fill) для слоя с прямоугольником до 0%. Таким образом, заливка прямоугольника не будет видна, а будет видна только белая обводка вокруг логотипа.

Шаг 4

Теперь напишем информацию о блоге. Инструментом Текст (Horizontal Type) (T) и шрифтом Bentham напишите небольшой текст. Для написания амперсанда я использовал шрифт  Baskerville (Italic), а ниже написал короткую фразу шрифтом  PT Serif (Italic) с размером 20 пикселов. Убедитесь в том, что тест расположен вертикально по центру изображения на шапке.

Создаем область под контент

Шаг 1

Начнем создавать область под текст блога. Выберите инструмент Текст (Horizontal Type Tool) (T) и напишите текст, используя темный цвет и заглавные буквы. Старайтесь не использовать черный цвет для текста, а выберите темно-серый цвет. Для этого урока я использовал темно-серый цвет (#444444) и шрифт Bentham размером 42 пиксела. Поместите этот текст по центру документа.

Шаг 2

Уменьшите размер шрифта до 14 пикселов и напишите дату сообщения блога, имя автора, название категории, теги и другую информацию о публикации.

Шаг 3

При помощи инструмента Текст (Horizontal Type Tool) (T) создайте текстовый фрейм (удерживая нажатой левую кнопку мыши, проведите слева направо, чтобы создать контейнер для текста). Текстовый фрейм должен располагаться между направляющими шириной в 640 пикселов. Высота этого текстового контейнера зависит от длины текста.

Выберите светло-серый фоновый цвет (#6f6f6f) и шрифт  PT Serif  размером 18 пикселов, а высоту линии установите в 34 пиксела. Высота линии обычно составляет около 1.5 - 1.9 в зависимости от стиля шрифта. Можно вычислить высоту строки по вот такой формуле. Я использую размер шрифта 18 пикселов: 18*1.8=34.2.

Шаг 4

При создании макетов для сайта или блога нужно думать о динамичной среде проектирования и включать в макет кнопки для гиперссылок. Выделите одну из фраз цветом #e3514e.

Создаем кнопки для соцсетей

Теперь создадим кнопки для обмена контентом между читателями блога.

Шаг 1

Создайте новую группу для кнопок и назовите ее "Sharing". Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте прямоугольник между направляющими, в моем случае это направляющие, которые установлены размером в 640х54 пиксела. Кликните правой кнопкой мыши по слою и выберите пункт Параметры наложения (Blending Options) и выберите стиль слоя Обводка (Stroke).

Уменьшите параметр Заливка (Fill) до 0%. Благодаря этому, заливка фигуры станет невидимой, а видимым будет только контур.

Выберите инструмент Линия (Line Tool) (U) и установите ширину линии 1 пиксел. нарисуйте три вертикальные линии, которые послужат контейнером для кнопок. Направляющие помогут правильно расположить кнопки на макете.

Примечание: удерживая клавишу Shift, Вы сможете нарисовать ровные вертикальные линии.

Шаг 3

Выберите инструмент Текст (Horizontal Type Tool) (T) и напишите слово  SHARE, после него, в остальных контейнерах напишите названия соцсетей. Названия соцсетей поместите в центре контейнеров.

Шаг 4

Социальные кнопки нарисованы, теперь нужно создать добавить цвет на одну из кнопок - этим цветом будут подсвечиваться все кнопки при наведении на них курсора мыши. Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте прямоугольную фигуру под кнопкой , используя цвет, которым выделяли строки с текстом для создания гиперссылок.

Создаем футер

Создайте группу с названием " Footer" и внутри нее нарисуйте прямоугольник в нижней части документа. Для прямоугольника используйте цвет #555555 и оставил пустое пространство над фигурой в 110 пикселов.

Шаг 2

Инструментом Текст (Horizontal Type Tool) (T) напишите копирайт. Для его создания я использовал шрифт  PT Serif размером 14 пикселов и с цветом #FFFFFF. Поместите текст с копирайтом по центру футера.

Финальное изображение:

Автор: Tomas Laurinavicius

Источник: design.tutsplus.com

Комментарии 39

Спасибо, получилось мило)

Спасибо за подробный урок)

спасибо за урок и перевод!

Спасибо за урок!

Спасибо за урок и перевод.

Урок гораздо проще, чем многие другие, отмеченные двумя звездочками (**). Не самый подробный - да, но за пол часика можно добавить макетик себе в портфолио.
Спасибо большое автору урока и переводчику!

результат нравится (...и плагин надо попробовать)

Спасибо большое)

Благодарю.

Спасибо за урок

Уже лучше получается!. спасибо за урок!

Спасибо за полезный урок)

Спасибо за урок. Действительно, получилось просто и элегантно.

Урок понравился

Отличный подробный урок! Спасибо за перевод!

Все просто и со вкусом. Отсебятины только кнопки навигации.

Еще 8
Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

Тэги позволяют лучше находить вашу работу другим пользователям. Подумайте какие тэги описывают вашу работу лучше всего и проставьте их. Это даст вам больше просмотров, лайков и комментариев. 

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее