DeTalk.ru - форум о дизайне, искусстве, фотографии, графике, веб-технологиях. Форум дизайнеров, художников, фотографов, веб-разработчиков.
Быстрый поиск:

Здравствуйте, гость ( Вход | Регистрация )

 
Reply to this topicStart new topic
Adobe Photoshop: Теория - Оптимизация графики средствами Photoshop, что лучше - gif, jpg или png? Эта статья отвечает на этот и многие дру  Adobe Photoshop: Теория - Оптимизация графики средствами Photoshop, что лучше - gif, jpg или png? Эта статья отвечает на этот и многие дру
SainT.A.
post Feb 27 2006, 02:13 AM
Сообщение #1


Новенький
*

Группа: Старшие инквизиторы
Сообщений: 74
Регистрация: 26-February 06
Пользователь №: 1 941
Фотокарточка



Репутация:   0  


Всем привет! Хочу разместить ссылку на свою авторскую статью про оптимизацию графики в Фотошопе...

Оптимизация графики для Web
Всем начинающим "web-дизайнерам" при создании графики для сайта, обычно не приходится сталкиваться с трудностью ее оптимизирования. А зря! Извините за выражение, такой "чайник" умудряется создать сайт с 50-100 картинками в нем (!) и плюс к тому же не оптимизированными, т.е. слишком большого размера (файлового)! Представьте, сколько времени отнимет загрузка такой домашней странички Василия Пупкина при скорости модема клиента около 28,8 килобит? Это не дело!

Данная статья предназначена для тех, кто не умеет грамотно и правильно оптимизировать графику в Photoshop для последующего использования ее в Интернете. Давайте начнем!

ТЕОРИЯ
Формат GIF
Существует несколько форматов графики для удобного и наилучшего хранения ее в Web. Это формат GIF, который предназначен для хранения малоцветных или однотонных изображений (максимум в одном может быть 256 цветов), причем изображение может быть прозрачным (т.е. при вставке на любой фон изображение может смотреться удачно). В формате GIF также может хранится набор изображений, т.е. анимация. Обычно такие файлы называют "Анимированные GIF". Следует отметить, что формат GIF не пригоден для фотографий и других многоцветных изображений, но зато он очень даже пригоден для картинок с текстом. Изображение в формате GIF можно "сжать" (т.е. уменьшить его размер) в 5-20 раз.

IPB Image
Изображение в формате GIF 32 цвета : 20 Кб

Формат JPG/JPEG
Этот формат отличается от GIF тем, что качество изображения может быть намного лучше, поскольку такие изображения могут быть очень и очень многоцветными. Изображение в формате JPG/JPEG можно "сжать" в 5-60 раз, но с потерей качества таким образом, что пиксели начинают "размазываться". Хотя размер файла при этом меньше намного не становится.
Вы можете хранить в таком формате фотографии, обои и прочие многоцветные изображения в Интернете. Но стоит заметить, что этот формат обычно не используется в малоцветных (до 256 включительно цветов) изображениях и изображениях с текстом, так как пиксели вокруг него начинают "размазываться". Отличия между JPG и JPEG нет, только в названиях. Использует алгоритм сжатия LZW.

IPB Image
То же изображение в формате JPG : 52 Кб

Формат PNG
PNG - фоpмат для Сети, пpизванный заменить собой устаpевший GIF. Использует сжатие без потеpь, сходное с LZW (именно из-за патентования в 1995-м году алгоpитма LZW возник PNG). Сжатые индексиpованные файлы PNG, как пpавило, меньше аналогичных GIF'ов, RGB PNG меньше соответствующего файла в фоpмате TIFF. Глубина цвета файлах PNG может быть любой, вплоть до 48 бит. Используется двумеpный interlacing (не только стpок, но и столбцов), котоpый, так же, как и в GIF'е, слегка увеличивает pазмеp файла. В отличие от GIF'а, где пpозpачность как мед (т.е. 100%) - либо есть, либо нет, PNG поддеpживает также полупpозpачные пикселы (то есть в диапазоне пpозpачности от 0 до 99%) за счет Альфа-канала с 256 гpадациями сеpого. В файл фоpмата PNG записывается инфоpмация о гамма-коppекции. Гамма пpедставляет собой некое число, хаpактеpизующее зависимость яpкости свечения экpана вашего монитоpа от напpяжения на электpодах кинескопа. Это число, считанное из файла, позволяет ввести попpавку яpкости пpи отобpажении. нужно оно для того, чтобы каpтинка, созданная на Мас'е, выглядела одинаково и на РС, и на Silicon Graphics. Таким обpазом эта особенность помогает pеализации основной идеи WWW - одинакового отобpажения инфоpмации независимо от аппаpатуpы пользователя. PNG поддеpживается в Microsoft Internet Explorer начиная с веpсии 4 для Windows и с веpсии 4.5 на Макинтош. Netscape добавила поддеpжку PNG для своего бpаузеpа в веpсиях, начиная с 4.0.4 для обеих платфоpм.
Следует отметить, что изображения в данном формате "весят" относительно больше, чем такие же изображения в формате JPG или GIF.

IPB Image
То же изображение в формате PNG : 101 Кб

ПРАКТИКА
Оптимизируем фотографию для сайта средствами Photoshop
Давайте представим, что вам нужно вставить фотографию на вашу домашнюю страницку, но вам хочется, чтобы она загружалась быстрее и выглядела на все сто! Откроем ее в Adobe Photoshop (версия желательно выше, чем 7, например, у меня стоит CS - т.е. 8-ая версия). Хотя у меня и есть 9-ая версия CS2 - мне она не нравится, т.к. ничего особенного в ней нету, кроме Vanishing Point, а памяти она тратит намного больше.

Загрузим нашу фотографию в редактор. Это делается так: File - Open (Файл - Открыть).

Итак, допустим вы сняли фотографию на цифровик и она очень большого размера (1024x768 px - в ширину и высоту соответственно). Весит такая фотография слишком много, поэтому нам нужно оптимизировать ее, т.е. сделать фотографию наиболее лучшей в соотношении размер файла/качество.

Итак, вам нужно уменьшить фотографию до приемлимого размера, чтобы изображение хорошо смотрелось на сайте? Давайте зайдем в меню Image - Image Size (Изображение - Размер изображения) и изменим значение Width (Ширина) на 400 пикселей, а Height (Высота) - изменится относительно значения широты, если поставлена галочка в пункте Constrain Proportions. В нашем случае, если изображение имеет размеры 1024х786 и разрешение 72 dpi, то ширина результирующего изображения будет равна 400 px, а высота - 300. (рис. 1).

IPB Image
Рис. 1

Надеюсь, все было понятно в данном диалоговом окне?

Это еще не все! Теперь самое интересное! Если вы закончили с подготовкой своей фотографии для сохранения, зайдите в меню File - Save For Web (Файл - Сохранить для web) или просто нажмите сочетание клавиш Ctrl+Alt+Shift+S. Вы увидите примерно то же, что и на рис. 2.

IPB Image
Рис. 2

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

IPB Image
Рис. 3

Это самая важная правая панель Save For Web. Верхние 3 кнопки по порядку означают, что можно сохранить изображение после подготовок, отменить все действия в данном окне, либо сохранить изменения только в памяти Photoshop'а и вернуться обратно в редактор.

Выдвигающийся список Preset означает то, что вы можете выбирать разные "стили" оптимизации из уже готовых и на мой взгляд - вполне приличных, после чего непременно сохранить. Если же вы хотите сами сделать свой настройки оптимизации, вам нужно для начала выбрать из выдвигающегося списка ниже формат изображения и настроить все необходимое, после чего - сохранить. Я покажу вам лишь на примере нашего изображения, которое мы будем сохранять в формате JPG (наилучший формат для фотографий). См. рис. 4.

IPB Image
Рис. 4

Как видите, я выставил формат JPEG (или JPG), с качеством 60%, размытием (Blur) - 0 и сделал наш JPEG прогрессивным (т.е. когда картинка будет загружаться в браузере пользователя, начнут загружаться сначала как бы очертания, потом постепенно наша фотография превратится из наихедшей в наилучшую !:)

Всегда можно посмотреть отличие между оригиналом и результатом, который мы сделали (рис. 5). Особенно это видно хорошо, когда изображение было в формате JPG/JPEG и его оптимизировали в GIF.

IPB Image
Рис. 5

Из иллюстрации видно, что изображение-оригинал весило 352 Кб, а получившееся - около 20 Кб! Ура! Задача выполнена, теперь не надо больше выкладывать на сайт свои "полукилометровые" фотки! smile.gif

Автор статьи: Ермолин Вадим
Кол-во иллюстраций к статье: 8
Вес данного HTML-файла (без иллюстраций) - около 14 Кб
Суммарный вес иллюстраций к статье - 473 Кб

Оригинал - http://imperior.info/content/optimization.php


--------------------
La tristesse durera....
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Эртэд
post Feb 27 2006, 03:43 AM
Сообщение #2


суперадмин
*****

Группа: Начальство
Сообщений: 3 728
Регистрация: 7-June 04
Из: Россия, Москва
Пользователь №: 3
Фотокарточка



Репутация:   10  


imperior, размести её пожалуйста не как ссылку, а прямо в теме.
Если лень, могу сделать сам.


--------------------
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
SainT.A.
post Feb 27 2006, 08:35 AM
Сообщение #3


Новенький
*

Группа: Старшие инквизиторы
Сообщений: 74
Регистрация: 26-February 06
Пользователь №: 1 941
Фотокарточка



Репутация:   0  


Vulko, ок, лучше вы сами... честно - лень biggrin.gif

кстати, вы покупаете переводы для MGraphics? smile.gif


--------------------
La tristesse durera....
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Эртэд
post Feb 27 2006, 11:06 AM
Сообщение #4


суперадмин
*****

Группа: Начальство
Сообщений: 3 728
Регистрация: 7-June 04
Из: Россия, Москва
Пользователь №: 3
Фотокарточка



Репутация:   10  


imperior, давай обсудим в личке. Наверное от тебя получал письмо. Сорри - времени не было ответить.


--------------------
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
SainT.A.
post Feb 27 2006, 11:13 AM
Сообщение #5


Новенький
*

Группа: Старшие инквизиторы
Сообщений: 74
Регистрация: 26-February 06
Пользователь №: 1 941
Фотокарточка



Репутация:   0  


Vulko, да, от меня получали... ок, отпишусь в личку.


--------------------
La tristesse durera....
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Kiva
post Feb 27 2006, 02:17 PM
Сообщение #6


Товарищ
***

Группа: Пользователь
Сообщений: 481
Регистрация: 8-January 06
Пользователь №: 1 655
Фотокарточка



Репутация:   1  


Авторская,значит...перевели,и сразу в авторы?))


--------------------
Надейтесь на хорошее, но будьте готовы к плохому.
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
SainT.A.
post Feb 27 2006, 09:48 PM
Сообщение #7


Новенький
*

Группа: Старшие инквизиторы
Сообщений: 74
Регистрация: 26-February 06
Пользователь №: 1 941
Фотокарточка



Репутация:   0  


Kiva, почему вы решили, что это перевод? это личная - вот например перевод можете посмотреть здесь: http://imperior.info/content/table_layout.php

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

Сообщение отредактировал imperior - Feb 27 2006, 09:58 PM


--------------------
La tristesse durera....
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
« Предыдущая тема · Растровые редакторы · Следующая тема »
 

Reply to this topicStart new topic
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 





Adobe PhotoshopCorel DrawFlash3dблог по продвижению

Политика конфидециальности
© DeTalk.ru 2004-2012
Все права защищены.

SiteProjects - продвижение сайтов



При использовании материалов с сайта, ссылка на DeTalk.ru обязательна!


Текстовая версия