Как оптимизировать изображения в программе Adobe Fireworks

В данной статье рассмотрим, как оптимизировать изображение для страницы сайта в программе Adobe Fireworks.

(Разумеется, программа на вашем компьютере должна быть установлена.)

Запускаем программу:

Как оптимизировать изображения в программе Adobe Fireworks
Рис. 1.

Далее через меню File – Open попадаем в диалог «Открыть», в котором выбираем на жёстком диске нужное изображение, кликаем «Открыть»:

Как оптимизировать изображения в программе Adobe Fireworks
Рис. 2.

Изображение загружается в окно программы Adobe Fireworks:

как оптимизировать изображение
Рис. 3.

Как видим, фото довольно большое по размеру и для страницы сайта скорей всего не годится. Потому сперва уменьшим его по габаритам. Но сначала создадим новый документ, куда скопируем фото, и в котором будем его менять. Это нужно сделать, чтобы исходная фотография не пострадала.

В меню File выбираем New:

как оптимизировать изображение
Рис. 4.

Откроется диалог New Document:

как оптимизировать изображение
Рис. 5.

Здесь устанавливаем ширину и высоту изображения; ОК. открывается новое окно:

как оптимизировать изображение
Рис. 6. Окно нового документа. Над полем изображения закладки, с помощью которых можно переходить от одного открытого документа к другому.

Над полем изображения есть закладки, кликая на которых можно переходить от одного открытого документа к другому (на рис. 6 выделено красным прямоугольником).

Переходим к первому открытому файлу, в меню Edit кликаем Copy:

как оптимизировать изображение
Рис. 7.

Переходим в новый документ и через Edit – Paste вставляем скопированное изображение:

как оптимизировать изображение
Рис. 8. Скопированное изображение явно больше, чем нужно...

Теперь уменьшим изображение до нужных размеров.

Обратите внимание: в углах изображения есть маленькие синие квадраты (если нет – кликните на изображении левой кнопкой мыши):

как оптимизировать изображение
Рис. 9. Ставим курсор на этот квадрат – левый клик мыши – жмём Shift (чтобы ширина и высота рисунка изменялись пропорционально) – удерживая левую кнопку, подгоняем размер рисунка под размер холста.

Уменьшенное изображение можно перемещать по полю программы,  нажав и удерживая левую кнопку мыши.

Итак, получилось вот это:

как оптимизировать изображение
Рис. 10.

Чтобы узнать размер изображения, в программе есть линейка, которая вызывается через View – Rulers:

как оптимизировать изображение
Рис. 11. Добавляем "линейки".
как оптимизировать изображение
Рис. 11а.

Теперь оптимизируем рисунок по "весу" файла. Обратите внимание на панель вверху поля изображения:

как оптимизировать изображение
Рис. 12.

Там есть кнопки 2-Up и 4-Up. Нажав на них, вы увидите, что окно разделилось на два или четыре соответственно.  В каждом окне программа предлагает варианты оптимизированного изображения.

Мы рассмотрим 2-Up:

как оптимизировать изображение
Рис. 13.

Слева находится исходное изображение, справа – оптимизированное программой. Под каждым изображение указаны его характеристики: формат и размер. Можно на этом остановиться, но можно попробовать задать свои. Для этого нужна панель Optimize. Если у вас её нет, кликаем в главном меню на Window – Optimize:

как оптимизировать изображение
Рис. 14.

Появилась панель Optimize:

как оптимизировать изображение
Рис. 14а.

В панели Optimize нас больше всего интересуют выпадающий список во второй сверху строке (здесь задаём формат изображению) и список Colors (здесь устанавливаем нужную глубину цвета). Можете самостоятельно поэкспериментировать с этими двумя списками, наблюдая, как меняются размер файла и качество изображения.

После того, как нужное качество и размер файла установили, сохраним результаты своей работы. Для этого в меню File выбираем Export:

как оптимизировать изображение
Рис. 15.

И попадаем в диалог Export, в котором выбираем место на своём жёстком диске, куда сохранять оптимизированные файлы:

как оптимизировать изображение
Рис. 16.

Жмём «Сохранить».

Надеюсь, затруднений не возникло.

P. S. Я показал, как изменять ширину и высоту изображения в программе Adobe Fireworks, но, разумеется, это можно делать и прямо в web-редакторе, в котором вы создаёте страницы сайта.

Успеха.

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Читайте также:

Как оптимизировать изображения в программе Adobe Photoshop

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

Новое на сайте

Другие статьи...

Видеокурсы

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Разделы Сайта