Создание рисунков с прозрачным фоном

Графические форматы GIF и PNG позволяют создавать в рисунках прозрачные области. Чаще всего делают прозрачным фоновый цвет рисунка. Многие современные графические редакторы, такие как Adobe Photoshop и Jasc Paint Shop Pro, поддерживают возможность создания прозрачных областей или преобразования выбранного цвета в прозрачный фон.

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

Цвет фона, который выглядит монотонно, может не быть таким, если индексирование цветов выполнялось с установленным режимом Dithering (Размытие). Обычно в графических редакторах при выполнении индексирования цветов этот режим устанавливается по умолчанию, так как в этом случае достигается лучшая цветопередача за счет комбинирования пикселей разного цвета. Но для создания прозрачности нам необходимы области в рисунке, состоящие из пикселей только одного цвета. Поэтому режим размытия нужно отменить. Например, в программе Adobe Photoshopв диалоговом окне Цвет с индексом в раскрывающемся списке Размытие нужно выбрать опцию Нет (см. рис. 6.5).

1. Откройте выбранное вами изображение с монотонным фоном в приложении Adobe Photoshop.

2. Выберите команду меню Изображение=>Режим=>Индексированный, в диалоговом окне Цвет с индексомустановите флажок Прозрачность и отмените размытие (см. рис. 6.5).

3. Выберите команду меню Файл=>Сохранить для Webи установите параметры сохранения рисунка в формате GIF, как на рис. 6.1. Сохраните рисунок, щелкнув на кнопке Save (Сохранить).

4. Закройте исходный рисунок и откройте его копию в формате GIF.

5. Выделите области фона. Проще всего это сделать с помощью инструмента Волшебная палочка. Выберите на панели инструментов кнопку Волшебная палочка и щелкните на области фона, как показано на рис. 6.6. Программа автоматически выделит в рисунке все смежные пиксели одного цвета. Если области фона разделены, продолжайте щелкать на них мышью, удерживая нажатой клавишу <Shift>.

Рис. 6.6. Выделение областей фона в рисунке с помощью инструмента Волшебная палочка

6. После того как все области фона будут выделены, нажмите клавишу <Delete>. Фон рисунка станет прозрачным, о чем в приложении Photoshop свидетельствует фоновый рисунок из квадратиков, напоминающий шахматную доску (рис. 6.7).

7. Сохраните рисунок и используйте его в Web-страницах.

Рис. 6.7. Удаление выделенных областей в рисунке формата GIF делает эти области прозрачными

Рисунки с прозрачным фоном можно создавать также в приложениях MS Office, после чего сохранить документ как Web-страницу. Создайте такой рисунок в приложении Word.

Рис. 6.8. Инструмент установки прозрачного цвета рисунка в приложениях MS Office

3.Щелкните указателем мыши на области рисунка, окрашенной в тот цвет, который вы хотите сделать прозрачным. Результат показан на рис. 6.9.

Рис. 6.9. Рисунок с прозрачным фоном в документе Word

При копировании на Web-сервер страницы, созданной с помощью приложений MS Office, не забудьте скопировать также папку имя_файла.filesсо всеми дополнительными файлами страницы.