Web графика создание web графики с помощью современных графических процессоров

Обновлено: 07.07.2024

Спойлер: реально. Но обо всём по порядку, для начала — всем привет! Если вы тоже думаете о том, чтобы начать карьеру веб-дизайнера , но не знаете как, — обязательно прочтите эту статью. Из нее вы узнаете, какие навыки вам понадобятся и как их получить.

Что такое веб-дизайн и реально ли стать экспертом в этой области?

Что такое веб-дизайн?

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

Веб-дизайн появился совсем недавно. Первые сайты, созданные в начале 90-х, были очень простыми. Они практически полностью состояли из текста. Благодаря развитию технологий на них быстро появились фотографии и анимации.

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Является ли веб-дизайн компьютерной графикой?

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

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

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

Можно ли самостоятельно стать веб-дизайнером?

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

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

Что такое веб-дизайн и реально ли стать экспертом в этой области?

Даже если вы решили учиться, практиковаться или выполнять первые задания, лучше начать как можно раньше. Нашли предложение стажировки для новичков? Отлично! Вы видели рекламу человека, который хочет создать простой веб-сайт для малого бизнеса? Напишите письмо с предложением о сотрудничестве!

С чего начать изучение веб-дизайна?

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

Основы рисования —

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

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Сначала вы узнаете правила композиции . Расположение отдельных компонентов чертежа на листе бумаги позволит вам лучше спланировать размещение элементов на вашем сайте в будущем.

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

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

В-третьих (пожалуй, самое главное) вы научитесь видеть . Дизайнер должен развивать особое восприятие мира, часто называемое «художественным чутьем». Вопреки внешнему виду, это не 100% естественный навык. В значительной степени он приобретается во время обучения рисованию.

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Программы разработки интерфейсов

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

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

Sketch

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Adobe XD

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Другие графические программы

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

Конструкторы сайтов

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

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

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

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

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

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

Зацикливаться на конструкторах не рекомендую, но если вы хотите "творить как художник", не изучая код, — конструкторы станут вашим верным спутником.

Другие инструменты, полезные при разработке веб-сайтов

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

Первые сайты, напоминаю, созданные в начале 90-х, были очень простыми. Они практически полностью состояли из текста. Благодаря развитию технологий на них быстро появились фотографии и анимации.

Где черпать вдохновение?

Что такое веб-дизайн и реально ли стать экспертом в этой области?

Даже самые творческие умы нуждаются во вдохновении . В Интернете можно найти множество сайтов, посвященных вдохновении создания сайтов.

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

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

Сколько времени нужно, чтобы изучить веб-дизайн?

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

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

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

Со временем веб-сайты становились все более сложными и полными графических «фейерверков». Это было связано с улучшением пропускной способности интернет-соединения и увеличением вычислительной мощности компьютеров.

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

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

Это позволяет разработать удобный интерфейс, который побуждает вас оставаться на странице. Как вишенка на торте во главе визуала красуется МОДА .

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

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

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

Резюме

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

Что такое веб-дизайн и реально ли стать экспертом в этой области?

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

Это возможно благодаря конструкторам веб-сайтов, в которых создание сайтов не только не требует программирования, но также интуитивно понятно и доступно каждому. НО не забывайте, что они никогда не заменят человеческие руки и мозг! ;)

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

Мы заботливо подготовили перевод крутой статьи от наших коллег из блога Evil Martians (оригинал материала авторства Полины Гуртовой, Риты Клубочкиной и Энди Барнова ищите здесь). Статья будет полезна фронтендерам, ПМ-мам, контентщикам и вообще всем, кто имеет дело с изображениями в интернетах (возможно, даже вашей маме).

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

Если у вас не так много времени, чтобы читать эту длинную и извилистую статью, вот инфографика.

Встретились как-то в баре… кривая и цветовая кодировка

Технически гипертекст (текст, который ссылается на другой текст), представленный Дугласом Энгельбартом в 1968 году как основа современной веб-коммуникации, не нуждается в изображениях для передачи информации. Но реальность такова, что вниманием пользователя нужно управлять с помощью графического контента. Изображения, видео, CSS-анимация, рисованная графика Canvas API, WebGL, даже Flash — тёмная технология древних времен — все средства хороши в постоянной борьбе за удержание пользователя.

Для компьютера каждое изображение — это просто последовательность конкретных инструкций. То, как они переводятся в аппаратные пиксели, отображаемые на экране, — само по себе захватывающая история. Большинство форматов изображений, за исключением BMP (кто там
в пейнте ещё рисует?), в точности не хранит значения пикселей. Немножко математики, и данные, содержащиеся в файле, декодируются в массив значений с цветовой кодировкой. Кодировка RGB (red, green, blue) — самая очевидная для передачи цвета.

Кодировка YCbCr тоньше, поскольку учитывает работу человеческого глаза и мозга: на самом деле мы более восприимчивы к изменениям яркости, чем к изменениям цвета.

Когда мы имеем дело с векторной графикой, то особенно не задумываемся о тройных или четверных кодировках (CMYK), как в растровых форматах. Больше интересуют геометрические примитивы: линии, круги и квадраты, которые по факту являются просто кривыми Безье.

PNG, GIF, JPEG, WebP, HEIC, AVIF (для видео) — растровые форматы, SVG — векторный формат. Ниже о каждом будет поподробнее.

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

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

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

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

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

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

Резкое векторное изображение слева и размытое растровое справа Настоящий цвет слева против двадцати цветов справа Плавный рендеринг слева по сравнению с пикселизацией справа

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

На первой картинке изображение — ключевой контент: мы ожидаем, что пользователь потратит некоторое время на его просмотр, поэтому нам нужно максимально возможное качество. На второй картинке текст важнее. Картинка там для антуража, поэтому её можно сжать по-максимуму, и никто не заметит.

На третьем изображении — интерактивный элемент, где и текст, и изображение одинаково важны, поскольку они требуют действий пользователя. Такие элементы должны быть масштабируемыми, «многоразовыми» и занимать как можно меньше места, поэтому имеет смысл отказаться от растра в пользу вектора.

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

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

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

Когда мы говорим «пиксель», то на самом деле имеем в виду одну из, по крайней мере, трех совершенно разных вещей:

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

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

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

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

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

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

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

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

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

Поместим его на странице:

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

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

Но что, если у вас Retina, и DPR=2? Теперь ваше изображение отображается с помощью 1000 * 2 * 1000 * 2 = 4 млн аппаратных пикселей. Это означает, что один пиксель вашего изображения отображается четырьмя аппаратными пикселями. Иными словами, изображение масштабируется: каждый пиксель его данных «растягивается» для отображения на экране.

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

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

Разные значения image-rendering CSS и как они отображаются в Chrome

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

Ваша цель в том, чтобы избежать вот такого масштабирования любым способом:

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

SVG — это масштабируемая векторная графика. Так что по определению SVG-изображения не боятся масштабирования. Почему?

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

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

Пока её нельзя увидеть. Вместо этого — набор тегов:

<svg> — это контейнер для нашей картинки,
<g> — единица композиции (на самом деле этот тег бесполезен в примере кода выше, он только для демонстрации),
<ellipse>, <path> — геометрические примитивы. <path> — самая универсальная форма, которую можно использовать для всех других фигур (круги, треугольники, сложные кривые).

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

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

Баловство с различными атрибутами SVG: 1. Исходная картинка; 2. Убрали атрибуты ширины и высоты; 3. Ширина = 30 пикселей; 4. Атрибут preserveAspectRatio: none; 5. Атрибут preserveAspectRatio: meet; 6. Атрибут preserveAspectRatio: slice.

Удалим width- и height-атрибуты. Теперь размер нашего изображения определяется размером окна браузера (картинка 2). Другой способ установить размер для изображения — задать width и/или height в CSS. Например:

Теперь размер изображения составляет 20% от высоты окна браузера (картинка 3). Но подождите, почему наше печенье расположено по центру? Причина — еще один атрибут, который называется preserveAspectRatio. Его значение по умолчанию — xMidYMid meet. Это значит: сохранить исходные пропорции изображения, сохранить содержимое текущего viewBox видимым, масштабировать изображение как можно больше, центрировать результат как по вертикали, так и по горизонтали. Но если поиграть с его значениями, получится три разных результата — картинки 4−6.

А если нам нужна только половинка печенья, можно просто уменьшить ширину viewBox (картинка 6):

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

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

Во-вторых, мы можем анимировать пафы (<path>) внутри SVG-изображения, и сделать само изображение анимированным.

Наконец, SVG-файлы могут быть опасны. Ничто не мешает кому-то поместить тег <script> и немного JavaScript в синтаксис XML. А браузер запустит этот код. Так что соблюдайте осторожность при работе с SVG из ненадежных источников и тщательно проверяйте, что там внутри.

Ну ок, SVG-изображения имеют суперспособности. Но должны ли мы всегда использовать их для простой графики? Нет! Использование SVG дает нам файл с изображением печеньки в 26 КБ, в то время как растровый WebP (подробнее о нем позже) того же изображения умещается в 16 КБ. И если нет никакой разницы, зачем платить больше?

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

А теперь пришло время оптимизировать SVG-изображение с помощью svgo. Благодаря этому можно получить SVG-файл в 13 Кб вместо растрового файла формата WebP в 16 Кб. Вектор снова выиграл!

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

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

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

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

Для принятия обоснованных решений по веб-графике помните три следующие рекомендации:

Используйте безопасные web-цвета.

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

Ищите компромисс между качеством и размером файла.

Для распространения изображений в Интернете важно создавать небольшие файлы. Веб-серверы более эффективно хранят и передают изображения меньшего размера. Средства просмотра быстрее загружают такие изображения. Размер и предполагаемое время загрузки веб-графики можно увидеть в диалоговом окне «Сохранить для Web и устройств».

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

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

Многие шаблоны Illustrator созданы специально для Интернета, включая веб-страницы и баннеры. Для выбора шаблона выберите «Файл» > «Новый из шаблона».

Чтобы разработчики веб-приложений могли создавать точные пиксельные модели, в Illustrator необходимо добавить свойство выравнивания по пикселям. Если для объекта включено свойство выравнивания по пикселям, все его горизонтальные и вертикальные сегменты выравниваются по пиксельной сетке, что обеспечивает четкость обводок. Пока данное свойство задано для объекта при любых преобразованиях, он повторно выравнивается по пиксельной сетке в соответствии с новыми координатами. Чтобы включить данное свойство, требуется установить флажок «Выровнять по пиксельной сетке» на палитре «Трансформирование». В Illustrator на уровне документа также доступен флажок «Выровнять новые объекты по пиксельной сетке», который по умолчанию установлен для веб-документов. Если данное свойство включено, для любого рисуемого объекта свойство выравнивания по пикселям задается по умолчанию.

Сохраняя объект в битовом формате (например, в виде файла JPEG, GIF или PNG), Illustrator растрирует объект с разрешением 72 пикселя на дюйм. Выбрав «Просмотр» > «Просмотр в виде пикселов», можно увидеть, как будут выглядеть объекты после растрирования. Это очень удобно, если требуется проконтролировать точное расположение, размер и сглаживание объектов врастрированнойграфике.

Чтобы понять, как Illustrator разделяет объекты на пиксели, откройте файл с векторными объектами, выберите команду «Просмотр» > «Просмотр в виде пикселов» и увеличьте объект так, чтобы видеть каждый пиксель. Расположение пикселей определяется пиксельной сеткой, делящей монтажную область с шагом в один пункт (1/72 дюйма). Пиксельную сетку можно увидеть,если выбратьмасштаб 600 %. При перемещении, добавлении или преобразовании объект привязывается к пиксельной сетке. В результате любое сглаживание вдоль «привязанных» краев объекта (обычно левого верхнего края) исчезает. Теперь отмените выбор команды «Просмотр» > «Просмотр в виде пикселов» и переместите объект. Теперь можно расположить объект между линиями сетки. Посмотрите, как это влияет на сглаживание объекта. Видно, что даженезначительные корректировкимогут влиять на растрирование объекта.

«Просмотр в виде пикселов» выключен (сверху) и включен (снизу)

Оформление Web-страниц подразумевает необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве. Вы должны исходить из того, что среднестатистический пользователь работает в Интернете с разрешением экрана не более 800x600. Область, которая отображается в окне браузера при таком разрешении экрана, составляет примерно 790x430 пикселов. Чтобы представить величину этой области, вспомните, что значки на рабочем столе Windows имеют размер 32x32 пиксела.

Использование корректной цветовой гаммы важно при разработке любого графического проекта. Для графики Web-страниц необходимо применять цвета модели RGB. Так как для Web-страниц устройством вывода графики является экран монитора, то здесь, как правило, соблюдается условие WYSIWIG - What You See Is What You Get (Что видишь, то и получаешь) . Говоря «как правило», мы имеем в виду небольшие индивидуальные отличия мониторов пользователей.

На вопрос «Каков должен быть размер графического файла?», предназначенного для Web, трудно ответить однозначно. Давайте попробуем представить себе, что пользователь, обращающийся к вашему сайту, имеет модем с пропускной способностью 14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими. При использовании такого модема передача блока данных объемом 1 килобайт занимает примерно 1 секунду, так что при объеме графики в 30 килобайт для ее передачи по сети потребуется приблизительно 30 секунд. После таких расчетов возникает следующий вопрос: как долго посетитель, обратившийся к вашему сайту, готов ждать появления на экране загружаемого изображения? Если вы сможете ответить на этот вопрос, то сразу же определите и максимальный размер файла с графическим изображением. Считается, что файл должен иметь такой размер, при котором время его загрузки по сети не превышает одной минуты, что выражается в ограничении размера величиной примерно 60 килобайт.

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

F = (A/25,4xB/25,4)xD2xC/8,

F - размер файла без сжатия в байтах;

А - ширина исходного изображения в мм;

В - длина исходного изображения в мм;

D - графическое разрешение изображения в dpi;

С - глубина цвета в битах.

Таким образом, если вы хотите отсканировать для своей Web-страницы фотографию

размером 10x15 см с разрешением 150 dpi и глубиной цвета 24 бита, то результирующий

файл будет иметь размер 1569378 байт или 1,49 мегабайта.

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

Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспертов фотографии) - самый популярный формат для хранения фотографических изображений. JPEG является стандартом в Интернете и предназначен для сохранения растровых или точечных изображений со сжатием, уменьшающим размер файла от десятых долей процента до 100 раз, за счет отбрасывания избыточной информации, не влияющей на отображение документа. Но практически диапазон сжатия значительно уже: от 5 до 15 раз. Хотя алгоритм сжатия изображения этого формата и ухудшает качество, он может быть легко настроен на минимальные, практически незаметные для человеческого глаза, потери. Распаковка JPEG-файла происходит автоматически, во время его открытия. Между качеством изображения и степенью уплотнения существует обратная зависимость: чем более высокую степень сжатия для результирующего изображения вы зададите, тем хуже будет его качество.

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

Формат GIF (Graphics Interchange Format - Формат для обмена графической информацией) был разработан специалистами компьютерной сети CompuServe в 1987 году с целью ускорения пересылки файлов по телефонным линиям. Требовалось создать такой формат, который бы содержал достаточно хорошо упакованные данные. Алгоритм распаковки должен был быть при этом встроен во все программы, которые будут работать с этим форматом: утилиты просмотра, графические редакторы и т.п. Именно такой подход и реализован в формате GIF.

Хотя с тех времен пропускная способность модемов увеличилась во много раз, требования к компактности файлов, передаваемых по сетевым каналам, отнюдь не отошли на второй план. Web-страница, которая со всем своим текстом и графикой занимает свыше 40-50 килобайт, уже считается «большой» - и далеко не каждый посетитель дождется, пока она целиком загрузится в его браузер. Профессионализм Web-дизайнера как раз и заключается в том, чтобы отыскать должный баланс между художественностью, информативностью страницы и ее объемом. Вот почему формат GIF, главным достоинством которого является малый размер файлов, до сих пор сохраняет свое значение основного графического формата World Wide Web. Из распространенных графических форматов GIF однозначно уступает по степени сжатия только формату JPEG.

Конечно, GIF - не единственный формат, позволяющий сжимать графические данные; кое-какие способности к сжатию есть у форматов BMP, PCX, TIFF и многих других. Однако GIF - один из немногих форматов, использующих алгоритм сжатия, почти не уступающий по эффективности программам-архиваторам. Иными словами, GIF-файл не нужно архивировать, так как это редко дает ощутимый выигрыш в объеме.

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

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

Формат PNG (Portable Network Graphics - Переносимая сетевая графика) поддерживается поздними версиями браузеров, например, Netscape Navigator, начиная с версии 4, но широкого распространения пока не получил. Этот формат, основанный на вариации алгоритма сжатия без потерь качества, в отличие от GIF сжимает растровые изображения и по горизонтали, и по вертикали, что обеспечивает более высокую степень сжатия; кроме того, он поддерживает цветные графические изображения с глубиной цвета до 48 бит включительно.

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

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

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

PNG-формат не дает возможности создавать анимационные ролики. Поэтому для хранения анимации или нескольких изображений в одном файле используется вариация формата PNG - формат MNG (Multiple Network Graphics - Множественная сетевая графика). В настоящее время разработчики формата PNG работают над новым форматом PNP(пинап) (Portable Network Photography - Переносимая сетевая фотография), произносится «пинап», который предназначен для хранения фотографических изображений и обладает мощным алгоритмом сжатия с потерей качества.

Читайте также: