MENU
   

  [email protected]

» Материалы за 09.10.2016
 
Опубликовал:

Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):
 — уменьшение количества цветов;
 — оптимизация палитры изображения;
 — стилизация изображения;
 — искажение размеров изображения;
 — фрагментарная оптимизация;
 — оптимизация «прозрачных» изображений;
 — использование чересстрочной развертки.

Теперь разберемся по порядку с этими методами и приемами оптимизации.

Уменьшение количества цветов

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов.
Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае,
если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную
картинку. Сравните два изображения — они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое — палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).

Оптимизация изображений в формате GIF

Оптимизация палитры изображения

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

Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ей ближайшую по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения верности воспроизведения цветов. Попробуйте, например, преобразовать фотографию красной розы в индексное изображение, используя палитру, содержащую оттенки зеленого? Это, конечно, крайний случай, но это даст Вам возможность оценить качество преобразования с использованием фиксированной палитры. Тем не менее, данный способ применяется — в основном для того, чтобы
изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми броузерами. Для иллюстрации — посмотрите на два изображения: левое использует
оптимизированную палитру, а правое — фиксированную палитру Netscape.

Оптимизация изображений в формате GIF

Во втором случае, когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов.
Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результаты (см. рисунок выше), и именно его следует применять, если у Вас нет иных причин для использования фиксированной палитры.
При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут местно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг(Dithering). Например, у нас есть 16 стандартных чистых
цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное.
Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации:). А все дело в методе хранения изображения форматом GIF.
Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего — области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем «перемешивания» точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой — нет. Посмотрите, как изменилось изображение, а заодно обратите
внимание на размеры файлов.

Оптимизация изображений в формате GIF


Стилизация изображения

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

Искажение размеровизображения

Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат
(Малевича? размером 100?100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1?1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100?100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию:). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может
принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать
минимальную ширину (высоту) таблицы и делать другие полезные вещи.

Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.

Оптимизация изображений в формате GIF


Фрагментарная оптимизация

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256
цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

Оптимизация «прозрачных» изображений

Формат GIF позволяет сохранять т.н. «прозрачные» изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишьпозволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая «прозрачный» пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing’а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом — на контрастном синем, и ореол хорошо виден.

Оптимизация изображений в формате GIF


Использование чересстрочной развертки

И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку,
потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи:). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки. Приведенные ниже изображения показывают разницу при загрузке
нормальных (слева) и чересстрочных (справа) изображений.
   
 
Раздел: Прочее / Статьи | Просмотров: 964 | Комментарии (0) »
 

 
Paranormal - Project for After Effects (Videohive)

Paranormal - Project for After Effects (Videohive)
After Effects Version CS4 - CC 2015 | 1920x1080 | No plugins | PDF help | 377.19 mb
   
 
Раздел: Футажи / Футажи After Effects | Просмотров: 305 | Комментарии (0) »
 

 
Опубликовал:

Вас удручает перспектива создания иллюстраций для Web с помощью пакета Adobe Photoshop? Расслабьтесь: последние версии программ Adobe Illustrator, Macromedia FreeHand и CorelDraw позволяют импортировать созданную в них графику непосредственно в файлы форматов GIF или JPEG, готовые для размещения в Web. Кроме того, векторные графические пакеты содержат также многие специальные средства для работы в Web, например палитры цветов Web, возможность экспорта текста HTML и привязки графики к URL.

Графический формат обмена (Graphic Interchange Format, GIF) поддерживают все браузеры. Изображение в формате GIF строится по принципу чересстрочной развертки, поэтому оно отображается на экране уже после загрузки части файла. Вначале выводится грубый набросок изображения с очень низким разрешением, который становится все более отчетливым по мере загрузки оставшейся части файла. В новой версии GIF89a поддерживается прозрачность фона, поэтому изображения не обязательно должны быть прямоугольными. Следует помнить, что GIF — это формат, который лучше использовать для изображений с небольшим количеством цветов. Для хранения в Web более сложных изображений, например фотографий, лучше использовать формат JPEG, для которого характерны более высокая степень сжатия и меньшие размеры файлов.

В данной статье рассказывается о том, как создать файл GIF для типичной кнопки Web с помощью пакетов Illustrator 7.0, FreeHand 7 и CorelDraw 7. Мы также поможем вам обойти некоторые из возможных препятствий на тернистом пути к World Wide Web.

Шаг 1: Создание графического объекта для переноса в Web

Примеры, приведенные на врезках, иллюстрируют этапы работы. Мы взяли векторный клипарт из коллекции Aridi на pixelbrush.ru, слегка отредактировали его и затем расположили текст дугой под нижним краем рисунка.
Вначале можно работать с большим рисунком, но с определенного момента все изображение необходимо привести к тому масштабу, который
будет использоваться в Web.

При макетировании Web-страницы следует помнить, что она создается в расчете на экран среднего размера. Значит, размер изображения не должен быть больше, чем 6405480 пикселов (около 2305152 мм), — превышение этих размеров заставит пользователя для просмотра всего изображения выполнить прокрутку экрана. Нельзя забывать и о том, что каждый лишний пиксел увеличивает размер файла, а следовательно, и время его загрузки на компьютер пользователя. Пользователь, которому пришлось ждать появления изображения на экране две минуты, вряд ли оценит ваше произведение, каким бы высокохудожественным оно ни было.

Шаг 2: Выбирайте цвета только из палитры Web

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

Чтобы избежать смешения или замены цветов, следует использовать палитру из 216 цветов, специально подобранных для Web. В последних версиях пакетов векторной иллюстративной графики такая возможность реализуется легко. Так, в пакете Adobe Illustrator 7.0 для этого достаточно выбрать команду Web из подменю «Библиотеки образцов» (Swatch Libraries) меню «Окно» (Window). Ниспадающее меню палитры
позволяет выбрать режим отображения: названия цветов или образцы.

В свою очередь, в пакете FreeHand 7 надо выполнить команду «Смеситель цветов» (Color Mixer) из подменю «Панели» (Panels) меню «Окно». Задав для палитры «Смеситель цветов» модель RGB, выберите любую комбинацию числовых значений 0, 51, 102, 153, 204 или 255 для каждого из трех первичных цветов. Можно также смешивать собственные цвета в системе CMYK, выбирая значения в процентах 0, 20, 40, 60, 80 или 100 для голубого, пурпурного и желтого компонентов. Для черного цвета всегда оставляйте значение 0. Кроме того, можно установить цветовую палитру Web (например, Internet Color System компании Pantone) и выбирать из нее цвета, щелкая мышью по картинке «Смеситель цветов Apple» (Apple Color Mixer) в палитре «Смеситель цветов».

Чтобы отобразить цветовую палитру в пакете CorelDraw 7, щелкните на черном треугольнике инструмента заполнения и выберите палитру из раскрывшейся инструментальной панели. Затем из ниспадающего меню «Цветовая модель» (Color Model) выберите значение «Палитра»
(Palette), а из ниспадающего списка палитр — Netscape Navigator или Internet Explorer. Теперь в палитре цветов будут отображены 216 цветов Web, а также несколько оттенков серого (следует избегать тех цветов, в которых используются значения RGB, отличные от 0, 51, 102, 153, 204 или 255).

При создании Web-страниц нужно всегда стремиться к сокращению размеров файлов, поэтому следует использовать как можно меньшее число цветов. В нашем примере используется только три цвета: R51G102B102, R51G102B153 и R255G51B51.

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

Шаг 3: Экспортирование иллюстрации в формат GIF

Перед экспортом готовой иллюстрации присвойте файлу короткое имя, не содержащее пробелов и отвечающее соглашениям DOS: имя файла,
точка и трехбуквенное расширение gif. Желательно также в имени файла использовать только строчные буквы или по крайней мере применять
одинаковые правила использования строчных и заглавных букв для присвоения имен файлам — сеть Internet основана на операционной
системе Unix, поэтому при задании ссылок на имена файлов в тексте HTML имеет значение регистр, в котором набраны буквы.

В пакете Adobe Illustrator 7.0 выполните команду «Экспорт» (Export) из меню «Файл» (File). В появившемся диалоговом окне выберите из списка «Формат» (Format) значение GIF89a. Введите имя файла с расширением gif, а затем щелкните по кнопке «Сохранить» (Save) — появится диалоговое окно «Опции GIF89a» (GIF89a Options). Выберите из меню «Палитра» (Palette) значение Web. Если хотите, чтобы изображение при просмотре с помощью браузера сначала отображалось с низким разрешением, а затем постепенно улучшалось, установите флажок в ячейке «Чересстрочный» (Interlaced). Если объект не прямоугольный и фоновые цвета или шаблоны Web-страницы должны «просвечиваться» через него, щелкните на ячейке «Прозрачный»
(Transparent). Щелчок на ячейке «Сглаживание» (Anti-alias) позволяет устранить ступенчатость при отображении кривых. Если картинке был присвоен адрес URL, щелкните на ячейке «Карта изображения» (Imagemap) и выберите опцию «Клиент (.html)» (Client-side). И наконец, чтобы экспортировать файл в формат GIF, щелкните на кнопке OK.

Чтобы вызвать диалоговое окно «Экспорт» в пакете Macromedia FreeHand 7, выполните аналогичную команду из меню «Файл»; затем введите имя файла и выберите GIF из меню «Формат». Щелкнув на кнопке «Опции», вызовите диалоговое окно «Значения по умолчанию для экспорта в растровый формат» (Bitmap Export Defaults) и задайте низкое разрешение (вполне подойдет принятое по умолчанию значение 72 точки на дюйм), а также сглаживание. После этого щелкните на кнопке «Еще» (More), чтобы вызвать диалоговое окно для задания опций формата GIF, и установите обе опции — «Чересстрочный GIF» и «Прозрачный GIF». Закройте окна (кнопка OK и кнопка «Экспорт» — в окне «Экспорт»). На этом экспорт файла будет завершен.

В пакете CorelDraw 7 выполните команду «Экспорт» из меню «Файл» — появится диалоговое окно «Экспорт». Затем выберите из меню «Тип для сохранения» (Save As Type) формат CompuServe Bitmap (GIF), введите имя файла и щелкните на кнопке «Экспорт», чтобы вызвать диалоговое
окно «Экспорт растрового изображения» (Bitmap Export). Используйте значения, принятые по умолчанию: 256 цветов, коэффициент
масштабирования 1:1 и разрешение 72 точки на дюйм. Чтобы отобразить диалоговое окно «Опции GIF89a», щелкните на кнопке OK. Щелкните на кнопке «Цвет изображения» (Image Color) и ячейке «Чересстрочный». И наконец, завершите экспорт в формат GIF, щелкнув на кнопке OK.

Просмотр иллюстрации с помощью браузера 

Теперь созданный вами рисунок готов к просмотру с помощью браузера. Запустите браузер, выполните команду «Открыть» (Open) из меню «Файл» и выберите «свежеиспеченный» GIF-файл. Можно также мышью перетащить картинку созданной иллюстрации с рабочего стола и отпустить ее в окне браузера. Изображение появится в окне браузера, а через прозрачные области рисунка должен быть виден серый фон заднего плана. Если браузер обладает возможностями редактирования, можно сразу вставить рисунок непосредственно в уже существующую Web-страницу или с помощью любого текстового редактора вставить инструкцию HTML »Click. Если появляется рамка, а это нежелательно, добавьте в тег IMG SOURCE текст BORDER=0. Оператор ALT предназначен для браузеров,
работающих в режиме «только текст», и его не следует забывать.

Создайте собственный логотип для Web-страницы или такое изображение, которое трудно либо невозможно воспроизвести с помощью редактора растровой графики, а затем продемонстрируйте его заказчикам и друзьям. Попробуйте применить шаблоны штриховки или перевести текст в контуры и применить различные эффекты к отдельным буквам. Только не забывайте, что меньшие по объему графические файлы с небольшим количеством цветов загружаются быстрее и не расстраивают пользователей, занимающихся Web-«серфингом»!

Исходным материалом для дальнейшей работы во всех трех иллюстративных пакетах служит слегка измененный векторный рисунок из коллекции Aridi
Adobe Illustrator

Выполните команду Web из подменю «Библиотека образцов» меню «Окно». Чтобы облегчить дальнейшую работу, сохраните копию
изображения в формате иллюстративного пакета. После выполнения команды «Экспорт» из меню «Файл» выберите значение GIF89a из списка диалогового окна. В следующем диалоговом окне для завершения создания GIF-файла щелкните на ячейках «Чересстрочный»,
«Прозрачный», «Сглаживание» и «Карта изображения (Клиент)». Macromedia FreeHand

Вызовите «Смеситель цветов», выберите модель RGB и задайте комбинацию определенных числовых значений для каждого из трех первичных цветов. Выберите значение GIF из списка диалогового окна «Экспорт», введите имя файла и щелкните на кнопке «Опции». В появившемся окне «Значения по умолчанию для экспорта в растровый формат» задайте низкое разрешение и сглаживание, а затем щелкните на кнопке «Еще». Выберите обе опции в окне диалога «Опции GIF» и закройте оба диалоговых окна, щелкнув на кнопках OK. Щелчок на кнопке «Экспорт» завершит процесс.

CorelDraw

Щелкните на кнопке выбора цвета, которую можно найти, раскрыв «ковшик» заполнения на инструментальной панели. В палитре «Цвет»
выберите из меню «Цветовая модель» значение «Палитра», а из раскрывающегося списка — Netscape Navigator или Internet Explorer. В диалоговом окне «Экспорт» выберите тип CompuServe Bitmap (GIF), введите имя файла, затем, оставив значения опций для экспорта, принятые по умолчанию, щелкните на кнопке OK. В появившемся затем диалоговом окне «Опции GIF89a» щелкните на радиокнопке «Цвет изображения» и ячейке «Чересстрочный»; щелчок на кнопке OK завершит процесс.

Создание ссылок на адреса URL

Хотя для создания большинства ссылок вам будет удобнее использовать одно из средств разработки Web, пакеты Illustrator и FreeHand также содержат удобные средства для вставки ссылок. Если ваше изображение всегда будет привязано к одному и тому же адресу URL, соответствующий текст программы на HTML можно вставить прямо в одной из этих программ.

В пакете Adobe Illustrator 7.0 выберите объекты и выполните команду «Показать атрибуты» (Show Attributes) из меню «Окно» (Window) — появится палитра «Атрибуты» (Attributes). Введите адрес URL на указанном месте. (Illustrator также позволяет мгновенно проверять ссылки на адреса URL. Если на компьютере установлен браузер и к нему подключен модем, вы можете мгновенно соединиться с выбранным URL, воспользовавшись средствами палитры «Атрибуты».)

В пакете FreeHand 7 выберите изображение и выполните команду «Редактор URL» (URL Editor) из подменю Xtras в меню «Окно». Выберите
команду «Новый» (New) из всплывающего меню панели «Редактор URL»; в появившемся диалоговом окне «Новый URL» введите адрес URL и щелкните
на кнопке OK. После ввода адреса он появится в панели «Редактор URL», откуда его можно будет легко выбрать повторно.
   
 
Раздел: Прочее / Статьи | Просмотров: 810 | Комментарии (0) »
 

 
Опубликовал:

Анимация бывает разная: с использованием эффектов или покадровая, простая (2-3-4 кадра) и сложная (количество кадров ограничевается только
фантазией и весом). Новичкам в дизайне и общении с разными редакторами можно посоветовать начать с простой анимации, да и более опытные люди
нередко ею пользуются.

Предположим, что самый трудный этап в изготовлении баннера мы прошли - продумали идею, решили каким образом будем создавать анимацию: покадрово или с применением эффектов, подготовили графику - нарисовали картинки. Теперь нам надо слепить анимацию. Мы будем делать простейший анимированный баннер с помощью покадровой анимации. Предположим у нас будет использоваться 3 кадра. Вот эти картинки.

Создание простого анимированного баннера в Ulead Gif Animator и его оптимизация
Создание простого анимированного баннера в Ulead Gif Animator и его оптимизация
Создание простого анимированного баннера в Ulead Gif Animator и его оптимизация


Запускаем Ulead Gif Animator, если у нас выскакивает окошко с выбором, то выбираем Animation Wizard, или же проходим путь File --> Animation Wizard
Появляется диалоговое окно в первом окне, щелкая по кнопке Add Image мы выбираем (по одному) картинки-кадры, щелкаем кнопку Далее, в следующем окне выбираем text-orientied или photo-orientied, если вы используете надписи выбирайте text-orientied, щелкаем далее и переходим к следующему окну где задаем временную задержку (Delay time) и количество кадров в секунду (frames per second); в нашем случае так как мы используем разные надписи в кадрах, то ставим задержку 250, а поле кадров остается пустым. Щелкаем кнопку Далее и Готово (Finish).

Перед нами находится окно редактора с четырьмя вкладками, нам будут нужны две из них - Optimize - оптимизировать и Preview - просмотр. В просмотре мы можем просматривать получающуюся анимацию, а в режиме оптимизации, оптимизировать постепенно уменьшая количество используемых цветов, для достижения наилучшего соотношения веса баннера и его качества. Первый раз оптимизируем при использовании 256 цветов (если во вкладке оптимизации вы не видите возможности выбора количества цветов, то нажмите кнопку advanced и у вас появятся расширенные возможности).
У нас получилось 14,177 Bytes - это слишком много для такой крошки.

Создание простого анимированного баннера в Ulead Gif Animator и его оптимизация

Уменьшаем: количество цветов - 200, вес - 13,535! Но и это много. Надо принимать решительные меры, количество цветов: 150 - вес 12,990; 100
цветов - 11,498; 80 цветов - 8,851 - Лучше не так ли!

Создание простого анимированного баннера в Ulead Gif Animator и его оптимизация


Как мы видим внешне разница не очень бросается в глаза, а разница по весу - значительная. Теперь мы сохраняем файл - и дело сделано - наш простейший анимированный баннер готов!!!
   
 
Раздел: Прочее / Статьи | Просмотров: 665 | Комментарии (0) »
 

 
Этикетка на водку - На троих.

Этикетка на бутылку водки - На троих.
3PSD, 3PNG | 969x1335, 738x422, 892x1299 | 300dpi | 6,79 Mb
Автор: Veronika
   
 
Раздел: Шаблоны / Этикетки | Просмотров: 2 754 | Комментарии (0) »
 

 
Опубликовал:

Не будем спорить, что именно называть "сложным" анимированым банером – здесь разговор пойдет о баннере, в котором БОЛЬШЕ трех фреймов. И больше 10. Ну, скажем, около 150. Интересно?

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

1. наиболее существенный параметр индексированного изображения – количество цветов в его палитре. Важной задачей при создании нашего баннера станет сведение количества цветов к минимуму;
2. Наличие градиентных заливок и многоцветных рисунков и фотографий делает невозможным серьезное уменьшение количества цветов в палитре, поэтому градиентных заливок у нас не будет, а с фотками… посмотрим;
3. Опять же в целях уменьшения количества цветов в палитре рекламный текст, присутствующий на баннере, будет без сглаживания;
4. Очень сложно подготовить большое количество фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому технология изготовления баннера из отдельных кадров, поочереди загружаемых в Ulead Gif Animator нам не подойдет. Баннер будем делать в Adobe (все исходники можно собрать в PhotoShop, a саму анимацию – в ImageReady)

Предположим, что вы уже знаете, в какой цветовой гамме будет ваш баннер, и что будет происходить (крутиться, двигаться, появляться и исчезать). Создаете новый файл, в полях размеров указываете формат вашего баннера, в подразделе background выбираете transparent – вы получили поле нужного размера с одним, пока еще пустым слоем.

1. При создании баннеров важно помнить, что чудное свойство гифа, анимированного в том числе – transparent в данном случае можно забыть, поскольку зачастую судьбу баннера предсказать трудно – на какой сайт, с каким фоновым цветом или еще хуже – с каким background image ваш шедевр станет. Т.е. ваша прямоугольная область не должна иметь прозрачных участков;

2. В случае если разрабатываемый баннер имеет цвет, отличный от белого, черного и серого, - скорее всего общий тон вашего баннера будет отличаться от основного тона страницы сайта. Теория вероятности штука сложная, но даже если вы делаете баннер с хитролиловым background`oм, и он попадает на похожий хитролиловый сайт (совершенно случайно) - скорее всего оттенки все же будут отличаться. Но баннеры со стандартным цветом background`а лучше оформлять в рамочку, можно тоненькую однопиксельную, можно цвета не сильно отличающегося от основного… Для того, что бы ту информацию, которую представляете в баннере ВЫ отделить от общей информации пространства чужого для вас cайта.

3. Пора считать - background и обводка – это уже два цвета. Считать и контролировать количество придется все время.

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

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

ТЕПЕРЬ – предлагается метод порезки слова (любого другого элемента баннера) для создания динамического эффекта прорисовки элемента баннера на экране.

- Впечатываете это слово, выбираете нужную гарнитуру и размер, в параметрах сглаживания шрифта устанавливаете NONE и делаете копию слоя, в меню Layer выбираете Type—>Render Layer – ваше название перестало быть текстом – это просто графический элемент, имеющий один (!) цвет.Дайте название слою – например NAME.

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

- Нарисуйте на этом слое однопиксельную линию (на выбор – горизонтальную или вертикальную. Для горизонтально ориентированного баннера, да еще если в качестве тренировки рекомендую именно горизонтальную) контрастного цвета. Любого – этот цвет мы считать не будем, поскольку ЭТА линия в нашем дизайне используется как ИНСТРУМЕНТ, а не элемент баннера, поэтому лучше сделать ее ярким цветом, да еще и таким, чтобы гарантированно отличить от реальных деталей баннера.

- В случае, если готовится таки горизонтальная порезка названия – которое у нас уже забито в предыдущем слое и сконвертировано в графику – выберите инструмент move (кнопка V на англицкой раскладке) и переместите линию в самый верх по отношению к верхнему пикселю вашего названия (можно вниз – направление принципиального значения не имеет, важна последовательность)

- Ctrl-click на слое TEMP – вы получили SELECT прямоугольной области высотой в один пиксель. Click на слое NAME, Ctrl-Shift-J – и из вашего названия вырезалась в новый слой однопиксельная полоска. Click на слое TEMP, при активном инструменте Move стрелкой переместите вашу рабочую полоску на один пиксель вниз, Ctrl-click на слое TEMP, перейдите на слой NAME, Ctrl-Shift-J – вы получили еще один слой со второй вырезанной полоской из вашего названия. По этому алгоритму разрежьте на полоски все ваше слово – слои последовательно будут создаваться, и их имена будут иметь порядковые
номера.

- Создайте еще один слой, например со слоганом, описывающим суть рекламы. Цвет, опять же – из уже существующих в палитре. Параметр сглаживания текста – NONE.

- Поскольку рассматривается самый простой вариант сложного баннера (извиняюсь за неудачный каламбур) другие возможные элементы баннера рассматривать не будем. Главное описать технологию. Это я говорю к тому, что сейчас приступаем к сборке заготовок в полноценную анимацию.

- Если со слоями вы работали в PhotoShop`e, то сейчас самое время перейти в ImageReady – в меню File —> to —> Image Ready. В меню Window выбрать Show Animation – появится свиток, в котором присутствует один фрейм. Сделайте все слои макета UnVisible, оставив Visible только подложку и рамочку.

- В свитке Animation в левом верхнем углу нажмите на стрелочку – появится локальное меню свитка. Выберите команду New Frame – вы создали фрейм, который является дубликатом предыдущего – т.е. со включенным слоем с подложкой и рамочкой.

- сделайте Visible слой с верхней полоской вашего разрезанного элемента. (возможно слой с названием "Name copy")

- Создайте еще один New Frame – в нем уже будет подложка, рамочка и первый элемент, и сделайте Visible слой со второй полоской имени ("Name copy 2").

- Таким образом – добавляя фреймы и включая слои прорисуйте все имя, и когда будут включены все слои имени обратитесь к свойству фрейма "delay" и измените время задержки на, допустим, величину в 5 секунд.

- Создайте еще один фрейм, проверьте, чтобы параметр delay был маленьким, и включите видимость слоя с графикой (в нашем примере тот самый монитор).

- Новый фрейм – и выключите Visible нижней полоски ИМЕНИ, и по соответствующей технологии в обратном порядке последовательно, пофреймово уберите ИМЯ.

- В новом фрейме включите слой со слоганом. Опять необходимо увеличить задержку (delay) отображения фрейма.

- И для начала достаточно. Параметр цикличности анимации установите в состояние Forever – и ваш баннер будет прокручиваться всегда.

Обратитесь к свитку Optimize, установите параметры gif - 4 colors – lossy:0 – No dither – Selective – No transparent. В свитке Animation в подменю Optimize Animation нужно отметить оба checkbox.

Запомните полученый gif (File—>SaveOptimizedAs) и запустите гиф – просмотреть его можно и из Image Ready напрямую, и через File—>Preview in в браузере, но если все сделано правильно – ваша анимация будет проигрываться без сдвигов и ошибок.

В заключении хотелось бы подчеркнуть тот факт, что эту технологию можно применять и для создания более сложной анимации – и при ограниченном количестве цветов можно изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ – слои с разрезанными полосочками продублировать (правая кнопка мыши на слое —>Dublicate Layer)
и дубликатам задать прозрачность слоя 50% (как вариант), и при создании анимации генерить прорисовку сначала полупрозрачных слоев, затем
непрозрачных. Подобный эффект можно создать с прорисовкой вертикальных элементов – и при грамотной композиции элементов баннера и хорошей
цветовой гамме баннер будет удачным. Как вы могли заметить объект на слое TEMP в конечном дизайне нами не использовался. Это всего лишь
инструмент для быстрого создания маски, которой вырезается элемент анимации. И маска эта не обязательно должна быть однопиксельной полоской –
это может быть любая произвольная форма. Движение прорисовки также может происходить в любом направлении, хоть по диагонали, хоть сначала сверху, потом слева, потом еще откуда нибудь.

Удачных вам анимированных баннеров!
   
 
Раздел: Прочее / Статьи | Просмотров: 333 | Комментарии (0) »
 

 
Этикетка на водку - Пшеничная пограничная.

Этикетка на бутылку водки - Пшеничная пограничная
3PSD, 2PNG |1772x1772, 720x1559, 720x1559 | 300 dpi | 11,3 Mb
Автор: Veronika
   
 
Раздел: Шаблоны / Этикетки | Просмотров: 2 335 | Комментарии (0) »
 

 
Опубликовал:

Анимированные GIF-изображения остаются самым популярным способом «оживления» Web-страницы. Практически они стали стандартом де-факто для рекламных заставок в Интернете. Причина этого вполне понятна: большинство посетителей Web-страниц реально могут увидеть
GIF-анимацию полностью, независимо от типа имеющегося у них компьютера или применяемого браузера. В этом и состоит отличие GIF
от Flash, Java и Dynamic HTML – весьма эффективных и все более популярных форматов, для работы с которыми требуются, однако,
специальные дополнительные модули, загружаемые апплеты или новейшие браузеры.

Формирование анимированных GIF-изображений основано на одном из старейших принципов анимации – быстрой смене картин, слегка отличающихся друг от друга. Как правило, все анимированные GIF-файлы содержат ряд отдельных кадров, при последовательном просмотре
которых создается иллюзия движения. Главная проблема состоит в том, что необходимость сохранения последовательности изображений может
привести к созданию файлов очень большого размера. При работе в WWW большие размеры файлов крайне нежелательны, поскольку из-за них увеличивается продолжительность загрузки. Рекламодатели хотят, чтобы их сообщение увидели полностью, а это означает необходимость
быстрого отображения анимированной рекламной заставки. Скорость загрузки зависит от длины файла и она настолько важна, что большинство крупных Web-узлов жестко ограничивают размер файлов. Эмпирически установлено, что размер рекламного баннера ни в коем случае не должен превышать 12 Кбайт.

Есть несколько стандартных приемов, позволяющих уменьшить размер GIF-изображения. К ним относятся сокращение числа цветов в изображении, числа и размеров кадров, а также отказ от полутонов.

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

Анимированные GIF-изображения появились довольно давно, поэтому им свойственны некоторые изначально присущие им ограничения.
Например, в этом формате нельзя использовать более 256 цветов, а сжатие информации осуществляется по устаревшему алгоритму LZW. Более
того, при работе с ним изображения выводятся в строгой последовательности, которую нельзя изменить во время воспроизведения. Однако применение этого формата предоставляет и ряд восхитительных возможностей. Он позволяет определять продолжительность отображения каждого кадра на экране, создавать прозрачные участки изображения и выбирать метод замещения старого изображения новым.

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

Большинство современных полнофункциональных программ для построения графических Web-страниц, например, Fireworks фирмы
Macromedia (http://www.macromedia.com/) и ImageReady компании Adobe (http://www.adobe.com/), предоставляют доступ к таким функциям. Образцы анимации для этой статьи мы сгенерировали с помощью пакета Fireworks.

Замедление (или ускорение) анимации

Формат GIF 89A позволяет определять задержку между отдельными кадрами (указывается с шагом в 0,01 с), что дает возможность управлять темпом анимации. Без учета эстетических соображений во многих случаях оказывается, что замедление анимации (или ее ускорение) позволяет снизить общее число кадров в файле.

Например, анимация, содержащая текст, должна оставаться на экране достаточно долго, чтобы зритель без труда смог прочесть его. Можно либо сформировать четыре идентичных кадра, каждый из которых отображается в течение заданного по умолчанию времени (0,2 с), либо сделать один кадр и задать для него точное время задержки 0,8 с.
Исключение трех кадров из четырехкадровой анимации приводит к уменьшению размера GIF-файла на 75% без применения других способов оптимизации.

Аналогичный прием может быть применен и в обратном направлении. Зачастую можно создать более правдоподобный эффект движения, снизив для нескольких кадров время задержки до 0,1 с или менее. Чтобы увидеть эту теорию в действии, посмотрите на анимацию со словами «Иллюзия движения», в которой первый кадр отображается в течение 0,6 с, а остальные три – в течение 0,1 с каждый.

Подготовка эффективных Web-анимаций

С помощью визуальных трюков, которые традиционно применяют
мультипликаторы, движение имитируется минимальным числом
кадров. В данном примере на нескольких последовательных кадрах
для создания иллюзии движения применяются размывка движением и наклон.


Отсечение избыточных частей изображения

На первом кадре GIF-анимации обычно определяются полные размеры изображения, а последующие кадры могут быть меньше. Более того, их можно размещать в любом месте в пределах границ первого кадра, задавая относительные координаты Х и Y. Таким образом удается отсечь
избыточные данные об изображении и уменьшить полный размер файла.
Сам процесс может показаться сложным, однако для его осуществления достаточно просто применить функцию экспорта. Например, в программе
Macromedia Fireworks есть флажок Auto Crop (Автокадрирование) в диалоговом окне Export (Экспорт). В редких случаях можно более точно вручную обрезать кадр (и сэкономить дополнительно 1-2 Кбайт, а то и больше) с помощью специализированной утилиты, такой как Alchemy
Mindworks GIF Construction Set Professional.

Подготовка эффективных Web-анимаций

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


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

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

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

Слои в анимации

Можно получать GIF-файлы поразительно малых размеров, если воспользоваться двумя другими возможностями данного формата: в GIF-файлах допускается наличие прозрачных участков и задание способа перерисовки или очистки каждого кадра анимации. Если создавать
анимацию, просто накладывая слои с новым изображением поверх старого, причем допускать просвечивание фрагментов предыдущего кадра, можно формировать кадры с протяженными прозрачными участками. Прозрачные области хорошо упаковываются, поскольку в алгоритме
сжатия они рассматриваются как участки сплошного однородного цвета. Кроме того, можно выбрать наиболее эффективный режим – полное
отсутствие очистки, или None. Если применяется программа, автоматически оптимизирующая GIF-анимации, убедитесь, что включена функция Auto Differencing (Автоматическое определение отличий), и укажите, какие участки кадра должны быть прозрачными.

Подготовка эффективных Web-анимаций

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


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

Уменьшение числа цветов в палитре

Формат GIF 89A предусматривает хранение информации обо всех цветах анимации либо в единой глобальной палитре, либо в последовательности локальных палитр. Важнейшая задача разработчика – исключение локальных палитр. Применение единой глобальной палитры для всей анимации означает, что цвета согласованы между кадрами, а это приводит к большей степени избыточности данных об изображении,
которые можно либо отсечь, либо преобразовать в прозрачный слой.
Напротив, в GIF-анимации, составленной из ряда изображений с различными палитрами, цветовая гамма может изменяться от кадра к кадру, что увеличивает размер кадрированных прямоугольников и прерывает прозрачные области.

К тому же, чем меньше цветов в палитре, тем короче файлы. Для хранения небольших палитр требуется меньше места. Так для палитры из 16 цветов требуется только 4 бита, тогда как для палитры из 128 цветов уже 7 битов. Не удивительно, что изображения, составленные из однородно окрашенных участков (особенно текст, логотипы и компьютерная графика), лучше работают с небольшими палитрами. При создании анимированных GIF-изображений не стоит применять фотографии или файлы с градиентной заливкой, поскольку они содержат множество различных цветов, что увеличивает размер палитры.

Избегайте введения новых цветов при формировании спецэффектов. Например, весьма популярное плавное затенение способно увеличить
число тонов серого в палитре на 8 или 16. Анимационные вспышки и настоящие оптические затенения также повышают требования к цвету.

Зачастую можно создавать намного меньшие анимированные GIF-файлы с помощью приемов, заменяющих эффекты с использованием полосы
пропускания. Например, вместо затенения, при котором цвет объекта изменяется от кадра к кадру, воспользуйтесь старомодным приемом
смены кадров наплывом, при котором изображение закрашивается произвольным однородным напылением. Аналогично, вместо пульсирующей
мягко очерченной вспышки можно анимировать только неоновые контуры объекта. Сравните иллюстрации с примерами анимации вспышки. Эффект с прозрачным ореолом выглядит более утонченным, однако размер файла получается в два раза больше, чем в случае более простого примера с выделением контуров.

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


Создание иллюзии движения

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

Размывка движением (motion blur), которую можно применить в качестве фильтра в большинстве программ редактирования графики, ловко вводит в заблуждение глаз, имитируя несуществующее движение. Еще один замечательный визуальный трюк для показа движения – изменение наклона изображения вперед или назад. Объект с наклоном в направлении движения, выглядит, как ускоряющийся, а наклоненный
назад похож на тормозящий. К другим примерам относятся штрихи, способные во многих случаях заменить размывку движением, или прозрачные следы, подразумевающие так быстро движущийся объект, что его можно видеть в двух местах одновременно.

Применение таких приемов поможет резко снизить число кадров. Например, в нашей анимации применяются эффекты, благодаря которым для создания иллюзии движения потребовалось лишь четыре кадра. Мы добились этого с помощью наклона изображения и наложения фильтра «размывка движением». Размер получившегося файла менее 4 Кбайт.
   
 
Раздел: Прочее / Статьи | Просмотров: 710 | Комментарии (0) »
 

 
Digital Connected World 17562250 - Motion Graphic (Videohive)

Digital Connected World 17562250 - Motion Graphic (Videohive)
No Alpha Channel | Resolution 1920x1080 | Video Encoding Photo JPEG | File Size 292.10 mb
   
 
Раздел: Футажи | Просмотров: 288 | Комментарии (0) »
 

 
Опубликовал:

ВВЕДЕНИЕ

‘GIF’ ™ — это стандарт фирмы CompuServe для определения растровых цветных изображений. Этот формат позволяет высвечивать на различном оборудовании графические высококачественные изображения с большим разрешением и подразумевает механизм обмена и высвечивания изображений. Описанный в настоящем документе формат изображений был разработан для поддержки настоящей и будущей технологии обработки изображений и будет в дальнейшем служить основой для будущих графических продуктов CompuServe.

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

Первый раздел настоящего документа описывает формат данных GIF и его компоненты в приложении к декодерам GIF, вне зависимости от того являются ли они отдельной программой или частью пакета связи. Приложение B относится к декодерам являющимися частью пакетов связи и описывает протокол, необходимый для входа и существования режима GIF и отвечает на ряд специфических вопросов. Глоссарий в приложении A определяет некоторые термины, использованные в документе. Приложение C дает подробное объяснение того, как сами графические изображения пакуются в виде последовательности байтов.

ОБЩИЙ ФОРМАТ ФАЙЛА

Идентификатор GIF
Дескриптор экрана
Глобальная таблица цветов 
Дескриптор изображения 
Локальная таблица цветов 
Растровые данные

Терминатор GIF


Блок закрашенный голубым цветом повторяется от 1 до N раз.

ИДЕНТИФИКАТОР GIF

Наличие в начале файла специальной «подписи» указывает, что последующие данные являются действительно потоком данных изображения в формате GIF. Эта «подпись» состоит из следующих шести символов: GIF87a

Три последних символа ’87a’ могут рассматриваться как номер версии для данного конкретного определения GIF и будут использоваться в дальнейшем в качестве ссылки на документ с описанием GIF в зависимости от номера версии.

ДЕСКРИПТОР ЭКРАНА

Дескриптор экрана описывает общие параметры для всех последующих изображений в формате GIF. Он определяет размеры пространства изображения или требуемого логического экрана, существование информации о таблице цветов и «глубине» экрана. Эта информация запоминается в виде серии 8-битовых байтов, как показано ниже.

Graphics Interchange Format


Ширина и высота логического экрана могут быть больше размеров физического экрана. Способ высвечивания изображений больших, чем размеры физического экрана зависит от реализации и может использовать преимущества конкретного оборудования (например, окна скроллинга в Macintosh scrolling windows). В противном случае изображение будет усечено по краям экрана.

Значение ‘pixel’ также определяет число цветов в изображении. Диапазон значений ‘pixel’ составляет от 0 до 7, что соответствует от 1 до 8 битам. Это транслируется в диапазон от 2 (черно-белые изображения) до 256 цветов. Бит 3 в байте 5 зарезервирован для будущих определений и должен быть нулевым.

ГЛОБАЛЬНАЯ ТАБЛИЦА ЦВЕТОВ

Глобальная таблица цветов является необязательной и рекомендуется для изображений, где требуется точная передача цветов. На существование этой таблицы указывает поле ‘M’ в байте 5 дескриптора экрана. Цветовая таблица может быть также связана с каждым изображением в GIF-файле, что будет описано позже. Однако обычно эта глобальная таблица будет использоваться, из-за ограничений, существующих в настоящее время в доступном оборудовании. Флаг ‘M’ в дескрипторе конкретного изображения обычно равен 0. Если глобальная таблица цветов присутствует, ее определение следует непосредственно за дескриптором экрана. Число элементов цветовой таблицы, следующей за описателем экрана равно 2**(число бит/пиксел), причем каждый элемент состоит из трех байтов, значения которых описывают соответственно относительную интенсивность красного, зеленого и синего цветов. Структура блока цветовой таблицы:

Graphics Interchange Format


Получаемое значение каждого пиксела при высвечивании изображения будет
соответствовать ближайшему доступному цвету из цветовой таблицы дисплея.
Цветовые компоненты представляют собой значение относительной интенсивности от
нулевой (0) до полной (255). Белый цвет может быть представлен как
(255,255,255), черный как (0,0,0) и желтый как (180,180,0). При высвечивании
на дисплеях, которые поддерживают менее 8 бит на цветовую компоненту,
используются старшие биты. При создании элементов цветовой таблицы GIF на
аппаратуре, поддерживающей менее 8 бит на компоненту, значение аппаратной
компоненты должно быть конвертировано в 8-битный формат по следующей формуле:

= *255/(2** -1)

Это обеспечивает точный перевод цветов для всех дисплеев. В случае создания изображения GIF на аппаратуре без возможности цветовой палитры, должна быть создана фиксированная палитра на основе доступных для данного оборудования цветов. Если указано отсутствие глобальной таблицы цветов, цветовая таблица по умолчанию генерируется внутренним образом так, что каждый цветовой индекс равен аппаратному цветовому индексу modulo , где — число доступных цветов на оборудовании.
   
 
Раздел: Прочее / Статьи | Просмотров: 1 351 | Комментарии (0) »
 

 
Particle Explosion - Full HD - Project for After Effects (Videohive)

Particle Explosion - Full HD - Project for After Effects (Videohive)
After Effects Version CS4 - CC 2015 | Resizable | No Plug-in | 33.05 mb
   
 
Раздел: Футажи / Футажи After Effects | Просмотров: 317 | Комментарии (0) »
 

 
App Logo Animation - After Effects Project Template

App Logo Animation - After Effects Project Template
AFTER EFFECTS CC | Resolution: 1920 X 1080 | No plug-in | Size: 53.87 mb
   
 
Раздел: Футажи / Футажи After Effects | Просмотров: 325 | Комментарии (0) »
 

 
Опубликовал:

Футажи свадебные фоны - Какая свадьба без роз

Футажи свадбные фоны - Какая свадьба без роз
mov | 1280х 720 | 265 mb
Автор: moroz
   
 
Раздел: Футажи | Просмотров: 266 | Комментарии (0) »
 

 
Опубликовал:

NEON LIGHT VJ BACKGROUNDS - MOTION GRAPHIC (VIDEOHIVE)

NEON LIGHT VJ BACKGROUNDS - MOTION GRAPHIC (VIDEOHIVE)
Alpha Channel No | Video Encoding Photo JPEG | 529.82 Mb
   
 
Раздел: Футажи | Просмотров: 406 | Комментарии (0) »
 

 
Опубликовал: | Теги: design templates web codes

ThemeForest - CountDown Pro WP Plugin v1.3 - WebSites/Products/Offers - 6305309

ThemeForest - CountDown Pro WP Plugin v1.3 - WebSites/Products/Offers - 6305309


You can use it as CountDown for WebSites, Events and Products launch or as expiry date for Offers and Discounts
   
 
Раздел: Вэб / Скрипты | Просмотров: 381 | Комментарии (0) »
 

 
VIDEOHIVE POP UP BOOK LOGO - After Effects Templates

VIDEOHIVE POP UP BOOK LOGO - After Effects Templates
After Effects Version CS4, CS5, CS5.5, CS6 | No plugins | 1920x1080 | 38.63 Mb
   
 
Раздел: Футажи / Футажи After Effects | Просмотров: 550 | Комментарии (0) »
 

 
Опубликовал: | Теги: design templates web codes

ThemeForest - MADISON II v1.1 - Clean Designers Blog Template - 11373010

ThemeForest - MADISON II v1.1 - Clean Designers Blog Template - 11373010


MADISON II is a blog template designed to be clean and still grab your readers' attention. With different layout options you can show of your content in the traditional blog style or on full width pages! Widget areas in the sidebar, footer and Front Page templates for more customizing! Use MADISON for any type of blog! Keep your readers up to date in style.
   
 
Раздел: Вэб / HTML шаблоны | Просмотров: 289 | Комментарии (0) »
 

  Назад 1 2 3 4 5 Далее  
   
   
Регистрация | Забыли пароль?

Авторизация через соц. сети

 


 
   
  After Effects AI CDR clipart Design EPS Flyer Footages graphic html Jpeg jpg photo Photoshop plugin PNG PSD Scrap script Stock template templates Theme vector Wallpapers Web web template вектор графика дизайн картинки клипарт обои рамка рамки фото фотошоп цветы шаблон
 
 

   

  [email protected]