Is Your Image Web-Ready?

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

Есть соблазн просто сохраните файл как JPG или рисунок с помощью файла / Save As опции внутри Photoshop и вызвать изображение веб-готово. Однако, если мы делаем это таким образом, мы упустим пользуясь изображения сокращаются орудия, найденные только внутри Photoshop's "Сохранить для Web" диалогового окна. Эти особенности давайте тонкой настройки сохранения изображения, в результате чего даже меньший размер файла без ущерба для качества изображения.

Прежде чем обсуждать меры для сохранения изображения в Сети, давайте взглянем на два наиболее часто используемые форматы: JPEG и GIF. JPEG обеспечивает более широкую цветовую гамму, в то время как GIF лучше всего использовать для цвет и повторяющиеся изображения цветов. Я использую JPEG для фотографий и GIFS для штриховых рисунков, логотипов, и некоторые иллюстрации. Я могу также использовать формат PNG, если требуется высокое качество изображения и сохранить в JPEG с желаемым качеством результатов в файл, который является слишком большим. (т.е. занимает слишком много времени, чтобы скачать)

Пойдем через шаги, чтобы сделать ваш веб-изображение готово.

Установить разрешение и размер изображения
Перед сохранением файла, я всегда устанавливают резолюции 72 (стандартное разрешение для мониторов), и я установить размер изображения к размеру Я хочу, чтобы изображение, которое будет на веб-странице. Оба эти параметры задаются в рамках размера изображения диалогового окна. Выберите Image> Image Size.

Размер изображения Диалоговое окно

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

После выбора Файл> Сохранить для Web и устройств, следующее диалоговое окно появляется:

Сохранить для Web и устройств диалогового окна

В этом окне выберите 4-до, расположенную в верхней части окна. Это дает нам 3 различными визуальными изображениями (в дополнение к первоначальному) в различных условиях. Давайте внимательнее посмотреть на это диалоговое окно.

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

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

Image Информация

Эта информация говорит мне, что формат файлов (JPEG), размер файла, и сколько времени потребуется для загрузки на определенной скорости. (Щелкните правой кнопкой на скорости информации, чтобы выбрать другую скорость загрузки.) Мы более всего заинтересованы в размере файла.

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

Настройка файла формата и качества

Правая панель Корректировка

Формат файлов (JPEG, GIF и т.д.), качество может быть изменена в верхней части правой панели. Есть и другие параметры, а также, но мы остановимся на этих двух. В центре панели, выберите образ, который ближе всего к желаемый размер файла и по-прежнему сохраняет свою визуальную целостность. Это делает его активном изображении. Любые изменения, что мы делаем в правой панели, будут применяться к этому образу.

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

Если изображение на маленький размер файла возможно с желаемой визуальной целостности, выберите изображение, сделать его активным изображение и нажмите кнопку Сохранить. Это открывает Сохранить Оптимизированный диалоговом окне. Перейдите на котором вы хотите сохранить файл. Убедитесь, что Тип файла вариант установлен в положение только с картинками. Нажмите кнопку Сохранить.

Сохраните только с картинками

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