пособие для чайников
Графические элементы в веб-дизайне |
Графические элементы являются важной составляющей оригинального дизайна веб-сайта, также они дополняют и оживляют текст контента, помогают читателям лучше понять то, что пытается донести до них автор. Один лишь голый текст не может передать столько же информации, как текст в сочетании с несколькими хорошо подобранными изображениями. Основная особенность оформления веб-страниц - это необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве. Начинающим веб-строителям необходимо знать, что графика, которая создается для веб-страниц, в отличие от графики, предназначенной для книжной публикации или просмотра на экране телевизора или монитора, имеет свои специфические особенности, знание которых необходимо, чтобы сайт выглядел профессионально и загружался быстрее. Когда посетитель извлекает веб-страницу с элементами графики, общий размер файлов изображений определяет, сколько времени потребуется веб-браузеру на загрузку и отображение страницы. Если ваши графические файлы слишком велики и сайт загружается долго, посетитель может потерять терпение и перейти на другой ресурс.Также недоверие к вашему сайту может вызвать некачественная графика, используемая в дизайне или в оформлении контента. Особенности векторного и растрового вида графикиВ веб-дизайне используются два вида графики: растровый и векторный. Достоинством растровой графики является ее реалистичность и документальность. Недостаток точечных изображений – большие размеры растровых файлов. Это связано с тем, что в растровой графике каждая точка (пиксель) несет информацию о цвете, яркости и местоположении. При масштабировании изображения часть точек исключается, в результате происходит значительное искажение изображаемого объекта – это еще один недостаток. Самой популярной программой для обработки растровой графики является Adobe Photoshop. освоить эту программу в короткие сроки вам помогут отличные видео-уроки - «Фотошоп с нуля в видеоформате», "Photoshop CS5 от А до Я", "Фотошоп уроки для повышения мастерства". В векторной графике элементами изображения становятся не пиксели, а комбинация простых геометрических фигур - точек, отрезков прямых и кривых, окружностей, прямоугольников и т. п. Изображение представляет собой математическую модель, которая описывает протяженность линий, их кривизну, цвет, местоположение. Достоинством векторных изображений является их компактность. Еще один плюс - векторная картинка масштабируется без искажений. Однако есть существенный минус – векторные изображения схематичны, упрощены и лишены деталей. Самыми популярными программами по созданию векторной графики являются: Adobe Illustrator, Corel Draw, Adobe Flash. Форматы графических файлов в веб-дизайнеЛюбая компьютерная информация может храниться только в определенном формате. Каждый вид информации имеет собственные форматы. Для текста используются одни форматы, для электронных таблиц - другие, для графики - третьи. Формат графической информации обычно определяется программой, которой она создана. Для веб-графики стандартными считаются форматы JPEG, GIF и PNG. Прежде чем создавать графические изображения для сайтов веб-мастер должен понимать суть и особенности вышеперечисленных форматов, чтобы использовать их наиболее эффективно. В форматах GIF (Graphic Interchange Format) и PNG (Portable Network Graphic) применяется сжатие изображения без потерь информации. В JPEG (Joint Photographic Experts Group) используется сжатие с потерями. При этом сжатое изображение будет отличаться от исходного в худшую сторону, причем возврат к начальному состоянию оригинала после сжатия будет уже невозможен. Из трех вышеперечисленных форматов JPEG используется главным образом для отображения многоцветных фотографий, тогда как формат GIF чаще всего применяется для аппликаций, иллюстраций и рисунков. Формат PNG использует комбинацию схем сжатия GIF и JPEG. Существуют две разновидности формата PNG: PNG-8 и PNG-24. Формат PNG-8 может работать только с графикой, содержащей максимум 256 цветов. Следовательно, формат PNG-8 весьма сходен с форматом GIF. Кроме того, в PNG-8 используется метод сжатия RLE, аналогичный GIF-сжатию. Применение формата PNG-8 к изображениям дает небольшие размеры файлов, близкие к размерам файлов формата GIF. Формат PNG-24 может обрабатывать изображения, содержащие миллионы цветов, и применяется для минимизации размеров файлов фотоизображений. Однако, поскольку формат PNG не удаляет пиксели цвета, как формат JPEG, то сохранение фотографий с использованием формата PNG-24 зачастую создает файлы чересчур большого размера, что делает неприемлемым их использование на Web-страницах. Создавая дизайн сайта, или наполняя контент изображениями, помните - чем меньше, размер графического файла, тем быстрее веб-браузер сможет загрузить его и отобразить на веб-странице. Однако при этом не забывайте о качестве графики, чтобы ваш сайт не был похож на старую выцветшую газету с жуткими размазанными картинками.
|