Градиенты: Красивые CSS и PNG градиенты для сайта, инстаграм и фотошопа — Gradients.app

Модные градиенты в веб-дизайне

Мы собираемся проанализировать текущие тенденции диджитал-дизайна. В первую очередь — это градиенты, одна из наиболее обсуждаемых тем по результатам нашего исследования тенденций, проведенного благодаря сотрудничеству пользователей Awwwards и жюри. Ознакомьтесь с полным перечнем результатов опроса в нашей книге прямо СЕЙЧАС. Современный ландшафт для цифровых мыслителей.

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

Spotify micro site 2015, двухтоновое изображение с градиентными картами.

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

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

Многоцветные градиенты на главном экране, iPhone X

Градиенты в 3D? Цвет вершин и стиль цветовой карты

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

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

3D Gradient Mapping

Типы градиентов

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

Полезные инструменты для CSS градиентов

Для воссоздания этих эффектов в CSS доступно множество инструментов, которые позволяют создавать их с помощью визуальных редакторов, просто копируя и вставляя код CSS: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

Скачайте исходный файл с градиентами!

Начните работать с градиентами, скачайте исходный файл бесплатно в векторном формате .ai или pdf, чтобы самостоятельно поэкспериментировать с градиентами.

Скачать тут!

Коллекция градиентов от Awwwards

Как всегда, мы создали подборку сайтов дня и номинантов, в которой вы можете увидеть все эти эффекты в использовании. Мы надеемся, что вы найдете вдохновение в коллекциях Awwwards или в нашей книге СЕЙЧАС. Современный пейзаж для цифровых мыслителей, в котором обсуждаются основные тенденции года в веб-дизайне.

Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.

Модные градиенты в веб-дизайне / Все о дизайне / Pollskill

Проанализируем одну из тенденций цифрового дизайна, которая сейчас так популярна — градиент.

Градиенты были модны некоторое время назад. Сайт Spotify снова сделал их популярными, использовав градиенты duotone на фотографиях как характерный элемент бренда.  Небольшой урок, как создавать градиенты duotone в Photoshop.

Градиенты duotone на фотографиях 

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

Градиент hover эффект

Тег video не поддерживается вашим браузером.

Ruya Digital Gradients in Hover and Transitions In Transitions

IPhone X задал парадигму тенденций на 2018. На главной странице, в текстах и многих элементах рекламной кампании используются  градиенты. Однако они не похожи на традиционные линейные или радиальные градиенты, они многоцветны и цвета их смешаны неравномерно.

Многоцветные градиенты на странице IPhone X 

Градиенты в 3D? Цвета вершин и палитра цветов.

Нельзя не упоминуть про градиенты в 3D, поскольку освещение сцены генерирует градацию света на поверхности объекта. Для этого тренда характерно использование градиентов как текстуры объекта, когда имитируется методы вершиннный цвет (vertex color) и палитра цветов (colormap gradient). Оба метода служат для чисто декоративной цели, поскольку они используются для представления данных или отображения трехмерных объектов.

3D палитра цветов 

Типы градиентов

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

Слева-направа: Градиентная сетка, радиальные уровни, размытие, пейзаж, нерегулярное смешивание, градиент с перепадами, 3d-палитра, двухцветный, триколор, ретро стиль, многоцветный, силуэт. 

Полезные инструменты для CSS-градиентов

Существую множество доступных инструментов с помощью которых можно создать градиенты в визуальных редакторах и затем воссоздать эти эффекты в CSS: Webgradients https://webgradients.com ,  Khroma AI http://khroma.co , Color Space  https://mycolor.space, UI Gradients https://uigradients.com , Grabient https://www.grabient.com , Coolhue https://webkul.github.io/coolhue/ , Easing Gradients CSS https://larsenwork.com/easing-gradients/  .

  

Коллекция градиентов Awwwards

 

Тег video не поддерживается вашим браузером. перевод статьи

CSS градиенты для веб дизайна. Подборка сервисов

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

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

Поэтому я сделала для вас подборку из 7 бесплатных инструментов для создания CSS градиентов.

И так, поехали!

WebGradients

Перейти на сайт

На WebGradients вы найдете целую коллекцию готовых градиентов разных цветов и стилей.

Все они заранее подготовлены и готовы к работе. Воспринимайте этот сайт, как библиотеку градиентов, которая содержит более 180 вариантов.

Если вы обратите внимание на верхнюю навигацию сайта, то там вы найдете ссылки для загрузки этих градиентов как в PSD, так и в файле Sketch.

Вы также можете скопировать градиенты как код CSS3, а затем добавить его прямо на сайт. Здесь нет неправильных ответов — здесь просто много градиентов.

uiGradients

Перейти на сайт

Обратите внимание на библиотеку uiGradients для создания интересных вариантов css градиентов.

В верхней навигации (слева) вы увидите кнопку с надписью «Show all gradients» (показать все градиенты). Нажмите на нее, чтобы просмотреть огромный список различных стилей градиента. Серьезно, их там очень много.

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

CSS аниматор градиентов

Перейти на сайт

Итак, градиентная анимация. Сервис Gradient Animator — идеальный способ воплотить это в реальность. Все может работать прямо через CSS3 без необходимости использовать JavaScript.

На боковой панели нажмите «Add colour» (добавить цвет) и выберите поочередно два цвета вашего градиента. Измените скорость перехода, измените направление, затем нажмите «Preview»(предварительный просмотр).

Уверена, что вы оцените преимущество этого онлайн сервиса.

Редактор градиента Colorzilla

Перейти на сайт

Каждый веб-дизайнер должен знать о редакторе градиента Colorzilla.

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

Действительно, этот инструмент, который вы должны добавить в закладки. И естественно, там уже есть заранее построенные градиенты.

ColorSpace градиенты

Перейти на сайт

Кроме того, что ColorSpace отлично подбирает цветовые схемы, он еще имеет свой небольшой генератор градиентов, который позволяет разработчикам создавать пользовательские CSS коды из выбранных цветов.

У этого сервиса градиентов, более простой интерфейс, чем у Colorzilla.  Элементы управления довольно очевидны. Единственный минус в том, что на ColorSpace можно выбрать только два цвета за раз.

На Colorzilla вы можете составить градиент из нескольких цветов. Но это не означает, что ColorSpace хуже. Это значит, что его лучше всего использовать для простых градиентов.

Бесконечные градиенты

Перейти на сайт

Да, это именно то, на что похоже. Бесконечный градиент.

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

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

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

Градиентные кнопки

Перейти на сайт

И напоследок, кнопочки.

Бесплатная библиотека с открытым исходным кодом, наполненная различными дизайнами кнопок.

Библиотека проста в использовании и имеет множество градиентов на выбор.

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

Заключение

В 2018 году градиенты все еще в тренде. Оставляйте комментарии, была ли эта подборка для вас полезна и что вы думаете по поводу использования градиентов в веб-дизайне.

Стоит ли мне продолжать выкладывать подобные подборки?

Не забудьте добавить сайт в закладки. Здесь будет много всего полезного для веб-дизайнеров и фрилансеров.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Трендовые градиенты в веб-дизайне — CloudMakers

Трендовые градиенты в веб-дизайне быстро завоевали свою популярность, во многом благодаря последней презентации Apple, где этот этот яркий элемент стал основой фирменного цвета флагмана Iphone X. Мы подготовили обзор с примерами использования этого модного элемента графического дизайна.

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

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

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

Трендовые градиенты в веб-дизайне — применение 3D графики

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

Типы градиентов

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

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

Полезные инструменты для генерации CSS градиентов

Стандарт CSS3 и возможности современных браузеров позволяют реализовать градиенты кодом избегая тяжелых графических фрагментов. Так на сегодняшний момент воссоздать эти эффекты в CSS, поможет множество доступных инструментов, генерирующих код: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients в CSS.

Коллекция вдохновляющих примеров использования градиентов

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

По материалам awwwards.com

 

Градиенты В Веб-Дизайне И Вариации Создания В Photoshop / WAYUP

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

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

Градиент, как эффект, невероятен по своим возможностям. Являясь постепенным смешиванием от одного цвета к другому, он позволяет веб-дизайнерам создать практически новый цвет и тон.  Это приводит к тому, что объекты выделяются, обретают реализм и новое измерение в дизайне. Проще говоря, градиенты добавляют глубины в визуальную композицию дизайна.

С другой стороны, постепенное смешивание с белым или черным цветом (а также игра с непрозрачностью) может имитировать собой расстояние от источника света. Градиенты – часть реального мира, поскольку наш с вами мир не состоит из плоских и однотонных цветов. Посмотрите вокруг, везде можно увидеть переходы одного цвета к другому.

Важность градиентов для дизайнера

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

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

Если говорить о правилах работы с градиентами, то выделим:

• Не переусердствовать. Лучшие и приятные для восприятия глаза градиенты создаются из двух или трех цветов, но не более.
• Избегать противоречивых оттенков. Множественные ресурсы по подбору цветов могут помочь вам подобрать аналогичные, монохромные, цветовые схемы, триадические, дополняемые, сложные, теневые.
• Помнить об источнике света. Градиенты всегда переходят от темного цвета к светлому, но если расположение их не будет совпадать с источником цвета всей композиции, на холсте получится «белиберда».
• Вдохновение. Чтобы найти и подобрать подходящие цвета, нужно не только иметь круг цветов, но и представлять, что же хочется получить на выходе. Ресурс uigradients поможет увидеть многообразие готовых градиентов и поможет подобрать нужный к вашему цвету.

• Линейный градиент подходит для квадратных объектов или многоугольных.
• Радиальный градиент – для круглых объектов.
• Используйте разные формы/слои для заливки и для градиентов. Затем играя с прозрачностью этих объектов/слоев можно добиться потрясающих эффектов.

Примеры градиентов со всего мира

Сайтов, где используются градиенты много. И найти их на том же Awwwards или Cssdesignawards несложно. Но мы отобрали самые, по нашему скромному мнению, красивые и интересные. Это stripe, madebysource, owltastic, onejohnst (градиент дополнительно анимируется во время прокрутки станицы), lewislopez (анимация градиента, и на каждой станицы разные сочетания), comment, viens-la, Julie Bonnemoy — Portfolio, seeanoli, KIKK Festival 2017 (сказочно красиво с анимацией), HEEDS.

Как можно видеть, градиенты используются и в качестве тонирующего слоя, в качестве фона, в качестве части композиции, в качестве разделителя между секциями и разделами на странице.

Ресурсы подбора градиентов

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

Freepik – представляет огромную базу по градиентам, причем, как наборам, так и отдельным изображениям-фонам.

Набор Apple Gradients – подборка основных цветовых переходов, что используются в iOS и OS X.

Ocean Breeze Ps Gradients – набор океанских цветовых схем. А архиве найдутся фалы png с предпросмотром всех градиентов и grd, в составе которого 140 цветовых переходов.

JJ’s Gradients-1 Skin Tones – подборка из 126 градиентов телесных оттенков. Достаточно занятная подборка, поскольку, с одной стороны – пастельные тона, с другой – необходимые для тех, кто создает «мягкие» композиции.

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

Grabient – ресурс не только с набором готовых градиентов, но и с возможностью их изменить: выбрать угол направления перехода, расстояние между цветами, добавить новый цвет. Причем данные градиенты копируются в CSS код, благодаря которому можно увидеть шестнадцатеричные кода цветов и их процентовку. Затем достаточно вручную выставить данные параметры в Photoshop и градиент готов.

Возможности Photoshop

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

Вариант 1

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

После этого мы не стали увеличивать сам холст и переносить горы, как объект, на отдельный слой, а уменьшили исходное изображение. Для нашего варианта сейчас это особо важной роли не играет. Обратили выделение (ПКМ по нему), Свободное трансформирование (Ctrl+T) и с зажатой клавишей Shift уменьшили и расположили чуть выше от нижнего края, но посередине.

Теперь создадим белый слой под нашим изображением и добавляем к нему корректирующий слой Градиент.

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

 

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

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

К слою Горы применяем тоже слой Градиент, но теперь выбираем коричнево-зеленые оттенки (в нашем случае) и линейный тип. Обратите внимание, что если нижние ползунки регулируют расстояние между цветами, то верхние интенсивность. Также снизьте параметры Непрозрачности и Заливки у градиента, иначе рисунок виден не будет. С помощью него мы подчеркнули зелень холмов, падение света и игру света-тени в целом.

Создадим текстовой слой с текстом. Если его просто расположить над слоем Горы (с градиентом), то он будет скучным и неказистым. Если над фоновым градиентом, то текст окрасится в градиент Гор. Ни одно, ни другое нам категорически не подходит.

 Поэтому мы просто перемещаем слой с текстом поверх всего изображения, растрируем его (ПКМ по слою на панели слоев и пункт меню Растрировать слой). Затем применяет самый обычный линейный градиент от черного к прозрачному. Разумеется, что шрифт может быть другой, размер его и начертание тоже. Мы выбрали такой вот обычный только для примера. Не забывайте экспериментировать с непрозрачностью слоев и Заливкой. Поскольку мы играем со светотенью и пастелью, четкости и явности лучше избегать.

 

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

 

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

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

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

Вариант 2

Но поскольку градиенты способны не только 2D-изображение изменить, но и 3D, то возникает резонный вопрос: «Как?». Мы ранее рассказывали о том, как Photoshop способен превращать обычное плоское изображение в трехмерное. Но давайте на секунду представим, что нужно сделать так, чтобы цвет однотонный переливался (то есть, наложить градиент), а объект должен собой представлять нечто … странное. Более того, как известно, для работы в режиме 3D нужен неслабый компьютер, но, что если и нет? Если не нужен?  Представьте, что трехмерный объект мы создадим с помощью одной только кисточки.

Создадим новый документ, применим к нему корректирующий слой Цвет  и выберем какой-нибудь темненький оттенок для заливки. Фон может быть и светлым, но должен очень сильно контрастировать с цветом объекта. Мы выбрали темно-синий. Фоновый слой удаляем и оставляет только Заливку.

 

Создадим новый слой, выберем инструмент Овальное выделение и с помощью зажатой клавиши Shift нарисуем правильную окружность. Помните, что сначала вы отпускаете кнопку мышки, а только потом кнопку Shift.

Выделение не снимаем! Переходим к инкременту Заливка — > Градиент и на верхней панели дважды кликаем по нему.  Выбираем обычный градиент или создаем из яркого насыщенного цвета и светлого (монохромные). У нас ярко розовый и темно-розовый.  И проводим сверху вниз по нашему кругу. Тип – линейный.

 

Снимаем выделение Ctrl+D и добавляем новый слой.

Теперь подготовим кисточку. Выбираем инструмент Кисть -> Микс-кисть и смотрим на панель управления вверху. Выбираем «Сухая, много краски», влажность 0, Нажим 100%. И обязательно снимаем галочку со Всех слоев, в противном случае кисточка будет синей, а не розовой.

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

Устанавливаем размер кисти приблизительно как наш круг (+- небольшой), зажимаем Alt и кликаем по кружочку. Мы увидим на панели, что кисточка считала наш круг на прозрачном фоне.  

Добавляем новый чистый слой и… рисуем этой кистью. Поскольку рисовать с плавными изгибами не все могут, то можно использовать Перо, а затем обвести контур с Имитацией нажима и выбрав в качестве источника Микс-кисть.

 

Затем можно изменить цвет готовых элементов, добавив корректирующие слои.

Таким нехитрым вариантом мы создали объемные фигурки, которые можно выложить самым замысловатым образом. Аналогично можно использовать готовые фигуры (инструмент Произвольная фигура), но на панели вверху выбрать рисование не самой фигуры, а только контура с тем, чтобы его можно было обвести.

 

Выводы

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

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

Придайте градиент обычному однотонному фону и получите объем, а пользователю захочется иногда заглянуть за край монитора: «вдруг там еще что-то есть».

Роль градиентов огромна и их использование в Photoshop также почти безгранично. А значит, создавать уникальные проекты веб-дизайнерам чуть проще, ибо каждый градиент в отдельности уже представляет собой что-то новое.

использование градиентов для смешения цветов

Применение цвета при разработке логотипа — задача гораздо более сложная, чем просто выбор «моего любимого цвета». Цвета, и что более важно, цветовые комбинации могут влиять на дизайн логотипа и не только на техническом уровне. К примеру, эмоциональные реакции на определенные цвета могут находиться в диапазоне между любовью и яростью (красный), теплом и холодом (синий) и т.д. в зависимости от контекста, — все эти реакции были описаны в научных исследованиях. Некоторые цвета способны вызывать у людей чувство реального голода.

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

 

Дизайн логотипа с плавным градиентом от светло-зеленого до синего.

Что такое градиентная заливка?

Градиентная заливка или заливка с плавным переходом цветов – это, по сути, постепенное переход между двумя цветами, создающий эффект от светлого к темному, интенсивность которого зависит от базовых цветов. Самый простой пример – от черного к белому. Черный – 100%, а белый 0%, поэтому потенциально мы имеем 100 «ступенек» между ними. Кажется, все достаточно просто, не так ли? Но не будем спешить.

Дизайнерский макет можно воспроизвести достаточно большим количеством способов. Тип носителя, на который наносится дизайн, размеры, будет ли это шелкография, офсетная печать или цифровая публикация… все факторы должны быть приняты во внимание. Логотип хорошо выглядит на визитной карточке, но он будет ли он работать на рекламном щите? Будет ли он работать в стандартном газетном модуле и при этом адекватно воспроизводиться на экране телевизора?

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

Бандинг

Когда речь идет о какой-либо традиционной печати, «ступеньки» от 0 до 100%, в лучшем случае, будут относительным понятием. На деле от 0 до 100 у нас будет только шагов 20. Это цветовой переход с шагом 5%, и это при сильно специализированной печати. Чаще всего, при увеличении градиента неизбежно происходит бандинг («полосатость»). И наоборот, когда градиент уменьшается, он часто становятся размытым или мутным.

Бандинг может быть намеренно включен в дизайн, и обычно это реализуется так, чтобы в цветовом переходе использовались смесевые цвета. Например, красная полоса, оранжевая полоса, золотая полоса; или максимум десять шагов по 10% каждый, где значение каждого шага фактически является частью дизайна. Стандартом в определении цвета для печати является система цветов Pantone Color Matching System, и каждый из десяти шагов на самом деле соответствует определенному номеру цвета Pantone, что делает каждый шаг самостоятельным цветом, который может быть точно воспроизведен.

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

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

Как гарантировать, что ваши цвета и градиенты будут выглядеть хорошо

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

8. Градиенты

Рисунок 4.18. Несколько примеров градиентов в GIMP

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

Рисование градиентом

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

Фильтр «Отображение градиента»

этот фильтр находится в меню цветов и позволяет вам «сделать цветным» чёрно-белое изображение, заменяя каждый оттенок серого соответствующим цветом из активного градиента. Так, для оттенка 0 (самый тёмный) выбирается цвет в левом конце градиента, для оттенка 255 — в правом конце градиента. Для дополнительной информации смотрите раздел Отображение градиента.

Когда вы устанавливаете GIMP, вместе с ним устанавливается большое количество интересных градиентов, и вы можете добавлять новые, создавая собственные или загружая из других источников. Для доступа к полному набору доступных градиентов используйте диалог Градиенты — диалог, который вы можете активировать при необходимости, или оставить рядом как закладку в панели. «Текущий градиент», используемый в большинстве операций с градиентом, отображается в области Кисть/Шаблон/Градиент панели инструментов. Щелчок по символу градиента в панели инструментов это альтернативный метод вызова диалога градиентов.

Несколько быстрых примеров работы с градиентом (за дополнительной информацией обращайтесь к инструменту Градиент):

• Класть градиент в выделение:

  1. Выбор градмента

  2. С помощью инструмента градиента нажмите и переместите курсор мышки по выделению.

  3. Цвета будут распределены по направлению, перпердикулярном направлению перемещения мышки, и по всей длине перемещения.

  Рисунок 4.19. Как быстро использовать градиент в выделении

  
  

• Использование градиента инструментом рисования:

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

  Рисунок 4.20. Как быстро использовать градиент с инструментом рисования

  
  

• Разный результат с тем же градиентом:

  Рисунок 4.21. Использование градиентов

  
  

Немного полезных вещей о градиентах в GIMP:

• Первые четыре градиента в списке особенные: вместо фиксированных цветов они используют цвета фона и переднего плана из области цвета панели инструментов. Основной в фоновый (RGB) это представление RGB градиента из цвета переднего плана в цвет фона в панели инструментов. Основной в фоновый (HSV по часовой) представление последовательности оттенка в цветном кругу от выбранного оттенка до 0°. Основной в фоновый (HSV против часовой) представление последовательности оттенка в цветном кругу от выбранного оттенка до 360°. Основной в прозрачный выделенный оттенок становится всё более и более прозрачным. Вы можете изменить эти цвета с помощью выборщика цветов. Итак, изменяя цвета переднего плана и фона, вы можете сделать эти градиенты плавно переходящими между двумя выбранными цветами.

• Градиенты могут не только изменять цвета, но и работать с прозрачностью/ Некоторые градиенты полностью непрозрачны, другие могут иметь прозрачные части. Если вы будете заполнять область или рисовать прозрачным градиентом, предыдущий рисунок будет проступать сквозь.

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

Градиенты, устанавливаемые вместе с GIMP хранятся в системной папке gradients. По умолчанию, создаваемые вами градиенты хранятся в папке gradients в вашей персональной директории GIMP. Любой файл градиента (имеющий расширение .ggr) будет автоматически загружаться при запуске GIMP. Если желаете, вы можете добавить больше директорий в поисковой путь градиентов с помощью закладки градиентов в меню настроек на странице Каталоги.

В GIMP 2.2 добавлена новая возможность загружать градиенты из файлов формата SVG, используемого многими программами векторной графики. Для того чтобы GIMP загрузил градиент в формате SVG, всё, что вам нужно сделать это просто поместить его в папку gradients в вашей персональной директории, или в любую другую папку, указанную в вашем поисковом пути градиентов.

	Подсказка
	Вы можете найти большое количество интересных градиентов в сети, в частности на странице OpenClipArt Gradients [OPENCLIPART-GRADIENT]. Вы не сможете увидеть как эти градиенты выглядят если ваш браузер не поддерживает SVG, однако это не помешает вам их скачать.

30 красивых цветовых градиентов для вашего следующего дизайн-проекта

Ищете классные фоновые градиенты для вашего пользовательского интерфейса? Компания по разработке программного обеспечения и дизайна Itmeo создала полезный онлайн-инструмент под названием WebGradients — бесплатную коллекцию из 180 линейных градиентов, которые вы можете использовать в качестве фона контента в любой части вашего веб-сайта.

Вы можете загрузить версию каждого градиента в формате .PNG и скопировать их кроссбраузерные коды CSS3. Также доступны пакеты Sketch и Photoshop. Вот некоторые из наших фаворитов из коллекции.

1. Теплое пламя

# ff9a9e → # fad0c4

2. Сочный персик

# ffecd2 → # fcb69f

3. Леди Губы

# ff9a9e → #fecfef

4. Зимняя Нева

# a1c4fd → # c2e9fb

5. Сильный дождь

# cfd9df → # e2ebf0

6. Облачно, Ноксвилл

#fdfbfb → #ebedee

7. Санкт-Петербург

# f5f7fa → # c3cfe2

8. Сливовая тарелка

# 667eea → # 764ba2

9.Вечное небо

#fdfcfb → # e2d1c3

10. Хэппи Фишер

# 89f7fe → # 66a6ff

11. Летай высоко

# 48c6ef → # 6f86d6

12. Сильное блаженство

Несколько цветов

13. Свежее молоко

# feada6 → # f5efef

14. Большой Кит

# a3bded → # 6991c7

15. Aqua Splash

# 13547a → # 80d0c7

16. Чистое зеркало

# 93a5cf → # e4efe9

17.Премиум темный

# 434343 → # 000000

18. Озеро Кочити

# 93a5cf → # e4efe9

19. Страстная кровать

# ff758c → # ff7eb3

20. Маунтин-Рок

# 868f96 → # 596164

21. Пустынный горб

# c79081 → # dfa579

22. Вечная Констанция

# 09203f → # 537895

23. Здоровая вода

# 96деда → # 50c9c3

24. Жестокая стойка

# 29323c → # 485563

25.Нега

# ee9ca7 → # ffdde1

26. Ночное небо

# 1e3c72 → # 2a5298

27. Бережный уход

# ffc3a0 → #ffafbd

28. Angel Care

Несколько цветов

29. Утренний салат

# B7F8DB → # 50A7C2

30. Глубокий рельеф

Несколько цветов

ПОДРОБНЕЕ…

Как использовать градиенты

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

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

Использование градиентов CSS — CSS: каскадные таблицы стилей

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

  .plaid-gradient {
  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0.25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0,25) 69 пикселей,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный, прозрачный 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей, rgba (255, 127, 0, 0,25) 56 пикселей,
        прозрачный 56px, прозрачный 63px,
        rgba (255, 127, 0, 0,25) 63 пикселя, rgba (255, 127, 0, 0.25) 69px,
        прозрачный 69px, прозрачный 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей, rgba (255, 206, 0, 0,25) 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей, rgba (143, 77, 63, 0,25) 10 пикселей),
      повторяющийся линейный градиент (45 градусов, прозрачный, прозрачный 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей, rgba (143, 77, 63, 0,25) 10 пикселей);

  задний план:
      повторяющийся линейный градиент (90 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0.25) 50px 56px,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс. 69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (0 градусов, прозрачный 0 50 пикселей,
        rgba (255, 127, 0, 0,25) 50 пикселей 56 пикселей,
        прозрачный 56px 63px,
        rgba (255, 127, 0, 0,25) 63 пикс. 69 пикс.,
        прозрачный 69px 116px,
        rgba (255, 206, 0, 0,25) 116 пикселей 166 пикселей),
      повторяющийся линейный градиент (-45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0.25) 5px 10px),
      повторяющийся линейный градиент (45 градусов, прозрачный 0 5 пикселей,
        rgba (143, 77, 63, 0,25) 5 пикселей 10 пикселей);
}
  

Тенденция градиентного дизайна: как это выглядит и как использовать

Многие тренды 90-х снова в моде! Укороченные топы, чокеры, даже резинки для волос (… серьезно). И есть одна тенденция, которая штурмом захватывает мир дизайна и которая в 1995 году будет чувствовать себя как дома, — это градиенты.

Несколько десятилетий назад градиенты были популярным способом добавить цвет и глубину дизайну.Они оставались довольно заметной тенденцией в дизайне до конца 2000-х, когда они уступили место плоскому дизайну. Но в 2018 году градиенты снова стали популярными, и мы видим их повсюду. Они позволяют улучшить плоский дизайн (обновление дизайна, известное как Flat 2.0), добавить цветное наложение к фотографиям и добавить текстуру к фону.

Угадайте, что? Тенденция градиента не показывает никаких признаков замедления в 2019 году.

Так как же работают градиенты? Почему они сейчас такие горячие? И как мы продолжим видеть развитие градиентов в 2019 году и далее?

Что такое градиенты?

–

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

с помощью Walker Art

Градиенты могут смешивать или переходить похожие цвета (например, разные оттенки синего или светло-оранжевого на темно-красный) или совершенно разные или контрастные цвета (например, фиолетовый и красный или синий и желтый).

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

Прекрасное фото, сделанное еще красивее с наложением розового градиента. Изображение с Creative Market. Градиентный дизайн добавляет глубины и размера плоской графике лисы. Дизайн логотипа Cross The Lime.

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

Почему сейчас в моде градиенты?

–

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

Изображение через Instagram

Когда градиенты вернулись на сцену дизайна в 2018 году, многие дизайнеры были удивлены, особенно когда к ним присоединились более крупные бренды (мы смотрим на вас, Instagram). Многие люди думали, что переход по градиентному маршруту — это слишком серьезное отступление. Ностальгия — это одно, но действительно ли люди связаны с тенденцией, которую мы наблюдали раньше?

Оказывается, людям это понравилось, особенно потому, что градиентный тренд 2018 года вовсе не старомоден.Он кажется более сложным и высококачественным (от фона до текстуры и наложений) — и менее «Спасенным звонком». В этих новых градиентах используются яркие, светящиеся цвета и интересные цветовые комбинации, благодаря которым они кажутся свежими и современными.

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

Градиентный тренд в действии

—

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

Вот несколько примеров градиентного тренда в действии:

Логотипы

Градиенты

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

Дизайн Мила Джонс Кэнн

Упаковка

Вы хотите, чтобы ваша упаковка сразу же соскочила с полок, и градиенты — лучший способ сделать это.

Ключ к использованию градиентов в качестве фонового элемента в упаковке? Убедитесь, что он соответствует вашему бренду. Если вы разрабатываете упаковку для нового продукта, ориентированного на любителей экстремальных видов спорта, вам подойдет что-нибудь смелое и смелое (например, наложение фотографий с неоновым градиентом или яркая цветовая палитра).Если вы хотите получить более мягкий и тонкий вид, скажем, для нового умывальника для лица, то, вероятно, лучше подойдет однотонный градиент или палитра, в которой используются пастельные оттенки.

Изображение через The Drum

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

Веб-дизайн

Есть масса возможностей включить градиентный тренд в ваш веб-дизайн.

Серьезно. Тонна.

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

через Асану

Приложения

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

через ClassPass

Печатные материалы

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

Дизайн CR75 ™ для Эллингтона

Как заставить градиенты работать на вас

—

Тенденция градиента сохранится до 2019 года.Итак, вопрос в том, как заставить его работать на вас?

1. Выберите правильные цвета

Самый важный аспект градиентной тенденции — это цвета, которые вы выбираете. Чтобы градиентный тренд выглядел хорошо продуманным, вам нужно выбрать цвета, имеющие одинаковый оттенок и оттенок (например, градиент, переходящий от голубого к темно-синему), или цвета, которые «работают» вместе в соответствии с к теории цвета; так, дополнительные цвета (цвета, противоположные друг другу на цветовом круге), аналогичные цвета (три цвета рядом на цветовом круге) или триадные цвета (три цвета, равномерно разнесенные на цветовом круге).

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

Дизайн: CalmSpark. Дизайн приложения

. И последнее (но не менее важное): убедитесь, что цвета, которые вы выбираете для своих градиентов, соответствуют цветам вашего существующего бренда; Если цветовая палитра вашего бренда — красный и синий, то использование градиента зеленого и неоново-желтого, вероятно, не будет выглядеть так привлекательно.

2. Используйте градиенты с умом

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

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

3. Знайте свою аудиторию

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

Знайте свою аудиторию, а затем выберите правильный градиент — цвета, то, как вы включаете их в свой дизайн, и выбираете ли вы громкий или более тихий подход.

4. Развлекайся

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

Затухание

—

В отличие от других реликвий 90-х (джинсы JNCO, кто-нибудь?), Похоже, тенденция градиента сохраняется.И теперь, когда вы понимаете все тонкости градиентов, у вас есть все необходимое, чтобы включить эту тенденцию в свои дизайны в 2019 году.

Выходи и двигайся градиентом!

От логотипов до приложений и всего остального — мы в этом!

CSS Gradients with background-blend-mode

Свойство CSS background-blend-mode позволяет смешивать фоны элемента: цвета, изображения и градиенты вместе с режимами наложения, подобными Photoshop (умножение, экран, наложение и т. Д. ).Он очень новый и на данный момент поддерживается последними выпусками Chrome, Firefox и Opera. Свойство скоро появится в Safari, но не в Internet Explorer.

CSS-градиенты уже очень эффективны при создании шаблонов, как показано в галерее CSS-шаблонов Lea Verou. С новым свойством background-blend-mode возможности снова расширяются.

CSS-градиенты

полностью не зависят от разрешения и изменяются быстрее, чем изображения.Принимая во внимание соображения производительности, анимация и переходы возможны через свойства background-size или background-position .

Обратной стороной background-blend-mode наряду со многими очень новыми свойствами CSS является добавленная работа по обеспечению красивой альтернативы для браузеров без поддержки этого свойства. К счастью, это не так уж сложно. С помощью крошечного фрагмента Javascript мы можем определить, нет ли поддержки:

  if (! ("BackgroundBlendMode" в документе.тип кузова)) {
    // Нет поддержки background-blend-mode
  var html = document.getElementsByTagName ("html") [0];
  html.className = html.className + "режим наложения без фона";
}  

В файле CSS теперь можно указать разные стили для неподдерживаемых браузеров с помощью класса .no-background-blend-mode . Есть и другие способы определения поддержки, с помощью Modernizr или даже с помощью CSS @supports . Однако вы можете столкнуться с ситуацией, когда эта дополнительная работа даже не нужна, и если оставить неподдерживаемый браузер для рендеринга градиентов CSS без background-blend-mode выглядит нормально.

Приведенные выше градиенты, скорее всего, невозможно точно воспроизвести в CSS без background-blend-mode . Однако использование градиента CSS вместо изображения не только избавляет вас от HTTP-запроса, но и становится намного меньше по размеру. Размеры градиентов CSS вычисляются без префикса, что поддерживается всеми последними браузерами.

Сделайте красивые градиенты CSS [& SVG]

Как создавать красивые маслянисто-гладкие градиенты

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

Во всем виноват RGB, цветовая система по умолчанию, используемая компьютерами. В середине «куба», образованного RGB, лежит линия серого цвета , тянущаяся от белого угла (вырезанного на иллюстрации ниже) до черного угла (нижнего угла, наиболее удаленного от зрителя).

В RGB все насыщенных, насыщенных цветов находятся в углах (в любом случае 6 из них).Центр серый.

Изображение изменено пользователем Википедии SharkD

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

Чтобы исправить это, вам нужно интерполировать иначе . (Да)

Наверное, проще всего показать вам:

Это небольшое приближение, поскольку мы сжимаем поперечное сечение куба в круг.

Чтобы получить градиент, избегающий серой мертвой зоны, вы не рисуете прямую линию от A до B, вы рисуете кривую biiiig .

К счастью, это очень просто, если мы интерполируем цветовую систему на основе оттенков 🤓. Приложения для дизайна и CSS не делают этого за вас — поэтому я создал этот инструмент!

Цветовые градиенты в HCL, HSB и HSL

В этом инструменте (в настоящее время) вы можете создавать градиенты в 3 различных цветовых системах, которые дают несколько разные результаты:

• HCL (оттенок-цветность-яркость) : выбор по умолчанию для этого инструмента, HCL — это удивительная цветовая система , которая не только создает красивые, богатые градиенты в широком диапазоне оттенков, но и делает это с плавным восприятием способ.Если бы вы просматривали градиент в оттенках серого, вы бы увидели только плавный переход от более светлого к более темному серому, предотвращая ужасные «полосы», которые вы видите в некоторых вручную подобранных градиентах. (Примечание: перцептивно однородная природа HCL также делает его отличным для цветовых палитр визуализации данных)
• HSB (оттенок-насыщенность-яркость) : Хотя восприятие не является однородным, иногда HSB предлагает более интересный (и яркий) вариант градиента между двумя остановками.В частности, если ваш градиент HCL имеет уродливый коричнево-желтый цвет, попробуйте проверить версию HSB. HSB — фантастическая цветовая система для дизайнеров, и я написал подробное руководство по HSB.
• HSL (оттенок-насыщенность-легкость) : HSB и HSL часто очень похожи, особенно в ярких градиентах. Тем не менее, иногда стоит посмотреть и то, и другое. Также обратите внимание на розовую «полосу» в градиенте HSL выше — это, по сути, небольшой всплеск яркости, вызванный артефактами использования неперцептуальной цветовой системы.Используйте HCL, чтобы избежать этого. (Также: меня часто спрашивают о разнице между HSB и HSL)

Экспорт градиента как изображения SVG

Необходимо использовать один из этих градиентов в вашем дизайнерском приложении — например, Figma, Sketch или Adobe XD?

Просто — просто нажмите «Экспорт SVG» и перетащите файл прямо в свое дизайнерское приложение.

Но что, если вы разрабатываете в браузере? Нет проблем — просто возьмите…

Градиент CSS (для линейных, радиальных и конических градиентов)

Получить градиентный CSS для любого из 3-х типов градиентов очень просто.

Просто нажмите «Копировать CSS» и добавьте код к нужному элементу.

Примечание: если у вас есть другие свойства фона, заданные для рассматриваемого элемента, вы можете изменить свойство с background на background-image 👍

Подробнее о цвете

Чтобы узнать больше о цветных инструментах и ​​статьях об использовании цвета в дизайне пользовательского интерфейса, посетите:

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

градиентов в веб-дизайне: тенденции, примеры и ресурсы

Дизайн Джейк Рошело • 16 августа 2017 г. • 6 минут ПРОЧИТАТЬ

Тенденция градиента началась с Web 2.0 и с тех пор значительно продвинулась вперед. Современные градиенты можно разрабатывать исключительно на CSS3, поэтому их проще встроить в кнопки, фон и даже типографику.

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

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

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

Теперь это сделать намного проще, потому что градиенты можно создавать на чистом CSS. Многие веб-сайты используют градиенты, чтобы добавить цвет на страницу и расширить базовую цветовую схему.

Конструктор электронных писем

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

Попробуйте бесплатноДругие продукты

Сайт Phở Devstack — отличный пример настоящего простого фонового градиента. Он разработан с использованием чистого CSS3, но также использует статический цвет в качестве альтернативного метода.

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

Сайт-портфолио Миган Фишер — еще один фантастический пример градиентов в действии.

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

Но более интересная часть — это эффект наведения курсора.

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

Еще один пример, который действительно раздвигает границы, — NYC Pride, который использует полноэкранные градиенты по всей странице.

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

Заголовки

— идеальное место для добавления градиентов, если вам нужен дополнительный цвет в макете.

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

Динамические эффекты

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

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

Креативным агентствам это сойдет с рук, потому что их веб-сайты могут больше походить на эксперименты с UI / UX. В продвижении тенденций есть большая ценность, и этот сайт убедительно доказывает это.

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

Сайт One John St на самом деле полная противоположность.У него есть один основной градиент, закрепленный в фоновом режиме, и он следует за вами при прокрутке.

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

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

Портфолио Льюиса Лопеса — отличный тому пример.

Каждый раздел имеет свой собственный градиентный фон, и даже фон для фотографий работает с градиентами поверх них.

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

Логотипы и текстовые эффекты

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

Real Future Fair, пожалуй, мой любимый пример из-за последовательности. В заголовке используется фиксированный цветовой градиент, но по мере прокрутки вниз этот градиент смещается к логотипу.

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

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

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

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

Стиль Пьера — один из многих, и я думаю, что это начало растущей тенденции.

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

Инструменты градиентного дизайна

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

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

Грабиент

Бесплатное веб-приложение Grabient дает вам полный доступ к настраиваемым градиентным фонам и их коду CSS.

Просто наведите указатель мыши на блок и нажмите «Копировать», чтобы мгновенно получить нужные свойства CSS. Вы даже можете редактировать градиенты прямо на этом сайте, добавляя дополнительные цвета или изменяя соотношение / разброс цветов.

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

coolHue

Бесплатное веб-приложение coolHue содержит огромную библиотеку градиентов с полным доступом к исходному коду и загружаемым палитрам.

Что интересно, это веб-приложение бесплатно размещается на GitHub и является одним из лучших ресурсов для выбора градиента. Они в основном выполнены в пастельных тонах, но вы можете найти огромное разнообразие от темных до светлых и всего, что между ними.

Веб-градиенты

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

Библиотека содержит огромное количество 180 градиентов , которые вы можете выбирать и копировать на свои веб-сайты.Есть простая кнопка для копирования CSS и кнопка со стрелкой загрузки, если вы хотите также загрузить файлы палитры Sketch или Photoshop.

Plus, этот сайт также находится в свободном доступе на GitHub, поэтому вы можете стремиться расширить библиотеку или даже использовать ее в качестве основы для своих собственных проектов.

Кнопки с градиентом

И последнее, но не менее важное — это кнопки градиента. Это небольшое веб-приложение фокусируется не только на градиентах, но и на градиентном дизайне, применяемом к кнопкам с помощью CSS.

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

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

Но со всеми разнообразными цветовыми инструментами в сети это просто капля в море.

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

Градиентов · Набросок

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

Как создавать линейные градиенты

С линейным градиентом приложение Mac добавляет линию с двумя точками к вашему слою.

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

Перетащите цветные точки, чтобы изменить внешний вид вашего градиента. Или выберите точку и нажмите клавишу Backspace, чтобы удалить ее.

Как создавать радиальные градиенты

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

Как создавать угловые градиенты

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

Как использовать полосу градиента

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

Как настроить точки градиента с помощью ярлыков

Для настройки градиента можно использовать следующие ярлыки:

1 — 9	Поместите новую цветовую точку вдоль полосы градиента (например, 3 = 30% вдоль.
=	Располагает точку градиента между двумя другими точками на равных.
Вкладка	Переключение между цветовыми точками.
→ или ←	Постепенно отрегулируйте положение цветовой точки.
⇧ + → или ←	Отрегулируйте положение цветовой точки с большим шагом.

Нам очень жаль.
Сообщите нам, что вы искали:

Если вам нужна дополнительная помощь или вы хотите сообщить об ошибке в этом содержании, обратитесь в службу поддержки.

Ваш электронный адрес (чтобы мы могли вам ответить) Отправьте свой отзыв Отмена

Спасибо за ваш отзыв.

Произошла ошибка, повторите попытку позже.