В какой программе можно быстро создавать переходы изображения в прозрачность?

Question

[Евгений Демин]

Периодически возникает задача – добавить к какому-то блоку или форме на сайте фоновое изображение, с переходом в прозрачность или основной фон блока. От логики и интерфейса Phoshop сводит скулы, даже если в нем разберешься, через полгода опять все заново изучать. Хотелось бы найти программу, которая дружит с вектором, чтобы накидать простейший блок или форму и с растром, чтобы обработать фоновое изображение, банально наложить цвет или градиент прозрачности.

Comments

[Александр Аксентьев]

Phoshop

вектором

растром

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

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

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

Answer 1

[Михаил Проскурин]

Вы сами себе дали ответ тегами - FIgma.

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

Comments

[Евгений Демин]

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

[Михаил Проскурин]

[Евгений Демин]

Это не то, к сожалению. Но можно попробовать использовать как маску..

[Moskus]

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

[Евгений Демин]

Moskus, Это не совсем то, прочитайте внимательно вопрос.

[Moskus]

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

[Евгений Демин]

Михаил Проскурин, Спасибо за участие, ваш ответ навел меня на решение вопроса. Figma по UX очень хороша. В общем нужно использовать функционал Use as Mask, тогда можно экспортировать блок с маской в прозрачный PNG.

[Евгений Демин]

Moskus, Давайте уточним. В примере на скриншоте при экспорте изображения что получим? Картинку с черным градиентом? А мне нужно, чтобы при экспорте была градиентная прозрачность изображения, от 0 до 100%.

[Moskus]

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

[Евгений Демин]

Moskus, Наложением слоя заливки, без использования маски, даже градиентом, оканчивающимся 100% прозрачностью — нельзя. Попробуйте доказать обратное.

Answer 2

[McBernar]

В Фотошопе это делается одним простым движением градиента по картинке или заранее заготовленной маской.

В Скетче примерно так же — просто заливка градиентом маски.

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

>От логики и интерфейса Phoshop сводит скулы
Кажется, вы выбрали не ту профессию.