Дизайн в стиле Web 2.0

 

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

Впервые словосочетание Web 2.0 было употреблено издательством O'Reilly Media, специализирующимся на информационных технологиях в 2004 году. Позже глава издательства Тимоти О'Рейлли сформулировал часть принципов Web 2.0. За прошедшее время сфера Web 2.0 расширилась, вытесняя традиционные Web-сервисы, получившие название Web 1.0.

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

Блоги (интерактивные сетевые дневники) представляют собой один из самых характерных примеров использования принципов Web 2.0. Значительная часть Web-контента создается пользователями, а не владельцами ресурса. Для этого активно используют технологии RSS и FOAF, характерные для Web 2.0. Так же используются тэги (метки, tags) для тематического структурирования контента.

Технология FOAF (Friend Of A Friend) дает пользователю возможность подписаться на новости и материалы тех пользователей, которые находятся в так называемом «списке друзей». Этим самым поощряется общение пользователей Сети. Технология FOAF является одной из важнейших составляющих социальных интернет-сетей.

RSS (Really Simple Syndication или, дословно, «действительно простое объединение (информации)») – это простая и эффективная технология экспорта гипертекста, используемая для создания новостных лент. RSS, как и другие технологии Web 2.0, основан на языке XML (eXtended Markup Language – англ., расширенный язык разметки).

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

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

В этой области широко применяется технология AJAX. AJAX (Asynchronous Javascript And XML – англ., асинхронные Javascript и XML) – технология комбинированного использования языков Javascript и XML для создания динамического содержимого web-ресурсов.
Одной из важных особенностей технологии AJAX является то, что нагрузка по обработке динамических данных ложится на браузер пользователя. При этом обмен данными «сервер – пользователь» сводится к минимуму, снижая затраты на траффик. Подобный подход значительно упрощает использование динамических ресурсов, так как пользователю не нужно перезагружать страницы, чтобы увидеть изменения.

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

 

Графические форматы

Условно, всю компьютерную графику можно разделить на два вида:
  • Растровая графика и;
  • Векторная графика.
Растровая графика - это прямоугольная матрица, состоящая из множества очень мелких неделимых точек (пикселей). Каждый такой пиксель может быть окрашен в какой-нибудь один цвет. Например, монитор, с разрешением 1024х768 пикселей имеет матрицу, содержащую 786432 пикселей, каждый из которых (в зависимости от глубины цвета) может иметь свой цвет. Т.к. пиксели имеют очень маленький размер, то такая мозаика сливается в единое целое и при хорошем качестве изображения (высокой разрешающей способности) человеческий глаз не видит "пикселизацию" изображения. Именно поэтому растровые изображения плохо переносят масштабирование. Увеличение размеров картинки обычно приводит к ухудшению ее качества (проявляется зернистость). Если же требуется сохранить качество при увеличении размеров изображения, за что платят увеличением объема занимаемого места на диске. Наиболее популярный редактор растровой графики – Adobe Photoshop.

В векторной графике изображения описываются математическими формулами. В них элементами являются не пикселы, а объекты (линии, фигуры и т.п.). Например, чтобы описать такой объект, как отрезок прямой линии, требуется указать координаты его начала и конца, толщину и цвет линии. При растровом описании линии нам пришлось бы описывать каждую ее точку, причем чем толще линия, тем больше точек она содержит и тем объемнее ее общее описание. Рисовать картинки от руки в редакторах векторной графики существенно удобнее, чем в растровых. В частности, схемы и чертежи, а также рисунки типа плакатов (т.е. без плавных переходов цветов), несомненно, надо делать с помощью векторных редакторов. Однако они являются не очень хорошими помощниками при создании изображений с качеством фотографий или произведений живописи. Лидер среди векторных редакторов — CorelDRAW, хотя есть множество других векторных графических программ, например, Macromedia FreeHand и Macromedia Flash. Простейший векторный графический редактор входит в состав текстового процессора Word.

Для каждого из видов компьютерной графики (а также в зависимости от приложения в котором разрабатывалось то или иное изображение) существуют специальные форматы.

РАСТРОВАЯ ГРАФИКА

GIF (Graphics Interchange Format)
Формат GIF был разработан в 1987 году компьютерной информационной службой CompuServe. Сейчас этот формат является наиболее используемым форматом в сети Интернет.
Основные преимущества:
  • Малый размер, который достигается ограниченной цветовой гаммой - не более 256 цветов;
  • Прозрачный фон;
  • Анимация.
И еще один немаловажный фактор, то что алгоритм сжатия LZW формата GIF запатентован. Владельцем патента с 1994 года является фирма Unisys, и она начала брать плату с разработчиков, использующих формат GIF.

PNG (Portable Network Graphics)
Плод сообщества независимых программистов - ответная реакция на переход популярнейшего формата GIF в разряд коммерческих продуктов. Формат PNG делает почти все, что и формат GIF, за исключением анимации.
Основные преимущества:
- Лучшее сжатие данных - сжимает растровые изображения не только по горизонтали, но и по вертикали;
- Поддерживает цветные фотографические изображения вплоть до 48-битных включительно 256 уровней прозрачности.
Размер картинки в формате PNG будет меньше, чем у GIF. Но самые мелкие мелочи получатся легче у GIF, потому что в файле изображения PNG около 1 Кб занимает описание палитры цветов, что порой бывает сопоставимо с размером самого изображения.

JPG, JPEG, JFIF (JPEG File Interchange Format)
Для поиска лучшего способа сжатия изображений фотографического качества, две организации по стандартизации – International Telecommunications Union (ITU) и International Organization for Standartization (ISO) – создали Joint Photographic Experts Group (JPEG).
Использует сжатие с "потерями" (lossy compression). При таком сжатии удаляется та информация, которая несущественна для восприятия изображения.

BMP (BitMap)
Самый простой растровый формат BMP является родным форматом Windows. В BMP данные о цвете хранятся только в модели RGB, то есть этот формат создан для использования на экране.

TIFF, TIF (Tagged Image File Format)
Изначально разработан компанией Aldus для своего графического редактора PhotoStyler. Как универсальный формат для хранения растровых изображений, TIFF достаточно широко используется, в первую очередь, в издательских системах, требующих изображения наилучшего качества. Благодаря своей совместимости с большинством профессионального ПО для обработки изображений, формат TIFF очень удобен при переносе изображений между компьютерами различных типов (например, с PC на Маc и обратно).

PSD (Photoshop)
Формат Adobe Photoshop, отличается возможностью хранения слоев (layers). Удобен только для обработки в Photoshop и для хранения исходника для редактирования в будушем.

ВЕКТОРНАЯ ГРАФИКА

CDR (CorelDRAW)
Формат популярного CorelDRAW, являющимся неоспоримым лидером в классе векторных графических редакторов на платформе РС. Имея сравнительно невысокую устойчивость и проблемы с совместимостью файлов разных версий формата.

AI (Adobe Illustrator)
Являясь частью семейства Adobe, поддерживают практически все программы, так или иначе связанные с векторной графикой. Лучший посредник при передаче изображений из одной программы в другую, с РС на Macintosh и наоборот. Отличается наибольшей стабильностью и совместимостью с языком PostScript, на который ориентируются практически все издательско-полиграфические приложения.

Другие форматы:

SWF (ShokWaveFlash)
Формат Flash, продукт компании «Macromedia», позволяющий разрабатывать интерактивные мультимедийные приложения. Сфера использования Flash различна, это могут быть игры, веб-сайты, CD презентации, баннеры и просто мультфильмы. При создании продукта можно использовать медиа, звуковые и графические файлы, можно создавать интерактивные интерфейсы и полноценные веб-приложения с использованием PHP и XML.

SVG (Scalable Vector Graphics)
Стандарт, рекомендованый World Wide Web Consortium для описания с помощью XML markup двумерной векторной и комбинированной векторно-растровой графики.
В браузере SVG-графика отрисовывается с помощью растровых механизмов. Поддержка полупрозрачностей в каждом слое, градиенты линейные, градиенты радиальные, визуальные эффекты (тени, отмывки, блестящие поверхности, текстуры (фактуры), паттерны любой конструкции, символы любой сложности).
SVG - это формат для двухмерной векторной графики - так определено в спецификации, но с помощью добавления скрипта (а именно JavaScript) внутрь SVG файла можно создавать трехмерные анимированные изображения.
В SVG может быть встроено растровое изображение, к которому как и к любому другому объекту в SVG может быть применена трансформация, прозрачность и т.д.

ICO (Icon)
Иконка, в Интернете используется как символ сайта, логотип. Например, сейчас вы видите красный квадратик в адресной строке. Если вы добавите страничк нашго сайта в избранное (favorit), радом со ссылкой появится наша иконка, которая поможет быстро визуально находит ссылку на сайт. Собственно, это и есть главное предназначение иконки в Интернете.

EPS (Encapsulated PostScript)
Самый надежным и универсальным способом сохранения данных. Он использует упрощенную версию PostScript не может содержать в одном файле более одной страницы, не сохраняет ряд установок для принтера. Как и в файлы печати PostScript, в EPS записывают конечный вариант работы, хотя такие программы, как Adobe Illustrator и Adobe Photoshop могут использовать его как рабочий. EPS предназначен для передачи векторов и растра в издательские системы, создается почти всеми программами, работающими с графикой.

 

 

Цветовые модели

Ниже пойдет речь о найболее рейтинговых цветовых моделях с которыми мы сталкиваемся занимаясь графическим и веб-дизайном - цветовых моделях RGB и CMYK.

Во многом утрируя, можно сказать что цветовая модель RGB предназначина для веб (работа с электронными средствами отображения - мониторами, дисплеями), а, в свою очередь, модель CMYK для полиграфии, "реального", off-line отображения той или иной информации.

Итак, по-подробней.

 

Цветовая модель RGB 

RGB (аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий) — аддитивная цветовая модель, описывающая способ синтеза цвета. В российской традиции иногда обозначается как КЗС.

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

Изображение в данной цветовой модели состоит из трёх каналов. При смешении основных цветов (основными цветами считаются красный, зелёный и синий) — например, синего (B) и красного (R), мы получаем пурпурный (M magenta), при смешении зеленого (G) и красного (R) — жёлтый (Y yellow), при смешении зеленого (G) и синего (B) — циановый (С cyan). При смешении всех трёх цветовых компонентов мы получаем белый цвет (W).

В телевизорах и мониторах применяются три электронные пушки (светодиода, светофильтра) для красного, зеленого и синего каналов.

Цветовая модель RGB имеет по многим тонам цвета более широкий цветовой охват (может представить более насыщенные цвета), чем типичный охват цветов CMYK, поэтому иногда изображения, замечательно выглядящие в RGB, значительно тускнеют и гаснут в CMYK.

 

Цветовая модель CMYK 

CMYK - (CMYK: Cyan, Magenta, Yellow, Key color) — субтрактивная схема формирования цвета, используемая прежде всего в полиграфии для стандартной триадной печати. Схема CMYK, как правило, обладает сравнительно небольшим цветовым охватом.

По-русски эти цвета часто называют так: голубой, пурпурный, жёлтый; но профессионалы подразумевают cyan, magenta и yellow (о значении K см. далее). Печать четырьмя красками, соответствующими CMYK, также называют печатью триадными красками.

Ясно, что цвет в CMYK зависит не только от спектральных характеристик красителей и от способа их нанесения, но и их количества, характеристик бумаги и других факторов. Фактически цифры CMYK являются лишь набором аппаратных данных для фотонаборного автомата или CTP и не определяют цвет однозначно.

Так, исторически в разных странах сложилось несколько стандартизованных процессов офсетной печати. Сегодня это американский, европейский и японский стандарты для мелованной и немелованной бумаг. Именно для этих процессов разработаны стандартизованные бумаги и краски. Для них же созданы соответствующие цветовые модели CMYK, которые используются в процессах цветоделения. Однако, многие типографии, в которых работают специалисты с достаточной квалификацией (или способные на время пригласить такого специалиста) нередко создают профиль описывающий печатный процесс конкретной печатной машины с конкретной бумагой. Этот профиль они предоставляют своим заказчикам.

Почему в CMYK четыре цвета, а в RGB три

Несмотря на то что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги и др.) такой подход обычно неудовлетворителен. Основные причины использования дополнительного чёрного пигмента таковы:
  • На практике смешение реальных пурпурного, голубого и жёлтого цветов даёт скорее грязно-коричневый или грязно-серый цвет; триадные краски не дают той глубины и насыщенности, которая достигается использованием настоящего чёрного. Так как чистота и насыщенность чёрного цвета чрезвычайно важна в печатном процессе, в печатный процесс был введён ещё один цвет.
  • При выводе мелких чёрных деталей изображения или текста без использования чёрного пигмента возрастает риск неприводки (недостаточно точное совпадение точек нанесения) пурпурного, голубого и жёлтого цветов. Увеличение же точности печатающего аппарата требует неадекватных затрат.
  • Смешение 100 % пурпурного, голубого и жёлтого пигментов в одной точке в случае струйной печати существенно смачивает бумагу, деформирует её и увеличивает время просушки.
  • Чёрный пигмент (в качестве которого, как правило, используется сажа) существенно дешевле остальных трёх.



 

Допечатная подготовка макета

Извините, статья находится в режиме редактирования.

Зайдите на страничку позже. 

 
Наши последние работы
Статьи
Карта
Share |

Студия «reDesign»

tel.: +7-911-135-81-68

e-mail: welcome@redesign-group.ru