Мой Blog или что интересно web разработчику

Создаем типографический дизайн для блога

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

Данная серия уроков будет рассматривать процесс создания темы для WordPress с момента разработки макета в Photoshop и до создания полноценно работающих файлов темы WordPress.

  1. Урок1: создание концепции и дизайна блога в Photoshop
  2. Урок2: верстка и создание страницы HTML5/CSS
  3. Урок3: создание темы под WordPress

Урок1: создание концепции и дизайна блога в Photoshop

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

Содержание:

Приступим к созданию дизайна:

Шаг 1: Подготовка

 

Если Вы новичок в Photoshop и создаете дизайн впервые, то было бы полезно узнать сначала об инструментах, которые применяются дизайнерами.

В данном уроке мы будем создавать дизайн на основа сетки из 12 колонок. О применении сетки в вебдизайне можно прочитать подробнее в интернете, одна из статей Здесь.

Автор урока предлагает использовать документ сетки из 12 колонок, сделанный с помощью генератора grid.mindplay.dk. Он так же создал шаблон для наложения сетки, базирующеюся на 24px.
Однако, кому не очень понятно как этим воспользоваться, можно взять уже готовый файл psd из ресурсов проекта (960_grid_12_col.psd).

Открываем наш файл в Photoshop и видим следующее:

Если у Вас рабочее пространство в программе выглядит иначе, те не отображается вверху линейка и нет направляющих (голубые полоски), то необходимо все это включить:

  • Линейку: View>Rulers или Ctrl+R
  • Направляющие: View>Extras или Ctrl+H
  • Так же зайдите в View>Show и поставьте галочку Smart Guides если она не стоит у вас.

Когда все включено и установлено, перед нами рабочий документ (наш будущий дизайн). Его размеры 1020px x 1020 px. Содержит 3 слоя Backgraund/ Слой с вертикальной и горизонтальной сеткой.

Шаг 2: Работаем с фоном

 

Создаем новый слой (Ctrl+Shift+N) и заливаем его цветом #E5E5E5 (нажимаем G для выбора инструмента заливки).
Добавляем к слою шум (Filter > Noise > Add Noise) с параметрами Amount: 2% Distribution:Gaussian и поставьте галочку Monochromatic.

Сохраните одну из бесшовных бумажных текстур в файл (взять можно с  LostandTaken или из ресурсов проекта seamlesspaper1.jpg ) и открываем этот файл в документе с нашим дизайном сайта. Передвинем ее в верхний левый угол документа.

Примечание: размер файла текстуры может быть намного больше размера нашего документа. Чтобы изменить размер и не потерять пропорции — Ctrl+T и тянем за нижний левый угол с зажатой клавишей Shift до нужного нам размера.

Обесцвечиваем слой с текстурой (Ctrl+Shift+U), меняем режим наложения слоя на Darken. Затем меняем уровни (Ctrl+L и выставляем параметры), чтобы осветлить картинку и она подходила для светло серого фона, что позволит проявить детали текустуры и шум на фоне.

С фоном завершили, двигаемся далее.

Шаг 3: Логотип

 

Этот дизайн будет состоять только лишь из элементов типографии, включая логотип. Мы будем использовать Google Web Fonts позже в этой серии уроков, так что пока мы можем использовать в макете выбранный шрифт, в данном случае это Droid Serif(если нет этот шрифта в системе, можно заменить его на DejaVu Serif).

Итак, нажимаем T и в меню шрифтов выбираем нужный нам. Нажимаем на верхней панели кнопку для вызова меню редактирования параметров шрифта. И вводим настройки как на картинке. Цвет выставляем #666666.

Шаг 4: Меню

 

Добавляем ссылки навигации в соответствии с колонками сетки и линиями. Пронумеруйте каждую ссылку для стилизации. Параметры шрифта: color: #666666, size:18pt
Затем меняем цвет цифр, чтобы они не так выделялись на #A2A2A2

Примечание: мы располагаем каждый элемент меню согласно линий сетки и на одном уровне горизонтальном (для этого можно воспользоваться инструментом MoveTool — выбрав его на панели или нажать V)

Шаг 5: Основное содержание

 

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

Создаем заголовок. Заголовок поста блога — это важный элемент, так что выбираем для него большой размер шрифта (30pt).

Добавляем текстовый блок, чтобы создать пример текста. Размер шрифта ставим 14pt. Это сделано для удобства просмотра текста основного сайта, с 24pt разряженностью строк, чтобы подходили под базовые линии.

Добавляем ссылки после поста блога.
Параметры шрифта: размер: 14pt color: #A2A2A2 Делаем шрифт наклонным (нажимаем наклонную букву T в меню параметров шрифта).
Любые ссылки в документе должны легко определяться, так что делаем их голубым цветом (#4B7EA9) и подчеркнутыми (нажимаем букву T подчеркнутую в меню параметров шрифта).

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

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

Шаг 6: Боковая панель или sidebar

 

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

Некоторые списки с ссылками можно дублировать ниже каждого списка. Пока соблюдаются линии сетки макета, может быть несколько столбцов.

Шаг 7: Строка поиска

 

Элемент поиска является одним из немногих элементов, которые при стилизации по типографии требуется, чтобы сделать его легко узнаваемым.

Для создания строки поиска добавляем новый слой (Ctrl+Shift+N). Делаем прямоугольное выделение с помощью Rectangular Marque Tool (выбираем на панели или нажимаем M). Заливаем выделение белым цветом с помощью Paint Bucket Tool (G).

Двойной щелчок на слое со строкой поиск для добавления ему Стиля (или выбираем Blending Options).

Галочку на Inner Shadow и меняем настройки: Opacity: 5%, Angel:90
Галочку на Color Overlay и меняем настройки: Color: #F0F0F0
Галочку на Stroke и меняем настройки: Size: 1px, Position: Inside, Color: #C7C7C7;

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

Для этого, находясь на слое со строкой поиска, выбираем инструмент Rectangular Marquee Tool (M) и выделяем кусок, который требуется вырезать. После чего, нажимаем Del.

Создаем иконку линзы для строки поиска:
Для этого создаем новый слой (Ctrl+Shift+N).
Справа в строке поиска добавьте с помощью выделения маленький круг с границей в 2px:
Тем же инструментом Elliptical Marquee Tool (Shift+M если до этого был Rectangle), рисуем в строке поиска маленький круг(зажимаем Shif). Затем щелкаем правой кнопкой мыши на выделении и выбираем Stroke. Выставляем параметры: Width:2px, Location: Inside, Color:#C7C7C7;

Завершаем создание линзы добавлением диагональной линии рукоятки в 5px.

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

Шаг 8: Подвал или footer

 

Завершаем страницу, добавляя черную границу на нижний край.
Для этого создаем на новом слое(Ctrl+Shift+N) прямоугольное выделение (M) в величину 2х линий сетки, а затем заливаем (G) выделение черным цветом. Меняем режим наложения слоя на Overlay.

Добавляем некоторые маленькие элементы в область подвала, чтобы в общем закончить дизайн страницы.

Вот и все!
Несмотря на то, что мы использовали только типографические элементы без каких-либо интерфейсов или картинок, страница все еще выгляди интересной и привлекательной благодаря базовой сетке, которая связывает все воедино.

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

Данный урок является переводом замечательного урока Create a Typography Based Blog Design in Photoshop автора Chris Spooner.
При переводе были внесены небольшие изменения и дополнения. Оригинал вы всегда можете найти здесь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

  • RSS
  • Gmail
  • LinkedIn
  • Skype
e-mail: mudruy@mail.ru
skype: mudruy
Copyright © 2012 / iMiracle
Powered by WordPress