Come ridimensionare, tagliare ed applicare watermark alle immagini da iPhone | Guida Workflow iSpazio #10 [Video]

Oggi utilizzeremo Workflow per realizzare un’applicazione in grado di ridimensionare immagini ad una dimensione precisa ed un’altra che permette di applicare un Watermark su un’immagine.

Workflow è una potentissima applicazione per iOS che vi permette di semplificare azioni lunghe o complesse. Vi basterà premere il tasto “play” per avviare una serie concatenata di azioni, in maniera del tutto automatica.

Con quest’applicazione si possono fare davvero tante cose e quindi abbiamo deciso di dedicargli una rubrica su iSpazio. Di volta in volta, vi permetteremo di scaricare nuovi Workflow, creati o modificati da noi, per svolgere delle operazioni che fino ad oggi credevate impossibili!

Dopo avervi offerto i Workflow per scaricare i video da FacebookYouTubeInstagramTwitter, quello per Chattare più velocemente su Whastapp e tutti gli altri che abbiamo raggruppato in questa pagina, oggi vedremo:

whatsapp workflow

Come ridimensionare le immagini (singole o multiple) e come applicare un watermark

Rispetto agli altri Workflow, quello di oggi è un po’ più complesso. Vengono infatti eseguite più operazioni e riusciremo ad ottenere dei risultati paragonabili a vere e proprie applicazioni. Fortunatamente vi forniremo il download già “pronto” e poi nella sezione “Impariamo” andremo ad analizzare i vari costrutti e creare alternative. Data la complessità leggermente maggiore, alla fine dell’articolo trovate un video che vi invitiamo a guardare, che renderà l’apprendimento e l’utilizzo dei Workflow decisamente più immediato.

workflow

Resize Image ↔️

Fabiano Confuorto

Scarica

Il primo Workflow ho deciso di chiamarlo “Resize Image” e riesce sia a ridimensionare le immagini che a tagliarle, in maniera tale da ottenere una foto finale che abbia un preciso numero di pixel in larghezza e in altezza. Io stesso utilizzo questo Workflow quando scrivo gli articoli per iSpazio direttamente da iPhone. Tutte le immagini dei nostri post sono di dimensioni 750 x 389 pixel e quindi è mia premura assicurarmi di caricare un’immagine con queste caratteristiche. Ecco come procedo:

workflow

  • Prima di tutto salvo nell’iPhone la foto in formato originale, quella che mi interessa rimpicciolire o tagliare (come quella che trovate qui sopra).
  • Poi decido se voglio ridimensionare soltanto un’immagine oppure se ne ho molteplici da processare contemporaneamente. Nel caso di immagini multiple, bisogna prima attivare l’interruttore “Select Multiple” e poi il tasto Play.
  • Viene aperta la Galleria dove seleziono la/le foto da processare.
  • Successivamente appare la prima finestra che mi invita a “ridimensionare” l’immagine (senza alterare l’aspect-ratio). Qui devo inserire soltanto la lunghezza perchè l’altezza viene calcolata di conseguenza. Inserisco quindi “750” nel campo weight e procedo.
  • Appare una seconda finestra, questa volta lo scopo è “tagliare” l’immagine in altezza, mantenendo inalterata la lunghezza. Qui inserisco nuovamente “750” come lunghezza e poi “389” nel campo height.
  • Istantaneamente mi viene mostrata sullo schermo l’immagine finale ridimensionata e tagliata, nella dimensione da me richiesta (750 x 389 pixel). Il taglio avviene di default partendo dal centro, ma è possibile modificare il campo all’interno dell’azione “Crop Image”.  Si potrà quindi partire dall’alto, da un lato e così via. E’ inoltre possibile eliminare l’azione Resize oppure Crop senza compromettere il funzionamento del Workflow.
  • Non mi resta che salvare l’immagine finale adatta ad iSpazio.

Ecco il risultato:

workflow

workflow

Watermark *️⃣

Fabiano Confuorto

Scarica

Il secondo Workflow si chiama “Watermark” e riesce a sovrapporre un’immagine su un’altra. Per evitare confusione, chiameremo “watermark” l’immagine o il logo che viene sovrapposto e chiameremo “sfondo” l’immagine di base al di sopra della quale viene applicato il watermark.

Il Workflow è costruito in maniera molto semplice e chiara, con dei messaggi di avviso che vi guideranno nella procedura. Quando avrete acquisito abbastanza dimestichezza ed imparato il modo di procedere, potrete anche rimuovere i vari “Show Alert” che ho inserito come linee guida.

Prima di cliccare Play, assicuratevi di avere nel Rullino fotografico sia l’immagine di sfondo (potete utilizzare l’immagine precedentemente ridimensionata) che il watermark che volete sovrapporvi (ne trovate uno di esempio qui sotto). Anche questo Workflow riesce ad applicare l’azione su molteplici immagini contemporaneamente ma, anche in questo caso, dovrete prima attivare l’interruttore in corrispondenza di “Select Multiple”.

workflow

Iniziamo:
  • Clicchiamo Play e vedremo subito un avviso che dice: “Seleziona Immagine Sfondo”. Ci si riferisce alla base, quindi premiamo ok e scegliamola dal rullino.
  • Apparirà un secondo avviso che dice: “Ora selezione l’immagine di Watermark. Ti consigliamo di utilizzare una PNG a sfondo trasparente”. Clicchiamo Ok e scegliamo il logo dalla galleria.
  • Workflow applicherà automaticamente il Watermark, allineandolo all’angolo in basso a destra dello Sfondo. Se non siete soddisfatti, anche in questo caso potete scegliere arbitrariamente la posizione precisa. Potrete inoltre ruotare il watermark di un certo numero di gradi ed impostare l’opacità. Di default quest’ultima è impostata al 100%, se la riducete, il watermark risulterà semi-trasparente.
  • Come sempre il Workflow termina con il Quick Look dal quale è possibile salvare l’immagine finale nella Galleria

Con le impostazioni predefinite di “Watermark” otterrete risultati assolutamente impeccabili se l’immagine di Sfondo ed il watermark hanno esattamente le stesse dimensioni oppure se il Watermark è più piccolo dello sfondo (come è giusto che sia).

Tornando all’esempio degli articoli di iSpazio, prima abbiamo ridimensionato lo sfondo a 750 x 389 pixel, poi abbiamo applicato il watermark che per semplicità avevamo reso a sua volta da 750 x 389 pixel a sfondo trasparente.

Ed ecco il risultato:

workflow

Semplicemente utilizzando il nostro iPhone ed un paio di tap sul tasto Play abbiamo eseguito un’operazione che anche da un computer, con Photoshop, richiede diversi passaggi. Applicazioni in App Store che permettono di fare tutto questo in maniera così semplice sono difficili da trovare, almeno tra quelle gratuite. Anche Photoshop Mix per iOS non è così precisa in quanto non permette di impostare una dimensione precisa in termini di numero di pixel, quindi Workflow esegue un lavoro davvero eccellente sotto questo punto di vista e non richiede l’utilizzo di altre app per completare l’operazione.

Giocando con i vari settaggi riuscirete ad impostare il Workflow in base alle vostre necessità e tutti i successivi utilizzi saranno molto più rapidi ed immediati.

Impariamo:

Con i due Workflow di oggi impariamo ad approcciarci alle immagini che vengono gestite in maniera molto completa. Resize Image ci limita a giocare con le variabili di posizionamento per stabilire dove far avvenire il taglio. Con Watermark invece, vediamo un qualcosa di nuovo.

Innanzitutto gli “Show Alert“, dei veri e propri avvisi “Popup” che compaiono sullo schermo. Possono avere un titolo (che verrà riportato in grassetto) ed un testo. Potremo scegliere di far apparire soltanto il tasto Ok oppure il tasto Ok e Cancel. Il primo farà procedere il Workflow, il secondo lo fermerà.

workflow

In questo Workflow introduciamo anche le Variabili. In particolare, analizzando il flusso, riuscirete a capire come salvare dei dati all’interno di una variabile. Nei nostri esempi basta semplicemente far susseguire l’azione Select Photo con l’azione “Set Variable”. Noterete che tra i due flussi si crea una linea centrale che li collega e questo significa che il contenuto del primo box, andrà a “riempire” la variabile che porta il nome di “Sfondo”. Scorrendo in basso, vedrete che ho ripetuto la stessa azione con la seconda immagine, che andrà a riempire la variabile “Watermark” e poi mi è bastato sfruttare l’azione Overlay image per dire: “prendi lo sfondo ed applicaci sopra il watermark“.

workflow

Comprendendo la logica dei Workflow, vi avvicinerete moltissimo anche alla programmazione che, malgrado abbia un linguaggio totalmente differente e fatto di codice, richiede sicuramente lo stesso tipo di approccio mentale.

 

Variante:

In alcuni casi Ridimensionare una foto può già bastare, così come applicare un Watermark su uno Sfondo può già essere tutto quello di cui abbiamo bisogno ma, fin dall’inizio di questo articolo, vi ho detto che utilizzo io stesso questi Workflow per realizzare immagini per gli articoli di iSpazio e, per l’occasione, avrei bisogno di utilizzare entrambi i Workflow, uno dopo l’altro.

Ho quindi deciso di realizzare una variante: un unico Workflow che prima ridimensiona poi taglia e poi applica un watermark ad una foto iniziale. Potete scaricare “Resize Image + Watermark” da qui:

workflow

Resize Image + Watermark

Fabiano Confuorto

Scarica

A tutti e tre i Workflow abbiamo abilitato il supporto alle “Estensioni” di iOS. Vale a dire che potrete avviare un qualsiasi dei 3 Workflow anche mentre siete in Galleria e state sfogliando le immagini. Vi basterà premere l’icona condividi e da li “Run Workflow”.

Miglioriamo la qualità dei nostri Workflow di volta in volta e speriamo di esservi sempre utili.


Nuovi Workflow realizzati da iSpazio sono presenti in questa pagina (ottimizzata per iPhone):
www.ispazio.net/workflow

Oggi utilizzeremo Workflow per realizzare un’applicazione in grado di ridimensionare immagini ad una dimensione precisa ed un’altra che permette di applicare…

Reaction
Mi Piace Love Haha Wow Sigh Grrr
1721
Se questo articolo ti è piaciuto, ti consigliamo di seguirci su Telegram per restare sempre aggiornato su temi simili oppure su Facebook. Ci trovi anche su Twitter, dove leggerai tutti i titoli dei nostri articoli, proprio come tramite gli RSS. Iscriviti infine al nostro canale YouTube per non perderti i nostri video!
Pubblicato in: