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

Josefina

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

kstati

иɯɐɯɔʞ
Сообщения
890
Оценка реакций
436
Если убрать со страницы контент, то видно линейный градиент с круговой маской прозрачности
115790
 

Josefina

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

Josefina

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

qsedftghk

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

Вложения

Последнее редактирование:

Josefina

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

Josefina

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

Josefina

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

kstati

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

Tina1

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