Посмотрите, пожалуйста, на эту веб-страницу. Я хочу вставить на нее портрет Пушкина, а также написать заголовок этой страницы - фамилию Пушкина с инициалами - шрифтом, имитирующим почерк Пушкина. Подобный шрифт установлен на моем компьютере. Вставим на страницу этот автопортрет Пушкина. Я отсканировала его с первой страницы «Литературной газеты» и затем слегка почистила в Фотошопе. Вот так будет выглядеть эта же веб-страница после вставки на нее этого изображения с автопортретом Пушкина. Эта же страница будет выглядеть гораздо привлекательнее, если убрать белый фон у автопортрета, то есть сделать его прозрачным, чтобы сквозь него просвечивал фон самой веб-страницы. Сделать это можно, если сохранить данное изображение, которое сейчас в формате JPEG, сохранить его в формате GIF. Формат GIF, в отличие от формата JPEG, позволяет сохранять изображения с областями прозрачности. Сохраним это изображение для веб в формате GIF с областями прозрачности. Меню Файл, команда SAVE FOR WEB.
Выбираем формат сохранения GIF. Включаем параметр Transparency (прозрачность). Размер этой картинки в формате GIF больше 47 килобайт. Это практически предельно допустимый размер для файла с картинкой, которая должна быть помещена на веб-страницу. Но этот объем файла можно сильно уменьшить. Действительно, изображение у нас практически двуцветное, черно-белое, и поддержка 256 цветов для этой картинки совершенно ни к чему. Уменьшим количество цветов до двух. Посмотрите, размер файла уменьшился почти в 10 раз. Но правильное ли это решение: ограничиться для этого изображения всего двумя цветами? Выберем инструмент Лупа и увеличим изображение.
Посмотрите, какие у него рваные ломаные края в двуцветном режиме, и какие они были в режиме, содержащем 256 цветов. Посмотрите, какое гладкое, чистенькое изображение. А такое оно потому, что в 256-цветном режиме неровности краев, контуров изображения, сглаживаются путем добавления к этим краям пикселей промежуточных цветов между черным и белым. Поэтому для качественного представления этого изображения на веб-странице двух цветов мало. Выберем 8 цветов. Картинка выглядит вполне прилично, и размер файла небольшой - меньше 11 килобайт. Выведем это изображение в окне предварительного просмотра команды Сохранение для веб в том размере, в каком оно будет представлено на веб-странице. Для этого делаем двойной щелчок по инструменту Лупа.
Теперь сделаем область белого цвета на этом изображении областью прозрачности. Выбираем инструмент Пипетка и щелкаем им по какой-либо точке белого цвета на изображении. После этой операции белый цвет в таблице Color Table выделен. Делаем его прозрачным. Нажимаем на пиктограмму с шашечками, которыми по умолчанию изображаются в Фотошоп области прозрачности, на пиктограмму Транспейренси
(прозрачность) внизу таблицы Color Table. Теперь выделенный ранее цвет, в данном случае, белый, в таблице Color Table, отображается следующим образом. Квадратик с этим цветом в таблице теперь разделен на две части диагональной линией. В верхней части тот цвет, который был до редактирования цветовой таблицы, в данном случае, белый цвет. В нижней же части этого квадратика цвет, полученный редактированием вместо белого, в данном случае, это прозрачный цвет. Посмотрим, как будет выглядеть это изображение на веб-странице.
Мы на самом деле ничего не увидели. Не увидели, была ли создана область прозрачности, потому что цвет фона веб-страницы белый, и цвет фона у автопортрета Пушкина тоже был белый. По умолчанию команда SAVE FOR WEB устанавливает для такого предварительного просмотра редактируемого в ней изображения белый цвет фона для веб-страницы. Закрываем окно предварительного просмотра в браузере изображения и возвращаемся в окно команды SAVE FOR WEB.
Если бы цвет фона веб-страницы был бы не белым, а каким-нибудь цветным, то на этом цветном фоне мы бы разглядели, создались ли области прозрачности, и как в этом случае выглядит изображение на веб-странице. Можно ли в команде Сохранение для веб поменять цвет фона веб-страницы предварительного просмотра? Да, можно. Закрываем окно предварительного просмотра в браузере изображения и возвращаемся в окно команды SAVE FOR WEB. Нажимаем на кнопку вызова скрытого в данный момент меню параметров веб-страницы для просмотра изображения и выбираем в нем команду Edit Output Settings (редактировать установки вывода).
Появляется диалоговая панель команды Output Settings (установки вывода). Все ее параметры я сейчас описывать не буду, их слишком много. Меня сейчас интересует только цвет фона веб-страницы. Диалоговая панель команды Output Settings на самом деле состоит из нескольких страниц. Сейчас перед нами на экране первая из этих страниц, и на ней установки цвета фона нет. Поэтому нажимаю кнопку Next (следующая страница). На ней тоже нет цвета фона. Поэтому снова нажимаю кнопку Next. А вот и он, параметр Color. Нажимаю на кнопку выбора цвета фона веб-страницы и выбираю значение Other (установка произвольного цвета). Появляется диалоговая панель выбора цвета Color Piker. Выберу для цвета фона какой-нибудь цвет, но не близкий к черному и не близкий к
белому. Мне нужно, чтобы картинка на веб-странице резко контрастировала с цветом ее фона. Выбираю, например, зеленый цвет.
Вот такой зеленый. Выхожу из панели команды Output Settings, нажимая кнопку ОК, и снова смотрю, как будет выглядеть это изображение в окне браузера. Да… Нельзя сказать, что это красота неописуемая. Область прозрачности вместо белого цвета действительно создана, но пиксели промежуточных серых цветов резко выделяются на зеленом фоне страницы и создают ощущение неряшливости изображения.
Попробуем сделать прозрачным и этот светло-серый цвет. Выделяем его в таблице Color Table, щелкаем на пиктограмму прозрачности, и снова просматриваем изображение на веб-странице. Изображение стало лучше, но недостаточно. Повторим операцию, сделаем прозрачным и этот цвет. Почти идеально. Попробуем сделать прозрачным и этот цвет. А вот сейчас уже то, что надо. Размер файла уменьшился, но цветов-то осталось всего четыре. Не проще ли было выбрать их с самого начала? Нет. Потому что, во-первых, у нас сейчас не четыре, а пять цветов. Пятый - это прозрачный цвет. Изображение, конечно, пострадало: оно стало более рваным, чем исходное. Попробуем чуть-чуть сгладить контуры. Выберем в цветовой таблице самый темный из ныне прозрачных цветов и восстановим его непрозрачность.
Контуры сгладились. Но мы помним, что на веб-странице этот цвет выделялся на цвете фона. Выделялся как более светлый, чем цвет фона. Значит, сделаем его чуть более темным. Двойной щелчок по этому цвету в цветовой таблице. Появляется диалоговая панель команды Color Picker (выбор цвета). Выбранный цвет представлен в диалоговой панели Color Picker вот здесь и вот здесь. Сделаем его чуть темнее. Щелкаем чуть ниже в этом окне.
Вот таким этот цвет был, вот таким стал. Нажимаем кнопку ОК. Квадратик этого цвета в цветовой таблице снова разделен диагональю пополам. Сверху - цвет, который был, снизу - который стал. Правда, разглядеть здесь что-либо почти невозможно. Смотрим в браузере. Неплохо. А на моей странице будет еще лучше, потому что там фон светлее. Сохраняем. И вот я его вставила на свою веб-страницу. Красота? Правда, лучше с прозрачным фоном, чем без оного? И размер этого файла в формате GIF примерно 9 килобайт, что гораздо меньше, чем размер файла с изображением в формате JPEG. Этот размер 58 килобайт.
5.3.10. Создание надписей для Web-страниц
На моём компьютере установлен шрифт, имитирующий почерк Пушкина. Я хочу написать этим шрифтом заголовок, инициалы и фамилию Пушкина на данной Web-странице. Разумеется этого нельзя делать, то есть я не получу нужного результата, если пропишу этот шрифт непосредственно в HTML этой страницы, так как на компьютерах подавляющего большинства просматривающих мою страницу этот шрифт не установлен, так как не является стандартным шрифтом, и эта надпись будет выведена в соответствии с установкой браузера пользователя. И единственное решение в подобной ситуации заменить эту текстовую надпись картинкой. Создадим такую картинку в программе Adobe Photoshop. Выберем инструмент создания текстовых фрагментов на палитре инструментов в программе. Установим курсор, просто щелкнув левой кнопкой мыши, и создадим соответствующую надпись. В качестве цвета надписи я выбрала фиолетовый цвет чернил. В качестве гарнитура шрифта выбрала шрифт Пушкин.
Подобрала желаемый размер и выбрала максимальную гладкость, отображение букв на экране - smooth. Переключаюсь в режим ввода русских букв, с клавиатуры. В моём случае это комбинация Ctrl+Shift. И печатаю надпись. Текстовый фрагмент вводится на отдельный слой. В данном случае это слой Layerl. Завершаем ввод текста, нажатием на пиктограмму OK, имеющую вид галочки, панели параметров инструмента text. Созданный текстовый слой с надписью имеет прозрачный фон. Я отключила видимость слоя Background, подложки текста и фон надписи теперь отображается характерными шашечками, то есть является прозрачной. Удалим из палитры слоев слой Background, просто перетянув его на пиктограмму мусорной корзины внизу этой палитры.
Он мне не нужен. Надпись я буду создавать в прозрачном фоне. Это ещё один способ создания изображения в формате GIF, с областями прозрачности. А именно не делать некоторые цвета прозрачными непосредственно диалоговой поныли команды «Сохранение для WEB», а создать эти области прозрачности непосредственно в главном окне программ AbobePhotoshop, ещё до вызова программы «Сохранение для WEB». В данном случае это 2 способ
самый предпочтительный, так как текстовая надпись создаётся на прозрачном фоне. И единственное, что нужно сделать сейчас до вызова команды «Save for WEB», это обрезать данное изображение, оставив только его существенную часть, саму надпись. Для уменьшения размера файла с этой надписи разверну окно с изображением на все рабочее поле программ Photoshop.
Выберу на палитре инструментов, инструмент Crop - обрезка, и обрежу данное изображение, просто протягиванием этого инструмента по диагонали через надпись. Более светлая часть изображения остаётся, затемненная обрезается. Завершаю процесс обрезки нажатием клавиши Enter на клавиатуре. А вот теперь вызываю программу «Сохранение для WEB». Меню File (Файл) команда «Save for WEB». Формат, разумеется, GIF. Параметр Transparency (прозрачность), разумеется, включен. Посмотрите на световую таблицу - Color Table. В ней среди цветов, которые используются в изображении, изначально присутствует прозрачный цвет.
Вот он. Потому что мы вызывали программу СОХРАНИТЬ ДЛЯ WEB, уже имея в руках области прозрачности в изображении. Посмотрим, как это будет, выглядит на Web-странице. Я специально сейчас установила на Web-странице темный фон, чтобы была более заметной обводка букв белым цветом, которая мне не нужна и о которой я программу не просила. Откуда она взялась? А взялась эта белая обводка из значения параметра matte (матовость).
Сейчас это значение белый цвет. Цвет выбранный как значении параметра matte, окрашивается в полу прозрачные пиксели изображения, при выводе этого изображения на Web-страницу. А появляются эти полупрозрачные пиксели в изображении, при сглаживании контуров букв. Если в качестве значений параметра matte выбрать не белый цвет, а значение none (отсутствие цвета), то при выводе изображения на Web-страницу все пиксели этого изображения прозрачность которых больше 50% будут полностью прозрачны. А все пиксели с прозрачностью равной или менее 50% будут полностью не прозрачны. Выберем значение none и посмотрим, что получится. Ну, гораздо лучше. Посмотрите, какой размер файла, примерно 1,5 килобайта. Ради имитации почерка Пушкина можно и вставить такую маленькую картинку. Сохраним её под таким именем в формате GIF. И вот так это выглядит на Web-странице.
⇐Дизеринг. поэтапный вывод изображения на экран | TeachPro WEB-дизайн | Надпись с тенью и объемная надпись⇒