Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Элегантный дизайн макета страницы в блоге

Элегантный дизайн макета страницы в блоге

Автор: sondar | Категория: Уроки Photoshop » Web | 20-05-2014, 08:40
Сложность: средняя
Продолжительность: средняя

Элегантный дизайн макета страницы в блоге

то, что мы будем создавать

Данный урок по фотошопу посвящен созданию лаконичного, элегантного макета страницы блога. Для этого будет использовано одно основное, броское изображение и несколько ссылок для перехода. И все это в сочетании с четким, таким же лаконичным текстом.

Предустановки урока
Для успешного выполнения урока вам потребуются следующие (имеющиеся в бесплатном доступе) ресурсы:

- фото кафе
- шрифт PT Serif
- шрифт Bentham font

Подготовка документа

Шаг 1
Начнем с создания нового документа: Файл > Создать (File > New…) с параметрами, приведенными на скриншоте ниже. Размер холста можете задать на свое собственное усмотрение.

Элегантный дизайн макета страницы в блоге

задайте разрешение 73 пикселя на дюйм (pixels/inch)

Шаг 2
Итак, расположим на холсте несколько направляющих, которые помогут нам распределить рабочее пространство, и придать странице сбалансированный вид. Я не всегда использую сетку, но, аккуратного, выверенного результата трудно добиться без направляющих. Кроме того, они помогают задать ширину будущей веб-страницы. Пройдите в меню Просмотр > Новая направляющая (Go to View > New Guide…) и расположите на холсте набор направляющих, как показано ниже. Обычно я беру за ширину веб-страницы 1000 пикселей, и оставляю немного свободного пространства по сторонам, для более приятного ее восприятия.

Вертикальные направляющие, использованные на данном уроке, расположены на отметках 100px, 285px, 445px, 600px, 605px, 765px, 925px и 1100px.

Чтобы оптимизировать процесс создания направляющих линий, можно воспользоваться плагином фотошопа GuideGuide.

Элегантный дизайн макета страницы в блоге


Шаг 3
Правильная организация слоев и папок документа облегчит его последующее редактирование и навигацию по нему. Итак, создадим три группы с названиями “Шапка”, “Контент” и “Поделиться” и “Низ”. Для создания группы нужно пройти в меню Слои > Новый > Группа (Layer > New > Group…) и присвоить каждой их них соответствующее имя. Для быстрого создания группы можно воспользоваться специальной иконкой в нижней части палитры слоев.

Элегантный дизайн макета страницы в блоге


Дизайн области “шапки”

Область заголовка, или “шапки” играет очень важную роль в привлечении читателей, и от нее сильно зависит то, останутся ли посетители на странице. Для данной страницы блога я решил использовать располагающего вида снимок с лондонским уличным кафе. Выбирая изображения для своих проектов, следите за тем, чтобы они доносили до посетителей нужную информацию и полностью соответствовали требованиям потенциальных клиентов.

Шаг 1
Давайте создадим фон для нашего блога. Создайте внутри группы с шапкой новый слой, выберите инструмент Прямоугольник (Rectangle Tool), и начертите на нем прямоугольник произвольного цвета. В моем случае этот прямоугольник имеет размеры 1200x600 пикселей. Расположите эту фигуру в верхней части документа.

Теперь скачайте фото с кафе, перетащите его в фотошоп и расположите над прямоугольником. Присвойте слою с фотографией какое-нибудь осмысленное название. Я назвал его просто “IMG”. Затем, зажмите ЛКМ, и, удерживая Alt, поводите по поверхности фото указателем мыши, до тех пор, пока он не превратится в направленную вниз стрелку. Отпустите ЛКМ. Вы только что создали обтравочную маску (Clipping Mask).
Теперь активируйте Свободную трансформацию (Ctrl+T) и подкорректируйте размер фото в соответствии с вашими требованиями.
Чтобы сохранить пропорции при изменении размера фото, удерживайте Shift.

Элегантный дизайн макета страницы в блоге


Шаг 2
Теперь нам нужно сделать фон нашего блога более темным и более нейтральным, так, чтобы копируемый на него текст оставался читабельным. Но сначала немного размоем наше изображение. Пройдите в меню: Фильтр > Размытие > Размытие по Гауссу (Filter > Blur > Gaussian Blur). Задайте Радиус: 3 пикселя. Применение легкого размытия позволяет ослабить интенсивность слишком резких деталей, и позволяет взгляду посетителя сфокусироваться на более важных элементах. Например, на сообщениях в блоге.
Создайте новый слой над слоем с изображением и создайте для него обтравочную маску, способом, описанным в предыдущем шаге. Затем залейте этот слой черным цветом и уменьшите его Непрозрачность (Opacity) до 50%. Наше изображение станет более темным, но все же различимым.

Элегантный дизайн макета страницы в блоге


Шаг 3
Теперь можно добавить на нашу страницу какой-нибудь логотип. Создайте внутри группы с шапкой новый слой и назовите его “Логотип”. Для этого урока я использовал простой логотип из отдельного слова. Выберите инструмент Горизонтальный текст (Horizontal Type Tool (T)), задайте шрифт Bentham, размер 30pt и наберите название вашего блога. Обратите внимание на увеличенный межсимвольный интервал, который придает логотипу более элегантный вид, а так же улучшает восприятие логотипа.
Чтобы сделать логотип более выделяющимся, предлагаю заключить его в рамку. Выберите инструмент Прямоугольник (Rectangle Tool) и начертите прямоугольник чуть большего размера, чем ширина и высота слова.

Элегантный дизайн макета страницы в блоге


Теперь кликните по этому слою на палитре слоев ПКМ и выберите в открывшемся контекстном меню пункт: Параметры наложения (Blending Options). Примените стиль слоя Обводка (Stroke), с настройками, показанными ниже:

Элегантный дизайн макета страницы в блоге


Наконец, уменьшите Заливку (Fill) данного слоя до 0%, и вы получите красивую 1-пиксельную рамку для вашего логотипа.

Элегантный дизайн макета страницы в блоге


Шаг 4
Настал момент, когда можно сам текст, отражающий тематику блога. Выберите инструмент Горизонтальный текст (Horizontal Type Tool (T)), задайте Шрифт Bentham, размер 60pt, и наберите небольшое сообщение для своих читателей. Следите за тем, чтобы сообщение не загромождало все предоставленное пространство, и выглядело хорошо сбалансированным.
Для амперсанта я использовал шрифт Baskerville (Italic), так как он выглядит более орнаментально. Для второстепенного сообщения использован шрифт PT Serif (Italic) размером 20pt. Выровняйте сообщения по вертикальной оси симметрии заголовка.

Элегантный дизайн макета страницы в блоге


Дизайн области контента

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

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

Элегантный дизайн макета страницы в блоге


Шаг 2
Уменьшите размер шрифта примерно до 14pt и введите дату публикации, автора, категорию, местоположение, и прочую информацию, которую хотите предоставить вашим читателям. В данном случае я разместил дату и местоположение, набрав их, так же как и заголовок, заглавными буквами.

Элегантный дизайн макета страницы в блоге


Шаг 3
Блог без реального контента – ничто, и неважно, насколько хорошо он оформлен. Выберите инструмент Горизонтальный текст (Horizontal Type Tool (T)), и расширьте при помощи указателя мыши контейнер текста, расположив его между второй и предпоследней направляющими линиями. Ширина контейнера между этими двумя направляющими линиями должна составлять 640 пикселей. Высота будет зависеть от объема сообщения.
Выберите в качестве фонового цвета какой-нибудь светлый, приятный для глаз цвет. Я выбрал еще более светлый серый: #6f6f6f, задал шрифт PT Serif размером 18pt. Межстрочный интервал: 34pt. Межстрочный интервал, в большинстве случаев, должен составлять 1,5-1,9 размера шрифта (в зависимости от формы шрифта). Например, нашем случае межстрочный интервал вычисляется следующим образом: размер шрифта 18pt умножается на 1,8. В результате получается 34,2.

Элегантный дизайн макета страницы в блоге


Шаг 4
Вам, как дизайнеру, всегда следует проработать и то, как будут выглядеть всякие гиперссылки и другие активные элементы, типа кнопок, при наведении на них курсора мыши. Поверьте мне, разработчики будут вам благодарны за это. Выберите какой-нибудь ненавязчивый цвет, отличающийся от цвета основного текста, и выделите им какую-нибудь ключевую фразу – гиперссылку. В моем случае я использовал оттенок красного: #e3514e

Элегантный дизайн макета страницы в блоге


Дизайн кнопок в разделе “Поделиться”

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

Шаг 1
Сверните группу с контентом и откройте группу с разделом “Поделиться”, куда мы и поместим наши кнопки. Выберите инструмент Прямоугольник (Rectangle Tool) и начертите прямоугольник, расположив его между второй и предпоследней направляющими линиями, точно так же как текст публикации. В моем случае размер прямоугольника: 640x54 пикселя. Далее, кликните по этому слою на палитре слоев ПКМ и выберите в открывшемся контекстном меню пункт Параметры наложения. Примените показанный ниже стиль и настройки.

Элегантный дизайн макета страницы в блоге

использован #838383

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

Элегантный дизайн макета страницы в блоге


Шаг 2
Выберите инструмент Линия (Line Tool (U)) и задайте ширину 1 пиксель. Начертите три вертикальные линии, разделив, таким образом, созданный контейнер на четыре равные части. Расположить эти линии помогут направляющие. Учтите, что линии должны быть того же цвета, что и сам контейнер.
Чтобы прочертить строго вертикальную линию, удерживайте Shift.
Чтобы включать/выключать отображение направляющих используйте сочетание клавиш Ctrl + ;.

Элегантный дизайн макета страницы в блоге


Шаг 3
Наконец, выберите инструмент Горизонтальный текст (Horizontal Type Tool (T)) и наберите надписи, по которым читатели смогут догадаться, что с помощью этих кнопок данным контентом можно поделиться со своими друзьями в других социальных семьях. Я, например, написал слово SHRE, а вслед за ним названия нескольких социальных сетей.
Выровняйте надписи с названиями соцсетей по центрам отдельных прямоугольников.

Элегантный дизайн макета страницы в блоге


Шаг 4
Отлично! Раздел, с помощью которого можно показать публикацию друзьями в других соцсетях, готов. Все, что нам осталось – это задать поведение кнопок при наведении на них мыши. Выберите для этого инструмент Прямоугольник (Rectangle Tool), и начертите прямоугольник того же цвета, что и гиперссылки. Расположите этот прямоугольник под слоем с названием одной из социальных сетей. Он должен полностью покрывать поверхность кнопки.

Элегантный дизайн макета страницы в блоге


Дизайн нижней части страницы

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

Шаг 1
Сверните группу с ссылками на другие социальные сети, и разверните группу с Нижней частью страницы. Теперь начертите еще один прямоугольник, пересекающий нижнюю часть документа, оставляя сверху немного свободного пространства. Я использовал цвет #555555 и отступил от нижнего края с ссылками на другие соцсети примерно 110 пикселей.

Элегантный дизайн макета страницы в блоге


Шаг 2
Наконец, выберите инструмент Горизонтальный текст (Horizontal Type Tool (T)) и наберите простенький текст с информацией об авторских правах. Я использовал шрифт PT Serif размером 14pt белый цвет. Выровняйте данный текст по центру серого прямоугольника.

Элегантный дизайн макета страницы в блоге

И вот, макет нашей страницы готов!

Заключение

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


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

Другие новости по теме:


Просмотров: 23456 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.