Модуль Save for Web. Особенности сохранения изображений для Internet. Подготовка фотографии для интернета

Save for Web Save for Web JPG, GIF, PNG . Удобство пользования этим модулем заключается в возможности одновременного просмотра нескольких вариантов (от 1 до 3) итогового изображения.

Для Web-дизайна в Photoshop предусмотрены специальные возможности, реализованные в виде модуля сохранения Save for Web . Это очень мощный модуль управления процессом сохранения документов, который позволяет подобрать оптимальные настройки сохраняемого изображения (оптимизировать изображение). Модуль Save for Web поддерживает самые распространённые форматы для Internet - JPG, GIF, PNG . Удобство пользования этим модулем заключается в возможности одновременного просмотра нескольких вариантов (от 1 до 3) итогового изображения. Для более подробного рассмотрения этого модуля предлагаю им воспользоваться. Для этого необходимо иметь открытым какой-либо документ. Запустить эту программу можно командой Save for Web из меню File . У Вас на экране возникнет окно следующего вида:

Общий принцип работы с этим модулем следующий. Вам на выбор Photoshop предлагает несколько вариантов оптимизации (различные соотношения настроек формата) которые демонстрируются в специальных окнах. Под изображением находятся комментарии следующего толка - размер файла после оптимизации, время загрузки при заданной скорости модема и особенности формата (вроде фактора сжатия JPG или количества цветов для GIF). Если Вам понравился один из вариантов оптимизации, то Вы можете его выбрать, щёлкнув на нём левой кнопкой мышки. Далее нажимайте Ok и Ваш оптимизированный файл сохранён. Но если Вас не устроили предложенные варианты, тогда обратите Ваш взор в правую часть окна потому, что именно там сосредоточены Все основные настройки оптимизации. Но прежде чем их рассмотреть, изучим предварительную настройку модуля.

Настройка модуля сосредоточена в маленькой кругленькой кнопочке, расположенной вверху окна. Там можно выбрать следующие режимы:

• Browser Dither - сглаживание (интерполяция) броузера, даст вам возможность оценить Вашу картинку в Safe-палитре броузера.
• Uncompensated Color - показ без всяческих ограничений.
• Standard Windows Color - стандартные цвета Windows (256 цветов)
• Standard Macintosh Color - стандартные цвета Mac (Макинтош).
• Use Document Color Profile - показ с учётом цветового профиля оборудования.

Закладки вверху окна позволяют вам переключаться между разными режимами просмотра. Существуют следующие режимы:

• Original - в единственном окне демонстрируется оригинал вашей картинки.
• Optimized - в единственном окне демонстрируется "лучший", по мнению Photoshop, результат оптимизации. Замечу, что иногда он очень удачен.
• 2-Up - у Вас появляются два окна: в одном будет оригинал вашего рисунка, в другом результат оптимизации.
• 4-Up - на Ваш выбор представлены три варианта оптимизации и вид оригинала.

Но выбор какого-либо варианта из предложенных трёх - это, в любом случае, удел дилетантов. На этом этапе мы рассмотрим варианты оптимизации "вручную", т.е. будем настраивать сами все параметры оптимизации. Прежде всего вы должны осознавать зависимость размеров конечного файла (занимаемого места на HD) от размеров вашей картинки (сколько на сколько пикселов). Чем больше картинка, тем весомей (больше места занимает на HD) итоговый файл. Для управления размером картинки в управлении оптимизацией выделена целая закладка под названием Image Size .

Изменённые размеры применяются кнопкой Apply ко всем оптимизированным картинкам и не распространяется на оригинал. Что касается параметра Quality , то он был рассмотрен в предыдущей главе этого урока. Попробуйте открыть любую картинку и поиграться с её размерами. В качестве совета скажу следующее: большой размер картинки (в пикселах) не подчиняется зависимости "чем больше, тем лучше". Тут надо искать компромисс в виде золотой середины. Прежде всего необходимо определится с тем, куда вы эту картинку хотите поместить. Учтите, что не у всех в этом мире хорошие мониторы, которые держат разрешение 1280Х960. Большинство людей имеют мониторы размером 15 дюймов, разрешение которых 800Х600 пикселей. Учитывая всё вышеизложенное, можно догадаться, что размеры вашей картинки не должны превышать 800 на 600 пикселей, за исключением особых случаев. Если вы готовите картинки для оформления своего сайта, то вы должны учесть, что окно, предоставляемое броузером, невелико, наша связь хилая, Internet еле ползает, и только самый терпеливый пользователь дождётся, пока ваша картинка загрузится полностью, и всё это для того, чтобы полюбоваться на Ваше произведение, не влазящее ему на экран. Такая ситуация убъёт у кого-либо желание заходить на Ваш сайт повторно.

Откройте файл Flower.psd (файл расположен в папке \\Program Files\\Adobe\\Photoshop\\Samples). Продолжим оптимизацию, исходя из конкретного формата файла изображения:

Правильность сделанных установок легко проверить, загрузив готовое изображение в броузер. Для этого вам даже не придется покидать окно модуля экспорта. Нажмите кнопку Preview in (Просмотр в) \"Ваш броузер\", и модуль откроет броузер с загруженным в него изображением. Ниже изображения вы увидите HTML-код, который сгенерирован модулем экспорта для демонстрации этой страницы. Цвет фона страницы можно предварительно задать с помощью списка Matte (Кайма). Настройки каймы нехитрые. Если Вы выбрали параметр None (нет), то каймы не будет, параметры White (белый) и Black (чёрный) выдадут Вам чёрный и белый цвета соответственно. Параметр Other (иные) позволяет выбрать любой цвет. Пункт Eyedropper Color позволяет выбрать цвет пипеткой прямо из изображения. Если Выбудете занимаеться Web-дизайном, то, скорее всего, на вашем компьютере будут установлены как минимум два броузера: Internet Explorer и Netscape Communicator. Открыв список рядом с кнопкой Preview in (Просмотр в), вы можете выбрать для просмотра любой из установленных на компьютере броузеров.

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

1. Откройте меню Optimize Menu (Меню оптимизации) щелчком на кнопке с треугольной стрелкой в области Settings (Параметры).
2. Выберите команду Save Settings (Сохранить параметры). Она открывает диалоговое окно Save As (Сохранить как), позволяющее сохранить настройки в файл. Введите в поле File name (Имя файла) какое-нибудь имя, например, \"JPEG 18\", и нажмите кнопку Save (Сохранить).

Теперь в списке Settings (Параметры) появится введенное имя. При обработке следующего файла будет достаточно выбрать это имя из списка. Обратите внимание, что список уже содержит несколько наиболее типичных вариантов настроек, предопределенных разработчиками. Ненужные наборы установок, удлиняющие список Settings (Параметры), легко удалить командой Delete Settings (Удалить параметры) меню Optimize Menu (Меню оптимизации). Эта команда удаляет текущий набор установок. Нажмите кнопку ОК (Да). Она откроет стандартное диалоговое окно сохранения файла. По умолчанию предлагается исходное имя документа Photoshop. Выберите вашу рабочую папку и нажмите кнопку Save (Сохранить). Окно модуля экспорта закроется, а в выбранной папке появится оптимизированный JPEG-файл, готовый для размещения на Web-странице.

Как мы уже отмечали, для размещения на Web-странице изображений с прозрачными участками используется формат GIF , поддерживающий только индексированные цвета. Модуль экспорта Save for Web (Сохранить для Web) позволяет сохранять изображения и в этом популярном формате.

1. Откройте документ Ducky.psd.
2. Преобразуйте слой Background (Фон) изображения в обычный слой.
3. Выделите белый фон и удалите его.
4. Выберите команду Save for Web (Сохранить для Web) из меню File (Файл).
5. В списке Optimized file format (Формат оптимизированного файла) выберите формат GIF .
6. Наиболее существенный параметр индексированного изображения - это количество цветов в его палитре. Оно задается в поле Colors (Цвета) и должно создавать компромисс между качеством и компактностью. Изображение утёнка содержит совсем немного цветов, и 32-цветная палитра будет для него вполне достаточна.
7. Список Color reduction algorithm (Алгоритм сокращения цветов) содержит перечень алгоритмов генерации индексированной палитры изображения. Все они уже обсуждались в занятии №7. Заметим лишь, что по умолчанию предлагается вариант Selective (Селективная), дающий наилучшие результаты для изображений, содержащих значительное пространство, заполненное близкими цветами. Изображение утёнка как раз и попадает в эту категорию. В нем преобладают оттенки жёлтого цвета.
8. Отсутствующие в палитре изображения цвета лимитируются сочетанием нескольких соседних пиксей близких цветов. Алгоритм имитации выбирается в списке Dithering algorithm (Алгоритм сглаживания). В большинстве случаев используются варианты Noise (Шум) и Diffusion (Диффузия), не дающие такого регулярного узора, как Pattern (Узор). Вариант Diffusion (Диффузия) лучше использовать для фотографических изображений, a Noise (Шум) - для фоновых текстур и градиентов. Выберите в списке алгоритм Diffusion (Диффузия).
9. Степень сглаживания задается ползунком Dither (Сглаживание), расположенным правее. Установите ее такой, чтобы передача оттенков была удовлетворительной.Помните, что чем выше сглаживание, тем больше размер результирующего файла.
10. Модуль Save for Web (Сохранить для Web) предлагает уникальный алгоритм предварительной обработки изображения, повышающий эффективность сжатия. Он управляется ползунком Lossy (Потери качества). Большие значения этого параметра существенно снижают качество изображения. Если же установить его в пределах от 5 до 15%, то снижение качества будет практически незаметным, а размер файла может сократиться на 5-40%. Установите ползунок Lossy (Потери качества) на отметку 30%.
11. Флажок Transparency (Прозрачность) обеспечивает преобразование прозрачных участков слоя Photoshop в прозрачность GIF-файла. Установите его, иначе прозрачные участки окажутся заполненными сплошной заливкой.
12. Список Matte (Кайма) обеспечивает незаметный переход кромки изображения к фоновому цвету страницы. Пикселы кромки выделенного объекта, как правило, полупрозрачные, а это не поддерживается форматом GIF. В результате при экспорте изображения в формат GIF вокруг объектов на прозрачном фоне возникает характерный шум. Чтобы избежать его появления, установите в списке Matting (Обработка краев) цвет фона Web-страницы. Полупрозрачныепиксели будут окрашены программой в этот цвет. При сброшенном флажке Transparency (Прозрачность) цвет, заданный в списке Matting (Обработка краев), считается фоновым и заполняет все прозрачные участки изображения.

Редактирование палитры изображения.

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

1. В полуавтоматическом режиме приведение цветов к палитре Web осуществляется ползунком Web Snap (Приведение к палитре Web). Он задает процент приведенных цветов палитры изображения. Попробуйте перемещать этот ползунок и наблюдайте за изменениями цветов изображения. Текущая палитра изображения показана на вкладке Color Table (Таблица цветов), расположенной в правом нижнем углу окна Save for Web (Сохранить для Web). При изменении значения параметра Web Snap (Приведение к палитре Web) происходящие изменения также отображаются в палитре изображения. Вы наблюдаете изменение некоторых цветов палитры и появление на их образцах белых кружков. Последние помечают цвета, приведенные к палитре Web. Вкладка Color Table (Таблица цветов) полезна не только для наблюдения. Она позволяет управлять отдельными цветами изображения. Это гораздо более хлопотный, но гибкий способ управления.
2. Верните ползунок Web Snap (Приведение к палитре Web) в нулевое положение, чтобы получить возможность ручного редактирования цветов.
3. Если вы хотите избежать существенных цветовых сдвигов в любых броузерах, но не хотите приводить все цвета к палитре Web, то имеет смысл сделать это выборочно. Особенно важно сохранить цвета, превалирующие в изображении. Чтобы определить, какие это цвета, задайте режим сортировки Sort by Popularity (Сортировка по частоте) одноименной командой из меню панели. Наиболее часто встречающиеся цвета расположатся слева.
4. Щелкните мышью на пятом слева образце в палитре. Образец получит белую рамку, показывающую, что он выделен. В строке состояния, расположенной в нижней части окна, отметьте значение компонентов выбранного цвета. Очевидно, он близок к белому, который, конечно, входит в палитру Web.
5. Чтобы избежать цветового сдвига, приведем цвет к белому. Photoshop может сам выбрать наиболее близкий к выделенному цвет из палитры Web. Для этого надо щелкнуть на пиктограмме с изображением кубика в нижней части панели или выбрать команду Shift/Unshift Selected Colors to/from Web Palette (Сместить/Отменить сдвиг выделенных цветов к палитре Web) из ее меню. Образец окрасится в белый цвет, и на нем появится белый кружок, говорящий о том, что цвет входит в палитру Web. Белый квадратик в левом нижнем углу образца указывает, что цвет блокирован. Блокированные цвета сохраняются в неприкосновенности при сокращении цветов в палитре изображения и при просмотре в броузере. Чтобы снять блокировку, щелкните на пиктограмме с изображением замка в нижней части панели.
6. Приведение цветов к палитре Web можно проделать и полностью вручную с помощью окна Color Picker (Палитра цветов). Выделите все цвета в палитре командой Select All Colors (Выделить все цвета) из меню панели и щелкните на пиктограмме приведения цветов. Все цвета изображения будут приведены к палитре Web.
7. Приведение всего изображения к палитре Web сделало плавный переход на изображении монитора чересчур резким. Исправим этот дефект вручную. Сделайте на самом темном из оранжевых образцов в палитре двойной щелчок мышью. Перед вами появится знакомое окно Color Picker (Палитра цветов). Убедитесь, что флажок Only Web Colors (Только цвета Web) в нем установлен. Выберите ближайший к текущему цвету более светлый оттенок и закройте окно нажатием кнопки ОК (Да). Цвет будет отредактирован. Если вы находите его тоже неудачным, снова откройте окно Color Picker (Палитра цветов) и подберите другой.
8. Отредактируйте все оттенки оранжевого цвета в палитре цветов таким образом, чтобы их цвета стали ближе друг к другу. Это уберет резкий переход цветов на изображении.

Многочисленные команды меню панели Color Table (Таблица цветов) позволяют вам быстро выделять в ней приведенные (Select All Web Safe Colors (Выбрать все цвета Web Safe)), неприведенные ( Select All Non-Web Safe Colors (Выбрать все не-Web Safe цвета)) и вообще все цвета (Select All Colors (Выбрать все цвета)). Команды блокировки Lock/Unlock Selected Colors (Заблокировать/Разблокировать выделенные цвета) и Unlock All Colors (Разблокировать все цвета) снимают блокировку с выделенных или всех цветов палитры соответственно. Аналогично команды Web Shift/Unshift Selected Colors (Сместить/Отменить сдвиг выделенных цветов к палитре Web) и Unshift All Colors (Отменить сдвиг всех цветов) возвращают, соответственно, выделенные или все приведенные цвета к оригинальным значениям. Режимы сортировки цветов в палитре не исчерпываются критерием распространенности ( Sort by Popularity (Сортировать по распространенности)). Их можно оставить без сортировки (Unsorted (He сортировать)), а также отсортировать по цвету ( Sort by Hue (Сортировать по цветовому тону)) или яркости (Sort by Luminosity (Сортировать по яркости)).

Оптимизация формата PNG.

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

Ещё раз обращаю ваше внимание на важность этой информации. Не зная возможностей форматов файлов и возможностей Photoshop по работе с ними, Вы не сможите професионально работать.

Фотошоп предлагает прекрасный инструмент для оптимизации ваших изображений и фотографий — команда (Save for Web).

Оптимизация изображения — это нахождение золотой середины между качеством и размером файла, подходящего для решения поставленной задачи.

Самая популярная причина необходимости оптимизации — подготовить изображение для передачи через интернет или разместить на сайте. Верстальщики сайтов и веб-студии по разработке графического дизайна, такие как http://brandbe.net , после подготовки , прибегают к оптимизации получившихся частей изображения, чтобы снизить их вес (для быстрой загрузки графики будущего сайта), но чтобы при этом качество картинки не ухудшилось.

Описание элементов диалогового окна

(Нажмите, чтобы увеличить)

После выполнения команды загруженное изображение появляется в центральной части диалогового окна. Окно делится на следующие элементы:

• слева – панель инструментов;
• сверху – параметры отображения изображения;
• в центре – область просмотра;
• справа – инструменты управления оптимизацией;
• внизу – некоторые сервисные параметры;

Панель инструментов

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

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

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

Пипеткой можно узнать оттенок интересующего цвета на изображении. Этот оттенок будет отображаться в окне Цвет пипетки . Нажмите на этот цвет, чтобы открыть палитру цветов и узнать буквенно-цифровой код.

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

Параметры отображения

Загруженное изображение автоматически оптимизируется, используя настройки по умолчанию. В верхней области диалогового окна активизируется вкладка Оптимизация , отображающая внешний вид, размер и примерное время загрузки оптимизированного изображения на сайт.

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

Управление оптимизацией

Коррекция произведённой по умолчанию оптимизации может быть произведена в правой части диалогового окна.

Прежде всего, надо указать формат оптимизируемого файла! Предлагаемые пользователю средства коррекции меняются соответственно выбранному формату.

В списке «Набор» и его подсписке (под JPEG) уточняется качество оптимизированного изображения. Оно имеет 5 вариантов:

• наилучшее (по умолчанию);
• очень высокое;
• высокое;
• среднее;
• низкое.

При выборе перечисленных вариантом автоматически устанавливается значение параметра Качества в 100, 80, 60, 30 и 10 соответственно. Выбор худшего качества производится в случае, когда размер изображения неприемлемо велик.

Выбор параметра Прогрессивный определяет способ развёртки изображения в браузере. Незначительно увеличение размера файла более чем компенсируется ускоренным отображением фотографии ещё до окончания её полной загрузки. А передвижение ползунка Размытие справа от исходного нулевого значения дополнительно сжимает файл, уменьшая его размер.

В списке Матовый/Подложка при необходимости можно задать раскраску прозрачных пикселей. Доступны основной цвет, цвет фона, пипетки, белый и чёрный.

Флажок Встроенный профиль активируется для сохранения в оптимизированном файле цветовых профилей. Они используются для цветокоррекции в некоторых браузерах.

GIF или PNG

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

В верхнем списке Набор выбираются возможные варианты оптимизации с дизерингом или без него. Большее значение цветов и дизеринга улучшают качество оптимизированного изображения, но и увеличивают его размер. Количество цветов отдельно можно выбрать справа в списке Цвета .

В левом от него списке выбирается метод создания таблицы цветов со следующими основными вариантами:

• перцепционная – с предпочтением тех цветов, к которым глаз максимально чувствителен;
• селективная (по умолчанию) – с дополнительным предпочтением цветов больших фрагментов изображения;
• адаптивная – с предпочтением цветов преобладающего спектра;
• ограниченная (безопасная палитра Web) – с полным исключением дизеринга.

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

В следующем списке выбирается алгоритма дизеринга из 3 вариантов:

• случайный, использующий для имитации случайный узор;
• регулярный, использующий квадратный узор;
• «шум», свободный от «швов» в изображении.

Дополнительные регулировки доступны в нескольких списках справа. В списке Дизеринг его процент может изменяться плавным перемещением ползунка. В списке Web-цвета таким же образом можно регулировать и их процент.

Список Потери предназначен только для формата GIF. Он позволяет задавать допустимый порог удаления части изображения для минимизации размера оптимизированного файла.

Сервисные параметры нижней части окна

Внизу диалогового окна дублируется возможность масштабирования изображения. Справа внизу можно изменять размер изображения в пикселях или процентах. Чуть ниже находятся кнопки Сохранить и Готово. Очень удобна возможность периодического просмотра оптимизируемого изображения в браузере, реализуемая по нажатию кнопки Просмотр .

Сохранение/удаление набора параметров

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

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

После сохранения своих настроек, они станут доступны в списке Набор:

Для удаления созданного пользовательского набора:

• в списке Набор выберите его имя;
• Откройте окно меню;
• Выберите команду Удалить настройки .

Работа с фрагментами изображения

При рассмотрении панели инструментов упоминалась возможность оптимизации отдельно взятого фрагмента большого изображения. Но для этого оно предварительно должно быть разделено на фрагменты.

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

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

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Цель: изучение алгоритма подготовки графических элементов веб-страницы

Общие пожелания для подготовки изображений:

• Графические элементы должны быть представлены в формате GIF или PNG .
• Фотографии должны быть представлены в формате JPEG .
• Обеспечьте показ изображений с малым разрешением, пока идет загрузка больших изображений.
• Используйте GIF -изображения с чересстрочным форматом.
• Укажите атрибуты height и width элемента img .
• Сократите количество анимации.
• По возможности используйте пиктограммы изображений.
• Обязательно создавайте «альтернативный» текст (атрибут alt )

При размещении градиента на фон, подбирается либо горизонтальный либо вертикальный градиент, и, в зависимости от этого, вырезается лишь тонкая линия данного градиента. При размещении в CSS устанавливаются соответствующие свойства фона (см. рис. 1.1 )

Рис. 1.1. Градиент на фон в Photoshop

Прежде чем использовать файл изображения в веб-странице, необходимо в графическом редакторе подготовить его для размещения. При этом важно не только определить в photoshop размер изображения, но и правильно сохранить: используя диалоговое окно Сохранить для Веб и устройств (см. рис. 1.2 ):

Устанавливаем настройки диалогового окна Сохранить для Интернета и устройств :

Оптимизация и сжатие до заданного размера файла:

Рис. 1.4. Оптимизация и сжатие до заданного размера файла

Лабораторная работа Photoshop 1_1:

1. Откройте изображение в Photoshop и выберите «Файл» -> .
2. В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный» .
3. В меню «Стиль» выберите «Низкое качество JPEG» .
4. Щелкните вкладку «Размер изображения» .
5. Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.
6. Нажмите кнопку «Сохранить» . Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения» . Нажмите кнопку «Сохранить» .

Установка параметров оптимизации JPEG

Для размещения качественных фото, необходимо подготовить в Photoshop изображение в формате JPEG:

Рис. 1.5. Параметры оптимизации JPEG

Установка параметров оптимизации для форматов GIF и PNG

Рис. 1.6. Параметры оптимизации для форматов GIF и PNG

Лабораторная работа Photoshop 1_2 : JPEG-сохранение

• Откройте в редакторе изображение jpg формата (или скачайте ) и вызовите диалог (Save for Web & Devices ) в меню File .
• Выберите вкладку «Оптимизированный» (Optimized )
• Откройте список «Наборы параметров» (Preset ) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)
• Оцените качество изображения и размер итогового файла
• Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality ): передвиньте ползунок на 70 .
• Включите флажок опции «Оптимизированный» (Optimized ): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.

Лабораторная работа Photoshop 1_3 : GIF-сохранение

• для работы.
• Из «списка форматов» выберите пункт «GIF» .
• Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90 )
• Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)
• Смешение цветов (Dithering ) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80 .
• В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.
• Щелкните кнопку Done , чтобы сохранить параметры оптимизации в исходный документ

Лабораторная работа Photoshop 1_4 : Взвешенная оптимизация

• для работы.
• Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.
• Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение )). Дайте ему имя (введите в поле Имя ).
• Откройте диалог «Сохранить для Веб и устройств» , выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.
• Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality) . Открывается диалоговое окно.
• Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok .

Лабораторная работа Photoshop 1_5 : Настройка параметров вывода

• В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings ).
• Отметьте флажок Вывод XHTML : При экспорте создаются web-страницы, соответствующие стандарту XHTML.
• Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты» .
• Настройте вывод фона щелкнув по Следующая .
• Щелкните ОК и сохраните оптимизированный файл.
• Просмотрите HTML-код результирующего файла.

Зачем оптимизировать фотографии для интернета - ведь мы потеряем в качестве? Часто такие вопросы возникают у начинающего фотографа при упоминании о сжатии фотографий для размещения в интернете. Замечательно, если у вас скоростной интернет! А если у вас ещё и скоростной мобильный интернет - тогда вам очень повезло!

Однако, не стоит забывать, что не у всех есть такая возможность. Большая часть населения России (да и многих других стран Восточной Европы и Азии) не могут пока позволить себе быстрое и, самое важное, устойчивое интернет соединение. Особенно если есть возможность использовать только мобильный интернет. При низкой скорости интернет соединения 1 Мбайт информации может загружается более 2 минут, а средний размер фотографии 10Мп фотоаппарата в составляет примерно 6-8 Мб.

Теперь представьте, что на вашей интернет-страничке не одна фотография, а несколько.... Вы же размещаете свои фотографии для того, чтобы их могли посмотреть другие пользователи интернета? А сами вы будете ждать загрузки фотографий на странице так долго? Скорее всего нет! А если интернет-соединение в добавок ещё и неустойчивое?

Да и по электронной почте посылать такие объёмы информации другу с "медленным" интернетом, просто неуважительно! А если учесть, что количество пикселей в цифровых фотоаппаратах растёт с той же скоростью, что и интернет технологии, то вряд ли мы сможем не думать об этом вопросе в будущем. Остаётся только один выход - сжимать фотографии перед отправкой в мировую электронную сеть.

Итак цель оптимизации фотографий для интернета мы уже выяснили, а исходя из цели ставим перед собой задачу: изменить размер фотографии до принятого в интернете размера 800 × 600 пикселей и немного ужать объём файла, контролируя при этом качество картинки.

Один из самых качественных и достаточно быстрых способов оптимизации сжатия фотографий для интернета - это использование соответствующей функции Adobe Photoshop - Save For Web.

Оптимизация сжатия фотографий для размещения в интернете

Пошаговая инструкция для Photoshop

1. Загрузка фотографии в окно Sawe For Web & Devices

Итак, открываем нашу фотографию в фотошопе, запускаем команду File>Save For Web & Devices... или просто жмём "хитрое" сочетание клавиш: Alt+Shift+Ctrl+S и пред нами открывается "страшное" на первый взгляд окно под названмем Save For Web & Devices , что в переводе обозначает Сохранить Для Интернета и др. Устройств.

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

На любом этапе оптимизации фотографии для интернета вы можете прямо из окна Save For Web & Devices запустить браузер и посмотреть как будет выглядеть ваша работа в его окне - значок Internet Explorer внизу окна оптимизации фотографий для интернета.

Если вы уже успели изучить, что находится в открывшемся окне (просто поводите мышкой по картинке выше, задерживая там, где появится знак вопроса), то мы приступаем к оптимизации фотографий для размещения в интернете.

2. Уменьшаем размер изображения - Image Size

Ставим галочку Constrain Proportions (Сохранить Пропорции).
В окошке With (Ширина) поля New Size (Новый Размер) ставим 800 для горизонтального снимка или 600 для вертикального снимка. Ширина снимка (Height) и процент уменьшения (Percent) изменятся автоматически.

3. Оптимизируем качество сжатия фотографии

Для того, чтобы объём файл фотографии "вписался" в требуемый объём 80-100 Кбайт и при фотография не сильно отличалась от несжатого оригинала делаеем следующее:

Внимание!
Не сохраняйте оптимизированный для интернета снимок вместо
исходного файла - обратно его уже не улучшить!

Это самый простой способ оптимизации фотографий для интернета с использованием фотошоп. Есть ещё некоторые настройки и возможности, особенно полезные, когда нужно оптимизировать большое количество фотографий, например для интернет галереи... Но это уже отдельная тема. А пока скачивайте бесплатный видеоурок и смотрите сами, как просто уменьшить объём фотографии с помощью фотошоп!

Компания Adobe внесла некоторые незначительные изменения в популярную и всем полюбившуюся функцию Сохранить для сети в Photoshop CC 2015. Эта функция используется для многих задач - от подготовки ресурсов для размещения на веб-сайте до оптимизации фотографий высокого разрешения для создания анимированных GIF-файлов. Поскольку команда «Сохранить для сети» создана на основе ранее выпускаемого продукта ImageReady (срок его эксплуатации истек), ее код технически слишком устарел для дальнейшего поддержания и разработки новых элементов.

Была ли команда «Сохранить для сети» удалена из Photoshop CC 2015?

Я использую команду «Сохранить для сети» каждый день. Не будет ли мой рабочий процесс замедляться из-за изменений в системе меню?

Можно полностью пропустить данное меню путем использования существующего сочетания клавиш:

(Windows) Ctrl + Alt + Shift + S
(Mac) Cmd + Opt + Shift + S

При необходимости можно настроить сочетания клавиш. Для этого необходимо выбрать «Редактирование» > «Сочетания клавиш».

Были ли удалены какие-либо особенности команды «Сохранить для сети»?

Означает ли пометка «Устаревшие» то, что в будущем команда «Сохранить для сети» будет удалена?

Возможно. Тем не менее, будьте уверены, что компания Adobe не удалит команду «Сохранить для сети», не предоставив соответствующую функцию в новом, улучшенном формате рабочего процесса. Например, мы знаем, что многим пользователям требуются такие функции, как вид 2up , целевой размер файла, преобразование в формат sRGB, параметры метаданных и анимированные GIF-файлы. Команда «Сохранить для сети» не будет удалена без предоставления соответствующих возможностей в новом, улучшенном формате рабочего процесса.