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

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

S-a întâmplat anul trecut, într-o bună zi, să mi se pună pata: vreau un soft care să-mi facă animaţii GIF, fără să mişc vreun deget. Animaţii care să arate la fel de bine ca cele flash. Pentru website-urile personale. Şi am dat peste tot felul de soft-uri trial sau free, unul mai prost ori mai obositor decât altul. Până am ajuns la Photoscape, o aplicaţie de editare foto cu variate „unelte”, uşor de manevrat şi iz de soft comercial. Culmea, dar şi acest program este gratis, se întreţine din eventualele donaţii ale utilizatorilor mulţumiţi.

De ce aveam nevoie de imagini animate de tip GIF? Simplu: bătrânul format este vizibil în orice browser, în timp ce flash-ul mai dă rateuri. Fie pentru că vizitatorul nu şi-a înstalat plugin-ul necesar, fie din motive de compatibilitate de versiune. Ba cunosc şi pe unii care au dezactivat afişarea flash-urilor în browser, speriaţi fiind de reclamele care se întind pe juma’ de pagină web şi n-au buton de închidere, uneori însoţite de sunete bizare şi lungi, stresante.

Photoscape

Până la tutorialul despre cât de uşor poţi crea animaţii GIF, descriu succint celelalte opţiuni sau unelte de editare principale ale Photoscape. În fapt, ce se întâmplă după ce clicuieşti iconiţele ce apar în jurul siglei, la pornirea aplicaţiei.  Şi apropo, descarcă odată programul de aici. Are 14MB, e doar pentru Windows.

  • Viewer – vizualizarea pozelor din computer şi slideshow
  • Editor – permite ajustarea luminozităţii, a culorilor şi contrastului, a balansului de alb, corecţia umbrelor, adăugarea de text, desenare, decupare (crop), eliminarea efectului de „ochi roşii”, include diverse filtre
  • Batch Editoreditarea şi conversia unui grup de fotografii, dintr-o dată: aplici setările dorite, apeşi un buton şi toate pozele selectate sunt transformate deodată după tiparul dorit; excelentă opţiune pentru fotografii care vor să încarce în timp record pe galeria lor online mai multe poze la dimensiuni mai mici, într-un format anume, cu luminozitate/contrast – aşadar optimizare la minut pentru web
  • Pagecreezi o singură imagine prin alăturarea mai multor poze (un colaj), ai opţiuni diverse de alegere a stilului „ramelor”
  • Combine – lipeşti mai multe poze pe verticală ori orizontală, cu sau fără vreo delimitare între ele; rezultatul seamănă, ca design, cu un un film foto din aparatele acelea vechi
  • Print – utilitar de printare facilă a unor imagini de dimensiuni standardizate, în moduri diferite de orientare: poză de legitimaţie, carte de vizită ş.a.m.d.
  • Spitter – „crapă” o poză în mai multe bucăţi; probabil o idee bună ca să-ţi faci propriul set de puzzle bazat pe poze de familie 🙂
  • Screen Capture – are ca opţiuni capturarea întregului ecran, unei ferestre sau a unei regiuni de pe desktop
  • Color Picker – utilitar bun pentru cei care fac template-uri pentru websituri, ajută la determinarea codului RGB al culorilor de pe ecran (de pildă, o anumită nuanţă de gri are codul a2a1a1)
  • RAW Converter – converteşti imagini de tip RAW (necomprimate), cum sunt cele făcute de aparate DSLR, în poze JPEG
  • Rename – poţi schimba denumirea mai multor poze deodată, din două click-uri
  • Homepage – nimic interesant aici, doar un link către pagina oficială a soft-ului

Photoscape Batch Editor

Photoscape AniGif – cum să faci animaţiile

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).

Photoscape editor

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:

Banner test

Banner test

Banner test

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.

Nuviphone

Laptop Emtec

test go4it.ro

Î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.

Photoscape AniGif

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).

Animatie gif test

Alte detalii despre Photoscape: