Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

208 686 чел. 399 983 работы 4 093 урока
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Сложная

Создай акварельный дизайн для сайта в Фотошоп

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

В этом уроке Вы узнаете как использовать "Архивную художественную кисть", создать неповторимый образ фона хедера и многое другое. Давайте начнем!

Вот, что мы будем создавать:


(нажмите на изображение, чтобы увеличить)

Материалы для урока:

960 Grid System

Текстура бумаги

Пейзаж

Кисти акварель

Кисточка

Иконки

Icon Pack

Архив

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

Данный шаблон будет у нас фиксированной ширины с выравниванием элементов по центру. Давайте начнем проектирование!

Шаг 1 - Настройка шаблона
Скачайте PSD шаблон от  960 Grid System (Это не является обязательным, вы можете создать документ шириной в 960px и просто нарисуйте несколько направляющих), откройте шаблон, создайте новую группу и поместите туда все слои. После Вам необходимо увеличить ширину изображения, чтобы увидеть, как ваш проект выглядит на более широких разрешениях, для этого перейдите в "Изображение> Размер холста" и увеличьте значение ширины до 1420 пикселей.

Шаг 2 - Редактирование текстуры
Найдите текстуру бумаги, или возьмите из архивау. Это изображение будет фоном страницы, но оно нуждается в небольшом редактировании. Скопируйте текстуру бумаги и вставьте в новый документ.
Затем перейдите на Filter> Other> Offset (Фильтр>Другое>Сдвиг) и сдвиньте изображение так, чтобы его границы были по центру.  Далее используя инструмент Clone Tool (Инструмент "Штамп") уберите границу. После того как вы закончили клонирование, выделите всё (Ctrl + A) и копию отредактированного изображения вставьте в наш шаблон.

Шаг 3 - Настройка Фона
Используя инструмент "Free Transform" (Свободное трансформирование) трансформируйте слой так, чтобы он покрывал примерно половину шаблона. После того как вы разместите первый слой с бумагой дублируйте его и поместите его возле первого слоя, таким образом вы будете покрывать фактически 960px области. Затем дублируйте эти слои дважды, чтобы разместить их слева и справа от границы ,чтобы покрыть всю поверхность холста, а затем объедините эти 4 слоя , затем дублируйте их по вертикали и разместите их ниже существующих, делайте это столько раз, сколько необходимо, пока не покроете все полотно. Наконец создайте группу "Фон" и поместите туда все слои текстуры.

Шаг 4 - Фон для хедера
Теперь давайте добавим фон для хедера. Для этого я использую образ горного пейзажа. Используя Marquee Tool (Инструмент "Выделение") выделите широкую часть изображения и вставьте её в основной документ и назовите слой что-то вроде "Пейзаж". Теперь сделаем изображение более похожим на картину чем на фотографию.
Дублируйте слой и нажмите Ctrl + I чтобы инвертировать цвета, затем перейдите в панель Цветовой тон/Насыщенность (Ctrl + U) и уменьшите Насыщенность до -100, затем измените его режим смешивания на Overlay. Наконец объедините оба слоя "Пейзаж" и "Пейзаж копию" в один.

Шаг 5 - Используем Архивную художественную кисть
Теперь мы будем использовать "Архивная художественная кисть" чтобы наше изображение выглядело как настоящая картина, выберите Архивная художественная кисть (Y) в Панели инструментов. Чтобы сделать это изображение особенным,  первое, что вам нужно сделать, это  моментальный снимок работы. Для этого перейдите в Window>History (Окно>История) для просмотра истории группы, и нажмите на кнопку "Новый снимок" внизу. Затем в панели Options, выберите кисть (я использую 36px Chalk tip) установите "Режим: Нормальный", а "Непрозрачность:25%" , "Стиль: Tight Short", Размер: 25px и Tolerance: 0%. Теперь легкими мазками превратите простое изображение в картину. После поиграйте с настройками и обработайте края изображения, чтобы закрасить границу.

Шаг 6 - Акварельная маска слоя
Создайте Маску слоя для слоя "Пейзаж", сейчас мы постраемся сделать так, чтобы изображение лучше сливалось с фоном. Для этого используем некоторые акварельные кисти. Я использую акварельные кисти.
Скачайте этот набор кистей, так как мы будем использовать их в течение всего процесса. Возьмите любую кисть, установите цвет переднего плана черный и кликните несколько раз. Эти кисти имеют различные помутнения, так что вы можете поиграть с ними, в случае если вы используете другие кисти вы должны изменить непрозрачность кисти и значение расхода каждый раз когда вы рисуете. Попробуйте разместить акварельные пятна по всей границе и в некоторых местах внутри изображения.

Шаг 7 - Добавление градиента
Для того, чтобы кодирование было немного труднее (шутка) мы добавим вертикальный градиент (# 96AFCE - # FFFFFF). Режим для слоя с градиентом Linear Burn (линейный затемнитель).

Шаг 8 - Контент
Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами)(U), радиус  - 15px, нарисуйте прямоугольник начиная со второй направляющей слева и заканчивая предпоследней направляющей с права. Fill (Заливка) уменьшите до 35% и добавьте этому слою Обводку 1px (# FFFFFF) "Положение: Внутри". Вы можете назвать этот слой "Контент".

Шаг 9 - Дорабатываем блок контент
Дублируйте слой "Контент" и поместите копию над ним. Установите Fill до 100% и скройте обводку. Теперь добавьте маску слоя и залейте его Линейным градиент (#000000 - #FFFFFF).

Шаг 10 - Навигация
Используя Rounded Rectangle Tool (Прямоугольник со скругленными углами)(U), добавьте синий (# 3F5060) прямоугольник в верхней части шаблона, установите его значение Fill 50% и добавьте стиль слоя к нему Обводка 1px синий (# 3F5060). Возьмите инструмент Текст ,шрифт "Futura Std" (но вы можете изменить его).

Шаг 11. Далее растрируйте слой "Контент" или преобразуйте его в смарт-объект, добавьте маску слоя к нему и, используя, мягкую черную кисть скройте верхнюю часть блока как показано на картинке.

Шаг 12 - Логотип
Давайте добавим логотип сайта. Я использовал шрифт "Futura Std", цвета: # F2F6FC и # E1EDFF. Теперь возьмите любую кисть из набора (который мы скачали ранее), цвет(# 112C37)  и кликните один раз на новом слое, поместите этот слой под слой с логотипом и изменить его режим смешивания на Soft Light (Мягкий свет). Создайте новую группу "Лого" и поместите туда эти два слоя.

Шаг 13. В целях увеличения визуального воздействия фона, добавьте больше акварельных мазков разных цветов, разместите их по всей верхней границы как раз над слоем "Пейзаж". Затем измените его режим смешивания на Overlay (Перекрытие). Наконец добавьте большое голубое небо (# 51D3D3) на новом слое любой кистью нарисуйте небо как на картинке ниже, и разместите данный слой прямо над слоем "Пейзаж" и ниже слоя "Контент" Затем измените режим смешивания на Overlay (Перекрытие).

Шаг 14 - Добавляем кисть
Использование реальных жизненных объектов в веб-дизайне очень модно, мы добавим реальное изображение кисти к нашему проекту. Откройте изображение извлеките часть кисти и вставьте его в шаблон.

Шаг 15 - Добавляем реалистичную тень
Дублируйте слой "кисть", назовите копию "Тень" и разместите его под оригиналом, а затем перейдите в панель Hue / Saturation (Цветовой тон/Насыщенность) и измените его Насыщенность до -100. Теперь перейдем в Filter>Blur>Gaussian Blur (Фильтр>Размытие>Размытие по Гауссу) радиус 4px, далее измените его непрозрачность до 50%.

Шаг 16. Осветление и Затемнение

Я всегда использую инструменты Dodge (Осветление) и Burn (Затемнение) после извлечения и добавления тени.

Шаг 17 - Блок "о нас"
Добавляйте текст, я использовал шрифт Futura Std для заголовков и Tahoma (11px, Резкость: Нет) для основного текста, и серая линия, как разделитель (используйте инструмент Линия , чтобы сделать это). Давайте добавим поле для краткого текста. Нарисуйте Прямоугольник со скругленными углами, радиус 15px и заполните его зеленым цветом (# 434726), а затем применить стиль Stroke (Обводка) с тем же цветом и измените его значение Fill (Заливка) до 50%. Далее преобразуйте слой в смарт-объект и добавьте маску слоя к нему. Используйте большую, черные, мягкую кисть чтобы скрыть некоторые части фона, как в шаге 11. Наконец, вы можете добавить дополнительные детали, например, акварельный знак под текстовым слоем с "О нас", как показано на картинке ниже.

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

Шаг 19 - Главный Ajax Баннер
Часто бывает необходимо показывать более одной части информации на сайте, поэтому мы будем создавать Ajax слайдер. Добавим большое изображение как активный баннер разместим его около восьми колонн направляющих шаблона.

Ниже в четыре-пять квадратных миниатюр остальные баннеры. Наконец добавьте синий (# 5D8CB6) треугольник (вы можете сделать это с помощью Polygon Tool (Инструмент "Многоугольник")), который указывает на активный баннер.

Совет: Используйте реальные фотографии а не только наполнители изображения.

Шаг 20 - Баннерный текст
Некоторые существующие библиотеки включают опцию добавления какого-нибудь текста на баннере, в этом случае я буду использовать шрифты Futura Std для заголовков и Tahoma 11px для содержания. Используйте белый прямоугольник, Fill (Заливка) 50% и 1px белой обводки в качестве фона.

Шаг 21 - Фон Сайдбара
И так, самую трудную часть процесса мы уже закончили, но есть еще некоторые важные области слева, такие как боковая панель. Мы начнем с простого фона, используя Прямоугольник со скругленными углами (радиус 5 пикселей) нарисуйте белый прямоугольник. Измените Заливку слоя до 25% и добавьте Обводку 1px (#FFFFFF).

Шаг 22 - Фон Сообщений
Добавьте несколько акварельных знаков в новый слой, выше фонового содержания. Любого подходящего к фону цвета.

Шаг 23 - Сообщения
Теперь мы добавим одно сообщение. Используйте шрифты Futura Std для заголовков и Tahoma для краткого описания и 1px в высоту строки как разделитель. После на новом слое нарисуйте один синий знак используя акварельную кисть для фона комментария,"Количество комментариев" напишите используя Futura и слово "комментарии" с Tahoma.

Шаг 24 - RSS иконка
Пришло время добавить содержимое в боковой панели, и мы начнем с помощью кнопки RSS. Загрузите иконки. Откройте значок RSS, скопируйте и вставьте его в макет, добавьте RSS соответствующий текст: электронная почта, форма подписки, количество читателей и 1px высоту строки как разделитель.

Шаг 25 - Поиск
Добавьте акварельный мазки в качестве фона. Над фоном нарисуйте прямоугольник с закругленными углами (радиус 5 пикселей), цвет: # 1D1D1D. Добавить Обводку 1px (#FFFFFF), значение Fill (Заливка) уменьшите до 50%. С помощью инструмента Текст и шрифта Tahoma напишите слово "поиск". Наконец загрузите этот Icon Pack и вставьте значок лупы как кнопку поиска. Положите все это в группу под названием "Поиск" или что-то вроде этого и перейти к следующему шагу.

Шаг 26 - Объявления
Стандартный формат для креативной рекламы составляет 125 на 125 пикселей, поэтому мы добавим несколько блоков, на боковой панели. Совет: Чтобы сэкономить время, можно создать документ 125 на 125 пикселей с приятным дизайном заполнителя рекламы, а затем преобразовать его в смарт-объект и сохранять его где-то. Вы можете использовать его для многих конструкций без необходимости редизайна его каждый раз. Если у вас есть достаточно времени, вот список с большинством стандартных размеров объявлений (через объявление смысле Google). Рассмотрим работу над PSD с некоторыми заполнителей для них?

Шаг 27 - Twitter
Как большой поклонник Twitter, я решил поставить заметную ссылку чуть ниже объявлений. Добавьте немного акварельного фона, копировать / вставить значок Twitter из библиотеки (обсуждалось в Шаге 24). Введите текст,"Follow Us" или что-то на подобии этого. Положите все эти слои в группу под названием "Twitter".

Шаг 28 - Вкладки на боковой панели
Используя прямоугольник с закругленными углами , нарисуйте белый прямоугольник с 1px серой (# 979797) Обводкой, чуть ниже блока "Twitter". Теперь нарисуйте три меньших прямоугольников за ними, они будут вкладки. Нарисуйте маленький белый прямоугольник между одной из вкладок и фон для активной вкладки.

Шаг 29 - Добавляем текст на вкладках
Добавьте названия вкладок, я использовал шрифт Futura. За содержание я добавлю пару Последних сообщений на первой вкладке.

Шаг 30 - Футер
Этот футер будет очень простой, мы просто нарисуем несколько случайных акварельных знаков разных цветов, затем повторим процесс шагов 8 - 9, сделаем пару скругленных прямоугольников. Наконец, пора добавить текст футера, небольшой бар навигации и информация об авторских правах подходит совершенных там, к тому же я добавил 1px линию как разделитель. Вы же можете разработать футер, какой хотите.

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

Автор: Alvaro Guzman

Комментарии 112

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

Получилось совсем что-то другое. Кисти рисуют не так как показано в уроке.

Что то не спалось, решила попробовать..
Вот как то так..

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

Спасибо за урок! Было очень интересно работать над ним.

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

Сложный и очень интересный урок. Мне понравилось, что автор не углубляется в детали, а дает лишь краткое описание, хотя порой приходится голову над некоторыми вещами поломать.

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

Спасибо за хороший урок, 2 дня делал!!!

Очень креативный урок, несложный, но при этом получается красивый результат! Спасибо огромное за перевод. За пару дней с уроком справилась.

Сложный урок, 2 дня работы, результат самому понравился.
Много упущено - тень у кисти как сделать сказано не полностью, как сделать активную ссылку в верхнем меню и пр.
Половину урока приходиться додумывать и самостоятельно творить.

спасибо, интересный урок.

Очень понравился урок.

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

Огромное спасибо за урок! Для меня, как для новичка, сложный конечно, но познавательный.И идея меня завела скорее на рисунок пастелью или карандашами. Я в восторге от того, сколько нового узнала из урока!

Спасибо, урок отличный!!!

Благодарю! Классная тема, помучился, но разобрался.СПАСИБО!

Извините, текст на португальском =)

длинный урок! Но оч понравился! 11 у меня тоже не получался )

Интересный и кропотливый урок,но результат удивил!

Интерестный и полезный урок

Спасибо!Отличный дизайн.

Еще 30
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules