Веб графика: Веб-графика — Компьютерная графика

Содержание

Веб-графика — Компьютерная графика

Веб-графика используется для интернет-ресурсов. 

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

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

Другая немаловажная особенность графики для Web заключается в довольно жестких ограничениях, накладываемых на объем файлов. И это связано не столько с экономией дискового пространства компьютера, сколько с пропускной способностью каналов связи. В настоящее время подавляющее большинство посетителей Интернета используют подключение к серверу через модем. Сегодня наиболее производительные модемы обеспечивают скорость передачи данных 57 600 бит/с (около 6 Кбайт/с). Многие используют модемы производительностью 33 600 бит/с и ниже. Если Web-страница загружается в браузер дольше 10 с. это раздражает посетителей, которые могут уйти по другому адресу, так и не дождавшись окончания загрузки. Отсюда следует, что надо стремиться к тому, чтобы Web-страница не превышала по объему 50—60 Кбайт. Для графических изображений это довольно серьезное ограничение, требующее от дизайнеров особых знаний и умения. В частности, нужно хорошо разбираться в форматах файлов и способах монтирования изображений в Web-страницу.

Третья особенность графики состоит в том, что в мире встречаются компьютеры, построенные, как говорится, на различных платформах. Так, существуют компьютеры на платформе PC и на платформе Macintosh. Мониторы этих компыотеров имеют различную яркость. Если этого не учитывать, то одна и та же картинка, великолепно выглядящая на одном мониторе, может потерять свою выразительность на другом. Поэтому художник, занимающийся Web-дизайном или просто публикующий свои произведения и Интернете, должен учитывать это обстоятельство и уметь настраивать свой монитор.

Графика в Веб: перспективы и тренды

Рассмотрены перспективы развития графических технологий, ориентированных на использование в среде World Wide Web. Анализ проведен с использованием инструментария Google Trends, все выводы субъективны.

Цель этого небольшого исследования — в попытке дать ответ на вопросы студентов-АСУшников о выборе графических технологий для реализации учебных проектов по дисциплине «Веб-программирование». Исследование проводилось с использованием статистики по запросам из поисковой системы Google и инструментария Google Trends. Для анализа были использованы искусственные запросы соответствующей тематики (умозрительно, интерес к этим запросам могли проявлять профессиональные веб-разработчики).

Графические технологии WWW

Начнем с выяснения интересов к графическим веб-технологиям в целом. Для анализа были выбраны Flash, SilverLight и HTML5. Поскольку запрос по ключевому слову «flash» явно избыточный (обычные пользователи все еще ищут flash-приложения), то он был был заменен на «actionscript».

Результат выборки приведен на рис. 1.

Рис. 1. Сравнение популярности технологий Flash, SilverLight и HTML5

Рассматриваемые технологии представляют сопоставимые возможности, поэтому отметим принципиальные отличия:

  • Flash (АctionScript) требует наличия браузерного плагина.
  • SilverLight имеет кросс-платформенные ограничения и тоже требует плагина.
  • HTML5 является платформонезависимым и выполняется непосредственно в браузере.

Среди причин снижения интереса к технологии Flash — нарекания к ее безопасности и заявления ведущих разработчиков об отказе в ее поддержке на мобильных устройствах.

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

В свою очередь, все основные браузеры портированы на основные платформы (MS IE как бы тоже, через wine) и поддерживают HTML5 (а также JavaScript, CSS и технологии на основе XML).

Игровая индустрия и пользователи онлайновых игр, похоже, проявляют наибольший интерес к графическим средствам HTML5. Чтобы убедиться в этом, попробуйте самостоятельно сравнить в Google Trends динамику популярности запросов «html5 games» и «html5 apps».

2D-графика

Если основные вопросы встраивания готовых изображений в веб-страницу были решены еще на заре WWW, то возможности рисования графических примитивов прямо в веб-странице появились только в HTML5. Итак, SVG и HTML5 Canvas:

  • SVG — векторный графический формат на основе XML, появившийся давно, но до HTML5 довольно редко использовавшийся в Веб.
  • HTML5 Canvas — контейнер, представляющий графический контекст, в котором можно рисовать из клиентского javascript-приложения.

Оба решения выполняют одну задачу, но существенно отличаются. SVG добавляет множество узлов в объектную модель документа (DOM), что может привести к серьезным затруднениям при ее обработке. HTML5 Canvas добавляет в DOM только один узел и это большой плюс с точки зрения эффективности.

К каждому примитиву SVG можно привязать обработку событий (onClick, onMove и т.п.), в случае же с Canvas это представляет серьезные трудности, решаемые, как правило, с помощью специальных библиотек (KineticJS, EaselJS, Paper.js и т.п.). Внешний файл SVG можно внедрить в веб-документ с помощью тега object, с Canvas этого не получится. Тем не менее, график на рис. 2 говорит о том, что больший интерес сообщество проявляет именно к HTML5 Canvas. Возможная причина — 3D-контекст, поддерживаемый Canvas и позволяющий отрисовывать трехмерные сцены в окне браузера.

Рис. 2. Распределение интересов: SVG vs HTML5 Canvas

3D-графика

HTML5 Canvas поддерживает два различных контекстах: 2D и WebGL (3D). Контекст WebGL позволяет создавать интерактивные 3D-приложения на JavaScript и выполнять их в современных браузерах без использования плагинов. За счёт использования низкоуровневых API OpenGL, часть кода WebGL может выполняться непосредственно на видеокартах. График на рис. 3 показывает, что несмотря на сообщения о проблемах с безопасностью этой технологии, выявленных весной 2011 года, она, тем не менее, вызывает довольно высокий интерес у сообщества.

Рис. 3. 3D-графика в веб: WebGL

Учитывая, что реальной альтернативы пока нет (Flash и SilverLight уже рассматривали ранее), разработчикам трехмерных веб-приложений остается осваивать API WebGL и/или использовать специализированные библиотеки (CubicVR.js, C3DL, Tree.js и подобные).

Резюме

Технология Flash утрачивает былую популярность. SilverLight, помимо плагина, требует .NET Framework и толком не работает нигде, кроме Windows. На момент написания этой заметки HTML5 является стандартом «де-факто» и представляет средства разработки как 2D-, так и 3D-приложений. Следовательно, при разработке браузерных приложений, предполагающих программную отрисовку графики, имеет смысл использовать именно HTML5 и его возможности.

Анатольев А.Г., 20.02.2017

Постоянный адрес этой страницы:

графика — это.

.. Что такое веб-графика?
  • графика — видеографика, монотипия, письмо, письменность Словарь русских синонимов. графика сущ., кол во синонимов: 7 • веб графика (1) • …   Словарь синонимов

  • Веб 2.0 — Для улучшения этой статьи желательно?: Переработать оформление в соответствии с правилами написания статей. Викифицировать статью. Найти и оформить в виде сносок ссылки на ав …   Википедия

  • Палитра (компьютерная графика) — Глубина цвета битовое изображение 8 битная шкала серого 8 битный цвет 15/16 bit: Highcolor 24 bit: Truecolor 30/36/48 bit: Deep Color См. также Цветовая модель RGB Цветовая модель CMYK Цветовая палитра Видимое излучение Цвета в Web (Цвета HTML) У …   Википедия

  • Градиент (компьютерная графика) — Эта статья о виде заливки в компьютерной графике; о математической характеристике см.: Градиент. Логотип, созданный с применением градиента. Градиент  вид заливки в компьютерной графике …   Википедия

  • позиционирование веб-сайта ОКОИ — Вдобавок к особым посланиям ОКОИ, позиционирование сайта ОКОИ должно принимать во внимание общую философию Олимпийского движения и особые ценности, стоящие за Олимпийским брендом. А также его следует использовать в качестве операционного средства …   Справочник технического переводчика

  • Латинская графика — Латинский алфавит Тип: консонантно вокалическое Языки: Первоначально латинский, языки Западной и Центральной Европы, некоторые языки Азии, многие языки Африки, Америки, Австралии и Океании Место возникновения: Италия Территория …   Википедия

  • Inkscape — Inkscape …   Википедия

  • ГрафиКон — крупнейшая международная конференция по компьютерной графике, машинному зрению, обработке изображений и видео на территории бывшего СССР, ежегодно проводящаяся в России. ГрафиКон является площадкой для обмена опытом между признанными учеными… …   Википедия

  • Графикон

    — крупнейшая международная конференция по компьютерной графике, машинному зрению, обработке изображений и видео на территории бывшего СССР, ежегодно проводящаяся в России. Графикон является площадкой для обмена опытом между признанными учеными… …   Википедия

  • Crysis — Разработчик …   Википедия

  • Web-графика (Реферат) — TopRef.ru

    web-графика.

    Содержание

    Введение 3

    1. World Wide Web 4

    1.1. Концепция WWW 4

    2. Создание Web-страницы с помощью языка HTML 5

    2.1 Язык HTML 5

    2.2. Структура HTML документа 5

    3. Инструментарий для создания Web-страниц 7

    3.1 HTML-редакторы 7

    3.2 Графические редакторы 8

    А) Редакторы растровой графики 9

    B) Редакторы векторной графики 9

    4. Создание WEB-страниц в WORD’97 10

    4.1 Способы создания WEB-страниц в WORD’97 10

    4.2 Создание маркированных и нумерованных списков

    10

    4.3 Горизонтальные линии 11

    4.4 Добавление фона 11

    4.5 Работа с таблицами 11

    4.6 Работа с рисунками 11

    4.7 Создание гиперссылок 11

    4.8 Вставка видеозаписи в Web-страницу 12

    Заключение 13

    Список используемой литературы 14

    Введение

    World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация.

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

    Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

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

    Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы.

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

    Также в данной работе мною рассмотрены основы языка программирования Web-страниц – HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления.

    1. World Wide Web

    1.1. Концепция WWW

    Так что же такое World Wide Web, или, как говорят в просторечии, WWW, the Web, или еще более простое — 3W? WWW — это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

    Распределенная информационная система: информация сохраняется на огромном великом множестве так называемых WWW-серверов (servers). То есть компьютеров, на которые установленное специальное программное обеспечение и которое объединенные в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который сохраняет файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol, сокращенно — HTTP.

    Мультимедиа: информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

    Гипертекст: информация в WWW представляется в виде документов, любой из которых может содержать как внутренние перекрестные ссылки, так и ссылку на другие документы, которые сохраняются на том же самом или на любом другом сервере.

    Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделанна ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построенна в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

    Итак, Web-страница может содержать стилизованный и форматований текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. Об языке HTML будет детально рассказано в следующем разделе, поскольку без знания основ этого языка невозможно создать Web-страницу для публикации в WWW.

    2. Создание Webстраницы с помощью языка HTML

    2.1 Язык HTML

    Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language — язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.

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

    Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

    Работа по HTML — это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

    HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

    Веб-шаблоны | HTML5 шаблоны сайтов

    Template Monster — маркетплейс цифрового дизайна

    TemplateMonster — это масштабный и постоянно растущий маркетплейс, где вы можете найти высококачественные цифровые продукты, соответствующие последним веб-стандартам. Коллекция продуктов включает в себя широкий выбор шаблонов веб-сайтов, подходящих для всех видов специализированных проектов, малых или крупных компаний, стартапов и любого другого бизнеса, которым вы занимаетесь. Существуют премиальные и бесплатные дизайны веб-сайтов, которые вы можете скачать для своего творческого веб-проекта. Маркетплейс включает шаблоны веб-сайтов на основе Bootstrap, готовые решения HTML5 и CSS3, шаблоны сайтов, загруженные с помощью конструктора веб-сайтов, и многое другое.

    Мы любим WordPress

    TemplateMonster маркетплейс также включает широкий выбор CMS и WordPress тем. Готовые темы для блогов и бизнеса отличаются дизайном и стилем. Большинство из них адаптивны и полностью настраиваемы. В нашем магазине WordPress вы можете найти множество ярких шаблонов для билдера Elementor, а также WordPress плагины и темы WooCommerce.

    Электронная коммерция — наша страсть

    Если вам нужны готовые решения для разработки проектов электронной коммерции, на маркетплейсе представлены темы интернет-магазинов для всех популярных платформ. Таких как Shopify, Magento, PrestaShop, OpenCart, VirtueMart, MotoCMS eCommerce и других. Каждый шаблон интернет-магазина создается с учетом новейших технологий веб-разработки. Готовые дизайны электронной коммерции представляют собой профессиональные комбинации дизайна и функциональности. В них есть все основные элементы, необходимые для создания веб-сайтов, ориентированных на конверсию. Пакеты загрузки включают варианты корзины, готовые страницы продуктов и категорий, удобные варианты навигации, расширенные параметры поиска, фильтры и другие функции, которые выделяют темы eCommerce на маркетплейсе TemplateMonster среди конкурентов.

    Захватывающая графика и презентации

    На маркетплейсе TemplateMonster вы найдете широкий выбор высококачественной графики , которая может добавить впечатляющей визуальной привлекательности вашему сайту. Мы предлагаем коллекции иконок и логотипов, потрясающие элементы пользовательского интерфейса, анимированные баннеры, шрифты, эффекты и т. д. Мы предлагаем все, что вам нужно, чтобы выделить ваш бренд и создать корпоративный стиль. Кроме того, у нас есть потрясающие шаблоны презентаций для PowerPoint, Keynote и Google Slides, а также визуальные эффекты для маркетинговых кампаний.

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

    Графика в web-дизайне » СтудИзба

    Графика в web-дизайне

     

    Web-страница мертва без графики. Графические изображения применяются для иллюстрации текстов уже много столетий. Еще на первых рукописных пергаментных свитках, обнаруженных учеными-археологами в руинах городов древности, были найдены сделанные рукой давно ушедших в небытие художников рисунки, несущие как пояснительную, так и чисто декоративную функцию. С изобретением книгопечатания иллюстрации стали неотъемлемой частью практически любых книг, не только художественных, но и научных. Пройдя нелегкий путь от многостраничных рукописей до первых книг, отпечатанных на типографских машинах, во второй половине XX века носители информации обрели еще одну форму, на сегодня самую удобную для хранения и представления человеческих знаний — электронную, перенеся с собой в мир двоичных чисел и графику. А с появлением сети Интернет, позволившей сделать эту информацию доступной для всего человечества, графические иллюстрации, сопровождающие текст, обрели свое второе рождение, поскольку автор каждого сетевого ресурса может сам выбирать для своего проекта любое оформление, соответствующее его эстетическим вкусам.

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

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

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

     

    Сетевые графические форматы

    Как говорили И. Ильф и Е. Петров, «статистика знает все». Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи со Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский броузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера,   занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90 % всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.

      GIF

    В далеком 1978 году двое израильских исследователей  Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.

    Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.

    Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.

    Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком — голубым. Информация об изображении в файле стандарта GIF записывается построчно  то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне. Вот они.

    ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с   большим количеством цветов и цветовых переходов используется стандарт JPEG.

    В упрощенном виде данный закон «web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.

    ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.

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

    Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в броузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.

    СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.

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

      JPEG

    JPEG (Joint Photographic Experts Group) — графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) — для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень — собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8×8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация — менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.

    Из всего сказанного можно сделать вполне очевидное заключение: JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило.

    ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».

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

    Существует несколько разновидностей стандарта JPEG. Среди них — формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG — возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.

    СОВЕТ При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.

      PNG

    Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics — PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.

    PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.

    Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения   web-страниц на компьютерах от различных производителей.

    Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, и Netscape Communicator.


     

    %d0%b2%d0%b5%d0%b1 %d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%b0 PNG, векторы, PSD и пнг для бесплатной загрузки

  • Мемфис дизайн геометрические фигуры узоры мода 80 90 х годов

    4167*4167

  • поп арт 80 х патч стикер

    3508*2480

  • аудиокассета изолированные вектор старая музыка ретро плеер ретро музыка аудиокассета 80 х пустой микс

    5000*5000

  • поп арт 80 х патч стикер

    3508*2480

  • Мемфис шаблон 80 х 90 х годов стилей фона векторные иллюстрации

    4167*4167

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    2292*2293

  • мемфис бесшовной схеме 80s 90 все стили

    4167*4167

  • дизайн плаката премьера фильма кино с белым вектором экрана ба

    1200*1200

  • Мемфис бесшовные модели 80 х 90 х стилей

    4167*4167

  • 80 основных форм силуэта

    5000*5000

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • поп арт 80 х патч стикер

    3508*2480

  • 80 е брызги краски дизайн текста

    1200*1200

  • ба конфеты шоколад

    800*800

  • рисованной радио 80 х

    1200*1200

  • поп арт 80 х патч стикер

    3508*2480

  • Элементы рок н ролла 80 х

    1200*1200

  • 80 летнего юбилея векторный дизайн шаблона иллюстрация

    4083*4083

  • 12 7 84 clean

    2000*2000

  • чат комментарий образование синий значок на абстрактных облако сообщение

    5556*5556

  • витамин b3 ниацин вектор витамин золото масло таблетки значок органический витамин золото таблетки значок медицина капсула золотое вещество для красоты косметическое здоровье промо реклама дизайн 3d комплекс витаминов иллюстрация

    5000*5000

  • поп арт 80 х патч стикер

    2292*2293

  • ма дурга лицо индуистский праздник карта

    5000*5000

  • ретро стиль 80 х годов диско дизайн неон плакат

    5556*5556

  • Ретро мода неоновый эффект 80 х тема художественное слово

    1200*1200

  • Мода цвет 80 х годов ретро вечеринка слово искусства

    1200*1200

  • Диско вечеринка в стиле ретро 80 х art word design

    1200*1200

  • 80 х годов ретро слово градиент цвета искусства

    1200*1200

  • вектор поп арт иллюстрацией черная женщина шопинг

    800*800

  • Ретро ТВ игра 80 х годов в стиле арт дизайн

    1200*1200

  • Модный стиль ретро 80 х годов дискотека тема искусства слово

    1200*1200

  • Мода стерео ретро эффект 80 х годов тема искусства слово

    1200*1200

  • Рождество 80 х годов ретро пиксель

    9449*5315

  • Тенденция персонажа мультфильма 80 х годов

    2000*2000

  • в первоначальном письме ба логотипа

    1200*1200

  • плавный руки нарисованная мемфис модный хипстер 80 х 90 х годов творческих детей рисовать

    5000*5000

  • 80 е в стиле ретро ​​мода цвет градиент арт дизайн

    1200*1200

  • ТВ игра 80 х неоновый эффект слово дизайн

    1200*1200

  • 80 х годов мода цвет неоновый эффект слово дизайн

    1200*1200

  • 80 х годов поп арт мультфильм банановая наклейка

    8334*8334

  • милая ретро девушка 80 х 90 х годов

    800*800

  • Ретро музыка вечеринка 80 современный стиль искусства слова

    1200*1200

  • Градиент ретро 80 х годов дискотека тема слово искусство

    1200*1200

  • Ретро стиль 80 х годов вечеринка арт дизайн

    1200*1200

  • ТВ игра 80 х в стиле ретро

    1200*1200

  • Ретро стиль 80 х вечеринка тема слово дизайн

    1200*1200

  • Ретро мода 80 х градиент цвета художественного слова

    1200*1200

  • листов для веб-флексопечати, негативов на пленках, быстрых цифровых пластин и допечатного дизайна — О нас | Web Graphics, Inc.

    О компании Web Graphics, Inc.

    Основана в 1996 году Риком Партином. Мы открыли наши двери с целью предоставления дизайнерских работ и печатных форм для флексографской индустрии Среднего Запада. Нашей целью было и остается «сделать все правильно» с первого раза. Мы ценим наших клиентов и считаем многих хорошими друзьями. Мы здесь, чтобы удовлетворить ваши потребности в допечатной флексографии, и точка.Мы можем взять на себя ваш проект от начальной концепции и этапа проектирования до готового художественного файла или негативов пленки и, наконец, качественных цифровых пластин. Если бы у нас была возможность, для нас было бы честью стать частью вашей команды.

    Web Graphics предлагает печатные формы по отличной цене. Мы полностью нацелены на производство качественных произведений искусства, «дружественных к флексографии». Это означает, что создание, репродукция и верстка произведений искусства осуществляется с учетом процесса флексопечати. Мы хотим, чтобы пресса наших клиентов проходила гладко, от установки до завершения.Ловушки и выходы за обрез настраиваются в соответствии со стандартами флексографской промышленности или изменяются в соответствии с вашими индивидуальными требованиями. Мы знаем, что вам нужны пластины, которые выстраиваются быстро и легко, чтобы не тратить время и материалы. Продукция и услуги допечатной подготовки для печати Webflexo — это то, что мы делаем лучше всего.

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

    Мы можем помочь вашей полиграфической продукции привлечь внимание, которого она заслуживает. Проще говоря, мы можем помочь вам стать более надежным принтером.Свяжитесь с нами сегодня, чтобы получить конкурентное ценовое предложение, которое поможет вашему проекту двигаться в правильном направлении. В Web Graphics: «Мы делаем все правильно».

    • Флексографский дизайн и допечатная подготовка с использованием современных компьютеров Apple с новейшим программным обеспечением Adobe & Esko Artwork Systems для флексографских форм. Мы можем пересмотреть существующую графику или создать совершенно новую линейку продуктов для этикеток, логотипов, знаков, гибкой упаковки и многого другого.

    • Производство аналоговых и цифровых печатных форм , с большими системами изготовления печатных форм, способными обрабатывать до 35 флексографских форм.5 «X 47,25» и аналог до 40 «X 50». Мы используем широкий спектр фотополимерных пластин, готовых к печати; Dupont Cyrel®, MacDermid®, Nyloflex®.

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

    Заказать цифровые флексографские пластины, негативы на пленку и допечатный дизайн этикеток и др. — Заказать | Web Graphics, Inc.

    PQS
    Поиск предметов
    EXL
    UXL
    TDR

    Эпос
    Атлас
    Flexcor
    Синий
    Кор
    Другой:

    Толщина:

    067
    107
    187

    Другой:

    Die Cut
    Butt Cut

    Шаг шестерни:

    1/8 CP
    32 двойное проникновение
    10 мил

    Пластина искажения:

    да
    Нет

    Угловой радиус:

    Повторитель цилиндра:

    Общее количество цветов:

    Общее количество пластин:

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

    Направление пластины вокруг цилиндра:

    Слева направо
    Сверху вниз

    Через: Разрыв между:

    Вокруг: Разрыв вокруг:

    Размер зуба:

    Возврат диска покупателя
    Возврат арт-клиента

    Дополнительные инструкции:

    Пришлите нам иллюстрацию !: graphics @ webflexo.ком

    Роль веб-графики

    Прежде всего, согласованный интерфейс и идентификационная графика на совокупности веб-страниц определяют границы веб-«сайта». Хотя веб-дизайнеры могут создать сайт без графики, большинство пользователей с трудом распознают набор пустых страниц как единый «сайт», и такой сайт может показаться неприятно странным, выходящим за рамки норм дизайна и ожиданий пользователей.Графические изображения идентичности, определяющие сайт, не должны быть сложными, но они должны быть единообразными для всего диапазона страниц на сайте, чтобы пользователь мог создать ощущение, что ваши страницы представляют собой отдельный регион — связанный, возможно, с большим целым, если вы работать на крупном предприятии, но в некотором роде отличаться от «места» (рис. 11.1).

    Рисунок 11.1. Графика сайта — это наиболее мощные инструменты для определения четкого ощущения «места» на всех страницах сайта.

    Графика как содержание

    Графика служит нескольким целям в качестве элементов контента — наряду с текстовым контентом и дополняет его:

    • Иллюстрации: Графика может показать вам вещи, привнося кусочки мира в ваш документ
    • Диаграммы: количественные графики и диаграммы процессов могут визуально объяснить концепции
    • Количественные данные: числовые диаграммы могут помочь объяснить финансовые, научные или другие данные
    • Анализ и причинно-следственная связь: графика может помочь разобрать тему или показать, что ее вызвало
    • Интеграция: Графика может объединять слова, числа и изображения во всестороннее объяснение

    Иллюстрации

    Фотографии и иллюстрации привносят мир в ваш документ кратким и незабываемым образом, сохраняя эту пресловутую «тысячу слов» объяснения.Зачем что-то описывать, если вы можете просто — и более запоминающе — показать это? Интернет — это цветная среда с огромным диапазоном отображаемых цветов, а цветная графика на веб-страницах почти равна качественной печати на бумаге, особенно когда графика воспроизводится примерно того же размера, что и при печати.

    Диаграммы и количественные данные

    Ограничения разрешения экрана компьютера (72–90 пикселей на дюйм) по сравнению с печатью (300+ точек на дюйм) начинают проявляться, когда вы создаете сложные диаграммы и диаграммы для компьютерной страницы.Большинство графиков диаграмм работают как на экране, так и на бумаге, но типографика меток в диаграммах и диаграммах должна быть оптимизирована для отображения на веб-экранах. Визуальные детали сложных диаграмм, преобразованных из печатных изображений, часто на удивление хороши, но всегда проверяйте типографику на рисунке, так как метки могут стать неразборчивыми в процессе преобразования.

    Интегрированные визуальные презентации

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

    Рисунок 11.2 — Шедевр графического повествования, в котором легко сочетаются слова, диаграммы и графики данных. Хотя диаграмма была разработана для печатного раздела Science Times в New York Times, диаграмма также очень хорошо работает на веб-сайте Times, доказывая, что вам не нужно «упрощать» сложные графики данных для экрана компьютера.

    Графическая коммуникация в сети

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

    • Доверьтесь разуму читателя. Не преувеличивайте свой материал, полагая, что пользователи Интернета каким-то образом принципиально отличаются от читателей печатных изданий и не интересуются сложностью. Постоянных читателей веб-сайтов, возможно, когда-то можно было отличить от других издателей, но теперь все читают Интернет.
    • Уважайте среду. Читатели те же, что и в печатных СМИ, но у Интернета другой профиль сильных и слабых сторон.Воспользуйтесь огромными возможностями Интернета для передачи сложных цветных изображений без затрат на печать и физическое распространение.
    • Скажите правду, как вы ее понимаете. Искажение количественных данных — это не просто неспособность сообщить; это предательство доверия читателя.
    • Не выбирайте данные чересчур аккуратно. Если вы представляете аргумент с помощью визуальных доказательств, не обрабатывайте и не редактируйте визуальные эффекты так сильно, чтобы у аудитории не было другого выбора, кроме как принять вашу точку зрения.Доверьтесь своей аудитории настолько, чтобы предоставить им данные: позвольте им взглянуть на те же изображения с более высоким разрешением или неоднозначные результаты, которые вы видели, и решить проблему для себя.
    • Будьте смелыми и содержательными. Серьезный интерес к визуальной коммуникации не требует, чтобы вы использовали только маленькую, мышиную графику в бледных тонах. Визуальные свидетельства не могут стать убедительными, если их никто никогда не замечает. Просто никогда не пытайтесь поразить аудиторию яркой графикой, чтобы компенсировать тонкий контент.

    Как создать классную графику для вашего веб-сайта

    Готов поспорить, у вашего веб-сайта потрясающая домашняя страница.Я прав? Люди тратят часы, даже дни на создание идеального сочетания изображений и копий, чтобы они производили большое впечатление. А затем, когда посетители взволнованно переходят по ссылкам, чтобы получить вашу важную информацию … если честно, все часто становится немного мах …

    Я называю внутренние страницы сайта нелюбимыми детьми. У всех есть они (заброшенные страницы — не дети). Ваша страница с ценами не доработана? Отзывы ваших клиентов выглядят немного одинокими? Недостающий ингредиент — это обычно графика.И я не имею в виду простое стоковое изображение, прикрепленное к странице. Я говорю о хорошо продуманных графических элементах, которые усиливают ваш бренд и стильно и профессионально демонстрируют вас и вашу работу.

    Позвольте мне показать вам несколько примеров…

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

    А как насчет этой романтической картины «Обо мне»? Использование элементов вашего бренда в графике вашей страницы усиливает сообщение вашего бренда на всем сайте.

    Как насчет простого коллажа, который позволяет показывать несколько изображений в одной графической области?

    Я использовал такие слова, как «простой», чтобы описать эти графические элементы, но это просто, если вы знаете, как это сделать. Я не только покажу вам несколько простых способов создания привлекательных графических элементов, но и подписчики рассылки могут загрузить многослойный PSD-файл и попрактиковаться с ним. Погнали!

    1. ИЗМЕРЕНИЕ ВАШЕГО ПРОСТРАНСТВА

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

    2. ИСПОЛЬЗОВАНИЕ ПРОГРАММЫ ДИЗАЙНА

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

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

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

    3. ПОДГОТОВКА ХОЛСТА

    Прежде чем мы углубимся в руководство, я хочу убедиться, что вам удобно открывать новый холст в Photoshop. Мы собираемся создать это простое изображение, которое вы можете использовать для своих страниц «О себе» или «Информация».

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

    1. Рукописный шрифт Signerica . Это бесплатно для личного использования (т. Е. Для некоммерческих целей), но если вы хотите использовать его для чего-либо, связанного с бизнесом, обязательно купите коммерческую лицензию.

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

    Откройте палитру кистей в Photoshop и выберите «Загрузить кисти». Вам будет предложено загрузить файл .abr. (Показано на видео.)

    4. ОБУЧАЮЩЕЕ ВИДЕО

    Как создать классную графику для вашего веб-сайта из области дизайна на Vimeo.

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

    Если вы хотите загрузить многослойный PSD-файл для использования или игры, не забудьте подписаться на нашу рассылку новостей. Мы рассылаем его не так часто, но когда мы это делаем, он упакован с замечательными вещами, и вы получаете 20% скидку на свою первую покупку Design Space.

    веб-графики, добрая до последнего байта — Марсианские хроники, блог команды злых марсиан

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

    Знаете ли вы, что средняя веб-страница, предназначенная для настольного компьютера в 2019 году, занимает 2 МБ трафика, а половина всего, что веб-сервер отправляет в браузер пользователя, является графикой? JPEG, PNG, SVG, GIF и некоторые другие сокращения, известные каждому, кто когда-либо создавал цифровой продукт.И хотя можно подумать, что все, что отображается на веб-странице, связано с фронтенд-разработкой, мы заверяем вас, что понимание изображений важно для всех членов продуктовых групп: от бэкэнда до дизайна, управления и поддержки клиентов.

    TL; DR и ToC

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

    Визуальный TL; DR

    Или вы можете сразу перейти к:

    Но если у вас есть время (и терпение), просто начните читать отсюда! Удачи!

    Кривая и кортеж входят в стержень

    Хотя технически гипертекст, представленный Дугласом Энгельбартом как столп современной коммуникации, не нуждается в изображениях для передачи информации — внимание пользователя должно быть направлено на выделяющееся графическое содержание.Изображения, видеоклипы, CSS-анимация, рисунки на холсте, WebGL, даже Flash — малоизвестная технология древних времен — все средства оправданы в постоянной борьбе за удержание пользователей.

    С точки зрения компьютера, каждое изображение — это просто последовательность определенных инструкций. Как они переводятся в аппаратных пикселя. , отображаемое на экране, само по себе является захватывающей историей. Прежде всего, большинство форматов изображений, за заметным исключением BMP (Microsoft Paint, кто-нибудь?), не хранят явно значения пикселей.Некоторая математика участвует в декодировании данных, содержащихся в файле, в массив значений с цветовой кодировкой, причем красный, зеленый и синий являются наиболее очевидным способом передачи цвета.

    RGB — лишь одна из многих существующих цветовых моделей. Нашим личным фаворитом является YCbCr, который учитывает способ работы человеческого глаза и мозга : на самом деле мы более восприимчивы к изменениям яркости, чем к изменениям цвета.

    Когда мы имеем дело с векторными форматами, мы мыслим не кортежами, тройками и четверками, как в растровых форматах, а геометрическими примитивами: линиями, кругами и квадратами, которые, по сути, являются просто кривыми.

    PNG, GIF, JPEG, WebP, HEIC, AVIF — растровые форматы, SVG — векторный формат. Мы рассмотрим все из них ниже.

    Видеть большую картину

    Изображение ниже должно было иметь размер 37,8 МБ, чтобы показать исходный файл с профессиональной видеокамеры. Из уважения к вашему интернет-провайдеру и окружающей среде в целом мы сделали все возможное, чтобы сжать его до 3,5 МБ без значительного снижения качества.

    37,8 МБ сжато в 3,5 МБ

    Однако оптимизация изображения — это , а не , первое, что вы должны учитывать при работе с визуальным контентом в Интернете.Во-первых, вы должны оценить весь стек, стоящий за доставкой этих сладких, сладких байтов (да, большинство наших примеров изображений связаны с едой!) По сети конечному пользователю. Задайте себе следующие вопросы:

    • Вы загружаете все изображения сразу или сосредотачиваетесь только на тех, которые нужно отрендерить в первую очередь? (проверьте ленивую загрузку)
    • Рассматривали ли вы HTTP / 2, который поддерживает мультиплексирование на уровне протокола?
    • Вы эффективно сжимаете свои активы?
    • Вы используете CDN?

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

    Нет ничего идеального

    Качество можно измерить . Ознакомьтесь с индексом структурного сходства.

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

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

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

    Обычно, когда мы говорим «качество», мы имеем в виду следующие вещи:

    Резкость

    Четкое векторное изображение слева по сравнению с размытым растровым справа. Сравнить в Codepen

    Точность цвета

    Истинный цвет слева против двадцати цветов справа.Сравнить в Codepen

    Отсутствие артефактов

    Плавный рендеринг слева и пикселирование справа Сравните в Codepen

    Глаза, мозг и контекст

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

    Взгляните на следующие примеры.

    Различные контексты изображений

    В случае карточки (1) изображение является основным содержанием: мы ожидаем, что пользователь потратит некоторое время на его просмотр, поэтому нам нужно максимально возможное качество.

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

    В случае интерактивного элемента (3) текст и изображение одинаково важны, поскольку они требуют действий пользователя.Такие элементы должны быть масштабируемыми, многоразовыми и занимать как можно меньше места — вот почему имеет смысл отказаться от растра в пользу вектора.

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

    Давайте также помнить, что изображения обрабатываются браузерами на физическом устройстве — экране, а разные браузеры обрабатывают изображения по-разному.Иногда вам нужно очень сильно прищуриться, чтобы это заметить (если у вас нет экрана Retina, вам может не повезти):

    Одно и то же изображение в разных браузерах

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

    Не все пиксели одинаковы

    В конце концов, что такое пиксель? В наши дни даже малыш, который какое-то время смотрел «Свинку Пеппу» на телефоне родителей, вероятно, имеет об этом какое-то представление.Однако первоначальная интуиция не всегда верна.

    Когда мы говорим «пиксель», мы на самом деле имеем в виду, по крайней мере, одну из трех очень разных вещей: точку в аппаратном смысле, точку в смысле CSS или точку в смысле «данные изображения».

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

    Когда вы читаете текст на своем телефоне, вы держите экран на определенном расстоянии от глаз, но когда вы смотрите на экран компьютера, вы обычно находитесь дальше от него, чтобы читать с комфортом.Чем больше расстояние между сетчаткой и сетчаткой (каламбур), тем больше будет размер «пикселя CSS».

    Как измеряется пиксель CSS (из спецификации CSS)

    В этой статье 1995 года, написанной Элви Рэем Смитом из Microsoft, подробно рассказывается о форме пикселя , не стесняйтесь болтать!

    Не вдаваясь в подробности, мы можем просто иметь в виду, что «физический размер» пикселя CSS — это величина в миллиметрах, которая различается для каждого типа экрана и никогда не меняется.На экранах Apple Retina (iPhone, iPad, Mac) это значение варьируется от 0,11 мм до 0,23 мм . Даже не спрашивайте нас о форме пикселя (это загруженный вопрос!), Просто помните, что мы используем одно значение, а не кортеж.

    CSS-пиксель

    — это не то же самое, что аппаратный пиксель, последний — это всего лишь минимальный размер точки в соответствии с физическими характеристиками конкретного экрана.

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

    Вы можете открыть DevTools в любом браузере, который вы используете прямо сейчас, и набрать devicePixelRatio , чтобы узнать о текущем DPR экрана . Обратите внимание, что если вы перетащите окно на другой экран (например, на внешний дисплей) — номер обновится. Рассчитываем так:

    devicePixelRatio = Размер пикселя CSS / размер аппаратного пикселя

    Возьмем изображение шириной 1000 пикселей и высотой 1000 пикселей.Как это соотносится с нашим экраном?

    Изображение 1000 × 1000 пикселей

    Теперь давайте разместим это изображение на веб-странице:

      
      

    обратите внимание, что мы применяем формулу DPR для каждого измерения, поэтому мы делаем это дважды для изображения размером 1000 × 1000.

    Устанавливая ширину на 1000 пикселей , вы указываете своему браузеру отображать 1000 * 1000 = 1 000 000 CSS-пикселей . Если соотношение пикселей вашего устройства составляет на (экран без Retina), то задействовано 1000 * 1 * 1000 * 1 = 1000000 аппаратных пикселя .

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

    А что, если DPR — это два (Retina)? Теперь ваше изображение отображается с помощью 1000 * 2 * 1000 * 2 = 4000000 аппаратных пикселей .

    Это означает, что один пиксель вашего изображения визуализируется четырьмя аппаратными пикселями. Ваше изображение масштабируется: каждый пиксель данных изображения «растягивается» для рисования на экране.

    Маленький пиксель в большом мире

    Как мы видели выше, размеры изображения больше не соответствуют аппаратному обеспечению один к одному.Поскольку браузеры не могут определить содержимое растрового изображения, они используют общие алгоритмы (Math! Math! Math!), Чтобы угадать наилучшую стратегию изменения размера.

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

    Сравните наиболее распространенные алгоритмы масштабирования.

    Вы можете управлять этим процессом с помощью свойства CSS рендеринга изображения. Это позволяет вам выбрать стратегию, но вы по-прежнему не можете контролировать конкретный алгоритм, выбранный браузером.

    Различные CSS рендеринг изображений значений, отображаемых в Chrome

    Изображение ниже объясняет, как работает апскейлинг:

    Масштабирование области 4px до 16px

    Интерполяция использует определенное количество соседних пикселей.

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

    Ваша цель — избежать апскейлинга любыми способами. Вот как это сделать:

    • Постарайтесь понять контекст и выбрать приемлемое качество.
    • Измените размер исходного изображения на max_size_of_your_container * DPR .
    • Имеются несколько версий изображений для наиболее распространенных DPR (одна, две или даже три).
    • Укажите это в разметке, например:
      
      

    SVG: Очень хорошие весы

    SVG означает масштабируемой векторной графики . Итак, изображения SVG по определению не боятся масштабирования. Это почему?

    Давайте подробнее рассмотрим анатомию файла SVG. Первое, что мы замечаем, это то, что содержимое написано в виде обычного текста, удобочитаемого человеком и подозрительно напоминающего старый добрый XML.

    Здесь я изо всех сил нарисовал печенье, используя простые геометрические формы, и экспортировал его как .svg файл:

      
        
            
            
        
    
    
      

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

    Вы пока не видите файл cookie (подождите), но вы видите набор тегов:

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

    Внешний вид формы определяется атрибутами.

    В нашем примере rx , d , cx и подобные атрибуты отвечают за размер и положение фигур. Значения этих атрибутов являются просто координатами, но эти координаты не имеют ничего общего с системой координат экрана.Вместо этого они вычисляются относительно viewBox изображения SVG. В нашем случае:

    Это переводится в 0 пикселей слева и 0 пикселей от верхнего края документа с шириной 200 пикселей и высотой 120 пикселей. Это размер и расположение области просмотра, в которой размещается наше изображение. Наш SVG также имеет атрибуты ширины и высоты - они определяют реальный размер самого изображения. В нашем случае это будет 200 × 120 CSS-пикселей (1).

    Игра с различными атрибутами SVG: 1. Исходное изображение; 2. Удаление ширины и высоты; 3. width = 90px; 4. preserveAspectRatio: нет; 5. preserveAspectRatio: соответствовать; 6. preserveAspectRatio: slice

    Удалим атрибуты ширина и высота . Теперь размер нашего изображения определяется размером окна браузера (2).

    Другой способ установить размер нашего изображения - установить ширину и / или высоту в CSS.Например:

      
      

    Размер нашего изображения теперь составляет 20% от высоты окна браузера (3).

    Но подождите, почему наш файл cookie расположен вертикально по центру? Причина в еще одном атрибуте, который называется preserveAspectRatio .

    Значение этого атрибута по умолчанию - xMidYMid соответствует . Это означает (по общему признанию, об этом невозможно догадаться): сохранить исходные пропорции изображения, сохранить видимым содержимое текущего окна viewBox , максимально масштабировать изображение, центрировать результат как по вертикали, так и по горизонтали.

    Давайте поиграем с этим атрибутом (см. Рисунки с (4) по (6) выше):

      
      
      
      
      
      

    Что, если мы хотим видеть только половину файла cookie? Просто отрежьте viewBox шириной:

      
      

    Изменение окна просмотра SVG

    viewBox и preserveAspectRatio - ваши лучшие друзья.

    Используя эти атрибуты вместе, мы можем масштабировать наши изображения миллионами способов.

    Скрытые силы SVG

    Помимо тегов, кривых и координат, SVG таит еще несколько сюрпризов. Во-первых, вы можете поместить внутрь растровых изображений .Поэтому всегда проверяйте, является ли изображение SVG, с которым вы имеете дело, на самом деле векторным изображением, это может быть не так. Этот метод может быть полезен, если мы хотим добавить интерактивности растровому изображению или как-то разметить его.

    Во-вторых, мы можем анимировать пути внутри изображения SVG. Это открывает дверь в прекрасный мир SVG-анимации.

    Посмотрите на некоторые анимации на сайте AnyCable - это тоже частично анимированные SVG!

    Наконец, файлы SVG также могут быть опасными .Ничто не мешает кому-то поместить тег