Показват се публикациите с етикет animated text. Показване на всички публикации
Показват се публикациите с етикет animated text. Показване на всички публикации

Как да създадем анимиран банер (анимиран gif) бързо, лесно и безплатно

Картинки в сайта - за или против?

Изображенията в един сайт винаги носят плюсове, тук спор няма. Това ще ви каже всеки маркетинг специалист, уеб-дизайнер и дори SEO консултант. Защото картинките в сайта, позволяват не само дадена информация да бъде възприета по-лесно и по-бързо, но и я обогатяват, давайки на страницата по-голяма стойност, включително и в очите на търсачките.

Анимиран консултант
Търсите надежден консултант?
Картинките, от своя страна, знаете, биха могли да бъдат не само статични, но и анимирани. С анимираните ефектът, който целим, би бил по-голям, защото те по-лесно привличат вниманието, позволяват "разширяване" на рекламното послание или идея, запазвайки го в същото като обем място, позволяват повече творчество... Това са част от причините на практика, процентът на анимираните банери, използвани с рекламна цел, да е далеч по-голям от този на статичните. Те просто "продават" повече. Затова, в разиването на вашия сайт, особено по отношение на приходите от него, определено ще му повлияете положително, ако използвате и анимирани картинки (следва да се съобразят някои фактори, разбира се) и анимиран текст. Още повече, че създаването на анимиран gif (формат на файла, б. а.) е напълно по силите и на начинаещ.

Как да създадем анимирана картинка (банер) безплатно, бързо и лесно

Уточнение: картинните анимации са различни от флаш-анимациите и като технология на създаване, и като възможности и в настоящата публикация говоря само за първите.

Съществуват множество варианти да създадете лесно и бързо свое анимирано изображение, някои от които изискват да си инсталирате определена програма, а други са достъпни направо в специализирани уеб страници. Аз ще ви предложа само няколко, но изпитани решения и от двата вида, като започвам от най-лесния. Правя само една уговорка: за да анимирате изображение, трябва да разполагате с такова и/или изображенията, които искате да се редуват в анимацията.

Създаване на анимирано изображение он-лайн
Изключително лесен начин да създадете анимиран банер, аватар или картинка с друго предназначение, от само три стъпки. Просто изпращате картинките (до три наведнъж, но можете да запазите и повече в галерия), задавате скорост (време до смяната със следващата картинка) и размер на желания анимиран gif, запазвате и готово. В допълнение, сайтът генерира за вас и код, с който лесно бихте могли да сложите създадената анимация във ваш сайт или форум.
Gifup е друг инструмент за направа на анимирани картинки он-лайн, позволяващ използване на картинки от различни източници - от компютъра ви, от друг сайт, от галерия във Flickr и дори от уеб камерата ви.
    Безплатни програми за анимиране на изображения

    Програмите за анимиране на картинки или т. нар. gif-аниматори, или само "аниматори", изискват да бъдат инсталирани на компютъра ви, за да ги използвате. Повечето от тях са малки и сходни като функционалности с он-лайн аниматорите на картинки, но има и много по-професионални програми, по-богати на възможности и с много по-широк кръг на приложение, към които обаче няма да ви насочвам, заради нуждата от много часове за изучаването им за постигане на подобна цел - създаване на анимирано изображение. Ще се спра на три, сравнително лесни за използване и все пак достатъчно мощни програми за анимиране, които ще ви дадат възможност да създадете едни напълно професионални gif-анимации.
    Този безплатен gif-аниматор е много лесен за използване, а в същото време притежава доста възможности. С фокус изцяло върху създаване на анимирани изображения, Beneton Movie GIF няма да ви обърка с излишни или сложни функции. Позволява включване в анимациите на над 40 формата файлове като BMP, GIF, PNG, JPG и дори AVI. Предлага немалко готови ефекти, които можете да добавите към анимациите си с едно щракване на мишката. Организирането на реда и параметрите на отделните кадри в анимацията пък, е повече от лесно и интуитивно, което съкращава времето, нужно за достигане до готовия анимиран файл.
    Falco GIF Аниматорът притежава по-разширени възможности за създаване на анимирани изображения, позволявайки да започнете от А-Б - чертаене на фигури, рисуване, оцветяване..., т.е. създаване на първични картинки, които да използвате в анимацията си. Поддържа редица анимационни ефекти, но и инструменти за обработка на самите изображения по отношение контраст, цветова гама и др. Работи с голям диапазон файлови формати като BMP, GIF (анимирани), PNG, JPG, ICO, CUR, ANI, PCD (Kodak), TIFF, TARGA, PSD (Photoshop), DLL/EXE, ICL (Icon Library), като позволява направеното да бъде експортирано. Изполването на програмата е сравнително лесно и я намирам подходяща както за новаци, така и за специалисти.
    Тази безплатна програма е всъщност доста повече от обикновен gif-аниматор и е на едно високо професионално ниво. Тя съчетава ефектите и възможностите за анимация с немалък брой такива за редакция и обработка на изображения. Предлага инструменти, с които лесно бихте могли да нарежете или комбинирате изображения по желания от вас начин, да създадете слайдшоу, да добавите текст или друг елемент и др. От професионална гледна точка, намирам за много полезни функционалностите за групова обработка и преименуване на файлове - те просто спестяват много време, ако ви се налага да работите с голям брой изображения. Не мога да не спомена и почти уникалната функция за търсене по снимка на сходни лица в Интернет ;). Всичко това е облечено в един лесен за управление и навигация интерфейс, така че овладяването на работата с Photoscape не би ви затруднило особено.

    И с това приключвам. Надявам се информацията за тези безплатни и лесни начини да си създадете анимирани картинки да ви бъде полезна. Ще очаквам и да споделите вашите впечатления от тях или от онези, които вие вече използвате в своята работа. И на всички ви пожелавам успех и дръзновение, защото няма невъзможни неща!

    Надявам се публикацията ми да ви е допаднала и да ме подкрепите и/или препоръчате тук-там. ;)

    Тайните на Marquee

    Да, Marquee (чете се "маакий") си има тайни, които го правят още по-невероятен и полезен инструмент. Вижте примерите по-долу! Те са постигнати тъкмо с оператора за движещ се текст Marquee.

    Абонирай се!

    Хвани изображението и научавай
    за най-новото в сайта!

    Движещ се в граници цветен текст с връзка
    Както ще установите, шраквайки върху изображението за емисии вие спирате движението му (нали целта е да го "хванете"). За разлика от движещия се текст с връзка, където дори самото позициониране с мишка върху него го кара временно да спре и да тръгне отново, когато преместим курсора извън него (нали трябва да можем да прочетем какво пише и да щракнем връзката). Ефектно, нали! Както и следващият "водопад" от думи:

    Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Искам да раздвижа текста!Раздвижих текста!

    Хайде сега, опитайте се да спрете топчето точно под чертата, използвайки бутоните под него:
    |

    .



    Стига демонстрации. Вие сами можете да постигнете още и различни ефекти с marquee, когато знаете "тайните" му. Естествено, те отдавна са известни, иска се само желание и усилие от ваша страна да ги научите и вие. А ако желаете да е по-лесно, можете да кажете: Пич, оправи ми сайта!, за да получите професионалната ми намеса във вашия сайт. ;)

    Направи си сайт - въпроси и трикове

    Как да постигнем страхотен ефект с поставяне на движещ се текст, изображения или връзки

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

    Една такава техника е използването на оператора за движещ се текст <marquee> (произнася се "маакий"). Да, езикът за редакция на хипертекст (HTML - Hyper Text Markup Language) позволява лесно да анимирате текст в своята страница и да го карате да се движи по желан от вас начин. Marquee е команда с определени параметри, която браузърът (Explorer, Mozilla...) изпълнява. Затова и единствена причина анимираният текст да не се визуализира правилно може да се търси само в браузъра, с който гледате съответния сайт.

    І. Как да анимираме текст или какво можем с Marquee!

    По-долу можете да видите примери за употребата на оператора marquee заедно със съответния код, който лесно можете да копирате и с който да постигнете желаните ефекти и във вашия сайт. В него ще трябва единствено да замените "ТЕКСТ" с желания от вас израз.

    1. Преминаващ текст

    Един много популярен модел, който позволява да поставите ефектен акцент върху желана от вас информация в сайта си или просто да спестите място. Анимираният текст се появява отляво или отдясно (според указаното от вас в direction="...") и преминава по ширина през страницата или елемента, в който е поставен кода, отново и отново.

    Преминаващ отляво-надясно текст


    2. Появяващ се текст

    Искате анимирания текст, след като се появи на екрана да спре? Ето появяващ се отляво текст, който достигайки границата на елемента, в който е поставен, спира и остава там (за да видите отново ефекта, трябва да презаредите страницата).

    Движещ се текст, който спира!


    3. Отскачащ от границите текст

    Да, става дума за комбинация от горните два модела на движение на текста.

    Отскачащ от границите движещ се текст




    4. Вертикално движещ се текст

    Движението на текста може да бъде не само хоризонтално, но и вертикално, като все така свободно можем да определим и границите на неговото движение.


    Преминаващ нагоре текст


    ІІ. Атрибути на оператора Marquee или как управляваме движението на текста

    Както разбрахте, указанията как точно да се движи текста се задават като свойство на оператора marquee с помощта на т. нар. атрибути (behaviour, direction и др.), на които можем да дадем различни стойности. Няма да се спирам подробно на всички тях - сигурен съм, че бързо ще се ориентирате за възможностите (стойностите са все английски думи, които ще откриете лесно). За по-запалените, освен това, в Интернет има достатъчно ресурси по темата (на английски). Затова ще обърна внимание само на още един от тях:

    Скорост на движение

    Атрибутът, който отговаря за това с каква скорост ще се движи текста, е scrollamount="...", чиято стойност по подразбиране е "6". С негова помощ вече придобивате пълен контрол над движещия се в сайта ви текст.

    Бавно движещ се текст - скорост = 1
    Бързо движещ се текст - скорост = 10
    Бясно движещ се текст - скорост = 20



    Е, как ви се струва всичко дотук - нямате търпение да го изпробвате в своя сайт, нали! А ако ви кажа, че това съвсем не е всичко, което можем да постигнем с оператора за движещ се текст marquee? Можете да видите "какво" в Тайните на marquee.


    Ако информацията ви е била интересна или полезна, моля подкрепете ме!

    Вижте още:
    Програми и сайтове за лесно създаване на анимирани изображения
    Направи си сайт - въпроси и трикове