Как сделать фон прозрачным (photoshop)
Когда работаешь над дизайном сайтов, часто приходится сталкиваться с тем, что найденное изображение, которое идеально бы подходило к твоему сайту, имеет другой фон, который желательно бы убрать.
И так, открываем нашу картинку в фотошопе.
1. Первое, что нужно сделать — создать у картинки рабочую область с прозрачным фоном. Для этого:
— в окошке слоёв кликаем два раза на наш слой (с замочком)
— В повившемся окошке нажимаем ОК
Замочек должен исчезнуть
2. Далее…
Если фон однотонный:
Выбираем инструмент «Волшебная палочка» — это очень гибкий инструмент для выделения нужной области. Наша задача выделить весь фон, кроме рисунка. Для этого подгоняем настройки волшебной палочки (параметр допуск), пока не получим нужный результат. Так-же пользуемся клавишей Shift, чтобы выделить область помимо уже выделенной.
Если фон разноцветный:
Используем инструмент «Быстрое выделение«. Тут наша задача выделить не фон, а сам объект, который должен остаться. Нажимаем до тех пор, пока не выделится нужная область. Если выделилось лишнее, зажимаем Alt и минусуем облась. Посмотреть результат можно клавишей Q.
Когда выделение готово, копируем его Ctrl+C. Создаем новый документ с прозрачным фоном (Ctrl+N) и вставляем туда объект Ctrl+V.
3. Если на рисунке осталось что-то лишнее, используем инструмент «Ластик«, просто затираем лишний фон.
4. Сохраняем изображение для Web (Alt+Shift+Ctrl+S) выбираем формат GIF либо PNG (в других наш прозрачный фон превратится в белый).
Полезное видео в тему:
Как сделать фон рисунка прозрачным? Без фотошопа
Очень часто при создании поздравительных открыток или видео я сталкивалась с вопросом: как сделать фон рисунка прозрачным? Как это можно сделать без знания фотошопа?Тот, кто знаком с фотошоп проделает это без труда.
Но не все еще изучили эту умную программу. Как же быть им? Неужели нет выхода?
Ведь всегда есть желание сделать наши презентации, поздравления, странички наиболее привлекательными и профессиональными. Я уже рассказывала как в этих целях использовать программку FSCapture. Она поможет сделать Ваши картинки уникальными и даже сможете с ее помощью сделать Ваше первое видео.
А сейчас я Вам открою еще один секрет: Вы уже сегодня научитесь делать фон рисунка прозрачным. Причем сделаете это абсолютно бесплатно и потратите всего лишь 2 минуты Вашего времени.
Приступим к делу.
Найдите понравившуюся Вам картинку. Для начала это должно быть изображение на не многослойном фоне – например на белом. Переходим на страничку сервиса. Вам не нужно проходить нудную процедуру регистрации. Просто нажмите на ссылку онлайн сервиса.
Перед Вами откроется вот такое окно:
Нажмите на «Загрузить изображение с компьютера«. Выберете приготовленную Вами картинку.
Поместить ее можно в отдельную папку в изображениях. Или на рабочем столе, что-бы долго не искать. Кликам один раз на этой картинке и нажимаем «открыть«.
Рисунок появляется на страничке сервера:
Справа выходя 3 окошечка и в среднем из них нарисован замочек. Нажмите на нем 2 раза левой мышкой. Таким образом откроется дверь в волшебство.
С левой стороны Вы видите панель « Инструментов«, одним из которых является та «волшебная палочка», которой мы сейчас и воспользуемся. Кликните на ней один раз, а затем нажмите на любом пустом месте фона выбранной Вами картинки. Вокруг изображения появится пунктирная линия.
Завершающий шаг на пути к превращению: нажать кнопку » Del » (удалить) на Вашем компьютере. Фон становится в клеточку. Если не все пространство вокруг буде охвачено клеточкой, прикоснитесь еще раз к этому месту волшебной палочкой и нажмите кнопку «Del «
Теперь нужно сохранить Ваш шедевр на компьютере.
Нажимаем на крестик, как указано на слайде:
Выходит окошечко, в котором Вас спрашивают: «Сохранить изображение перед закрытием?» Нажимаем «Да«.
Перед Вами появляется окно, в которое вписываете новое название картинки, выбираете формат
Выбираете созданную Вами папку и нажимаете » Сохранить«.
Поздравляю! Вы стали волшебником! Cделали фон рисунка прозрачным. Ваш первый шедевр готов! Жду комментариев. Похвастайтесь Вашими успехами.
В этом видео Вы можете посмотреть более подробно, как сделать фон рисунка прозрачным:
C любовью и уважением, Светлана Дубан — Аврора .
Мой скайп: aleksandra200628
Похожие статьи :
2.
3. Сохранение изображений с прозрачностью 2.3. Сохранение изображений с прозрачностью2.3. Сохранение изображений с прозрачностью
Существует два разных подхода сохранения прозрачных областей в файлах: простая бинарная прозрачность и прозрачность альфа. Простая бинарная прозрачность поддерживается в формате GIF. Здесь один цвет в таблице цветов отведён прозрачному цвету. Прозрачность альфа поддерживается в формате PNG. Здесь информация о прозрачности сохранена в отдельном канале альфа.
| Примечание | |
|---|---|
Обычно нет необходимости сохранять изображения в формате GIF, потому что PNG поддерживает все аспекты GIF и даёт дополнительные (например, прозрачность альфа). Однако, GIF всё ещё используется для анимации. |
Процедура 6.1. Создание изображений с прозрачными областями (прозрачность альфа)
Рисунок 6.10. Изображение с Уилбером в режиме RGBA
Чтобы экспортировать изображения с прозрачностью альфа, необходимо иметь канал-альфа. Чтобы проверить, есть ли у изображения альфа-канал, перейдите в диалог каналов и посмотрите, есть ли среди них, помимо каналов красного, зелёного и синего, канал «Alpha». Если это не так, то добавьте новый альфа-канал из меню слоёв: + → .
В исходном файле XCF есть слои фона, которые можно удалить. GIMP предлагает набор фильтров для создания градиентов; проверьте подменю +.
Для демонстрации прозрачности мы добавили свечение вокруг Уилбера.-
После завершения работы над изображением, экспортируйте его в формат PNG.
Для демонстрации прозрачности мы добавили свечение вокруг Уилбера.Рисунок 6.11. Изображение Уилбера с прозрачностью
Прозрачный логотип – что это такое и как получить?
Vasyl Holiney Обновлено Loading…Содержание:
1.Где используют логотип на прозрачном фоне?
2.Форматы логотипов с прозрачным фоном
3.Как сделать логотип прозрачным?
4.Создать прозрачный логотип c Логастер
Современные логотипы обладают целым рядом особенностей, отличающих их от других видов графических изображений.
Прежде всего, к ним относят широкую сферу применения – как в печатном, так и в веб-формате. Во многих случаях лого является зависимым элементом, который должен оптимально разместиться на фоне страницы сайта или каких-либо полиграфических материалов. Чтобы добиться такого результата, предварительно нужно избавиться от цветного фона, сделав логотип полностью прозрачным.
Где используют логотип на прозрачном фоне?
Особенно часто логотипы с прозрачным фоном используются на сайтах или в социальных сетях (на страницах или в группах компании, бренда, продукта).
Главное их преимущество – это универсальность, позволяющая оптимально вписаться в дизайн с любым расположением элементов и цветов. Такую графику можно легко и быстро загружать на различные сайты, не беспокоясь о том, как встроить ее в фон каждого из них.
Кроме того, прозрачные логотипы нередко применяют в качестве водяного знака для картинок – товаров в каталогах интернет магазинов и т.д.
С их помощью вы сможете эффективно защитить любой графический контент от воровства и при этом не навредить его внешнему виду.
Еще такие лого оптимально подходят для полиграфической продукции, особенно при печати материалов небольших размеров. Например, если вы разрабатываете дизайн сувениров, визиток, календарей, то на них может не найтись отдельного места для лого с собственным фоном. А прозрачный объект быстро размещается где-угодно без особых сложностей.
Форматы логотипов с прозрачным фоном
Для создания данного типа графики подходят далеко не все существующие форматы, а только некоторые из них. В частности, к ним относятся:
Логотип в PNG формате. Наиболее популярное расширение для прозрачных логотипов – свободный растровый формат, позволяющий эффективно сжимать изображение без потери его качества. PNG был разработан в 1996 году, как некоммерческий аналог GIF, однако активно используется по сей день, благодаря своему удобству и широким возможностям для редактирования файлов. Формат поддерживает полноцветную графику, открывается и обрабатывается во всех популярных графических редакторах (например, Photoshop).
Именно логотипы в PNG c прозрачным фоном чаще всего (до 90% случаев) используются на сайтах, фотографиях или же в печати;
Логотип в GIF формате. Старейший растровый формат (изобретенный в 1987 году) частично поддерживает прозрачность фона, поэтому в нем также можно создавать соответствующие логотипы. Для этого достаточно назначить прозрачным один из его 256 цветов, после чего сквозь картинку будет проступать фон веб-страницы. Важным недостатком GIF считается невозможность регулировать степень прозрачности, что делает это расширение не самым популярным в наши дни;
Логотип в SVG формате. Для создания подобной графики еще применяют векторный формат SVG, доступный в открытом стандарте. Сделать это в нем можно, благодаря свойству fill-opacity, позволяющему плавно изменять прозрачность фона картинки при помощи числовых значений. SVG имеет большое количество преимуществ, включая удобство обработки (даже в текстовых редакторах) и отличную масштабируемость.
Данные файлы очень легко встраиваются в разметку веб-страниц, так как формат был создан на основе популярного языка разметки XML. При этом логотипы в SVG наиболее часто применяются профессиональными дизайнерами в сложных и объемных проектах, поэтому данный формат редко используется большинством обладателей лого.
Как сделать логотип прозрачным?
Большинство профессиональных дизайнеров по умолчанию оформляют свои логотипы на прозрачном фоне, если у клиента не было особых пожеланий по этому поводу. Однако что делать, если вы получили лого с цветной подложкой и теперь хотите от нее избавиться? Сделать это довольно легко и быстро вам помогут современные графические редакторы – например, Adobe Photoshop. Смотрите видео ниже как убрать фон логотипа в Photoshop.
Если у вас есть исходники логотипа в формате PSD, то откройте изображение в Photoshop и первым делом выделите все слои его объектов, за исключением фонового.
Затем вам нужно создать новую группу (папку) и перенести туда их все – такая операция поможет впоследствии легко регулировать прозрачность самого логотипа, например, если понадобится сделать его частично прозрачным.
Для получения новой пустой папки нажмите на пиктограмму, расположенную в нижней правой половине панели слоев. После этого перейдите на строку инструментов, относящихся к фоновому слою – вам понадобится пиктограмма с глазом, находящаяся на ее левом краю. Щелкнув по ней, вы сможете полностью отключить видимость фона, без особого труда сделав свой логотип на 100% прозрачным.
Создать прозрачный логотип онлайн при помощи сервиса Логастер
Существует еще один, более простой и оперативный способ добиться такого результата, не тратя свое время на работу в графических редакторах. В частности, получить прозрачный логотип за считанные секунды вам поможет сервис Логастер – здесь вы можете с легкостью создать оригинальную эмблему для своего бренда, товара или услуги, а затем скачать ее в таком виде прямо на свой компьютер.
После того, как ваш лого будет готов, перейдите в раздел скачивания и выберите для этого формат PNG, PDF или SVG.
Затем на ваш жесткий диск мгновенно загрузится архив с логотипом в различных версиях, две из которых (полноцветная и черно-белая) будут иметь прозрачный фон. Определить их можно по слову transparent, присутствующему в названии файла.Таким образом, сервис Логастер быстро поможет вам создать прозрачный логотип, чтобы затем без каких-либо ограничений использовать его для оформления интернет-сайтов или полиграфических материалов. Вот более детальная статья как получить логотип с прозрачным фоном, который созданный на сайте Логастер.
Готовы к созданию своего фирменного знака?
Если да, то переходите в онлайн-сервис Логастер. Там вас уже ожидают удобный интерфейс и огромная база привлекательных макетов.
Руководитель отдела маркетинга и главный генератор идей компании Logaster.
Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.
Как сделать прозрачный фон в Gimp
Чаще всего прозрачный фон в изображении требуется для создания фирменных знаков, коллажей и логотипов для видеороликов. Титры в фильме, графические мемы в Internet, в конце-концов технология chromakey (зеленый фон при съемках фильма) так же имеют много общего с технологией прозрачного фона.
Для выполнения этой задачи воспользуемся бесплатной программой Gimp 2.8, которая по своим возможностям не уступает многим платным аналогам. Давайте посмотрим, как сделать прозрачный фон в Gimp и как дальше воспользоваться изображением с прозрачным фоном.
Содержание статьи:
Как сделать прозрачный фон в Gimp
У нас есть две картинки и мы хотим сделать из них коллаж. Разместить изображение пингвина на фото тропического пляжа.
Почему бы и нет. Пингвинам тоже нужно отдыхать 🙂
Пингвин — символ Linux.
Тропический пляж — место, где отдыхают пользователи Linux 🙂
Быстрый способ
Запускаем Gimp и открываем оба файла с картинками.
Начинаем переносить пингвина под пальму. Воспользуемся широко распространенным способом «Скопировать» -> «Вставить». Для этого:
- активируем окно с пингвином и через Правка/Копировать видимое (Shift+Ctrl+C) копируем пингвина в буфер обмена;
- затем переходим в окно с пальмой через Правка/Вставить (Ctrl+V) вставляем изображение с пингвином.
Готово. Пингвин под пальмой, но что-то не так. Если мы просто скопируем одно изображение поверх другого, то увидим, что белый фон вокруг пингвина закрывает часть изображения с тропическим берегом. Это нам не подходит. Значит нам необходимо избавиться от белого фона. Или, иными словами, сделать фон прозрачным. Тогда через этот прозрачный фон будут видны объекты с картинки тропического берега.
Правильный способ
Прозрачный фон в gimp делается несколькими способами, но я приведу один, как самый надежный и работающий в любом случае.
Шаг 1. Альфа-канал
На первом этапе нужно определиться есть ли в изображении альфа-канал. Если его нет, то его надо создать. Именно он будет отвечать за прозрачность. Привыкайте сразу, если где-то говорят об альфа-канале значит подразумевается прозрачность и наоборот. Выбираем в меню Слой/Прозрачность/Добавить альфа
Если альфа-канал уже есть (меню неактивное), то ничего добавлять не нужно. В случае, если меню активное (позволяет добавить), то добавляем альфа-канал к нашему изображению.
Есть другой способ проверки наличия альфа-канала в изображении. Для этого откройте стыкуемый диалог «Каналы«, через меню Окна/Стыкуемые диалоги/Каналы. Если в списке каналов есть «Альфа«, то все в порядке и ваше изображение готово к созданию прозрачности.
Шаг 2. Зоны прозрачности
После того, как мы подготовили изображение к работе с прозрачностью (добавили альфа канал), переходим к заданию областей на изображении, которые будут прозрачными. Я отметил на рисунке цифрами, те области через которые будут видны пальмы, море и песок.
Выделение зон в Gimp — это отдельная история, которой не хватит одной публикации. Существует несколько инструментов, плагинов и множество способов, чтобы выделить группу пикселов для дальнейшей обработки. В нашем случае мы рассмотрим самый простейший способ выделения зоны через инструмент «Выделение смежных областей».
Этот инструмент действует по принципу добвавить в выделенную зону «Все пикселы одного цвета» вокруг того по которому кликнули мышкой. В нашем случае с пингвином — это то, что надо.
Шаг 3. Прозрачный фон
Теперь все готово к созданию прозрачного фона. Для этого жмем клавишу Delete и изображение принимает вид.
То что раньше было белым, стало в серый «квадратик», таким способом Gimp показывает прозрачные области.
Наше изображение с прозрачным фоном готово. Вы можете его записать на диск для дальнейшего использования, выложить в Internet, отправить по почте. Это обычное изображение и большинство просмотровщиков и браузеров прекрасно справляются с его показом.
Шаг 4. Запись в файл
Чаще всего картинки с прозрачным фоном хранят в форматах PNG, GIF и TIFF. В PNG и TIFF прозрачность реализуются через alpha канал, который отвечает за участки с прозрачным фоном. С помощью alpha канала можно сделать не только прозрачное, но и полупрозрачное изображение. В GIF несколько другая технология, там нет alpha канала и прозрачность реализуется в виде самостоятельного цвета в палитре. Полупрозрачности в GIF нет.
Для записи изображения с прозрачными областями в формате PNG выбираем меню Файл/Export As (заметьте, именно Export As, а не экспорт, в некоторых версиях Gimp эта строка не переведена на русский язык) и в появившемся диалоге вводим имя файла, например linux.png. Далее жмем кнопку «Экпортировать«, в диалоге настройке параметров PNG ничего не трогаем и жмем «Экспорт«.
А так выглядят настройки при экспорте в GIF. Тоже ничего нетрогаем и жмем «Экспорт«.
Тут вот еще какой интересный момент. Когда вы открываете в Gimp изображение из PNG или GIF, тот нет необходимости проверять есть ли там альфа-канал или нет, как это описано на Шаге 1. Альфа канал в PNG или GIF всегда существует и можно сразу же начинать работать с прозрачным фоном без ручного добавления альфа-канала.
Шаг 5. Сводим все вместе
Теперь проверим результат нашей работы. Мы возьмем изображение с прозрачным фоном и наложим его поверх обычного изображения. Давайте разместим пигвина в тени от пальмы:
На картинке с пингвином: Правка/Копировать видимое (Shift+Ctrl+C) копируем пингвина в буфер обмена.
На картинке с пальмами: Правка/Вставить (Ctrl+V) вставляем изображение с пингвином на фото с пальмами.
Как видно, прозрачность работает. Там, где раньше был белый прямоугольник, теперь видны море, пальма и песок. Коллаж готов. Изображение с пингвином органично вписалось в тропический пейзаж. Теперь объединим все видимый слои (а у нас их всего два) командой меню Слой/Прикрепить слой (Ctrl+H). И запишем готовый коллаж в файл Файл/Export As.
Интересно, что после сведения слоев, прозрачный фон исчез. В финальном изображении, где пингвин под пальмой уже нет прозрачного слоя. Если вы хотите, чтобы прозрачный фон на слое с пингвином остался для дальнейшей работы над коллажом, то запишите готовое изображение в файл формата XCF (родной формат для GIMP), только не сводите все слои воедино, пусть остаются раздельными.
Заключение
В этой статье мы рассмотрели, как сделать прозрачный фон в gimp 2.8. Как наложить изображение с прозрачным фоном поверх существующего. Быстро пробежались по альфа-каналу. Узнали какие графические форматы поддерживают прозрачность. На простом примере была продемонстрирована работа с прозрачным фоном.
Логотип на прозрачном фоне: что это такое и как его создать | Дизайн, лого и бизнес
Почти каждый человек на земле видел порядка десяти или двадцати логотипов различных компаний. Логотипы представляют собой изображение, состоящее из графической и текстовой части. Знак любой фирмы должен красиво выглядеть как в печатно-бумажном исполнении, так и в веб-версии. Вот почему чаще всего рекомендуется не использовать цветной фон, а отдать предпочтение логотипу на прозрачном фоне. И в этой статье, мы расскажем, почему.
Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.
Создать логотип онлайнОбласти применения логотипа с прозрачным фономЧаще всего лого такого вида можно встретить на сайтах компании, страничках в социальных сетях, блогах о продукции или рекламных постах.
Основной причиной, почему компании выбирают логотип с прозрачным фоном является его универсальность. Такие лого могут отлично вписаться в дизайн любого сайта, прекрасно сочетаться с уже используемым набором цветов на веб-странице и гармонировать с другими соседними элементами.
В последнее время все чаще и чаще логотипы стали использовать в качестве водяного знака, которые можно также найти на бумажных деньгах на территории любой страны мира. Это позволяет сделать продукцию уникальной и избежать подделок. Из этого вытекает существенный плюс таких лого: их можно использовать, как юридический гарант оригинальности и качества.
Все свадебные фотографы добавляют логотип со своим именем на фотографии для клиентов, что позволяет им делать бесплатную рекламу. Молодожены обязательно разошлют фотографии всем знакомым, а те посмотрят их и обратят внимание на марку создателя потрясающих снимков. Также это сделает отличную рекламу в социальных сетях, где иногда сложно определить, чьей руке принадлежит фотография и где найти автора.
Форматы изображений для логотипов с прозрачным фоном
Но, к сожалению, у логотипов есть небольшой недостаток. Не все современные форматы цифровых изображений могут подойти для создания и сохранения готово результата. В данном разделе мы расскажем о наиболее подходящих форматах.
Логотип в PNG формате
Пожалуй, это самый популярный вариант, представляющий собой растровый формат изображения, который позволяет сохранять сжатые изображения с минимальными потерями качества. Он был придуман в конце двадцатого века, а именно в 1996 году, в качестве неофициальной (пиратской) версии популярного в те времена GIF.
Наверное, из-за своей удобности и большому спектру возможностей для редакторов изображений, формат вошел в активное использование и стал очень популярным.
Еще одним плюсом является то, что PNG поддерживается всеми современными редакторами изображений (Adobe Photoshop, Adobe LightRoom и illustrator, и др.)
Более восьмидесяти процентов современных лого были сделаны в этом формате и использованы для оформления веб страниц многих успешных компаний.
Логотип в GIF формате
Об этом формате уже мельком упоминалось выше в статье. Этот старый формат, хоть и был вытеснен PNG, но по прежнему применяется в некоторых случаях. Пожалуй, самым популярным его использованием на сегодняшний день является загрузка мемов в социальных сети. Формат был разработан в далеком 1987 году. Нельзя сказать, что это самый удобный лого-формат, но есть некоторые способы сделать фон прозрачным с помощью него. Например, назначить прозрачным один из двухсот пятидесяти шести цветов, тогда пользователь сможет видеть фон бумажной продукции или веб-сервиса. Но вот тут возникает минус: отрегулировать степень прозрачными у GIF невозможно. Именно поэтому его используют лишь в самых редких случаях всего несколько процентов современных компаний.
Логотип в SVG формате
Векторный формат SVG обладает одним свойством, которое позволяет сделать различную степень прозрачности фона, используя fill-opacity (в основе лежит изменение числовых значений, что скорее интересно лишь программистам, а не обычным пользователям). Формат был создан на основе XML (язык разметки), что существенно упрощает размещение логотипа на сайте.
Отметим, что чаще всего SVG применяется настоящими профессионалами, дизайнерами и программистами. Если же вы обычный пользователь с основными знаниями персонального компьютера, как и большинство создателей новых компаний, то, скорее всего, вам не подойдет такой тип изображения.
Прозрачный логотип за несколько шагов
Как правило, все логотипы создаются на прозрачном фоне (при заказе у фрилансеров и профессиональных графических дизайнеров), если заранее не обговорено наличие цветной заливки. В случаях получения лого на цветном фоне не стоит сразу расстраиваться. Если вы передумали и желаете сделать прозрачный, то на помощь придет знаменитый Фотошоп. В интернете есть много обучающих видео, помогающих вырезать фон и сохранить полученное изображение в одному из форматов, о которых говорилось выше.
Для заказчиков, которым повезло, и они получили работу в формате PSD (файл программы Adobe Photoshop), — все гораздо проще. Откройте файл, выделите все слои, используя клавишу ctrl/cmd, кроме фонового. Нажмите комбинацию клавиш CTRL+C, создайте новый проект и зажмите CTRL+V. Теперь вы имеете логотип на прозрачном фоне, как и хотели. По желанию можно отредактировать цветовую гамму, добавить недостающие элементы — помощником станет YouTube с большим числом обручающих роликов.
Что делать, если нет Photoshop и других графических редакторов?Вы хотите создать логотип для своей компании и понимаете его важность и необходимость, но, к сожалению, не умеете пользовать ни одним из графических редакторов и не желаете платить фрилансерам за эту услугу? Хотите сделать все самостоятельно, но не знаете как? На помощь прибегут онлайн сервисы по созданию логотипов, которые осваиваются за несколько минут и направлены на получение отличного результата за смешные деньги.
Одним из таких сервисов является онлайн-конструктор Turbologo! Большое количество рисунков, текстовых заготовок и символов станут отличными помощниками и заметно сэкономят время на создание своего собственного и качественного логотипа.
После создания логотипа его очень легко сохранить на компьютер во всех необходимых форматах.
Вот так просто можно создать прозрачный логотип для своего интернет-магазина, рекламной кампании и бумажной продукции начинающегося бизнеса. В конце хочется пожелать вам не сдаваться и тогда компания поднимется на вершину горы под названием «Успех».
Другие статьи
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
Gif, Png или Jpg — форматы растровой графики для веба, их плюсы и минусы при использовании на сайте
Обновлено 22 мая 2021- Растровая графика для веба в лице Гиф, Джейпег и Пнг
- Формат Gif — элементы дизайна и анимация для сайта
- Gif-анимация и ее использование
- Поддержка прозрачного фона
- Какую графику лучше сохранять в Гиф?
- Jpg — полноцветные изображения с малым весом
- Плюсы и минусы Джейпег
- Какие изображения лучше сохранять в формате Jpg (JPEG)?
- Png — замена Gif и Jpeg, а так же прозрачный фон
- Png8 и Png24 — альтернатива Gif и Jpeg
- Png 32 — полноценная прозрачность с альфа каналом
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить про форматы растровой графики, которые было уместно применять для картинок выводимых на сайте, да и вообще.
Мы рассмотрим Gif, который популярен сейчас именно из-за поддержки им гиф анимации, Jpg, который очень хорошо подходит для вставки полноцветных фотографий и, конечно же, Png, который позволяет создавать картинки с прозрачным фоном и может служить отличной заменой упомянутых ранее форматов. Так же можете почитать про наполовину графический, а наполовину текстовый формат djvu.
Все они активно используются в современной верстке сайтов, но тонкость заключается в том, чтобы выбрать оптимальный формат для каждого конкретного случая, чтобы и качество изображения не пострадало, и его вес был бы минимальным. Саму графику я советую брать с бесплатных сервисов на подобии IconFinder, Freepik, PSDGraphics и других подобных, чтобы потом не было бы проблем с нарушением авторского права.
Растровая графика для веба в лице Гиф, Джейпег и Пнг
Сейчас очень трудно представить веб-сайты и отдельных веб-страниц совсем без наличия на них каких-либо фотографий, значков или картинок. Кстати, первым браузером, который мог показывать графику, стал Mosaic (мозаика), появившийся практически одновременно с появлением языка гипертекстовой разметки Html.
Причем, как я уже упомянул выше, для добавления на сайт подойдут не все форматы изображений, а только определенные, максимально под это заточенные — Gif, Png и Jpg. В зависимости от типа картинки, которую вы хотите добавить на веб страницу, вам и нужно будет выбирать один из упомянутых форматов, которые, в свою очередь, относятся к так называемой растровой графике.
Сама по себе она подразумевает, что изображение на бумаге или мониторе будет формироваться из так называемых единичных элементов называемых пикселями (точек цветов). Все картинки любого формата, относящегося к растровой графике, обладают некоторыми свойствами.
Размер картинки у них определяется таким понятием, как разрешение, которое представляет из себя размер изображения в пикселах по горизонтали и вертикали, например, 300 на 200. Иногда, правда, говорят об общем количестве пикселей в картинке, например, производители фотоаппаратов (12 Мега пикселей и т.п.).
Применительно к вебу, физический размер растровой картинки может существенно зависеть от величины пикселя (зерна экрана) того устройства, на котором пользователь осуществляет просмотр веб страницы. Изображения так же характеризуются таким понятием, как количество цветов используемых в нем. Например, для Gif используется всего лишь 256 цветов, которые задаются в одном байте информации.
Ну, и кроме этого в этих форматах могут использоваться различные цветовые модели, при помощи которых формируются все возможные оттенки. Когда мы рассматривали с вами написание кодов цветов в Html, то там довольно подробно рассмотрели принципы формирования модели RGB.
Одним из основных недостатков растровой графики является большой размер результирующих картинок, даже в форматах Gif, Png и Jpg, которые используется в вебе. Естественно, что для уменьшения результирующих изображений используются различные алгоритмы сжатия, которые работают как с ухудшением качества (сжатие с потерями), так и без оного.
Все это очень похоже на принципы работы алгоритмов сжатия аудио — MP3 сжимает с потерями, причем, в первую очередь удаляются всякие переходы, которые скорее всего не будут восприниматься ухом человека. Такой аналогией в мире растровой графики может служить формат Jpg, сжатие информации в котором осуществляется с потерями. При этом учитываются возможности визуального восприятия человека и, в первую очередь, удаляются те детали, которые будут особо и не заметны.
Но существуют и алгоритмы сжатия картинок без потерь — BMP, Gif и Png. BMP чаще всего представляет из себя не сжатое изображение, а вот Gif и Png сжимаются без потерь за счет удаления повторяющейся и избыточной информации (получается что-то на вроде архивирования, но учитывающего особенности растровой графики).
Существует множество графических редакторов, которые умеют работать с растровой графикой (например, все тот же фотошоп или его онлайновый аналог Pixlr), но для подготовки графики для веба следует использовать ориентированные именно на это редакторы, ибо только тогда вы сможете получить максимально оптимизированные картинки, которые затем не будут создавать излишней нагрузки на сервер вашего хостинга при их загрузке в браузеры пользователей.
Формат Gif — элементы дизайна и анимация для сайта
На данный момент практически все браузеры поддерживают три основных формата растровой графики используемых для веба — Gif, Png и Jpg. Исторически первым появился Гиф и именно с помощью него в первых браузерах можно было добавлять и отображать картинки и медийную информацию, которая в первую очередь выражалась в так называемой Гиф анимации.
Аббревиатура Gif расшифровывается, как Graphics Interchange Format — формат графического обмена. Произносится как гиф, но разработчики стандарта считали, что правильно его называть джиф, но прижилось другое название в русской интерпретации.
Т.к. он был разработан давно, а скорость интернета у большинства пользователей в то время была, ох какой малой, то и при его создании делали основной упор на максимальное уменьшение размера результирующей картинки (писал об этом в статье про программу для просмотра изображений от FastStone или от Гугла под названием Picasa).
В связи с этим, Gif может в себя включать палитру, состоящую всего лишь из 256 цветов (ее так же еще называют индексированной палитрой). Т.е. изображение, преобразованное в этот формат всегда будет содержать не более чем 256 оттенков, а все остальные цвета будут создаваться на основе подмешивания (хитрым образом подбираются соседние пикселы из базовой палитры, чтобы человеческий глаз на отдалении воспринимал бы их как нужный в этом месте цвет).
Но, к сожалению, на практике, при преобразовании полноцветных фотографий в Гиф, вылазит куча артефактов (из-за этого самого подмешивания), которые делают фотографии неприемлемым для выкладывания в вебе. Поэтому для вывода на страницы сайта полноцветных картинок и фото он не используется (для этого чаще всего выбирают Jpg или Png).
Gif-анимация и ее использование в интернете
Обладая таким существенным недостатком, Gif уже давно должен был бы кануть в лету, но он, однако, по-прежнему живее всех живых, и часто изображения в этом формате можно встретить на страницах сайтов.
Тут вся заковыка в том, что формат Гиф поддерживает анимацию (единственный из всех используемых в вебе). Всякие анимированные смайлики и аватарки (в том числе и граватары), которые вы в большом количестве можете встретить в интернете, имеют расширение Гиф.
Правда, какое-то время уже развивается альтернативный ему формат Mng, добавляющий возможность анимации в Png, но его развитие и распространение идет не слишком высокими темпами. Поэтому, если не брать в расчет флеш технологию, вся анимация в вебе создается на базе Gif и флеша.
Суть этой анимации заключается в том, что в контейнере Гиф находится не одна картинка, а сразу несколько и там же прописано время, через которые эти изображения будут сменять друг друга. При этом можно будет зациклить анимацию, когда за последним кадром будет опять начинаться показ первого.
Есть специализированные редакторы, в которых можно создавать Gif анимацию. Главное создать нужное количество картинок определенного размера, а потом они размещаются на временной шкале и задается интервал для их смены.
В результате получает тот самый эффект мультика, который мы уже привыкли наблюдать на веб страницах. Иногда даже в глазах рябит от анимированных баннеров (читайте про то, как сделать баннер онлайн), смайликов, аватаров. Примером Гиф анимации может служить гоблин со страницы «О блоге» моего проекта.
Гиф поддерживает прозрачный фон (почти)
Но анимация — это не единственная фишка этого формата. Он может так же поддерживать примитивный способ формирования прозрачности для создаваемых изображений. Один из 256 возможных цветов в Gif задается как прозрачный и сквозь него будет просвечивать фон веб страницы, на которой будет расположена эта картинка.
Но проблема состоит в том, что для любого пиксела в изображении этого формата возможно лишь два значения — прозрачный или непрозрачный (два крайних состояния без возможности промежуточных вариантов типа полупрозрачный, на четверть прозрачный и т.п.). Т.е. о таком понятии, как альфа-канал (используемого в Png), в прозрачном Gif речи не идет. Из-за этого возникают сложности с отображением плавно изменяющего уровня прозрачности.
Но все равно прозрачный Гиф находит применение в вебе. Например, в таком формате очень часто сохраняют различные маркеры, используемые на веб страницах. Фон вокруг маркера делается прозрачным и сквозь него будет просвечивать фон веб страницы. Например, вот так бы выглядел маркер с серым фоном:
А так этот же маркер будет выглядеть при замене серого фона на прозрачный цвет при сохранении в Гиф:
Для того, чтобы сформировать плавные края с падением прозрачности в картинках Gif, идут на одну хитрость. В любом графическом редакторе при создании изображения в этом формате, у вас будет возможность указать так называемый цвет MATE (иначе будет в качестве него использоваться цвет по умолчанию, обычно белый).
Цвет MATE подмешивается в те области Гифа, где вам требуется создать плавные края с падением прозрачности, но все это будет хорошо смотреться только для того фона веб страницы, который совпадает с указанным вами MATE. А вот поверх другого оттенка эта картинка будет выглядеть очень не здорово.
Для какой веб-графики имеет смысл использовать формат Gif?
Как я уже упоминал чуть выше, в этом формате рисунки сжимаются (преобразуются) без потерь, но только в том случае, если исходная картинка была 8-ми битной (для кодирования цвета отводился всего лишь один байт), т.е. содержало 256 цветов. Если же исходник был полноцветным, то будет ухудшение качества при сохранении или преобразовании в Gif, именно в силу потери части оттенков.
Алгоритм сжатия (преобразования) в Гифе работает таким образом, что лучше всего он будет оптимизировать размер фото при вертикальном изменении цвета (градиенте). Т.е. имеет смысл его использовать для сжатия картинок, цвет в строках которых сильно не меняется.
А вот при преобразовании в Gif фото с горизонтальным или наклонным градиентом, итоговая картинка может получиться очень большого размера, например, по сравнению все с тем же Png. Ну, а кроме этого возможно вылезание неприятных артефактов.
Кроме этого, данный алгоритм сжатия был в свое время запатентован, и именно поэтому началась усиленная работа над альтернативным Png 8, но на данный момент сроки патентов Gif уже истекли. ПНГ получился в итоге на голову лучше Гифа и продолжает набирать популярность среди вебмастеров.
Jpg (JPEG) — полноцветные изображения с малым весом
Jpg был разработан для сжатия и хранения полноцветных фотографий. Он является собственностью ассоциации американских фотографов, о чем, собственно, и говорит аббревиатура Jpeg — Joint Photographic Experts Group. Хотя сама же эта ассоциация говорит, что это открытый формат.
Как я уже упоминал чуть выше, он сжимает изображения с потерей качества. Вся картинка делится на квадраты размером 8 на 8 пикселей и затем начинает работать алгоритм сжатия, который группирует из этих простейших квадратиков разные простые фигуры. Все те различия в цветах, которые человеческий глаз заметить не в состоянии, из картинки в Jpg удаляются.
Плюсы и минусы Джейпег
Благодаря удалению части информации, которая все равно не будет заметна невооруженным взглядом, Jpeg позволяет иногда сжать полноцветные картинки в десятки раз даже без видимой потери в качестве.
Но, с другой стороны, даже при выборе максимального качества у вас не получится сохранить фотографию в этом формате с абсолютно тем же качеством, что имел оригинал. Потери будут обязательно, но не всегда заметные глазом без увеличения.
Вы можете проверить это сами, взяв какую-нибудь очень качественную фотография и сохранив ее в Джейпег с максимальным качеством несколько десятков раз подряд. Поэтому лучше не сохранять повторно в Jpg исходники такого же формата — будут серьезные потери в качестве из-за накапливания и накладывания артефактов. Поэтому не стоит сохранять незаконченное изображение в JPEG, а затем продолжать его редактирование — существенно потеряете в качестве.
Вот пример такого издевательства (всего несколько повторных сохранений в формате Джепег и на картинку без слез не взглянешь):
Но несмотря на указанные недостатки Jpeg стал очень популярным особенно после появления цифровой фотографии. Основные его достоинства — это возможность быстрого, нересурсозатратного и очень сильного сжатия полноцветных изображений. Правда, этот формат растровой графики назвать полноцветным трудно, т.к. он не совсем охватывает всю палитру RGB, но это можно отнести к несущественным недостаткам.
Какие изображения лучше сохранять в формате Jpg?
Jpg лучше всего подходит для сохранения фотографий с плавными переходами яркости и контраста, а вот для сохранения чего-то вроде чертежей, текстов и других фотографий с резкими контрастными переходами он подходит очень плохо, и в этом случае лучшим вариантом будет использование сжатия без потерь в Png.
Смотрите, как неприглядно выгладит скриншот текста в формате JPEG (хотя при таком же и даже меньшем весе в формате PNG картинку вообще было бы не отличить от оригинала):
У Jpg (JPEG), как я уже упоминал, есть возможность задать качество получаемого изображения, регулируя степень его сжатия. При сохранении фото, на которых, например, много неба, следует ставить качество (степень сжатия) Jpeg близкое к максимальному (минимальное сжатие) во избежании заметных артефактов на этом самом небе.
А при сохранении фотографий с множеством деталей разных цветов качество можно понизить (увеличить степень сжатия), не боясь появления заметных артефактов.
Я упоминал, что при сохранении в Jpg (JPEG) происходит разбиение всего изображения на квадратики со стороной в восемь пикселей. Так вот, если у вас будет возможность выбирать размер результирующего фото, то лучше его брать кратным восьми, т.к. в этом случае вы получите чуть меньше артефактов, что будет особенно заметно на картинках с тонкими линиями и т.п.
Png — замена Gif и Jpeg, а так же прозрачный фон в Png32
Изначально Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура как «portable network graphics», изначально он был заточен именно для применения в вебе. Этот формат растровой графики полностью открытый и его описание есть на сайте консорциума W3C.
Напомню, что он является форматом сжатия без потерь, а значит можно спокойно сохранять незаконченное изображение в Png, а затем продолжать его редактирование не боясь получить дополнительные артефакты, как это было в случае Jpg.
Png8 и Png24 — полноценная замена Gif и Jpeg
Существует три вариации формата Пнг, каждая из которых призвана выполнять свои задачи. Первые две изначально создавались как альтернатива уже существующих форматов Гиф и Джейпег, а третий привнес в веб-графику то, чего в ней до тех пор вообще не было. Но обо всем по порядку.
Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении фотографии в Пнг 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif.
Т.е. он разрабатывался как полноценная замена Гифа и результаты сжатия изображений в этих двух форматах растровой графики будут практически идентичными. Так же как и в Gif — тут поддерживается прозрачность, но уже с альфа-каналом.
Png 24 — цифра 24 означает, что на каждый пиксел фото в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Пнг 24 вы сможете передавать цвета без искажений. Даже Jpg не может этого сделать на все сто процентов.
Сохраняя исходную картинку в Png 24 вы получаете абсолютно точно такое же фото, но зато его размер будет все же больше, чем при использовании Jpeg. Но это, правда, не всегда так. При больших картинках, имеющих резкие переходы, этот формат может показать даже лучший результат, чем Джипег приемлемого качества.
Т.е. как я уже упоминал чуть выше, для обычных фоток лучше всего подойдет Jpeg, а вот для изображений с текстом или там, где ни в коем случае нельзя будет ухудшать качество, Png 24 будет незаменим. Для сохранения скриншотов, которые я использую в статьях, Пнг 8 или 24 мне кажутся оптимальным решением.
Например, тот же самый скриншот с текстом, который чуть выше вы могли видеть сохраненным в Jpeg (правда с низким качеством, чтобы подчеркнуть возможные артефакты) в Png будет выглядеть так:
А вот полноцветную картинку вначале каждой статьи я сохраняю обычно в Джипеге, т.к. соотношение качество/размер говорят в пользу именно такого варианта. Сразу скажу, что существуют разные способы сжатия изображений в формат Png, и один из лучших алгоритмов используется, на мой взгляд, в онлайн сервисе Puny Png.
Я прогнал через него все имеющиеся на блоге изображения и регулярно прогоняю все новые картинки в формате Png, используемые для новых статей. О том, как сжать в нем все свои Png картинки, вы можете прочитать здесь — сервис для сжатия фото.
Png 32 — полноценная прозрачность с альфа каналом
Наверное, вы поняли по аналогии, что в этом формате растровой графики для одного пикселя возможно использовать аж четыре байта информации.
Три отвечают за формирование полноцветного изображения по аналогии с Пнг 24, а вот четвертый байт выделяется отдельно для формирования альфа-канала, позволяющего использовать Пнг 32 для получения картинок с прозрачным фоном.
В нем вы сможете указывать изменение степени прозрачности без всяких MATE цветов, а значит такие картинки будут одинаково хорошо смотреться на абсолютно любых веб страницах с любым фоном. Примером такого изображения может служить логотип из шапки моего блога:
или иконка RSS ленты:
Наверное, понятно, что Png 32 просто незаменим и не имеет аналогов по предоставляемых возможностям. Кстати говоря, альфа канал можно использовать так же и в Пнг 8, но, к сожалению, не все редакторы растровой графики позволят вам это сделать. Фотошоп, например, этого делать не умеет, но зато Fireworks или Gimp умеют.
Кроме этого, у Пнг 32 и 8 с альфа-каналом есть такая проблема, что он в браузере IE, начиная с версии 6 и ниже, не поддерживается полноценно, и вместо прозрачного фона будет подмешиваться серый цвет, а Png 8 с альфа-каналом там вообще показываться не будет. Правда, таких архаичных браузеров у пользователей уже практически не осталось, но все же.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ruСоздание файла PNG | Прозрачный фон
Если вашему проекту требуется файл прозрачного фонового изображения для логотипов или для печати на канцелярских принадлежностях или товарах — футболках или кружках, например, — используйте наши инструменты для создания PNG, чтобы создать нужный тип файла .
Что такое файл PNG? Это аббревиатура от Portable Network Graphics, которая была разработана как высококачественный формат файлов без потерь. JPEG — это еще один формат файлов, который хорошо сжимает изображения, но у него нет ключевой особенности формата PNG: PNG может сохранять прозрачность.
Если вы создали текстовое изображение, которое должно отображаться без пробелов между буквами, вам подойдет PNG. Или, если вы вырезали фон позади объекта фотографии или объекта и хотите, чтобы он оставался таким при сохранении изображения, PNG — это формат файла, который вам нужен. Мы собираемся показать вам, как создавать и сохранять изображения в формате PNG для обоих этих типов проектов в инструментах редактирования и дизайна фотографий PicMonkey.
Как создать PNG для текста без фона
Откройте пустой холст в желаемых размерах.(См .: преобразование дюймов в пиксели)
На пустом холсте в редакторе PicMonkey щелкните радужный круг в палитре фона
, которая появляется сбоку.
Установите флажок «Прозрачный» под цветовым спектром.
Щелкните вкладку «Текст» в крайнем левом углу, добавьте текст и настройте его по своему усмотрению.
Щелкните Загрузить на верхней панели инструментов и выберите «PNG изображение» в качестве типа файла.
Как создать PNG для изображений без фона
Инструмент для удаления фона в PicMonkey доступен подписчикам Pro, и это чертовски волшебно для быстрого создания прозрачного фона под рисунком .
Используйте инструмент для удаления фона для создания прозрачного фона для изображения
Откройте изображение в PicMonkey.
Откройте палитру слоев и щелкните Преобразовать в слой на фоновом слое.
Выберите новый слой фотографии и щелкните Удалить фон в палитре изображений.
Щелкните Загрузить на верхней панели инструментов и выберите «PNG изображение» в качестве типа файла.
Узнайте больше об инструменте для удаления фона: Автоматическое средство для удаления фона, Plus Design Inspo!
Макетируйте свои продукты с помощью стоковых фотографий
Это помогает получить более четкое представление о том, как будет выглядеть ваш готовый дизайн, если вы создадите макет, то есть изображение вашего логотипа или бренда на нем. продукт.Это действительно легко сделать в PicMonkey, потому что у нас есть миллионы стоковых фотографий с Unsplash для всех подписчиков, а нашим подписчикам Pro доступна полная библиотека суперпремиум-класса от iStock от Getty. Просто поищите в библиотеке видеоматериалов «________ мокап», например, «макет бутылки» или «макет футболки», или визитку, бейсболку, рекламный щит … вы поняли.
Добавьте изображение PNG вверху, расположите и настройте, и теперь у вас есть довольно хорошее представление о том, как ваш брендинг работает на продуктах.Загрузите свою работу, чтобы поделиться ею с принтером или загрузить в свой интернет-магазин.
См. Также: Как сделать дизайн упаковки продукта для вашего бизнеса
Что еще вы хотите сделать сегодня?
Как создать .PNG | Малый бизнес
Дэвид Уидмарк Обновлено 28 мая 2021 г.
Формат файла JPG сегодня практически универсален и является форматом по умолчанию практически в любом графическом программном обеспечении или приложении, которое вы, возможно, захотите использовать.Для форматов цифровых фотографий JPG обычно идеально подходят, если вы загружаете фотографии на веб-сайт. Однако файлы PNG часто являются лучшим вариантом, если вам нужен прозрачный фон или если принтер хочет, чтобы логотип или другие изображения были напечатаны как можно более четко.
Преимущества и недостатки файлов PNG
Одна из основных причин, по которой люди используют формат PNG для файлов изображений, заключается в том, что, в отличие от JPG, они позволяют сохранять прозрачный фон. Таким образом, вы можете поместить круглый логотип на квадратное изображение, и когда вы разместите его на веб-сайте или на футболке, будет виден только круглый логотип.
Прозрачность — не единственное преимущество файлов PNG. Как объясняет Элеонора Иннис из Shutterstock, файлы JPG сильно сжаты, что приводит к очень маленьким размерам файлов, которые сохраняют меньше деталей. Файлы PNG используют меньшее сжатие, что увеличивает размер файлов при сохранении большей детализации. GIF-файлы также поддерживают прозрачный фон, но, как отмечает Оливия Джеймс из CauseVox, PNG имеют лучшее сжатие и лучшие параметры прозрачности.
JPG также страдают недостатком повторного сжатия файла при его редактировании и сохранении, что каждый раз ухудшает его качество.Файлы PNG не имеют этого ограничения, что делает их идеальными для изображений, которые необходимо распечатать, или для изображений без большого количества деталей, но с четкими линиями, таких как логотипы или штриховые рисунки. Если вы размещаете фотографии на веб-сайте, файлы JPG обычно работают лучше, потому что размеры файлов намного меньше.
Выбор приложения для редактирования изображений
Нет недостатка в приложениях для создания изображений PNG для компьютеров, планшетов и смартфонов, независимо от того, какую платформу вы используете. Если вы планируете много редактировать изображения для своего бизнеса, подумайте о том, чтобы установить Photoshop или подобное программное обеспечение, такое как GIMP, на компьютер, потому что этот процесс намного проще с большим экраном и мышью или тачпадом.
Если у вас мало изображений и они уже есть на смартфоне или планшете, вы можете получить несколько хороших приложений, которые также сделают эту работу. Перед покупкой убедитесь, что приложение поддерживает файлы PNG и прозрачный фон. Такие приложения, как Magic Eraser Background Editor, прямо указывают это в описании.
Создание файла PNG с прозрачным фоном
Если у вас есть Photoshop или аналогичная программа, вы можете легко экспортировать большинство изображений в файлы PNG. Пока редактор изображений поддерживает слои, процесс аналогичен.По сути, это трехэтапный процесс:
1. Откройте изображение в Photoshop и создайте новый слой, выбрав «Новый слой» в меню «Слой». Перетащите новый слой под первым слоем в окне «Слой», чтобы он стал вашим фоном.
2. Выберите верхний слой, содержащий ваше изображение, и с помощью инструмента «Ластик» сотрите ненужные части. Кроме того, вы можете использовать инструмент выделения, например, инструмент «Волшебная палочка», чтобы выделить область и нажать «Удалить», чтобы удалить ее.
3.Сохраните изображение как файл PNG, выбрав «Сохранить как», а затем выбрав «PNG» в качестве формата файла. Когда вы открываете изображение или просматриваете его предварительный просмотр в проводнике, фон становится прозрачным.
Canva Pro также позволяет создавать файлы PNG с прозрачным фоном. Это платная версия Canva, но вы можете начать с бесплатной пробной версии. Просто создайте новый дизайн и загрузите в него любой файл изображения. Выберите эффект «Удаление фона» в меню «Эффекты». Когда вы будете готовы загрузить изображение, выберите параметры «PNG» и «Прозрачный фон», прежде чем нажимать кнопку «Загрузить».
Как удалить фон с изображения
На днях я работал над презентацией.
Я пытался придумать способ добавить логотип и несколько значков в PowerPoint. Но возникла проблема. У всех изображений был разный цвет фона, и мне нужно, чтобы все они выглядели одинаково.
Может быть, вы тоже были там. У вас есть логотип, значок или другие изображения, которые вы пытаетесь использовать в дизайне, но вам нужно удалить фон изображения.Возможно, вам потребуется добавить логотип вашей компании к новому изображению или добавить значок в презентацию PowerPoint.
Вы можете сделать фон изображения прозрачным с помощью продвинутого фоторедактора, такого как Photoshop, с помощью TechSmith’s Snagit или множества других инструментов.
К счастью, подход одинаков, независимо от того, какой инструмент вы используете. С Snagit достаточно всего нескольких шагов, чтобы быстро удалить фон с вашего изображения.
Как убрать, чтобы сделать фон изображения прозрачным
Имейте в виду, что Snagit не так сложен, как профессиональная программа редактирования, такая как Photoshop, и она может не работать, чтобы удалить фон с фотографии или изображения со сложным фоном.
Однако Snagit — прекрасная альтернатива Photoshop, позволяющая сделать изображение прозрачным, если вы не знакомы с высококлассными инструментами.
Бесплатная пробная версия: Вы можете попробовать Snagit бесплатно. Получите все необходимое для захвата и редактирования изображений на Windows или Mac.Шаг 1. Вставьте изображение в редактор
Для начала сделайте снимок экрана с помощью Snagit или загрузите изображение из меню «Файл». Лучше всего подходят изображения с белым фоном, сплошным цветом или высококонтрастным фоном.
Шаг 2. Затем нажмите кнопку «Заливка» на панели инструментов и выберите «Прозрачный».
Если вам впервые нужно добавить прозрачную заливку в быстрые стили, это довольно просто. Все, что вам нужно, это нажать на опцию цвета заливки в свойствах инструмента и выбрать прозрачную заливку.
Шаг 3. Отрегулируйте допуск
Отрегулировать допуск на этом изображении довольно просто, потому что оно только черно-белое.Но иногда получается изображение с множеством разных оттенков. Если у вас есть изображение с множеством схожих цветов или градиентов на заднем плане, вы можете получить кровотечение вокруг значка, логотипа и т. Д.
Единственное, что вы можете сделать, чтобы исправить, — это отрегулировать допуск заполнения. Один процент — самый строгий, а 100 процентов означает, что он в значительной степени размывает все ваше изображение. Возможно, вам придется поиграть с допуском, чтобы получить правильный уровень прозрачности. В данном случае 90 процентов у этой иконки сработали.
Шаг 4. Щелкните области фона, которые вы хотите удалить
Если вы используете снимок экрана или изображение PNG, по умолчанию будет прозрачный фон. Если вы используете JPG или другой формат файла, вам нужно сначала настроить цвет фона в редакторе Snagit, иначе он будет по умолчанию белым, а не прозрачным.
Для этого просто нажмите Изображение> Цвет холста (в Windows) или Изображение> Изменить цвет холста… (в Mac).
Шаг 5. Сохраните изображение как PNG
Если вы не сохраните изображение как файл PNG, по умолчанию будет выбран белый фон.
И это все, что нужно для удаления фона с изображения. Это займет всего несколько шагов, и вы сможете создать безупречный вид для ваших учебных документов, маркетинговых материалов или презентаций.
Бесплатная пробная версия: Вы можете попробовать Snagit бесплатно. Получите все необходимое для захвата и редактирования изображений на Windows или Mac.Примечание редактора. Этот пост был первоначально опубликован в марте 2017 года и был обновлен для обеспечения точности и полноты.
Как создать файл PNG в Adobe Photoshop
Бенджамин Марторелл, 19 мая 2021 г.
Что такое файл PNG?Вас смущает, что такое файл PNG в Adobe Photoshop? Если так, то это вполне понятно, потому что фотографам доступно множество форматов файлов изображений. К наиболее распространенным относятся Jpeg, GIF, TIFF и, конечно же, PNG.
Еще сложнее то, что у каждого есть своя цель. В этой статье мы рассмотрим формат PNG. Вы узнаете, что такое файл PNG, для чего он нужен и как его создать.
PNG, произносится как «пинг», а его имя файла .png, означает «переносимая сетевая графика». Это тип формата изображения, который веб-дизайнеры используют для создания веб-сайтов, поскольку он поддерживает прозрачный фон и / или полупрозрачные изображения (фактически, это единственный тип формата изображения, который поддерживает прозрачность).
Благодаря этой возможности PNG отлично подходит для логотипов и динамической графики веб-сайтов. Поэтому, если вам нужен фантастически выглядящий веб-сайт, который понравится вашим посетителям, вам обязательно нужно использовать изображения в формате PNG.
Скорее всего, вы уже видели изображения PNG раньше, например, когда прозрачный логотип расположен на изображении фотографа, что позволяет вам видеть фотографии с по логотип. В этом случае цель прозрачности — тонко продвинуть фотографа, сделавшего снимок (и предотвратить его использование кем-то другим).
Метод сжатия данных, называемый сжатием без потерь, позволяет создавать файлы PNG. Это означает, что когда кто-то решает сжать изображение, никакие данные в нем не теряются. Другими словами, файл PNG остается идентичным исходному файлу изображения. Это отличается от сжатия с потерями, при котором информация теряется при сжатии изображения файла.
Еще одним преимуществом PNG является то, что он поддерживает оттенки серого и цветовые пространства PNG-8, PNG-24 и PNG 32, что дает ему возможность отображать широкий диапазон цветов.
Однако это означает, что файлы PNG могут быть большими, поэтому изображения обычно имеют формат Jpeg (файлы Jpeg с потерями, что означает, что каждый раз при распаковке данные удаляются).
Еще один плюс формата PNG в том, что он не содержит патентов, что означает, что любой может использовать его без лицензии.
Какие программы открывают файлы PNG?
Многие программы открывают файлы PNG. К ним относятся программы просмотра фотографий по умолчанию, программы редактирования фотографий, такие как Lightroom и Adobe Photoshop, а также веб-браузеры.В любой из этих программ вы можете просмотреть файл PNG, выбрав «открыть» в раскрывающемся меню, или просто перетащив его в программу или в веб-браузер.
Если у вас еще нет Photoshop и Lightroom, вы можете получить их через Adobe Creative Cloud Plan всего за 9,99 долларов в месяц.
Adobe Photoshop и Lightroom и некоторые из самых популярных инструментов, используемых фотографами, графическими дизайнерами и веб-разработчиками из-за их возможностей.
Самые простые способы создания файла PNG в Adobe PhotoshopСоздание файла PNG в Adobe Photoshop — простой процесс.В зависимости от того, что вы хотите достичь с изображением или графикой, может быть всего несколько шагов.
Шаги по созданию файла PNG в Photoshop: 1. Самый простой способ — просто «Сохранить как»- Нажмите Файл в верхнем меню, затем выберите Открыть
- Выберите файл изображения и нажмите Открыть
- Нажмите Файл в верхнем меню, затем выберите Сохранить как
- В диалоговом окне выберите PNG из меню Формат
Пока это быстрый способ создать файл PNG, он никоим образом не изменяет изображение, например, делает его прозрачным или удаляет фон, чтобы изолировать объект (ы).Это наиболее распространенные действия для файлов PNG. Следуйте инструкциям ниже, чтобы узнать, как сделать и то, и другое.
2. Создайте прозрачное изображение Photoshop- Откройте файл, повторив шаги, описанные в пункте 1.
- Откройте панель слоев, если она еще не видна справа. Для этого щелкните Window , затем выберите Layers .
- Щелкните слой Background на панели «Слои», а затем щелкните OK в появившемся диалоговом окне.Это разблокирует слой, позволяя вам изменить его.
- Щелкните раскрывающееся меню Непрозрачность на панели «Слои» и выберите процентное значение ниже 100%. Чем ниже вы опустите, тем прозрачнее будет изображение.
- Щелкните Файл в верхнем меню, выберите «Сохранить как» и выберите PNG в раскрывающемся меню. Теперь у вас есть прозрачное изображение Photoshop.
- Откройте файл, повторив шаги, указанные в пункте 1.
- Добавьте слой прозрачности: в верхнем меню щелкните Layer , затем выберите New . Теперь вы увидите новый пустой слой на панели «Слои», который выглядит как серо-белая шахматная доска. Photoshop автоматически делает его прозрачным.
- Перетащите новый слой под слой фонового изображения на панели слоев.
- Щелкните новый слой , чтобы выбрать его.
Совет : Вместо создания нового слоя вы также можете щелкнуть маленький значок замка, чтобы разблокировать фоновый слой.Все, что вы удалите с изображения, станет прозрачным.
- Выберите тему: На панели инструментов слева выберите инструмент Magic Wand Tool .
- Нажмите Выберите Subjec t вверху окна. Photoshop автоматически выбирает объект (ы), который, по его мнению, является объектом (объектами). Вы увидите, что вокруг выделения «маршируют муравьи».
- Удалите фон: нажмите Выберите в верхнем меню, затем выберите Обратный .Это выбирает область изображения, которую вы хотите удалить вокруг объекта.
- Нажмите Удалить на клавиатуре. Теперь виден серо-белый узор в виде шахматной доски на прозрачном фоне.
- Нажмите Command (Control на ПК) + D , чтобы удалить марширующих муравьев.
Совет : Вы можете обнаружить, что при выделении отсутствуют некоторые области. Например, он может подумать, что тени — это края объекта. Чтобы исправить это, щелкните значок
«Вычесть из выделения» в верхней части окна, затем используйте инструмент «волшебная палочка», чтобы удалить больше нежелательных областей.
В начале этой статьи вы прочитали, что такое файл PNG и для чего он используется. Вы также узнали о некоторых его преимуществах, включая сжатие без потерь (данные не теряются, а качество изображения остается прежним) и что он поддерживает PNG-8 (256 цветов), PNG-24 (более 16 миллионов цветов) и PNG-32. (PNG 24 + 8 для прозрачного фона) цветовых пространств.
Другие преимущества включают широкий диапазон прозрачности от невидимого (0%) до полностью видимого (100%), вы можете добавлять метаданные и создавать файлы PNG с несколькими слоями.Кроме того, файлы PNG могут сжиматься на 10–30% больше, чем файлы GIF.
Формат PNG имеет несколько недостатков. В отличие от GIF, который означает формат обмена графикой, PNG не поддерживает анимацию. Кроме того, как указано выше, размеры файлов PNG обычно больше, чем файлы Jpeg. Это может стать проблемой, если у вас мало места для хранения.
К счастью, эти проблемы обычно не являются проблемой для большинства людей, поскольку файлы PNG в основном предназначены для веб-сайтов.
Вот и все! Вы должны быть на правильном пути к созданию файлов PNG в Photoshop, используя информацию, которую вы узнали в этом уроке. Довольно скоро вы сможете сделать логотип, который можно будет разместить на своих фотографиях или сделать привлекательный сайт.
Если вы нашли этот учебник полезным, вам также может быть интересно ознакомиться со следующими статьями:
Если вы нашли эту статью полезной, подпишитесь на нас в Twitter и Facebook , чтобы узнать больше о наших бесплатные руководства по WordPress и другие ресурсы.
Используете WordPress и хотите получить Envira Gallery бесплатно?
Envira Gallery помогает фотографам всего за несколько кликов создавать красивые фото- и видеогалереи, чтобы они могли демонстрировать и продавать свои работы.
Как сделать изображение прозрачным?
Изучение того, как делать прозрачные изображения, значительно улучшит вашу игру для редактирования фотографий. Это может показаться трудным, но поверьте нам, процесс очень простой, а результаты потрясающие! Если вы хотите, чтобы ваш канал в Instagram выделялся из общей массы без особых усилий, то вы попали в нужное место!
Мы здесь, чтобы провести вас через весь процесс создания прозрачного изображения, а также предоставить полезные советы и рекомендации, которые добавят изюминки вашей ленте.Вопрос в том, как именно сделать изображение прозрачным?
Это займет всего несколько шагов:
Шаг 1) Откройте изображение в редакторе PicsArt.
Шаг 2) Нажмите на инструмент Cutout и либо вручную очертите области изображения, которые вы хотите сделать прозрачными, либо нажмите Select , чтобы наш инструмент AI автоматически выбирал человека, лицо, одежду, небо, или голову, которую вы хотите сохранить.
Шаг 3) Нажмите Сохранить , чтобы удалить остатки, сохранив только те детали, которые вы выделили красным.
Шаг 4) Нажмите Далее , чтобы экспортировать прозрачное изображение.
С этого момента вы можете использовать прозрачные изображения для создания красивых эстетических правок или веселых мемов. Возможности безграничны, и все в ваших руках!
Процесс довольно прост, но может вызвать много вопросов, пока вы не начнете редактировать прозрачные изображения самостоятельно.Если вы не знаете, какое программное обеспечение для редактирования использовать или какие форматы изображений поддерживают прозрачность, не волнуйтесь, мы разбили все это для вас ниже!
Как добавить прозрачное изображение к другому изображению?Все удовольствие от создания прозрачного фона изображения заключается в возможности наложить его поверх другого изображения и создать свои собственные правки в стиле коллажа! По сути, вы делаете наклейку, которую можно наложить поверх чего угодно. Если у вас есть изображение с прозрачным фоном, добавить его к другому изображению очень просто.Единственное правило, о котором следует помнить, — прозрачное изображение должно располагаться поверх другого изображения, иначе оно не будет видно.
Попрактикуемся в добавлении прозрачного изображения к другому изображению в веб-редакторе PicsArt:
Шаг 1) Сначала мы начнем с прозрачного изображения! Откройте веб-редактор и нажмите «Загрузить» на левой панели, чтобы загрузить изображение, которое вы хотите сделать прозрачным. Вы также можете выбрать любое из наших бесплатных изображений в галерее.
Шаг 2) Нажмите на Ластик , чтобы вручную стереть области изображения, которые вы хотите сделать прозрачными. Кроме того, вы можете позволить нашему инструменту AI Select выполнить ручное стирание за вас одним щелчком мыши! Щелкните Object или Person , чтобы удалить эти части изображения.
Шаг 3) После того, как вы удалили все части, которые хотите сделать прозрачными, нажмите Применить в правом верхнем углу экрана и Сохранить ваше новое прозрачное изображение в коллекцию стикеров.
Шаг 4) Теперь мы работаем над нижним слоем или фоновым изображением. Откройте редактор PicsArt и нажмите Загрузить на левой панели, чтобы загрузить изображение, которое вы хотите использовать в качестве фона или нижнего слоя. Вы также можете использовать одну из тысяч наших бесплатных изображений!
Шаг 5) Нажмите на наклейку на левой панели и выберите фотографию верхнего слоя (также известную как новая наклейка), фон которой вы только что удалили.
Шаг 6) Измените размер, чтобы покрыть как можно большую или меньшую часть фона на фотографии.
Шаг 7) Нажмите, чтобы Поделиться со всеми своими друзьями или Загрузите прямо на свой рабочий стол. Вуаля! Вы добавили прозрачное изображение к другому изображению!
Независимо от того, являетесь ли вы опытным редактором или только начинаете, сделать фотографии прозрачными в приложении PicsArt также невероятно просто! Посмотрите этот видеоурок:
Шаг 1) Откройте приложение PicsArt и коснитесь значка + в нижней части экрана.
Шаг 2) Выберите изображение, которое вы хотите отредактировать, в своей фотогалерее или в галерее «Бесплатное редактирование» PicsArt.
Шаг 3) Коснитесь инструмента Вырез в нижней части экрана.
Шаг 4) Коснитесь инструмента Outline , чтобы вручную очертить области, которые вы хотите сохранить, или коснитесь инструмента Select , чтобы наш ИИ автоматически обнаруживал и удалял области. PicsArt автоматически делает все прозрачным, оставляя нетронутыми только выбранные области.
Шаг 5) Нажмите Далее , затем Сохраните , чтобы загрузить новое прозрачное изображение!
Если вы сохраните вырезку как стикер на PicsArt, то позже вы сможете добавить к нему любой фон и внести множество правок! Когда вы снова откроете редактор и нажмете на Stickers и My Stickers , вы найдете все ранее отредактированные изображения с прозрачным фоном, готовые к добавлению к другим фотографиям! Сделать стикеры своими руками — это так просто!
Может ли JPEG или PNG быть прозрачным? Еще одна вещь, о которой следует помнить при создании прозрачных правок, — это формат изображения.Все сводится к выбору между форматами JPEG и PNG.
JPEG — наиболее часто используемый формат цифровых изображений в мире. В основном это связано с тем, что изображения в формате JPEG имеют небольшой размер и поддерживаются практически на всех веб-сайтах. К сожалению, сделать изображения JPEG прозрачными невозможно. Этот формат просто не поддерживает прозрачность.
С другой стороны, хотя формат PNG не так широко известен, он поддерживает прозрачные изображения. Кроме того, изображения PNG в целом имеют лучшую степень сжатия, чем изображения JPEG.В отличие от формата JPEG сжатие PNG осуществляется без потерь, то есть независимо от того, сколько раз вы редактируете изображение, оно не теряет своего качества.
Невозможно сделать изображение JPEG с прозрачным фоном. Вы можете сделать фон изображения прозрачным, но как только вы загрузите изображение в формате JPEG, прозрачные участки станут белыми. Даже если вы начинаете процесс редактирования с изображения в формате JPEG, вы должны обязательно сохранить его как PNG перед экспортом изображения.Вы же не хотите, чтобы ваш тяжелый труд был потерян!
Как сделать прозрачным изображение PNG? PNG — лучший формат для создания прозрачных фотографий. Он отлично подходит для сохранения качества ваших изображений и поддерживается на большинстве веб-сайтов.
Чтобы создать прозрачное изображение PNG, вам необходимо сначала загрузить изображение по вашему выбору в редактор PicsArt, затем выбрать и удалить фон из изображения, упомянутого в шагах выше.Как только вы закончите, просто сохраните изображение, которое вы отредактировали, как файл PNG, и все готово! В PicsArt по умолчанию будет сохраняться как PNG, чтобы вы могли сохранить прозрачное изображение.
Теперь у вас есть прозрачное и высококачественное изображение. Вы можете добавить прозрачное изображение PNG к другим фотографиям без пикселизации.
Если у вас есть изображение в формате JPEG и вы хотите преобразовать его в PNG, вам потребуется использовать сторонние приложения или онлайн-инструменты.Существует множество онлайн-инструментов, которые могут помочь вам преобразовать изображение JPEG в файл PNG, но большинство из них очень ограничены. Однако, если вы используете PicsArt, вы сможете конвертировать JPEG в PNG и редактировать изображение в одном процессе. Никаких дополнительных преобразований не требуется!
Откройте файл JPEG в редакторе PicsArt и примените все необходимые изменения, такие как фильтры, наклейки, удаление фона и т. Д. Когда вы закончите, просто сохраните изображение, и PicsArt преобразует его в PNG для вас.PicsArt автоматически сохраняет изображения как файлы PNG, поэтому вам не нужно беспокоиться о том, что какие-либо прозрачные изображения потеряют свою прозрачность или качество.
Учтите, что если вы сохранили прозрачное изображение в формате JPEG и получили белый фон, преобразование его в PNG не сделает изображение снова прозрачным. Вам нужно будет снова отредактировать фотографию, а затем сохранить ее как PNG.
Если вы не очень хорошо умеете фотографировать или ищете изображение того, что вы не можете запечатлеть самостоятельно, тогда Интернет — ваш лучший друг!
Найти правильные изображения — это одно, но наложение прозрачного изображения или преобразование их в прозрачный фон может быть утомительным, особенно если вы хотите включить много элементов.К счастью, в Интернете доступно множество изображений с прозрачным фоном!
Если вы когда-нибудь пробовали загружать изображения с прозрачным фоном в Интернете, то вам знакомо ощущение, когда вы случайно загружаете поддельное прозрачное изображение. Нажатие и загрузка изображения с серым клетчатым фоном просто для того, чтобы узнать, что клетчатый узор является частью изображения, а не прозрачным только после того, как вы загрузили изображение, очень расстраивает!
Этого можно избежать, используя программное обеспечение для редактирования, которое имеет легко доступный каталог изображений с прозрачным фоном.Если вы откроете редактор PicsArt и пролистаете стикеров , вы откроете для себя совершенно новый мир прозрачных изображений! Вы можете найти все типы изображений с прозрачным фоном, набрав любое слово или фразу в строке поиска.
Теперь, когда вы знаете основы, вы можете исследовать безграничные возможности прозрачных изображений и прозрачного фона. Нам не терпится увидеть, что вы создаете!
PicsArt «Все в одном» для фото- и видеоредакторов, коллажей и наклеек — крупнейшая в мире платформа для творчества с более чем 150 миллионами активных авторов и влиятельных лиц в месяц.PicsArt сотрудничает с такими крупными артистами и брендами, как Taylor Swift, The Jonas Brothers, Gwen Stefani, Maroon 5, Lizzo, Meghan Trainor, One Direction, MONSTA X, Warner Bros. Entertainment, iHeartMedia, Condé Nast и другими. Загрузите приложение сегодня, чтобы повысить уровень своих фотографий и видео с помощью тысяч простых и быстрых инструментов редактирования, модных фильтров, забавных наклеек и великолепных фонов. Раскройте свой творческий потенциал с помощью PicsArt и обновите до Gold и получите потрясающие премиальные привилегии!
Как создать PNG-файлы вашего логотипа в Illustrator
ФайлыPNG (переносимая сетевая графика) — это растровые веб-файлы, не теряющие качества при сжатии.Их лучше всего использовать для отображения изображений в Интернете, и они являются одним из основных форматов файлов, которые можно доставить вашим клиентам, занимающимся дизайном логотипов.
Клиентам нужен файл PNG (в дополнение к другим требуемым типам файлов), чтобы они могли легко включить дизайн вашего логотипа в свои материалы для брендинга без использования передового программного обеспечения для редактирования графики, такого как Adobe Illustrator.
В этом уроке мы собираемся продемонстрировать один из способов создания файла PNG в Adobe Illustrator с прозрачным фоном — именно то, что вы должны будете предоставить своему клиенту логотипа.
1. Создайте свой логотип в Adobe Illustrator
Все логотипы должны быть созданы в программах векторного редактирования и должны состоять из векторных форм и контуров, чтобы их можно было масштабировать вверх или вниз без потери качества. Adobe Illustrator является отраслевым стандартом в программах для редактирования векторных изображений, поэтому мы рекомендуем его в первую очередь. Убедитесь, что в файл логотипа не включен фон.
2. Экспортируйте свой логотип как файл PNG
После создания векторного логотипа нажмите Файл> Экспорт…> PNG. Присвойте файлу желаемое имя и нажмите Экспорт. Затем появится окно «Параметры PNG». Убедитесь, что вы выбрали прозрачный цвет фона и нажмите OK. Самое замечательное в этой опции экспорта заключается в том, что она вырезает пустое пространство на доске, чтобы включить только логотип, что делает итоговые файлы PNG более универсальными и включает только основные части дизайна.
3. Откройте и загрузите новый файл PNG.
Ваш новый файл PNG будет выглядеть примерно так, когда вы его откроете.Само изображение PNG не серое — это просто фон, используемый для отображения изображений PNG. Теперь вы готовы отправить его своему клиенту
Хотите начать свою карьеру графического дизайнера?
Узнайте, как фриланс на 99designs может помочь вам найти больше работы.
Как сделать логотип с прозрачным фоном в GIMP или Photoshop? : Survey Anyplace
Хотите добавить к изображению логотип, но не можете избавиться от фона? Тогда это руководство решит эту проблему с помощью всего нескольких простых шагов! Вам не нужно специальное программное обеспечение.
GIMP — это совершенно бесплатный инструмент с открытым исходным кодом, который также имеет множество функций, которые может предложить Photoshop. В этом руководстве мы обсудим:
- GIMP
- Photoshop
ПРИМЕЧАНИЕ
Если вы не хотите загружать внешнее программное обеспечение, вы можете найти руководство о том, как сделать свой фон прозрачным с помощью онлайн-редактора Picmonkey прямо здесь или с помощью Fotor.
1 GIMP
Шаг 1. Настройка GIMP
Хорошо, вы установили GIMP и запустили его, вероятно, будет похож на на этот .
Чтобы открыть GIMP в одном окне, перейдите в меню Windows> Режим единого окна
Шаг 2: Сделайте фон прозрачным
Теперь откройте изображение , которое вы хотите сделать прозрачным. Я выбрал это изображение:
Но вы можете использовать любое изображение, которое вам нравится. Чтобы открыть изображение, выберите «Файл»> «Открыть» и выберите свой файл. Или вы можете нажать CTRL + O .
GIMP и Photoshop отличаются от Paint и аналогичных программ тем, что они используют слои.Каждый слой можно редактировать индивидуально, поэтому вы можете редактировать части изображения, не касаясь другого.
Эти слои можно найти в правом верхнем углу экрана. Чтобы добавить прозрачность, щелкните слой правой кнопкой мыши и выберите « Добавить альфа-канал ».
Чтобы сделать фон прозрачным, воспользуемся инструментом Select By Color Tool . Вы можете использовать его, нажав Shift + O или перейдя в Инструменты> Инструменты выделения> По выбору цвета.
Нажмите в любом месте вокруг логотипа на белом пространстве, которое вы хотите стереть. Вокруг него должна появиться движущаяся пунктирная линия. Нажмите удалить , и должен появиться фон, похожий на клетку, например:
Если это не так, убедитесь, что вы добавили альфа-канал к своему изображению, и больше не осталось других слоев. Если у вас есть слой «Фон», вы можете удалить его, щелкнув его правой кнопкой мыши и выбрав «Удалить слой».
Поздравляем, ! Вы сделали свой первый логотип с прозрачным фоном!
Шаг 3. Экспорт вашего логотипа
Вы не можете просто «Сохранить» свое изображение или «Сохранить как».Вы сохраните свое изображение в формате .xcf, таким образом оно подходит только для графического редактора. Чтобы использовать его на своем сайте, вы должны экспортировать изображение . Для этого выберите «Файл»> «Экспортировать как» или нажмите Shift + Ctrl + E.
Вы также можете перезаписать файл, но тогда исходное изображение будет потеряно. Появится меню с вопросом, где сохранить файл. Вы также можете изменить имя своего изображения, не забудьте добавить .png в конце. Форматы, такие как .jpg, пока не поддерживают прозрачность.png делает.
Теперь нажмите « Export », и все готово!
Чтобы украсить свой опрос прозрачным логотипом, мы создали специальное руководство в наших документах.
Теперь давайте посмотрим, как это можно сделать с помощью Photoshop:
2 Photoshop
В этом уроке используется Photoshop CS6. Производительность останется прежней, независимо от того, используете вы старую или новую версию, меню просто могут выглядеть немного иначе.
Метод 1: Инструмент «Волшебная палочка»Шаг 1: Откройте изображение
Для этого перейдите в
Файл> Открыть или нажмите сочетание клавиш Ctrl + O . Шаг 2: Выбор инструмента Magic WandВы можете увидеть значок справа от экрана на вертикальной панели инструментов. Щелкните правой кнопкой мыши четвертый значок и выберите Magic Wand Tool . Вы также можете нажать W как ярлык.
Шаг 3. Удаление фонаНажмите в любом месте фонового пространства, которое вы хотите удалить. Появится пунктирная линия, указывающая область, которую вы собираетесь удалить. Если область недостаточно велика, вы всегда можете добавить что-то к своему выделению, удерживая нажатой клавишу «Shift» и щелкнув область , которую вы хотите добавить.
Если вы пропустили щелчок, вы можете удалить весь выбор, щелкнув правой кнопкой мыши и выбрав Отменить выбор .
На вашем изображении должен появиться фон в виде клетки.
Шаг 4. Сохранение изображенияТеперь пора сохранить изображение. Перейдите в Файл> Сохранить как . Не все типы изображений отображают прозрачность. Убедитесь, что ваше изображение сохранено как файл PNG.
Выберите вариант PNG:
Теперь нажмите « Сохранить ».
Чтобы обозначить ваш опрос прозрачным логотипом, мы создали специальное руководство в наших документах.
Ta-da ! Теперь у вас есть прозрачный логотип. Но есть второй способ сделать это:
Метод 2: Инструмент «Многоугольное лассо»Если фон слишком загроможден, инструмента «Волшебная палочка» не всегда будет достаточно. В этом случае мы воспользуемся инструментом Polygonal Lasso Tool.
Шаг 1. Откройте изображение. Для этого выберите
Файл> Открыть или нажмите сочетание клавиш Ctrl + O . Шаг 2. Инструмент «Многоугольное лассо»Вы можете увидеть значок справа от экрана на вертикальной панели инструментов. Щелкните правой кнопкой мыши третий значок и выберите инструмент «Многоугольное лассо». Если вы уже выбрали его просто , нажмите L как ярлык.
Шаг 3. Удаление фонаТеперь вы можете нарисовать контур вокруг того, что вы хотите удалить с изображения. Для более точного выбора вы всегда можете нажать Ctrl и «+» для увеличения.Чтобы завершить выбор, нажмите Ctrl + щелкните на последней части созданного пути. Нажмите Delete , чтобы удалить элемент, на месте объекта должен появиться фон в виде клетки.
Шаг 4: Сохранение изображенияПерейдите в Файл> Сохранить как . Убедитесь, что ваше изображение сохранено как файл PNG. Другие типы изображений не всегда поддерживают прозрачность.
Выберите вариант PNG:
Теперь нажмите « Сохранить ».
Чтобы украсить свой опрос прозрачным логотипом, мы создали специальное руководство в наших документах.