Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

“Clean Grunge” как направление.
Я не уверен, что этот стиль является официальным направление в web-дизайне но, на мой взгляд, так и есть. Это сочетание стиль гранж с функциональностью, беспорядка с упорядоченностью. Очень часто дизайн в стиле гранж не удобен в использовании, а многие сайты, удовлетворяющие этому требованию, отстают в изящности. Поэтому выбранный мной стиль имеет оба преимущества.

В этом уроке я затрону такие моменты:

Чёткие края смешаны с небрежными
Чёткая обводка, но в то же время неаккуратная
Гранжевые текстуры, которые будут едва видны
Низкая непрозрачность текстур
Размытая цветовая палитра
Красивый рукописный текст
Уделю особое внимание деталям


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


Web-дизайн в стиле “Clean Grunge”


Шаг 1
Создайте новый документ размером 1050х1500 пикселей. Этот документ мы используем в качестве фона для общей области контента. Создайте новый слой (Create New Layer) и назовите его “background”, потом создайте ещё один и назовите “main background color”. Выделите холст (Ctrl+A) и залейте его цветом #ECE5D9, используя инструмент Заливка (Paint Bucket Tool).


Web-дизайн в стиле “Clean Grunge”


Шаг 2
Создайте ещё один документ размером 960х1200пикселей. Ширина в 960 пикселей идеально подходит для разрешения экрана 1024х768 пикселей (исчезает риск того, что нужно будет осуществлять прокрутку в сторону). В этом документе создайте новый слой (Create New Layer) и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на 3/4 части холста слева, залейте его белым цветом, как показано ниже. Потом инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение оставшейся 1/4 части и залейте её средним серым цветом. Сделайте выделение всего слоя (Ctrl+Click), скопируйте его (Ctrl+C) и вернитесь в первый документ. Выберите инструмент Масштаб (Zoom Tool), кликните правой кнопкой и выберите пункт Показать во весь экран (Fit to screen). Теперь вставьте выделение (Ctrl+V). Оно должны расположиться прямо по центру холста.


Web-дизайн в стиле “Clean Grunge”


Шаг 3
Выберите слой “main background color” (Ctrl+Click), создайте новый слой над ним (Create New Layer), сделайте выделение области сверху (но немного отступите от верхнего края, как показано ниже), залейте это выделение цветом # 928673. Сделайте невидимым слой с белым и серым прямоугольниками, так как мы будем работать над основным фоном.


Web-дизайн в стиле “Clean Grunge”


Шаг 4
Загрузите эту бумажную текстуру и вставьте её в наш документ. Расположите этот слой над предыдущими двумя слоями, относящимися к основному фону. Текстура немного размытая, поэтому примените фильтр Резкость+ (Sharpen More Filter). Установите Режим наложения этого слоя – Умножение (Blending Mode – Multiply) и Непрозрчаность (Opacity) – 50%.


Web-дизайн в стиле “Clean Grunge”


Шаг 5
Выберите слой с верхней тёмной полоской, инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение верхней и нижней светлых областей (чтобы выделить обе части, удерживайте Shift при этом). Вернитесь в слой с бумажной текстурой и перейдите в меню Яркость/Контрастность (Brightness/Contrast). Настройте, как показано ниже:


Web-дизайн в стиле “Clean Grunge”


Шаг 6
Теперь загрузите набор кистей Ink and Splatters. Создайте новый слой (Create New Layer) над слоем с бумажной текстурой и назовите его “ink splatters”, установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 50%. Обрисуйте этими кистями изображение. Вам не нужно закрашивать центральную часть холста, так как там будет область контента и кисти не будут видны. В основном вам нужно обрисовать края.


Web-дизайн в стиле “Clean Grunge”


Шаг 7
Мазки на тёмно-коричневой верхней области слишком выделяются и плохо сочетаются с фоном. Чтобы исправить это, выберите слой “header dark” и инструментом Волшебная палочка (Magic Wand Tool) выделите коричневую полоску. Выберите слой “ink splatters” и инструментом Ластик (Eraser Tool), мягким ластиком с непрозрачностью 50% подотрите всю коричневую полосу. Этим вы уменьшите непрозрачность мазков вдвое.


Web-дизайн в стиле “Clean Grunge”


Шаг 8
Теперь вернёмся к нашему скрытому слою с белой и серой областью. Сделайте его снова видимым и создайте новую группу слоёв “main area” (Create New Group). Инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение белой области и скопируйте выделение в новый слой группы “main area”. Создаваемые далее слои будут принадлежать этой группе. Скройте слой с белой и серой областями снова.


Web-дизайн в стиле “Clean Grunge”


Шаг 9
Наш дизайн должен быть чётко выстроен и правильно сочетающиеся линии очень важны (хоть это и гранжевый стиль). Подвиньте белую область контента к верхней линии коричневой полосы. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст меню над ней. Я использовал шрифт – Arial, размер – 11pt., цвет - #3B3026, кернинг: -50. Создайте новый слой “menu hover” под текстовым слоем и создайте белый прямоугольник под словом “home”, чтобы сделать этот раздел активным.


Web-дизайн в стиле “Clean Grunge”


Шаг 10
Этот шаг очень важен, так как в нём мы определимся со структурой и добавить хорошие гранжевые детали. Выберите инструмент Линия (Line Tool) размером 1 пиксель и нарисуйте чёрные линии вокруг белой области контента, создав этим границы. Каждая линия будет создана в отдельном слое как векторный объект. Вам нужно будет растеризовать каждый слой (Rasterize – Shape) и потом объединить все линии в один слой. Затем выберите инструмент Ластик (Eraser Tool) и сотрите границы в некоторых местах, чтобы сделать беспорядочную обводку. Для лучшего результата используйте кисти из загруженного набора ‘ink splatter’ для ластика, и непрозрачностью инструмента – 50%.


Web-дизайн в стиле “Clean Grunge”


Шаг 11
Создайте новую группу слоёв (Create New Group) под первой группой со слоями области контента и назовите её “sidebar 1”. Сделайте слой с серым и белым прямоугольниками видимым, создайте новый слой в группе “sidebar 1” и назовите его “sidebar bg”. В нём создайте прямоугольное выделение шириной в серую область и залейте его цветом #B8A689. Потом повторите процесс создания небрежных границ для этой области.


Web-дизайн в стиле “Clean Grunge”


Шаг 12
Найдите в Интернете текстуру картона и вставьте её в наш документ. Расположите над только что созданной коричневой областью и подгоните по размеру, чтобы текстура хорошо накладывалась. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 80%.


Web-дизайн в стиле “Clean Grunge”


Шаг 13
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей. Нарисуйте фигуру в верхней части области с текстурой картона, установите Непрозрачность (Opacity) слоя – 20% и растеризуйте прямоугольник (Rasterize – Shape). Потом используя кисти из загруженного набора ‘ink splatter’ подотрите области прямоугольника, как показано ниже, чтобы придать эффект гранж. Напишите текст заголовка и текст контента. Для создания кнопки “LEARN MORE…” я просто использовал кисть и нарисовал небольшой фон для текста. Потом кистью из того же набора я добавил потёртость в правом нижнем углу.


Web-дизайн в стиле “Clean Grunge”


Шаг 14
Все слои, принадлежащие созданной боковой панели должны находиться в группе. Сделайте копию группы с боковой панелью и спустите её на 20 пикселей ниже первой. Я решил изменить цвет фона боковой панели, так как верхняя панель должна привлекать больше внимания. Для этого выберите слой “sidebar bg” второй панели и перейдите в меню Тон/Насыщенность (Hue/Saturation), настройте, как показано ниже:


Web-дизайн в стиле “Clean Grunge”


Шаг 15
Сделайте ещё пару копий боковой панели, чтобы заполнить правую область. Потёртость в правом нижнем углу была слишком жирной и отвлекала внимания от контента боковой панели. Поэтому я взял ластик с непрозрачностью 50% и немного подтёр этот угол.


Web-дизайн в стиле “Clean Grunge”


Шаг 16
Создайте новую группу слоёв (Create New Group) на самом верху в палитре слоёв и назовите её “header”. Выберите гранжевый или рукописный шрифт (я выбрал Green Piloww) и напишите текст-логотип.


Web-дизайн в стиле “Clean Grunge”


Шаг 17
Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите фигуру, похожую на траву. Создайте эту фигуру над всеми слоями и группами цветом #C4FA44, растеризуйте этот слой (Rasterize – Shape). Потом скройте все слои и группы кроме слоя травой и перейдите в меню Редактирование»Определить кисть (Edit>Define brush preset), сохраните узор под именем “grass brush”. Можете сделать слои снова видимыми.


Web-дизайн в стиле “Clean Grunge”


Шаг 18
Перейдите в палитру кистей (F5) и выберите там кисть “grass brush” и настройте Рассеивание (Scattering), как показано ниже.


Web-дизайн в стиле “Clean Grunge”


Динамика формы:


Web-дизайн в стиле “Clean Grunge”


Удалите слой с травой и создайте новый “grass light”. Нарисуйте траву над самой верхней боковой панелью. По какой-то причине мазки кисти очень слабые, поэтому сделайте копию этого слоя 10 раз и объедините их все в один.


Web-дизайн в стиле “Clean Grunge”


Шаг 19
Создайте новый слой “grass medium” (Create New Layer). Используя технику предыдущего шага нарисуйте ещё травы цветом #94C51E. Потом создайте ещё один слой “grass dark” и нарисуйте траву цветом #5D800A. В конце инструментом Прямоугольное выделение (Rectangular Marquee Tool) удалите области травы, которые вылезают на белую область контента.


Web-дизайн в стиле “Clean Grunge”

Web-дизайн в стиле “Clean Grunge”


Шаг 20
Загрузите иконку Twitter, расположите её на траве и примените стиль Внутренняя тень (Layer Style - Inner Shadow), чтобы лучше выделить голову птица на светлом фоне.

Режим – Умножение


Web-дизайн в стиле “Clean Grunge”


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


Web-дизайн в стиле “Clean Grunge”


Шаг 22
Создайте новую группу слоёв под слоями с птицей. Назовите её “rss area”. В новом слое вставьте иконку RSS, поднимите её немного над верхней границей холста, чтобы создать иллюзию того, что она опускается сверху, и затем поверните её в режиме Поворота (Transform – Rotate). Примените к иконке стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение


Web-дизайн в стиле “Clean Grunge”


Шаг 23
Теперь под иконкой вставьте изображение ободранного картона и установите Режим наложения – Умножение (Blending Mode – Multiply), поверните картон, как показано ниже, и напишите текст гранжевым шрифтом логотипа.


Web-дизайн в стиле “Clean Grunge”


Шаг 24
Создайте новую группу слоёв “blog post 1”. Добавьте контент на белую область. Используйте четкий большой шрифт (я использовал “Georgia”). Вы можете вставить что угодно в качестве контента, так как цель урока – это подготовка области для него.

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

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


Web-дизайн в стиле “Clean Grunge”


Шаг 25
Вернитесь к группе фоновых слоёв. Сделайте копию слоя с коричневой полоской и расположите её под белой областью контента. В режиме Масштабирования (Transform – Scale) измените размер слоя, чтобы он был в ширину белой области. Нужно уменьшить насыщенность этой нижней полоски. Для этого подотрите её ластиком с 50% непрозрачностью, как мы делали это ранее. Также создайте гранжевые границы:


Web-дизайн в стиле “Clean Grunge”


Шаг 26
Создайте новую группу “footer”. Заполните её текстом, потом выделите небольшую область в самом низу и перейдите в меню Яркость/Контрастность (Brightness/Contrast), введите значение Яркости: -40.


Web-дизайн в стиле “Clean Grunge”


Шаг 27
Теперь нужно вытащить правую колонку вперёд. Для этого создайте новую группу слоёв между боковой панелью и стейлером (нижней полоской), назовите её “main area shadow”. Создайте длинное вертикальное прямоугольное выделение шириной в 5 пикселей на границе двух областей и залейте его чёрным цветом. Установите Непрозрачность (Opacity) слоя – 10%.


Web-дизайн в стиле “Clean Grunge”


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


Web-дизайн в стиле “Clean Grunge”




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: