Как сохранить логотип в фотошопе

Обновлено: 04.07.2024

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

Проблема, с которой я сталкиваюсь в Illustrator, заключается в том, что когда я пишу определенным шрифтом (например, "Arial Rounded MT Bold" с размером 24 pt), шрифт выглядит красиво и четко на моем фоне при масштабе 200 %, но я начинаю чтобы увидеть размытие на 100% - тогда я не уверен, что речь идет о процессе «сохранить в Интернете», но изображение теряет дальнейшую четкость к тому времени, когда оно оказывается на моем веб-сайте (как «оптимизированный тип» png).

Я где-то читал, что фотошоп лучше подходит для сохранения изображений текста для веба, но я вижу подобное размытие там даже перед экспортом (и, конечно, 200%-ное увеличение в фотошопе просто делает изображение пиксельным).

Итак, чего мне действительно не хватает, так это пошагового руководства для чайников о том, как получить четкие изображения текста на веб-сайте. На данный момент я не уверен, возможно, я просто выбрал плохой цветовой контраст или шрифты, которые плохо масштабируются, хотя мне также интересно, есть ли что-то существенное в том факте, что шрифт выглядит красиво в Illustrator при 200 % или больше - возможно, это означает, что я должен экспортировать шрифт из Illustrator в большем размере, чем требуется, а затем сделать дополнительное уменьшение (каким-то образом!) После этого - хотя, конечно, опять же, я не могу доверять веб-браузерам делать это за меня.< /p>

РЕДАКТИРОВАТЬ: я также должен был отметить, что эффект намного хуже на моем мониторе, чем на моем ноутбуке (заманчиво сказать, что у меня плохой монитор, но есть много веб-сайтов, где версия монитора тоже выглядит хорошо!)

Имейте в виду, что еще одна вещь, которая повлияет на его отображение, — это алгоритм, используемый для преобразования (например) изображения размером 1000 x 1000 пикселей в изображение размером 50 x 50 на вашем веб-сайте. Мне нравится сохранять огромную «основную» копию, а затем вручную изменять размер изображения до размера, который он будет иметь на веб-сайте, внося необходимые изменения, чтобы оно выглядело правильно; таким образом, браузеры не пытаются автоматически изменять размер изображения и, следовательно, могут создавать артефакты в изображении.

5 ответов 5

Photoshop и Illustrator не должны иметь здесь большого значения. Что вы можете попробовать:

Преобразуйте текст логотипа в контуры перед сохранением в формате PNG.
Сохраните очень большой PNG (например, 1000 пикселей) и уменьшите его масштаб в CSS.
Сохраните свой логотип в формате SVG (это то, что Apple делает на своем веб-сайте). Это более свежий подход, используемый веб-разработчиком, с которым я работаю. Используйте это, чтобы очистить SVG, а это, чтобы закодировать и сделать его совместимым с браузером.

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

Еще один вариант — использование SVG. Изучите это немного и посмотрите, что делают другие. Если вы считаете, что этот ответ каким-то образом помог, попробуйте щелкнуть стрелку вверх и/или значок проверить рядом с моим ответом выше. Спасибо

Спасибо, Люциан. Честно говоря, наилучшие результаты получаются при использовании увеличенного изображения и уменьшении размера браузера, но мне не нравится такой подход, потому что 1) он различается в разных браузерах и 2) если вы изменяете размер страницы, весь логотип становится нечетким. в то время как браузер постоянно изменяет размер. Теперь я рассмотрю SVG немного подробнее - первая попытка особо ничего не изменила, но спасибо за наводку.

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

Правда? Даже просто указав атрибут высоты css, вы можете увидеть эффект здесь, на логотипе Google, когда вы изменяете размер страницы (codepen.io/d3wannabe/pen/gmeyNG) — во время изменения размера изображение становится пиксельным, в то время как браузер постоянно перерисовывает. Если вы не укажете какой-либо css, изменение размера страницы не повлияет на изображение

Экспортируйте свой логотип в формате SVG по трем причинам:

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

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

Вот что вам нужно сделать:

Создайте свой логотип в Illustrator.
Экспортируйте свой логотип с помощью функции сохранения в формате SVG в Illustrator.
Импортируйте SVG на свой сайт с помощью тега изображения или непосредственно с помощью кода SVG, предоставленного Illustrator.

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

Редактировать: используйте Illustrator вместо Photoshop, если вам нужен четкий векторный логотип, размер которого может быть увеличен до любых размеров по желанию, а не что-то, что ограничено размером, на который вы его проектируете. В Photoshop есть возможности экспорта в SVG, но они довольно дерганые по сравнению с Illustrator. Я бы на 100 % использовал Illustrator для этого случая, неважно, какой вы используете.

Отслеживание PPI

Это совершенно гипотетически, но вполне вероятно, что это связано с масштабированием пользовательского интерфейса ОС. В настоящее время у многих мониторов так много пикселей, что многие люди считают их неудобно маленькими, если все отображается на 100%. В результате, когда вы покупаете монитор Full HD, например, окна по умолчанию немного увеличиваются. Если есть информация, выходящая за пределы текущего размера, она будет использовать эту информацию для заполнения этой добавленной детализации, поэтому 100% могут выглядеть немного нерезкими, и вам нужно сохранить версии с более высоким DPI и серверные версии, чтобы они выглядели четкими на этих мониторах. Так что да, в этом случае вы позволяете браузеру выполнять все сокращения (вы даже можете выбрать алгоритм в CSS, но вы не должны этого хотеть). Вот очень старый ответ, описывающий, как это сделать.

Ну, чтобы изображение было четким при таком низком разрешении, есть только один маршрут. Векторная графика. Одним из таких предлагаемых типов файлов является SVG (масштабируемая векторная графика), но недостаточно просто загрузить растровое изображение, а затем экспортировать его как SVG, потому что тогда вы пытаетесь просто принудительно преобразовать растеризованный файл в векторный, он не может выглядеть лучше оригинала по этому пути.

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

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

Кроме того, функция "Сохранить в/для Интернета" — это код для "разделения моего файла с большим сжатием, чтобы сделать его маленьким и быстро загружаться".

Я обещаю на 100 %, что SVG — это то, что нужно. У вас уже есть Adobe Illustrator, но для тех, у кого его нет, Inkscape — еще один бесплатный редактор векторной графики с открытым исходным кодом, который можно легко использовать для создания четких логотипов любого размера.

PDF-файлы также используют векторную графику (в основном, хотя вы также можете встраивать растровые изображения), но они не поддерживаются для логотипов в Интернете (тот, что показан на вкладках и т. д.).

Как он отмечает, некоторые вещи, которые он делает, не нужны для текста, но если вы начинаете с растрового изображения, вам каким-то образом нужно перейти от него к векторам. В Inkscape есть инструмент, который делает это автоматически, но на самом деле он хорошо справляется только с простым вводом. Я недостаточно знаком с Illustrator, чтобы сказать, лучше ли их инструмент (если он у них есть). Вот почему я ранее предполагал, что вам, возможно, потребуется проследить векторы по растровому изображению, чтобы воссоздать логотип, а затем отказаться от растрового изображения и экспортировать его.

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

поиск меню

Урок 6. Сохранение изображений

Введение

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

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

Параметры сохранения

При сохранении файла в Photoshop у вас есть несколько вариантов и форматов файлов на выбор:

PSD: это тип файла по умолчанию для документов Photoshop, хотя вы не обязательно будете использовать его для каждого изображения. Он сохранит ваши слои и всю другую информацию в вашем изображении, чтобы вы могли легко отредактировать его позже.Файлы PSD предназначены для открытия в Photoshop, поэтому, если вы хотите поделиться изображением с другими, вам также потребуется сохранить копию изображения в распространенном формате файла, например JPEG.
Распространенные форматы файлов. Изображения можно сохранять в файлы различных распространенных типов, включая JPEG и PNG. Эти форматы файлов можно просматривать и редактировать практически на любом компьютере или мобильном устройстве, что делает их удобными для обмена с другими. Однако, в отличие от файлов PSD, эти форматы не так полезны, если вы планируете продолжить редактирование файла, и они также не могут сохранять информацию о слоях.
Сохранить для Интернета. Если вы планируете загрузить изображение в Интернет, например, в блог или на веб-сайт, вам следует использовать функцию "Сохранить для Интернета". Этот инструмент позволяет сохранять изображения, оптимизированные для Интернета, что упрощает их загрузку и просмотр в Интернете. Функция «Сохранить для Интернета» также включает несколько полезных функций для подготовки изображений для публикации в Интернете, включая возможность изменения размера изображений.

На изображении ниже вы можете увидеть три разные версии файла изображения: исходный файл JPEG, отредактированную версию PSD и окончательную версию JPEG, размер которой был изменен и сохранен для Интернета. Вы можете видеть, что веб-версия имеет гораздо меньший размер файла, чем исходная версия и версия PSD.

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

Сценарий 1

Допустим, вас попросили создать новое изображение заголовка для веб-сайта компании. Вам дали фотографию для включения, и вам нужно добавить текст с названием компании. Поскольку вы, скорее всего, будете редактировать и пересматривать проекты такого типа, вам нужно сохранить их в виде PSD-файла. Таким образом, вы можете легко продолжить редактирование файла позже. А поскольку в конечном итоге оно будет опубликовано в Интернете, вам также может понадобиться использовать функцию «Сохранить для Интернета», чтобы создать новую версию готового изображения в формате JPEG.

Сценарий 2

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

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

Использование «Сохранить как»

Вы будете использовать команду "Сохранить как" для сохранения файлов в формате PSD, а также в других распространенных форматах, таких как JPEG и PNG.

Чтобы сохранить файл с помощью функции "Сохранить как":

Если вы уже сохранили свой проект в виде PSD-файла, вы можете выбрать «Файл» > «Сохранить» или нажать Ctrl+S (или Command+S на Mac), чтобы сохранить прогресс в любое время. Однако если вы работаете с другим форматом, например JPEG, мы рекомендуем использовать функцию "Сохранить как", чтобы избежать перезаписи исходного файла.

Попробуйте это!

Откройте файл примера в Photoshop и попробуйте сохранить его в другом формате, например PSD и JPEG. Обратите внимание, что формат PSD сохраняет отдельные слои, а формат JPEG — нет.

Использование функции «Сохранить для Интернета»

При использовании функции "Сохранить для Интернета" вам необходимо принять несколько решений относительно изображения, которое вы сохраняете:

Попробуйте это!

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

Для достижения наилучших результатов мы рекомендуем использовать веб-браузер Chrome с этими интерактивными элементами.

Чтобы сохранить для Интернета:

Попробуйте это!

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

Итак, вы готовы к запуску и хотите создать логотип. Как вы это делаете?

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

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

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

Почему вы должны использовать водяной знак?

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

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

Начало работы

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

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

Примечание по использованию Photoshop

Это руководство основано на использовании программы Adobe Photoshop CC. Некоторые функции могут не переноситься в используемую вами версию. В таких случаях обратитесь к онлайн-руководствам или получите доступ к справке через меню программ

Как сделать логотип прозрачным в Photoshop

Откройте файл. Нажмите «Файл» и откройте файл изображения в Adobe Photoshop.
Добавить прозрачный слой. На панели слоев выберите «Слой» > «Новый слой» в меню панели слоев. Перетащите этот новый пустой слой под слой с логотипом и выберите слой с контентом на панели слоев.
Сделайте фон прозрачным: используйте инструмент «Волшебная палочка» или инструмент «Лассо». С помощью инструмента «Волшебная палочка» выберите область изображения, которую хотите сделать прозрачной. Используя параметр допуска 32 в инструменте "Волшебная палочка", поэкспериментируйте с различными настройками, чтобы получить нужный прозрачный фон.
Удалить фон. После того, как вы выбрали с помощью волшебной палочки всю область, которую хотите сделать прозрачной, удалите фон, и прозрачный фон станет видимым.
Повторить для других областей вашего изображения. Возможно, вам придется повторить этот процесс выбора и удаления для других областей вашего изображения, в зависимости от его формы, чтобы получить прозрачный фон.
Сохраните файл с логотипом. Если вы довольны своим изображением и его прозрачным фоном, не забудьте сохранить его в формате PNG. Нажмите «Файл» -> «Сохранить как». Выберите «PNG (*.PNG) в качестве формата файла. Сохраните его и нажмите "ОК".

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

Как создать текстовый водяной знак

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

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

Сначала создайте новый проект.

Откройте изображение, на которое вы хотите добавить водяной знак. После открытия создайте новый пустой слой.

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

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

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

Как создать водяной знак с логотипом

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

Сначала создайте новый проект.

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

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

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

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

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

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

Как применить водяной знак

Откройте изображение, на которое вы хотите нанести водяной знак, и создайте новый слой поверх него, как это делалось ранее в пошаговом режиме только для текста. Этот новый слой будет «слоем логотипа». Откройте меню и выберите «Поместить встроенный»

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

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

Примечание об изображениях в логотипах

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

Заключение

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

Теперь, когда вы можете создать логотип в Photoshop, давайте сделаем несколько действительно потрясающих изображений.

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

Пропустите эти быстрые ссылки:

Что такое прозрачный фон PNG

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

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

Напротив, здесь вы можете увидеть логотип на белом фоне:

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

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

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

PNG, JPG и GIF

PNG — это только один из форматов изображений, которые вы можете использовать на своем веб-сайте, и он может быть не самым знакомым вам. Однако это определенно полезно, и вам, вероятно, следует ознакомиться с ним. Давайте рассмотрим некоторые варианты изображений.

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

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

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

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

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

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

Какие инструменты можно использовать для создания прозрачного фона?

Наиболее популярным инструментом для редактирования прозрачных PNG-файлов является Adobe Photoshop, но это не единственный инструмент. Мы рассмотрим эти три программы для редактирования прозрачных файлов PNG:

Давайте посмотрим.

Сделайте фон прозрачным с помощью Canva

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

Функция удаления прозрачного фона доступна только в тарифном плане Pro, стоимость которого составляет 12,99 долларов США в месяц. Он поставляется с 30-дневной бесплатной пробной версией, так что вы можете удалить столько фонов, сколько захотите, за месяц бесплатно!

НОВИНКА: вы можете включить до 5 пользователей в новую цену!

1. Начните с создания дизайна

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

После создания дизайна вы увидите экран, который выглядит следующим образом:

2. Загрузить изображение

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

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

Вы можете изменить размер в соответствии с пространством по своему усмотрению.

Примечание. Мы добавили цветной фон, чтобы я мог видеть, когда мой фон исчезнет.

3. Удалить фоновое изображение

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

Нажмите, и все готово! Легко!

После:

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

4. Скачать изображение

Выберите загрузку в правом верхнем углу. Вы увидите это меню:

Убедитесь, что тип вашего файла — PNG, и что вы установили флажок «Прозрачный фон». Затем нажмите «Скачать»!

Посмотрите это видео

, чтобы ознакомиться с видеоинструкцией.

1. Откройте файл вашего логотипа

2. Добавить прозрачный слой

Выберите «Слой» > «Новый слой» в меню (или просто нажмите квадратный значок в окне слоев).

Новый слой должен автоматически стать прозрачным.

Перетащите этот новый слой под слой изображения и выберите слой содержимого.

3. Сделать фон прозрачным

С помощью инструмента "Волшебная палочка" или "Лассо" выберите область изображения, которую хотите сделать прозрачной. Используйте параметр допуска 32 или поэкспериментируйте с другими параметрами, чтобы получить желаемый результат.

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

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

4. Сохранить логотип как прозрачное изображение PNG

Нажмите «Файл» -> «Сохранить как». Выберите «PNG (*.PNG) в качестве формата файла. Обратите внимание, что хотя прозрачный фон в Photoshop выглядит клетчатым, в конечном файле PNG он будет прозрачным. Теперь вы можете загрузить этот логотип с прозрачным фоном на свой сайт!

Совет. Возможно, вам потребуется перейти в «Режим» -> «Цвет RBG», чтобы изменить цветовой формат изображения на RBG, который поддерживает прозрачность.

Посмотрите это видео

, чтобы ознакомиться с видеоинструкцией.

Сделайте фон прозрачным с помощью Fiverr

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

Мы использовали эту услугу раньше, и они обычно запускают проект в течение 1 дня (иногда быстрее), включают исправления и стоят около 5 долларов США или меньше за изображение.

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

1. Перейти к концертам с логотипом Fiverr

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

2. Выберите концерт

Начинается с 5 долларов США за 1 изображение. Многие люди предлагают до 5 или 10 изображений всего за 5 долл. США, поэтому не забудьте поискать подходящие цены и услуги.

Мы рекомендуем выбирать того, у кого рейтинг 4,9 из 5,0 или выше, неограниченное количество версий и 5 изображений. Обычно доставка занимает меньше часа, поэтому обратите внимание на быструю доставку.

3. Приобрести услугу Fiverr

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

Fiverr теперь взимает плату за обслуживание (новая в этом году), поэтому заложите эту дополнительную сумму. Например, у этого концерта за 5 долларов плата за обслуживание составляет 2,25 доллара!

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

Лучшие программы для редактирования прозрачных изображений

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

Читайте также: