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

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

Учебник по дизайну блогов


Этот конкретный дизайн я создаю в качестве темы WordPress для Springy Developments. В будущем мы рассмотрим процесс кодирования и посмотрим, как сайт объединяется в конечный продукт.

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

Учебник по дизайну блогов

Откройте Adobe Photoshop и создайте новый документ. Мне нравится работать с большим документом, который отражает большие широкоэкранные разрешения. Не забудьте использовать цветовой режим RGB, когда сайт просматривается только на экране, а разрешение составляет 72 dpi.

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Обесцветьте (CTRL + SHIFT + U) текстуру, затем добавьте довольно широкое размытие по Гауссу, чтобы удалить большую часть мелких деталей.

Учебник по дизайну блогов

Поместите текстуру поверх градиента и измените режим смешивания на Overlay. Измените непрозрачность до 90%.

Учебник по дизайну блогов

При работе над дизайном сайта большое количество пользовательских мониторов играет большую роль в макете сайта. Если не требуется иное, я буду приспосабливать разрешения до 1024 × 768, поэтому направляющие нарисованы так, чтобы представлять ширину 960 пикселей в центре документа, это дает пространство приблизительно 40 пикселей с обеих сторон в качестве небольшого отступа, прежде чем элементы выходят за пределы границ. экрана.

Учебник по дизайну блогов

Используя инструмент Rounded Rectangle Tool, нарисуйте область содержимого, заполненную светло-серым (#eeeeee) с радиусом угла 20 пикселей. Обратите внимание, что в этом случае прямоугольник не пересекает оба поля, это позволяет немного коснуться дизайна вниз по линии.

Учебник по дизайну блогов

Дважды щелкните на слое прямоугольника и добавьте 8px белый штрих. Измените режим наложения на Overlay и уменьшите непрозрачность до 30%, чтобы получить крутой эффект прозрачности.

Учебник по дизайну блогов

Добавьте немного Inner Glow к прямоугольнику, используя белый с размером 5px, чтобы получить очень легкий эффект скошенного края.

Учебник по дизайну блогов

Наконец добавьте тонкий Outer Glow, используя черный с непрозрачностью 15%, чтобы дать небольшую тень области содержимого.

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Щелкните правой кнопкой мыши на эффектах серой панели содержимого и выберите «Создать слои». На только что созданном слое, состоящем из обводки, используйте ластик, чтобы затушить обводку на полпути вниз по документу.

Учебник по дизайну блогов

Добавьте немного дополнительного прикосновения к обводке, нарисовав линию 1px с помощью Pencil Tool вертикально вверх по всему краю. Удерживайте Shift, чтобы ограничить ось, чтобы дать четкий прямой край.

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Поместите копию текстуры бумаги в верхней части области содержимого. Используйте инструмент Hue / Saturation (CTRL + U), чтобы получить сине-зеленую окраску.

Учебник по дизайну блогов

Нажмите CTRL и щелкните миниатюру слоя с содержимым, чтобы создать выделение, инвертировать выделение (CTRL + SHIFT + I) и удалить лишнее. Также используйте стирание, чтобы слегка затушить текстуру, оставляя полосу сверху.

Учебник по дизайну блогов

Используйте Pencil Tool, чтобы добавить горизонтальную белую линию 1px под заголовком.

Учебник по дизайну блогов

Снова создайте выделение из области содержимого, затем нажмите ALT, одновременно перетаскивая прямоугольный шатер по документу, чтобы исключить большую часть выделения. На новом слое нарисуйте градиент от белого к прозрачному вниз и отрегулируйте непрозрачность до 90%, добавьте глянцевую подсветку по заголовку.

Учебник по дизайну блогов

Используйте инструмент Rectangular Marquee Tool, чтобы рисовать на боковой панели, которая выходит за пределы основной области содержимого. Заполните это серым цветом фона (#eeeeee).

Учебник по дизайну блогов

Добавьте эффект прозрачной границы на боковую панель, используя параметр обводки в окне «Стиль слоя».

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Аналогичным образом используйте параметр «Внутреннее свечение», чтобы добавить эффект тонкого белого удара на внутреннюю сторону боковой панели. Опция Choke, установленная на max, также делает свечение в виде сплошного блока.

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Когда структура макета почти завершена, смоделируйте текстовые элементы страницы, чтобы проверить цвета и размеры.

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

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

Учебник по дизайну блогов

Наконец добавьте другие элементы страницы, такие как параметры подписки. Значок RSS здесь можно найти в виде учебника или как часть бесплатного набора иконок .

Учебник по дизайну блогов

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



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован.