Web-технологии. Теория web-дизайна. CMS MODx Evolution
Прозрачность средствами CSS. Эффект затемнения на сайте
Прозрачность средствами CSS позволяет создавать очень интересные эффекты тусклых или полупрозрачных картинок, баннеров, счетчиков посещений и вообще любых элементов сайта. При наведении курсора на такой элемент картинка или баннер приобретает нормальную четкость, яркость и цвет. Такой эффект Вы можете наблюдать при наведении курсора на баннеры внизу этого сайта…. Читать дальше…23.07.2018
Как создать фотогалерею NivoSlider MultiTV на MODx Evo
.Читать урок по созданию галереи NivoSlider MultiTV на MODx Evo…
Исходный дистрибутив фотогалереи NivoSlider, на основе которого сделана multiTV галерея, вы можете скачать на странице NivoSlider (адаптивный слайдер).
12.07.2018
Как создать фотогалерею PgwSlideshow MultiTV для MODx Evo
PgwSlider MultiTV на MODx Evo — эффектный адаптивный слайдер на MODx Evolution.
В статье-уроке рассмотрен реальный пример создания такого слайдера, здесь можно скачать фото и дистрибутив multiTV для создания…
. Читать урок по созданию слайдера PgwSlider MultiTV на MODx Evo…07.07.2018
Как создать фотогалерею LightboxMG mini gallery MultiTV на MODx Evo
LightboxMG mini gallery MultiTV для MODx Evo — адаптивная галерея изображений на MODx Evolution, такую галерею можно прикрепить к любой странице сайта и разместить в любом месте страницы. В статье-уроке рассмотрен реальный пример создания такой фотогалереи, есть возможность скачать фото и дистрибутив для создания….Читать статью по созданию галереи на LightboxMG mini gallery MultiTV для MODx Evo…
01.07.2018
Создание слайдера Lightslider MultiTV на MODx Evo
Lightslider MultiTV на MODx Evo — удобный адаптивный слайдер на MODx Evolution.
В нашем уроке вы научитесь создавать такой слайдер, также сможете скачать фото и дистрибутив multiTV для создания….Читать урок по созданию слайдера Lightslider MultiTV на MODx Evo…
Исходный дистрибутив Lightslider, на основе которого сделана multiTV галерея, вы можете скачать на странице Lightslider (адаптивный слайдер).
01.07.2018
Графика в 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.
Лучшие методы создания веб-графики в Illustrator
Чтобы разработчики веб-приложений могли создавать точные пиксельные модели, в Illustrator необходимо добавить свойство выравнивания по пикселям. Если для объекта включено свойство выравнивания по пикселям, все его горизонтальные и вертикальные сегменты выравниваются по пиксельной сетке, что обеспечивает четкость обводок. Пока данное свойство задано для объекта при любых преобразованиях, он повторно выравнивается по пиксельной сетке в соответствии с новыми координатами. Чтобы включить данное свойство, требуется установить флажок «Выровнять по пиксельной сетке» на палитре «Трансформирование». В Illustrator на уровне документа также доступен флажок «Выровнять новые объекты по пиксельной сетке», который по умолчанию установлен для веб-документов. Если данное свойство включено, для любого рисуемого объекта свойство выравнивания по пикселям задается по умолчанию.
Дополнительные сведения представлены в разделе Рисование контуров, выровненных по пикселям, при создании проектов для Интернета.
Сохраняя объект в битовом формате (например, в виде файла JPEG, GIF или PNG), Illustrator растрирует объект с разрешением 72 пикселя на дюйм. Выбрав «Просмотр» > «Просмотр в виде пикселов», можно увидеть, как будут выглядеть объекты после растрирования. Это очень удобно, если требуется проконтролировать точное расположение, размер и сглаживание объектов в растрированной графике.
Чтобы понять, как Illustrator разделяет объекты на пиксели, откройте файл с векторными объектами, выберите команду «Просмотр» > «Просмотр в виде пикселов» и увеличьте объект так, чтобы видеть каждый пиксель. Расположение пикселей определяется пиксельной сеткой, делящей монтажную область с шагом в один пункт (1/72 дюйма). Пиксельную сетку можно увидеть, если выбрать масштаб 600%. При перемещении, добавлении или преобразовании объект привязывается к пиксельной сетке. В результате любое сглаживание вдоль «привязанных» краев объекта (обычно левого верхнего края) исчезает. Теперь отмените выбор команды «Просмотр» > «Просмотр в виде пикселов» и переместите объект. Теперь можно расположить объект между линиями сетки. Посмотрите, как это влияет на сглаживание объекта. Видно, что даже незначительные корректировки могут влиять на растрирование объекта.
Графика в Веб: перспективы и тренды
Рассмотрены перспективы развития графических технологий, ориентированных на использование в среде 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
Постоянный адрес этой страницы:
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-страницы и приемами ее правильного оформления.
- 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—страницы с помощью языка HTML2.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.
Прототипирование и веб-графика — курсы в Санкт-Петербурге
Уровень сложности:
Длительность курса: 24 ак.ч.
График обучения:
Аннотация
Сегодня практически каждый пользователь Internet имеет свою собственную личную страницу в сети, не говоря уже о коммерческих фирмах. Разработка Internet-представительств стала одной из самых стремительно развивающихся и достаточно дорогих услуг. Заказчики заинтересованы в создании красочных, стильных, привлекательных страниц и веб-элементов. Веб-дизайн сегодня – это сложившаяся система принципов и приемов оформления, которая не только обеспечивает профессиональный результат, но и позволяет конструктивно подойти к процессу создания веб-ресурса.
Что делает профессиональный веб-дизайн таковым? Чем отличается работа специалиста от работы начинающего? Какие приемы оформления позволяют придать строгий, корпоративный вид одним страницам, и свободный, экспрессивный другим? Ответить на все эти вопросы призван данный курс.
Знания и умения, полученные в результате обучения
После прохождения курса, слушатели получат практические навыки использования приложений Adobe , необходимые для осуществления профессиональной деятельности в области дизайна веб-страниц, а также исчерпывающие знания и умения в следующих областях:
- виды графических изображений в веб-дизайне;
- форматы графических файлов, используемых в сети Интернет и их особенности;
- создание анимации;
- направления и стили в веб-дизайне;
- типовые решения в дизайне веб-страниц;
- приемы графического дизайна;
- нарезка и оптимизация графики.
В течение курса слушатели получат практические навыки обработки фотоизображений, создания различного рода иллюстраций (в том числе журнальных, рекламных), подготовки графики для публикации в Web. Помимо заданий, выполняемых в аудитории, курс предусматривает большое число самостоятельных работ для закрепления материала и детального изучения некоторых тонкостей работы в пакете обработки растровой графики.
Преподаватели
- Тучкевич Владимир Максимович
|
Курс пока не поставлен в расписание. |
Расчёт стоимости с учётом возможных скидок представлен как справочная информация. Фактический размер скидки может несколько отличаться из-за округления значения суммы.
Требуются серьезная подготовка в области компьютерной графики и обработки растровых изображений. Требуется уверенное владение пакетом Adobe Photoshop, Adobe Illustrator, а также знание языка разметки HTML.
Темы лекций
Тема 1. Графика для веб
- Стили и направления в веб-дизайне
- Особенности и назначение веб-графики
- Цвет в веб-графике
- Форма в веб-графике
- Графика и текст
- Форматы представления графики в веб-дизайне
- Области применения форматов хранение графических файлов
- Программные продукты, используемые при работе с веб-графикой
- Типовые решения в оформлении различных элементов веб-страниц: элементы меню, постраничная навигация, заголовочная область, область «подвала», формы и т.д.
- Графическое оформление содержимого сайта
- Иконографика и пиктограммы
Тема 2. От схемы страницы к графическому макету сайта
- Классификация сайтов с точки зрения графического макета
- Типовые схемы компоновки страниц сайта в зависимости от типа представляемой информации
- Рекомендации и требования по созданию макета сайта
Практические занятия
Графика для веб
- Инструменты по оптимизации графики
- Форматы файлов и настройка параметров оптимизации
- Пиксельная графика
Создание макета сайта
- Использование модульной сетки
- Использование слоёв и слоевых эффектов при создании макета сайта
- Работа с текстом. Настройка сглаживания
графика — это… Что такое веб-графика?
графика — видеографика, монотипия, письмо, письменность Словарь русских синонимов. графика сущ., кол во синонимов: 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 — Разработчик … Википедия
Графика — W3C
Интернет — это больше, чем текст и информация, это также является средством выражения художественного творчества, визуализации данных и оптимизация представления информации для разных аудиторий с разные потребности и ожидания. Использование графики на веб-сайтах увеличивает опыт для пользователей, и W3C предлагает несколько различных и дополняющих друг друга технологии, которые работают вместе с HTML и сценариями, чтобы предоставить создателям веб-страниц и веб-приложений инструменты, необходимые для предоставить наилучшее возможное представление своего содержания.Узнайте больше ниже около:
Этот вводный текст является шаблоном для бета-версии. из w3.org. Наше намерение — предложить сообществу разработать этот шаблон и помочь предоставить полезный контент и ссылки. Для более полного примера см. страница для HTML и CSS.
Что такое графика?
Веб-графика — это визуальное представление, используемое на веб-сайте для улучшения или обеспечить представление идеи или чувства, чтобы попасть на веб-сайт Пользователь. Графика может развлекать, обучать или эмоционально влиять на пользователя и является имеет решающее значение для силы бренда, ясности иллюстраций и простоты использования интерфейсы.
Примеры графики: карты, фотографии, рисунки и узоры, семейные деревья, диаграммы, архитектурные или инженерные чертежи, гистограммы и круговые диаграммы диаграммы, типографика, схемы, штриховые рисунки, блок-схемы и многие другие изображения формы.
Графические дизайнеры имеют в своем распоряжении множество инструментов и технологий для все, от печати до веб-разработки, и W3C предоставляет многие из базовые форматы, которые можно использовать для создания контента в открытой сети Платформа.
Для чего используется графика?
Графика используется для всего, от улучшения внешнего вида веб-страниц. служить в качестве уровня представления и взаимодействия с пользователем для полноценной сети Приложения.
Различные варианты использования графики требуют разных решений, поэтому есть доступно несколько различных технологий. Фотографии лучше всего представлены PNG, в то время как интерактивный штриховой рисунок, визуализация данных и даже пользовательские интерфейсы нужна мощь SVG и Canvas API. CSS существует для улучшения других форматов как HTML или SVG. WebCGM удовлетворяет потребности в технической иллюстрации и документация во многих отраслях.
Что такое PNG?
Portable Network Graphics (PNG) — статический файл. формат для портативного, хорошо сжатого хранения без потерь и обмена растровые изображения (bitmap).Он имеет богатый контроль цвета, с индексированным цветом, поддержка оттенков серого и истинного цвета, а также прозрачность альфа-канала. PNG это разработан для Интернета с возможностями потоковой передачи и прогрессивного рендеринга. Это повсеместно поддерживается в веб-браузерах, графических инструментах разработки, графических наборы инструментов и другие части творческой цепочки инструментов. Файлы PNG имеют файл расширение «.PNG» или «.png» и должно быть развернуто с использованием типа носителя. «изображение / png». Изображения PNG можно использовать с HTML, CSS, SVG, Canvas API и WebCGM.
Что такое SVG?
Масштабируемая векторная графика (SVG) похожа на HTML для графики. Это язык разметки для описания всех аспектов изображение или веб-приложение, от геометрии фигур до стиля текста и формы, для анимации, для мультимедийных презентаций, включая видео и аудио. Он полностью интерактивен и включает в себя DOM со сценариями, а также декларативная анимация (через спецификацию SMIL). Он поддерживает широкий спектр визуальные функции, такие как градиенты, непрозрачность, фильтры, обрезка и маскирование.
Использование SVG обеспечивает полностью масштабируемую, гладкую, многократно используемую графику, начиная с простого графика для улучшения HTML-страниц, до полностью интерактивных диаграмм и данных визуализацию, игры, отдельные высококачественные статические изображения. SVG — это изначально поддерживается большинством современных браузеров (с плагинами, позволяющими использовать его на во всех браузерах) и широко доступен на мобильных устройствах и телевизионных приставках. Все основные инструменты рисования векторной графики импортируют и экспортируют SVG, и они также могут быть генерируется с помощью языков сценариев на стороне клиента или на стороне сервера.
Что такое CSS?
Cascading Style Sheets (CSS) — это язык для описания представления веб-страниц, включая цвета, макет и информация о шрифте. Его можно использовать для улучшения графических аспектов HTML и SVG. Вы можете прочитать больше на странице HTML и CSS.
Что такое Canvas API?
Canvas API — это технология создания сценариев на стороне клиента, позволяющая богатым создание или изменение растровых изображений (bitmap). Он использует векторную программные методы для создания фигур, градиентов и других графических эффектов, и поскольку у него нет DOM, он может работать очень быстро.Выделенные сценаристы могут разрабатывать игры или даже полнофункциональные приложения, используя Canvas API, самостоятельно или интегрирован в HTML или SVG. Он изначально поддерживается в большинстве современных браузеров. (библиотеки сценариев расширяют поддержку всех основных браузеров) и даже на некоторые мобильные устройства.
Что такое WebCGM?
Метафайл компьютерной веб-графики (WebCGM) это веб-профиль CGM, стандарта ISO для векторных и композитных определение векторных / растровых изображений. CGM имеет большое количество поклонников в технической сфере. иллюстрация, интерактивная электронная документация, геофизические данные визуализация, среди других областей применения и широко используется в полях автомобилестроения, авиастроения и оборонной промышленности.WebCGM имеет многие из тех же графических функций, что и SVG.
Примеры
В качестве простого примера файла изображения SVG, вот круг с градиентом. чтобы придать ему трехмерный вид:
Узнать больше
Для получения дополнительной информации об использовании открытой веб-графики см. Графику W3C. учебные пособия.
Что такое веб-графика
Веб-графика на любых веб-сайтах так же важна, как и их содержание.
Что такое веб-графика
Веб-графика на любых веб-сайтах так же важна, как и содержание сайта. Отлично проработанная графика может давать клиентам лучшие и креативные идеи того, что они ищем. Веб-графика помогает дизайнерам улучшать дизайн веб-сайта, добавляя цвета, визуальную привлекательность и помогает в обеспечении художественного профессионального прикосновения к их творческий подход.Веб-сайты, на которых нет веб-графики не обращайтесь к посетителям. Успехи веб-графики зависят от эффективного и действенного размещения на веб-сайты. Правильное размещение графики не только привлекает конечных пользователей, но также делает сайт хорошо Выключен.
Правильное использование Photoshop, Flash, Dream Weaver а инструменты Fireworks помогают в проектировании и создании уникальная графика.Эти профессионально созданные графики отражает творческий потенциал веб-дизайнера и увеличивает качество сайта. Обычно графика используется для объяснение вещей и идей, которые не выражаются слова. Например, веб-сайт покупок и электронной коммерции использует много графики, чтобы проиллюстрировать их фотографии продуктов.
Изобразительный язык чего-либо дает подробности конкретные продукты и легко понимаются людьми.Соответствующая графика продуктов упрощает содержание и помогает в легкой интерпретации. Предположим, если у вас есть описания продуктов на вашем веб-сайте, вы должны иметь соответствующее графическое изображение рядом с ними. Это лучше использовать логотипы, мультфильмы, графики и диаграммы там, где они имеют разумный смысл.
Основные советы по графическому дизайну:
- Четкость веб-страницы: Четкая веб-страница дизайн вещи должны быть размещены в соответствии с их важность, чтобы связанные вещи выглядели актуальными с содержанием.
- Изображение: Изображение играет жизненно важную роль в веб-дизайн, поэтому рекомендуется попробовать лучший уровень использовать подходящее изображение для наилучшего воздействия на посетители.
- Цвет: Каждому цвету свой язык. Цвета и их комбинации стимулируют людей интерес к разным вещам. Вот почему цвет комбинация также очень важные аспекты сети проектирование. Без цветов веб-страницы выглядят скучно и непривлекательный.При использовании сбалансированной цветовой схемы Интернета страницы могут выглядеть привлекательно, динамично и привлекательно пользователей.
- Цветовой контраст: Очень важно использовать адекватный цветовой контраст между текстом и фон. Значит необходимо использовать цвет контраст актуален и должен соответствовать характеру веб-сайт и графика. Правильное использование цвета контраст придает приятный вид и привлекает веб-сайты.
- Читаемость: Размеры шрифта, используемые в сайт играет жизненно важную роль и отлично работает дифференциаторы. Размер шрифта что-то изображает важный или новый раздел. Предлагается использовать шрифт без засечек для всего основного текста. Используя подчеркивание, жирный шрифт и курсив важные вещи могут быть подчеркнуты, но используйте их экономно.
- Действующий текст : используется текст HTML чаще всего в веб-дизайне.Это более эффективно, чем другое графическое слово. В веб-среде текст имеет огромные сильные стороны. Во многих ситуациях с использованием текста обеспечивает гораздо лучшие результаты, чем графика.
- Макет страницы: Способ расположения элементов расположенные на экране, имеют много смысла, что мы интерпретировать при декодировании веб-страниц. Относительное положение подразумевает отношения на множестве разных уровней. Так что необходимо принять крайние меры при создании макеты страниц.Последовательность содержания, графики и изображения играют важную роль в передаче сообщений о продукты и услуги.
- Выравнивание: Выравнивание должно быть видны непосредственно на веб-страницах. Смотрится понятно и легко видимый. Текст с выравниванием по левому краю легче читать, чем текст с выравниванием по правому краю. Итак, при веб-дизайне это предлагается следовать стандарту выравнивания веб-страниц.
- 3D Влияние на графический дизайн: 3D создает ощущение пространства между разным текстом и элементы.Эффекты трехмерной иллюзии — это мощный режим, который можно добиться отличных результатов. Они также могут быть добавлены к общий размер файла подкачки.
- Кнопки навигации: Навигация кнопки помогают посетителям перемещаться по веб-сайту. Кнопка навигации должна быть размещена в верхней части страницу под логотипом компании или внизу слева. Если это трудно найти ссылки, посетители раздражаются, так как они не смогут получить доступ к информации, которую они были ищу на сайте.
Вся эта информация важна и должна быть следовали во время графического дизайна. Все графические изображения на ваш веб-сайт должен совпадать по цвету, шрифту и спецэффекты. Вы можете использовать графику во многих способов на вашем веб-сайте. Вы можете использовать их как маркеры, как ссылки, как способ брендинга, а также как заголовки. Эти все сделать маркетинговый сайт простым способом. Следовательно использование графического дизайна на сайте улучшит ваш сайт и помогает привлечь внимание посетителей или клиентов.
Если вы ищете графических дизайнеров для улучшения привлекательность вашего веб-сайта, тогда вы можете воспользоваться графическим дизайнерские услуги от Roseindia. У нас есть экспертная графика дизайнеров и опытных веб-дизайнеров для удовлетворения ваших ожидания и потребности.
Мы просим вас позвонить нам по телефону +91 9313063554 или написать нам по электронной почте [адрес электронной почты защищен] для ваших потребностей в разработке программного обеспечения.
Цель и руководство по эффективному использованию веб-графики
Веб-дизайн и разработка I
Версия 2.0
Студенческая версия
Назначение графики в веб-дизайне
- Графика добавляет визуальную / эстетическую привлекательность информации на веб-странице, помогая поддерживать интерес и внимание зрителей
- Помогите создать визуальную структуру информации и ссылок на странице
- Передавать или объяснять идеи визуально
Рекомендации по эффективному использованию веб-графики
- Графика должна соответствовать цели, организации и стилю страницы. Они должны улучшать дизайн, структуру или информативность содержание веб-страницы, не отвлекая внимания. Насколько вы можете хотите добавить изображение на страницу, потому что оно демонстрирует какой-то новый необычный эффект вы узнали в графической программе, сначала подумайте, подходит ли она или нет. Вы можете сохранить эти типы графики в своем личном портфолио. под заголовком «Классные эффекты, которые я знаю в своей графической программе».
- Избегайте использования графики с файлами больших размеров, которые увеличивают нагрузку. время страницы. Также учитывайте совокупный размер файла всех изображения на странице. Чрезмерный «вес страницы» из-за плохого качества изображения. использование может привести к медленной загрузке страниц. По данным Йельского университета Руководство по веб-стилю, 2-е издание, «При сегодняшней средней скорости модема больше всего страницы, предназначенные для пользователей, звонящих из дома, должны содержать не более От 50 до 75 килобайт графики. «
- Графика должна помочь сосредоточить внимание зрителей на важный контент на странице. Использование визуально сильных графических элементов на странице может быть полезен для привлечения внимания зрителей и создания структуры для страницы. Но будьте осторожны. Сильные графические элементы тоже могут тянуть отвлекайтесь от центрального контента или соревнуйтесь друг с другом на странице. Это приводит к тому, что страница выглядит чрезмерно загруженной или загроможденной, что делает ее трудно читать. Помните, если вы попытаетесь все подчеркнуть, тогда ничто не выделяется.
- Избегайте повторения слишком ярких или потенциально «неприятных». изображений. Эти типы привлекательных изображений могут быть привлекательными. сначала, но после того, как новизна исчезнет, зрители могут потерять терпение с сайтом. Хотя анимация танцующей обезьяны может показаться сначала интересно и смешно, со временем может надоедать и гонять зрители прочь.
- Избегайте использования графики для передачи текстовой информации. Хотя с точки зрения дизайна может показаться заманчивым использовать изображения для текстовых информация из-за большего количества вариантов дизайна, таких как шрифт выбор и текстовые эффекты, графический текст создает множество проблем: Изображение текста нельзя изменить размер, как настоящий текст, поэтому пользователи с плохим зрением не могут изменить размер. это для удовлетворения их визуальных потребностей; изображения загружаются гораздо дольше, чем текст; пользователи не могут искать изображения текста с помощью функции своего браузера найти ; а поисковые системы могут лучше индексировать веб-сайты, содержащие реальный текст, хорошо структурирован с помощью HTML.
- Обеспечивает альтернативные текстовые эквиваленты для графического содержимого. Помните, что не все пользователи могут видеть изображения на вашей веб-странице. Каждый раз, когда используются изображения, важно предоставлять эквивалентный контент. или описания изображения в текстовом формате. Самый распространенный способ это сделано, чтобы предоставить описательный текст с использованием атрибута alt. Это особенно важно, когда изображения используются в качестве кнопок навигации или ссылок. Подробнее об использовании альтернативного текста и графики для улучшения специальные возможности, прочтите раздел «Графическая разметка» в Руководстве по веб-стилю.
- При использовании текста в графике убедитесь, что имеется достаточный контраст. между текстом и цветом фона. Дизайн графических элементов чтобы пользователи могли легко отличить текст от его предыстория. Также обязательно избегайте цветовых сочетаний (красный и зеленый например), что дальтоники не смогут различить друг от друга.
О веб-графике
Эта страница содержит краткий обзор графики в Интернете.
В учебниках HTML и CSS я объясняю, как встроить графическое изображение в веб-страницу. В HTML вы используете тег img в сочетании с путем к изображению. В CSS вы можете указать фоновое изображение, которое будет отображаться на фоне элемента. Для этого в CSS вы можете использовать свойство background-image (или любое из связанных свойств фона) или свойство border-image .
В любом случае и HTML, и CSS предполагают, что у вас уже есть изображение, размещенное где-то в сети.Из этого туториала Вы узнаете, как создать реальное изображение.
Примеры веб-графики
Прежде чем мы начнем создавать нашу собственную графику, давайте рассмотрим несколько примеров веб-графики.
| Логотип | Логотипы — одно из наиболее распространенных применений веб-графики. У большинства веб-сайтов есть логотип на каждой странице. Логотипы обычно создаются с помощью программного обеспечения для иллюстраций, такого как Adobe Illustrator, а затем экспортируются в формат PNG или GIF. | |
| Фото | Фотографии также становятся все более популярными, особенно с появлением в наши дни большого количества цифровых фотоаппаратов и телефонов с камерой. Фотографии обычно либо сканируются в компьютер, либо импортируются непосредственно с цифровой камеры. После сохранения фотографии на компьютере вы можете внести изменения, изменить ее размер, а затем сохранить в формате PNG или JPEG. | |
| Иконки | Значки | могут помочь веб-сайту выглядеть более профессионально, а также помочь пользователям быстро определить цель ссылки.Иконки обычно создаются с помощью программного обеспечения для иллюстраций, такого как Adobe Illustrator, а затем экспортируются в формат PNG или GIF. |
| Декоративное изображение | Декоративные изображения часто используются для того, чего не могут сделать HTML и CSS. Декоративные изображения также часто используются для повторения фона на веб-страницах. В зависимости от изображения декоративную графику можно создать с помощью программного обеспечения для иллюстраций, например Adobe Illustrator, или программного обеспечения для редактирования изображений, например Photoshop или GIMP.Затем он экспортируется в формат PNG или GIF. |
Веб-графика — Свойства
Большинство браузеров предоставляют простой способ просмотра свойств любого графического объекта в Интернете. Вот пример:
- Загрузить веб-страницу с графикой
- Щелкните правой кнопкой мыши изображение и выберите «Свойства»:
- Теперь вы должны увидеть свойства изображения:
- Иногда путь изображения слишком длинный, чтобы уместиться в окне.В этом случае, в зависимости от вашего браузера, вы можете щелкнуть и перетащить окно, чтобы сделать его шире.
Обновление
Новые браузеры больше не используют Properties для просмотра свойств изображения.
Если у вас нет опции Properties , ищите View Image Info или Inspect Element или аналогичный.
Отображение веб-графики
После создания изображения его необходимо загрузить на веб-сервер, чтобы вы могли отображать его на своих веб-страницах.Вот шаги, которые необходимо предпринять, чтобы получить изображение для отображения на вашем веб-сайте:
- Создайте графику
- Сохранить в веб-формате
- Загрузить на веб-сервер
- Вставьте графику на свою веб-страницу (используя HTML или CSS)
Роль веб-графики
Прежде всего, согласованный интерфейс и идентификационная графика на совокупности веб-страниц определяют границы веб-сайта.«Хотя веб-дизайнеры могут создать сайт без графики, большинство пользователей не сразу распознают набор пустых страниц как единый« сайт », и такой сайт будет казаться неприятно странным, выходящим за рамки норм дизайна и ожиданий пользователей. Графические изображения идентичности, определяющие сайт, не должны быть сложными, но они должны быть единообразными для всего диапазона страниц сайта, чтобы пользователь мог создать ощущение, что ваши страницы представляют собой отдельный регион — связанный, возможно, с большим целым, если вы работать на крупном предприятии, но в некотором смысле отличаться от «места» (рис.11.1).
Рисунок 11.1. Графика сайта — это наиболее мощные инструменты для определения четкого ощущения «места» на всех страницах сайта.
Графика как содержание
Графика служит нескольким целям в качестве элементов контента — наряду с текстовым контентом и дополняет его:
- Иллюстрации: Графика может показать вам вещи, привнося кусочки мира в ваш документ
- Диаграммы: количественные графики и диаграммы процессов могут визуально объяснить концепции
- Количественные данные: числовые диаграммы могут помочь объяснить финансовые, научные или другие данные
- Анализ и причинно-следственная связь: графика может помочь разобрать тему или показать, что ее вызвало Интеграция
- : Графика может объединять слова, числа и изображения во всестороннее объяснение
Иллюстрации
Фотографии и иллюстрации привносят мир в ваш документ кратким и незабываемым образом, сохраняя эту пресловутую «тысячу слов» объяснения.Зачем что-то описывать, если вы можете просто — и более запоминающе — показать это? Интернет — это цветная среда с огромным диапазоном отображаемых цветов, а цветная графика на веб-страницах почти равна качественной печати на бумаге, особенно когда графика воспроизводится примерно того же размера, что и при печати.
Диаграммы и количественные данные
Ограничения разрешения экрана компьютера (72–90 пикселей на дюйм) по сравнению с печатью (300+ точек на дюйм) начинают проявляться, когда вы создаете сложные диаграммы и диаграммы для компьютерной страницы.Большинство графиков диаграмм работают как на экране, так и на бумаге, но типографика меток в диаграммах и диаграммах должна быть оптимизирована для отображения на веб-экранах. Визуальные детали сложных диаграмм, преобразованных из печатных материалов, часто на удивление хороши, но всегда проверяйте типографику на рисунке, поскольку в процессе преобразования надписи могут стать неразборчивыми.
Интегрированные визуальные презентации
Многогранная информационная графика часто объединяет количественные диаграммы, трехмерные иллюстрации и обширные подписи в макетах произвольной формы, которые становятся визуальными повествованиями, способными объяснять сложные концепции и природные явления (рис.11.2).
Рисунок 11.2 — Шедевр графического повествования, в котором легко сочетаются слова, диаграммы и графики данных. Хотя диаграмма была разработана для печатного раздела Science Times New York Times, диаграмма также очень хорошо работает на веб-сайте Times, доказывая, что вам не нужно «упрощать» сложные графики данных для экрана компьютера.
Графическая коммуникация в сети
Диаграмма или диаграмма — это неявное обещание пользователю, что вы сделаете сложный мир более простым для понимания.Наши советы по графическим коммуникациям такие же, как и по письменным коммуникациям:
- Доверьтесь разуму читателя. Не преувеличивайте свой материал, основываясь на предположении, что пользователи Интернета каким-то образом принципиально отличаются от читателей печатных изданий и не интересуются сложностью. Постоянных читателей веб-сайтов, возможно, когда-то можно было отличить от других издателей, но теперь все читают Интернет.
- Уважайте среду. Читатели те же, что и в печатных СМИ, но у Интернета другой профиль сильных и слабых сторон.Воспользуйтесь огромными возможностями Интернета для передачи сложных цветных изображений без затрат на печать и физическое распространение.
- Скажите правду, как вы ее понимаете. Искажение количественных данных — это не просто неспособность сообщить; это предательство доверия читателя.
- Не выбирайте данные чересчур аккуратно. Если вы излагаете аргументы с помощью визуальных доказательств, не обрабатывайте и не редактируйте визуальные эффекты так сильно, чтобы у аудитории не было другого выбора, кроме как принять вашу точку зрения.Доверьтесь своей аудитории настолько, чтобы предоставить им данные: позвольте им взглянуть на те же изображения с более высоким разрешением или неоднозначные результаты, которые вы видели, и решить проблему для себя.
- Будьте смелыми и содержательными. Серьезный интерес к визуальной коммуникации не требует, чтобы вы использовали только маленькую, мышиную графику в бледных тонах. Визуальные доказательства не могут стать убедительными, если их никто никогда не замечает. Просто никогда не пытайтесь поразить аудиторию яркой графикой, чтобы компенсировать тонкий контент.
Рекомендации по созданию веб-графики в Illustrator
Чтобы веб-дизайнеры могли создавать проекты с точностью до пикселя, в Illustrator добавлено свойство выравнивания по пикселям.Когда свойство выравнивания по пикселям включено для объекта, все горизонтальные и вертикальные сегменты в объекте выравниваются по пиксельной сетке, что обеспечивает четкий вид штрихов. При любом преобразовании, пока это свойство установлено для объекта, он выравнивается по пиксельной сетке в соответствии с его новыми координатами. Вы можете включить это свойство, выбрав параметр «Выровнять по пиксельной сетке» на панели «Преобразование». Illustrator также предоставляет параметр «Выровнять новые объекты по пиксельной сетке» на уровне документа, который по умолчанию включен для веб-документов.Если это свойство включено, все новые объекты, которые вы рисуете, имеют свойство выравнивания по пикселям, установленное по умолчанию.
Для получения дополнительной информации см. Рисование контуров с выравниванием по пикселям для веб-рабочих процессов.
Когда вы сохраняете иллюстрацию в растровом формате, таком как JPEG, GIF или PNG, Illustrator растрирует иллюстрацию с разрешением 72 пикселя на дюйм. Вы можете предварительно просмотреть, как объекты будут выглядеть при растрировании, выбрав «Просмотр»> «Просмотр в пикселях». Это особенно полезно, когда вы хотите контролировать точное размещение, размер и сглаживание объектов в растеризованной графике.
Чтобы понять, как Illustrator делит объекты на пиксели, откройте файл, содержащий векторные объекты, выберите «Просмотр»> «Предварительный просмотр в пикселях» и увеличьте изображение, чтобы вы могли видеть отдельные пиксели. Размещение пикселей определяется пиксельной сеткой, которая делит монтажную область на приращения в 1 точку (1/72 дюйма). Вы можете просмотреть пиксельную сетку, если увеличите масштаб до 600%. Если вы перемещаете, добавляете или трансформируете объект, он привязывается к пиксельной сетке. В результате исчезает любое сглаживание по «привязанным» краям объекта (обычно это левый и верхний края).Теперь снимите выделение с команды View> Snap To Pixel и переместите объект. На этот раз вы сможете разместить объект между линиями сетки. Обратите внимание, как это влияет на сглаживание объекта. Как видите, очень незначительные изменения могут повлиять на растеризацию объекта.
Как создавать веб-графику в CorelDRAW
- Обучение
- Практические руководства
- Сделать графику для веб-сайта
Веб-графический дизайн — это так же просто, как настроить страницу, добавить иллюстрацию и использовать параметр «Экспорт для Интернета» в CorelDRAW.Веб-графика используется для предоставления информации или визуально стимулирующего контента, чтобы побудить зрителя проводить больше времени на вашем веб-сайте.
1. Установите размер страницы
Размер документа зависит от размера изображения. В диалоговом окне «Новый документ» ( File> New ) в поле Name : введите имя файла как ‘Captn_Bobs’ .Затем в раскрывающемся списке Preset destination выберите Web . Вы заметите, что это изменило единицу измерения на пиксели и разрешение рендеринга на 96 точек на дюйм. В разделе «Размер» установите Width на 450 и Height на 235. Нажмите OK.
2. Добавление графических элементов
Из ( Файл> Импорт ) перейдите туда, где находится логотип, и импортируйте его.Разместите логотип в левой части страницы и установите его размер 222 x 222. Теперь добавьте мои текстовые элементы, и все готово.
3. Экспорт для Интернета
Существуют различные форматы файлов, которые можно использовать при экспорте в Интернет. К ним относятся GIF, JPG, PNG, каждый из которых имеет свои особенности. GIF89a и SVG также можно экспортировать из CorelDRAW.PNG или переносимая сетевая графика является наиболее универсальной, поскольку поддерживает 24-битный цвет, а также прозрачность.
Из ( Файл> Экспорт в> Интернет ) Откроется диалоговое окно «Экспорт для Интернета», в котором вы можете выбрать такие варианты, как GIF, JPG, PNG, вы также можете установить глубину цвета и разрешить прозрачность, если это необходимо.
CorelDRAW не просто создает графику для веб-сайтов
Ознакомьтесь с некоторыми другими функциями графического дизайна в CorelDRAW Graphics Suite, такими как «Как создать значок веб-сайта», «Как создать этикетку», «Как создать флаер» и т. Д.! Создавайте высококачественные дизайны в увлекательной и простой в использовании программе для графического дизайна и сделайте свою работу ярче, чем когда-либо.
Как создать плакат Как сделать брошюру Как сделать подарочный сертификат Как сделать свой собственный календарь .