Компьютерная графика в дизайне web страниц

Особенности веб-графики:

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

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

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

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

Видео YouTube

Компьютерная графика и создание Web-сайтов (Web-дизайн)

В содержание программы входит обучение приёмам создания профессиональных сайтов с помощью: языка разметки Web-страниц HTML, Microsoft SharePoint Designer, Adobe Flash, Windows Киностудия, Java Script, Adobe Photoshop. Грамотно размещать информацию на сайте; подготавливать изображения нужного формата и размера; работать с баннерами; использовать динамические эффекты; добавлять звуковые эффекты; добавлять скрипты на Web-страницы; использовать flash-анимацию; создавать видео ролики; размещать Web-сайт в Интернете; продвигать Web-сайты в поисковых системах.

Педагоги

Погромский Алексей Сергеевич

Расписание

Занятия проходят 2 раза в неделю по 2 академических часа.

Содержание программы

Модуль 1. Введение в web-дизайн. Язык разметки гипертекста HTML. Каскадные таблицы стилей (60 часов)
Теоретические основы обмена информацией в сети Интернет. Виды сетей, их применение
Этапы разработки и инструментальные web-средства для создания сайта.
Структура документа HTML. Основные понятия, термины и определения.

Гипертекстовые ссылки. Основные теги и атрибуты. Виды ссылок
Элементы HTML. Текст. Списки. Таблицы.

Основные теги, атрибуты.
Правила построения CSS. Виды селекторов.

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

Модуль 2. Создание растровых изображений в Adobe Photoshop. Разработка структуры, публикация и продвижение Web –сайта (56 часов)
Обзор программы Adobe Photoshop: навигатор, линейка, направляющие. Сохранение изображений, экспорт в различные форматы. Основные приемы работы с изображениями.

Выделенные области, маски и фильтры. Инструменты выделения. Работа со слоями, объектами, текстом. Особенности сохранения Web–графики. Оптимизация
Обзор программы CorelDraw. Основные приемы работы с изображениями в CorelDraw. Создание фона для Web–сайта, кнопок, логотипа.
Виды верстки сайта. Табличная верстка, блочная верстка. Свойства позиционирования и форматирования.
Мета-теги. Назначение, применение, группы мета-тегов.
Хостинг. Понятие. Виды хостинга. Домен и доменные зоны. Уровни доменов. Назначение файла robots.txt.
Яндекс метрика. Яндекс Вебмастер

Теги HTML5 для структуры кода. Теги и их назначение

Цели программы

Научиться приёмам создания профессиональных сайтов с помощью: языка разметки Web-страниц HTML, Microsoft SharePoint Designer, Adobe Flash, Windows Киностудия, Java Script, Adobe Photoshop.

Результат программы

По окончании курса Вы будете уметь:

• Создавать Web-сайт, используя различные программы

• Грамотно размещать информацию на сайте

• Подготавливать изображения нужного формата и размера

• Работать с баннерами

• Использовать динамические эффекты

• Добавлять звуковые эффекты

• Добавлять скрипты на Web-страницы

• Создавать видео ролики

• Размещать Web-сайт в Интернете

• Продвигать Web-сайты в поисковых системах

Особые условия проведения

Модуль 1. Введение в web-дизайн. Язык разметки гипертекста HTML. Каскадные таблицы стилей (60 часов)

Модуль 2. Создание растровых изображений в Adobe Photoshop. Разработка структуры, публикация и продвижение Web –сайта (56 часов)

Выпускные испытания (4 часа)

Материально-техническая база

Компьютерные классы НИУ БелГУ для индивидуального пользования,

лицензионное ПО: CorelDraw, SharePoint Designer, Adobe Photoshop, CorelDraw, Flash, Java Script,

Трехмерная графика в вебе

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

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

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

В настоящий момент WebGL поддерживается следующими браузерами:

• Mozilla Firefox (с 4-й версии)
• Google Chrome (с 9-й версии)
• Safari (с 6-й версии, по умолчанию поддержка WebGL отключена)
• Opera (с 12-й версии, по умолчанию поддержка WebGL отключена)
• IE (с 11-й версии, для других версий можно воспользоваться сторонними плагинами, например, IEWebGL)

Мобильные браузеры и платформы

• Android-браузер (поддерживает WebGL только на некоторых устройствах)
• Opera Mobile (начиная с 12-й версии и только для ОС Android)
• IOS (полная поддержка с версии 8.1)
• Firefox for mobile (с 4-й версии)
• Google Chrome для Android (с 25-й версии)

Преимущества использования WebGL:

• Кроссбраузерность и отсутствие привязки к определенной платформе. Windows, MacOS, Linux — все это неважно, главное, чтобы ваш браузер поддерживал WebGL.
• Использование языка JavaScript, который достаточно распространен.
• Автоматическое управление памятью. В отличие от OpenGL, в WebGL не надо выполнять специальные действия для выделения и очистки памяти.
• Поскольку WebGL для рендеринга графики использует графический процессор на видеокарте (GPU), для этой технологии характерна высокая производительность, которая сравнима с производительностью нативных приложений.

История создания

Наиболее распространенными технологиями отображения компьютерной графики на персональных компьютерах являются Direct3D и OpenGL.

Direct3D — составная часть пакета технологий Microsoft DirectX.

Альтернативная ей технология OpenGL, благодаря ее открытости, получила гораздо более широкое распространение. Реализации OpenGL доступны для различных операционных систем и аппаратных платформ. Спецификация OpenGL была разработана компанией Silicon Graphics Inc. и опубликована как открытый стандарт в 1992 году. Технология оказала огромное влияние на развитие трехмерной графики.

WebGL уходит корнями в OpenGL, однако назвать его прямым потомком нельзя. Непосредственным прототипом WebGL принято считать OpenGL ES (for Embedded Systems для встраиваемых систем), создана в 2003—2004 годах и обновлена в 2007-м (ES 2.0) и в 2012-м (ES 3.0) годах. Переход к версии OpenGL 2.0 обозначился появлением новой важной особенности — поддержкой программных шейдеров. Эта поддержка была перенесена в OpenGL ES 2.0 и стала одним из основных элементов спецификации WebGL 1.0.

В начале 2009 года консорциум Khronos Group (некоммерческий промышленный консорциум, образованный для разработки, публикации и продвижения различных открытых стандартов) учредил рабочую группу WebGL и запустил процесс стандартизации WebGL на основе OpenGL ES 2.0. В 2011-м под его эгидой была выпущена первая версия WebGL. Однако в июне того же года корпорация Microsoft выразила свою обеспокоенность безопасностью технологии WebGL, сославшись на чрезмерные права доступа к оборудованию и ненадежность механизмов защиты. Вице-президент Mozilla Марк Шавер отверг критику Microsoft, назвав опасения преувеличенными. В то время корпорация Microsoft обладала собственной 3D веб-технологией Silverlight 5, основанной на тех же принципах, что и WebGL, которую, тем не менее, корпорация считала достаточно надежной. Позднее Microsoft изменила своё отношение к технологии WebGL, реализовав её поддержку в своем браузере Internet Explorer 11. Корпорация Apple приняла решение о поддержке WebGL в браузере Safari на конференции WWDC в 2014 году.

Обзор фреймворков для разработки на WebGL

Технология WebGL использует низкоуровневое API, этот аспект облегчает внедрение технологии разработчиками браузеров в свои продукты, но создает достаточно большие трудности при создании интерфейсов. Большое количество времени и сил было вложено в разработку библиотек, фреймворков и сторонних программных средств, которые упростили работу разработчикам сайтов.

Библиотека WebGLU

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

Неполный список функций:

• Можно загрузить шейдеры непосредственно из .frag / .vert / .vp / .fp файлов
• Автоматическая загрузка и настройка шейдера
• Все компиляции и компоновки обрабатываются автоматически
• Автоматическая установка любой проекции и вида модели
• Обеспечивает проекции и матрицы-стеки вида модели, которые примерно соответствуют режимам матрицы в OpenGL
• Автоматически создает при необходимости массив / элемент буферов и связывает их по мере необходимости во время рендеринга
• Каждому объекту может быть назначена отдельная шейдерная программа
• Хранение данных атрибутов шейдера, простой вызов
• Частичный .obj анализатор реализован для загрузки объектов
• Поддерживает иерархии объектов
• Статические изображения и видео текстуры
• Поддержка процедурной анимации
• Поддержка покадровой анимации
• Возможность смешивать типы анимации и иерархию объектов
• GameGLU — библиотека компаньон обеспечивает легкое отслеживание событий клавиатуры

Библиотека GLGE

Достаточно именитая библиотека для разработки приложений с использованием WebGL. Библиотека ориентирована больше на динамическое изменение сцены. Однако последние изменения в репозитории датированы 2014 годом, поэтому есть причины усомниться в актуальности библиотеки на сегодняшний день.

Неполный список функций:

• Покадровая анимация
• Поддержка общего освещения, направленного освещения (spot) и точечных источников света
• Поддержка карты нормалей
• Анимирование материалов
• Скелетная анимация
• Поддержка формата Collada
• Поддержка карт смещения
• Рендеринг текста
• Туман
• Глубина теней
• Карты окружения
• Отражение / преломление
• Анимация Collada
• 2d фильтры
• Culling — удаления скрытых частей сцены из процесса обработки
• Поддержка LOD — уровни детализации объекта
• Физика

Библиотека Three JS

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

Неполный список функций:

• Рендереры — Canvas, SVG или WebGL
• Добавление и удаление объектов в режиме реального времени
• Туман
• Перспективная или ортографическая камеры
• Каркасная анимация, различные виды кинематики, покадровая анимация
• Несколько типов источников света — внешний, направленный, точечный
• Брошенные и полученные тени
• Шейдеры (GLSL)
• Объекты — сети, частицы, спрайты, линии, скелетная анимация и так далее
• Множество предустановленных типов геометрии — плоскость, куб, сфера, тор, 3D текст и так далее
• Активная поддержка модификаторов — ткань, выдавливание
• Возможность загрузки множества типов данных — двоичный, изображения, JSON и сцена
• Экспорт и импорт обьектов Blender, openCTM, FBX, 3D Studio Max и Wavefront .obj файл

Библиотека Babylon JS

Библиотека с открытым исходным кодом для создания полноценных 3D приложений и игр, работающих в веб-браузере без использования сторонних плагинов и расширений. Babylon JS по своим возможностям близок к ThreeJS, однако имеет в своем арсенале некоторые встроенные функции, недоступные в Three JS из коробки. К таким приятным особенностям относятся встроенный физический движок oimo.js — достаточно простой способ создать реалистичный ландшафт, используя карту высот. Разумеется, в three js также присутствуют такие возможности, но реализованы они при помощи различных дополнительных приложений. Однако за функциональность библиотеки приходиться платить нескромным весом в 800 кб.

• Сцена — использование готовых мешей, туман, скайбоксы
• Физический движок (модуль oimo.js)
• Сглаживание
• Анимационный движок
• Звуковой движок
• Система частиц (партиклов)
• Аппаратное масштабирование
• Поддержка LOD-ов
• Пошаговая загрузка сцены
• Автоматическая оптимизация сцены
• Панель отладки
• 4 источника освещения — точечный, излучаемый повсюду, прожектор и реалистичное
• Пользовательские материалы и шейдеры
• Широкие возможности текстурирования
• SSAO
• Блики
• 9 видов камеры, в том числе и для сенсорного управления
• Экспортеры для 3ds Max, Blender, Unity3D, Cheetah 3d
• Карта высот

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

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

Графика, веб или UX: как выбрать направление в дизайне

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

Смыслы, образы и типографика

Если вы любите работать с ассоциациями, визуальными образами, смыслами, культурным кодом — попробуйте силы в графическом дизайне, иллюстрации или типографике. Это, пожалуй, самое старое направление дизайна: началом графического дизайна можно считать издание первой печатной книги «Алмазная сутра». Ее издали в Китае в 868 году.

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

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

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

Ты обращаешь внимание на шрифт, когда читаешь книгу, смотришь афишу или изучаешь сайт?

Тогда тебе возможно будет интересно попробовать себя в типографике.

Обращаешь внимание на баннеры на улицах и вывески магазинов, насколько они понятны и привлекательны? Отмечаешь про себя, куда бы зашел, а куда — нет?

Да, всегда так делаю.

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

Сможешь сейчас назвать5 логотипов компаний, которые тебе нравятся? Подмечаешь смысл, в них заложенный, формы, цвета?

Да, даже пару десятков могу назвать сходу.

Ого! Скорее всего тебе будет интересно создавать логотипы и шрифты.

В Skillbox есть курс «Графический дизайнер с 0 до PRO» для веб-дизайнеров, иллюстраторов и графических дизайнеров. Вы научитесь разрабатывать фирменный стиль для компаний и продуктов, создавать айдентику — логотипы, брендбуки и полиграфию. Узнаете, как выстраивать правильную коммуникацию с клиентом, сформируете качественное портфолио для получения заказов.

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Процессы, сценарии и поведенческие модели

Если вам нравится анализировать поведение пользователей и прорабатывать сценарии взаимодействия с сайтами, присмотритесь к UX-дизайну.

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

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

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

Так как пользовательский опыт и проектирование интерфейсов нераздельны, почти всегда этим занимается один человек — UX-дизайнер. Он интервьюирует заказчика и будущих пользователей продукта, собирает и анализирует информацию о целевой аудитории заказчика, составляет CJM (англ. Customer Journey Map), карту путешествия потребителя от первого контакта с продуктом до получения услуги, сервиса, результата.