Когда работаешь над дизайном сайтов, часто приходится сталкиваться с тем, что найденное изображение, которое идеально бы подходило к твоему сайту, имеет другой фон, который желательно бы убрать.
И так, открываем нашу картинку в фотошопе.
1.
Первое, что нужно сделать — создать у картинки рабочую область с прозрачным фоном. Для этого:
— в окошке слоёв кликаем два раза на наш слой (с замочком)
— В повившемся окошке нажимаем ОК
Замочек должен исчезнуть
Если фон однотонный:
Выбираем инструмент «Волшебная палочка
» — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск
), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной. Нажимаем Del и выделенная облась удаляется.
Если фон разноцветный:
Используем инструмент «Быстрое выделение
«. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.
Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.
3 . Если на рисунке осталось что-то лишнее, используем инструмент «Ластик «, просто затираем лишний фон.
4 . Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).
Полезное видео в тему:
Слева — изображение с непрозрачным фоном, справа — с прозрачным.
Как найти изображения PNG в Яндекс или Гугл картинках?
Обычно файлы изображений с прозрачным фоном имеют расширение png (от наименования формата файла Portable Network Graphics), так что нам достаточно будет набрать в строке поиска: «гном png», чтобы найти подходящую картинку.
Обратите внимание на «клетчатый» фон изображения в примере поиска Google. Именно таким образом во всех редакторах изображений показывается «прозрачный» фон рисунка.
В примере поиска «Яндекса» отображение прозрачного фона будет другим (картинка на темном фоне):
В любом случае, на картинке можно нажать правую кнопку мыши, скопировать ее в буфер обмена и тут же вставить в презентацию, проверить.
К сожалению, не всегда можно найти подходящее изображение в формате png с прозрачным фоном. Но если есть изображение на белом (или любом однотонном) фоне, то этот фон можно сделать прозрачным. Для этого мы воспользуемся мощным и бесплатным графическим редактором Pixbuilder Studio .
После скачивания установите и запустите программу.
Шаг 1. Как открыть изображение в редакторе Pixbuilder Studio
Первый способ
Подходит тем, кто пользуется браузерами Google Chrome, Яндекс.Браузер или Firefox.
Найдите картинку в интернете, выведите ее в максимальном качестве на экран браузера, нажмите на ней правую кнопку мыши и выберите Копировать картинку .
После этого в редакторе выберите меню Файл — Новый .
В появившемся окне, не меняя никаких параметров, нажмите ОК .
Второй способ
Скачайте картинку к себе на компьютер.
Перетащите файл с картинкой на поле редактора или откройте картинку через Файл — Открыть .
Перетаскивание
Команда: Файл — Открыть
В любом случае результат должен быть таким:
Шаг 2. Делаем прозрачный фон:
функция «Волшебная палочка»
В редакторе слева от картинки находится панель инструментов.
Нам потребуется «Волшебная палочка». Выберите ее, затем проконтролируйте, чтобы допуск был в пределах 20-40 единиц.
Нажмите на картинку для увеличения
Щелкните «Волшебной палочкой» в любой области белого фона. Вы увидите, как он выделился «бегущими муравьями».
И после этого должен получиться вот такой результат (картинка на прозрачном фоне).
Шаг 3. Сохраняем картинку с прозрачным фоном
В настройках сохранения укажите папку, введите новое имя файла и обязательно укажите расширение png , после чего нажмите Сохранить .
В появившемся окне надо проверить, чтобы все настройки были, как на представленном скриншоте, и нажать Сохранить .
Картинка с прозрачным фоном готова!
- Волшебной палочкой можно выделять не только внешние контуры, но и внутренние (например, для буквы «О» или «Ю»). То есть сначала надо выделить и удалить фон снаружи, а потом — внутри.
- Если палочка не помогает (неправильно выделяет фон), то можно воспользоваться Стирательной резинкой , и стереть фон вручную.
- Если палочка выделяет слишком много или слишком мало фона (это случается, когда цвета изображения и фона похожи), то можно изменить настройку Допуск в ту или другую сторону, и выделить фон заново. (См.комментарии).
- Если вам не понравится результат ваших действий, то его всегда можно отменить (вплоть до момента открытия картинки в редакторе) через меню Правка — Отмена или через выбор действия в окне История (окно находится в редакторе справа, второе снизу).
В заключение статьи хочется добавить, что Pixbuilder Studio — очень хороший и гибкий графический редактор (Волшебная палочка — это всего лишь один инструмент из многих), и с его помощью можно добиться многого в реализации ваших учебных материалов. Не бойтесь экспериментировать.
Доброго всем времени суток, мои дорогие друзья и читатели. Я каждый день пишу статьи на свой блог, и соответственно к каждой из них нужна какая-то вводная картинка. Чтобы ее сделать приходится искать специальные изображения в интернете. В идеале находятся изображения с прозрачным фоном. Это сильно облегчает работу, так как они идеально встают на картинку без лишних объектов.
Но бывает так, что нашел какое-то офигенное изображение, которое бы подошло к общей тематике, но она, собака такая, находится с лишними предметами и фоном. И что тогда? Забить на хорошую графику? Да ни за что. и как раз сегодня я вам с удовольствием покажу, как в фотошопе сделать прозрачный фон картинки несколькими довольно простыми способами.
Вы можете посмотреть мою статью, где я писал о том, . Этот способ подходит для нашей цели (вы также выделяете объект и переносите его на новый документ на прозрачном бэкграунде), но я бы советовал им пользоваться именно для таких сложных выделений. Для обычного удаления ненужного фона (то есть создания прозрачного) будем использовать более простые методы.
Перед тем, как приступить к основной работе, откройте изображение и постарайтесь обрезать его до того момента, чтобы элемент в нее помещался. Так будет легче, поверьте. Тем более делается это несложно. Просто возьмите и уменьшите границы.
Если вы рассчитываете делать что-то с нуля, то изначально позаботьтесь о том, чтобы при создании нового документа у вас был прозрачный фон. Для этого создаем новый документ и после выставления всех параметров обязательно установите «Прозрачный фон» . А дальше работаем в штатном режиме
Волшебная палочка
Этим инструментом лучше всего убирать задний план, когда он однородный, либо же с похожей структурой. Я для примера взял фотографию обезьянки на веревке. Как видите, она на белом фоне, а нам нужен именно прозрачный. Тогда хрустим пальчиками и начинаем делать всё по шагам.
Если вы видите, что фон выделяется либо слишком мало, либо слишком много, то поиграйте с допуском. Чем он больше, тем больше похожих пикселей он захватит, т.е. больше если допуск стоит минимальный, то он будет выделять строго один цвет, а если его увеличить, то в диапазон включатся еще и оттенки, которые близки к этому цвету.
Только не забываем, что такие изображения надо сохранять в формате PNG , иначе прозрачность потеряется и у вас снова будет белый фон.
Если фон очень разнородный и явно видно, что даже допуск не поможет, тогда воспользуетесь другими , например или даже лассо. Кстати я уже показывал это на .
Ластик
Также фон можно стереть обычным . Да-да, именно им. Только не забудьте снять замочек со слоя, а то вместо прозрачности все закрасится белым цветом.
Процесс конечно довольно муторный. Ведь надо и жесткость нормальную подобрать, и спокойно стирать, не задевая сам элемент, в данном случае леопарда. В любом случае, как вариант его нельзя исключать. Вы согласны?
Конечно есть способ и попроще, а именно инструмент «Фоновый ластик» . Единственное, лучше, чтобы фон и элемент достаточно отличались друг от друга по цвету и насыщенности. Поэтому я взял фотографию тигра, который прыгает на фоне неба. Отличный вариант.
Ну и заодно про еще одну стерку не забуду. В той же самой группе инструментов выберите «Волшебный ластик» . Опять же смотрим на допуск. При такой композиции можно поставить высокий уровень допуска, даже 80-90 .
Теперь нам нужно просто один раз нажать на небо. Видите, что получилось? Нам уже ничего не надо стирать. Большинство неба сбрилось благодаря одному нажатию.
Нажимайте на остатки небосвода, чтобы полностью его убрать. Тигр должен быть только на прозрачном фоне. Ну а дальше всё по схеме. Счищаете всё до прозрачности и сохраняете картинку в формате PNG .
Ну? Не красота ли? Всё. Теперь его можно использовать для каких-либо коллажей или других видов изображений. Можете даже сделать так, как будто он пытается на вас напасть))). Ну это уже как ваша фантазия вам подскажет.
Ну а если вы серьезно хотите научиться делать красивые, интересные и профессиональные коллажи, то обязательно посмотрите курс от Елены Виноградовой , профессионала в создании коллажей по этой теме. Курс действительно отличный и смотрится на одном дыхании.
Ну а на этом я с вами прощаюсь. Надеюсь, что мой сегодняшний урок вам понравился и был для вас полезен. Не забывайте подписываться на обновления блога и делиться с друзьями в социальных сетях. А вас я жду в своих других статьях. Кстати, про конкурс не забыли? Через неделю уже объявлю результаты. Так что спешим! Ну а вам я желаю успехов. Пока-пока!
С уважением, Дмитрий Костин.
