Immagini sfocate nel Web Design: come farle funzionare
È un fatto innegabile: l'utilizzo di immagini sfocate è una tecnica di web design di tendenza nel 2015. Sembra che ovunque guardi ci sia qualche elemento di sfocatura.
Ma questa non è una soluzione ad alcuni dei tuoi problemi fotografici. È una tecnica distinta che richiede pratica per perfezionare e attenzione ai dettagli per farlo bene. Quindi, prima di saltare sulla tendenza, pensa alle opzioni per l'utilizzo di immagini sfocate per decidere se è giusto per te e come puoi sfruttare al meglio questa tecnica nei tuoi progetti.
Le foto sfocate sono alla moda
Potremmo dedicare intere pagine al numero di siti Web utilizzando immagini sfocate. La tendenza è molto importante in questo momento.
Questa è la prima cosa che devi considerare quando vai avanti con un'idea che include immagini sfocate.
- Vuoi far parte della tendenza?
- Puoi usare la tendenza in un modo un po 'diverso rispetto ad altri siti web là fuori?
- È il tuo stile o un po 'troppo abusato per i tuoi gusti?
- Sarai d'accordo con il design del sito dopo che la tendenza avrà seguito il suo corso? O avrai bisogno di una riprogettazione?
Non c'è assolutamente nulla di sbagliato nel creare qualcosa che è alla moda. Ma è una decisione che dovresti considerare dall'inizio. La creazione di un sito Web con immagini sfocate, a seconda dello stile e dell'utilizzo preferiti, può richiedere molto tempo e, se non si ha esperienza con il software di fotoritocco, potrebbe richiedere una formazione aggiuntiva.
La sfocatura è una tecnica da utilizzare con buone immagini
Questa potrebbe essere la frase più importante che leggerai quando pensi alle immagini sfocate. Funziona solo se hai delle buone immagini per cominciare. La sfocatura non è un modo per "riparare" un'immagine scadente.
Per dirlo in un altro modo. Se ti viene data una fotografia sfocata e ti viene detto di farne un sito web, non è di moda. Questa è una brutta foto. Se questa è la tua situazione, questa non è la tecnica per te. (Potresti voler iniziare a pensare di creare un elemento artistico con la tipografia o cercare immagini stock.)
Ma se hai una bella immagine di cui vuoi ottenere qualche miglia in più o usarla in un modo nuovo, la tecnica offuscata è una possibilità. Esistono diversi modi per pensare alla sfocatura (ci concentreremo su ciascuno di seguito) ma il primo passo è capire come creare effettivamente la sfocatura. Adobe ha un tutorial abbastanza carino per iniziare con Photoshop.
Sfoca l'immagine intera
Una delle cose che ha contribuito alla tendenza dell'immagine sfocata è un'altra tendenza: l'uso delle intestazioni degli eroi. I designer stanno unendo le tecniche per creare stile a schermo intero, immagini sfocate come elementi visivi dominanti sulle pagine di destinazione dei siti Web.
Il sito Web di Trellis Farm utilizza un'immagine iconica di una fattoria per darti un'idea del luogo per il suo sito Web. Per ulteriore interesse, la foto è in bianco e nero - per trasmettere quella sensazione di altri tempi - e stratificata con un grande carattere tipografico per attirare la tua attenzione. La pergamena continua quella sensazione aggiungendo colore al mix. La sfocatura è piacevole perché sai cosa c'è nella foto e aiuta l'utente a concentrarsi sul testo e sulle azioni successive da compiere sullo schermo.
Perché funziona:
- Uno sfondo sfocato può mettere a fuoco i livelli nella parte superiore dell'immagine come il testo. Assicurati solo di selezionare un carattere di impatto.
- Può creare nuovo interesse con un'immagine che usi regolarmente, come una foto di marca standard.
- Può essere utilizzato con quasi ogni tipo di contenuto in quasi tutte le combinazioni di colori per un fascino universale.
Sfondi e immagini a strati
La sfocatura non è una tecnica a immagine intera. Parti specifiche di un'immagine possono essere sfocate per l'impatto. Mentre è più comune vedere sfondi sfocati con un focus in primo piano nitido, alcuni designer adottano l'approccio opposto per un'opzione nuova che ha un primo piano sfocato con uno sfondo a fuoco.
L'agenzia Anchour utilizza la sfocatura nelle foto sulla sua pagina di destinazione. La tecnica utilizzata nell'immagine può far parte della fotografia reale oppure puoi creare lo stesso effetto nel software di fotoritocco. Il trucco qui quando stai creando questo stile di sfocatura è che non puoi dire che è stato "creato" e dovrebbe apparire naturale come se la foto fosse stata scattata in quel modo. (Nel software di fotoritocco, puoi farlo utilizzando lo strumento di sfocatura gaussiana con piccole regolazioni incrementali.)
Perché funziona:
- La sfocatura crea contrasto visivo e può attenuare la sensazione di occupato di un'immagine.
- Cambia la prospettiva dell'immagine e la visione dell'utente.
- Aggiunge dimensione a un'immagine che altrimenti potrebbe sembrare piatta per un rendering quasi 3D.
Sfocatura drammatica per l'arte astratta
Quando hai bisogno di un'immagine di sfondo per il tuo sito web ma riesci a trovare un motivo o un colore che faccia il trucco, una foto con una sfocatura drammatica può essere la soluzione perfetta. Considera una sfocatura drammatica come qualcosa che rende il contenuto fotografico non visibile a colpo d'occhio e potrebbe rendere la foto completamente irriconoscibile.
Questa è un'opzione popolare per i siti Web che stanno avviando o promuovendo un progetto digitale con uno sfondo sfocato astratto dietro un telefono che mostra il prodotto. Piction utilizza la stessa immagine sullo sfondo e nel telefono con diversi livelli di zoom e sfocatura per un design davvero accattivante.
Perché funziona:
- Focalizza l'attenzione sul prodotto in primo piano.
- Crea uno sfondo personalizzato anziché utilizzare un modello che potrebbe trovarsi su altri siti Web.
- Fornisce al designer il controllo sul colore e sulla sensazione quando si tratta di come la sfocatura astratta funzioni dalla nitidezza a colori e forme morbidi fino alla leggibilità dell'immagine di sfondo e al collegamento con il marchio.
Sfocatura sottile per qualsiasi immagine
Un piccolo grado di sfocatura può funzionare anche in molti altri tipi di foto e non deve essere utilizzato esclusivamente per un'immagine a schermo intero. I designer possono aggiungere un pizzico di sfocatura a un'immagine che necessita di un po 'di messa a fuoco in primo piano per aiutare gli utenti a guardare le parti giuste di un'immagine, a stilizzare un logo o semplicemente a creare un aspetto più complesso.
Il logo di Zeo utilizza una sfocatura sottile ma piacevole nel design rotondo. La sfocatura ti costringe a guardare il logo più da vicino a causa della forma interessante e del bordo che ha un lato del logo rispetto alla nitidezza dell'altro lato. La tecnica è ulteriormente enfatizzata perché il design del sito web nel suo insieme utilizza la sfocatura in altri luoghi, come ad esempio lo sfondo dell'immagine dominante sulla pagina di destinazione.
Perché funziona:
- Le piccole sfocature possono creare un elemento di sorpresa.
- Attira l'attenzione su parti specifiche di una foto, con messa a fuoco visiva. (Dai un'occhiata ad alcune delle promozioni sul sito Zeo per altri usi della sfocatura sottile per la messa a fuoco fotografica.)
- Può darti la giusta quantità di contrasto per sovrapporre altri elementi su una sezione di un'immagine, come il testo, nello stesso modo in cui una sfocatura a schermo intero può funzionare con un'intestazione di eroe.
Usalo anche per video
Puoi abbinare la tendenza della sfocatura anche a un altro elemento di design accattivante: il video. Puoi usarlo come faresti con qualsiasi altra tecnica di immagine. Funziona allo stesso modo (anche se gli strumenti e il processo di modifica sono leggermente diversi).
Level 2 Design utilizza il blu e un effetto di tipo schermo per aggiungere interesse a un video a schermo intero. (Aggiorna il browser in video sfocati.) L'effetto è divertente e fresco e funziona con video che dovrebbero avere un'atmosfera vecchia scuola. I loop video rapidi sono altamente leggibili e catturano l'attenzione.
Conclusione
Esistono molti modi per utilizzare la sfocatura in modo efficace per i progetti di web design. Il segreto - se ce n'è davvero uno - è creare un effetto sfocato che si fonde perfettamente con il resto del design. E puoi farlo quasi pensando alla sfocatura agli estremi.
Usa molta sfocatura per un forte impatto e una sensazione astratta. Usa una sfocatura minima per creare un contrasto sottile e impostare la messa a fuoco. Come con qualsiasi progetto, testalo su alcuni utenti prima del lancio e vedi cosa ne pensano. Notano la sfocatura? (La maggior parte dei non designer non ci penserà davvero.)
