<
УЦ Контакт

Лидер IT образования

Как приятно знать, что ты что-то узнал (Мольер)

 
03056, Киев, пер. Ковальский 13, 1-й этаж, офис №2
 
Программы курсов

Акция! Студентам - Скидка 15%! Слушателям IT Academy бесплатное посещение English Club

Статья>>Питання по графіці,анімації для веб

Питання по графіці і анімації для веб

Який графічний формат (GIF або JPEG) краще використовувати для графіки у веб і чому? Щодо використання графічних форматів gif, jpeg і png в дизайні для web Ви можете знайти цю інформацію на спеціальних курсах. Якщо Ваша картинка містить небагато кольорів і/або чіткі лінії – краще використовувати GIF, тому його палітра може бути тільки в межах 256 кольорів і в ньому застосовується алгоритм стиснення без втрати якості зображення (конкретно, алгоритм LZW). Так само GIF допускає створення прозорих областей та анімації. На відміну від нього, JPEG використовується при роботі з фотографіями і складними колажами, містять велику кількість кольорів і колірних переходів (градієнтів). Достоїнствами цього формату є глибина кольору True Color і невеликий розмір вихідного файлу. До недоліків можна віднести алгоритм компресії з втратами якості, неможливість завдання прозорих областей і неможливість створення анімації. Наостанок, кілька порад щодо поводження тих і інших форматів: якщо в зображенні міститься дрібний текст, JPEG-конверсія зробить його розмитим і менш контрастним, а значить мало читає. 8 кольорів (3 біта) в палітрі GIF-формата, як правило, більш ніж достатні для якісного відображення тексту. На ступінь наступного стиску при конвертуванні в GIF впливає також і те, який спосіб емуляції півтонів був обраний при перекладі в режим индицировання квітів. "None" створює найкращі, "dither", відповідно, найгірші умови для компресії. Великі зображення в GIF-форматі з багатою палітрою не рекомендується різати на багато маленьких, якщо це не веде до оптимізації палітр окремих шматочків - в кінці кінців, службові блоки і дані палітри теж займають деяке місце в кожному файлі цього формату. При наявності у фотографічних зображеннях великих площин з колірними градієнтами слід бути обережним із ступенем стиснення JPEGа - може легко виникнути "ефект поганого дозволу". Обставини - такі як необхідність наявності у зображення прозорою підкладки – часом роблять вибір за нас, таке вміє тільки GIF (адже у MPEG в його внутрішньої кодуванні квітів як таких немає). Варто лише згадати, що малювати подібну картинку стоїть на підкладці, близькою за кольором до тієї, на якій він буде поміщений на сторінці - виникає менше проблем з рваними або просто виділяються краями. Яке ПЗ краще використовувати при створенні графіки для Web? Однозначної рецепту тут дати неможливо, оскільки багато в цьому питанні залежить від переваг конкретного дизайнера. В даний момент для роботи з растром основна маса дизайнерів використовують Adobe Photoshop, Corel Photopaint або Ulead Photo Impact. Для роботи з векторною графікою Adobe Illustrator, Corel Draw або Macromedia Freehand. Як краще оптимізувати графіку для використання у веб? Для цієї мети можна використовувати як стандартні засоби графічних пакетів (Photoshop, Photopaint і т.д.), так і спеціальне ПЗ. До такого ПО можна віднести Ulead Smart Saver, Adobe Image Ready та деякі інші. Так само можна використовувати спеціальні он-лайн сервіси, наприклад, http://www.gifwizard.com Як "розрізати" картинку на частини? Для цієї мети можна використовувати як стандартні засоби графічних пакетів (Photoshop, Photopaint і т.д.), так і спеціальне ПЗ. До такого ПО можна віднести Ulead Web Razor, The Castle's SplitImage, Macromedia Fireworks і деякі інші. Як з картинки виконаної в градаціях сірого одержати кольорову? У Adobe Photoshop можна зробити наступне. Перекласти ізобраденіе в режим RGB. Створити копію поточного робочого шару і виставити аттрибут накладення Lighten. Далі можна йти одним із двох шляхів (хоча можна і спробувати сочитать їх). По-перше, можна просто намалювати на новому шарі потрібні колірні області. По-друге, погратися з фільтрами з розділу меню Image -> Adjust (Hue / Saturation, Color Balance, Levels і інше). Питання по PhotoShop Скільки пам'яті виділяти йому для нормальної роботи і чому? Якщо ви працюєте з графікою для web (зазвичай, вона невеликого розміру) - доцільно ставити 50% або близько того, щоб мати можливість без проблем працювати одночасно і з іншими додатками (наприклад, HTML редактор, FTP клієнт і/або щось інше) . Якщо ж ви працюєте з файлами великого розміру - раджу виставити 80% -90%. Якщо ж обчислювати в абсолютних величинах, то треба відзначити, що для мінімальної роботи PhotoShop необхідно 16 Mb оперативної і 50-100 Mb дискової пам'яті. Як змінити шрифти його інтерфейсу на російські? Знайдіть ADMUI2.fon в директорії PhotoShop і видаліть його. При запуску PS підставиться системний кириличний шрифт (наприклад, MS Sans Serif). Як зробити так, щоб одна картинка плавно переходила в іншу? Вибираємо шар який повинен плавно переходити -> Edit in Quick Mask Mode (Q) -> Заливаємо все чорним кольором (картинка стане рожевою) -> Робимо град то чорного до білого (чорний - непрозорість, білий - прозорість) -> повертаємося в Edit in Standart Mode (Q) -> Edit -> Clear (або просто Del). Як краще різати картинки для web-дизайну? Ставимо Guidelines в потрібне положення (натиснути ліву кнопку миші на "лінійці" і тягнути не відпускаючи), встановлюємо режим "прилипання" до них (View -> Snap to Guides) -> Image -> Mode -> Indexed Color, виділяємо потрібну ділянку карника , CTRL + C -> CTRL + N -> Enter -> CRTL + V -> File -> Export - GIF 89A Export. Питання по Flash Flash анімація при програванні "смикається". Що відбувається? Це може відбуватися в одному з наступних випадків: 1. Більший, по відношенні до розміру екрану розмір переміщуваної графіки. 2. Складність рухомої графіки. (Прозорості, зображення з альфа-каналом, і т.д.) 3. Складна графіка, на тлі якого рухається анімаційний об'єкт. 4. Низька кількість кадрів в секунду (Frame Rate), що виставляється в Movie Properties (Ctrl + M). Як добитися прозорості при експорті картинок для Flash? 1. Flash підтримує формат PNG, в якому є свій 8-бітний альфа-канал. У Adobe Photoshop створюється маска і зберігається в канал. В Corel PhotoPaint при збереженні повинна бути видна маска. У канал не зберігається. (Який би спосіб стиснення Losser або Jpeg ми не вибирали в Flash-е альфа-канал буде збережуться із стискуванням Losser. Тому при створенні картинки потрібно подбати про зменшення квітів в альфа-каналі). 2. Робимо з картинкою Break (CTRL + B) два рази. Накладаємо зверху контур. Клацаємо на картинку за контуром. Виділяється зайве. Видаляємо. Які браузери підтримують Flash? Підтримка Flash вбудовано в Internet Explorer і Netscape Navigator версій 4 і вище. Треті версії підтримують Flash при установці спеціального плагіна (близько 170 Kb для третьої версії Flash). Так само існує подібний плагін для Opera. Як в Flash зробити, щоб анімація спочатку завантажувалася і програвалася тільки після повного завантаження? Двічі клікаємо на ключовому кадрі. Робимо action "If Frame Loaded" та вказуємо, при скачуванні якого кадру анімація буде вважатися скачаної (найпростіший варіант - останній кадр). Закриваємо меню і створюємо ключовий кадр, після цього робимо action "Go to and play" на кадр де "If Frame Loaded". Тепер анімація буде зациклена між цими двома кадрами. Робимо графіком для процесу завантаження (Loading. ..). Тепер створимо дію, яка буде відбуватися при скачуванні. Заходимо в action кадру, де "If Frame Loaded" і вставляємо всередину вже наявного дії дія "Go to and play" на кадр після другого ключового кадру. Дивіться, що вийшло. Анімація стрибає від кадру до кадру поки не завантажено потрібний кадр. Коли кадр скачати, анімація "перестрибує" через кадр, який відкидає назад.