Посмотрим еще раз на Web-страницу с изображением бабочки. Фон страницы одного цвета, а фон у бабочки другого.

Можно ли в фотошопе сделать так чтоб фон бабочки был прозрачным, прозрачным именно на Web-странице, потому что в фотошопе его, конечно, можно сделать прозрачным. Вернёмся в фотошоп и сделаем у бабочки прозрачный фон. Выводим на экран палитру слоев. В меню WINDOW команда Layers. Изображение состоит всего из одного слоя BACKGROUND. На слое BACKGROUND - основа - областей прозрачности не бывает, но это дело легко поправить, просто сконвертировав слой основы в обычный слой двойным щелчком по нему в палитре слоев. Здесь ничего не меняем, просто нажимаем кнопку OK. Слой основы превратился в обычный слой. Теперь выбираем инструмент волшебная палочка. Убеждаемся, что включен параметр Contiguous - это нужно чтобы при выделении пикселей фона не захватить пиксели такого же цвета на самой бабочке, и щёлкаем инструментом волшебная палочка по какой либо точке фона. Значение параметра tolerance, равное 15, обеспечило такое точное выделение фона. Обычно это значение приходится подгонять.

Теперь нажимаем на клавиатуре клавишу DELETE. Фон стал прозрачным. Снимаем выделение. Нажимаем на клавиатуре комбинацию клавиш CTR-D и попробуем сохранить это изображение с прозрачным фоном для Web. В меню ФАЙЛ команда SAVE for WEB. Увы, это невозможно. Изображение в формате JPEG нельзя сохранить с областями прозрачности, которые понимались бы как таковые браузерами. Команда SAVE for WEB залила эту область прозрачности белым цветом. Правда, этот белый цвет можно изменить на другой, и, в частности, подогнать его к цвету фона Web-страницы, сымитировав тем самым прозрачную область в изображении с бабочкой.

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

Это снова перед нами HTML-код этой страницы. Инверсными цветами выделен цвет фона. К сожалению, он задан именем лимоншифон, таких имен фотошоп не понимает. Поступим так: захватим с экрана окно Web-страницы, нажав на клавиатуре комбинацию клавиш ALT-PRINT SCREEN. При этом окно браузера помещается во временный буфер обмена. Сворачиваем окно браузера. Выходим из команды SAVE for WEB, нажав кнопку CANCEL. Создаем новое изображение в меню Файл командой NEW. Ничего не меняя, нажимаем кнопку ОК и достаём из временного буфера обмена помещённое туда изображение.

Нажимаем на клавиатуре комбинацию клавиш CTRL-V. Это не Web-страница, это всего лишь картинка. Теперь нужно определить, какой это цвет, в терминах, которые понимает программа фотошоп, и передать его в диалоговое окно команды SAVE for WEB для заливки там им фона бабочки. Выбираем инструмент пипетка для взятия, так сказать, пробы этого цвета. К сожалению, инструмент пипетка может взять пробу цвета только с изображения, открытого в программе фотошоп. А вот, например, из окна INTERNET EXPLORER - не может. Видите, внутри фотошоп курсор имеет вид пипетки а здесь теряет этот вид. Поэтому нам и понадобились манипуляции с буфером обмена. Итак, берём инструментом пипетка пробу этого цвета - лимоншифон. Просто щёлкнем левой кнопкой мыши по пикселю этого цвета.

Цвет лимоншифон установился как основной цвет. Посмотрим, какие у него координаты. Щёлкаем левой кнопкой мыши по пиктограмме основного цвета на палитре инструментов. Появляется окно выбора цвета COLOR PICKER, текущим в котором является цвет лимоншифон, а также в этом окне представлены координаты цвета лимоншифон в различных цветовых моделях: в модели HSB, в модели RGB, в модели LAP, в модели CMYK. Но проще всего передать в панель команд SAVE for WEB шестнадцатеричное представление цвета лимоншифон.

В каждой из перечисленных цветовых моделей цвет представляется в виде набора чисел, который невозможно за один прием передать через временный буфер обмена. А шестнадцатеричное представление цвета - можно. Подсвечиваем его двойным щелчком мыши, копируем во временный буфер обмена. Комбинация клавиш CTRL-C. Закрываем окно COLOR PICKER, активизируем изображение с бабочкой. Вызываем команду SAVE for WEB - в меню файл команда SAVE for WEB. Вызываем команду COLOR PICKER в панели команд SAVE for WEB щелчком левой кнопки мыши по пиктограмме цвета. Появляется окно команды COLOR PICKER. Подсвечиваем шестнадцатеричное представление основного цвета двойным щелчком левой кнопки мыши по нему и заменяем это шестнадцатеричное представление основного цвета на шестнадцатеричное представление цвета лимоншифон, которое находится во временном буфере обмена. Нажимаем на клавиатуре комбинацию клавиш CTRL-V.

Текущим цветом становится цвет лимоншифон. Нажимаем кнопку ОК в диалоговой панели команды COLOR PICKER. Теперь заливаем область прозрачности исходного изображения, которое сейчас залито белым цветом, текущим цветом - цветом лимоншифон. Это позволяет сделать команда MATTE - матовость. Нажимаем кнопку выбора различных вариантов команды MATTE и выбираем вариант EYEDROPER COLOR - текущий цвет, теперь бывшая прозрачка залита цветом фона Web-страницы. Сохраняем такой вариант бабочки. Нажимаем кнопку SAVE. Сохраняем под именем BATTERFLY7. Теперь вставляем новый файл с бабочкой на Web-страницу, сохраняем измененный код Web-страницы - в меню файл команда SAVE.

Сворачиваем окно с HTML-кодом страницы и обновляем окно с бабочкой. Нажимаем на клавиатуре клавишу F5. Вот так теперь выглядит Web-страница. Мы сымитировали прозрачность фона бабочки, но, подчеркиваю, это всего лишь имитация прозрачности. Изображение в формате JPEG не может содержать областей прозрачности, и, если мы поменяем в коде страницы цвет фона лимоншифон на какой нибудь другой фон, например, на оранжевый цвет, то на нем фон бабочки опять будет выделяться.

⇐Цветовые модели изображения в формате jpg и web | TeachPro WEB-дизайн | Формат gif⇒