Advertisement
  1. Web Design
  2. UI Design
Webdesign

Разработка элегантного дизайн-макета для блога в Photoshop

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Yura Kuzichev (you can also view the original English article)

Final product image
What You'll Be Creating

В этом руководстве я собираюсь показать вам, как в Photoshop создать простой и элегантный макет для вашего блога. Мы используем привлекательное изображение для верхней части сайта (как, собственно, где бы то ни было) с простым и понятным содержанием,используя для этого очень аккуратный и элегантный шрифт.

Материалы урока

Для того, чтобы продолжить вам понадобятся следующие (они в свободном доступе) материалы: 

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

Шаг 1

Прежде всего нам необходимо создать новый документ (File (Файл) > New (Создать)…) используя установки, показанные ниже. Ширину для вашего документа вы можете задать любую на своё усмотрение - в конце концов, сегодня ширина сайта не должна быть фиксированной.

Убедитесь, чтобы значение для Resolution (Разрешение) было установлено как 72 pixels/inch (пиксель/дюйм)

Шаг 2

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

Примечание: Направляющие, использованные в нашем макете: вертикальные в 100рх, 285рх, 445рх, 600рх, 605рх, 765рх, 925рх и 1100рх.

Совет: Также, вы можете использовать GuideGuide плагин для Photoshop, чтобы сделать этот процесс еще быстрее. 

Шаг 3

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

Разработка области Header (Хедер)

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

Шаг 1

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

Скачайте нужное изображение лондонского кафе, перенесите в фотошоп и разместите выше над слоем с прямоугольником. Переименуйте этот слой чтобы потом вы смогли вспомнить его название, я назову его просто IMG. После этого, удерживая клавишу Alt и наведя мышкой на слой с изображением вы увидите маленькую стрелку указывающей вниз.  В этот момент, нажав на нёё левой кнопкой мыши, вы создадите Clipping Mask (Обтравочную маску). 

Теперь зажмите клавиши CTRL+T (CMD+T для Mac) и измените размер изображения, в соответствии с размером вашего макета.

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

Шаг 2

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

Создадим новый слой над слоем с нашим изображением и сделаем её обтравочной маской как было показано в предыдущем шаге. После этого произведём заливку черным цветом и уменьшим прозрачность слоя до 50%, так наше изображение станет более тёмным, но останется попрежнему достаточно видимым.

Шаг 3

Настало время добавить логотип для нашего блога. Создайте новую в группу внутри группы Header и назовите её Logo. Для этого урока я буду использовать в качестве логотипа обычный текст. а панели инструментов выберите Horizontal Type Tool (Т) (Инструмент "Горизонтальный текст"), шрифт Bentham размером в 30px и напишите название вашего блога. Отмечу, что увеличенное межбуквенное расстояние, придает более элегантныйвид тексту и написание его в рерхнем регистре делает его более лёгким для прочтения. 

Чтобы добавить акцент нашему логотипу давайте создадим рамку вокруг него. На панели инструментов выберите Rectangle Tool (U) и нарисуйте прямоугольник немного больше границ текста логотипа. 

Теперь нажмите правую кнопку мыши на слоё с созданным прямоугольником и выберите следующие опции для Blending Options (Параметры наложения).

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

Шаг 4

Теперь настал момент, когда нам нужно добавить текст, который суммирует всё описание для нашего блога. Выберите в панели инструментов Horizontal Type (T), шрифт Bentham размером в 60рх и напишите короткое описание блога для ваших читателей. Убедитесь чтобы было большое межстрочное расстояние, так ваш текст будет выглядеть сбалансированным и удобным для прочтения.

Для символа амперсанта (&) я использовал шрифт Baskerville (Italic) так как он достаточно витиеватый. Для короткой подписи я использовал шрифт PT Serif (Italic) с размером в 20px. Убедитесь, что ваш текст по вертикали и горизонтали выровнен по центру фонового изображения, так он будет выглядеть сбалансированно и аккуратно. 

Дизайн контентной части

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

Шаг 4

Будучи дизайнером, вам всегда нужно думать о дизайне динамических элементов на странице, включая стили для ссылок или стилях кнопок при наведении на них курсора мыши.  Поверьте мне, разработчики будут благодарны вам за это. Выберите какой-нибудь утонченный цвет, который бы выделялся среди друго текста в вашей главной заметке, выделитеодну из фраз, которая будет являтся ссылкой куда-либо еще и измените её цвет на выбранный. Я буду использовать бледно-красный цвет #е3514е

Дизайн кнопок социальных сетей.

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

Шаг 1

На панели слоёв сверните группу Content и раскройте группу Sharing, где мы будем размещать слои для наших кнопок соц.сетей. На панели инструментов выберите Rectangle Tool (U) и изобразите прямоугольник между второй и предпоследней направляющей, также, как и в случаи с контентной частью. В моём случае это прямоугольник размером 640px * 54px. Затем кликните правой кнопкой мыши  и выберите Blending Options (Параметры наложения), применив следующие параметры:

использованный цвет: #838383

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

Шаг 2

На панели инструментов выберите Line Tool (Инструмент линия) (U) и установите ширину линии в 1px, после чего нарисуйте три вертикальные линии, разделители, которые будут разделять контейнер на четыре равные части. Использование направляющих поможет вам правильно разместить эти линии. Убедитесь чтобы разделители были одного цвета с границами контейнера.

Совет: удерживайте Shift чтобы начертить идеально ровную линию.

Совет: нажмите CTRL+H (CMD + для Mac) чтобы скрыть/показать направляющие.

Шаг 3

Остается последний шаг. На панели инструментов выберите Horizontal Type Tool (T) и напишите какое-либо слово, дающее людям понять, о назначении этой области. Я буду использовать простое и понятно слово SHARE:, после которого я размещу ссылки доступных социальных сетей.

Ссылки соц.сетей необходимо размести внутри контейнера по центру между разделителями.

Шаг 4

Отлично! Область для ссылок социальных сетей готова, всё что нам осталось это изобразить их поведение при наведении курсора мыши. Для этого просто используйте Rectangle Tool (U) и используя такой же цвет как и для ссылок в тексте, нарисуйте прямоугольник под одной из кнопок закрывая и свободное пространство до границ контейнера.

Дизайн для футера

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

Шаг 1

На панели слоёв сверните сверните группу Sharing и разверните группу Footer. Изобразите внизу простой прямоугольник на всю ширину нашего документа и оставьте достаточно пространства сверху. Я использовал прямоугольник серого цвета #555555 и оставил 110рх свободного белого пространства сверху.

Шаг 2

Выберите на панели инструментов Horizontal Type Tool (T) и напишите любой простой текст копирайта. Для этого я буду использовать шрифт PT Serif размером в 14рх белого цвета #FFFFFF. Разместите данный текст в прямоугольнике, выравнив его по центру по вертикали и горизонтали.

Вот мы и закончили работу над нашим макетом. Примите мои поздравления!

Заключение

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

Обратите внимание, также, на руководство : Create and Theme an Evernote Powered Blog With Postach.io, где мы рассматриваем разработку макета для блога, интегрируя его с одной из блог-платформой.

Если у вас есть какие-либо вопросы, пожалуйста, разместите их в разделе "Комментарии"

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.