Компьютерная графика в дизайне 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), карту путешествия потребителя от первого контакта с продуктом до получения услуги, сервиса, результата.