Lavorare con più foto e immagini può essere una prospettiva difficile. Fatto con attenzione, l'uso di più immagini può aiutare a creare un design efficace e magistrale per progetti di stampa e web design. Alcuni dei migliori esempi di design che utilizzano più foto possono essere trovati nei siti Web dei fotografi professionisti.
Considerare la posizione dominante, il numero di foto, il colore, il raggruppamento e la qualità dell'immagine quando si lavora con una varietà di foto. Guarda i dettagli e considera la sensazione di un progetto per ottenere i migliori risultati quando usi molte immagini nel tuo progetto.
Ti piace l'articolo? Assicurati di iscriverti al nostro feed RSS e seguici su Twitter per rimanere aggiornato sui contenuti recenti.
Crea Dominanza
Il tuo sito dovrebbe avere un'immagine, o una collezione di immagini, che è dominante ed è la grande immagine evidente sul sito. Prendi in considerazione l'utilizzo di una singola foto che utilizza gran parte dello spazio, verticale o orizzontale con cui stai lavorando o lavori per combinare le immagini in modo che appaiano unificate.
Foto singola
Il modo più semplice per creare una posizione dominante con le immagini è concentrarsi su una singola immagine o foto. L'immagine viene visualizzata a grandi dimensioni con foto più piccole utilizzate per accentuare l'immagine principale. Questo è un concetto molto diffuso e può funzionare in modo eccezionale con una foto con display di grandi dimensioni e un gruppo di immagini più piccole e strettamente ritagliate.
Drammatico raccolto
Un altro modo per far risaltare una singola foto in una struttura di layout con più foto consiste nell'utilizzare il ritaglio drammatico. A volte una forma insolita, ad esempio un'immagine orizzontale o verticale estrema, è sufficiente per attirarti prima a un'immagine. Le immagini secondarie con forme più tipiche non sono al centro dell'attenzione.
Ognuno di questi siti utilizza una forte immagine orizzontale in diversi modi. Maleny Manor ha un approccio diretto con un ritaglio forte che allunga la larghezza della pagina Le immagini secondarie sono piccole icone che indirizzano verso altre immagini. Il sito web di William & Mary sembra utilizzare anche un forte crop, ma se si guarda da vicino il resto dell'immagine è incorporato nel banner. Questo crop trick funziona anche per creare una forte visuale, che è completata da immagini più piccole che vengono tagliate strettamente.
Colore
L'uso del colore, o meno, può anche aggiungere impatto nei layout di più foto. La miscelazione di foto che utilizzano il colore pieno con toni in bianco e nero o seppia può aggiungere contrasto e enfasi a determinate immagini. L'immagine dispari - il colore in uno schema in bianco e nero o viceversa - attirerà immediatamente la massima attenzione.
Denis Reggie Photography utilizza uno schema di immagini in bianco e nero con un'immagine a colori rotanti per guidare l'utente attraverso le immagini sulla pagina. Inoltre, lo strumento di navigazione principale nella pagina si trova in un blocco di colore statico. Il colore è usato per guidare l'utente attraverso ciascuna delle immagini in sequenza. Si noti inoltre come l'immagine a colori salti quasi fuori dalla pagina in relazione alle immagini incolori.
C & J Willis Photography usa una tecnica simile. Miscelando fotografie in bianco e nero ea colori, l'enfasi cade dall'immagine più grande alle immagini più piccole sottostanti. Le foto a colori appaiono più grandi e più dominanti e ti portano in altri punti del sito web, perché l'immagine in bianco e nero sfuma sullo sfondo scuro.
Raggruppamento di immagini
Lavorare con gruppi di immagini può anche creare una forte presentazione visiva. Mentre alcuni preferiscono l'approccio speculare, con un gruppo di immagini di forma e dimensioni identiche, puoi anche giocare con gruppi di forme e dimensioni non corrispondenti.
Entrambi gli approcci possono funzionare ma richiedono attenzione ai dettagli. Il corretto allineamento delle foto è fondamentale quando si lavora con i raggruppamenti. Assicurati che le foto siano dimensionate in modo identico quando lavori con una fila di dimensioni simili e lavori con le colture quando usi forme diverse in modo che le immagini si adattino nel tuo spazio.
È altrettanto importante che le foto? quando si raggruppano le immagini. Tieni presente che le immagini web possono? Muoversi? in base alle impostazioni del browser dell'utente. Se il tuo CSS non supporta il raggruppamento (o se questo è qualcosa che non sei pronto a tentare), unisci le tue immagini in un singolo file in un software di fotoritocco come Adobe Photoshop e posiziona il file multi-foto come un'unica immagine. Ciò garantisce che il tuo raggruppamento di foto appaia come desiderato. Inoltre, ricorda di tenere a mente la spaziatura e l'allineamento, in modo che le immagini abbiano un aspetto pulito.
Stampa e considerazioni Web
Le regole per lavorare con più immagini superano i confini tra stampa e web design. Per ogni tipo di progetto di progettazione, concentrarsi su immagini forti, leggibilità e dettagli per i migliori risultati.
Dimensione e proporzione
Troppe piccole foto possono essere difficili da comprendere e possono confondere il pubblico. Considera la coltura di ciascuna immagine e il modo in cui riempie la cornice. Le foto grandangolari non funzionano bene con le dimensioni ridotte, mentre le foto ritagliate mantengono meglio quando usate di piccole dimensioni.
La chiave per entrambi i tipi di progetti è la proporzione. Guarda i volti sopra nella prima fila di foto. Nel campo largo, i volti sono quasi indistinguibili e appaiono molto piccoli. Ma nella seconda fila, ciascuna delle facce è chiaramente visibile. Le cornici sono di dimensioni identiche in ogni fila di foto e le foto contengono le stesse immagini; l'unico cambiamento è il raccolto di ciascuno. Le colture più strette rendono le foto più grandi, anche se i fotogrammi non lo sono.
Vuoi che ogni immagine sia leggibile alla dimensione che la mostri. Se non riesci a capire quale sia l'immagine o cosa sta succedendo in una foto, riconsiderare la dimensione dell'immagine o sperimentare un ritaglio alternativo.
Qualità dell'immagine
Una brutta immagine usata in piccolo o con testo è ancora solo una brutta immagine. Lancialo.
Assicurati di utilizzare immagini forti a qualsiasi dimensione. Evita le immagini che sono pixelate, sfocate, scattate in condizioni di scarsa illuminazione o con problemi evidenti, come un dito nell'angolo della foto o il riflesso dell'obiettivo.
Usare anche solo un'immagine di scarsa qualità può avere un impatto sul tuo progetto, indipendentemente da quanto sia forte il design complessivo.Le immagini scadenti sono prive di professionalità e possono far sì che un cliente abbia un'impressione negativa sul tuo lavoro. Non esiste una correzione per un'immagine che non ha qualità di risoluzione o composizione.
Significato dell'immagine
Pensa anche al messaggio che la tua immagine trasmetterà. Assicurati che le immagini siano appropriate per il tuo pubblico e corrispondano? l'un l'altro. Ad esempio, un sito web che promuove un negozio di tatuaggi come quello sopra non avrebbe lo stesso effetto se l'immagine di sfondo presentasse nuvole e coniglietti.
Conclusione
L'utilizzo di più foto nel design può essere uno strumento efficace per mostrare immagini eccezionali. Fai attenzione alle immagini scadenti e seleziona attentamente le foto. Assicurati che ogni immagine funzioni per il tuo progetto e non forzare l'uso di immagini aggiuntive se non sono disponibili.
Pensa a come le immagini verranno visualizzate e ad adottare ulteriori passaggi nel web design per garantire che i gruppi rimangano intatti come volevi. Presta attenzione ai dettagli di tutti i progetti multi-foto e controlla le colture e le dimensioni dell'immagine in modo che i raggruppamenti abbiano dimensioni coerenti e un aspetto pulito. Infine, gioca con diverse opzioni come colture identiche e forme e dimensioni diverse per sviluppare un design che rappresenti al meglio il tuo progetto.
Fonti di immagini: DeusXFlorida, kevin dooley, photoskate e Anthony van Dyck.