Web-design la minut: animaţii GIF cu Photoscape

Am rămas cu AniGif, tocmai iconiţa pe care e cazul să dai click ca să creezi în timp record o animaţie pentru blog-ul/site-ul tău. Şi aici intervine un tutorial cu două exemple. Primul şi cel mai simplu, presupune transformarea unei imagini (JPEG, PNG sau alt format popular) în animaţie GIF. Al doilea exemplu presupune combinarea mai multor poze într-un "banner jucăuş". Cea mai dificilă treabă, în ambele cazuri, e mai degrabă să pregăteşti imaginea/imaginile de transformat în animaţie.

Varianta 1: o singură poză de transformat în animaţie

Presupunem că avem un spaţiu publicitar pe site şi vrem ca acesta să momească instant eventualul vizitator interesat de a-şi pune reclama acolo. Aşa că facem în grabă o imagine de mărime corespunzătoare (de pildă 150×150 de pixeli pentru banner de coloană), îi dăm o culoare de fond care să nu strice designul general al site-ului şi scriem ceva foarte inteligent cu fonturi mai mari: "spaţiu de reclamă".

O vom crea chiar cu Photoscape, opţiunea EDITOR. Pasul 1: în fereastra de editare dai click pe MENU (sus în dreapta, icon mic) şi apoi pe NEW FOTO. Apare un pop-up în care scriem 150 în primele două căsuţe – număr care determină dimensiunea în pixeli a noii imagini. Apoi selectăm un fond; roşu – în cazul meu. Jos ai câteva tab-uri, alegi OBJECT (al doilea). Dai click pe pătrat şi apoi "desenezi" unul în imaginea noastră, de vreo 145×145 de pixeli. Urmează un click dreapta pe respectivul pătrat, apoi pe PROPERTIES ca să îi  alegi o culoare (eu am ales galben).

Click OK. Acum, adaugi textul: click pe "T" tot de jos, din tabul Object, apoi click peste pătrat şi scrii ce spuneam mai sus sau ceva şi mai inteligent ca "reclama ta aici!". În fereastra pop-up pentru inserare de text alegi fontul dorit, mărimea, culoarea, alinierea (pe centru) şi ca să dea bine te asiguri că e bifat "Anti aliasing". Eventual, bifezi opţiunea OUTLINE şi te joci cu setările pentru aplicarea unei linii mai mult sau mai puţin groasă care să înconjoare fiecare literă. Gata? Click OK, mută cu mausul caseta text în centrul pătratului. Apasă pe MENU > SAVE > SAVE AS. Dă un titlu imaginii (ex: reclama), selectează formatul PNG (conservă foarte bine calităţile ininţiale ale pozei, fără să ocupe spaţiu foarte mare ca şi BMP-ul).

Abia acum creăm animaţia. Click pe AniGif în meniul din stânga-sus al aplicaţiei Photoscape. Fereastra cea nouă are puţine butonaşe, nu? Nici măcar nu le vei folosi pe toate, nu-i cazul. Cu exploratorul de fişiere din stânga intră în folderul unde ai salvat imaginea "reclama.png". Trage-o în oricare dintre spaţiile goale din mijlocul ferestrei. Dacă nu te descurci prin metoda drag-and-drop foloseşte ADD (dreapta-sus) pentru selectarea imaginii. Înţeleg că ai introdus-o. Acum, click pe CHANGE EFFECT şi alege orice din lista care-ţi apare. Orice efect ai alege ai preview instant al animaţiei create.

Pentru că, by default, "viteza de rulare" a animaţiei e cam mare (0,5 secunde), o încetineşti prin creşterea timpului de tranziţie din butonul CHANGE TIME. Scrie în casuţa ce-ţi apare un număr între 200 şi 300 (timpul în sutimi de secundă). Cele 2 – 3 secunde sunt tocmai ok pentru a nu stresa vizitatorii unui site pe care afişezi un asemenea banner animat. Dacă eşti mulţumit de rezultat apasă pe SAVE, dă un titlu imaginii şi salveaz-o pe hard.
Pare complicat, în fapt tot procedeul durează o jumătate de minut. Iată două exemple:

Varianta 2: combinăm mai multe imagini şi obţinem o animaţie GIF supersexy

Pentru asta, am pregătit din timp trei imagini, am avut grijă să aibă aceaşi rezoluţie. Tu ai toate uneltele la dispoziţie chiar în Photoscape ca să creezi sau editezi poze, mai rapid decât Speedy Gonzales. Iată cele trei imagini care vor forma o animaţie. Una dintre ele e în format GIF, celelate au extensia PNG.

În ordinea de afişare dorită, încărcăm în Photoscape AniGif imaginile de bază. În cazul de faţă: telefonul nuvi prima dată, apoi imaginea cu laptopul şi în final logo-ul.
De-aici e foarte simplu. Unu – selectăm fiecare poză pe rând, îi alegem efectul de tranziţie dorit fie printr-un click dreapta fie cu meniul din partea dreapta – butonul CHANGE EFFECT. Apoi, cu CHANGE TIME modificăm timpul de afişare a fiecarei poze înainte de a face tranziţia spre următoarea imagine. De obicei, cel mai mare timp de afişare e alocat imaginii ce conţine "informaţia vitală". Asta-i tot? Da. Celelate opţiuni sunt cam în plus dacă ţi-ai pregătit pozele dinainte, la aceeaşi rezoluţie.

Iată şi rezultatul plus o explicaţie: pentru prima poză din animaţie am ales efectul "Move down the current frame to transit de next frame" (mişcă în jos acest cadru ca să apară cadrul următor), pentru a doua "Move right the current frame to transit de next frame" şi pentru logo "Transit the current frame to black" (aplică fond negru peste cadru înainte că urmatorul cadru să devină vizibil).

Alte detalii despre Photoscape:

• se deschide instant, rulează repede
• interfaţă simplă, practică, nu te încurci în mii de butoane
• video tutoriale la adresa www.photoscape.org/ps/main/help_editor.php