От автора: привет, друзья! Тема сегодняшнего поста — дизайн блога. Занятие у нас будет практическое, поэтому приготовьтесь к самостоятельной работе, отдых не планируется 🙂 Почему мастер-класс именно на примере блога? Да, наверное, потому что блог дает безграничное поле для фантазии. Благодаря развитию доступных платформ и шаблонов, авторские блоги расплодились в сети как кролики, приумножая свое число просто в геометрической прогрессии ежедневно. А мы сделаем свой уникальный дизайн. Поехали!
1. Подготовка и организация групп.
Работать будем на белом холсте размером 950 на 1600 px. После того как выставите направляющие, ширину можно увеличить до 1200 px, так будет удобнее. Очень часто после создания дизайна блога в psd получается огромное количество слоев, с которыми непросто разобраться. Если верстать макет будет неопытный мастер, то дополнительной работы не избежать, будете переделывать и разжевывать ему каждую фиговину.
Мы подготовимся заранее и разделим все наши слои по папкам/группам. Именовать их будем согласно названий блоков: шапка, контент, навигация, сайдбар и футер. Если какая-то группа в итоге не понадобится (хотя это будет странно), просто ее удалим.
2. Группа Header
В моем примере шапка сделана на текстуре «бумага». Как ее подготовить:
Берем стандартную «Текстура бумаги 1». найти ее можно в текстурах Фотошопа.
Magic Wand Tool убираем черный фон.
Выносим то, что получилось, на новый слой и затаскиваем в группу Header.
Бумага должна занять всю верхнюю часть документа. Оригинальный ее цвет нам не понадобится, поэтому выставляем Lightness на значение -100.
Логотип у меня самый простой текстовый, отображенный по левому краю. Шрифт — VTKS Caveirada. Любые нестандартные шрифты сохраняются в папку на диск компьютера. Если Фотошоп их не затягивает на рабочую панель, перезагрузите программу. Предварительно сохраните готовый макет!
На правый край вставляем ссылки. Активные ссылки у нас будут подсвечены серым, такую фигуру можно сделать в инструменте Lasso Tool.
3. Текстура фона
Даже самый стандартный дизайн блога на wordpress можно сделать уникальным, если добавить оригинальную текстуру к фону. Нам понадобится «Текстура бумаги 3», которую мы перенесем на макет. Изображение должно полностью покрыть страницу, для этого уберем его под все остальные слои.
Чтобы добиться нужного серого оттенка, мы обесцветим текстуру и повысим яркость до нужного угла, как показано на рисунке:
4. Прорисовка основной области — контент.
На моем макете будет две основных информативных области:
собственно, сам контент — статьи, например, — и анонсы к ним;
и сайдбар.
Сейчас мы переходим к наполнению группы слоев Content. Обратите внимание, что работать нужно только в ней.
Создаем выделение шириной 660 px (проверить свой глазомер можно через окно Info, еще удобно отображать линейку в пикселях, тогда вы всегда будете ориентироваться в размерах). Заливаем новый слой белым фоном.
Добавляем стиль. Посмотрите, какие настройки выбирал я:
Добавлю только, что серый цвет лучше выбирать не на глаз, а по коду, тогда не будет лишних переходов.
Теперь наложим текстуру, подойдет стандартная «бумага 2». Копируем ее через выделение. В основной макет переносим новый слой поверх белой области. Через трансформирование добиваемся нужного размера. Обесцвечиваем. Через кривую коррекции затемняем.
Теперь делаем контур текстовой области. 1. Нажимаем комбинацию «Ctrl + левой кнопкой мыши на слой в палитре». Полученное выделение надо модифицировать, по 3 px по периметру подойдет. Инвертируем выделенный фрагмент, нажимаем Del. Готово.
Еще у меня на текстуру наложена маска слоя и градиент. Настройки как на картинке:
5. Меню навигации.
Теперь займемся группой Navigation. С помощью Rectangular Marquee Tool создаем выделение, как показано на картинке.
Делаем черную заливку. Аналогично создаем необходимое количество кнопок или просто их копируем. Через Horizontal Type Tool подписываем кнопки. Уголок крайней кнопки нужно «загнуть». Делаем выделение и поворачиваем его на 450.
Вырезаем выделение и отображаем на 1800.Увеличиваем яркость (Lightness) «загиба» до 30. В оставшееся пространство в строке вставляем иконки шаринга (соц. сетей), размер 32*32 подойдет.
6. Пространства для контента.
Перед добавлением текста готовим область контента: выделяем слой под основное наполнение. Через Transform Selection уменьшаем значение ширины на 40 px, получаем двусторонний отступ по 20 px.
Выставляем еще 2 направляющие внутри области. Вписываем наш заголовок, я использовал Horizontal Type Tool и Adobe Garamond Pro шрифт. При этом работаем строго в группе Content.
Добавляем информационную строку. Готово. Переходим к иллюстрации статьи. Выделяем область заданного размера 620*275. Выделяем ее в новый слой и заливаем черным. Выставляем параметры стиля в точности как на картинке:
Применяем обводку: Size 4, Opacity 62%, Color в тон. Вставляем иллюстрацию над основным слоем, вписываем его в рамку комбинацией Ctrl+Alt+G.
В наш контент осталось добавить кнопку «Читать далее», для ее заливки я использовал оттенок #8e0a13, отделить горизонтальной линией шапку и по описанной выше технике вставить миниатюру к статье размером 165*165 px.
Должно получиться так:
Для навигации по страницам используем квадратные кнопки и цветные заливки.
7. Поле поиска
В новом слое и прямоугольной области создаем поле поиска на белом фоне. Настраиваем стиль по инструкции:
Группа Sidebar
Для организации группы нам понадобится: Создать две области, черную и #1f1f1f.
Подписать области, как показано на картинке, фигуры берем из инструмента Custom Shape Tool. Не забываем про отступы.
Аналогично создаем каждую область сайдбара, используя уже знакомые нам техники.
9. Футер
В моем примере футер самый простой. Зигзаг на верхней границе я сделал инструментом Magnetic Lasso Tool в том же слое.
10. Узор фона
Узор я рисовал сам, это не шаблон. Делается очень просто:
В отдельном документе карандашом рисуем картинку, сохраняем через Edit — Define Pattern под произвольным именем.
В основном документе создаем новый слой над фоном и делаем заливку.
Готовый макет должен получится такой:
Но вы же знаете, я против шаблонов и приветствую любое творчество. Конечно, придется немного потрудиться, возможно, не все получится с первого раза. Однако, освоить все эти техники можно даже с нулевым уровнем знаний. Похвастайтесь тем, что у вас получилось, в комментариях, лучшие дизайны блогов не останутся незамеченными 🙂 До новых встреч! Успехов!
