Создайте чистый и элегантный макет блога в Photoshop CS6

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

Чтобы следовать этому руководству, вам понадобятся следующие ресурсы:

Подготовка холста

Шаг 1
В этом дизайне мы будем использовать 960 гс как его рамки. Скачайте шаблон с его главной страницы и внутри zip-файла найдите файл photoshop. Откройте файл «12 Column Grid» в Photoshop.

Нажмите на значок глаза для слоя 12 Col Grid, чтобы скрыть его; нам это сейчас не понадобится.

Шаг 2
Текущий размер холста слишком мал. Нажмите Изображение> Размер холста (или Ctrl + Alt + C). Добавьте больший размер и убедитесь, что его точка привязки установлена ​​по центру.

Шаг 3
Нажмите Ctrl + R, чтобы открыть линейку. Нажмите View> New Guide, чтобы создать новое руководство, которое поможет нам точно проектировать. Выберите «Вертикально» и «Положение: 185 пикселей», чтобы вертикальная направляющая находилась на расстоянии 185 пикселей от верхнего левого угла холста.

Шаг 4
Нарисуйте еще одну вертикальную направляющую в позиции 150 px, 1095 px и 1130 px.

Ниже наш последний путеводитель по холсту.

Подготовка цветовой темы

Шаг 5
Для этого дизайна мы будем использовать красивую цветовую комбинацию из Colorlouver, Нажмите на ссылку Preview, чтобы открыть цветовую комбинацию в формате JPEG.

Сохраните цветовую комбинацию и поместите ее в файл Photoshop. Поместив изображение непосредственно внутри холста, мы можем быстрее и проще сэмплировать его цвет.

Подготовка фона

Шаг 6
Выберите фоновый слой и щелкните значок замка в верхней части панели «Слои», чтобы разблокировать его. Дважды щелкните миниатюру, чтобы изменить ее цвет.

Нажмите на второй цвет, # 948371, чтобы выбрать его.

Шаг 7
Нарисуйте прямоугольную форму поверх холста. Это будет второй фон.

Шаг 8
Держите выбранную форму. На панели параметров откройте поле «Цвет заливки» и щелкните значок цветового круга. Когда диалоговое окно Color Picker открыто, щелкните первый цвет, чтобы выбрать его. Для его цвета обводки выберите Нет.

Шаг 9
Создайте новый слой и затем выберите верхний холст, используя инструмент прямоугольного выделения. Активируйте инструмент градиента и заполните его радиальным градиентом от белого до черного. Убедитесь, что градиент отцентрирован поверх холста.

Измените режим смешивания на Screen и уменьшите непрозрачность до 37%.

Шаг 10
Создайте новый слой и назовите его «shadow».

Нарисуйте прямоугольное выделение в нижней части вторичного фона, как показано на рисунке. Нажмите Edit: Fill. Установите для использования черный. Нажмите OK, чтобы заполнить выделение черным.

Шаг 11
Смягчите его, используя Gaussian Blur. Нажмите Фильтр> Размытие> Размытие по Гауссу.

Шаг 12
Удерживайте Alt и затем поместите курсор между тень и верхний фон слой. Не отпуская клавишу Alt, щелкните, чтобы преобразовать слой в обтравочную маску. Преобразовав его в обтравочную маску, тень теперь переходит внутрь верхнего фона.

Шаг 13
Уменьшите непрозрачность тени до 50%, чтобы сделать ее более тонкой. Ниже вы можете увидеть результат в 100% увеличении.

Шаг 14
Это всегда хорошая идея, чтобы поместить эти слои в одну группу. Для этого выделите все слои и нажмите Ctrl + G.

заголовок

Шаг 15
Нарисуйте прямоугольник на верхнем холсте, как показано на рисунке.

Шаг 16
На панели параметров установите цвет обводки на # af9f8e.

Шаг 17
В качестве цвета заливки выберите линейный градиент от # d0c4b9 до # a89c91.

Ниже приведен результат в 100% просмотра.

Название сайта

Шаг 18
Добавьте название сайта в левой части дизайна. Соблюдайте расположение, как показано ниже. Дважды щелкните текст и добавьте Drop Shadow. Для его шрифта используйте Sansation,

Меню

Шаг 19
Нарисуйте меню на другой стороне строки меню. Используйте шрифт Sansation 14 pt. Опять же, обратите внимание на места размещения.

Шаг 20
Для активного меню установите его тип шрифта жирным шрифтом.

Шаг 21
Активируйте инструмент «Многоугольник» и установите для «Стороны» значение 3. Нарисуйте треугольную форму с помощью заливки: # 3d3123 и обводки: нет. Добавить стиль слоя> Тень.

Шаг 22
Давайте выделим активное меню, добавив строку под ним. Активируйте инструмент «Линия» и установите его вес 5 пикселей. Выберите # f76b6a для его заполнения, без обводки.

Поместите строку прямо под активным меню и добавьте 1 пиксель в нижней части строки меню.

Использование стилей персонажа

Шаг 23
Давайте сохраним настройки символов как стиль символов. Эта функция представляет собой упрощенную версию стилей символов в InDesign. Чтобы сохранить его, активируйте текст, а затем нажмите значок «Новый стиль символа».

Дважды щелкните новый стиль символа и используйте следующие настройки.

Шаг 24
Выберите другое меню и затем щелкните Стиль символа, чтобы применить его. Если рядом со стилем символа вы найдете знак плюс, это означает, что у персонажа другие настройки. Чтобы переопределить настройки, щелкните значок с круглой стрелкой.

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

Шаг 26
Итак, какой смысл использовать стили символов? Стили персонажей помогают нам централизовать настройку персонажа. Мы можем просто отредактировать Стиль символов, чтобы редактировать каждый текст, используя этот стиль. Смотрите пример ниже. Если мы редактируем тип шрифта внутри стиля символа Главное меню – Нормальное для Corbel все обычное меню автоматически меняется на Corbel.

Шаг 27
Создайте новый слой и поместите его под строку меню. Удерживая клавишу Ctrl, щелкните строку меню, чтобы сделать новый выбор на основе его формы. Заполните его черным.

Шаг 28
Удалите выделение, используя Ctrl + D. Смягчите его, добавив Gaussian Blur, Filter> Blur> Gaussian Blur.

ползунок

Шаг 29
Нарисуйте прямоугольную форму шириной 10 столбцов (см. Ниже).

В качестве цвета заливки выберите # dfd1c2. Для его обводки выберите # c8baac размером 10 pt. Нажмите на маленькую стрелку раскрывающегося списка рядом с предварительным просмотром строки и убедитесь, что выбран параметр «Выровнять внутри».

Шаг 30
Вставьте картинку поверх рамки. Преобразуйте его в Clipping Mask, нажав Ctrl + Alt + G. Изображение автоматически перейдет в рамку слайдера. При необходимости вы можете перемещать и изменять размер изображения, не затрагивая его рамку.

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

Шаг 32
Нарисуйте прямоугольник над формой с помощью Fill: # b3aca5 и без обводки. Нажмите Ctrl + T и поверните его на 45 °. Преобразовать форму слоя в обтравочную маску.

Шаг 33
Дублируйте форму и измените ее размер. Измените его заливку на более темный цвет. Преобразовать форму слоя в обтравочную маску.

Шаг 34
Повторите тот же шаг, чтобы нарисовать еще одну стрелку на другой стороне.

Шаг 35
Ctrl-клик по слайду, чтобы сделать новый выбор. Создайте новый слой и преобразуйте его в обтравочную маску. Заполните выделение черным.

Шаг 36
Отмените выделение (Ctrl + D), затем смягчите его, используя размытие по Гауссу.

Вы можете уменьшить непрозрачность тени, если это необходимо.

Шаг 37
Нарисуйте скругленный прямоугольник в углу ползунка с помощью Fill # c8baac.

Шаг 38
Нарисуйте круг внутри фигуры. Установите его ход черным с размером 1 пт и удалите заливку.

Шаг 39
Выберите круговую дорожку, используя инструмент Path Selection. Shift + Alt-перетащите путь, чтобы продублировать его.

Повторите это, чтобы нарисовать больше кругов.

Шаг 40
Выберите один из путей круга. Нажмите Ctrl + Shift + J, чтобы обрезать его до нового слоя.

Шаг 41
В панели параметров удалите его обводку и измените его заливку на радиальный градиент от # e38989 до # bb5c5c. Добавить стиль слоя> Outer Glow и Drop Shadow.

Шаг 42
Нарисуйте эллиптическое выделение под слайдером. Создайте новый слой и залейте его черным.

Шаг 43
Отмените выбор (Ctrl + D). Смягчите его, используя Gaussian Blur.

Нижний фон

Шаг 44
Нарисуйте еще одну прямоугольную форму для нижнего фона. Используйте тот же цвет заливки и обводки, что и в форме ползунка.

Как всегда, будьте очень осторожны с его размещением. Мы хотим, чтобы оно охватывало каждого гида на холсте.

Добавить стиль слоя> Шаблон наложения.

Ниже приведен результат в 100% увеличении.

Шаг 45
Выберите его верхнюю область, используя инструмент Rectangular Marquee.

Шаг 46
Создайте новый слой, поместите его за форму. Заполните выделение черным. Нажмите Ctrl + T, щелкните правой кнопкой мыши и выберите «Перспектива».

Перетащите его верхние углы наружу.

Щелкните правой кнопкой мыши еще раз и выберите Scale. Перетащите верхнюю ручку вниз.

Щелкните правой кнопкой мыши и выберите «Деформация». Перетащите левый и правый сегмент внутрь.

Смягчите его, используя Gaussian Blur.

Уменьшите непрозрачность до 20%.

Шаг 47
Нарисуйте белый прямоугольник внутри фона. Это будет фоном для основного контента сайта.

Добавьте 10 пикселей слева, справа и сверху от фона. Интервал должен быть легким, потому что мы сделали руководство на ранних этапах. Добавить стиль слоя> Outer Glow.

Шаг 48
Добавьте новую направляющую в 25 пикселей от верхней части фигуры.

Название раздела

Шаг 49
Добавьте новый стиль символов для заголовка раздела страницы и его описания.

Добавьте заголовок раздела и его описание с помощью инструмента «Текст». Примените стили, которые мы сделали ранее. Убедитесь, что добавили 25 пикселей пространства с верхней стороны фона с помощью руководства, сделанного ранее.

Шаг 50
Нарисуйте линию 5 px под описанием сайта с помощью Fill: # 938270 и Stroke: None.

Сообщение блога

Шаг 51
Создайте другой стиль символов для заголовка сообщения.

Шаг 52
Добавьте заголовок сообщения и примените предыдущий стиль символов.

Шаг 53
Нарисуйте прямоугольник под заголовком с шириной 4 столбца. Установите белый для Fill и #bebebe для его Stroke. Добавить стиль слоя> Инсульт.

Шаг 54
Вставьте изображение поверх фигуры. Преобразуйте его в обтравочную маску (Ctrl + Alt + G).

Шаг 55
Нарисуйте прямоугольник с закругленными углами с помощью Fill: # 8e8380 и Stroke: None. Преобразуйте его в обтравочную маску.

Шаг 56
Создайте новые стили символов для метаданных блога.

Шаг 57
Добавьте текст метаданных поверх фигуры и примените стиль символов, который мы создали ранее.

Шаг 58
Активируйте инструмент «Текст» и перетащите его, чтобы создать текстовое поле. Установите его ширину до 4 столбцов. Нажмите «Текст»> «Вставить Lorem Ipsum», чтобы заполнить его автоматически сгенерированным Lorem Ipsum из Photoshop.

Шаг 59
Создайте новый стиль абзаца для содержимого персонажа. Нажмите на новый значок на панели «Стили абзаца».

Дважды щелкните стиль абзаца и используйте следующие настройки.

Шаг 60
Примените этот стиль к содержимому сообщения. Вы также можете поэкспериментировать с настройками отступов и интервалов.

Для веб-дизайна отключите переносы.

Шаг 61
Нарисуйте прямоугольник с закругленными углами с помощью Fill: # 8e8380 и Stroke: None. Добавить стиль слоя> Шаблон наложения. Для согласованности используйте тот же шаблон, что и в слайдере.

Шаг 62
Добавьте метку кнопки. Я предлагаю вам сохранить его как стиль персонажа. Таким образом, мы можем легко использовать его для других кнопок.

Шаг 63
Предыдущая кнопка для нормального состояния. Давайте скопируем его и изменим его цвет на # f76b6a. Кроме того, установите его тип метки на жирный.

Шаг 64
Поместите сообщение в группу, а затем нажмите Ctrl + J, чтобы продублировать его. Alt-drag для дублирования группы.

Повторите тот же шаг, чтобы сделать больше сообщений. Не забудьте изменить картинку и заголовок каждого поста.

Шаг 65
Дублируйте кнопку «Подробнее» и измените ее метку на номер. Мы собираемся использовать его для навигации по страницам. Не забудьте установить одну из кнопок в режим зависания.

Шаг 66: Нижний колонтитул
Давайте начнем работать над нижним колонтитулом. Добавьте заголовок виджета и его описание.

Шаг 67
Добавьте ссылку и нарисуйте линию размером 1 пиксель под ней. Установите Fill: None и Stroke: # 8e8380.

Шаг 68
Нажмите кнопку «Дополнительные параметры» и выберите пунктирную линию.

Шаг 69
Добавьте больше ссылок в виджет.

Шаг 70
Дублируйте виджет.

Шаг 71
Нам также нужно добавить условие наведения. Установите одну из ссылок на жирный.

Под этой активной ссылкой добавьте линию 5 пикселей. Установите его цвет # f76b6a. Для согласованности внешний вид этой ссылки аналогичен активному меню в строке меню.

Шаг 72
Добавьте еще один прямоугольник в нижней области. Установите его Fill в # 3d3123.

Информация нижнего колонтитула

Шаг 73
Добавьте информацию нижнего колонтитула с помощью инструмента «Текст». Дайте ему темную тень, чтобы добавить контраст ее фону.

Социальная сеть

Шаг 74
Добавь немного иконки социальных медиа из Даниэль Сельвителла, Добавить стиль слоя> Outer Glow.

Шаг 75
Уменьшите нормальный значок до 50%. Для условия наведения давайте просто оставим непрозрачность 100%.

Шаг 76
Возьмите значок курсора свободной руки и поместите наименьший курсор руки над активной или наведенной ссылкой.

Конечный результат
Это наш конечный результат. Вы можете видеть, что последняя версия Photoshop имеет несколько интересных функций для разработки веб-макета. Стили символов и стили абзацев – это значительное улучшение для каждого веб-дизайнера.