Главная  |  RSS 2.0
Деньги  |  Бизнес  |  Культура  |  Здоровье  |  Красота  |  Мода  |  Наука  |  Интернет  |  Недвижимость  |  Туризм  |  Интересное  |  Полезное  |  Рецепты  |  Авто  |  Фильмы  |  Видео  |  Фото
Поиск по сайту:Расширенный поиск по сайту
Регистрация на сайте
Авторизация


Новое на сайте
» «Каратэ-пацан»: Я бы каратистом стал, пусть меня научат?
Во-первых, Джейден Смит – это сын Уилла Смита, который выступает здесь не только в качестве папы, но и продюсера фильма. Во-вторых, «Каратэ-пацан» – это ремейк одноименной (переводимой у нас как ...

» Как бороться с плохим настроением?
Плохое настроение – у кого оно не бывает? Все мы с ним как-то боремся, и в большинстве случаев довольно успешно. Женщинам, наверное, проще жить на этом свете. Мы более мужчин подвержены перепадам ...

» Для чего ребенок показывает язык?
«Мой сын начал показывать язык. Он вроде бы и не дразнит меня. Не показывает его за спиной, всегда делает это в глаза. Беспокоит, что он уже большой пятилетний мальчик, должен понимать, что ...

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

» Что смотреть в выходные 25-26 сентября?
По сравнению со шквалом кинопремьер первой половины сентября, среди которых, правда, смотреть, по большому счету, было нечего, эта кинонеделя обещает быть достаточно спокойной. На экраны российских ...



Архив новостей



» Какие графические форматы используются в web-дизайне? - Технологии и интернет
13-03-2010 | рубрика: Технологии и интернет | просмотров: 1655
В настоящее время существует достаточно большое количество различных форматов графических файлов. Тем не менее, все их можно разделить на две группы. Это файлы, хранящие векторную графику и файлы, хранящие растровую графику.

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

Растровая графика – это когда изображение хранится в виде маленьких точек – пикселей. Соответственно качество ...
такой картинки ограничивается двумя факторами: это собственно размер самой картинки в пикселях, и разрешением изображения – то есть количеством пикселей на единицу длины (наиболее распространено пиксели на дюйм). Файлы, хранящие растровую графику, это jpg, gif, bmp, tiff, png, psd и прочие.

Векторная графика – это когда изображение хранится в виде массива чисел, описывающих построение изображения в виде кривых и ключевых точек-вершин. Форматы векторной графики – swf, cdr, max, ai, частично pdf.

В практике web графики в основном используются два формата растровой графики – jpeg и gif, и один формат векторной графики – swf. Гораздо реже используется формат png.

Форматы jpeg и gif различаются различными алгоритмами сжатия изображения. Так как в web размер файла до сих пор играет весьма существенное значение в силу ряда причин, следовательно, малый вес графического файла существенно повышает скорость загрузки изображения. Для разных «видов» картинок подходит тот или иной формат графики.

Определение необходимого формата – основное умение web-дизайнера. Для фотографий, портретов, картинок большого размера, насыщенных сложными деталями – лучше всего подходит формат jpeg.
Алгоритм сжатия этого формата работает таким образом, что при уменьшении «веса» картинки, а следовательно качества, изображение как бы «размывается», становятся плохо различимы четкие переходы между цветами, и появляются паразитные цветные пиксели как побочный эффект действия алгоритма. Степень компрессии файла определяется каждый раз дизайнером исходя из его нужд, но оптимальным соотношением размер/качество изображения считается процент сжатия, равный 65.

Формат gif наилучшим образом подходит для изображений небольшого размера, там где необходима прозрачность (альфа-канал), и для анимированной растровой графики.
Алгоритм сжатия этого формата основывается на том, что изображению задается фиксированная цветовая палитра (от 2 до 256 цветов), а все близкие оттенки выкидываются либо заменяются соседними цветами. Также алгоритм просчитывает изображение линиями – слева направо, и хранит информацию не о каждом пикселе в отдельности, а считает, сколько пикселей одинакового цвета стоят в ряд, и сохраняет информацию только о цвете и количестве пикселей. Это существенно снижает вес файла. Нетрудно заметить, что вертикальный градиент (сверху-вниз) будет весить в таком случае намного меньше градиента горизонтального (слева-направо). Это следует учитывать при создании изображений, особенно при создании анимированных баннеров, где вес складывается еще и из количества кадров и идет буквально война за каждый байт.

Формат png используется крайне редко. Его отличие от формата gif в том, что png позволяет хранить больше информации о файле. В частности, информацию об альфа-канале. В формате gif каждый отдельный пиксель может быть либо полностью прозрачным, либо полностью непрозрачным. Это накладывает ограничения на использование прозрачных переходов в прозрачность, из за чего файлы gif с прозрачностью зачастую выглядят «рваными» по краям. Но, в связи с большим весом png файлов, их практически не используют, а применяют различные визуальные хитрости в формате gif, в частности добавление «переходных» пикселей по краям изображения.

При именовании файлов следует придерживаться простых правил. Во-первых, следует избегать как бессмысленных, так и «говорящих» названий. Название файла должно сразу определять его место в структуре веб-страницы. То есть, если это картинка к статье, то она должна располагаться в папке articles и ее названием служит id статьи. Если это позиция в каталоге, то в соответствующей папке (items, groups) картинка должна иметь названием ID группы, подгруппы или товара.

В то же время, если, к примеру, на сайте очень редко пишутся статьи, можно не вводить дополнительные папки, но тогда файл должен по названию однозначно ассоциироваться с данным разделом. Это можно сделать к примеру добавлением слова news или art перед id картинки (к примеру news-34.jpeg). Если к одному id относится несколько картинок разного размера – необходимо добавлять после id картинки расширение, обозначающее размер (для больших картинок – b, для маленьких – s) (пример 38-s.gif, art-08-b.jpeg). Для нескольких картинок одного размера, можно ввести порядковые номера (пример: art08-b_01.gif).

При именовании картинок, формирующих оформление сайта, следует придерживаться следующих обозначений: top – для шапки сайта, bottom – для подвала сайта, but – для различного рода кнопок, ico – для иконок, img или pic – для прочих картинок оформления с добавлением порядкового номера в конце.

Основными программами для работы с изображениями у дизайнера служат Adobe Photoshop и Adobe ImageReady для растровой графики; Corel draw и Macromedia Flash для векторной. Также используется порой для векторной графики программа Adobe illustrator – но это уже дело вкуса дизайнера, ибо программы по своей сути идентичны, и обладают схожим функционалом. Все продукты фирмы Adobe (а к ним в последнее время относится и Flash), обладают похожим инструментарием и горячими клавишами, что упрощает работу в разных программах при переходе от одной к другой.

Формат flash – один из самых «модных» и популярных в вебе. Этому служат несколько его особенностей. Во-первых, за счет того, что это векторный формат, возможно создание относительно сложных и красочных изображений при достаточно малом весе файла. Во-вторых, за счет использования встроенного скриптового языка Action Script во flash есть возможность создавать интерактивные баннеры, приложения, писать различные сценарии, создавать онлайн системы расчета, игры, отдельные приложения и т.п.



Опрос
Оцените работу сайта

Полезный сайт
Неплохой сайт
Сойдет... но...
Видел и получше
Не понравился


Яндекс.Новости
» Fatal Error
Fatal Error: could not open XML input (http://news.yandex.ru/index.rss)



Главная страница  | Обратная связь
© 2006 - Digest-News.ru, все права защищены. Design by DLETemplates.
© 2006 - 2010 SoftNews Media Group All Rights Reserved, Powered by DataLife Engine.