Авторизация все шаблоны для dle на сайте newtemplates.ru скачать

Создание прозрачных файлов в форматах GIF и PNG.

Создание прозрачных файлов в форматах GIF и PNG.
Создание нового изображения с прозрачным фоном.

Самый простой способ сделать области изображения прозрачными — создать их такими изначально и сохранить в формате GIF или PNG. Не зыбывайте, что команда Сохранить для Web (Save for Web) или панель Оптимизировать (Optimize) в программе Fireworks для данной цели являются наиболее совершенными инструментами.

Можно добавить прозрачные области в непрозрачном изображении со сведенными вместе слоями, но может оказаться сложным добиться бесшовного сочетания с фоном.

Полезно выполнить упражнение ниже, которое демонстрирует приемы сохранения прозрачных областей, позволяющие гарантированно получить хорошее сочетание с фоном, используя диалоговое окно Сохранить для Web (Save for Web) программы Photoshop. Ниже приведено несколько новых концепций, так что даже если вы не выполните упражнение, я рекомендую вам его прочитать, в частности шаги 5, 6 и 7.

Упражнение по созданию прозрачных изображений.


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

1. Откройте программу Photoshop и создайте новый файл, выбрав команду меню Файл > Новый (File > New). Есть несколько настроек в диалоговом окне Новый (New) (рисунок в заголовке), которые дадут вам правильное направление при создании графических изображений для Всемирной паутины.
• Создайте новое изображение шириной 500 пикселов и высотой 100 пикселов для соответствия примеру в этом упражнении (А).
• Установите разрешение 72 пикс/дюйм (Б), именно такое я устанавливаю при создании веб-изображений (хотя это не имеет значения).
• Убедитесь, что выбран 8-битный цветовой режим RGB (В).
• Наконец, что самое важное в этом упражнении, выберите значение Прозрачный (Transparent) в раскрывающемся списке Содержимое фона (Background Contents) (Г). Так вы создадите файл Photoshop с прозрачным фоном. Намного проще изначально создать прозрачные области в изображении, чем добавить их позднее. Прозрачные области (в этом случае, все изображение, поскольку мы еще не добавили никакой графический контент) обозначено серым шахматным рисунком (Д).

2. Теперь добавим немного текста и сделаем так, чтобы он отбрасывал тень (рисунок ниже).

Создание прозрачных файлов в форматах GIF и PNG.
Добавление текста, отбрасывающего мягкую тень.

• Выберите инструмент Текст (Text) (Е) и введите ваше имя. Откройте палитру Символ (Character), выбрав команду меню Окно > Символ (Window > Character) (Ж), чтобы изменить внешний вид шрифта. Выделите текст и выберите полужирный шрифт (Bold) (какой-нибудь потолще), а также установите достаточно большой размер, чтобы заполнить окно документа, как показано в примере. Откройте палитру Образцы (Swatch) и используйте цветовую палитру, чтобы выбрать цвет для текста, который не должен быть слишком светлым и темным.
• Затем нужно добавить к тексту мягкую тень. Откройте палитру Слои (Layers) (З), выбрав команду меню Окно > Слои (Window > Layers). В списке вы увидите слой, содержащий текст. Добавьте тень, нажав кнопку Стиль слоя (на ней изображены буквы fx) в нижней части палитры и выбрав пункт Тень (Drop Shadow) (И). В появившемся диалоговом окне стилей слоя (К) вы можете поэкспериментировать с настройками, но я рекомендую установить значения параметров Смещение (Distance) и Размер (Size), по меньшей мере, 5 пикселов, чтобы получить максимальный эффект. Когда вы закончите, нажмите кнопку OK.

3. В случае необходимости, сохраните изображение в формате PSD, чтобы поработать над слоями в дальнейшем. Теперь у вас есть сохраненное исходное изображение, и вы готовы приступить к подготовке его версии для Интернета.

4. Не закрывая файл, выберите команду Сохранить для Web (Save for Web) из меню Файл (File). Перейдите в верхней части окна на вкладку 4 варианта (4-Up), чтобы сравнить оригинальное изображение с несколькими другими версиями (рисунок ниже).

Создание прозрачных файлов в форматах GIF и PNG.
Вкладка - 4 варианта диалогового окна Сохранить для Web позволяет сравнивать четыре различных версии одного и того же изображения.

Обратите внимание, ваши окна предварительного просмотра будут представлены в виде таблицы.

5. Давайте посмотрим, как выглядит изображение в формате GIF с прозрачностью и без. Щелкните мышью по второму окну предварительного просмотра, чтобы выбрать его, потом установите тип файла GIF и выберите количество цветов 32. Теперь сбросьте и снова установите флажок Прозрачность (Transparency) (рисунок ниже).

Создание прозрачных файлов в форматах GIF и PNG.
Предварительный вид выключенной (слева) и включенной (справа) прозрачности в файле формата GIF

• Если флажок Прозрачность (Transparency) сброшен (как показано слева), для заполнения прозрачных областей в оригинальном изображении используется значение в раскрывающемся списке Матовый цвет (Matte color). Установите матовый цвет белым, чтобы ваш рисунок соответствовал моему примеру.
• Если флажок Прозрачность (Transparency) установлен (как показано справа), шахматный фон появляется в прозрачных областях изображения, обозначая те места, где фоновый цвет или рисунок на веб-странице будет просвечивать. Если вы присмотритесь к области, на которую падает тень, вы увидите, что оттенки серого смешаны с матовым цветом. Попробуйте поменять Матовый цвет (Matte color) и посмотрите, что произойдет с тенью.

6. Оставьте на некоторое время предварительный просмотр файла в формате GIF и выберите следующее окно предварительного просмотра. Выберите тип файла PNG-8 и попробуйте установить флажок Прозрачность (Transparency). Как и ожидалось, он ведет себя в точности так же, как и GIF, поскольку оба формата используют бинарную прозрачность. Предварительный вид должен выглядеть, как показано на рисунке.

Создание прозрачных файлов в форматах GIF и PNG.
Предварительный вид выключенной (слева) и включенной (справа) прозрачности в файле формата PNG-24

7. Теперь выберите четвертое окно предварительного просмотра, укажите формат PNG-24 и установите флажок Прозрачность (Transparency) (рисунок выше). Если флажок не установлен (слева), матовый цвет заполняет прозрачные области оригинального изображения. Но когда Прозрачность (Transparency) включена (справа), шахматный фон смешивается с областями, занятыми тенью. То же самое будет с фоном веб-страницы. Если вы установили флажок Прозрачность (Transparency), то параметр Матовый цвет (Matte) больше не доступен, поскольку нет необходимости указывать фоновый цвет страницы — файл формата PNG с альфа-прозрачностью сольется с чем угодно. Обратите внимание на размер прозрачного файла PNG-24. Мой около 8 Кб, в то время как прозрачная версия формата GIF имеет размер порядка 5 Кб, а прозрачный файл формата PNG-8 получился всего лишь размером 3.3 Кб. Значительно больший размер файла — это цена, которую вы платите за универсальную альфа-прозрачность.

8. Сохраните файл формата PNG-24 с установленным флажком Прозрачность (Transparency) и назовите файл, используя расширение .png. Снова откройте диалоговое окно Сохранить для Web (Save for Web) и сохраните версию изображения с прозрачностью в формате GIF (убедитесь, что установлен белый Матовый цвет (Matte)). Используйте файл с расширением .gif.

Оставить комментарий
Навигация по сайту
  • Скачать 1
  • Скачать 2
  • Скачать 3
Универсальный шаблон готового сайта UseSite

Универсальный шаблон готового сайта UseSite


Полностью готовый к применению в качестве сайта шаблон UseSite является универсальным инструментом для быстрого создания Интернет проекта. В нем предусмотрены все основные модули необходимые современному сайту: фотогалерея,...

Подробнее →  

  • Просмотров: 25 953
Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей

Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей


Готовый шаблон сайта для продажи и доставки электронных товаров. Автоматическая оплата товара и мгновенная его отправка покупателю. Шаблон настроен для работы с платежной системой OnPay. Персональный аттестат WebMoney не...

Подробнее →  

  • Просмотров: 7 996
Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров

Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров


Вам не обязательно быть программистом, достаточно научиться понимать и редактировать уже написанный код. Данное руководство предназначено для новичков в вебстроительстве. Рассчитано на работу со специально созданными шаблонами...

Подробнее →  

  • Просмотров: 13 864

 

 

Нименование Количество Цена / 1 шт.
Всего: 0 руб.