Мы запустили Форум! (*beta)
Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа!
Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ
сортировать посты по: Рейтингу | Посещаемости | Комментируемые
Подсказка
Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.
*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.
+2
“Clean Grunge” как направление.
Я не уверен, что этот стиль является официальным направление в web-дизайне но, на мой взгляд, так и есть. Это сочетание стиль гранж с функциональностью, беспорядка с упорядоченностью. Очень часто дизайн в стиле гранж не удобен в использовании, а многие сайты, удовлетворяющие этому требованию, отстают в изящности. Поэтому выбранный мной стиль имеет оба преимущества.
В этом уроке я затрону такие моменты:
Чёткие края смешаны с небрежными
Чёткая обводка, но в то же время неаккуратная
Гранжевые текстуры, которые будут едва видны
Низкая непрозрачность текстур
Размытая цветовая палитра
Красивый рукописный текст
Уделю особое внимание деталям
Конечный результат:
Я не уверен, что этот стиль является официальным направление в web-дизайне но, на мой взгляд, так и есть. Это сочетание стиль гранж с функциональностью, беспорядка с упорядоченностью. Очень часто дизайн в стиле гранж не удобен в использовании, а многие сайты, удовлетворяющие этому требованию, отстают в изящности. Поэтому выбранный мной стиль имеет оба преимущества.
В этом уроке я затрону такие моменты:
Чёткие края смешаны с небрежными
Чёткая обводка, но в то же время неаккуратная
Гранжевые текстуры, которые будут едва видны
Низкая непрозрачность текстур
Размытая цветовая палитра
Красивый рукописный текст
Уделю особое внимание деталям
Конечный результат:
Шаг 1
Создайте новый документ размером 1050х1500 пикселей. Этот документ мы используем в качестве фона для общей области контента. Создайте новый слой (Create New Layer) и назовите его “background”, потом создайте ещё один и назовите “main background color”. Выделите холст (Ctrl+A) и залейте его цветом #ECE5D9, используя инструмент Заливка (Paint Bucket Tool).
Создайте новый документ размером 1050х1500 пикселей. Этот документ мы используем в качестве фона для общей области контента. Создайте новый слой (Create New Layer) и назовите его “background”, потом создайте ещё один и назовите “main background color”. Выделите холст (Ctrl+A) и залейте его цветом #ECE5D9, используя инструмент Заливка (Paint Bucket Tool).
Шаг 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). Оно должны расположиться прямо по центру холста.
Создайте ещё один документ размером 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). Оно должны расположиться прямо по центру холста.
Шаг 3
Выберите слой “main background color” (Ctrl+Click), создайте новый слой над ним (Create New Layer), сделайте выделение области сверху (но немного отступите от верхнего края, как показано ниже), залейте это выделение цветом # 928673. Сделайте невидимым слой с белым и серым прямоугольниками, так как мы будем работать над основным фоном.
Выберите слой “main background color” (Ctrl+Click), создайте новый слой над ним (Create New Layer), сделайте выделение области сверху (но немного отступите от верхнего края, как показано ниже), залейте это выделение цветом # 928673. Сделайте невидимым слой с белым и серым прямоугольниками, так как мы будем работать над основным фоном.
Шаг 4
Загрузите эту бумажную текстуру и вставьте её в наш документ. Расположите этот слой над предыдущими двумя слоями, относящимися к основному фону. Текстура немного размытая, поэтому примените фильтр Резкость+ (Sharpen More Filter). Установите Режим наложения этого слоя – Умножение (Blending Mode – Multiply) и Непрозрчаность (Opacity) – 50%.
Загрузите эту бумажную текстуру и вставьте её в наш документ. Расположите этот слой над предыдущими двумя слоями, относящимися к основному фону. Текстура немного размытая, поэтому примените фильтр Резкость+ (Sharpen More Filter). Установите Режим наложения этого слоя – Умножение (Blending Mode – Multiply) и Непрозрчаность (Opacity) – 50%.
Шаг 5
Выберите слой с верхней тёмной полоской, инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение верхней и нижней светлых областей (чтобы выделить обе части, удерживайте Shift при этом). Вернитесь в слой с бумажной текстурой и перейдите в меню Яркость/Контрастность (Brightness/Contrast). Настройте, как показано ниже:
Выберите слой с верхней тёмной полоской, инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение верхней и нижней светлых областей (чтобы выделить обе части, удерживайте Shift при этом). Вернитесь в слой с бумажной текстурой и перейдите в меню Яркость/Контрастность (Brightness/Contrast). Настройте, как показано ниже:
Шаг 6
Теперь загрузите набор кистей Ink and Splatters. Создайте новый слой (Create New Layer) над слоем с бумажной текстурой и назовите его “ink splatters”, установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 50%. Обрисуйте этими кистями изображение. Вам не нужно закрашивать центральную часть холста, так как там будет область контента и кисти не будут видны. В основном вам нужно обрисовать края.
Теперь загрузите набор кистей Ink and Splatters. Создайте новый слой (Create New Layer) над слоем с бумажной текстурой и назовите его “ink splatters”, установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 50%. Обрисуйте этими кистями изображение. Вам не нужно закрашивать центральную часть холста, так как там будет область контента и кисти не будут видны. В основном вам нужно обрисовать края.
Шаг 7
Мазки на тёмно-коричневой верхней области слишком выделяются и плохо сочетаются с фоном. Чтобы исправить это, выберите слой “header dark” и инструментом Волшебная палочка (Magic Wand Tool) выделите коричневую полоску. Выберите слой “ink splatters” и инструментом Ластик (Eraser Tool), мягким ластиком с непрозрачностью 50% подотрите всю коричневую полосу. Этим вы уменьшите непрозрачность мазков вдвое.
Мазки на тёмно-коричневой верхней области слишком выделяются и плохо сочетаются с фоном. Чтобы исправить это, выберите слой “header dark” и инструментом Волшебная палочка (Magic Wand Tool) выделите коричневую полоску. Выберите слой “ink splatters” и инструментом Ластик (Eraser Tool), мягким ластиком с непрозрачностью 50% подотрите всю коричневую полосу. Этим вы уменьшите непрозрачность мазков вдвое.
Шаг 8
Теперь вернёмся к нашему скрытому слою с белой и серой областью. Сделайте его снова видимым и создайте новую группу слоёв “main area” (Create New Group). Инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение белой области и скопируйте выделение в новый слой группы “main area”. Создаваемые далее слои будут принадлежать этой группе. Скройте слой с белой и серой областями снова.
Теперь вернёмся к нашему скрытому слою с белой и серой областью. Сделайте его снова видимым и создайте новую группу слоёв “main area” (Create New Group). Инструментом Волшебная палочка (Magic Wand Tool) сделайте выделение белой области и скопируйте выделение в новый слой группы “main area”. Создаваемые далее слои будут принадлежать этой группе. Скройте слой с белой и серой областями снова.
Шаг 9
Наш дизайн должен быть чётко выстроен и правильно сочетающиеся линии очень важны (хоть это и гранжевый стиль). Подвиньте белую область контента к верхней линии коричневой полосы. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст меню над ней. Я использовал шрифт – Arial, размер – 11pt., цвет - #3B3026, кернинг: -50. Создайте новый слой “menu hover” под текстовым слоем и создайте белый прямоугольник под словом “home”, чтобы сделать этот раздел активным.
Наш дизайн должен быть чётко выстроен и правильно сочетающиеся линии очень важны (хоть это и гранжевый стиль). Подвиньте белую область контента к верхней линии коричневой полосы. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст меню над ней. Я использовал шрифт – Arial, размер – 11pt., цвет - #3B3026, кернинг: -50. Создайте новый слой “menu hover” под текстовым слоем и создайте белый прямоугольник под словом “home”, чтобы сделать этот раздел активным.
Шаг 10
Этот шаг очень важен, так как в нём мы определимся со структурой и добавить хорошие гранжевые детали. Выберите инструмент Линия (Line Tool) размером 1 пиксель и нарисуйте чёрные линии вокруг белой области контента, создав этим границы. Каждая линия будет создана в отдельном слое как векторный объект. Вам нужно будет растеризовать каждый слой (Rasterize – Shape) и потом объединить все линии в один слой. Затем выберите инструмент Ластик (Eraser Tool) и сотрите границы в некоторых местах, чтобы сделать беспорядочную обводку. Для лучшего результата используйте кисти из загруженного набора ‘ink splatter’ для ластика, и непрозрачностью инструмента – 50%.
Этот шаг очень важен, так как в нём мы определимся со структурой и добавить хорошие гранжевые детали. Выберите инструмент Линия (Line Tool) размером 1 пиксель и нарисуйте чёрные линии вокруг белой области контента, создав этим границы. Каждая линия будет создана в отдельном слое как векторный объект. Вам нужно будет растеризовать каждый слой (Rasterize – Shape) и потом объединить все линии в один слой. Затем выберите инструмент Ластик (Eraser Tool) и сотрите границы в некоторых местах, чтобы сделать беспорядочную обводку. Для лучшего результата используйте кисти из загруженного набора ‘ink splatter’ для ластика, и непрозрачностью инструмента – 50%.
Шаг 11
Создайте новую группу слоёв (Create New Group) под первой группой со слоями области контента и назовите её “sidebar 1”. Сделайте слой с серым и белым прямоугольниками видимым, создайте новый слой в группе “sidebar 1” и назовите его “sidebar bg”. В нём создайте прямоугольное выделение шириной в серую область и залейте его цветом #B8A689. Потом повторите процесс создания небрежных границ для этой области.
Создайте новую группу слоёв (Create New Group) под первой группой со слоями области контента и назовите её “sidebar 1”. Сделайте слой с серым и белым прямоугольниками видимым, создайте новый слой в группе “sidebar 1” и назовите его “sidebar bg”. В нём создайте прямоугольное выделение шириной в серую область и залейте его цветом #B8A689. Потом повторите процесс создания небрежных границ для этой области.
Шаг 12
Найдите в Интернете текстуру картона и вставьте её в наш документ. Расположите над только что созданной коричневой областью и подгоните по размеру, чтобы текстура хорошо накладывалась. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 80%.
Найдите в Интернете текстуру картона и вставьте её в наш документ. Расположите над только что созданной коричневой областью и подгоните по размеру, чтобы текстура хорошо накладывалась. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность (Opacity) – 80%.
Шаг 13
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей. Нарисуйте фигуру в верхней части области с текстурой картона, установите Непрозрачность (Opacity) слоя – 20% и растеризуйте прямоугольник (Rasterize – Shape). Потом используя кисти из загруженного набора ‘ink splatter’ подотрите области прямоугольника, как показано ниже, чтобы придать эффект гранж. Напишите текст заголовка и текст контента. Для создания кнопки “LEARN MORE…” я просто использовал кисть и нарисовал небольшой фон для текста. Потом кистью из того же набора я добавил потёртость в правом нижнем углу.
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей. Нарисуйте фигуру в верхней части области с текстурой картона, установите Непрозрачность (Opacity) слоя – 20% и растеризуйте прямоугольник (Rasterize – Shape). Потом используя кисти из загруженного набора ‘ink splatter’ подотрите области прямоугольника, как показано ниже, чтобы придать эффект гранж. Напишите текст заголовка и текст контента. Для создания кнопки “LEARN MORE…” я просто использовал кисть и нарисовал небольшой фон для текста. Потом кистью из того же набора я добавил потёртость в правом нижнем углу.
Шаг 14
Все слои, принадлежащие созданной боковой панели должны находиться в группе. Сделайте копию группы с боковой панелью и спустите её на 20 пикселей ниже первой. Я решил изменить цвет фона боковой панели, так как верхняя панель должна привлекать больше внимания. Для этого выберите слой “sidebar bg” второй панели и перейдите в меню Тон/Насыщенность (Hue/Saturation), настройте, как показано ниже:
Все слои, принадлежащие созданной боковой панели должны находиться в группе. Сделайте копию группы с боковой панелью и спустите её на 20 пикселей ниже первой. Я решил изменить цвет фона боковой панели, так как верхняя панель должна привлекать больше внимания. Для этого выберите слой “sidebar bg” второй панели и перейдите в меню Тон/Насыщенность (Hue/Saturation), настройте, как показано ниже:
Шаг 15
Сделайте ещё пару копий боковой панели, чтобы заполнить правую область. Потёртость в правом нижнем углу была слишком жирной и отвлекала внимания от контента боковой панели. Поэтому я взял ластик с непрозрачностью 50% и немного подтёр этот угол.
Сделайте ещё пару копий боковой панели, чтобы заполнить правую область. Потёртость в правом нижнем углу была слишком жирной и отвлекала внимания от контента боковой панели. Поэтому я взял ластик с непрозрачностью 50% и немного подтёр этот угол.
Шаг 16
Создайте новую группу слоёв (Create New Group) на самом верху в палитре слоёв и назовите её “header”. Выберите гранжевый или рукописный шрифт (я выбрал Green Piloww) и напишите текст-логотип.
Создайте новую группу слоёв (Create New Group) на самом верху в палитре слоёв и назовите её “header”. Выберите гранжевый или рукописный шрифт (я выбрал Green Piloww) и напишите текст-логотип.
Шаг 17
Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите фигуру, похожую на траву. Создайте эту фигуру над всеми слоями и группами цветом #C4FA44, растеризуйте этот слой (Rasterize – Shape). Потом скройте все слои и группы кроме слоя травой и перейдите в меню Редактирование»Определить кисть (Edit>Define brush preset), сохраните узор под именем “grass brush”. Можете сделать слои снова видимыми.
Выберите инструмент Произвольная фигура (Custom Shape Tool) и выберите фигуру, похожую на траву. Создайте эту фигуру над всеми слоями и группами цветом #C4FA44, растеризуйте этот слой (Rasterize – Shape). Потом скройте все слои и группы кроме слоя травой и перейдите в меню Редактирование»Определить кисть (Edit>Define brush preset), сохраните узор под именем “grass brush”. Можете сделать слои снова видимыми.
Шаг 18
Перейдите в палитру кистей (F5) и выберите там кисть “grass brush” и настройте Рассеивание (Scattering), как показано ниже.
Перейдите в палитру кистей (F5) и выберите там кисть “grass brush” и настройте Рассеивание (Scattering), как показано ниже.
Удалите слой с травой и создайте новый “grass light”. Нарисуйте траву над самой верхней боковой панелью. По какой-то причине мазки кисти очень слабые, поэтому сделайте копию этого слоя 10 раз и объедините их все в один.
Шаг 19
Создайте новый слой “grass medium” (Create New Layer). Используя технику предыдущего шага нарисуйте ещё травы цветом #94C51E. Потом создайте ещё один слой “grass dark” и нарисуйте траву цветом #5D800A. В конце инструментом Прямоугольное выделение (Rectangular Marquee Tool) удалите области травы, которые вылезают на белую область контента.
Создайте новый слой “grass medium” (Create New Layer). Используя технику предыдущего шага нарисуйте ещё травы цветом #94C51E. Потом создайте ещё один слой “grass dark” и нарисуйте траву цветом #5D800A. В конце инструментом Прямоугольное выделение (Rectangular Marquee Tool) удалите области травы, которые вылезают на белую область контента.
Шаг 20
Загрузите иконку Twitter, расположите её на траве и примените стиль Внутренняя тень (Layer Style - Inner Shadow), чтобы лучше выделить голову птица на светлом фоне.
Режим – Умножение
Загрузите иконку Twitter, расположите её на траве и примените стиль Внутренняя тень (Layer Style - Inner Shadow), чтобы лучше выделить голову птица на светлом фоне.
Режим – Умножение
Шаг 21
Сдвиньте птицу вправо и создайте диалоговый пузырь, в котором напишите текст, используя гранжевый шрифт. Потом к диалоговому пузырю примените стиль Внутренняя тень с такими же настройками, как и для птицы. Можете просто скопировать стиль со слоя с птицей.
Сдвиньте птицу вправо и создайте диалоговый пузырь, в котором напишите текст, используя гранжевый шрифт. Потом к диалоговому пузырю примените стиль Внутренняя тень с такими же настройками, как и для птицы. Можете просто скопировать стиль со слоя с птицей.
Шаг 22
Создайте новую группу слоёв под слоями с птицей. Назовите её “rss area”. В новом слое вставьте иконку RSS, поднимите её немного над верхней границей холста, чтобы создать иллюзию того, что она опускается сверху, и затем поверните её в режиме Поворота (Transform – Rotate). Примените к иконке стиль Отбрасывание тени (Layer Style - Drop Shadow):
Режим – Умножение
Создайте новую группу слоёв под слоями с птицей. Назовите её “rss area”. В новом слое вставьте иконку RSS, поднимите её немного над верхней границей холста, чтобы создать иллюзию того, что она опускается сверху, и затем поверните её в режиме Поворота (Transform – Rotate). Примените к иконке стиль Отбрасывание тени (Layer Style - Drop Shadow):
Режим – Умножение
Шаг 23
Теперь под иконкой вставьте изображение ободранного картона и установите Режим наложения – Умножение (Blending Mode – Multiply), поверните картон, как показано ниже, и напишите текст гранжевым шрифтом логотипа.
Теперь под иконкой вставьте изображение ободранного картона и установите Режим наложения – Умножение (Blending Mode – Multiply), поверните картон, как показано ниже, и напишите текст гранжевым шрифтом логотипа.
Шаг 24
Создайте новую группу слоёв “blog post 1”. Добавьте контент на белую область. Используйте четкий большой шрифт (я использовал “Georgia”). Вы можете вставить что угодно в качестве контента, так как цель урока – это подготовка области для него.
Чтобы создать гранжевую линию, разделяющую новости, используйте ту же технику, что и при создании границ. Просто нарисуйте чёрную линию и подотрите её ластиком.
Причина, по которой мы создали группу слоёв для всех элементов контента, в том, что эту группу можно скопировать и заполнить всю область.
Создайте новую группу слоёв “blog post 1”. Добавьте контент на белую область. Используйте четкий большой шрифт (я использовал “Georgia”). Вы можете вставить что угодно в качестве контента, так как цель урока – это подготовка области для него.
Чтобы создать гранжевую линию, разделяющую новости, используйте ту же технику, что и при создании границ. Просто нарисуйте чёрную линию и подотрите её ластиком.
Причина, по которой мы создали группу слоёв для всех элементов контента, в том, что эту группу можно скопировать и заполнить всю область.
Шаг 25
Вернитесь к группе фоновых слоёв. Сделайте копию слоя с коричневой полоской и расположите её под белой областью контента. В режиме Масштабирования (Transform – Scale) измените размер слоя, чтобы он был в ширину белой области. Нужно уменьшить насыщенность этой нижней полоски. Для этого подотрите её ластиком с 50% непрозрачностью, как мы делали это ранее. Также создайте гранжевые границы:
Вернитесь к группе фоновых слоёв. Сделайте копию слоя с коричневой полоской и расположите её под белой областью контента. В режиме Масштабирования (Transform – Scale) измените размер слоя, чтобы он был в ширину белой области. Нужно уменьшить насыщенность этой нижней полоски. Для этого подотрите её ластиком с 50% непрозрачностью, как мы делали это ранее. Также создайте гранжевые границы:
Шаг 26
Создайте новую группу “footer”. Заполните её текстом, потом выделите небольшую область в самом низу и перейдите в меню Яркость/Контрастность (Brightness/Contrast), введите значение Яркости: -40.
Создайте новую группу “footer”. Заполните её текстом, потом выделите небольшую область в самом низу и перейдите в меню Яркость/Контрастность (Brightness/Contrast), введите значение Яркости: -40.
Шаг 27
Теперь нужно вытащить правую колонку вперёд. Для этого создайте новую группу слоёв между боковой панелью и стейлером (нижней полоской), назовите её “main area shadow”. Создайте длинное вертикальное прямоугольное выделение шириной в 5 пикселей на границе двух областей и залейте его чёрным цветом. Установите Непрозрачность (Opacity) слоя – 10%.
Теперь нужно вытащить правую колонку вперёд. Для этого создайте новую группу слоёв между боковой панелью и стейлером (нижней полоской), назовите её “main area shadow”. Создайте длинное вертикальное прямоугольное выделение шириной в 5 пикселей на границе двух областей и залейте его чёрным цветом. Установите Непрозрачность (Opacity) слоя – 10%.
Шаг 28
В конце я добавил простой значок в правом нижнем углу, чтобы заполнить пустую область.
В конце я добавил простой значок в правом нижнем углу, чтобы заполнить пустую область.
Ссылка на источник урока
Создан: 31 января 2010