Рекомендации по созданию веб-галерей. Photoshop как инструмент для подготовки изображений.Программа Photoshop на сегодняшний день - один из лучших графических редакторов. Ею пользуются миллионы людей: кто-то с целью заработка, кому-то необходимы ее возможности для поддержки своего хобби. В данной статье речь пойдет о вещах, полезных для тех людей, которые создают и размещают в Интернет свои галереи. Фотографы и художники наверняка сталкивались с необходимостью демонстрации работ пользователям Сети.
Прежде всего, хотелось бы озвучить несколько рекомендаций. Итак, если вы создаете свою веб-галерею, то:
1) Хорошим тоном считается вначале демонстрировать посетителям не гигантские изображения, сжатые при помощи атрибутов width и height тэга < img >, а реально уменьшенные. Все дело в том, что уменьшение габаритных размеров картинки не приводит к уменьшению размера файла. В итоге ваши пользователи вынуждены скачать огромное изображение, и только после окончания загрузки браузер уменьшит его при отображении.
Конечно, вы можете возразить: все больше людей пользуются безлимитными пакетами, проблема трафика беспокоит все меньше. Вы правы, прогресс не стоит на месте. Но, во-первых, не все, и даже не абсолютное большинство наших пользователей покупают безлимитки. И забывать о тех, кто платит свои деньги за каждый мегабайт, не следует. Во-вторых, все еще очень критично время загрузки вашего сайта. Многие пользователи могут просто не дождаться, пока загрузятся тридцать фотографий (каждая из которых, к примеру, весит по несколько мегабайт), и покинут веб-ресурс. Лучше дать посетителям шанс увидеть и оценить ваши работы по достоинству.
2) Если вы вняли доводам п.1 и разместили в галерее иконки небольшого размера, то потрудитесь заполнить атрибуты alt и title тэга < img >. Internet Explorer интерпретирует эти атрибуты одинаково, а вот Mozilla и Netscape считают title всплывающей подсказкой (он отображается при наведении курсора мыши на изображение), а alt - это то, что написано на месте картинки, если она не загружена. Поэтому оба эти атрибута должны быть заполнены. Рекомендую указывать в них следующую информацию:
Название изображения. Это поможет поисковым системам правильно определить, к какой теме имеет отношение ваша картинка, и выдать ссылку на нее в результатах поиска по соответствующим запросам.
Размер оригинального изображения. Если посетителю понравится именно эта работа, он захочет перейти на страницу, где можно рассмотреть ее в увеличенном масштабе (или в реальном размере, зависит от того, как устроена галерея). Поэтому стоит вежливо предупредить заинтересованного человека о размере файла, позволив ему самому принять решение о скачивании. Например, при наведении курсора на иконку, появляется следующая подсказка:
А теперь несколько слов о том, как подготавливать изображения для публикации в Интернет на примере графического редактора Photoshop.
Предположим, вы подобрали несколько десятков фотографий, и хотите сделать для них иконки. Обращаю ваше внимание, что в данной статье речь пойдет о создании иконок вручную на примере одной из картинок. О том, как можно автоматизировать этот процесс для большого числа изображений, читайте в одной из следующих статей. Итак, запускаем редактор Photoshop и открываем в нем большое изображение. Уменьшаем его при помощи диалога изменения размера изображения (комбинация клавиш Ctrl+Alt+I, либо выбор в меню Image (Изображение) пункта Image size (Размер изображения)):
Обязательно выставьте галочку (если она уже не выставлена) Constrain Proportions (Сохранять пропорции). На рисунке она отмечена красным кружком. Тогда при изменении одного из размеров в первых двух полях - на рисунке в поле Width (Ширина) стоит курсор - значение второго будет изменено автоматически с учетом коэффициента пропорциональности. К примеру, в галерею предполагается поместить изображения размером 150x110. Вводим в поле, определяющее ширину, значение 150. Во втором поле сгенерировалось значение 116. Это не совсем то, что нам нужно, и сейчас нужно будет это исправить. Нажимаем OK для значений 150x116. После этого воспользуемся инструментом Crop  и отрежем "лишние" пиксели - с какой именно стороны или со всех сразу, решать вам как автору. Не беспокойтесь, что на иконке не все изображение. Это куда лучше, чем искаженные пропорции. После выполнения описанных действий у меня получилась такая иконка:
Сохраненная с максимальным качеством, она имеет размер порядка 18 килобайт. Непозволительная роскошь для такой крошки. Поэтому воспользуемся опцией, специально существующей для оптимизации размеров изображений: File/Save for web (Файл/Сохранить для веб).
На вкладке 2-Up, отмеченной на рисунке красным кружком, слева вы будете видеть исходное изображение, а справа - с измененными характеристиками. Вы можете выбрать алгоритм сжатия JPEG, GIF, PNG либо webBMP. Приведу несколько пар для сравнения с характеристиками сжатия.
| Исходное изображение |
Измененное изображение |
Параметры сохранения |
| |
 |
JPEG сжатие, качество 80. Размер файла стал 9 килобайт. Видимой потери качества не наблюдается. |
| |
 |
JPEG сжатие, качество 60. Размер файла стал 6 килобайт. Видимой потери качества не наблюдается. |
| |
 |
JPEG сжатие, качество 30. Размер файла стал 3 килобайта. Появляются артефакты на границах смены цвета. |
| |
 |
JPEG сжатие, качество 10. Размер файла стал 2 килобайта. Отчетливо заметно расплывание на цветовых границах. |
| |
 |
GIF сжатие, 32 цвета. Размер файла 7,5 килобайт. |
| |
 |
GIF сжатие, 16 цветов. Размер файла 6 килобайт. |
В GIF формате изображения лучше всего сохранять тогда, когда количество цветовых переходов мало (белая птица на фоне голубого неба, к примеру). Либо, когда требуется максимально сохранить четкость линий (чертежи). Говоря о GIF, нельзя не отметить, что его активно вытесняет PNG. Он, в отличии от GIF, поддерживает частичную прозрачность и большую степень сжатия.
В каждом отдельном случае лучше, чтобы вы сами нашли компромисс между качеством и размером изображения и выбрали подходящий формат.
Я надеюсь, что сведения, изложенные в этой статье, окажутся вам полезны и ваши галереи привлекут множество поклонников. Успехов в творчестве!
Автор: ФотоСтарт.info
[ назад ]
|
