Введение в прозрачный фон в After Effects

• Adobe After Effects — это программа для создания специальных эффектов и графики, используемая в иллюстрациях, онлайн-контенте и видео. Прозрачный фон в After Effects совместим с системами Windows и Mac OS. After Effects широко используется в постпроизводстве телевидения и фильмов, создании специальных эффектов и анимации. After Effects — это специально разработанное программное обеспечение, которое в основном используется художниками, редакторами видео, графическими дизайнерами, дизайнерами цифровых медиа, социальными сетями, дизайнерами анимации, производителями видео и людьми, работающими в области анимации. Техническое и креативное программное обеспечение, с помощью которого вы можете разрабатывать, производить и стилизовать двухмерные кадры в трехмерном пространстве.
• В зависимости от вашей роли возможности программного обеспечения могут различаться. Он может обрисовывать заголовки, создавать двухмерных персонажей мультфильмов и т. Д. Несмотря на выполнение всех этих вещей, это не то же самое, что программа для редактирования видео. Это программное обеспечение лучше всего использовать для регистрации эффектов после редактирования отснятого материала. After Effects является частью Adobe Creative Cloud. В какой-то момент в любом видеопроекте вам потребуется создать простой видеоклип или текст с движущейся графикой с анимацией, которая будет иметь прозрачный фон, который, в свою очередь, может быть использован в другом видео.

Как создать прозрачный фон в After Effects?

• Во-первых, чтобы создать прозрачный фон для вашего проекта After Effects или любого видео, вам необходим альфа-канал. Альфа-канал можно определить как цветное изображение с тремя стандартными каналами: красным, зеленым, синим, а четвертый канал — это альфа-канал, который позволяет управлять прозрачностью или непрозрачностью.
• Степень прозрачности цвета (красный, зеленый и синий каналы) может быть представлена ​​альфа-каналом, который является компонентом цвета. Он используется для определения способа визуализации пикселя в сочетании с другим. Альфа-канал управляет непрозрачностью или прозрачностью цвета. Реальное значение, целое число или процент могут представлять его значения. Полная прозрачность равна 0, 0, 0% или 0, тогда как полная непрозрачность равна 1, 0, 100% или 255 соответственно.
• Когда цвет, который является источником, комбинируется с другим цветом, который является фоном, например, когда изображение перераспределяется на другое изображение, значение альфа исходного цвета используется для определения цветового результата. Если альфа-значение грязное, исходный цвет переопределяет целевой цвет; если прозрачный, исходный цвет не виден, что позволяет фону раскрыться. Если значение находится между ними, цвет, который будет получаться, будет иметь различную степень непрозрачности / прозрачности, что создает прозрачный эффект. Альфа-канал используется в основном в альфа-комбинировании и альфа-композитинге.

Шаги по созданию прозрачного фона

Шаг 1. Запустите Adobe After Effects и создайте новый проект .

Шаг 2: Новый проект открывается с интерфейсом After Effect .

Шаг 3: Создайте новую композицию, нажав на Композиция, присутствующая в строке меню вверху.

Шаг 4: Вы получите всплывающее окно после нажатия на новую композицию. Во всплывающем окне оставьте ширину 1920 пикселей и высоту 1080 пикселей, что является стандартным. Сохраняйте длительность 5 секунд, а цвет фона — черный. Вы можете сохранить предустановки как пользовательские. Частота кадров может быть 29, 97 или 30 и сохранить разрешение как полное.

Шаг 5: Интерфейс композиции .

Шаг 6: Чтобы получить сетку прозрачности, вам просто нужно нажать на Toggle Transparency Grid, которая присутствует рядом с выпадающим списком активной камеры, как показано ниже.

Шаг 7: Нажмите один раз, и вы получите сетку прозрачности. Если вы нажмете еще раз, вы снова получите сплошной черный цвет. Таким образом, вы можете получить сетку прозрачности для вашей композиции.

Шаг 8: Теперь создайте T ext и поместите его в центр, используя инструмент «Выделение». Это видео с текстом будет использоваться в другом видео, чтобы показать, как работает прозрачный фон в After Effects.

Шаг 9: Далее мы оживим текст . После анимации текста, вам нужно расположить его, как показано на рисунке ниже.

Шаг 10 : Перетащите текст вверх и вниз с помощью индикатора текущего времени, чтобы анимировать его, чтобы перемещаться вверх и вниз.

Шаг 11: анимация завершена для текста в этом видео.

Шаг 12: Следующий шаг — добавить композицию в окно Render Queue. Следите за тем, чтобы композиция была открыта или выбрана в окне проекта. Нажмите «Композиция» и « Добавить в очередь визуализации».

Шаг 13: Откроется вкладка Render Queue .

Шаг 14: Установите очередь рендеринга в лучших настройках .

Шаг 15: Выберите параметры рендеринга в качестве лучших параметров с полным разрешением и дисковым кэшем только для чтения. На выходе модуль гарантирует, что он без потерь. Откройте настройки, нажав на без потерь. Вы получите всплывающее окно. Вы можете выбрать любой формат, который вы пожелаете. Выберите каналы как RGB + Alpha в разделе видео выхода.

Шаг 16: Теперь скачайте ваше видео, сохраните его на рабочем столе и нажмите кнопку рендеринга.

Ваше видео с прозрачным фоном и текстом готово.

Шаг 17: Теперь перетащите любое видео на панель инструментов проекта, как показано ниже.

Шаг 18. После перетаскивания видео импортируйте видеофайл с сохраненным ранее текстом, а затем перетащите его в это видео.

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

Вывод

С помощью шагов, упомянутых выше, можно отобразить видео с прозрачным фоном в Adobe After Effects. Что касается анимации и видео, файлы, которые можно импортировать и экспортировать, представляют собой Animated GIF (GIF), 3GPP (3GP, 3G2, AMC), Open Media Framework (OMF), DV, видео для Windows (AVI) и QuickTime (MOV). ).

К видеофайлам, которые можно импортировать, относятся только Adobe Flash Video (FLV, F4V), Adobe Flash Player (SWF), формат обмена мультимедиа (MXF), AVCHD (M2TS), MPEG-1 (MPG, MPE, MPA, MPV, MOD). ), MPEG-4 (MP4, M4V), MPEG-2 (MPG, M2P, M2V, M2A, M2T), XDCAM HD / XDCAM EX (MXF, MP4) и Windows Media (WMV, WMA). Хотя After Effects может работать с 16 и 32 битами на канал, многие кодеки и форматы анимационных и видеофайлов поддерживают только 8 бит на канал.

Рекомендуемые статьи

Это руководство по прозрачному фону в After Effects. Здесь мы обсудили обзор и шаги по созданию прозрачного фона. Вы также можете просмотреть другие наши статьи, чтобы узнать больше —

1. Для чего используются After Effects?
2. Применение текстовых эффектов в After Effects
3. Основные ярлыки в After Effects
4. Как применить эффекты в Illustrator?
5. Настройки Adobe Flash

простой и довольно быстрый способ без лишних заморочек

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

Это самая популярная функция в программе Photoshop, а потому я решил максимально подробно рассказать вам не только о самом процессе, но и том, как сохранить картинку в фотошопе без фона.

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

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

Более терпеливых я благодарю за понимание. Приступим.

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

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

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

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

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

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

Как правильно хранить прозрачные картинки

Все мы привыкли к такому формату фотографий, как jpeg. Некоторые люди даже и не знают о существовании других. Однако, он не понимает, что такое прозрачность. Для того, чтобы скачивать и хранить на своем компьютере «правильные» фотографии, вам понадобится понять и запомнить новый формат — png.

Видите, помимо шашки, в Google почти всегда вместе с нужными картинками можно увидеть это сочетание букв.

Затем выбираете нужный тип файла, png и готово. Он есть в любой версии. Если не видите – ищите внимательнее. Без него никак. Уверяю вас.

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

Как избавиться от фона: простой и довольно быстрый способ без лишних заморочек

В моем блоге вы можете найти статью, в которой я показываю 4 инструмента и привожу видео, в котором можно найти 3 способа избавиться от фона на рисунке (). Можете прочитать ее, если вам интересно. Сейчас я хотел бы показать вам еще один прием, так как считаю, что без этого статья была бы не полной. Мало ли, кто-то не захочет лазить по моему блогу. А тут все в одном месте.

Итак, открываем картинку.

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

Можете увеличить диаметр ластика, чтобы стирать было удобнее.

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

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

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

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

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

Что бы вы ни знали и чем бы ни интересовались. Интернет открывает массу новых возможностей. Впустите в свою жизнь изменения. Если деньги вас не интересуют – это еще лучше. Это дает больше шансов вашему проекту стать дорогим, крутым и успешным. Все известные люди не работают ради прибыли, они трудятся, потому что любят то, чем они занимаются. Редко кто из них называет это «работой».

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

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

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

Занимайтесь чем-то новым. Если вы любите фотошоп – обратите внимание на курс Зинаиды Лукьяновой — «Фотошоп с нуля » и овладейте им в совершенстве. Очень быстро у вас появится прибыльное хобби. Не так уж увлечены дизайном? Обратите внимание на то, и создавайте свои проекты.

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

Возможно, одна из них вас вдохновит на что-то новое и пока неизвестное. Вы поймете, что это интересно и захотите попробовать сами, а потом… кто знает что будет потом?

Обернется ли хобби во что-то большее или вы просто покажете результат своих трудов друзьям, дабы получить их похвалу и восхищение? В отличие от многих вы встанете с дивана и сделаете то, что выведет вас за рамки привычного. Вы попытаетесь изменить свою жизнь. Это очень похвально.

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

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

И так, открываем нашу картинку в фотошопе.

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

Замочек должен исчезнуть

Если фон однотонный:
Выбираем инструмент «Волшебная палочка » — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск ), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной. Нажимаем Del и выделенная облась удаляется.

Если фон разноцветный:
Используем инструмент «Быстрое выделение «. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.
Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.

3 . Если на рисунке осталось что-то лишнее, используем инструмент «Ластик «, просто затираем лишний фон.

4 . Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).

Полезное видео в тему:

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

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

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

Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.

В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.

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

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

Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.

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

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

Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме » » (Quick Mask — Клавиша Q), как показано на снимке ниже.

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

Добавление к выделению нечетких областей

А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection…

Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather… (Растушевка…) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.

Теперь, нажмите — Select/Load Selection… Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.

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

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

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

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

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

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

Отсечение фона маской

Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.

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

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

Clipping Mask в Adobe Illustrator

Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши — Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.

После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.

PowerClip в CorelDRAW

В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать — Effects/PowerClip/Place inside Frame…. Вместо указателя появится стрелка, которой нужно показать контур.

Контур в CorelDRAW также можно редактировать после создание маски.

Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.

3. Прозрачность режимом наложения

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

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

В Illustrator нужно открыть панель прозрачностей — Window/Transparency. А затем выбрать режим — Multiply (Умножение).

В CorelDRAW возьмите инструмент — Transparency.

В панели параметров инструмента настройте так, как показано на скриншоте ниже:

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

Видео урок: прозрачный фон

Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:

(Visited 4 266 times, 2 visits today)

3 способа отрисовать текстовый логотип

Очень часто при создании поздравительных открыток или видео я сталкивалась с вопросом: Как это можно сделать без знания фотошопа ?

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

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

А сейчас я Вам открою еще один секрет: Вы уже сегодня научитесь делать фон рисунка прозрачным. Причем сделаете это абсолютно бесплатно и потратите всего лишь 2 минуты Вашего времени.

Приступим к делу.

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

Перед Вами откроется вот такое окно:

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

Рисунок появляется на страничке сервера:

Справа выходя 3 окошечка и в среднем из них нарисован замочек. Нажмите на нем 2 раза левой мышкой. Таким образом откроется дверь в волшебство.

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

Завершающий шаг на пути к превращению: нажать кнопку » Del » (удалить) на Вашем компьютере. Фон становится в клеточку. Если не все пространство вокруг буде охвачено клеточкой, прикоснитесь еще раз к этому месту волшебной палочкой и нажмите кнопку «Del «

Выходит окошечко, в котором Вас спрашивают: «Сохранить изображение перед закрытием?» Нажимаем «Да «.

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

Перечень сервисов способных сделать прозрачный фон картинки

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

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

Сервис Online-Photoshop позволяет удалить задний фон

Первый ресурс, позволяющий создать прозрачный фон онлайн – это Online-Photoshop. Работа с ним достаточно проста, позволяя за пару минут получить объект с прозрачным фоном на вашем фото.

1. Для реализации намеченного перейдите на ресурс , кликните на кнопку «Select image» и загрузите нужное фото.
2. Последнее появится в левой части экрана, а курсор приобретёт форму жёлтого кружочка.
3. Пометьте этим кружочком с помощью жёлтой линии внешние контуры объекта, фон за которым вы хотите сделать прозрачным.
4. Затем кликните на зелёный кружочек с плюсиком в панели инструментов и пометьте зелёным цветом внутренние черты объекта.
5. Потом кликните на красный кружочек с минусом и пометить красными линиями внешнее пространство за границами объекта.

Теперь нажимаем стрелочку справа и смотрим результат. Если всё хорошо, нажимаем на кнопку «Download» сверху и сохраняем результат к себе на ПК.

Сервис Pixlr задаём один цвет фону

Другой инструмент чтобы сделать прозрачный фон онлайн – это похожий на «Фотошоп» онлайн-редактор Pixlr. Он обладает значительным числом возможностей, но нас интересует в первую очередь создание прозрачного фона онлайн.

Сервис IMGonline позволяет сделать прозрачный фон

Данный сервис представляет собой практически полностью автоматизированный вариант, позволяющий сделать задний фон прозрачным онлайн.

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

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

Замечу, что за счёт автоматизации качество получаемой обработки обычно хуже, чем в перечисленных выше Online-Photoshop и Pixlr.

Сервис Watermark.Algid.Net

Ещё один сервис, позволяющий сделать прозрачный фон на фото онлайн бесплатно.

Для работы с данным сервисом фотографию нужно подготовить, для чего нужно закрасить потенциально прозрачную область цветом, отсутствующим на самом изображении (например, синим, как приведено в примере ниже). Также важно, чтобы фото было в формате png или gif.

1. Затем необходимо перейти на сам сайт , нажать на кнопку «Обзор», указать сервису путь к вашему файлу и кликнуть на «Следующий шаг».
2. Откроется ваше изображение, вам будет необходимо кликнуть мышкой на цвете фото, который вы хотите сделать прозрачным (задний фон для удаления должен иметь один цвет после обработки).
3. Кликните на цвете заднего фона, программа обработает его и он станет прозрачным.
4. Если обработка вас устроила, нажмите правой клавишей мыши на фотографии и выберите «Сохранить изображение как».

Сервис LunaPic убираем задний фон изображения

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

1. Для работы с сервисом выполните вход на него , нажмите на «Обзор» и загрузите требуемое фото (или укажите ссылку на него в сети в строке ниже).
2. Затем выберите цвет на фото, который бы вы хотели сделать прозрачным и кликните на него мышкой.
3. Фото будет обработано, и вы, в идеале, получите прозрачный цвет заднего фона.

По сравнению с сервисом Watermark.Algid.Net сервис LunaPic больше похож на полноценный фоторедактор, позволяя окрасить задний фон одним цветом с помощью встроенных в данный сервис инструментов.

Заключение

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

Поделись статьей:

Похожие статьи

Как сделать анимацию в Adobe Illustrator. Делаем GIF с прозрачным фоном в Illustrator Как сделать svg анимацию в adobe illustrator

Всем привет! Сегодня попробую сделать описание возможностей программы Adobe Illustrator , сравнивая ее с возможностями флеша. Это будет не глобальный разбор программы по косточкам, а скорее описание некоторых интересных фишек, которые я открыла для себя в этой программе. Информацию собирала по кусочкам по мере изучения, чтобы выложить все в одном посте. Сразу признаюсь, что я не супер-опытный пользователь иллюстратора, лишь последние полгода использую его в рисовании (до этого все рисовала во флеше). Многие сетуют, что иллюстратор сложный, интуитивно не всегда понятный. В какой-то мере я согласна, что после флеша эта программа сложная. Но тут главное не бросать, а продолжать изучение. И через пару недель появляется мысль, как же я раньше без него обходился!

Итак, что мне понравилось в иллюстраторе, и что я нашла для себя такого, чего нет во флеше.
1. Начну с самого просто, но в то же время нужного. Попробуйте во флеше расположить объекты по кругу. Ранее был Deco Tool , но его убрали, видимо, посчитали ненужным. Решили, что ручками это делать веселее. В иллюстраторе эта функция есть: Effect – Distort&Transform – Transform .

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

2. Зиг-заг

Еще боле простая, но тем не менее полезная штука. Казалось бы, мелочь, но во флеше надо рисовать вручную, в иллюстраторе это секундное дело.

3. Деформация объектов (Warp)

Ничего подобного во флеше нет. На примере внизу я показала только 2 способа деформации простых форм(Effect – Warp – Arc/Fish). На самом деле их 15 в последней версии программы.

4. Автоматическое округление углов (Round Corners)

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

Но это касается только форм, с карандашной линией чуть по-другому – применяем эффект скругления (Effect – Stylize – Round Corners ). На выходе получаем тот же рузультат.

5. Roughen (огрубение)

Эффект применяется к простым формам (Effect – Distort&Transform – Roughen ). На выходе получаем что-то напоминающее низкополигональные 3д-модели. По-моему, круто:) И главное – очень просто.

6. Pucker&Bloat (Втягивание и Раздувание)
Пример на картинке ниже:

7. Расширение формы (Offset Path)

Во флеше есть функция Expand Fill (расширение заливки), с карандашными линиями вообще не работает, в отличии от иллюстратора.

8. Кисти (Art Brush, Pattern Brush, Scatter Brush)
Смотрим ни картинку ниже с примерами:

9.Texture Brush (Текстурные Кисти)

Также в иллюстраторе представлено много текстурных кистей, о которых я писала , и о том, как они появились в новой версии флеша — . Было замечено, что использование кистей в Adobe Animate страшно тормозит. Вот такие дела:(

10. Не уверена, что это прям хитрость, но хочу остановиться на кисточке с забавным названием Blob Brush . Находится на панели инструментов, очень приятная в использовании кисть. Имеет кучу настроек, нравится мне больше обычной. На словах тяжело объяснить о ее преимуществах, лучше один раз попробовать.

10.Split to Grid

Также полезная штука – функция Split to Grid (Object-Path-Split to Grid).Позволяет разрезать форму на равные отрезки. Что это нам напоминает? Верно — окна в многоэтажке. Как по мне, клевая штука для рисования, например, городских пейзажей;)

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

12. Move (правой – Transform — Move)

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

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

(На заметку – паттерн можно сделать векторным редактируемым объектом с помощью функции разобрать (Object – Expand Appearence ).

14. Object Mosaic (Мозаика)

Создание цветовой палитры на основе имеющейся картинки. Импортируем понравившуюся картинку в илл (Open), далее Object – Create Object Mosaic . В настройках указываем частоту деления в высоту и ширину.

И на выходе получаем:

15.Blend (Cмешивание)

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

Также инструмент можно использовать для клонирования объектов. Размещаем два объекта на расстоянии друг от друга и применяем Blend Options, выбираем количество шагов (количество клонируемых объектов).

16. Инструмент Build Shape Tool. Очень удобная штука для работы с примитивами. Во флеше, как мне показалось, менее удобно.

Зажимая Alt и кликаем по выделенным сегментам – удаляем сегменты. Если просто протягиваем мышкой по нескольким выделенным области – соединям.

Дополнение – инструмент , который помогает автоматически отрезать, соединять и т.д. выделенные формы. Как по мне, он не сильно удобен, чаще пользуюсь Build Shape Tool.

(монтажные области)

18.Custom Tool Panel

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

Во флеше монтажные области,а именно сцены (Scene 1,2,3.. ) расположены отдельно и между ними нужно переключаться (Shift+F2). В иллюстраторе их все можно расположить перед глазами. Удобно, когда делаешь несколько вариантов одного и того же рисунка, чтобы все варианты были перед глазами для сравнения.

19.Изометрия с помощью Graphic Styles

И последнее — создание изометрии без использования в 1 клик (а если точнее, в 3 клика, потому что сторон у нас 3;) с помощью графических стилей (Graphic Styles ). Как это делается, распишу в следующий раз.

Общее с флеш у иллюстратора – возможность сохранять обьект в символ (symbol) и так же без проблем этот символ можно перенести во флеш (открыть во флеше.ai файл, путем Import – Import to stage ).
Символ в иллюстраторе имеет такие же свойства, как во флеше.
И в завершении напишу, что в иллюстраторе, по моему мнению, уступает флешу. Да-да, и такое есть. И это инструмент заливки (Paint Bucket ). Как не стараюсь привыкнуть к ней в илле, во флеше она удобней.
Если мои заметки стали для вас полезными или что-что от себя хотите дополнить – велкам в комментарии! Всем удачи;)

Сегодня у нас не совсем обычный урок Adobe Illustrator. Потому что в этот раз мы будем делать не статичную картинку, а самую настоящую анимацию. Представьте себе, оказывается с помощью Adobe Illustrator можно ещё и мультики рисовать:)

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

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

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

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

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

Также последнее время всё чаще для создания анимации применяется HTML5 и CSS3. Данный код поддерживается современными браузерами и не требует использования флеш плеера.

Роман aka dacascas специально для блога Записки микростокового иллюстратора

Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:

Прозрачный GIF в Adobe Illustrator делается следующим образом. Заходим в меню File > Save for Web & Devices (Alt+Ctrl+Shift+S). В открывшемся окне в поле Optimized file format нужно прежде всего зайти во вкладку Image size (Размер изображения). Дело в том, что в окно оптимизации попадает по умолчанию вся страница, а в этом обычно нет необходимости. Поэтому во вкладке Image Size снимаем выделение с флажка Clip to Artboard (Обрезать по размеру страницы) и нажимаем кнопку Apply.

Затем в списке выбора формата выбираем GIF и отмечаем флажок Transparency.

После этого определим, какие цвета будут прозрачными. Все цвета, присутствующие в изображении, содержатся во вкладке Color Table (Таблица цветов) и отображаются в виде цветных квадратиков. Выбираем в панели инструментов в левой части окна инструмент Eyedropper (пипетка).

Определить цвета можно двумя способами. Проще всего указать цвет пипеткой непосредственно на изображении — после этого цвет выделится на таблице цветов темной обводкой. Ну, а если вы точно знаете, какой цвет должен быть прозрачным, можно выделить его прямо на таблице цветов, нажав соответствующий цветной квадратик. И в первом и втором случае при необходимости выбора нескольких цветов нужно работать с нажатой клавишей Shift (или Ctrl). После выбора цвета, нужно дать указание программе сделать его прозрачным. Для этого нужно нажать иконку Maps selected colors to Transparent (Добавить выбранные цвета к прозрачности). На рисунке эта кнопка обведена кружком, и красный цвет выбран прозрачным. На изображении появится прозрачная область, а квадратик на таблице цветов изменит свой вид — часть его станет белым треугольником. Чтобы отменить выбранный цвет, нужно выделить его в Color Table, а затем опять нажать иконку Maps selected colors to Transparent.

Несколько слов о способе задания прозрачности. За него отвечает выпадающее меню Specify Transparency Dither Algorithm , по-русски — Алгоритм имитации прозрачности (рис. внизу). Можно сделать четыре выбора: No Transparency Dither — нет алгоритма, Diffusion Transparency Dither — диффузный алгоритм, Pattern Transparency Dither — алгоритм на основе узора и Noise Transparency Dither — алгоритм на основе шума. В режиме диффузного алгоритма становится активным ползунок Amount (Величина), позволяющий менять значение диффузии. Что применять на практике? В зависимости от цели и изображения. Я не пользуюсь этой опцией и всегда оставляю по умолчанию — No Transparency Dither.

Нажимаем Save — прозрачный GIF готов. Работа производилась в Adobe Illustrator версии CS4 (v.14), но все действия и клавиатурные сокращения актуальны и для более ранней версии CS3 (v. 13).

В последнее время стала очень популярна разного рода анимация SVG(Scalable Vector Graphics) графики на сайтах и приложениях. Это связано с тем что все новейшие браузеры уже поддерживают этот формат. Вот инфа по поддержке браузерами SVG .

В данной статье рассмотрен простейший пример анимации SVG вектора при помощи легкого Jquery плагина Lazy Line Painter.

Для выполнения и полного понимания данной задачи желательны базовые знания HTML, CSS, Jquery, но не обязательны если вам просто хочется анимировать SVG) Приступим!

И так шаги которые нам нужно выполнить:

1. Создать правильную файловую структуру
2. Загрузить и подключить плагин
3. Нарисовать крутую контурную картинку в Adobe Illustrator
4. Конвертировать нашу картинку в Lazy Line Converter
5. Вставить полученый код в main.js
6. Добавить немного CSS по вкусу

1. Создать правильную файловую структуру
C этим нам поможет сервис Initializr где нужно выбрать параметры как на картинке ниже.

• Classic H5BP (HTML5 Boiler Plate)
• No Template
• Just HTML5 Shiv
• Minified
• IE Classes
• Chrome Frame
• Затем нажать Download it!

2. Загрузить и подключить плагин

Так как initializr поставляется с последней библиотекой Jquery, из архива который нам нужно скачать с репозитория проекта Lazy Line Painter , нужно перенести в наш проект только 2 файла. Первый это ‘jquery.lazylinepainter-1.1.min.js’(версия плагина может отличатся) он находится в корне полученой папки. Второй это example/js/vendor/raphael-min.js.

Эти 2 файла помещаем в папку js. И подключаем их к нашему index.html перед main.js следующим образом:

3. Нарисовать крутую контурную картинку в Adobe Illustrator

1. Рисуем нашу контурную картинку в Illustrator (проще всего это сделать при помощи Pen Tool)
2. Необходимо чтобы контуры нашего рисунка не замыкались тк для нашего эффекта необходимы начало и конец
3. Не должно быть заливок
4. Максимальный размер файла — 1000×1000 px, 40kb
5. Сделаем кроп до границ объекта Object>Artboards>Fit To Artboards Bounds
6. Сохраняем в формате SVG(стандартные настройки сохранения подойдут)

Для примера можете воспользоваться иконками во вложении.

4. Конвертировать нашу картинку в Lazy Line Converter
Просто перетащи свою иконку в окошко что на рисунке ниже.
Толщину, цвет контура и скорость анимации можно будет изменить в самом коде который появится после конвертирования!

5. Вставить полученый код в main.js
Теперь просто вставляем полученный код в пустой файл main.js
Параметры:
strokeWidth — толщина контура
strokeColor — цвет контура
Также можно изменять скорость рисования каждого вектора изменяя значения параметра duration (по умолчанию 600)

6. Добавить немного CSS по вкусу
Удаляем из index.html абзац

Hello world! This is HTML5 Boilerplate.

И вместо него вставляем блок в котором будет происходить наша анимация

затем добавляем немного CSS в файл main.css для более приятного оформления:

Body { background:#F3B71C; } #icons { position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; }

сохраните все файлы.
Теперь просто откройте index.html в современном браузере и наслаждайтесь эффектом.

P.S. при запуске на локальной машине возможна задержка старта анимации на несколько секунд.

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

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

Создайте баннер, на котором будет только текст.

1. Сгруппируйте символы командой Object › Group (Объект › Группировать).
2. Следующая задача — сделать из символов шрифта контурные объекты, иначе не получится корректное формирование слоев. Для этого выделите группу и выберите Type › Create outlines (Шрифт › Трассировка).
3. После этого откройте меню палитры Layers (Слои), щелкнув на кнопке в виде стрелки на палитре (рис. 8.11).

Рис. 8.11 . Меню палитры Layers

Нас в этом меню интересует команда Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), которая переводит каждый отдельный объект на новый слой. Обратите внимание, что при применении команды должна быть выделена именно группа Group , а не слой Layer 1 .

То, как должна выглядеть палитра Layers (Слои) после выполнения Release to Layer (Sequence) (Преобразовать в слои (Последовательно)), показано на рис. 8.12.

Рис. 8.12 . Палитра Layers после выполнения Release to Layer (Sequence)

На этом подготовка закончена, можно сохранять при помощи Save for Web (Сохранить для Web) в SWF. SWF — это основной формат графики, основанной на Flash-технологиях. Точнее будет сказать, что это и есть Flash-формат (рис. 8.13).

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

Конечно, в Adobe Illustrator не реализовано и десятой части возможностей Flash, ведь программа предназначена не для этого. Тем не менее, в ней вы сможете сделать или статичную картинку или простую анимацию.

Рис. 8.13 . Настройки оптимизации для формата SWF

Существуют следующие настройки.

• Read Only (Только чтение). Если вы установите флажок, то файл будет записан таким образом, что его уже нельзя будет открыть для редактирования в какой-либо программе. Это, с одной стороны, уменьшает размер файлов, а с другой, защищает ваши авторские права.
• Настройка, обозначенная 1. Параметр, задающий тип сохранения, — изображение или анимация.
• Если вы выберете вариант AI File to SWF File (Файл Illustrator в файл SWF), изображение будет сохранено в виде статичной картинки, полностью повторяющей то, что вы видите на экране при работе в Illustrator.
• Layers to SWF Frames (Слои в SWF-фреймы) позволяет сделать анимацию на основе имеющихся слоев, которые будут представлены как кадры. Нам нужно выбрать именно этот вариант.
• Curve Quality (Качество кривых). Точность повторения кривыми файла кривых исходного изображения. При уменьшении этого параметра значительно снижается качество, особенно в области мелких деталей, но зато уменьшается размер файла. Для нашего случая оптимально значение «7».
• Frame Rate (Задержка фрейма). Частота смены кадров и, как следствие, скорость анимации. Чтобы эффект был правильным, выставьте не более 4 кадров в секунду.
• Loop (Повторять). Проигрывать анимацию многократно. Подходит для анимации, для которой важен повторяющийся цикл. Баннер относится именно к такому типу.

Создание наклейки на прозрачном фоне

Гость4

В первую очередь необходимо стать участником официальной группы VK https://vk.com/vkstickers

Затем необходимо создать набор не менее чем из 5 изображений с одним персонажем. К изображениям предъявляются требования: они должны быть размером не менее 512*512 пикселей; иметь формат PNG; не нарушать авторских прав. Если требования выполняются, то работу можно отправлять на модерацию, используя кнопку “Предложить новость”. После необходимо дождаться одобрения или отклонения.

Другие интересные вопросы и ответы

Какие группы во «ВКонтакте» предлагают бесплатные стикеры?

Узнать о новых группах раздающих стикеры можете в нашей группе ВКонтакте.

Мы вовремя оповещаем свою аудиторию о проводимых акциях и публикуем методы получения этих самых бесплатных стикеров.

Как сделать прозрачный фон в Иллюстраторе?

Как сделать прозрачный фон в Adobe Illustrator?

Как сохранить файл с прозрачным фоном в Иллюстраторе?

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

Дело в том, что не каждый формат поддерживает прозрачность. И самый популярный формат – JPEG, ее не поддерживает. И если мы сохраняем рисунок в таком формате, нажав Save foe web и выбрав формат JPEG, то мы получаем следующее.

Однако, на самом деле, лишь одна звездочка находится на белом фоне. Вторая просто расположена на чистом артборде. Чтобы это увидеть меняем формат на иной – GIF, PNG-8 либо PNG-24. Отмечает пункт Transparensy. И видим результат. Однако, файл должен оставаться всегда в формате, поддерживающем прозрачность. Если формат будет изменен на JPEG путем пересохранения, скажем, в Paint, то прозрачный участок станет белым.

Вот как можно сохранить изображение в Иллюстраторе без фона, убрать белый фон в Иллюстраторе.

Создание наклейки на прозрачном фоне

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

Что за белые комочки внутри персика? Разрезал персик и обнаружил там белые комочки, они съедобны?

Ешьте- это недозрелая мякоть

Как сделать белый фон прозрачным в фотошопе. Онлайн-программма Pixir-делаем прозрачный фон у картинки

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

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

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

Но лучшим решением будет подготовить изображение в Photoshop и сохранить в формате поддерживающим прозрачность фона.

В этом видео уроке подробно опишу 3 способа, а также, какие форматы поддерживают прозрачность.

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

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

Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.

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

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

Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме » » (Quick Mask — Клавиша Q), как показано на снимке ниже.

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

Добавление к выделению нечетких областей

А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection…

Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather… (Растушевка…) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.

Теперь, нажмите — Select/Load Selection… Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.

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

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

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

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

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

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

Отсечение фона маской

Этот метод не требует использования программы Photoshop. Непосредственно в программе верстки CorelDRAW или Illustrator вы можете обрисовать предмет контуром, а затем скрыть все, что за его пределами.

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

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

Clipping Mask в Adobe Illustrator

Разместите изображение в редакторе Illustrator и обрисуйте контуром предмет. Затем выделите изображение и контур вместе и нажмите правой кнопкой мыши — Обтравочная маска (Make Clipping Mask). Часть изображения за пределами контура скроется.

После отсечения маской части изображения вы можете продолжать редактировать контур. Двойной щелчок по обтравочной маске позволит менять расположение предметов внутри контура, удалять, вносить новые, менять форму контура или снова разобрать Clipping Mask и вытащить все элементы.

PowerClip в CorelDRAW

В CorelDRAW есть такой же прием, однако работает он немного иначе. Также нужно обрисовать предмет контуром, а затем, выделить изображение и нажать — Effects/PowerClip/Place inside Frame…. Вместо указателя появится стрелка, которой нужно показать контур.

Контур в CorelDRAW также можно редактировать после создание маски.

Еще в CorelDRAW можно сделать объект прозрачным, не создавая контура, вы можете просто перемещать узлы краев изображения инструментом Shape tool, тем самым меняя его форму. Двойной щелчок по контуру будет создавать новые узлы.

3. Прозрачность режимом наложения

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

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

В Illustrator нужно открыть панель прозрачностей — Window/Transparency. А затем выбрать режим — Multiply (Умножение).

В CorelDRAW возьмите инструмент — Transparency.

В панели параметров инструмента настройте так, как показано на скриншоте ниже:

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

Видео урок: прозрачный фон

Смотрите подробный видео урок, как сделать прозрачный фон в Adobe Photoshop, Illustrator, CorelDraw тремя разными способами:

(Visited 2 704 times, 4 visits today)

Если вам кажется, что полностью удалить фон с изображения под силу только мастеру фотошопа, эта статья убедит вас в обратном. Узнайте, как сделать прозрачный фон у картинки, не имея профессиональных навыков в фотомонтаже. Всё, что вам потребуется, – это удобный графический редактор «Домашняя Фотостудия» . Софт позволит вам заменить фон любого изображения на прозрачный всего за несколько шагов.

Шаг 1. Работаем с оригиналом

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

Открыть фото для работы

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

Улучшите качество фото

Довольны результатом? Замечательно, теперь вам предстоит изменить фон на фото.

Шаг 2. Делаем фон прозрачным

В меню «Эффекты» кликнете по вкладке «Замена фона» . Первое, что потребуется сделать, – отделить объект от фона. Для этого аккуратно обведите фигуру по краю с помощью курсора. Ошиблись? Не страшно! Просто воспользуйтесь функцией «Выделить другую область» и начните работу заново. Для удобства вы можете увеличить масштаб изображения, нажав кнопку «100%» . Замкните начало и конец выделения двойным щелчком мыши. Получилось неровно? Скройте небрежные края, увеличив степень размытия границ.

Обведите контур объекта

Отлично! Теперь в списке вариантов для оформления отметьте самый первый пункт – «Без фона» . Один клик – и всё, что находится за границей выделения, удалено. На изображении это будет обозначено шахматным узором. На примере – фото с цветным задним планом, но вы также можете сделать белый фон картинки прозрачным. Алгоритм действий не изменится.

Обратите внимание на возможности опции «Замена фона» . В дальнейшем вы сможете оформлять подложку снимков однотонной или градиентной заливкой, а также с помощью текстур и фоновых изображений. Не подошли варианты коллекции программы? Загрузите файл с вашего компьютера. Всё – очень просто!

Делаем фон прозрачным

Шаг 3. Сохраняем результат

Не спешите закрывать окно замены фона, прежде – сохраните результат. Нажмите кнопку «Сохранить в файл» . В появившемся окне введите название изображения и в строке «Тип файла» установите в качестве формата PNG или GIF. Это важно, поскольку только указанные форматы поддерживают отображение прозрачных участков. Если вы пропустите этот нюанс, программа автоматически сохранит изображение с белым фоном. Проверьте настройки и повторно кликните «Сохранить» . Готово!

Сохраняем готовую картинку

Быстро и легко, правда? Всего три шага – и вы получили фото с прозрачным фоном!

При желании вы можете дополнительно обработать изображение уже после замены фона. Обратите внимание на панель инструментов. С помощью кистей осветления и затемнения, размытия и резкости вы сможете редактировать отдельные участки снимка. Инструмент «Штамп» пригодится для ретуши. Просто зажмите кнопку ALT, выберите на фото область, которая будет источником штампа, и закрасьте нежелательный объект.

Корректируем фото штампом

В дальнейшем вы сможете наложить картинку с прозрачным фоном на другой снимок, использовать в качестве клипарта или создать оригинальный коллаж. Всё это возможно с удобной опцией «Фотомонтаж», вы найдёте её в меню «Оформление».

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

Теперь вы знаете, как сделать задний фон картинки прозрачным и как можно применить этот полезный навык. Если вы решите скачать «Домашнюю Фотостудию», вам не нужно будет осваивать сложные графические редакторы. Качественная ретушь, быстрое устранение дефектов, доступный новичку фотомонтаж – в программе есть всё необходимое для работы с фотографиями. Преображайте любые изображения быстро, просто и с удовольствием!

Как в фотошопе сделать прозрачный фон?

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

Как в фотошопе сделать прозрачный фон — первый способ:

Кликаем левой кнопкой мыши «Файл» (File) (в левом верхнем углу). В раскрывающемся списке выбираем «новый» (New). В «содержании фона» (Background Contents) выбираем «прозрачный» (Transparent). Этот способ стоит использовать тем, кто хочет создать собственное изображение без фона. Он не подойдет, если вы хотите убрать фон из готового изображения. Для этого нужно воспользоваться вторым способом.

Как в фотошопе сделать прозрачный фон — второй способ:

Графический редактор фотошоп отличается тем, что в нем используется работа со слоями. Изображение, за которым делается прозрачный фон, нужно скопировать на новый слой. Делается это одновременным нажатием клавиш Ctrl и J (далее будем использовать общеупотребимое сокращение, например, Ctrl+J). Для выполнения этого можно воспользоваться другим способом — щелкаем правой кнопкой мыши по слою и в раскрывающемся меню выбираем пункт «создать дубликат слоя» (Duplicate Layer). В следующем появляющемся окне нажимаем «OK». Должно получиться два одинаковых слоя, только один из них будет называться «слой 1», а другой — «фон».

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

Третий этап — необходимо отделить изображение от фона. Это можно сделать с помощью инструмента под названием «резинка». На клавиатуре он включается клавишей «E». Размеры инструмента резинка можно менять с помощью клавиш «[» и «]» на английской раскладке. Менять размеры инструмента вам понадобится для того, чтобы аккуратно «стереть» фон вокруг объекта. Если вы все правильно сделали, то вокруг объекта у вас останется «шахматное поле» — это и есть отсутствие фона, то есть прозрачный фон.

Последний этап — это сохранение картинки с прозрачным фоном. Сохранение стандартное. В левом верхнем углу левой кнопкой мыши выбираем «Файл» (File) в раскрывшемся списке выбираем «Сохранить как» (Save as). Под изображением и строчкой «Названием файла» будет находиться строка «тип файла». В этой строке вы выбираете формат, в котором сохранится изображением. Можно выбрать формат «.psd» или формат «.png». Рекомендуется использовать последний формат. После этого действия нажимаем «сохранить». В формате JPEG прозрачность не сохраняется.

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

Как в фотошопе сделать прозрачный фон — третий способ:

Необходимо преобразовать фон картинки в слой. Для этого щелкаем правой кнопкой мыши по фону в области справа, где отображаются слои. Выбираем «Layer from background»/«Из заднего плана» (большинство версий фотошопа, скаченных с торрентов, на английском языке. Это замечание справедливо и для многих туториалов). В открывшемся меню кликаем «OK». Выбираем инструмент «Волшебная палочка». Им можно пользоваться, только если фон, который необходимо вырезать, однороден по цвету (в другом случае используем инструмент ”Лассо”). Выделяем фон. Нажимаем Delete. После этого видим наш объект на фоне шахматного поля. Это и есть прозрачный фон. Осталось только сохранить изображение описанным выше способом.

В сети есть большое количество видеоуроков по данной теме. Например, можно проследить за последовательностью действий на видео к статье.

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

Бывает попадается очень подходящая картинка для вашего поста и всё бы хорошо… Но фон картинки не подходит под фон блога или блока с текстом. Явно ни у одного меня такая проблема и ни у одного меня фон не белый, который подходил бы в большинстве случаев. Мне нужен прозрачный фон !

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

Как сделать прозрачный фон у картинки

Возьмём в пример одну простую картинку в формате.jpg (вообще формат не важен особо):

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

Загружаем наше изображение. Справа в окошке «Слои» появится слой «Фоновый», на котором замочек (не дает удалять фон картинки).

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

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

Теперь удаляем фон нажатием кнопочки «Delete» и получаем нужное нам изображение с прозрачным фоном.

В итоге на выходе получаем то же изображение с прозрачным фоном.

Единственный минус Pixlr — нельзя изображение сохранить в формат.gif, который тоже сохраняет прозрачный фон, но намного легче, чем формат.png. Но если нет другого выхода, почему бы не воспользоваться этим?

спасибо Натальи Петровой

28.01.2015 27.01.2018

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

Для чего нужен прозрачный слой или фон? Чтобы можно было одно изображение наложить на другое.

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

А так выглядит список слоев

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

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

Можно в самом фотошопе создать новый слой под яблоком и залить его любым фоном. Будет такой же результат.

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

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

Надеюсь назначение прозрачного слоя в фотошопе теперь вам понятно!

Единственный вопрос который у вас мог остаться — это как сделать прозрачный фон на своем изображении. Для этого вам нужно выделить часть изображения которую вы хотите оставить, а остальную область выделения удалить. Как это сделать правильно и как выделять сложные объекты вы можете узнать в моем бесплатном видео курсе «Как выделять в фотошопе» . Чтобы его поучить заполните данные в левой панели на сайте и курс придет вам на почту.

adobe-photoshop — Прозрачный CMYK? — Answer-ID

Если вы находитесь в поле печати и имеете доступ к RIP, вы сможете выполнить это через RIP и даже использовать эти файлы.

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

Ловушка в Illustrator и даже InDesign очень ограничена; они обычно захватывают только свои элементы, а не импортированные, если вы не используете надпечатку. Это очень сложная операция для захвата растрированного изображения вектором без RIP.

The only way I could see this work is by making 2 shapes in Photoshop as described above but import them separately in Illustrator, and use the colored one as multiply. I saved my 2 images as transparent tiff.

По тому, как вы это объяснили, это то, что вы уже делаете, но я не понимаю, почему это не работает для вашего CMYK.

Результат (2 файла импорта Photoshop + умножить смешение сверху. Синий в Illustrator):

But you’ll still be stuck with 2 issues:

1. это не очень точная ловушка, потому что это нужно сделать в 100% от размера вашего изображения или рассчитывается.
2. ваши растрированные изображения в Photoshop не будут захвачены …! ловушка в Photoshop сглаживает слои, поэтому вам нужно будет это сделать вручную тоже! (Обратите внимание, что два прямоугольника находятся в ловушке друг с другом, а фон — на изображении ниже, но не на изображении выше.)

Я не думаю, что использование прозрачности в том, как вы хотите сделать, будет работать для качественной работы; единственная прозрачность, которую вы можете получить, это не прозрачность, как фильм, а цвет не 100%! Это означает, что ваш ловушка будет иметь край 90-99% по сравнению со 100% цветом. Это выглядело бы странно, когда бы оно было напечатано и довольно раздражало, чтобы подготовиться в Photoshop, потому что только у краев будет не 100% заполнение. Я видел, что Acrobat Pro имеет функцию в предполетнике, чтобы сгладить такую ​​прозрачность с фоном; возможно, это могло бы работать тогда … в зависимости от вида работ, которые вы сделали в Photoshop.

Вы не можете делать именно то, что хотите, с основными функциями Illustrator, если только вы не делаете «хакерство» и не используете тонкие надпечатки над вашими работами в Photoshop, и это тоже очень раздражает, чтобы подготовить и не очень точно; ваш контур должен быть чем-то вроде 0,2pts, выровненным в центре двух ребер, которые касаются между фоном иллюстрации и импортированным файлом Photoshop! И это даст только результат «ok», если фон Illustrator имеет только один цвет (без градиента).

Таким образом, вы получите 1 вариант:

Купите плагин для InDesign (рекомендуется) или Illustrator, и это превратит ваш компьютер в мини RIP.

Вы можете посмотреть i-Trap и Prinergy от Kodak. Есть, вероятно, другие, и у некоторых есть испытания, которые вы можете проверить. Я лично не пробовал их и не знаю, нужны ли вам другие инструменты.

Импорт файла фотошопа в иллюстратор без белого фона

Сеть обмена стеков

Сеть Stack Exchange состоит из 176 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 6 лет, 8 мес назад

Просмотрено 104k раз

Я пытаюсь импортировать файл.psd файл в иллюстратор без отображения фона. У меня есть один слой в фотошопе, показывающий только прозрачное изображение. Я сохранил его как файлы .psd и .png.

Но всякий раз, когда я открываю .psd в Illustrator, он открывается с белым фоном. Что-то мне не хватает?

4,24522 золотых знака2424 серебряных знака4949 бронзовых знаков

Создан 08 авг.

2111 золотой знак11 серебряных знаков22 бронзовых знака

1. Убедитесь, что вы показываете сетку прозрачности в Illustrator.Просмотр> Показать сетку прозрачности. Возможно, прозрачность есть, а вы ее не видите из-за белого «холста» Illustrator по умолчанию.

2. Вы можете разместить файл .psd или .png вместо того, чтобы открывать его напрямую. Это особенно актуально, если вы используете изображение как часть большой композиции.

3. Убедитесь, что вы сохраняете файл .png и включаете параметр прозрачности. Возможно иметь прозрачные области в Photoshop и потерять их при экспорте.