Решено: сохранить логотип с прозрачным фоном — Сообщество поддержки Adobe — 8444469

Привет, я создаю логотип компании с помощью Photoshop CC. Основная цель моего логотипа — чтобы он хорошо вписался в заголовок моего веб-сайта. Как вы можете видеть на http://comparedeals.net веб-сайте моего мобильного телефона, мне пришлось изменить цвет фона веб-страницы на белый, поскольку логотип непрозрачен. Как сделать белый фон логотипа прозрачным?

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

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

Спасибо.


Привет, я Я создаю логотип компании с помощью Photoshop CC. Основная цель моего логотипа — чтобы он хорошо вписался в заголовок моего веб-сайта. Как вы можете видеть на http://comparedeals.net веб-сайте моего мобильного телефона, мне пришлось изменить цвет фона веб-страницы на белый, поскольку логотип непрозрачен. Как сделать белый фон логотипа прозрачным?

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

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

Спасибо.


Mohammad.Harb
Adobe Community Professional,
13 июля 2016 г.

Копировать ссылку в буфер обмена

Скопировано

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

если вы это уже сделали, но не работает

Убедитесь, что вы не объединили текст с фоном или за ним нет содержимого.

, если это не сработало либо, поделитесь снимком экрана для своих слоев

Лайки

1 1 Как

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Подписаться
  • Отчет
Принципы сообщества
Будьте добры и уважительны, отдавайте должное первоисточнику содержания и ищите дубликаты перед публикацией. Подробнее

Ответить
Загрузка …

13 июля 2016 г. 1/t5/photoshop/save-logo-with-transparent-background/mp/8444470 # M52210


сохраните его как PNG, другой формат файла — jpg не поддерживает прозрачность.

если вы это уже сделали, но не работает

Убедитесь, что что вы не объединили текст с фоном или за ним нет содержимого.

если это тоже не сработало, поделитесь снимком экрана для вашего Слои


Терри_Стивенс
LEGEND,
13 июля 2016 г.

Копировать ссылку в буфер обмена

Скопировано

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

Как вам сказал Мохаммад должен использовать формат файла .PNG для сохранения, поскольку он поддерживает прозрачность, а jpeg — нет.

Лайки

2 2 лайка

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Подписаться
  • Отчет
Принципы сообщества
Будьте добры и уважительны, отдавайте должное первоисточнику содержания и ищите дубликаты перед публикацией. Подробнее

Ответить
Загрузка …

13 июля 2016 г. 2/t5/photoshop/save-logo-with-transparent-background/mp/8444471 # M52211


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

Как вам сказал Мохаммад должен использовать формат файла .PNG для сохранения, поскольку он поддерживает прозрачность, а jpeg — нет.


Вы можете сделать это, полностью удалив фон и используя ярлык
(shift + ctrl + alt + s) что приведет к сохранению для веб-окна. Выберите png-24 для изображения высокого качества из раскрывающегося списка, и оно должно служить вашей цели.


comparedeals-net
Новое Здесь,
13 июля 2016 г.

Копировать ссылку в буфер обмена

Скопировано

Спасибо, что у меня сработало!

Нравится

0 Нравится

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Подписаться
  • Отчет
Принципы сообщества
Будьте добры и уважительны, отдавайте должное первоисточнику содержания и ищите дубликаты перед публикацией. Подробнее

Ответить
Загрузка …

13 июля 2016 г. 0/t5/photoshop/save-logo-with-transparent-background/mp/8444473 # M52213


Спасибо, что у меня сработало!


bzareenk
Энтузиаст,
13 июля 2016 г.

Копировать ссылку в буфер обмена

Скопировано

добро пожаловать

Нравится

2 2 лайка

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Подписаться
  • Отчет
Принципы сообщества
Будьте добры и уважительны, отдавайте должное первоисточнику контента и ищите дубликаты перед публикацией. Узнать больше

Ответить
Загрузка …

13 июля 2016 г. 2/t5/photoshop/save-logo-with-transparent-background/mp/8444474 # M52214


добро пожаловать


proketyperry
Новое здесь,
26 октября 2019 г.

Копировать ссылку в буфер обмена

Скопировано

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

Нравится

0 Как

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Следуйте
  • Отчет
Принципы сообщества
Будьте добры и вежливы, отдайте должное первоисточнику содержания и ищите дубликаты перед публикацией. Узнать больше

Ответить
Загрузка …

26 октября 2019 г. 0/t5/photoshop/save-logo-with-transparent-background/mp/10695375 # M272774


Логотип с прозрачным фоном может иметь решающее значение для создания дизайна и рекламы профессионального уровня. Это дает вам больше вариантов того, где вы можете разместить свой логотип на Pinoy TV, и позволяет улучшить внешний вид конечного продукта. Хотя Photoshop — отличный инструмент для этого, есть много других способов сделать это, дизайнер вы или нет!


eastmanannie LATEST
Новое здесь,
15 июня 2020 г.

Копировать ссылку в буфер обмена

Скопировано

Почему этого не произошло работать на меня? У него все еще белый фон.

Лайки

0 Как

Перевести

Перевести

Отчет

Отчет

  • Закладка
  • Подписаться
  • Пожаловаться
Правила сообщества
Будьте добры и уважительны, отдайте должное первоисточнику контента и ищите дубликаты перед публикацией. Узнать больше

Ответить
Загрузка …

15 июня 2020 г. 0/t5/photoshop/save-logo-with-transparent-background/mp/11210808 # M339547


Почему у меня это не сработало? У него все еще белый фон.



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

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

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

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

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

  1. Make ваше изображение в многослойный файл
  2. Создайте свой выбор
  3. Удалите фон
  4. Сохраните изображение в подходящем для Интернета формате
  5. Сохраните файл

Шаг 1. Превратите изображение в многослойный файл

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

Источник: devnenski/Adobe Stock

Откройте панель Слои . По умолчанию эта панель находится справа от окна изображения, но если вы не видите ее, вы можете получить к ней доступ, щелкнув Window> Layers в раскрывающемся меню в верхней части окна. окно приложения.

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

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

Узнайте, как использовать слои в Photoshop с помощью этого руководства
Узнать больше

Шаг 2: Cre съел свой выбор

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

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

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

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

Шаг 3. Удалите фон

После того, как у вас будет только ваш продукт uct, выберите инверсию, набрав SHIFT + CTRL + I (SHIFT + COMMAND + I на Mac) или выбрав Select> Inverse в раскрывающемся меню в верхней части окна приложения. .

Выбрав инверсию (фон), введите BACKSPACE (УДАЛИТЬ на Mac). Теперь ваш фон будет прозрачным. В Photoshop прозрачный фон представлен серо-белым узором в виде шахматной доски.

Введите CTRL + D (COMMAND + D на Mac), чтобы отменить выбор.

Шаг 4. Сохраните изображение в соответствующем веб-интерфейсе. формат

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

Наилучший формат для сохранения вашего изображения — PNG-24. Этот формат позволяет использовать несколько слоев прозрачности, что означает, что ваше изображение никогда не будет иметь пиксельного «ореола» при размещении на другом цветной фон. Старые прозрачные форматы файлов, такие как PNG-8 и GIF, могут создавать этот нежелательный эффект ореола, поэтому по возможности используйте PNG-24.

Узнайте, как переформатировать, изменить размер и оптимизировать ваши изображения для Интернета
Подробнее

Чтобы сохранить файл в формате PNG-24 в Photoshop CC, введите SHIFT + ALT + CTRL + W (SHIFT + OPTION + COMMAND + W на Mac) или выберите Файл> Экспорт> Экспортировать как… из раскрывающегося меню в верхней части окна приложения.

Примечание. Если вы используете старую версию Photoshop, и вы не видите параметр Экспортировать как … , вы можете выбрать Сохранить для Интернета и выбрать PNG-24 из раскрывающегося меню Preset в правой части диалогового окна.

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

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

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

Кроме того, когда многие из ваших клиентов просматривают ваш продукт на дисплее Retina, рекомендуется сохранять изображение продукта в размере на 50–100% больше. чем ожидаемый размер. Это сделает изображение четким на всех устройствах. Другими словами, , если вы знаете, что ваш продукт будет отображаться с максимальной шириной 400 пикселей, вы захотите сделать его шириной не менее 600 пикселей здесь..

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

Шаг 5: Сохраните свои file

После того, как вы установили правильный размер Image Size , нажмите Экспортировать все .

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

Нажмите Сохранить .

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

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

Как создать прозрачный фон для логотипа в Photoshop

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

Однако, если ваш логотип сохранен в формате JPG, вам понадобится чтобы удалить фон в Photoshop и повторно сохранить файл в формате PNG-24, как мы сделали для изображения продукта в приведенном выше примере. Если вам посчастливилось иметь логотип в виде векторного файла (с расширениями .AI, .EPS или .PDF), вам все равно нужно открыть файл в Photoshop и преобразовать его в PNG-24, чтобы он быть в формате, готовом к использованию в Интернете.

Узнайте, как передать на аутсорсинг преобразование растров в векторные
Подробнее
  1. Откройте файл с логотипом в Photoshop.
  2. Сделайте фон прозрачным
  3. Сохраните изображение как файл PNG.

Шаг 1. Откройте файл с логотипом в Photoshop.

В Photoshop перейдите выберите Файл> Открыть и перемещайтесь, пока не увидите файл с логотипом. Нажмите Открыть .

Если вы открываете файл .JPG (или другой растровый формат), файл просто откроется в Photoshop.

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

  • Crop To : установлен на Bounding Box
  • Установлен флажок «Ограничить пропорции».
  • Режим: установлен на RGB Color

Щелкните ОК .

Шаг 2. Сделайте фон прозрачным

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

Как и в Шаге 1 , когда мы сделали фон изображения продукта прозрачным выше, вам нужно дважды щелкнуть слой Background на панели Layers и нажать OK , чтобы преобразовать Фон на Слой 0 .

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

После того, как вы выбрали весь фон, введите BACKSPACE (УДАЛИТЬ на Mac). Теперь у вас будет прозрачный фон, представленный серо-белым узором в виде шахматной доски.

Шаг 3. Сохраните изображение как файл PNG в Photoshop.

Следуйте шагам 4 и 5 из того места, где мы создали продукт. прозрачное изображение выше, чтобы экспортировать файл в формате PNG-24. Эти шаги одинаковы независимо от того, с какого формата файла вы начали, будь то исходный файл в формате JPG, AI, PDF или в другом формате.

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

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

Хотите узнать больше? Просмотрите остальные наши руководства по Photoshop.
Узнать больше

Теги:

  • Фон удаление,
  • Как сделать,
  • Редактирование изображений,
  • Photoshop
Оцените статью
logicle.ru
Добавить комментарий