Как отображать png изображения с прозрачным фоном? — Rhino для Mac
Леандро 1
Привет, я новичок в Rhino.
Я пытаюсь отрендерить некоторые изображения .png без фона на новом Rhino для Mac
Когда я просматриваю их в окне просмотра, установленном в режим рендеринга, они выглядят нормально, но когда я их рендерю, они получаются с белым фоном.
Я использую команду PictureFrame с параметром альфа-прозрачности.
Как я могу отображать изображения png без фона?
Спасибо, L. 23×859 212 КБ
Брайан Джей (Брайан Джеймс) 2
Откройте редактор материалов из раскрывающегося меню «Визуализация» и добавьте ту же текстуру png в канал прозрачности материала изображения.
леандро 3
Спасибо, Брайан,
все еще не работает.
Я прикрепляю несколько образцов, так что смотрите, что я имею в виду
девушка4.png1570×1106 116 КБ
Брайан Дж. (Брайан Джеймс) 4
Спасибо… в моем тесте не было черного цвета, но мне это кажется ошибкой. Я сейчас кое-что запишу для разработчиков. Тем временем я сделал вам карту прозрачности для использования с этой текстурной картой. Я также сделал версию png с альфа-каналом в PS, но она не работала лучше, чем ваша.
@andy тоже может внести свой вклад.
Снимок экрана 08.07.2015, 15:30:16.png1248×1128 431 КБ
леандро 5
Спасибо…
Сейчас я сделаю это
JKayten 6
Привет, Брайан,
У меня проблема с изображениями, не отображающими альфа-канал или иным образом. Мне уже удалось использовать рамку для размещения изображений, но теперь любые дальнейшие попытки дают серое поле с сообщением об ошибке «изображение не найдено». Можете ли вы взглянуть на это. Возможно, я неправильно установил параметр импорта?
Images.zip (2,4 МБ)
Top2.3dm 2.
zip (170,9 КБ)
2015-12-31_13-14-55.png1574×1153 152 КБ
BrianJ (Брайан Джеймс) 7
Я также вижу это здесь для верхнего изображения и зарегистрировал его как http://mcneel.myjetbrains.com/youtrack/issue/MR-2474
. ваши png-файлы позволяют их импортировать, но альфа-канал отображается белым… это будет отдельный отчет об ошибке. http://mcneel.myjetbrains.com/youtrack/issue/MR-2475
Еще одна вещь, которую я заметил, заключалась в том, что имя изображения спереди в вашем файле 3dm не использовало то же имя для файла изображения «front» вместо «frnt»… Я не думаю, что это связано с проблемой, о которой я сообщил, но думал, что упомяну об этом.
Дж. Кайтен 8
Хорошо, большое спасибо. Я пока продолжу использовать только jpeg.
Тем не менее, у меня была ненадолго доступная прозрачность для реф-изображений, и я очень хочу получить ее снова:relaxed:
Джастин_Парсон 9
Я немного опоздал на вечеринку, но я думаю, что понял это — по крайней мере, для того, чего я пытался достичь. В Photoshop сохраните изображение с его альфа-каналом как BMP, поскольку оно сохраняет альфа-канал. В редакторе материалов используйте это для цвета. Затем создайте инверсию вместе с соответствующим альфа-каналом и сохраните его также как BMP. Используйте это изображение в качестве прозрачности в Rhino.
Уоррен (Уоррен) 10
Привет, Извините, это мой первый пост. Я использую Rhino для Mac 5, и у меня тоже есть эта проблема: я создаю .png в фотошопе, но не могу заставить работать прозрачность при рендеринге. Я не могу следовать методу Джастина. В PS CS вы не можете вывести BMP с альфа-каналом, так что… есть ли какой-нибудь простой способ обойти это?
дан (Дэн) 11
Пожалуйста, попробуйте это в RhinoWIP. Там это должно быть исправлено.
Как оптимизировать изображения для Интернета без потери качества
Перейти к разделу: Типы файлов изображений | Насколько большим должно быть ваше изображение (КБ) | Насколько большим должно быть ваше изображение (ШxВ)
Сохранение JPG для Интернета | Сохранение PNG для Интернета
Как графический дизайнер в середине 2016 года, большинство завершенных клиентских проектов завершается в цифровом формате — графика для веб-сайта, PDF-файлы для загрузки, социальная графика, технические описания, брошюры — вместо того, чтобы распечатываться .
Эти файлы должны быть четкими, подходящего размера и, самое главное, маленькими (в килобайтах, а не в пикселях). Это руководство покажет вам шаг за шагом как оптимизировать изображения для Интернета с использованием форматов JPG и PNG .
Подготовка файлов к печати сильно отличается от подготовки их к размещению в Интернете. Файлы для печати требуют фотографий с высоким разрешением (обычно 300 точек на дюйм, или точек на дюйм), контурного текста, обрезов для цвета от края до края, несжатых изображений, настроек прозрачности и всевозможных сумасшедших вещей.
В итоге размер файла для печати оказывается довольно большим (я уже отправлял на принтер многостраничный файл каталога размером 120 МБ). Если вы думаете, что кто-то собирается загрузить с вашего сайта что-нибудь размером 120 МБ (если только это не огромный программный пакет), у меня для вас плохие новости: этого не произойдет.
Увидев, что слишком много веб-сайтов загружается с фоновым изображением полной ширины размером 3,0 МБ, я хотел поговорить о подготовке цифровых ресурсов, в частности изображений (PNG, JPG, GIF), для Интернета.
Типы файлов изображений: PNG, JPG, GIF, PDF Если вы загружаете файл брошюры, вы, скорее всего, увидите файл FILENAME.PDF. PDF-файлы не являются файлами изображений, но они широко используются для загрузки цифровых активов.
Когда сохранять в формате JPG/JPEG
При работе с собственным изображением сохраняйте его как файл .JPG, если это фотография, изображение с большим количеством цветов (более 256) или изображение, содержащее градиенты.
Когда сохранять в формате PNG
Файлы PNG отлично подходят для логотипов, векторных рисунков, сплошных цветных фигур или любых изображений, для которых требуется прозрачность .
Если вы сохраняете файл для Интернета из Photoshop, существует два варианта формирования PNG: PNG-8 и PNG-24. PNG-8 предлагает меньший размер файла, но ограничивает вас максимум 256 цветами и сомнительным параметром прозрачности (прозрачные изображения PNG-8 обычно имеют неровные, некрасивые края).
Изображения в формате PNG-24 — это находка: они могут сохранять сложные изображения с качеством, подобным JPG, С прозрачным фоном.
Так почему бы не использовать их для всего? Размеры их файлов могут быть ОГРОМНЫМИ (но мы поговорим о том, как их сжать позже).
Когда сохранять в формате GIF
Существует много общего между форматами GIF и PNG-8. GIF-файлы особенные, потому что это формат, который позволяет анимацию (GIPHY, кто-нибудь?). Если вы сохраняете файл и пытаетесь решить, сохранять ли его как PNG или GIF, попробуйте оба варианта, чтобы увидеть, что дает вашему изображению большую четкость и меньший размер файла, и выберите формат, который дает вам наилучший результат.
Когда сохранять в формате PDF
Любой дизайн, отформатированный как страница, а не просто отдельное изображение — брошюра втрое, одно- или двусторонний рекламный флаер, плакат, меню, тематическое исследование, и электронная книга или белая бумага.
Сохранение файла в формате PDF сохраняет макет страницы и дизайн для всех, кто загружает файл. Это также обеспечивает легкое и чистое чтение, поскольку текст в PDF масштабируется и сохраняется, а текст также доступен для поиска с помощью Ctrl + F (действительно полезно для длинных текстовых документов).
Мы не будем рассматривать сжатие PDF в этом руководстве, так как оно достаточно сложное, чтобы потребовать отдельного поста, но мы хотели упомянуть его, чтобы включить наиболее распространенные цифровые активы, с которыми вы столкнетесь и которые требуют некоторой оптимизации для Интернета.
Сохранить
Насколько большим должно быть ваше изображение (КБ)?
Это личное предпочтение, и оно будет варьироваться в зависимости от баланса, который вы пытаетесь найти между молниеносной скоростью загрузки сайта и четкими красивыми изображениями.
Мы стараемся, чтобы изображения, используемые на нашем веб-сайте, не превышали 75 КБ (килобайт) — чем меньше, тем лучше — и как можно меньше, чтобы изображение не выглядело плохо. Некоторые очень большие изображения заголовка или баннера, которые являются полноэкранными и высокими, могут весить 150 КБ, но мы настоятельно рекомендуем свести к минимуму изображения размером более 100 КБ (используйте только в случае крайней необходимости).
Подумайте сами: вам действительно нужно большое изображение баннера на этой странице? Повысит ли это ценность для ваших посетителей и повысит коэффициент конверсии? Если нет, пропустите его.
Добавление изображения размером 100 КБ на страницу вашего веб-сайта может увеличить время загрузки на несколько секунд. Для мобильных пользователей эти 100 КБ могут быть разницей между совершением покупки или закрытием вкладки вашего сайта.
Насколько большим должно быть ваше изображение (ширина x высота)?
Нет причин загружать гигантский файл изображения на веб-страницу, а затем ожидать, что WordPress уменьшит его для вас. Сайт по-прежнему загружает исходный гигантский файл изображения (если вы не выбрали миниатюру или уменьшенный размер с помощью WordPress), таким образом тратя драгоценные КБ во время загрузки.
Хочешь узнать секрет оптимизации W x H? Сохраните изображение в ТОЧНОМ РАЗМЕРЕ, который вам нужен — ни больше, ни меньше.
Вот хитрый трюк, который я использую постоянно: установите надстройку браузера Firefox под названием MeasureIt. После установки откройте веб-страницу, на которую вы хотите добавить свое изображение.
Нажмите кнопку «Измерить» на панели инструментов Firefox. Ваш экран станет серым, и у вас появится курсор в виде перекрестия. Используйте инструмент, чтобы нарисовать прямоугольник в том месте, где вы хотите разместить изображение. Обратите внимание на значения W и H. Обрежьте/измените размер изображения до нужного размера. Сохраните файл для сети. Сделанный.
Сохранить
Эксклюзивный бонус: Загрузите пошаговый контрольный список, который покажет вам 12 лучших способов ускорить работу вашего веб-сайта WordPress (совет: оптимизация изображений находится в верхней части списка).
Шаг за шагом: как оптимизировать изображения для Интернета
JPEG Я собираюсь использовать гигантское изображение из бесплатной библиотеки изображений Unsplash.
Эту фотографию лучше всего сохранять в формате JPG (не в формате GIF или PNG), потому что она содержит МНОГО цветов и не является логотипом или изображением в векторном стиле. Эмпирическое правило: если это фотография, сохраните ее в формате JPG .
1. Исходная фотография, которую я взял для этого примера, весит 6,4 МБ. Вы можете посмотреть исходную фотографию здесь, но я буду использовать оптимизированные изображения для этого сообщения в блоге, чтобы загрузка не занимала 12 секунд 😉 Мы не можем использовать изображение размером 6,4 МБ на веб-сайте, поэтому нам нужно масштабировать это вниз.
2. Допустим, мы хотим взять это изображение и добавить его на мою страницу веб-дизайна (где у меня в настоящее время есть графика «на 40% больше трафика»). Первое, что мы сделали бы, это измерьте пространство, в котором находится этот рисунок с помощью инструмента MeasureIt :
3. Из измерений мы видим, что размер моего изображения Unsplash должен быть около 439 пикселей (пикселей) в ширину x 419 пикселей в высоту .
Мы собираемся открыть изображение Unsplash в Photoshop, а затем использовать инструмент кадрирования, чтобы сделать его такого размера.
Примечание редактора. Если у вас нет Photoshop и вы часто редактируете изображения, я настоятельно рекомендую ознакомиться с месячным планом Adobe Creative Cloud самого низкого уровня. За 9 долларов.99 в месяц у вас есть доступ к новейшим версиям Adobe Photoshop и Lightroom. Учитывая все это, это довольно хорошая сделка (особенно если учесть, что Photoshop в эпоху до Creative Cloud стоил около 600 долларов за одну лицензию).
4. В Photoshop нажмите C , чтобы активировать инструмент обрезки, или щелкните значок инструмента обрезки на панели инструментов.
В верхней горизонтальной панели вы увидите параметры инструмента кадрирования. Выберите Ш X В X Разрешение из выпадающего меню, затем введите ширину цели (439px) в поле ширины и высоту цели (419 px) в поле высоты. В поле разрешения введите 72.
5. С помощью инструмента кадрирования нарисуйте на изображении квадрат/прямоугольник обрезки. Из-за введенных вами настроек ширины и высоты квадрат обрезки будет ограничен, а фактическая обрезка будет точного размера, который вам нужен. Скомпонуйте изображение так, как вам нравится, затем нажмите . Введите или дважды щелкните внутри квадрата кадрирования, чтобы кадрировать.
6. После того, как вы собрали урожай, вам может понадобиться дважды щелкните инструмент «Увеличительное стекло» или выберите «Просмотр» > «100%», чтобы увидеть, как выглядит изображение в реальном размере. Если вам не нравится, как получился урожай, вы можете отменить и повторить попытку, пока не получите то, что вам нравится.
7. Когда вы довольны обрезанным изображением, нажмите (на Mac) Command + Alt + Shift + S (Ctrl + Alt + Shift + S в Windows) или выберите «Файл» > «Экспорт» > «Сохранить для Интернета». (Наследие).
По состоянию на июль 2016 года Adobe пытается перейти на новый рабочий процесс «Экспортировать как» на основе своей новой, более эффективной платформы Adobe Generator для экспорта ресурсов изображений из PS.
Однако на сегодняшний день параметры и функции оптимизации, представленные в «Экспортировать как», отсутствуют, поэтому мы продолжим использовать «Сохранить для Интернета» (SFW), пока «Экспорт как» не восполнит пробел. Вот официальный пост Adobe на эту тему.
8. Видите вкладки в верхней части этого окна SFW: Исходный, Оптимизированный, 2-Up, 4-Up? Чтобы получить представление о том, как выглядит исходное и сжатое изображение, щелкните вкладку 2-Up . Окно покажет вам, как выглядит оригинал (слева) и как выглядит сжатая/оптимизированная версия (справа). Вы можете нажать Z , а затем щелкнуть мышью, чтобы увеличить предварительный просмотр изображения, чтобы хорошо рассмотреть пикселизацию и качество изображения (удерживая клавишу ALT, затем щелкните мышью, чтобы уменьшить масштаб).
9. В раскрывающемся меню Preset выберите JPEG High . Установите флажок Progressive (вместо Optimized). Прогрессивные файлы обычно дают меньший размер файла, чем оптимизированные (я знаю, что это противоречит здравому смыслу).
Измените изображение Качество с 60 на 70. При внесении изменений в поле «Качество» посмотрите информацию в нижней части оптимизированного окна, чтобы увидеть, как изменяется размер файла. При качестве 60 размер изображения составляет 50,24 КБ. При качестве 70 изображение составляет 64,9.9 КБ.
В этом примере мы оставим качество изображения равным 60, потому что мы не замечаем достаточной потери качества изображения при переходе с 60 на 70, которая потребовала бы дополнительных 15 КБ к размеру изображения. Для каждого изображения, которое вы сохраняете, вам нужно будет решить, каким качеством пожертвовать из-за размера файла. Меньшее число в поле «Качество» будет означать меньший размер файла. Играйте с этими настройками качества, пока не будете довольны результатом, затем нажмите , введите или нажмите «Сохранить».
10. Идите к JPEGMini.com и нажмите Загрузить фото . Формат JPEG Mini обычно обеспечивает дополнительное сжатие размера файла без ущерба для качества изображения.
При этом после сжатия с помощью JPEGMini проверьте два файла рядом (до и после сжатия JPEGMini), чтобы убедиться, что вы довольны тем, как выглядит изображение. Найдите файл изображения и загрузите его .
11. JPEGMini проявит магию сжатия и предоставит вам еще более сжатый файл изображения. Он точно показывает, сколько КБ сохранено на экране загрузки.
12. Нажмите Загрузить в полном разрешении. и сохраните его. Он автоматически добавляет слово «_mini.jpg» к имени файла, что предотвращает перезапись исходного файла и позволяет сравнить два файла.
Теперь вы можете взять оптимизированное изображение JPG и использовать его на своей веб-странице, зная, что вы сохранили максимально возможное качество изображения при сохранении небольшого размера файла. Мы увеличили размер с 6,4 МБ до 45 КБ, оптимизировав этот файл .
Пошаговое руководство: как оптимизировать изображения для Интернета
PNG Теперь давайте сделаем то же самое, только на этот раз мы выберем файл, который лучше всего подходит для формата PNG, а не JPG.
Помните, что формат файла PNG-8 дает вам ограниченную цветовую палитру (до 256 цветов), поэтому вы не захотите использовать его на фотографии, как мы использовали в последнем примере (мы покажем вам, почему в момент).
Все, что основано на значках (например, инфографика), иллюстрировано или требует прозрачности фона, должно быть сохранено в формате PNG. Мы также рассмотрим формат файла PNG-24, который является лучшим вариантом, когда речь идет о сохранении изображения с прозрачностью для Интернета.
Почему не GIF? GIF-файлы также могут поддерживать прозрачность. Они примерно эквивалентны формату PNG-8 (для формата PNG-24 не существует GIF-эквивалента). Файлы GIF во многом пересекаются с файлами PNG. Со временем Интернет все больше и больше склонялся к PNG, а не к GIF (что-то связанное с патентом на формат GIF). Кроме того, в 9 из 10 случаев PNG обеспечивают лучшее сжатие и меньший размер файла, чем GIF. Так когда бы вы использовали GIF? Используйте GIF, если вы создаете анимированный GIF .
Вот изображение, которое мы создали в Illustrator, и его нужно сохранить для Интернета. Мы рассмотрим сохранение этого файла в формате PNG с белым и прозрачным фоном:
1. Следуйте шагам MeasureIt из приведенного выше раздела JPG до , измерьте пространство , которое вы хотите, чтобы ваше изображение PNG идти. Допустим, мы снова пытаемся достичь 439 x 419 пикселей .
2. С иллюстрированными векторными изображениями, подобными этому, вы часто будете начинать работу в Adobe Illustrator, а не в Adobe Photoshop. У вас будет файл .AI (Adobe Illustrator) или файл .EPS (Encapsulated Postscript). Вы можете выполнять все эти действия с функцией «Сохранить для Интернета» в Illustrator, но для целей этого пошагового руководства мы будем использовать Photoshop, так как это более распространенное приложение.
Дополнительный совет: Вы можете получить доступ к тому же диалоговому окну «Сохранить для Интернета», используя ту же комбинацию клавиш в Adobe Illustrator : Command + Alt + Shift + S.
3. Вы можете копировать и вставлять векторную иллюстрацию в новый документ в Photoshop из Illustrator ИЛИ откройте файл EPS или Illustrator непосредственно в Photoshop. При копировании и вставке из Illustrator сначала выберите все иллюстрации на монтажной области в Illustrator и нажмите Cmd + C или «Правка» > «Копировать».
4. Имея скопированный векторный рисунок в буфере обмена, перейдите в Photoshop и нажмите Cmd + N или Файл > Создать. Photoshop интеллектуально дает вам новый размер документа, который точно соответствует тому, что вы скопировали. Просто примите рекомендуемый размер документа и нажмите Введите .
5. В новом документе PS нажмите Cmd + V или Правка > Вставить. Вы увидите всплывающее окно, которое предложит вам варианты. Выберите смарт-объект , так как он сохранит возможности масштабирования векторного изображения в Photoshop.
Если вам нужно отредактировать это изображение в PS, вы можете щелкнуть правой кнопкой мыши по слою и выбрать «Растрировать».
6. При открытии файла EPS или AI непосредственно в Photoshop вы, как правило, сразу же видите прозрачный фон при открытии файла. Если нет и вы не видите белый фоновый слой, который можно включить или отключить на вкладке «Слои», вам может потребоваться открыть файл в Illustrator или другой программе редактирования изображений, чтобы скопировать только необходимую графику, оставив ее позади. цвет фона.
7. После того, как вы откроете иллюстрацию в Photoshop, выполните шаги, описанные в разделе JPG над этой ссылкой, используя Инструмент для обрезки из полистирола. Введите размеры, которые вам нужны для окончательного изображения, и сделайте обрезку.
8. Если вас устраивает обрезанное изображение, нажмите (на Mac) Command + Alt + Shift + S (Ctrl + Alt + Shift + S в Windows) или выберите «Файл» > «Экспорт» > «Сохранить для».
Интернет (устаревший).
9.
PNG БЕЗ ПРОЗРАЧНОСТИ — для файлов меньшего размера и с меньшей детализацией.0112 PNG-8 128 Размытый . Здесь можно кое-что поэкспериментировать. Он автоматически устанавливает для вас флажок Transparency . Однако, если вы посмотрите на край рисунка, где рисунок переходит в фон, вы увидите тонкую белую рамку. Как правило, это нежелательно, и именно по этой причине мы рекомендуем использовать формат PNG-24 при сохранении с прозрачностью. Вы можете изменить цвет этой белой рамки, используя раскрывающееся меню Matte: , но даже если вы выберете «Нет», вы получите неровный край.
Если вы сохраняете PNG-файл БЕЗ прозрачности, скорее всего, вам следует сохранить его как PNG-8 . Вы можете снять флажок Transparency и поиграть с раскрывающимся списком Colors: . Цифры (2, 4, 8, 16, 32 и т. д.) указывают, сколько цветов будет использоваться в цветовой палитре PNG-файла.
Если у вас простой двухцветный логотип, вы можете установить это число на 2 или 4. Если у вас много цветов, попробуйте 128 или 256. Чем больше цветов вы выберете, тем больше получится файл, но тем ближе будет исходное изображение. качество будет. Меньше цветов = меньший размер файла. В большинстве случаев ваши Matte: раскрывающийся список должен быть установлен на White или None .
В левом нижнем углу диалогового окна «Сохранить для Интернета» обратите внимание на то, что изменение этих параметров также влияет на размер файла.
Используя окно предварительного просмотра в сочетании с выводом размера файла, найдите качество изображения и размер КБ, которые вас устраивают, затем нажмите Сохранить или нажмите Enter.
10.
PNG С ПРОЗРАЧНОСТЬЮ – Для более высокого разрешения и сверхчистой прозрачности В том же диалоговом окне «Сохранить для Интернета» на вкладке Оптимизированный в раскрывающемся меню Предустановка измените свой выбор на PNG-24 .
Заметили, насколько чище края вашего изображения при использовании PNG-24 по сравнению с PNG-8? Также обратите внимание, что размер файла намного больше по сравнению с PNG-8.
При сохранении в формате PNG-24 мы обычно просто устанавливаем флажок Прозрачность и оставляем все остальное по умолчанию. Если вы довольны своим изображением, нажмите Сохранить или нажмите Enter.
11. Если вы сохраните изображение в формате PNG-24, файл изображения может быть намного больше, чем вам хотелось бы. К счастью, есть отличный бесплатный онлайн-инструмент под названием Tiny PNG.
12. Перейдите на http://tinypng.com и загрузите недавно сохраненный файл изображения PNG-24. Крошечный PNG лучше всего подходит, если вы загружаете довольно большой файл PNG (более 100 КБ), поскольку файлы PNG меньшего размера, как правило, не обеспечивают заметного увеличения размера файла. Их инструмент говорит сам за себя:
Загрузите файл изображения , подождите секунду и посмотрите, насколько Tiny PNG смог сжать ваше изображение.
Обратите внимание, что мы использовали файл PNG, отличный от файла предыдущего примера, чтобы показать возможности сжатия Tiny PNG. Наш исходный пример PNG-изображения начинался с 20 КБ, поэтому мы сохранили увеличенное изображение с прозрачностью, чтобы продемонстрировать сжатие.
13. Нажмите . Загрузите и сохраните файл с расширением _mini.png или с небольшим изменением имени, чтобы не перезаписать исходный файл. Затем вы можете открыть оба файла рядом, чтобы увидеть, какая версия вам больше нравится. Обычно вы не видите разницы и можете использовать сжатый файл, отбрасывая исходный PNG, если хотите.
Сохранить
Как насчет плагинов для оптимизации изображений WordPress?
Мы использовали WP Smush, и вы тоже можете, однако мы обнаружили, что наши изображения получают лучшее сжатие и качество, используя шаги, описанные выше. Если на вашем веб-сайте уже есть МНОГО изображений, которые необходимо сжать и оптимизировать, попробуйте WP Smush, поскольку они предлагают опцию массового сжатия «оптимизировать изображения для Интернета» через вашу медиатеку.