Come aggiungere effetti alle foto con 10 tool online

Con uno smartphone possiamo scaricare una miriade di applicazioni per aggiungere effetti alle foto scattate con la fotocamera. Con il computer non è così semplice aggiungere effetti alle fotografie, neppure con i programmi di grafica più usati come Gimp e Photoshop.

In questo articolo vedremo come usare delle applicazioni online che permettono di aggiungere effetti alle foto direttamente con il browser. Abbiamo già visto come, tramite computer, si possano aggiungere effetti alle immagini con l'app Painnt installabile dal Microsoft Store (scarica Painnt - Art Filter Pro).

Ho pure illustrato come installare anche da computer i celebri Effetti della app Prisma, molto apprezzati dagli utenti Android e iOS. Tra gli effetti più usati ci sono quelli vintage, per invecchiare una foto, il classico effetto seppia, quello per convertire una immagine in bianco e nero e quello chiamato vignettatura. Molte applicazioni hanno anche effetti esclusivi, anche se spesso usano rinominare gli effetti per farli apparire come originali.

Creare effetti audio quando si passa con il mouse o si clicca su link o su immagini

Navigando nel web vi sarete accorti che, in alcune pagine web, cliccando o passando sopra a un link o a una immagine con il cursore, viene riprodotto un breve suono.

Si tratta di un effetto piuttosto semplice che può essere inserito tramite un codice javascript e con il linguaggio HTML5. Ovviamente prima di iniziare, occorre avere i file audio che si vuole vengano riprodotti. Dovranno essere piuttosto brevi e in formato MP3.

La seconda operazione sarà quella di caricarli nel web per poterne ricavare il loro link diretto. Gli utenti di Blogger che hanno un sito gratuito del tipo nomesito.blogspot.com, potranno caricare detti file su Google Sites.

Si accede a Google Sites quindi si va su Crea in alto a sinistra per creare il primo o un altro sito. Lo si può creare nella versione classica o nella nuova versione di Google Sites. Con la vecchia versione si dà un nome al progetto che ne determinerà anche l'URL del tipo https://sites.google.com/site/nome-progetto.

Effetti speciali per le immagini - Parte seconda

Invece di pubblicare una immagine in una pagina web in modo semplice, si può fare in modo che il lettore possa interagire con essa passandoci sopra il cursore, cliccandoci o facendoci sopra un doppio click. Gli effetti introdotti che si mostrano al passaggio del cursore sono essenzialmente inseriti con solo il CSS3.

Gli effetti che invece si basano su eventi come click o doppi click, hanno bisogno di un codice diverso del tipo javascript. Non è particolarmente complicato mostrare immagini con effetti speciali come abbiamo visto nella prima parte del post che potrete consultare cliccando sul link a fondo pagina.

Gli effetti possono essere aggiunti in una singola pagina web, oppure applicati a tutte le immagini pubblicate con quella particolare classe, ovvero regola CSS. Per testare i codici e per mostrare gli screenshot degli effetti qualche volta ho usato immagini di test e altre volte sono ricorso alle immagini casuali.

Effetti speciali per le immagini - Parte prima

Con questo post inauguro una rassegna di alcuni effetti speciali piuttosto semplici da applicare alle foto e che possono essere implementati in tutte le tipologie delle pagine web. Non so ancora se i post dedicati a questo argomento saranno solo due o di più; in ogni caso alla fine degli articoli metterò i link per consultare gli altri post che ho pubblicato sullo stesso tema.

In questo primo articolo mi occuperò solo degli effetti creati con l'ausilio del CSS3 mentre nei post successivi mostrerò anche effetti generati da javascript, sempre molto semplici, e che saranno attivati non solo dal passaggio del mouse sulle foto ma anche da eventi click o doppio click.

I codici di questi effetti sono autosufficienti e possono essere incollati così come sono in qualsiasi pagina web. La prima parte del codice è il CSS compreso tra i due tag <style> e </style> mentre la seconda non è altro che il codice HTML che riprende la classe definita all'interno dei tag style.

10 effetti hover per le immagini al passaggio del mouse.

Il passaggio del mouse su una immagine è un evento che può essere sfruttato per modificare il suo aspetto. Con il CSS si può usare la pseudo-classe a:hover per modificare il colore del collegamento quando quest'ultimo viene puntato con il mouse.

Si può per esempio utilizzare questa riga di codice a:hover {color: #FDBCB7;} per mostrare il link con il colore determinato dal codice inserito. Si può seguire questa falsariga anche per creare delle regole per intervenire sull'aspetto delle immagini quando ci si passa sopra con il mouse.

In condizioni normali quando il mouse passa sopra a un foto viene mostrato solo un tooltip con il testo che è stato inserito nel tag title. Gli effetti inseriti con l'evento onmouseover o mousevover vale a dire con il passaggio del mouse sulla immagine vengono definiti solitamente effetti hover.

Mostrare foto a colori in bianco e nero e viceversa al passaggio del mouse.

Nel precedente post abbiamo visto come con l'utilizzo di eventi creati dal mouse possiamo applicare un effetto zoom alle immagini quando ci si passa o ci si clicca sopra con il mouse.

Come preannunciato questo tipo di eventi oltre ad essere applicati nel javascript sono molto utili anche nel CSS3 specialmente adesso che questo linguaggio è supportato senza eccezioni da tutti i principali browser.

Probabilmente avrete visto che in alcuni siti quando si passa sopra a una immagine con il cursore questa si modifica nell'aspetto diventando più opaca o più trasparente oppure diventando grigia se è a colori o colorandosi se è in bianco  nero.

Effetto zoom per le immagini con passaggio e clic del cursore.

Con il mouse si possono creare tutta una serie di interazioni che sono chiamate eventi e che sono molto utilizzati nei linguaggi javascript e CSS. In quest'ultimo linguaggio è molto usato il codice per variare l'aspetto di un oggetto HTML quando ci si passa sopra con il cursore. Due eventi distinti si creano quando il mouse passa sopra a un elemento e quando il cursore lascia l'elemento in oggetto.

Ci sono poi gli eventi determinati dai click singoli, quelli determinati dai doppi click senza considerare anche il tasto del mouse che viene premuto che può essere quello sinistro, quello destro o quello centrale.

Con dei codici semplicissimi di javascript si possono creare degli effetti per rendere trasparenti o opache le immagini al passaggio del cursore oppure applicare un effetto zoom quando ci si clicca sopra.

Come aggiungere effetti speciali al blog per Carnevale.

Siamo già entrati nel clima Carnevale dal Giovedì grasso di due giorni fa e anzi in talune città dove il Carnevale è particolarmente sentito la festa è già iniziato da qualche settimana. Sono quindi un po' in ritardo con questi abbellimenti specifici per il Carnevale.

Infatti in occasione delle principali festività è mia abitudine pubblicare dei post con gli effetti speciali da aggiungere al nostro sito per adattarlo al clima della festa. L'ho già fatto per le Feste di San Valentino, di Halloween, di Natale e di Pasqua. 

Il Carnevale in Italia è associato principalmente alle Città di Venezia e di Viareggio ma ci sono anche centri minori che hanno delle manifestazioni veramente di rilievo in occasione del Carnevale.

Suoni paurosi casuali che si riproducono automaticamente nel blog per Halloween.

La festa di Halloween è entrata da anni a far parte anche dalla nostra cultura e viene festeggiata regolarmente anche in Italia nella notte del 31 Ottobre. La simbologia prevalente prevede zucche intagliate a forma di facce horror, fantasmi, zombie con uno sguardo tra l'impaurito e lo scherzoso verso il mondo dei morti che tra l'altro si festeggeranno di lì a poco.

Nel mondo anglosassone è uso tra i più piccoli bussare alle porte delle case per poi rivolgere il classico dilemma trick or treat? che è stato italianizzato in dolcetto o scherzetto? Non faccio parte della schiera di blogger che sono soliti adattare il layout al periodo dell'anno con esplosioni floreali in Primavera e Estate o cadute di foglie o di neve in Autunno e Inverno però la richiesta di effetti speciali e particolari abbellimenti è sempre presente in ogni festività particolarmente sentita.

Effetto Lightbox in Blogger per gallerie di immagini, video, link, iframe e flash con lo script PrettyPhoto.

Nei blog della piattaforma Blogger di default da diversi anni è stato implementato un Effetto Lightbox nativo per le immagini. Se abilitato quando si clicca su una immagine questa viene mostrata a grandezza naturale su uno sfondo della pagina oscurata. Nella parte bassa della pagina verranno visualizzate le miniature di tutte le immagini presenti nella pagina per navigare tra di esse cliccandoci sopra.

Il Lightbox nativo di Blogger può anche essere disabilitato andando su Bacheca -> Impostazioni -> Post, Commenti e Condivisioni -> Post -> Mostra le immagini con Lightbox. Si seleziona il No al posto del Sì nelle opzioni quindi si clicca in alto a destra su Salva Impostazioni. 

Come avere gli effetti Prisma nel computer per trasformare foto, video e GIF in opere d'arte.

Le applicazioni per smartphone per modificare o abbellire le foto sono tra quelle che hanno il maggiore successo su Google Play e App Store. Ce ne sono veramente di ogni genere anche di quelle che oltre alle modifiche grafiche classiche aggiungono particolari filtri ed effetti.

Alcune applicazioni di condivisione di immagini hanno già al loro interno dei filtri con effetti. Ricordo a tal proposito Instagram che ha fatto scuola in questo senso. Sono particolarmente apprezzati gli effetti introdotti dalla applicazione Prisma (Installa Prisma per Android - Installa Prisma per iPhone).

I filtri presenti su Prisma permettono di convertire una foto in una opera d'arte (artworks). I filtri sono stati mutuati dagli stili di pittori famosi come Munk o Picasso.

Effetto Telefono e Walkie-Talkie per un audio con Audacity.

Nella lista dei programmi da installare su Windows 10 ho inserito Audacity che è open source e multipiattaforma e che consente di editare i file audio in modo pressoché completo. Chi non abbia ancora installato Audacity può farlo dalla sua Pagina di Download. Insieme al programma va scaricato anche il plugin Lame Encoder per poter salvare i file anche in formato MP3. 

Nel menù principale di Audacity c'è la voce Effetti che apre un menù con una miriade di effetti da applicare a una traccia audio. Audacity ha anche una libreria di plugin di Effetti da installare come estensioni. In questo articolo mi occuperò di due effetti semplicissimi che possono essere aggiunti da chiunque a un file audio. Una voce che arriva via telefono per la composizione delle sue frequenze è diversa dalla stessa voce che invece viene registrata dal microfono.

Come installare i plugin gratis Flaticon, Random User e Nik Collection in Photoshop.

Photoshop è il programma di grafica a pagamento più utilizzato. Oltre che sulle moltissime funzionalità può contare anche su numerosissimi plugin per aggiungere ulteriori strumenti. Alcuni di questi plugin sono frutto di iniziative open source e quindi sono gratuiti mentre altri sono a pagamento.

In questo articolo vedremo come installare in generale un plugin di Photoshop e nello specifico come installare Flaticon e Random User che aggiungono due interessanti funzionalità. Il plugin che non deve assolutamente mancare nel vostro Photoshop e/o Photoshop 12 Elementi è Nik Collection di Google che è diventato gratuito da un paio di anni.

I plugin Google Nik Collection per Photoshop diventano gratis.

Photoshop è il programma di grafica più utilizzato per la sue moltissime funzionalità. Vi possono essere anche aggiunti dei plugin esterni alcuni di questi distribuiti in modo gratuito.  Molti plugin che possono essere installati su Photoshop sono compatibili anche con la sua versione meno pesante denominata Photoshop Elements e con altri programmi della Adobe quali Brigde, Lightroom e Aperture.

Google aveva da tempo creato dei plugin per effetti grafici raccolti nella Google Nik Collection che fino a pochi giorni fa erano a pagamento. Con un post su Google+ veniamo informati che questa raccolta di 7 plugin può essere installata gratuitamente.  Si va su Download Now per scaricare il file .exe.

Come personalizzare il blog su Blogger per la Pasqua.

In occasione delle principali festività sono solito proporre delle personalizzazioni da installare nel blog per ricreare una atmosfera in linea con il periodo dell'anno. Ricordo di aver creato effetti speciali per San Valentino, per Natale, per Capodanno e per Halloween.

In realtà tutti questi effetti sono mutuati dagli stessi script a cui si sostituiscono le immagini in modo che un effetto natalizio possa essere facilmente convertito in uno per San Valentino e viceversa. In occasione della Pasqua passo quindi a presentare delle personalizzazioni che possono essere facilmente installate nelle pagine web in senso lato ma più specificamente nei blog su Blogger. Purtroppo l'iconografia pasquale non offre molto di più delle classiche uova.

ANGELI ANIMATI CHE CADONO DALL'ALTO

Il celebre effetto della nevicata si può convertire in una cascata di angeli animati

Effetti speciali da installare nel blog per San Valentino.

Il 14 Febbraio è San Valentino, la Festa degli Innamorati che prende il nome da Valentino, vescovo romano nato a Terni che fu torturato e ucciso intorno al 200 d.C. San Valentino è venerato non solo dai cattolici ma anche da ortodossi e anglicani.

La festa che prende il nome dal santo pare che derivi da quella pagana romana pre-cristiana di Lupercalia. L'associazione a San Valentino è merito dei monaci benedettini di Terni che diffusero per primi la festa in Italia, festa che poi attecchì in Francia e Inghilterra. Il 15 Febbraio San Faustino è invece la festa dei single. Secondo la tradizione pare che San Faustino da Brescia desse la possibilità alle ragazze di incontrare il loro innamorato. Vediamo quali effetti e personalizzazioni installare in una pagina web per ricordare la Festività di San Valentino ai lettori che passassero nei giorni antecedenti per il nostro sito. L'obiettivo è quello di mostrare effetti divertenti ma non troppo invasivi.

Come abbellire il blog per Carnevale con effetti speciali.

Quest'anno il Carnevale è quantomai precoce visto che arriverà il 7 Febbraio esattamente 6 settimane prima della Paqua da cui dipende la sua data. In occasione di questa festività, come del resto anche per le altre quali San Valentino, Natale e Halloween, in molte tipologie di blog ancorate alla attualità gli webmaster sono soliti implementare degli abbellimenti che la richiamano.

Il Carnevale è associato a maschere, carri allegorici e coriandoli.  Quando il Carnevale cade nel mese di Marzo si possono associare anche immagini floreali tipiche della Primavera. Vado quindi a presentare alcuni effetti speciali da installare nelle pagine web di Blogger ma anche di Wordrpess che richiamino questa iconografia carnascialesca.

CASCATA DI CORIANDOLI ANIMATI MULTICOLORI

Il primo effetto che vi propongo è una classica cascata di coriandoli multicolori e animati. Si tratta in sostanza di immagini circolari in formato GIF che cadono nel blog partendo dall'alto. L'immagine di base è la seguente  e il codice può essere installato su Wordpress andando su Aspetto > Widget > Testo oppure su Blogger accedendo a Layout > Aggiungi un gadget > Base > HTML/Javascript > Sezioni del sito.  In entrambi i casi il codice da incollare è il seguente

Come aggiungere o togliere opacità alle immagini di Blogger.

La libreria jQuery nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi, l'animazione di elementi in pagine HTML e di implementare funzionalità AJAX. Mediante questa libreria si possono creare effetti di ogni genere che possono essere applicati a menù e ad altri elementi che necessitano di animazione.

La libreria jQuery viene periodicamente aggiornata e è sempre meglio utilizzare la versione più recente. In questo articolo vedremo una applicazione molto interessante di questa libreria per aggiungere opacità a tutte o solo a determinate foto.  Prenderemo in considerazione quattro possibili opzioni.

Come inserire effetti speciali nel blog per le Feste di Natale.

Qualche settimana o anche solo qualche giorno prima di Natale alcuni amministratori di blog sono soliti abbellire il loro sito con addobbi natalizi di ogni genere. Come tutti gli anni penso di fare cosa gradita ai lettori presentando alcuni effetti speciali a tale scopo.

Si tratta di cose già pubblicate su questo sito in anni passati ma sono tutte nuovamente controllate visto che da un anno all'altro i siti utilizzati come hosting degli script spesso cessano la loro attività. L'anno scorso capitò a Google Code e dal prossimo anno sarà così anche per Google Drive.

Alcuni di questi effetti possono anche essere inseriti contemporaneamente e per quasi tutti ci sono le demo da visualizzare in alcuni blog di prova che utilizzo.

Jingle di Natale che si riproducono automaticamente nel blog.

Mancano meno di quaranta giorni a Natale e come tutti gli anni in questo sito inizio a pubblicare dei widget da usare in occasioni di tali feste. Una personalizzazione sempre molto richiesta è quella delle canzoni natalizie che si riproducono in automatico.

I player audio utilizzati in passato per la riproduzione dei file erano basati su servizi di Google che sono stati ritirati come Google Reader, che aveva un player per i feed, e Google Code. Per fortuna adesso tutti i principali browser compreso Internet Explorer supportano i tag HTML5 <audio> e <video> che implementano un player nel browser senza bisogno di appoggiarsi ad altri servizi.