Виды графических редакторов

СОЗДАНИЕ ГРАФИКИ И GIF-АНИМАЦИИ ДЛЯ WEB-САЙТА

Курсовая работа по дисциплине:

Веб-дизайн

Выполнил студент группы №45

Л.П. Безверхова 03.07.15

Специальность:Информационные системы и технологии

Профиль:Информационные системы и технологии в образовании

Форма обучения: Очная

Научный руководитель

доц. О.М. Осокина

______________

(подпись)

_____________

(оценка)

«___» ________ 20__г.

Новосибирск 2015

СОДЕРЖАНИЕ

ВВЕДЕНИЕ...................................................................................................... 3

1 ВВЕДЕНИЕ В ДИЗАЙН WEB-СТРАНИЦ.................................................. 5
1.1 Что такое web-узел?..................................... .........................................5
1.2 Виды графических редакторов............................................................ 9
1.3 Форматы интернет-графики............................................................... 13

2 ОСНОВЫ СОЗДАНИЯ ГРАФИКИ............................................................ 16
2.1 Создание графики для веб-страницы................................................ 16
2.2 Вставка графики в интернет-ресурс.................................................. 20

ЗАКЛЮЧЕНИЕ.............................................................................................. 22

БИБЛИОГРАФИЧЕСКИЙ СПИСОК............................................................ 23

ВВЕДЕНИЕ

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

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

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

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

Объект: является изучение основ компьютерной графики в растровых и векторных графических приложениях.

Предмет: создание графики и gif-анимации.

Задачами работы являются:

• рассмотреть виды графических редакторов;

• изучить основы Web-дизайна;

• разработать мультимедиа для сайта.

При этом использованы следующие методы:

• изучение литературы;

• изучение графических редакторов;

• оценивание.

Изображения всегда лучше передают суть, ведь при изучении текста, идет визуальное восприятие, и наглядное представление материала отлично показывает содержание. Слова «лучше один раз увидеть, чем сто раз услышать» в нашем случае, прочитать, отлично раскрывают смысл визуального восприятия.

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

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

ВВЕДЕНИЕ В ДИЗАЙН WEB-СТРАНИЦ

Что такое web-узел?

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

Так, что же такое Web-дизайн? Web-дизайн — это область дизайна, связанная с web-разработкой, графическим оформлением структуры сайта и проектированием пользовательских веб-интерфейсов. Другими словами, web-дизайн представляет собой логическую структуру web-страниц, с удобной и яркой подачей информацией, а также художественным оформлением интернет-ресурса. Функция, что несет в себе сайт, это донести нужную информацию до различной аудитории. А правильный дизайн сайта, заменяет нам своего рода средства массовой информации, преимущества которого известны многим. Ведь именно интернет-ресурс не загнал в рамки времени и доступа, как в этом ограничены телепередачи или газеты, которым отведено определенное время или размер колонки. И напротив web-сайт доступен из любой точки планеты, в любое нужное время, где есть доступ в Интернет.

При создании сайта, мы должны обозначить задачи, которые могут вставь перед разработчиком:

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

2. Привлечение внимания;

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

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

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

Детальное рассмотрение процесса создания сайта, поможет нам точно знать, чем необходимо заняться на различным этапах разработки:

1. Техническое задание (ТЗ);

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

2. Структурирование информации;

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

3. Графическое оформление;

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

4. Верстка;

На данной стадии графическая картинка нарезается на отдельные элементы и с использованием формата HTML (Hyper Text Markup Language – язык разметки гипертекста).Язык трансформируется в код, который можно просматривать с помощью браузера.

5. Вебмастеринг.

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

При создании сайта мы также не должны придерживаться еще одному руководству по дизайну страниц:

1. Простота;

2. Центрированная разметка;

3. Небольшое количество колонок;

4. Отдельная верхняя секция;

5. Яркие цветные блоки;

6. Простая навигация;

7. Увеличенный размер шрифтов;

8. Вставки большого текста (обычно реализованы в виде графического элемента);

9. Индивидуальный логотип.

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

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

– Корпоративный сайт, является представителем какой-либо организации (фирмы, университета), но только уже во всемирной сети. Именно к таким сайтам, имеются самые высокие требования по оформлению дизайна Web-страницы. Ясная, четкая структура сайта, соответствующая цветовая гамма, уникальность графических элементов, индивидуальный мощный логотип, будут выделять и придавать «изюминку» такому сайта. Текстовая информация на ровне балансирует с графическим дизайном.

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

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

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

Виды графических редакторов

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

Графика на Web-страницах существует не так давно. Предназначенный для этого тег появился еще в версии 3.2 языка HTML, которая вышла в 1997 году. Именно с этого момента всем известный интернет закружили в водовороте интернет-графики.

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

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

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

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

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

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

3. Фрактальная компьютерная графика – предназначена для автоматической генерации изображений путем расчета математических уравнений.

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

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

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

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

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

Одни из популярных представителей таких редакторов:

- Corel Draw.

Corel Draw– первый известный представитель графических редакторов векторного типа. Свою популярность редактор заработал при помощи простого интерфейса, наличию библиотек, мощнейшими многофункциональными возможностями. Рисование векторной графики, создание дизайна интерьера, работа с текстом, свободное создание шрифтов, редактирование фотографий, рисование узоров, позволяя создать свой индивидуальный дизайн, все это и многое другое показывает огромный спектр возможностей данного векторного редактора. Одно из главных преимуществ редактора его доступность для новичков, позволяющее быстро разобраться с функциями программы (рис.1).

Рисунок 1 — создание логотипа в редакторе Corel Draw

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

Популярные виды растровых редакторов:

- GIMP.

GIMP– свободный популярный продукт в сфере растровой графики. Данный редактор имеет длинный список возможностей, от примитивного рисования, создания логотипов и редактирования фотографий, до создания художественной анимации. Бесплатный пакет GIMP прост и удобен в использовании, имея интерфейс на русском языке, а так же на многих других.

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

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

Широкую популярность в области 3D моделирования заслужили такие редакторы как:

- Blender 3D.

Blender 3D– редактор трехмерного моделирование, важным преимуществом которого является его свободное пользование, выделяя его на фоне платных пакетов 3D графики. Программа представляет собой прекрасную платформу деятельности для художников, предоставляя удобный интерфейс с необходимыми инструментами. Создание широкоформатной анимации, детальное моделирование персонажей и сложных динамических объектов, реалистичные эффекты, применяемые в кино, а так же проектирование интерьера любых сложностей.