Секреты профессионала: использование Adobe Photoshop CS4 для подготовки фотографий к размещению в интернете

Текст и фотографии Ян Плант. Все права защищены.

Источник статьи http://www.ianplant.com/articles-prepare-photos-for-the-web.htm

Перевод статьи и размещение на сайте с любезного разрешения Ян Плант, владельца ресурса http://www.ianplant.com

Из всех вопросов, связанных с обработкой фотографий, и с которыми мне приходилось сталкиваться за годы профессиональной деятельности, ни один из них не был столь трудным как вопрос подготовки и сохранения изображений для публикации в веб-пространстве. Проблема известна: из тысяч мониторов, используемых пользователями мира, ни один из них не будет настроен по тому же образу и подобию, что и монитор вашего компьютера. Получается так, что не имеет значения, что вы делаете с изображениями, так как невозможно гарантировать, что пользователи интернета видят ваши фотографии в точности так же, как и вы. Тем не менее, не все так плохо: несмотря на то, что все мониторы не настроены по единому стандарту, большинство из них достаточно сходны. Кроме того, существует единый стандарт, который используют браузеры для просмотра изображений в интернете, он известен как цветовое пространство sRGB (больше о нем будет рассказано позже), которое позволяет скомпенсировать все разнообразие настроек мониторов. В свете сказанного успешная подготовка изображения для публикации в интернете включает не только донкихотскую погоню за настройками цвета. Вам также нужно обеспечить тот размер и резкость изображения, которые будут оптимальными для их просмотра в браузере. Таким образом, несмотря на все разнообразие настроек мониторов, у вас остаются возможности для того, чтобы обеспечить точное восприятие ваших фотографий посетителями интернета. Реализация этих возможностей, надеюсь, будет способствовать росту количества ваших фотографий в интернете и прибыли, как результата развития вашего фотографического бизнеса!

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

За прошедшие годы я перепробовал много способов подготовки и сохранения изображений с различными результатами. В итоге я усовершенствовал свою технику подготовки изображений и опробовал ее на большом числе мониторов, чтобы удостовериться в ее безошибочности и стабильности. Прежде чем написать эту статью, я также проконсультировался с несколькими участниками Mountain Trail Photo (Richard Bernabe, Jerry Greer, George Stocking, Guy Tal, и Joseph Rossbach). Таким образом, в разумных пределах я уверен, что представленная мною техника не уступает лучшим практикам в сфере обработки и подготовки изображений для публикации в интернете. Я постарался сделать ее простой и отказался от использования профессиональных терминов, поэтому прошу экспертов простить мое довольно упрощенное объяснение, как все это работает.

Мою технику запомнить легко, а использовать на практике еще легче – как только вы освоите ее, вы сможете подготовить фотографию для интернета в течение нескольких минут и возможно даже секунд. При этом имейте в виду, что техника подготовки фотографий описана с использованием программы Adobe Photoshop CS4. Предыдущие и последующие версии Adobe Photoshop могут иметь некоторые различия, поэтому пользователи иных версий могут испытывать затруднения при выполнении ряда операций.

Таким образом, без дальнейших проволочек представляю вам технику обработки фотографий!

Шаг первый: Изменение размера

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

• по линейным размерам, которые обычно выражаются в пикселях, например 750 на 525 пикселей;
• по разрешению, которое выражается в ppi (пикселях на дюйм). Иногда вместо него используется несколько устаревшее обозначение dpi (точек на дюйм), которое пришло из печати. Стандартное разрешение для просмотра веб-страниц составляет 72 ppi.
• по размеру файла, который выражается в килобайтах (KB) или, если файл достаточно большой, то в мегабайтах (MB), гигабайтах (GB) и т.д. На размер файла влияют не только линейные размеры и разрешение изображения, но и ее детализация, и насыщенность.

Если вы размещаете фотографию на фотохостингах или форумах, то сначала изучите правила сайта, имеющие дело с ограничениями по размеру изображения. Например, один из сайтов, на котором я размещаю фотографии дикой природы, Nature Photographers Network , ограничивает максимальный размер изображения 720 пикселями по его большей стороне при размере сайта не более чем 200 KB.

Согласно житейскому опыту вам следует избегать такого изображения, которое будет слишком велико для среднестатистического пользователя и потребует прокрутки фотографии на дисплее монитора. Но что значит среднестатистический пользователь? Будет неплохим решением считать, что многие пользователи, если не их большинство, использует 17-дюймовые мониторы, дающие не слишком много места для изображения. Таким образом, любое изображение шириной более 800 пикселей потребует от большинства пользователей горизонтальной прокрутки. Будет очень хорошо, если вы зададите такой размер изображения, которое не потребует также и вертикальной прокрутки, но учитывая, что сайты создаются с возможностью прокрутки по вертикали, это не так важно для изображения как необходимость его горизонтальной прокрутки. В любом случае, размеры изображений для моего сайта не превышают 750 пикселей по горизонтали и 600 пикселей по вертикали.

Здесь показано как я изменяю размеры изображения. На панели инструментов я выбираю Image и затем Image Size (Иллюстрация 1-1).

Иллюстрация 1-1

Эта операция вызывает окно Image Size (Иллюстрация 1-2).

Иллюстрация 1-2

Во-первых, я удостоверяюсь, что позиции «Constrain proportion» и «Resample Image» отмечены галочкой. Обычно я выбираю Bicubic или Bicubic Sharper для сжатия моих изображений. Функция Bicubic Sharper действительно неплохо усиливает резкость изображения во время сжатия, так что она пригодна для большинства случаев. Затем я устанавливаю в строке «Resolution» 72 пикселя на дюйм. На последнем этапе я печатаю линейные размеры изображения – в нашем случае я установил ширину изображения в 750 пикселей. Так как позиция «Constrain proportion» отмечена галочкой, программа автоматически устанавливает соответствующую высоту в пикселях. Нажмите кнопку OK, и вы получите изображение с измененными размерами.

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

Правильный размер изображения: не слишком большой и не слишком мелкий, в самый раз для размещения на веб-ресурсе.

Шаг второй: Усиление резкости

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

Во избежание появления зазубрин я усиливаю резкость, используя небольшие постепенно увеличивающиеся значения. Здесь далее мой метод. Во-первых, установите размер изображения на 100%. Затем на панели управления выберите Filter, затем Sharpen, затем Unsharp Mask (Иллюстрация 2-1).

Иллюстрация 2-1

Это действие вызывает окно фильтра Unsharp Mask (Иллюстрация 2-2). Я устанавливаю степень влияния фильтра «Amount» на 200%, радиус «Radius» на 0,2 пиксела и порог «Threshold» на ноль. Это действие добавляет изображению очень малое количество резкости. Как правило я применяю фильтр Unsharp Mask чаще одного раза, постепенно усиливая резкость изображения до той степени, пока не получу желаемый результат. Для изображений, размещаемых в интернете, я применяю этот фильтр дважды. В редких случаях Unsharp Mask используется только один раз или же до 3-4 раз в зависимости от того насколько резким или размытым оказалось изображение после изменения его линейных размеров.

Иллюстрация 2-2

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

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

Иллюстрация 2-3

Иллюстрация 2-4 показывает изображение с оптимальным уровнем резкости. Эта фотография дважды обрабатывалась фильтром Unsharp Mask с указанными ранее значениями. Эффект усиления резкости остался умеренным. Детализация подчеркнута деликатно и без образования нарушений.

Иллюстрация 2-4

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

Иллюстрация 2-5

Совет для продвинутых пользователей: Если вы умеете работать с маскировкой слоев, то существует простой метод настройки резкости изображения без образования нарушений (если вы ничего не знаете про работу со слоями, то пропустите эту часть и двигайтесь дальше или же изучите слои и возвращайтесь сюда). Перед усилением резкости создайте копию слоя. Примените фильтр Unsharp Mask на копии слоя. Установите резкость по вашему вкусу и не обращайте внимания на нарушения, которые могут появляться то там, то здесь. Затем создайте маску слоя и замаскируйте зоны с избыточной резкостью кистью либо при уменьшенной, либо при 100% прозрачности до полного устранения нарушений в проблемных участках. Использованием маскировки слоя вы сможете плавно отрегулировать величину резкости для каждой части изображения, что в итоге даст идеальное качество вашей фотографии.

Шаг третий: Сохранение для веб-ресурса

В заключение мы готовы сохранить изображение для размещения в интернете. Это несложный процесс. На панели инструментов выберите File и затем Save for Web & Devices(Иллюстрация 3-1).

Иллюстрация 3-1

Теперь у нас открылось окно Save for Web (Иллюстрация 3-2).

Иллюстрация 3-2

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

На первом этапе производится простое действие: выберите JPEG в качестве типа вашего файла и поставьте галочку напротив «Optimized».

Теперь вам нужно выбрать качество сохраняемого изображения в окошечке «Quality». Любое выбранное вами число, которое будет меньше 100, уменьшит качество изображения. Вы спросите, а зачем нужно проделывать эту операцию? Дело в том, что с уменьшением качества изображения, вы также уменьшаете и размер файла, что обеспечит быструю загрузку изображения, а просмотр фотографии пользователем станет приятным процессом. Здесь есть интересный момент: пока вы будете придерживаться числового значения качества изображения в пределах от 60 и выше, вы не заметите заметного ухудшения качества изображения. При сохранении изображений для сайта я оставляю числовое значение в пределах 80. Не обращайте внимания на позиции «Maximum», «Very High» и т. д., так как эти установки меняются автоматически и в зависимости от выбранного числового значения качества изображения. Эта опция полезна при размещении изображений на фотохостингах, которые устанавливают ограничения по размеру файлов.

Окно Save for Web также предоставляет возможность предварительного просмотра изображения с выбранными установками. Для того чтобы реализовать эту возможность, нажмите на кнопку «4-Up» в верхней части окна, которая демонстрирует предварительный просмотр изображения при числовых значениях качества изображения 100, 80, 60, 40 и 20. При просмотре установите 100% размер фотографии, чтобы определить, как выбранное вами числовое значение качества влияет на конечное изображение.

Окно Save for Web может помочь вам оптимизировать качество изображения, размер файла и цвет.

Теперь время для более хитрой установки! Большинство интернет браузеров по умолчанию используют цветовое пространство sRGB, которое является вариацией стандарта Adobe RGB. Для того чтобы пользователи интернета имели возможность видеть ваши изображения почти так же как и вы, вам нужно конвертировать фотографии в sRGB. Многие цифровые камеры по умолчанию (или же по выбору пользователя) тоже генерируют изображения в sRGB. Тем не менее, профессиональные фотографы редактируют изображения в цветовом пространстве Adobe RGB, поэтому фотографии нужно конвертировать только перед размещением в интернете.

Конвертирование изображений в пространство sRGB в окне Save for Web является простым занятием. Таким образом – И ВОЗМОЖНО ЭТО САМАЯ ВАЖНАЯ ЧАСТЬ ДАННОГО РУКОВОДСТВА – когда вы применяете окно Save for Web – УДОСТОВЕРЬТЕСЬ, ЧТО ВЫ ОТМЕТИЛИ ГАЛОЧКОЙ «CONVERT TO sRGB». Это обеспечит наибольшую совместимость вашего изображения с большинством браузеров. В строке «Preview» выберите «Windows: No Color Management» для того, чтобы оценить как большинство пользователей будет видеть ваше изображение. Почему это требуется? Дело в том, что большинство пользователей использует компьютеры на операционных системах Windows (а большинство современных Macintosh использует стандартные установки Windows), таким образом, выбор этой опции покажет вам, как будет выглядеть изображение на большинстве устройств.

Также вы можете отметить галочкой «Embed Color Profile». Эта опция позволит браузерам, которые способны к настройке цветовой гаммы, правильно компенсировать цвета вашего изображения. Большинство браузеров не способны к этим настройкам (и по умолчанию принимают цветовое пространство sRGB), но будет неплохо, если вы оптимизируете ваши файлы и под оставшееся меньшинство.

Важное замечание по конвертированию в sRGB: некоторые пользователи после размещения оптимизированного файла в интернете, замечают изменение цветовой гаммы изображения при его просмотре в браузере, например в Internet Explorer. Это изменение может быть особенно заметным, если вы выберете опцию «Monitor Color» в строке «Preview» или же будете просматривать ваши jpeg-файлы на компьютере с помощью Windows. Браузер Internet Explorer или проводник Windows не способны к настройке цветовой гаммы, поэтому эти ошибки в цветопередаче обусловлены настройками вашего монитора. Изображение может выглядеть необычно на мониторе вашего компьютера, но будет в самый раз на любом другом. Так что, просто не обращайте внимания на тот сдвиг цветовой гаммы, который наблюдается на вашем компьютере. Если это вас не успокаивает, то попробуйте просмотреть ваши фотографии на чужих компьютерах – они должны выглядеть более или менее правильно, хотя как в действительности будут выглядеть эти изображения, большей частью зависит от настроек мониторов. В крайнем случае, вы можете скачать последнюю версию такого браузера как Firefox, который автоматически корректирует цветовую гамму изображений с сохраненными настройками. Вы сможете увидеть корректное изображение при использовании браузера, способного к управлению цветовой гаммой, или же если откроете ваш jpeg-файл в Adobe Photoshop.

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

Иллюстрация 3-3

В окне Save for Web вы также можете внести ряд изменений в установках по умолчанию. Установка «Metadata» позволяет вам решить, стоит ли прикреплять к файлу данные, с которыми мог бы ознакомиться любопытный посетитель вашего веб-ресурса. Эти данные содержат информацию о типе использованной камеры и объектива, настройках камеры, таких как размер диафрагмы и чувствительность. Цифровые камеры автоматически прикрепляют эти данные в ходе генерации цифрового файла. Позже вы можете добавить дополнительные данные, такие как описание изображения, авторское право и контактную информацию. Если у вас будет время, чтобы составить эти данные, то вы, возможно, захотите прикрепить их к файлу. Если вы хотите поступить как я, и не желаете размещать информацию о настройках камеры в открытом доступе и тратить время на ввод информации, тогда выберите опцию «None».

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

Шаг 4: Насладитесь известностью и удачей!

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