Подготовка фотографии к размещению на фотосайте

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

Если в качестве исходника имеется файл в одной из разновидностей RAW-формата, то начинать следует с пункта 1, а те у кого сразу образуется JPEG или TIFF форматы, могут сразу переходить к пункту 2.

1. Для RAW-конвертации в большинстве случаев использовать штатный конвертер Adobe Photoshop CS2 или преобразователь RAW, идущий в комплекте с цифровыми камерами. Сначала, скачанные с флешки RAW-файлы можно преобразовать в JPEG-версию с невысоким качеством, а затем, оценив получившееся, понравившиеся картинки преобразовывать уже в Фотошопе (ФШ), тщательно подбирая параметры конвертации. При конвертации RAW лучше ставить 16 бит цвет. При свето/цветокоррекции (п.4) будет меньше потерь и после первода в 8бит изображение (например, перед п.6) гистограмма будет выглядеть более плавно (меньше резких всплесков/провалов).

При этом наибольшее внимание следует обращать на следующее:

1.1 Корректность установленной экспозиции, выраженная при помощи гистограммы. В большинстве случаев крайне желательно, чтобы не было ни провалов в тенях, ни, тем более, пересветов. Т.е. гистограмма не должна касаться ни левого края шкалы, ни правого. Это достигается путем перемещения движков exposure, shadows и brightness на первой вкладке “adjust” окна RAW-конвертера Фотошопа.

1.2 Корректность установленного при съемке баланса белого. В конвертере подправляется либо при помощи движков “temperature” и “tint”, либо при помощи взятия образца белого или чисто серого цвета с превьюшки снимка пипеткой.

1.3 Уровень четкости – движок sharpness во второй вкладке конвертера “detail”.

1.4 При съемке с высокими ISO можно регулировать уровень цветного шума движком “color noise reduction” в той же второй вкладке.

1.5 На третьей вкладке “lens” можно скомпенсировать виньетирование и краевые хроматические аберрации, вносимые не очень качественными объективами.

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

2. Получив преобразованное изображение, перво-наперво сохраняю его в файл с расширением TIFF, иначе любой сбой в работе компьютера приведет к потере проделанной работы. Сохранять в формате JPEG не следует, поскольку любая редакция заново открытого файла неизбежно приведет к потерям в качестве картинки. JPEG – это конечный архивный формат, если жаль места под TIFF-версию файла. Затем можно сделать следующее:

2.1 При необходимости исправлять геометрические недочеты. Это:

2.1.1 Завал горизонта - устраняется при помощи функции Image-RotateCanvas или функции Еdit-Transform-Rotate (после предварительного выделения всего кадра Ctrl-A).

2.1.2 Перспективные искажения – устраняются при помощи выделения всей картинки (Ctrl-A) и дальнейшего применения пункта меню edit-transform-perspective. Там нужно браться за любой угол выделенной картинки и тянуть в сторону до полного устранения искажений, затем жмется “enter”. Поскольку при этом картинка несколько уплощается, то можно подтянуть масштаб изображения по вертикали при помощи дальнейшего повторного выделения и применения пункта edit-transform-scale.

2.1.3 Сферические искажения (дисторсию) устраняю пунктом filter-distort-spherize. При этом размер холста следует увеличить раза в полтора в пункте меню image-canvas size, поскольку иначе сферическая коррекция будет применена только к центральной части картинки. Потом размер холста, соответственно, уменьшается. В том случае, если у вас ФШ версии CS2, то лучше использовать для коррекции дисторсии инструмент “lens correction” в меню “filter-distort”.

3. Зачастую необходимо произвести некоторую ретушь получившегося изображения. Это можно сделать инструментом “clon stamp tool” из панели инструментов. Выбираем подходящий для клонирования участок изображения “Alt-левый клик мыши” и далее клонируют его поверх нежелательных дефектов картинки (провода, пыль, прыщики и т.п.).

4. Далее идет цветокоррекция. Вызвав панель цветокоррекции Ctrl-U, можно настроить цветовой баланс, яркость и насыщенность как по всем цветам сразу, так и по каждому из них в отдельности. Если нужно тонировать снимок, то устанавливается флажок “colorize” и движок “hue” двигается до получения требуемого тона, а движок “saturation” до получения требуемой насыщенности цвета тонировки. Не стоит применять излишне яркую тонировку, куда как лучше смотрится слегка тонированная фота. При желании «вытянуть» тени или света можно применить методику “image-ajustments-shadows/highlights”.

5. Потом переходим к уменьшению размера фотографии для публикации. Уменьшение размера картинки всегда приводит к потере четкости вследствие неоптимальности алгоритмов интерполяции. Методов компенсации этих потерь много. Это и установка пункта “bicubic sharper” в окне “image size”, и применение технологии “unsharp mask”, но можно применить и другой метод. Состоит он в следующем:

5.1 При помощи Ctrl-J делаем копию основного слоя картинки, убедившись перед этим, что исходный слой у нас один-единственный.

5.2 Командой Shift-Ctrl-U обесцвечиваем слой-копию.

5.3 Устанавливаем в окне свойств слоев метод смешения “soft light” для верхнего обесцвеченного слоя.

5.4 Открываем окно “filter-other-high pass” и устанавливаем радиус преобразования 2 пиксела. Нажимаем “OK”.

5.5 Командой Ctrl-E сводим вместе верхний и нижний слои. Получилось изображение со слегка повышенной четкостью.

5.6 При помощи пункта меню “image-image size” (Alt-Ctrl-I) уменьшаем размер картинки до требуемого значения.

5.7 Повторяем пункты 5.1-5.5 снова, но в окне “filter-other-high pass” устанавливаем радиус преобразования 0.4-0.6 пиксела.

6. В окне изменения размеров холста “image-canvas size” (Alt-Ctrl-C) устанавливаем canvas extention color на черный и увеличиваем горизонтальный и вертикальный размер холста на две единицы каждый. Таким образом, наша картинка будет иметь тоненькую черную рамку в один пиксел с каждой стороны, что иногда улучшает восприятие фотографии.

7. В пункте “file-save for web”, нажав на маленькую кнопочку со стрелочкой, открываем окно “optimize to file size”, устанавливаем результирующий размер файла и жмем “OK”.

Источник: Максим Капранов

огромное спассибо! дельная инфа!

Правила размещения фотографий на сайте

«Ваш МАСТЕР» уже не раз замечал, что после разработки сайта с системой управления и бесплатного обучения, клиенты спешат приступить к его наполнению. Но не всё так просто. Если в процессе размещения текстов таится меньше «подводных камней», то с фотографиями дело обстоит совсем иначе. Не умея правильно подготавливать фотографии «под веб», можно натворить на сайте много бед.

Неправильная вставка фотографий может привести к результату, при котором:

Сайт будет очень долго грузиться;

Вёрстка страниц будет «разваливаться»;

Фотографии могут не отображаться или показываться неправильно и т. п.

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

Если у Вас нет возможности платить за поддержку сайта, то рекомендуем усвоить несколько бесплатных, но важных советов (см. ниже). Придерживаясь наших правил подготовки фотографий «под веб», Вы сможете самостоятельно наполнить свой сайт. Избежите ошибок, совершаемых новичками. Сайт будет быстрым, красивым и удобным для посетителей.

1. Подготовка фотографий «под веб»

Перед тем, как приступать к размещению любых материалов на сайте, их необходимо правильно подготовить. Фотографии — не исключение:

Выберите страницу, на которой планируете поместить фотографию. Подберите для неё лучшее место;

Оцените примерные размеры (в пикселях) по ширине и высоте, в которые потребуется уместить фотографию.

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

На заметку! Для работы с фотографиями необязательно использовать профессиональные редакторы типа «Photoshop». Можно воспользоваться привычным просмотрщиком картинок, например, «ACDSee». Почти все современный просмотрщики картинок позволяют выполнять над фотографиями самые простые операции редактирования: изменять размер, угол поворота, цветность и формат изображения. А большего нам и ненужно.

Этапы подготовки фотографии:

Откройте фотографию в редакторе;

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

Сохраните фотографию в формате «jpg». При сохранении данных контролируйте степень сжатия и подберите оптимальное соотношение качества изображения и веса файла. Например, файл картинки размером 200x200 px должен весить не более 20-25 Кб.

Дайте файлу осмысленное название. Название желательно составлять из символов латиницы и цифр. Лучше не использовать в названии файлов символов национального алфавита.

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

Зачем столько сложностей?

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

На заметку! На фотоаппарате с матрицей 5 Mpx фотографии получаются размером 2592x1944 px, а сами файлы весом примерно 2 Мб. По меркам Интернета — это очень много! Попробуйте открыть фотографию подобных размеров на сайте.

К сожалению, не все заботятся о посетителях своего сайта и размещают фотографии без предварительной подготовки. В результате сайт начинает долго загружаться и это одна из самых безобидных проблем. Ещё хуже, если у фотографии забывают указать ограничение по ширине или высоте, тогда сайт может вообще «рассыпаться» и им будет невозможно пользоваться.

Правильно подготавливая фотографию, Вы:

Уменьшаете размеры картинки, что не позволит ей испортить структуру и внешний вид сайта;

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

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

2. Размещение картинок на сайте

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

Фотографии и любые другие картинки должны размещаться на страницах сайта в едином стиле, который был задан дизайнером сайта;

При размещении фотографии с обтекаемым её текстом, не забывайте указывать отступ, например, 7 px. С отступом текст с картинкой смотрится гораздо лучше;

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

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

На заметку! Хорошим примером удачного размещения картинок может служить наше портфолио. Мы стараемся делать его удобным и наглядным, заранее подготавливая картинки дизайнов нужных размеров. «Ваш МАСТЕР» делает всё, чтобы Вам было удобно пользоваться нашим сайтом. Надеемся, Вы это оцените.

Вот, пожалуй, и всё. «Ваш МАСТЕР» описал основы процесса подготовки и размещения фотоматериалов на страницах сайта. Но, несмотря на то, что ничего сложного в нём нет, времени он может отнимать достаточно много. Возможно, однажды Вы поймёте, почему даже наполнение сайта стоит денег.

Пусть Ваш сайт будет опрятным и красивым!