В этом уроке будет более подробно рассказано о мире веб-дизайна, о процессе создания яркого и красочного современного макета блога в Adobe Photoshop. Начиная с чистого холста, мы пройдем процесс создания всей структуры и эффектов с нуля.
Этот конкретный дизайн я создаю в качестве темы WordPress для Springy Developments. В будущем мы рассмотрим процесс кодирования и посмотрим, как сайт объединяется в конечный продукт.
Имейте в виду, что во время первоначального создания концепции процесс был гораздо менее четким, чем следующие учебные шаги. Было проведено множество экспериментов, и элементы часто создавались заново, чтобы проверить, что работает лучше всего. Однако, мы надеемся, что это пошаговое руководство даст хорошее понимание того, какие инструменты и методы используются при создании этого выбранного макета с нуля.
Откройте Adobe Photoshop и создайте новый документ. Мне нравится работать с большим документом, который отражает большие широкоэкранные разрешения. Не забудьте использовать цветовой режим RGB, когда сайт просматривается только на экране, а разрешение составляет 72 dpi.
Первая область, над которой я, как правило, работаю, это фон страницы, здесь можно представить небольшой интерес, который заполняет пространство для людей с более высоким разрешением. Выберите сплошной цвет для фона, затем вытяните радиальный градиент из верхнего центра. Очевидно, выбор цветовой палитры зависит от вас, но здесь я использую смесь зеленого и голубого.
Откройте ресурс из коричневой бумаги из недавнего поста, он будет использован, чтобы добавить некоторый интерес в виде текстуры к фону.
Обесцветьте (CTRL + SHIFT + U) текстуру, затем добавьте довольно широкое размытие по Гауссу, чтобы удалить большую часть мелких деталей.
Это интересно: Как создать эффект изометрического типа в Adobe Illustrator
Поместите текстуру поверх градиента и измените режим смешивания на 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 здесь можно найти в виде учебника или как часть бесплатного набора иконок .
С хорошим выбором информации, представленной на странице, она дает четкое представление о том, как будет выглядеть весь сайт в целом. В следующем посте мы рассмотрим экспорт элементов этого дизайна и кодирование макета в настоящую веб-страницу.
 (Пока оценок нет) Загрузка... |
