Подякувати Студентському архіву довільною сумою
Admin
26.02.2023 12:38
Дякуємо, що користуєтесь нашим архівом!
Створення Сайту Моя Україна
Інформація про навчальний заклад
ВУЗ:
Інші
Інститут:
ВНТУ
Факультет:
Програмна Інженерія
Кафедра:
Не вказано
Інформація про роботу
Рік:
2016
Тип роботи:
Курсова робота
Предмет:
Комп'ютерна графіка
Частина тексту файла (без зображень, графіків і формул):
АНОТАЦІЯ
У курсовій роботі було розроблено статичні та динамічні графічні зображення для веб-сайту «Моя Україна». Було розроблено такі сторінки сайту, як головна, міста, подорожі, про нас, контакти, та персональні сторінки для деяких міст України. Для кожної сторінки було створено відповідне графічне та інформаційне наповнення.
Під час проектування було проведено багатоваріантний аналіз розв’язку задачі, розроблено логічну та фізичну структури сайту, підібрано коректну кольорову гаму та проведено тестування роботи сайту. Робота проводилась з використанням засобів Adobe Photoshop CC та Adobe Primere Pro CC.
Розроблено програмний додаток, який реалізує алгоритм виведення параболи. Програму розроблено у середовищі проектування Visual Studio 2013 мовою програмування C#.
ЗМІСТ
ВСТУП 5
1 БАГАТОВАРІАНТНИЙ АНАЛІЗ РОЗВ’ЯЗКУ ОСНОВНОЇ ЗАДАЧІ 6
2 РОЗРОБКА СТРУКТУРИ САЙТУ 9
3 ВИБІР КОЛЬОРОВОЇ ГАМИ 14
4 РОЗРОБКА ЛОГОТИПУ САЙТУ 18
5 РОЗРОБКА СТАТИЧНИХ ЗОБРАЖЕНЬ 22
6 РОЗРОБКА ДИНАМІЧНИХ ЗОБРАЖЕНЬ 26
7 ОЦІНКА ОБСЯГІВ ЗОБРАЖЕНЬ 31
8 ТЕСТУВАННЯ РОБОТИ САЙТУ 33
9 РОЗРОБКА ПРОГРАМНОЇ КОМПОНЕНТИ 35
ВИСНОВКИ 38
ПЕРЕЛІК ПОСИЛАНЬ 39
ДОДАТКИ 40
Додаток А. Статичні зображення 41
Додаток Б. Динамічні зображення 43
Додаток В. Html – лістинг таблиці стилів та головної сторінки сайту 45
Додаток Г. Лістинг програмної компоненти 53
ВСТУП
Стрімкий розвиток засобів обробки інформації приводить до зростання ролі людського чинника. Для ефективного розв'язку задач великі обсяги інформації необхідно представити в зручному для користувача виді з заданою точністю в реальному масштабі часу. У таких умовах основною проблемою стає організація ефективної інформаційної взаємодії людини з ЕОМ. Найбільш зручне представлення великих об’ємів даних забезпечує графічна форма, яка дозволяє провести візуальну оцінку результатів обчислення, внести необхідні корективи, тощо.
Розрізняють чотири види комп'ютерної графіки. Це растрова графіка, векторна графіка, тривимірна і фрактальна графіка. Вони відрізняються принципами формування зображення при відображенні на екрані монітора або при друці на папері.
Растрову графіку застосовують при розробці електронних (мультимедійних) і поліграфічних видань. Частіше для цієї мети використовують відскановані ілюстрації, підготовлені художником на папері, або фотографії. Програмні засоби для роботи з векторною графікою навпаки призначені, в першу чергу, для створення ілюстрацій і в меншій мірі для їх обробки. Тривимірна графіка широко використовується в інженерному програмуванні, комп'ютерному моделюванні фізичних об'єктів і процесів, в мультиплікації, кінемотографіі і комп'ютерних іграх. Програмні засоби для роботи з фрактальною графікою призначені для автоматичної генерації зображень шляхом математичних розрахунків [1].
Комп’ютерна графіка знайшла широке застосування у сфері веб-дизайну. Використовуючи в сайті графічні ресурси можна впливати на це відчуття, привертаючи увагу до об'єкта дизайну, добитися необхідного ступеня сприйняття потенційними клієнтами сайту.
Із використанням можливостей сучасних графічних редакторів буде розроблено графічне забезпечення для сайту «Моя Україна». 1 БАГАТОВАРІАНТНИЙ АНАЛІЗ РОЗВ’ЯЗКУ ОСНОВНОЇ ЗАДАЧІ
Мистецтво графічного дизайну можна визначити як створення візуальних образів за допомогою ліній, штрихів, крапок і інших елементів, з метою передачі індивідуальної ідеї та образу. Графічний дизайн виконує ряд найважливіших функцій в процесі створення сайту.
Одна з основних функцій графічного дизайну при створенні сайту - відповідати очікуванням інтернет-аудиторії та здійснювати емоційний вплив на відвідувачів сторінки. Зараз практично не існує веб-сайтів, які не містили б графічних елементів. Будь-який ресурс, навіть якщо його призначення полягає в суто текстовому інформуванні, буде хоч якось та прикрашений графічними елементами - без кнопок, піктограм і логотипу ніяк не обійтися. Однак слід обдумано і акуратно підходити до оформлення сторінок з використанням графічних елементів [2].
Для графіки на веб-сторінках є деякі поради, керуючись якими можливо істотно поліпшити якість ресурсу. Нижче наведено основні з них:
У процесі розробки сайту обов'язково потрібно враховувати поєднання кольорів. Найголовнішим завданням web-дизайнера є пошук гармонії поєднання кольорів. Під цим поняттям розуміють комбінації невеликої кількості кольорів, які гармонійно виглядають один з одним при розташуванні в певному порядку.
Ефективно працюючий сайт поєднує в собі стильний і лаконічний веб-дизайн, інтерфейс, зрозумілий навіть на перший погляд і максимальну зручність.
Забезпечення зручності навігації за допомогою графіки. Наприклад, великі помітні кнопки допомагають відвідувачам орієнтуватися всередині сайту і здійснювати потрібні дії.
Графічні елементи служать для поліпшення іншого вмісту або використовуються як самостійні об'єкти. Користувачі швидше знаходять інформацію, якщо використовують зорові орієнтири. Ясні і прості зображення часто найбільш ефективні.
Розміщення графічних зображень на сайті обов'язково має підкорятися логіці, при цьому не можна вводити користувачів в оману. Всі ілюстрації до тексту повинні бути розташовані саме таким чином, щоб не можна було прийняти їх за елемент меню або за контекстну рекламу.
Також слід відмітити деякі недоліки при використанні графіки в веб-ресурсах. Графічне меню сайта виглядає красиво та притягує увагу користувача, але пошукові роботи віддають перевагу текстовому меню, яке відіграє дуже важливу роль у внутрішній структурі сайту. Текстове меню - один з головних інструментів індексації внутрішніх сторінок сайту і їх ранжирування в пошуковій видачі [3].
Слід зазначити, що роботи пошукових машин прекрасно індексують графічне меню, однак текстове меню передасть більше ваги, завдяки ключовому слову в тексті посилання. Тому по можливості, слід надати альтернативне текстове меню з посиланнями на основні розділи сайту.
Також в останній час виросла популярність Flash-анімації, що робить сайт набагато красивішим та інтерактивнішим. Проте не слід забувати, що розміщуючи Flash-анімацію, потрібно пам’ятати про тих користувачів, на комп'ютерах яких не встановлений програвач Macromedia Flash Player. Не ставлячи текстових посилань для скасування ролика або не роблячи альтернативної версії сайту можна втратити велику частину користувачів.
Для обробки зображень існує багато графічних редакторів, найпопулярнішими серед яких є Microsoft Paint, Microsoft Photo Editor, Adobe Photoshop, Adobe Fireworks, Adobe Flash, Corel Photo-Paint, Gif-Animator.
У курсовій роботі для розробки статичних та динамічних зображень сайту використовувалася програма Adobe Photoshop, який являється популярним редактором по обробці растрової графіки, що підтримує різні графічні формати і дозволяє як створювати нові зображення, так і редагувати фотографії. Основне застосування програми - це створення фотореалістичних зображень, робота з кольоровими зображеннями, корекція кольору, трансформація графічних файлів, кольороподіл, а також ретуш та створення колажів і т.д. В арсеналі Фотошопа є різні методи по роботі з растровими зображеннями, зокрема можливість роботи в багатошаровому режимі і використання контурів.
Саме тому програму Adobe Photoshop було обрано для обробки зображень для сайту. Було вирішено використовувати Adobe Photoshop версії CС, оскільки ця версія містить всі функції, які необхідні для розробки статичних та динамічних зображень.
Для обробки та монтування відео на сайті був застосований відеоредактор Adobe Premiere Pro версії СС. Adobe Premiere Pro - це потужний, редактор для нелінійного монтажу, за допомогою якого можна монтувати відео саме так, як вам цього хочеться. Імпорт і вільне об'єднання будь-яких відеозаписів, від кліпу, знятого на телефон, до необробленого 5K, з подальшим монтажем, для якого не потрібно виконувати перекодування. Premiere Pro підтримує відео з високою роздільною здатністю до 10 240 × 8192 пікселів на дюйм та високоякісне редагування відео з 32-бітовим кольором (RGB та YUV кольоровий простір). Програма також дає можливість редагування аудіо-семплів, підтримує VST аудіо плагіни (plug-in), та звукових доріжок 5.1 surround. Архітектура Premiere Pro плагінів дозволяє імпортувати та експортувати матеріали таких контейнерів як QuickTime чи DirectShow, а також підтримує чималу кількість відео- й аудіоформатів MacOS та Windows. При використанні серії плагінів CineForm Neo, він підтримує 3D редагування з можливістю перегляду 3D матеріалу з використанням 2D моніторів, здійснюючи окремо коригування для лівого і правого ока.
Отже, у ході виконання курсової роботи використовуються програми:
Adobe Photoshop CС – для створення графічних зображень;
Adobe Premiere Pro СС – для редагування і подальшого монтажу відео.
Вибір саме цих програмних засобів обумовлений тим, що дані програми є досить функціональними, мають значну гнучкість налаштувань, безліч корисних розширень, дозволяють генерувати зображення та анімацію високої якості, мають дружній інтерфейс та легкі у розумінні.
2 РОЗРОБКА СТРУКТУРИ САЙТУ
Щоб виграти битву потрібен план битви. Щоб не заблукати в лабіринті і знайти вихід, потрібен план лабіринту. При пошуку скарбів без плану місцевості не обійтися. Щоб створити сайт також потрібен план. Чітко розписаний, що, де буде розташовуватися. Цей план і називається розробкою структури сайту.
Структура сайту - це логічна розмітка і фізична зв'язка сторінок сайту, а так само розташування видимих елементів дизайну, обумовлена стандартами розробки сайтів. Розділяють зовнішню і внутрішню структуру.
Зовнішня структура включає в себе розташування видимих блоків на сайті (шапка, сайтбари, футер, інформери, службові форми та інші блоки). Розробка зовнішньої структури тісно пов'язана з технічним створенням сайту.
Внутрішня структура включає в себе приналежність матеріалів до певних категорій, а категорій до розділів (іншими словами - рубрикацію), а так само посилальну в'язку сторінок. На деяких джерелах рубрикацію називають логічною структурою [4].
У процесі складання структури визначається :
які розділи є найбільш важливими, а які другорядними;
які розділи варто включати в навігаційне меню;
авторитетність яких сторінок потрібно підвищувати внутрішніми посиланнями;
під які запити з семантичного ядра не вистачає сторінок на сайті і необхідність їх створювання.
Види внутрішньої структури сайту:
1. Лінійна структура. Якщо матеріал вибудовується в логічний ланцюжок, утворюється лінійна структура. Лінійний ланцюжок зобов'язаний мати початок і кінець. Перегляд сайту з середини зазвичай позбавлений сенсу.
2. Деревовидна структура. Вміст кожної сторінки крім першої входить у вигляді підрозділу в сторінку більш високого рівня.
3. Гібридна структура. На практиці використовуються і деревоподібна і лінійна структури. Наприклад, зміст каталогу статей починається з ієрархічно розташованих сторінок, але кожну окрему главу або статтю часто має сенс розбити на кілька послідовних один за одним шматочків. Зворотня конфігурація, коли гілки деревовидної структури виростають їх вузлів лінійної структури, зустрічається рідше.
4. Гратчаста структура. Заснована на побудові системи навігації сайту, коли між вертикальними і горизонтальними сторінками є взаємозв'язок та можливість швидкого переходу з однієї сторінки на іншу без необхідності відвідування проміжних сторінок. Подібна структура приводить до зайвого збільшення гіперпосилань і застосування її обмежено для сайтів з великою кількістю сторінок.
Зараз дуже актуальне питання економії. Багато ресурсів людство не в силах відновити. Тому став популярний мінімалізм. Він був характерний і для гаджетів пару років тому. Зараз же перевага віддається великим діагоналям і розширенням екрану. А ось мінімалістичний веб-дизайн знову в моді. Йдеться про односторінкові сайти.
Можливо, спочатку ця ідея викликає недовіру. Сайт на одну сторінку - звучить досить дивно. Але, по-перше, є безліч випадків, коли цього достатньо. А по-друге, якісно оформлені сайти цього типу нерідко користуються набагато більшим попитом, ніж звичайні. Зараз стали дуже популярними посадкові (цільові) сторінки, призначення яких прямо пов'язане з назвою. На них користувач потрапляє за посиланням. І вони є кінцевою точкою пошукового або рекламного запиту. Ще одна сфера їх застосування - мобільні додатки. Якщо узагальнити - це відмінний варіант при невеликій кількості інформації або ж жорстко обмеженому трафіку. Ця технологія сайтобудування увійшла в моду впевнено і надовго.
Для сайту «Моя Україна» була обрана саме ця технологія. Логічна структура даного сайту носить мережевий характер, але перехід по пунктам меню відбувається не по гіперпосиланням, а завдяки тегам id="page_link_m"(рис. 2.1). Саме таку структуру було обрано через її універсальність та можливість переходу на будь-яку сторінку сайту без відвідування проміжних сторінок.
/
Рисунок 2.1 – Мережева структура сайту
Нижче наведено опис сторінок, з яких складається структура веб-сайту:
Id=”page1_link_m” – головна сторінка сайту, на якій розміщується слайдер;
Id=”page2_link_m” – загальна інформація про найцікавіші місця для відвідування;
Id=”page3_link_m” – вкладка «Подорожі», де присутня інформація про враження користувачів сайту від міст, які вони відвідали
Id=”page4_link_m” – вкладка «Про нас», де відбувається опис призначення сайту;
Id=”page5_link_m” – вкладка «Контакти», де є детальна інформація для заворотного зв’язку;
Id=”page6_link_m” – вкладка «Київ», на якій знаходяться деякі цікаві факти про місто Київ;
Id=”page7_link_m” – вкладка «Львів», на якій здійснюється запрошення до цього міста;
Id=”page8_link_m” – вкладка «Чернівці», на якій присутній короткий опис-запрошення відвідати Чернівці;
Id=”page9_link_m” – вкладка «Вінниця», на якій присутній короткий опис-запрошення відвідати Вінницю;
Id=”page0_link_m” – вкладка «Одеса», на якій присутній короткий опис-запрошення відвідати Одесу;
Важливе значення при переході між сторінками має навігаційний ланцюг – елемент навігації по веб-сайту, що представляє собою шлях по сайту від його головної сторінки до поточної, на якій знаходиться користувач. Також структура сайту містить внутрішні гіперпосилання.
Гіперпосилання – це зв'язок між веб-сторінками або файлами. При натисканні на гіперпосилання вказаний у ній об'єкт відображається у браузері. При цьому залежно від типу об'єкт або відкривається або запускається. Часто гіперпосилання вказує на іншу веб-сторінку, але може також указувати на рисунок, мультимедійний файл, адресу електронної пошти або програму [5].
Для визначення посилання в HTML використовується тег <a>, структура якого має вигляд <a href="filename"> Текст посилання </a>, де filename - ім'я файлу або адреса в Інтернеті, на яку необхідно послатися, а «Текст посилання» - текст гіпертекстового посилання, який буде безпосередньо показаний в HTML-документі. Так само можна використовувати аргумент TARGET, який показує, в якому вікні буде відкрите посилання (значення _blank – у новому, _self – у поточному). Наприклад, target = "ім'я вікна">.
Деякі браузери можуть підтримувати функцію переходу за гіперпосиланнями за допомогою клавіші Tab. Змінити порядок переходу можна за допомогою атрибуту TABINDEX тега <a>. Щоб включити гіперпосилання в перелік, що описує новий порядок переходу, треба привласнити атрибуту TABINDEX деяке ціле позитивне число в діапазоні від 1 до 32767. Щоб виключити гіперпосилання з переліку, треба привласнити атрибуту будь-яке негативне число.
За видом гіперпосилання може бути текстовим або у вигляді рисунка.
У розробленому сайті використовується перший вид з цих посилань. З головної сторінки можна перейти на інші з пунктів меню. На сайті використовується горизонтальне меню у вигляді тексту при натиснення на яке відбувається перехід на відповідну сторінку. Також один з пунктів меню має свое вертикальне підменю. Приклад пунктів меню зображений на рис. 2.2.
/
Рисунок 2.2 – Меню сайту
/
Рисунок 2.3 – Підменю сайту
Таким чином, було розроблено логічну та фізичну структури сайту. Правильне структурування розділів веб-сайту, його елементів та файлів забезпечує легке сприймання інформації, покращує розуміння роботи сайту, допомагає розробникам та відвідувачам легко працювати з сайтом та здійснювати пошук.
3 ВИБІР КОЛЬОРОВОЇ ГАМИ
Необхідність заздалегідь подумати на тему вибору основної гами важко переоцінити, оскільки саме від її вірного вибору часто залежить дуже багато. Погодьтеся, не надто приємно довго перебувати на крикливо і строкато оформленому сайті, особливо якщо такий вибір кольорів не виправданий тематикою ресурсу і якщо кольори не узгоджені між собою. Саме на ці два моменти і необхідно звернути пильну увагу:
Кольори повинні бути узгоджені один з одним.
Гамма сайту повинна відповідати його тематики.
Немає нічого більш стомлюючого, ніж намагатися щось прочитати на сайті, кольорова гамма якого фактично не дозволяє це зробити. Інформація може бути як завгодно важливою і потрібною, але якщо гамма буде не збалансованою і конфліктною, а текст буде поданий, наприклад, в червоному кольорі на чорному тлі або в білому кольорі на сірому фоні, то терпінню користувачів досить скоро прийде кінець і буде втрачено частина аудиторії або навіть клієнтів тільки тому, що не було виділено достатньо часу для вибору вірної кольорової гами [2].
На думку американських дизайнерів, найулюбленіший колір у наш час – синій з відтінком лаванди. Зростаюча популярність блакитних фарб провіщає, що синій стане відтінком майбутнього.
Колірна гамма сторінки дає можливість виділити такі найбільш важливі частини сторінки як навігаційні елементи, змістовні блоки, акценти, взаємозв'язки.
У 1666 році Ісаак Ньютон за допомогою скляної призми «витягнув» з білого сонячного світла райдужний спектр і обгрунтував теорію світла і кольорів. Його винаходом став колірний круг, яким і донині користуються всі художники і дизайнери.
Багато століть опісля колірний круг удосконалив Йоганнес Іттен - швейцарський художник і педагог, який у своїй книзі «Мистецтво кольору» докладно розглянув всі таємниці колірної гами, її сполучуваності, гармонійності і контрастності. Його колірний круг виглядає так (рис 3.1):
/
Рисунок 3.1 – Коло Іттена
Основні кольори палітри - червоний, жовтий і синій. Якщо говорити про основні кольорах на екранах різних пристроїв - це RGB, червоний, зелений і синій.
Існує декілька методів вибору кольорової схеми на колі Іттена:
монохроматична. В такій кольоровій схемі використовується колір одного тону, але різної насиченості та яскравості;
аналогова. Використовуються два кольори, розміщені поряд один з одним (приблизно до чверті кола);
комплементарна. Створюється за допомогою двох кольорів, розташованих один навпроти одного на колі. У таких випадках найчастіше холодний колір виступає фоновим, а теплий підкреслює акценти;
роздільно-комплементарна. Поєднує особливості аналогової та комплементарної схем;
тріада. Використовується три кольори, рівновіддалені одне від одного на колі;
подвійно-комплементарна. Використовується дві пари комплементарних (протилежних) кольорів.
Ціль створеного мною сайту, закликати користувачів подорожувати Україною та насолоджуватися різними природними та створеними людьми визначними місцями. Тож враховуючи тематику сайту, а також беручи до уваги такий критерій як читабельність сайту, я обрав три кольори по тріадній кольоровій схемі (рис 3.2).
/
Рисунок 3.2 – Вибір кольорів за тріадною схемою
Синій — це колір спокою й умиротворення. Він створює передумову для глибокого роздуму над життям; кличе до знаходження сенсу, істини. Викликає потребу у фізіологічному спокої і задоволеністю у світі.
Зелений колір походить від злиття синього і жовтого, при цьому взаємодоповнюються якості того й іншого. Звідси з’являється спокій і нерухомість. У зеленому завжди закладена життєва можливість, він не володіє діючою ззовні енергією, але містить у собі потенційну енергію - не спочиває, а відображає внутрішній напружений стан.
Помаранчевий колір - колір теплоти, блаженства, напруження, але в той же час - м’якого блиску призахідного сонця. Він завжди радує око і сприяє гарному настрою. Практично завжди має благотворний вплив, тому що показує радісні сторони життя.
Використовувалися на сайті відтінки цих кольорів, з огляду на його психологічне навантаження. Тож при читанні цікавих відгуків користувачів про те чи інше місто використовувався помаранчевий, для форми зворотного зв’язку використовується зелений, для інших сторінок, деякі відтінки синього.
Також для полегшення читання контенту сайту було прийнято рішення використати нові відтінки, які створювались при додаванні до трьох основних кольорів сірого кольору .
Таким чином, враховуючи описані методи та тему сайту, для нього була обрана кольорова гама із відтінків синього, зеленого та помаранчевого кольорів. Для сторінки «Контакти» застосовується м’який зелений колір, який з психологічної точки зору повинен діяти заспокійливо для корисувача, який має намір залишити відгук про сайт чи поскаржитись на те, що йому не сподобалось. Для сторінки «Подорожі» застосовується помаранчевий колір, який сприяє гарному настрою у читачів, які знайомляться з враженнями користувачів сайту від подорожі в те чи інше місто України, додатково викликаючи бажання зірватись з місця та також відправитися у мандрівку. Синій колір на сторінці «Міста» використовується для того, щоб користувач спокійно і розважливо міг обрати та ознайомитися з тою категорією визначних місць, яка йому найбільше сподобалась. Додатково використовується сірий колір для фону та білий колір для тексту.
4 РОЗРОБКА ЛОГОТИПУ САЙТУ
Логотип - графічний знак, емблема або символ, використовуваний територіальними утвореннями, комерційними підприємствами, організаціями та приватними особами для підвищення впізнаваності і розпізнаваності в соціумі. Логотип може являти собою як чисто графічний знак, так і поєднання з назвою суті, яку він ідентифікує, у вигляді стилізованих букв і / або ідеограми. Логотипи широко застосовуються для зображення товарних знаків, в якості емблем юридичних осіб.
У поняття "розробка логотипа" включають комплексне рішення: створення фірмового знака, текстове написання назви, взаємне компонування назви й знака, а також колірне рішення всієї композиції. За бажанням логотип може складатися з однієї тільки назви, написаної унікальним шрифтом, або з одного лише фірмового знака.
Ідеальний логотип повинен вирішувати 6 основоположних функцій:
фактичну (канал, контакт між сайтом і користувачами);
експресивну (візуальне повідомлення місії сайту);
референтну (інформація про сайт);
імпресивную (враження від побаченого на сайті);
поетичну (емоційний позив, естетичне сприйняття);
металінгвістичну (інформаційний код повідомлення: словесне і символьне сприйняття).
Також логотип повинен володіти наступними характеристиками:
Запам’ятовуваність. Необхідно, щоб користувачі звикли до логотипа, а це можливо тільки тоді, коли він незабутній.
Унікальність. Потрібно створити такий логотип, що був би не схожий на ті, які вже існують.
Значимість. Логотип передає важливі характеристики сайту.
Простота. Потрібно створити логотип, який би якнайбільше передавав інформації, але в той же час був якомога простіший.
Оскільки темою сайту є «Моя Україна», то доцільними рішенням було б розроблення логотипу саме з цими словами, адже логотип повинен бути водночас простим і таким, що відповідає всій тематиці сайту. Тому було розроблено 2 варіанти логотипу сайту. Перший варінт створювався з використанням 3D інструментарію Adobe Photoshop. Першим кроком було створення концепції логотипу (рис 4.1).
/
Рисунок 4.1 – Концепція логотипу
Після цього було встановлено позиції елементів на фоні та заливка кожного елементу у відповідний колір (рис 4.2).
/
Рисунок 4.2 – Вибір кольору та текстури
Далі були додані ще 2 елементи, які повинні були надати логотипу закінченої думки. Цими елементами стали надписи-продовження слів назви сайту (рис 4.3).
/Рисунок 4.3 – Додавання нових елементів
Для завершення повної картини логотипу було вирішено додати прапор України (рис 4.4).
/Рисунок 4.4 – Завершення роботи над логотипом
Оскільки стиль всього сайту мінімалістичний, то додавання графічного об’єкта до логотипу було б порушенням цього принципу та естетично спотворювало б сайт. Відомо, що логотип - найважливіший елемент іміджу компанії. Він служить, в першу чергу, для ідентифікації компанії на ринку. Логотипи з'явилися для того, щоб відрізняти продукцію різних фірм в рамках однієї галузі. Зареєстрована торгова марка захищає компанію від недобросовісної конкуренції і дозволяє захистити її права в суді. У сприйнятті споживача наявність логотипу або товарного знака фірми, що має усталену репутацію, є гарантією якості товару. Товари, що не мають відомого логотипу, називають noname.
Виділяють різні типи логотипів, наприклад:
Оригінальне графічне зображення назви.
Фірмовий знак - літерне накреслення.
Фірмовий блок - комбінація назви і знака.
Слово «Логотип» (англ. Logotype) походить з грецької мови: logos (слово) і typos (відбиток). Інших варіантів немає. І, відповідно, немає варіацій розшифровки: «Логотип - оригінальне графічне зображення назви».
Ніяких знаків, піктограм, символів – тільки літерне накреслення назви. А скорочене чи повне, класична типографіка або вишукана каліграфія - це все нюанси.
Тому другий варіант логотипу був створений за допомогою літерного накреслення. Він гармонічно виглядає на фоні хедера сайту та відповідає його стилю. Саме тому другий варіант логотипу був вибраний для розміщення його на сайті. Для зручності перегляду логотип був написаний сірим кольором на білому фоні (рис 4.5).
/
Рисунок 4.5 – Другий варіант логотипу сайту «Моя Україна»
Отже, розроблений логотип передає основну суть сайту, а саме заклик до патріотизму та любові до своєї країни. Логотип розроблений з урахуванням основних характеристик, які повинен поєднувати у собі логотип для веб-сайту.
5 РОЗРОБКА СТАТИЧНИХ ЗОБРАЖЕНЬ
Існує два типи комп'ютерної графіки - растрова і векторна. Основна відмінність - в принципі зберігання зображення.
Растровий малюнок можна порівняти з мозаїкою, коли зображення розбите на невеликі одноколірні частини. Ці частини називають пікселями. Чим більша роздільна здатність зображення (число пікселів на одиницю довжини), тим воно якісніше. Але зображення з високою роздільною здатністю займає багато дискової пам'яті, а для його обробки потрібно багато оперативної пам'яті.
Векторна графіка описує зображення з допомогою графічних примітивів, які розраховуються по конкретних математичних формулах. Складне зображення можна розкласти на безліч простих об'єктів. Будь-який такий простий об'єкт складається з контуру і заливки [2].
Можна сказати, що растрове зображення - це фотографія, а векторне - це малюнок, зроблений кольоровими олівцями.
Основна перевага векторної графіки полягає в тому, що при зміні масштабу зображення не втрачає своєї якості. Звідси випливає й інший висновок - при зміні розмірів зображення не змінюється розмір файлу. Адже формули, які описують зображення, залишаються ті ж, змінюється тільки коефіцієнт пропорційності.
Однак якщо робити багато дуже складних геометричних фігур, то розмір векторного файлу може бути набагато більше, ніж його растровий аналог через складність формул, що описують таке зображення.
Отже, векторну графіку слід застосовувати для зображень, які не мають великого числа колірних фонів, півтонів і відтінків. Наприклад, створення піктограм, логотипів, ілюстрацій, рекламних модулів і т.д.
У програмі Photoshop для сайту було оброблено такі статичні графічні елементи, як слайди для слайдеру та інші зображення які присутні на сайті.
Розглянемо приклад обробення зображення одного зі слайдів слайдера (рис 5.1).
/
Рисунок 5.1 – Фото столиці до обробки
Далі за допомогою фільтрів Adobe Photoshop CC фото зазнало ряд змін. На рисунку 5.2 зображено регулювання фільтру «аплікація»:
/
Рисунок 5.2 – Обробка фото за допомогою фільтра «аплікація»
Після натискання кнопки «Ок» всі зміни були задіяні до зображення. Результат роботи фільтра прдеставлений на рисунку 5.3.
/
Рисунок 5.3 – Фото столиці після обробки
Додатково було обоблене також чорно-біле растрове зображення фортеці «Сурож». Щоб зробити з цього зображення кольрове, потрібно було виділити кожний елемент на малюнку (рис 5.4) та для зручності скопіювати виділені елементи на новий шар.
/
Рисунок 5.4 – Виділення фрагменту малюнка за допомогою інструмента «Чарівна паличка»
Після виділення елементу, потрібно було скористатися інструментом «градієнт» для заливки виділеної області обраним кольором (рис 5.5).
/
Рисунок 5.5 – Заливка вибраної області градієнтом
Повторючи ці кроки один за одним для кожного виділеного елементу малюнка, отримаємо такий результат (рис 5.6):
/Рисунок 5.6 – Результат роботи
6 РОЗРОБКА ДИНАМІЧНИХ ЗОБРАЖЕНЬ
Динамічні зображення створюються за допомогою анімації.
Комп'ютерна анімація - послідовний показ (слайд-шоу) заздалегідь підготовлених графічних файлів, а також комп'ютерна імітація руху за допомогою зміни (і перемальовування) форми об'єктів або показу послідовних зображень з фазами руху.
У комп'ютерній анімації на перший план виходить розмір файлу, у якому зберігаються зображення. Тому при створенні комп'ютерної анімації намагаються знайти компроміс між якістю анімації і розміром файлу, що і визначає загальну кількість кадрів анімації.
Різниця між анімацією і відео полягає в тому, що відео використовує безупинний рух і розбиває його на множину дискретних кадрів, а анімація використовує множину незалежних малюнків або графічних файлів, що виводяться в певній послідовності для створення ілюзії безупинного руху.
Комп'ютерна анімація (послідовний показ слайд-шоу із заздалегідь підготовлених графічних файлів, а також комп'ютерна імітація руху за допомогою зміни і перемальовування форми об'єктів або показу послідовних зображень з фазами руху, підготовлених заздалегідь або породжуваних під час анімації) може застосовуватися в комп'ютерних іграх, мультимедійних додатках (наприклад, енциклопедіях), а також для «оживлення» окремих елементів оформлення, наприклад, веб-сторінок і реклами (анімовані банери) [6]. На веб-сторінках анімація може формуватися засобами стилів (CSS) і скриптів (JavaScript) або модулями, створеними за допомогою технології Flash або її аналогів (флеш-анімація).
Для веб-сайту «Моя Україна» засобами Adobe Photoshop розроблено три анімаційні зображення: «Київ», «Львів» та «Чернівці».
Для створення анімації «Київ» у Adobe Photoshop була використана фотографія міста Київ (рис 6.1) та текстура у вигляді пазла (рис 6.2).
/
Рисунок 6.1 – Зображення міста Київ
/
Рисунок 6.2 – Текстура у вигляді пазла
Дана текстура була використана у якості трафарету для виділення окремих шматків зображення міста. Після накладання її другим шаром на картинку, за допомогою інструмента «Чарівна паличка» було виділено кожен окремий елемент пазла, після чого він поміщався на новий шар (рис 6.3).
/
Рисунок 6.3 – Результат накладання текстури
Після накладання тестури необхідно беспосередньо перейти до створення анімації. В Adobe Photoshop СС потрібно відкрити вікно «Шкала часу» та вибрати «Створити шкалу часу для відео». Після цього до шкали автоматично додаються всі шари зображення (рис 6.4).
/
Рисунок 6.4 – Початок створення анімації
Для створення анімації зі статичного зображення для початку потрібно вибрати точку сходження на шкалі часу, після якої зображення матиме закінчений вигляд. Було обрано 3.5 секунди часу на сходження елементів анімації, та 1.5 секунди на перегляд остаточного зображення. Далі на кожному шарі потрібно вибрати та активувати пункт «Позиція». Так програма повинна знати коли їй складати остаточне зображення. Потім перетягуючи повзунок в самий початок шкали часу потрібно кожен шар з зображенням винести за рамку самого зображення. Після цього, для виділення границі елементів пазла потрібно залити фоновий шар кольором, попередньо обраний колір – сірий.
Останній крок – задати напрямок руху для кожної з частинок, щоб вони сходились не масивом елементів, а хаотично (рис 6.5).
/
Рисунок 6.5 – Редагування руху частинок
Зберігаємо створений файл у форматі GIF, чекаємо поки фотошоп обробить створене зобрження (рис 6.6).
/
Рисунок 6.6 – Збереження створеної анімації
Аналогічним чином відбувалось створення анімацій «Львів» та «Чернігів».
Також на сайті є 2 відеофрагмента, монтаж одного з них представлено нижче (рис 6.7). Для початку потрібно додати відео в програму як «джерело», потім перенести його на стрічку подій. Оскільки відео занадто довге та громіздке, його потрібно в першу чергу обрізати.
/
Рисунок 6.7 – Додавання відео до програми
Після цього до програми додається музика (рис 6.8). Потім стара звукова доріжка вимикається, а відповідний музичний твір накладається поверх відео.
/
Рисунок 6.8 – Додавання музики на відео
/
Рисунок 6.9 – Відео на сайті
7 ОЦІНКА ОБСЯГІВ ЗОБРАЖЕНЬ
Швидкість завантаження сайту відіграє значну роль для користувача. На неї впливає таблиця стилів (CSS), використання скриптів, об’єм контенту та багато іншого. Але головним фактором, після швидкості та якості інтернет-з’єднання, є медіа-контент, зокрема, статичні та динамічні зображення. Щоб проаналізувати, яким буде час завантаження сторінки, необхідно проаналізувати обсяг файлів усіх графічних зображень. Враховуючи те, що для статичних зображень необхідно зберігати високу деталізацію, значно оптимізувати розмір їх файлів неможливо [7].
Дані, отримані в ході аналізу розміру файлів зображень, наведено в таблиці 7.1.
Таблиця 7.1
Аналіз обсягу зображень
Ім’я файлу
Розмір файлу (КБ)
about2.jpg
305,0
odessa.jpg
1104
vin.jpg
793
city1.jpg
326
city2.jpg
82,5
сity3.jpg
379
сity4.jpg
417
сity5.jpg
611
сity6.jpg
103
slide-1.jpg
1224
slide-2.jpg
1404
slide-3.jpg
1304
slide-4.jpg
865
slide-5.jpg
734
thumb-1.jpg
467
thumb-2.jpg
479
thumb-3.jpg
409
thumb-4.jpg
414
thumb-5.jpg
514
member1.jpg
member2.jpg
119
251
Продовження таблиці 7.1
Ім’я файлу
Розмір файлу (КБ)
member3.jpg
member4.jpg
member5.jpg
member6.jpg
970
596
905
142
desktopwallpapers.org.gif
38,3(МБ)
kiev-ukraina-nochnoy-gorod.gif
33.6(МБ)
lvov_kafedralnyy_sobor_sobor.gif
46.2(МБ)
Загальний обсяг графічної інформації на сторінках подано в таблиці 7.2. Оскільки багато об’єктів не є спільними для всіх сторінок, обсяг завантаження буде меншим за загальний обсяг зображень на всьому сайті, тому частина з них не буде завантажуватися поки не буде активована відповідна вкладка.
Таблиця 7.2
Оцінка обсягу зображень на сторінках
Назва сторінки
Загальний обсяг файлів (КБ)
Головна
7814
Міста
1918
Подорожі
2173
Про нас
305
Контакти
0
Київ
33.6(МБ)
Львів
46.2(МБ)
Чернівці
38.3(МБ)
Вінниця
793
Одеса
1104
Таким чином, було проведено аналіз
04.12.2016 14:12-
Ділись своїми роботами та отримуй миттєві бонуси!
0%
Оголошення від адміністратора