Создание анимированной карты сайта

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ

" ГОМЕЛЬСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ П.О. СУХОГО"

Институт повышения квалификации и переподготовки кадров Кафедра «Информатика»

РАСЧЕТНО-ПОЯСНИТЕЛЬНАЯ ЗАПИСКА к курсовой работе по дисциплине «Информатика»

на тему: «Создание анимированной карты сайта»

Исполнитель: слушатель гр. ЗВД-23

А.В. Торчишник Руководитель: С. М. Горский Гомель 2013

• Введение
• 1. Разработка логотипа обучающей очно-заочной олимпиады
• 2. Разработка баннера сайта «Областные математические олимпиады»
• 3. Реализация
• Заключение
• Список литературы

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

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

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

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

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

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

Существует 4 основных вида логотипов: символические, текстовые, буквенно-цифровые и комбинированные. Кроме того, логотипы могут быть созданы в виде анимации.

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

Целью данной курсовой работы является создание логотипа и баннера для образовательного сайта.

Задачи курсовой работы: с помощью графического редактора изобразить логотип обучающей очно-заочной олимпиады и баннер сайта «областные математические олимпиады» .

1. Разработка логотипа обучающей очно-заочной олимпиады

Логотип (от др. — греч. льгпт — слово + фэрпт — отпечаток) — графическое начертание фирменного наименования в виде стилизованных букв и/или идеограммы. Логотипы широко применяются для изображения товарных знаков и в качестве эмблем. [1]

Выделяют различные типы логотипов, например:

· Оригинальное графическое начертание названия.

· Фирменный знак. Буквенное начертание

· Фирменный блок — комбинация названия и знака.

Требования к логотипу:

· запоминаемость

· универсальность

· оригинальность

· ассоциативность

· выразительность

· функциональность

· лаконичность

· уникальность

Для создания логотипов, а так же при верстке полиграфической продукции (визиток, буклетов, журналов и т. д.), традиционно пользуются векторной графикой.

Векторная графика — способ представления объектов и изображений в компьютерной графике, основанный на использовании элементарных геометрических объектов, таких как точки, линии, сплайны и многоугольники. Объекты векторной графики являются графическими изображениями математических функций. Термин используется в противоположность к растровой графике, которая представляет изображение как матрицу фиксированного размера, состоящую из точек (пикселей) со своими геометрическими параметрами. [2]

Наиболее яркие представители семейства векторных программ или, более точно, программ иллюстративной графики: Adobe Illustrator, Macromedia FreeHand, CorelDraw.

Самый подходящий и удобный редактор векторной графики на мой взгляд — Adobe Illustrator cs5, его и рассмотрим. Большим плюсом является схожесть интерфейсов Adobe illustrator и Adobe Photoshop, что помогает при работе в этих программах. [3]

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

Программа векторной графики Adobe Illustrator CSх разработана известной фирмой-производителем графических продуктов Adobe Systems Inc. Она предназначена для создания макетов графических документов, с целью их публикации на бумаге и в электронном виде. Файлы программы Adobe Illustrator сохраняются в формате Ai или Eps. Основными отличиями Illustrator от других программ подобного типа являются ее очень широкие функциональные возможности по художественному оформлению содержимого документа. [5. с.71]

Круг потенциальных пользователей программы включает в себя как профессиональных художников и дизайнеров, занятых подготовкой печатных изданий, так и огромное число разработчиков Web-страниц и мультимедийной графики. Всем им Adobe Illustrator предоставляет превосходный инструментарий для создания художественных изображений профессионального качества. Эта программа входит в состав пакета графических программ Adobe Creative Suite (CS).

Перечислим основные функциональные возможности этой программы

Создание в документе векторных объектов с помощью линий, различных геометрических фигур, обработка контуров этих объектов;

Большое количество функций по обработке текстовой информации;

Широкий выбор заливок и обводок;

Растрирование объектов произвольных типов;

Регулировка прозрачности и режимов смешения цветов для разных объектов;

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

Работа с символами и их потомками (копиями символов в документе);

Широкие возможности регулировки прозрачности и режимов смешения цветов для объектов произвольных типов;

Новое в интерфейсе Adobe Illustrator CS5:

Интерфейс программы не претерпел глобальных изменений, но первое, что бросается в глаза это то, что теперь по умолчанию исходное положение вертикальных и горизонтальных осей в Adobe Illustrator CS5 находится в левом верхнем углу, как и в других приложениях CS, а не в нижнем левом, как это было в предыдущих версиях Adobe Illustrator CS5. [6. с.96]

В документе в зависимости от размера можно создавать от 1 до 100 рабочих областей. Число рабочих областей для документа можно задавать при его создании, в ходе работы с документом их можно добавлять и удалять. Рабочие области можно менять местами, задавать порядок очерёдности, расположение относительно друг друга в виде столбца, матрицы и т. д. Размеры рабочей области изменяются относительно опорной точки, как и любой объект.

Добавили также мгновенное объединение кривых, достаточно просто выделить кривые и нажать Ctrl +J. Для того чтобы выбрать объект заднего слоя, достаточно нажать Ctrl и щелкнуть по объекту.

Новые инструменты Adobe Illustrator CS5:

Для начала рассмотрим, что нового в инструментах для рисования.

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

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

Сделаны некоторые улучшения, связанные с поворотами кисти, что дает возможность легче контролировать пересечение и объединение объектов рабочей области, чтобы избежать наложений или пустых мест. Также улучшена работа с пунктирными линиями. Для штриховых линий есть режим, когда штрихи на углах и концах кривой будут симметрично подгоняться или оставаться как есть. Также добавлена точность масштабирования стрелок (Arrowhead), теперь можно выбрать вид стрелок на концах кривой, стрелки также можно заменить своими. [6. с.171]

2. Разработка баннера сайта «Областные математические олимпиады»

Баннер — графический элемент страницы сайта, который является по сути своей графическим файлом jpg, gif или flash формата (другие форматы используются крайне редко), определённых размеров. Самое главное свойство баннера то, что он является гиперссылкой, которая ведёт на другой сайт. Это его и отличает от простой дизайнерской графики сайта.

При создании большинства баннеров используют растровую графику.

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

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

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

Рассмотрим растровый графический редактор Adobe Photoshop cs5. Adobe Photoshop CS5 — программа для обработки растровой графики, поддерживающая множество графических форматов. [8. с.77]

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

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

Революционный инструмент Content-Aware Fill с развитым интеллектом позволяет моментально удалять любой объект или часть изображения, осуществляя заливку образовавшегося пространства с учетом остальных деталей изображения. Он точно подбирает освещение, тон и уровень шумов в зависимости от окружающей области, что позволяет полностью устранить любые следы удаляемого объекта. С помощью нового инструмента Refine Edge пользователи могут осуществлять выделение, которое было практически недоступно ранее. Инновационная технология с высокой точностью определяет и создает маску для самых сложных типов объектов, например, волос или листвы деревьев, при этом не захватывая фон.

С появлением Photoshop CS5 фотографы получат в свое распоряжение функции нового поколения для создания изображений с расширенным динамическим диапазоном (HDR). Сочетая фотографии с различной экспозицией в одном HDR изображении, Photoshop CS5 с высокой точностью сохраняет полный диапазон тональности сцены. Новая технология HDR Pro позволяет устранять паразитные искажения и обеспечивает более точное управление тональным отображением. Благодаря функции HDR тонирования пользователи могут имитировать впечатляющие HDR изображения, используя единственную фотографию. [8. с.127]

Photoshop CS5 включает в себя революционные инструменты, позволяющие повысить творческий потенциал пользователей. Принципиально новые средства рисования включают в себя инструмент Mixer Brush, который смешивает бесконечное количество цветов на одной кисти, инструмент Bristle Tips, создающий эффект мазка настоящей кисти. С помощью инструмента Puppet Warp пользователи могут изменить положение или вид любого элемента на изображении, например, выпрямить согнутую руку на фотографии или скорректировать изображение ландшафта для создания новой пространственной перспективы.

Таким образом можно отметить, что Adobe Photoshop CS5 является одним из лучших графических растровых редакторов.

3. Реализация

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

Разработка логотипа будет осуществляться в программе Adobe Illustrator CS5. Запускаем Adobe Illustrator CS5 и создаем новый файл размером 600*600 пикселей, цветовой режим — CMYK.

логотип баннер графический редактор Рисунок 3.1 — Создание нового файла в Adobe Illustrator CS5.

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

Нарисовать с помощью графического планшета в Adobe Illustrator CS5;

Нарисовать от руки на бумаге, отсканировать, открыть в Adobe Illustrator CS5 и при помощи трассировки перевести в вектор.

Используем первый способ, рисуем изображение рыси при помощи графического планшета Wacom Bamboo Pen и инструмента «Карандаш» в Adobe Illustrator CS5.

Рисунок 3.2 — Стилизованное векторное изображение рыси без заливки.

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

Далее выполняем заливку контура черным цветом.

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

Рисунок 3.4 — Стилизованное изображение академической шапочки Далее уменьшаем созданные иллюстрации и помещаем их рядом.

Рисунок 3.5 — Готовый логотип Рисунок 3.6 — Экспортированный в gif — формат логотип Логотип был создан в векторном формате и экспортирован в формате gif для превью. При создании логотипа была учтена тематика сайта, для которого логотип создавался, а также все требования, предъявляемые к логотипу и описанные в первом разделе.

При создании баннера в первую очередь необходимо выбрать его размер. Создадим стандартный длинный баннер 728 * 90 пикселей. Большое внимание следует уделить и тематике сайта, для которого разрабатывается баннер. В данном случае это сайт, связанный с математическими олимпиадами.

Создаем новый файл размером 728*90, цветовой режим — RGB.

Рисунок 3.7 — Создание нового файла в Adobe Photoshop CS5

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

Рисунок 3.8 — Создание фонового слоя

Рисунок 3.9 — Создание фонового слоя Далее создаем новый слой и помещаем на него фотографию части калькулятора.

Рисунок 3.9 — Добавление калькулятора Продолжаем наполнять баннер. На новом слое добавляем фотографию исписанного формулами листа бумаги. Применяем режим наложения — «Затемнение». При таком режиме края листа с формулами не видны.

Рисунок 3.10 — Добавление формул Добавляем фотографии ручки, карандаша и точилки.

Рисунок 3.11 — Добавление ручки, карандаша и точилки.

Добавляем надпись «Областные математические олимпиады» .

Рисунок 3.12 — Добавление надписи

Рисунок 3.13 — Конечный вид баннера Баннер был создан в программе Adobe Photoshop cs5, которая является одной из лучших для работы с растровой графикой. Существует множество других растровых графических редакторов, но при работе с векторной и растровой графикой разумно использовать продукты Adobe — Photoshop и Illustrator.

Заключение

Курсовая была выполнена в графических программах Adobe Photoshop CS5 с помощью растровой графики и Adobe Illustrator CS3 с помощью векторной графики.

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

В ходе работы можно сделать следующие выводы:

1) Логотипы и баннеры имеют большую роль в современном мире. Они являются отличительным знаком компаний, сайтов и способствуют привлечению клиентов.

2) За историю развития появилось несколько видов логотипов: Символические, текстовые, комбинированные, буквенно-цифровые.

3) На сегодня существует множество программ для разработки логотипов и баннеров, поэтому их можно создавать в домашних условиях.

4) Логотип должен соответствовать определенным требованиям.

5) Логотипы и баннеры выполняют множество функций.

6) Успех логотипа и баннера зависит от его формы и цвета. Правильно подобранные цвета будут эффективней привлекать внимание.

7) Adobe Illustrator CS3 более подходит для создания логотипов, а Adobe Photoshop CS5 для создания растровых баннеров.

1) Материалы с сайта http://ru. wikipedia.org/

2) Материалы с сайта http://images. yandex.ru/

3) Материалы с сайта http://photoshop-edu. info

4) Материалы с сайта http://www.ps-lessons.ru

5) С. Дженкинс. «Веб-дизайн». — М.: Эксмо, 2008. — 480с.

6) Adobe Illustrator CS3С.В. Глушаков, С. А. Золотарев АСТ, АСТ Москва 2008 г — 464 стр.

7) Adobe Illustrator CS3: Classroom in a Book: The Official Training Workbook from Adobe SystemsПереводчики: Татьяна Грищук, А. Румянцев Издательство: Триумф. 2008 г. 464 стр.

8) Photoshop CS5. Креативные инструменты для творчества (+ DVD-ROM) А. А. Прохоров, Р. Г. Прокди, М. В. Финков Русский изд. Наука и техника 2011 г. 232 стр.