[AI CC-CC2021] Как сделать такой градиент

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
Привет! Кто может помочь советом? Вот на этом сайте BrightMedia - Digital Agency есть сложный градиент (справа от косого прямоугольника) .
Как его сделать не пойму. Он не линейный. Скорее либо сетчастый, либо произвольный. К тому же он плавно становится прозрачным. Здесь скорее всего маска из черно-белого градиента. Может кто знает?
 

kstati

иɯɐɯɔʞ
10 лет на форуме
Сообщения
1 138
Реакции
512
Если убрать со страницы контент, то видно линейный градиент с круговой маской прозрачности
115790
 

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
О-о, спасибо, так и есть. Тут похоже даже не одна круговая маска, а две, только вторую, в синей части градиента сложно рассмотреть. Вы мне очень помогли. Спасибо!
 

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
Есть еще вопрос, если кто-нибудь видит. Круговая маска вроде как присутствует, но градиент идет вдоль всей границы косого черного прямоугольника , поэтому круговая маска прозрачности тут не сработает, потому что она сформирует круг, а его не хватит на всю длину косой черты. Делать нахлест из двух круговых градиентов тоже не подходит, видно наложение. Уже голову сломала, как это сделать. Может кто знает?
 

qsedftghk

фея
15 лет на форуме
Сообщения
2 028
Реакции
1 197
По пнг с того сайта видно, что именно накладыванием друг на друга (их там несколько видов) и формируется длина косой черты (см. архив, я там набросал эти пнг-ехи на скору руку в иле). Как нарисованы сами пнг? Лень разбираться. Может градиент в иллюстраторе нарисован был, а потом в фотошопе доработан, а может и сразу в фотошопе химичили. Может один пнг - это сборка из нескольких градиентов, наложенных друг на друга, а потом вся эта композиция была сделана плавно прозрачной и сохранена как единая. и т.п. Если нужно повторить один в один повторить, - то можно мешем развлечься в иллюстраторе, но муторно как-то это всё.
 

Вложения

  • shine3.png
    shine3.png
    64.6 КБ · Просм.: 251
Последнее редактирование:
  • Спасибо
Реакции: Josefina

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
По пнг с того сайта видно, что именно накладыванием друг на друга (их там несколько видов) и формируется длина косой черты (см. архив, я там набросал эти пнг-ехи на скору руку в иле). Как нарисованы сами пнг? Лень разбираться. Может градиент в иллюстраторе нарисован был, а потом в фотошопе доработан, а может и сразу в фотошопе химичили. Может один пнг - это сборка из нескольких градиентов, наложенных друг на друга, а потом вся эта композиция была сделана плавно прозрачной и сохранена как единая. и т.п. Если нужно повторить один в один повторить, - то можно мешем развлечься в иллюстраторе, но муторно как-то это всё.
 

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
Спасибо вам. Еще спрошу: что в фотошопе есть такое, чего нет в иллюстраторе по части градиентов?
 

Josefina

Участник
Топикстартер
Сообщения
15
Реакции
0
И еще, правильно ли я понимаю, как вы делали эти градиенты? Сначала делаете линейный из нескольких цветов, а потом применяете к нему круговую маску прозрачности?
 

kstati

иɯɐɯɔʞ
10 лет на форуме
Сообщения
1 138
Реакции
512
И еще, правильно ли я понимаю, как вы делали эти градиенты? Сначала делаете линейный из нескольких цветов, а потом применяете к нему круговую маску прозрачности?
Не знаю, как собирал градиенты @qsedftghk, на изначальном сайте это рисование программными средствами по системе ниппель - какие-то мудрёные формулы, обёрнутые в javascript - даже лень разбираться. На глаз - всё верно. Градиент плюс маска.
 
  • Спасибо
Реакции: Tina1

Tina1

Участник
Сообщения
11
Реакции
0
Не знаю, как собирал градиенты @qsedftghk, на изначальном сайте это рисование программными средствами по системе ниппель - какие-то мудрёные формулы, обёрнутые в javascript - даже лень разбираться. На глаз - всё верно. Градиент плюс маска.
Выходит программные средства рисования и Java Script делают эффект лучше Иллюстратора, потому что Иллюстратор не дает таких плавных переходов.