SiteMaker - Академия сайтостроительства | Разработка сайта
| Вёрстка сайта
| Веб программирование
| Интернет технологии
| Продвижение ресурса
| Инструментарий
карта сервера :: форум :: профайл :: авторам :: о сайте
Гид: SiteMaker.Ru » Разработка сайта » Графика и мультимедия » Подготовка растровых изображений для WEB с помощью PhotoShop

Подготовка растровых изображений для WEB с помощью PhotoShop


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

Начнем с обычных фотографий.
Во-первых, если фотографии еще не напечатаны, и Вы только что подошли к окошку Kodak Express, обязательно заказывайте печать на ГЛЯНЦЕВОЙ бумаге, иначе при сканировании матового отпечатка получите нерезкое и "грязное" изображение. Все дело в том, что поверхность матового отпечатка похожа на сильно уменьшенную поверхность бушующего моря, а яркость лампы сканера значительно превышает яркость дневного света даже в том случае, если рассматривать отпечаток, стоя на экваторе в период летнего солнцестояния :). Поэтому при освещении снимка лампой сканера неровная поверхность фотографии начинает сильно "бликовать", что при сканировании вылезает как "белый шум". В результате отсканированное изображение будет казаться нерезким и пыльным что, к сожалению, не скорректировать никакими фильтрами.

Наконец Вы положили фотографию на стекло сканера и пытаетесь задать настройки сканирования.
Все WEB-изображения имеют разрешение 72 dpi. Но это совсем не означает, что в параметрах сканирования нужно ставить это число. Правильнее отталкиваться от размеров окончательной картинки в пикселях. Проще всего объяснить на примере. Допустим, у нас есть фотография 10x15 см. Нам надо вставит эту фотографию в ячейку таблицы, имеющую ширину 400 пикселей. Для начала, пересчитаем размер фотографии в дюймы, поделив ширину и высоту на 2.54. Получим 3.94x5.91 дюйма. Сейчас нас очень заинтересовала ширина. В окончательном варианте она должна будет составить 400 пикселей. Вот теперь можно высчитать разрешение сканирования, поделив так необходимые нам 400 пикселей на нашу ширину – 3.94 дюйма. Получаем 102 dpi. На самом деле, конечно, никто так не считает – этот расчет приведен лишь для наглядности и предотвращения некоторых заблуждений начинающих web-дизайнеров. На практике сканирование производится с заведомым запасом – в данном случае "на глаз" ставится 150 dpi, а потом в PhotoShop производится масштабирование до 400 пикселей. Теоретически, качество пересчитанного изображения должно быть хуже отсканированного "в размер", практически же это отличие незаметно.
Если фотография слишком темная, или наоборот – слишком светлая, настоятельно не рекомендую прибегать к регулировкам яркости и контрастности. Так как контроль этих регулировок производится чисто визуально, то очень легко "завалить" фотографию, т.е. "срезать" самые светлые и самые темные тона. Эти регулировки лучше использовать при создании эффектов для коллажей. Для "осветления" или "затемнения" изображения больше подходит инструмент "Levels" (рис.1).

Рис.1

Движки (1) и (3) подгоняются, соответственно, к началу и концу гистограммы, движком (2) регулируется насыщенность изображения. Здесь же можно скорректировать т.н. "черную точку", "серую точку" "белую точку", выбрав соответствующую пипетку (4) и пометив прямо на изображении места, где по-вашему мнению должны быть соответствующие тона. Причем, средней пипеткой можно выбрать любое по насыщенности место, в котором R,G и B составляющие цвета должны быть равны. PhotoShop при этом автоматически произведет цветокоррекцию всего изображения. Следующим этапом желательно сделать эффект "Filter - Sharpen - Unsharp Mask". Для визуального контроля изображения в процессе регулировок фильтра установите масштаб просмотра "Actual pixels", т.к. в увеличенном масштабе эффект может не понравиться :). "Unsharp Mask" не рекомендую применять, если фотография сильно запылена. Результат будет ужасен. C пылью можно попытаться расправиться с помощью эффекта "Noise – Ddust & Scratches". Главное в этом деле – не перестараться.

Здесь можно дать дополнения, которые касаются подготовки изображений из журналов. Журналы печатаются т.н. офсетным способом, поэтому изображение в журнале состоит из большого числа маленьких точек 4-х основных цветов модели CMYK: Cyan, Magenta, Yellow, blacK (цвет black обозначен по последней букве, чтобы не путать его с Blue из модели RGB). Это вносит в обработку ряд дополнительных трудностей. Первым делом нужно избавиться от растра. Хорошо зарекомендовал себя следующий способ:

  1. Изображение сканируется с разрешением 600 dpi без применения фильтров сканера. Во многих сканерах присутствует опция "Descreen", но в большинстве случаев она работает просто отвратительно, особенно в сканерах класса SOHO. Поэтому ее не используем.
  2. Полученное изображение увеличиваем лупой до такой степени, чтобы были видны офсетные точки, но в то же время просматривался достаточный фрагмент изображения.
  3. Вызываем эффект "Blur – Gaussian Blur" и движком устанавливаем такую величину, при которой офсетные точки сольются и станут неразличимы.
  4. Делаем "Image - Size" изображения до нужной нам величины.
Дальше – действия такие же, как и с фото, начиная с эффекта "Filter - Sharpen - Unsharp Mask". Стоит отметить, что иногда, особенно при сканировании некачественных публикаций, после попытки размытия офсетных точек эффектом "Blur – Gaussian Blur" на изображении остаются частые параллельные линии или "сетка", которые очень портят вид. В этом случае можно посоветовать положить картинку в сканер под углом, примерно 45? и сразу после сканирования повернуть изображение в PhotoShop в нормальное положение. Дальше – все как описано выше с пункта 2.

Вот теперь все готово для создания окончательного файла. Не стоит торопиться нажимать Ctrl+S, можно поступить более мудро - Ctrl+Alt+Shift+S (жутковато выглядит, не правда ли?). Если указательный палец правой руки при нажатии первых двух кнопок интуитивно тянется к Del, то Вам больше подойдет прогулка по меню File – Save for Web. Здесь все очень наглядно и в пояснениях почти не нуждается. Переходим на закладку 2-Up или 4-Up (кому как удобнее) и, визуально контролируя конечный результат, выбираем формат и параметры при которых наивысшее качество картинки соответствует наименьшему размеру файла. Единственно что я бы не рекомендовал делать в этом окне, так это изменять размеры изображения. Загонять картинку "в размер" лучше на первоначальном этапе, потому что пересчет пикселей может свести на нет все ваши героические усилия. Будет лучше, если фильтр "Filter - Sharpen - Unsharp Mask" будет последней садистской процедурой перед сохранением файла на диск. :)


Автор: GoodWinДата публикации: 17.09.2003
Рейтинг статьи: [4.38] рейтинг статьи: 4.38рейтинг статьи: 4.38рейтинг статьи: 4.38рейтинг статьи: 4.38 [голосов: 16]Кол-во просмотров: 8128
Оценить статью: Установите cookies!

Комментарии читателей:


Сообщение №387 Александр Кириллинhttp://www.webotdel.ru/ в новом окне15.06.2004 3:00:55
Я сохраняю итоговые файлы через Ulead Smart Saver. Получается побыстрее и попроще и файлики поменьше, чем по Ctrl-Alt-Shift-S. Конечно, если нам не надо png или tiff, если нужен просто jpg.
Сообщение №621 ChAkohttp://hotcharts.ru/ в новом окне29.07.2005 14:51:01
Это так парится над каждой картинкой перед публикацией в сети. Нет уж это не для меня. Я делаю все проще и быстрее. Да и вообще PhotoShop это не для програ не для веб-графики.
Сообщение №924 Аццкий 22.05.2006 1:24:33
Чако, ты давно начал веб-строительством заниматься? Выпей йаду лучше
Сообщение №993 vodkomotornikhttp://www.vodkomotornik.narod.ru/ в новом окне07.06.2006 14:47:34
Все правильно! Только мало кто из народу так делает, потому и столько фот такого говеного качества навалено в интернете.
Перед unsharp mask, надо в LAB перевести.
Сообщение №1160 Деревянные аркиhttp://www.arki.ru/ в новом окне23.07.2006 14:46:18
>Я сохраняю итоговые файлы через Ulead Smart Saver. Получается побыстрее и попроще и файлики поменьше, чем по Ctrl-Alt-Shift-S. Конечно, если нам не надо png или tiff, если нужен просто jpg.

Мне тоже нравится Ulead Smart Saver - пользуюсь им много лет, и никаких проблем. У себя на арках обработал им каждую картинку, благодаря чему вес значительно сократился, а качество осталось практически тем же.

PNG практически не используется на сайтах, хотя Smart Saver его поддерживает. А TIFF и не должен использоваться в вебе. Зато с GIF и JPG программа справляется отлично.

>Это так парится над каждой картинкой перед публикацией в сети. Нет уж это не для меня. Я делаю все проще и быстрее. Да и вообще PhotoShop это не для програ не для веб-графики.

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

Кстати. в Ulead Smart Saver есть пакетная обработка данных - настроил параметры, запустил, и хоть 100 файлов сразу - все сделает. Но я предпочитаю обрабатывать каждый файл отдельно.

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

Подумаем: 10 лишних килобайт * 1000 посетителей в сутки * 5 просмотров * 365 дней = 17,5 гигабайт лишнего трафика! А если посетителей больше? А если разница 50 килобайт? А если посетитель просматривает 20 страниц? Чудовищные затраты получатся.

» Читать все комментарии...

Ваши комментарии:

Ваше имя:*
Ваш E-mail:
Ваш URL:
HTML запрещен
BB Код разрешен


Ваше сообщение:*
* - обязательные поля для заполнения

Внимание!
Перед появлением сообщения на сайте, оно пройдет премодерацию.

Поиск по сайту:

Последние статьи:
Секреты web-графики Секреты web-графики
» архив всех статей
Схожая тематика:
:: Планирование сайта
:: Концепции дизайна
:: Юзабилити
Рассылка новостей:

подписаться
отказаться


Академия веб мастеринга и веб дизайна. Разработка сайта, вёрстка сайта, веб программирование, продвижение ресурса, инструментарий и другие темы, посвященные разработке ресурсов в сети Интернет. Форум для веб мастера.


карта сервера :: форум :: профайл :: авторам :: о сайтеНаверх
Rambler's Top100Rambler's Top100 Valid HTML 4.01!Каталог-Молдова - Ranker, Statistics © 2000-2010 Все права защищены
страница создана за 0.676 секунд
На главную страницуHosted by Host-MD 
Developed by SiteMaker