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

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

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

Бесплатный шрифт Sansation от Bernd Montag.
26 повторяющихся пикселей от PSDfreemium.
Бесплатные иконки социальных сетей от Daniele Selvitella.

демонстрация

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

Шаг 1

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

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

Шаг 2

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

Шаг 3

Нажмите Ctrl + R, чтобы открыть линейку. Нажмите Вид> Новый Руководство, чтобы сделать новое руководство, которое поможет нам точно проектировать. Выбрать вертикальный и в положении: 185 пикселей сделать вертикальную направляющую 185 px из левого верхнего угла холста.

Шаг 4

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

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

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

Шаг 5

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

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

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

Шаг 6

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

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

Шаг 7

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

Шаг 8

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

Шаг 9

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

Изменить его смесь Режим в экран и уменьшить его помутнение в 37%.

Шаг 10

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

Нарисуйте прямоугольное выделение внизу вторичного фона, как показано на рисунке. Нажмите Изменить: заполнить. Задавать использование в черный. Нажмите Хорошо заполнить выделение черным.

Шаг 11

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

Шаг 12

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

Шаг 13

Обрушить тень помутнение в 50% чтобы сделать это тонким. Ниже вы можете увидеть результат в 100% увеличении.

Шаг 14

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

заголовок

Шаг 15

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

Шаг 16

в Панель опций, задавать Инсульт цвет к # af9f8e.

Шаг 17

Для его заполнить цвет, выберите линейный градиент от # d0c4b9 to # a89c91.

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

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

Шаг 18

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

активировать Инструмент многоугольника и установить Стороны в 3. Нарисуйте треугольную форму с Заполнить: # 3d3123 а также Инсульт: нет. добавлять Стиль слоя > Drop Shadow.

Шаг 22

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

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

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

Шаг 23

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

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

Шаг 24

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

Шаг 25

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

Шаг 26

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

Шаг 27

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

Шаг 28

Удалить выделение с помощью Ctrl + D. Смягчить его, добавив Gaussian Blur, Фильтр> Размытие> Размытие по Гауссу.

ползунок

Шаг 29

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

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

Шаг 30

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

Шаг 31

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

Шаг 32

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

Шаг 33

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

Шаг 34

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

Шаг 35

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

Шаг 36

Отмените выделение (Ctrl + D), затем смягчать это с помощью Gaussian Blur.

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

Шаг 37

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

Шаг 38

Нарисуйте круг внутри фигуры. Установите его Инсульт в черный с размером 1 балл а также удалить заполнение.

Шаг 39

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

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

Шаг 40

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

Шаг 41

в Панель опций, удалить его Инсульт и изменить его заполнить к радиальный градиент от # e38989 to # bb5c5c. добавлять Стиль слоя> Наружное свечение а также Drop Shadow.

Шаг 42

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

Шаг 43

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

Нижний фон

Шаг 44

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

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

добавлять Стиль слоя> Наложение рисунка.

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

Шаг 45

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

Шаг 46

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

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

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

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

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

Смягчить помутнение в 20%.

Шаг 47

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

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

Шаг 48

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

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

Шаг 49

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

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

Шаг 50

Нарисуйте линию 5 px под описанием сайта с помощью Заполнить: # 938270 а также Инсульт: нет.

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

Шаг 51

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

Шаг 52

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

Шаг 53

Нарисуйте прямоугольник под заголовком с шириной 4 столбца. Задавать белый для его заполнить а также #bebebe для его Инсульт. добавлять Стиль слоя> Инсульт.

Шаг 54

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

Шаг 55

Нарисуйте прямоугольник с закругленными углами с Заполните: # 8e8380 а также Инсульт: нет. Преобразуйте это в Обтравочная маска.

Шаг 56

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

Шаг 57

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

Шаг 58

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

Шаг 59

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

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

Шаг 60

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

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

Шаг 61

Нарисуйте прямоугольник с закругленными углами с Заполните: # 8e8380 а также Инсульт: нет. добавлять Стиль слоя> Наложение рисунка. Для согласованности используйте тот же шаблон, что и в слайдере.

Шаг 62

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

Шаг 63

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

Шаг 64

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

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

Шаг 65

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

Шаг 66: Нижний колонтитул

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

Шаг 67

Добавьте ссылку и нарисуйте линию размером 1 пиксель под ней. Задавать Заполнить: нет а также Ход: # 8e8380.

Шаг 68

Нажмите Больше вариантов кнопку и выберите пунктир.

Шаг 69

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

Шаг 70

Дублировать виджет.

Шаг 71

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

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

Шаг 72

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

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

Шаг 73

Добавить информацию нижнего колонтитула, используя Тип инструмент. Дать ему темный Drop Shadow добавить контраст его фону.

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

Шаг 74

Добавьте несколько иконок социальных сетей от Даниэле Селвителлы. добавлять Стиль слоя> Наружное свечение.

Шаг 75

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

Шаг 76

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

Конечный результат

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

демонстрация
Скачать исходный код