Использование флажков «Прозрачность» и «Подложка»
Прозрачные изображения и изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы
Прозрачность позволяет создавать изображения разнообразной формы для веб-страниц. Прозрачность фона, поддерживаемая GIF и PNG сохраняет прозрачные пиксели в изображении позволяет фону веб-страницы проглядывать сквозь прозрачные области изображения. (Несмотря на то, что JPEG не поддерживает прозрачность, поэтому прозрачные пиксели оригинала, если они есть, можно заполнить цветом подложки, имитирующей прозрачность оригинала.)
Заполнение фоновых областей цветом подложки, поддерживаемое GIF, PNG, и JPEG имитирует прозрачность путем смешения прозрачных пикселей с цветом подложки, идентичным фону веб-страницы. Заполнение фоновых областей цветом подложки дает блестящие результаты, если фон заполнен сплошным цветом, координаты которого вы знаете.
Чтобы создать прозрачность фона или заполнить его цветом подложки в оптимизированном изображении, изображение должно содержать прозрачные области. Прозрачность можно создать при создании нового слоя или применении инструментов «Фоновый ластик» или «Волшебный ластик».
При работе с файлами в формате GIF или PNG-8 можно создать области с высокой прозрачностью на краях: все пиксели, прозрачность которых в оригинальном изображении выше 50% становятся полностью прозрачными в оптимизированном изображении, в все пиксели, непрозрачность которых в оригинальном изображении выше 50% становятся полностью непрозрачными в оптимизированном изображении. Применяйте высокую прозрачность на краях в случае, когда вам неизвестен цвет фона веб-страницы или он представляет собой текстурную или узорную заливку. Однако помните о том, что высокая прозрачность на краях может привести к зубчатые границам в изображении.
Сохранение прозрачного фона в изображениях в формате GIF или PNG
Формат GIF и PNG-8 поддерживают один уровень прозрачности — пиксели могут быть либо полностью прозрачными, либо полностью непрозрачными. Частичная прозрачность не допускается. (И наоборот, формат PNG-24 поддерживает многоуровневую прозрачность, т. е. пиксели в изображении могут иметь до 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.)
Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.
Установите флажок «Прозрачность».
Для форматов GIF и PNG-8 можно указать, как должны себя вести частично прозрачные пиксели в оригинальном изображении. Такие пиксели можно смешивать с цветом подложки или создавать высокую прозрачность на краях.
Создание изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы в формате GIF или PNG
Для создания незаметного перехода кромки изображения к фоновому цвету веб-страницы заполните фоновые области цветом подложки, если фон веб-страницы заполнен сплошным цветом, координаты которого вы знаете.
Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
В диалоговом окне «Сохранить для Web» выберите «GIF», «PNG-8» или «PNG-24» в качестве формата оптимизации.
В окне сохранения в формате «GIF» и «PNG-8» выполните одно из следующих действий.
- Чтобы полностью прозрачные пиксели оставались прозрачными, а частично прозрачные пиксели смешивались с цветом подложки, установите флажок «Прозрачность». Этот параметр предотвращает возникновение ореола, который часто имеет место пир размещении изображения со сглаживанием на фон веб-страницы, отличающийся от фона изображения. Этот флажок также предотвращает зазубренность краев областей с высокой прозрачностью.
- Чтобы полностью прозрачные пиксели заполнялись цветом подложки, а частично прозрачные пиксели смешивались с цветом подложки, снимите флажок «Прозрачность».
Выберите один из вариантов заполнения фона:
- «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета),
- «Белый», «Черный» и «Произвольный» (для выбора цвета на палитре «Выбор цвета»).
Создание файлов в формате GIF или PNG-8 с высокой прозрачностью на краях
Применяйте высокую прозрачность на краях в случае, когда вам неизвестен цвет фона веб-страницы или он представляет собой текстурную или узорную заливку. Однако помните о том, что высокая прозрачность на краях может привести к зубчатые границам в изображении.
Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
В диалоговом окне «Сохранить для Web» выберите «GIF» или «PNG-8» в качестве формата оптимизации.
Установите флажок «Прозрачность».
Выберите из списка вариантов заполнения фона параметр «Без фона» для отмены использования цвета подложки для заполнения фона.
Создание изображения с незаметным переходом кромки изображения к фоновому цвету веб-страницы в формате JPEG
Несмотря на то, что JPEG не поддерживает прозрачность, прозрачные пиксели оригинала, если они есть, можно заполнить цветом подложки, имитирующей прозрачность оригинала. Цвет подложки заполняет полностью прозрачные пиксели и смешивается с частично прозрачными пикселями. При размещении JPEG на веб-странице с фоном, идентичным цвету подложки создается впечатление, что изображение сливается с фоном.
Откройте или создайте изображение, которое содержит прозрачные области, и выполните команду «Файл» > «Сохранить для Web».
В диалоговом окне «Сохранить для Web» выберите «JPEG» в качестве формата оптимизации.
Выберите один из вариантов заполнения фона: «Без фона», «Цвет, выбранный пипеткой» (для использования пипетки для выбора цвета), «Белый», «Черный» и «Произвольный» ( для выбора цвета на палитре «Выбор цвета»).
При выборе команды «Без фона» в качестве цвета подложки используется белый цвет.
Справки по другим продуктам
- Добавление слоев
- Оптимизированные форматы файлов для веб-страниц
- Формат GIF
- Формат PNG-24
- Формат PNG-8
- Формат JPEG
Быстрый и безболезненный способ вставить png-картинку на любой фон в Photoshop
Хотите сделать красивую аватарку для соцсетей или поздравить близких замечательной электронной открыткой, сделанной, если можно так выразиться, своими руками? Вы обратились по адресу! Всего за несколько простых шагов мы научим вас вставлять картинку в формате png на любой фон в программе Photoshop.
1. Открываем Photoshop и нажимаем раздел «Файл».
2. Выбираем «Открыть».
3. Зажимаем клавишу ctrl, выбираем в папке png и фон, которые собираемся использовать (для этого их предварительно нужно скачать на свой компьютер) и нажимаем «Открыть».
4. Png по размеру должно подходить тому фону, на который мы его будем вставлять, поэтому нажимаем вкладку «Изображение» и выбираем там «Размер».
5. В появившемся окошке можно изменить ширину и высоту изображения. Не забывайте ставить галочку «Сохранить пропорции», чтобы ваше png не растянуло в высоту или в ширину.
6. Теперь, когда мы убедились, что размер нам подходит, сохраняем его, нажав кнопку «ОК», и с помощью инструмента «Выделение» выделяем png.
7. Затем выбираем «Редактировать» — «Копировать».
8. Переходим на вкладку с фоном и нажимаем «Редактировать» — Вставить».
9. С помощью курсора перемещаем png, чтобы оно гармонично выглядело на фоне.
10. Теперь, когда окончательный вариант нас устраивает выбираем вкладку «Файл» и нажимаем «Сохранить как. «
11. И, наконец, сохраняем в нужной папке в формате png. Теперь получившуюся картинку можно использовать по назначению!
Комментарии
of your page —>
Последние статьи
3 Декабря, 2023, 12:57
Благодаря интернету и звучащей повсюду музыке многие песни входят в нашу жизнь без привязки к своим исполнителям. Некоторые из самых больших хитов, которые мы напеваем, настолько проникли в поп-культуру, что мы уже не задумываемся над историей их происхождения. Некоторые из них были написаны для фильмов, но настолько велика популярность этих треков, что они затмили эти кинокартины.
Картинка с прозрачным фоном.
Добрый вечер! Помогите, не могу разобраться. Необходимо наложить картинку на объект, но так, чтобы фон картинки не было видно (например логотип, символ). Я делаю следующим образом: Открываю картинку в Фотошопе, удаляю вручную задний фон, лишние элементы, сохраняю картинку в формате Gif или png, с прозрачным фоном. Далее накладываю картинку на необходимую часть объекта. вуаля! все хорошо. Отображается как надо во вьюпорте. но когда рендерю Vray’ем, почему то белый фон присутствует! Может как то по другому надо это делать. буду очень признателен за помощь!
Как сделать задний фон картинки прозрачным html?
>
#pc display: none;
>
#mobile display: inline-block;
>
>
.header border: none;
border-bottom: 2px solid white;
position: fixed;
width: 100%;
height: 10%;
right: 0;
top: 0;
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #0f3443, #34e89e); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #0f3443, #34e89e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
.content position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
media screen and (orientation : landscape) #pc display: inline-block;
>
#mobile display: none;
>
.header border: none;
border-bottom: 2px solid white;
>
.header__text position: fixed;
margin-left: 10px;
>
>
.header__text position: fixed;
top: 0;
width: 100%;
height: 100%;
>
media screen and (orientation: landscape) .simple margin-top: 0.5%;
margin-left: 6%;
>
.pop margin-top: 0.5%;
margin-left: 4%;
float: left;
>
>
media screen and (orientation: portrait) .simple position: absolute;
margin-top: 3%;
margin-left: 10%;
>
.pop margin-top: 3%;
margin-left: 4%;
float: left;
>
>
.simple,.pop border-radius: 5px;
border: 2px solid white;
>.about background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
body background: #C33764; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #1D2671, #C33764); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1D2671, #C33764); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
>
- Вопрос задан более двух лет назад
- 2460 просмотров