Gli elementi di Retro Web Design

Lo stile vintage e retrò sta diventando sempre più popolare nelle opere d'arte digitale di oggi.

L'uso di temi retrò e vintage nel design è probabilmente una delle tendenze più pervasive da quando l'industria è diventata quasi completamente digitale.

Nel post di oggi, vedremo esempi di lavoro provenienti dal meraviglioso Dribbble , che ci aiuta a concentrarci su frammenti di un pezzo, piuttosto che sull'intero design o illustrazione.

Da qui, è possibile identificare quali tecniche sono state utilizzate e descrivere in che modo influiscono sul design generale. Acquisirai familiarità con queste tendenze del design e sarai in grado di replicarle.

Per aiutarti, brevi tutorial sono sparsi in tutto l'articolo. Ti mostreremo anche altri tutorial e risorse utili per iniziare il tuo lavoro vintage e retrò!

1. Cerchi e altre forme semplici

Forme semplici sono comunemente usate nel design vintage. I cerchi sono i più comuni, specialmente nel branding. Gli esempi qui sotto sono stati accuratamente selezionati per mostrarti quanto possano essere potenti forme semplici.

Questa bella illustrazione utilizza forme ellittiche per produrre un sole ed è rifinita piacevolmente con un effetto tipografico.

Il marchio di Circlebox Creative si basa su un cerchio e si ispira a timbri e timbri a inchiostro vintage. Il design è ghiacciato con motivi floreali e semplice stile tipografico.

Questo design è un po 'diverso perché fa molto affidamento su forme semplici per farlo scoppiare. L'intestazione della barra blu utilizza una lunga fila di piccoli cerchi per creare un interessante margine inferiore.

Questo design vintage, come il marchio Circlebox Creative, è ispirato a timbri e timbri d'epoca. L'identità sembra essere stata stampata su un pezzo di carta, a differenza delle linee morbide e pulite di Circlebox.

Ecco un altro pezzo di marchio basato su un cerchio. La trama e il blu tra tutti i grigi portano davvero questo disegno alla vita.

Un lavoro incredibilmente semplice composto da due cerchi, una trama, alcuni stili di fusione e una tipografia pulita. Questo pezzo dimostra davvero il potere delle forme semplici.

Mini-Tutorial

Come applicare un motivo floreale damascato a un cerchio usando Adobe Illustrator

Applicare un motivo a un cerchio in Illustrator è qualcosa che probabilmente farai molto se esplori la tendenza retrò. La tecnica è simile a ciò che Glace Cakes fa per il loro marchio (mostrato sopra).

Apri Illustrator e disegna un cerchio. Tieni premuto il tasto Maiusc mentre trascini il cerchio verso l'esterno per tenerlo in giro. Inserisci il motivo floreale damascato andando su File → Luogo.

Rimuovi qualsiasi sfondo e cambia il colore del modello appena inserito. Puoi selezionare singoli oggetti usando lo strumento selezione diretta.

Seleziona il tuo pattern usando lo strumento Selezione e poi vai su Finestra → Pathfinder per aprire la finestra Pathfinder se non lo hai già fatto. Tieni premuto il tasto Maiusc e seleziona la tua cerchia per selezionare entrambi i tuoi oggetti allo stesso tempo. Fai clic sul pulsante "Minus Front" nella finestra Pathfinder per rimuovere il motivo floreale fuori dalla tua cerchia. Gioca con la tua scelta di colori, e il gioco è fatto!

Creare una Bubbled Line usando Adobe Photoshop

Creiamo una linea simile a una bolla come quella nell'esempio sopra.

Utilizzando lo strumento selezione rettangolare, trascinare una selezione e riempirla con il nero su un nuovo livello. Seleziona lo strumento selezione ellittica e, tenendo premuto il tasto Maiusc, trascina una selezione molto piccola e riempila con il nero, sempre su un nuovo livello.

Posiziona il cerchio nero sul fondo del tuo rettangolo nero. Duplica il livello e posiziona il nuovo cerchio accanto all'originale.

Ripeti questo passaggio finché non hai qualcosa che assomiglia all'immagine seguente. Avrai molti livelli. Seleziona tutti mentre tieni premuto il tasto Maiusc, quindi vai a Livello → Unisci livelli per trasformarli in uno.

Ora aggiungeremo alcuni semplici stili di livello o opzioni di fusione per dare forma alla nostra forma! Fai clic con il tasto destro sul tuo livello e seleziona "Opzioni di fusione". La finestra Stile livello dovrebbe aprirsi. Applica i seguenti effetti per aggiungere sfumatura, ombreggiatura interna e ombreggiatura:

E abbiamo finito!

2. Combinazioni di colori bicolore e limitate

Le combinazioni cromatiche bicolore sono un elemento importante nel design vintage perché produrre stampe a colori non è stato così facile nel passato come oggi. Di seguito sono riportati alcuni esempi recenti di combinazioni di colori bicolore e limitate.

Questo design minimalista ottiene il suo fascino visivo dalle forme e linee in bianco e nero, in particolare la linea tratteggiata orizzontale e le forme ritagliate dal fondo del cerchio.

Questo marchio ripete alcuni colori selezionati in tutto. I colori funzionano incredibilmente bene insieme. Il giallo-arancio è il colore focale che attira la tua attenzione.

Questo bel pezzo di design retrò si basa esclusivamente sul colore e sulla tipografia. Le linee sottili a un pixel lo completano.

Un altro design bicolore bianco e nero. Questa identità si basa su un badge e ottiene un aspetto leggermente tridimensionale dalla semplice tipografia e dagli effetti.

Questo esempio mostra davvero quanto può essere efficace il colore. Usa tre colori: arancione, marrone e bianco. Il contrasto tra i tre campioni funziona molto bene per il design.

Questo design (l'identità stessa, non lo sfondo) si basa esclusivamente sul colore e sulla tipografia.

Questo design combina l'arancione e un bel blu-verde con il bianco. La combinazione di colori si abbina ai bordi fantasiosi e ai semplici effetti tipografici.

Ancora un altro logo tipografico vintage che si basa su due colori: bianco su rosso. Nota come l'identità si basa su una cerchia.

Questa identità usa solo tre colori, un carattere elegante e una bella modalità di fusione per mettere la ciliegina sulla torta.

Risorse a colori

Un sacco di grandi applicazioni sono là fuori per aiutarti a creare le tue combinazioni di colori. Questa piccola selezione condivide alcuni dei migliori:

ColourLovers (app web)
Un bel sito web dedicato alle combinazioni di colori. Sfoglia i temi esistenti creati dalla community o creane di nuovi da zero caricando le foto.
Tucano di voliera (app web)
Un'altra applicazione web, ma senza un supporto di comunità come ColourLovers. Questa applicazione ti consente di creare combinazioni di colori da zero o da immagini importate.
Adobe Kuler (app web)
Ancora un'altra applicazione web per la gestione del colore, questa volta a noi presentata dalla sempre più amata Adobe. L'interfaccia è stupefacente e facile da usare. Kuler ospita una comunità e puoi sfogliare le combinazioni di colori più votate.
Flusso di colori (app per iPhone)
Questa applicazione per iPhone consente di creare e archiviare tavolozze di colori da zero o da una foto importata. È inoltre possibile generare automaticamente schemi dalle foto utilizzando lo schema di colori incorporato.
Tavolozze (app per iPhone)
Le tavolozze sono simili a Color Stream per consentire di creare e archiviare schemi di colori in movimento da zero o da un'immagine. Puoi anche prendere i colori dal tuo sito Web preferito.

Se sei un principiante, ecco un paio di articoli che vale la pena di verificare: " Scelta delle combinazioni di colori " e " Teoria dei colori per i progettisti, parte 3: crea le tue tavolozze di colori “.

3. Elementi tipografici e tendenze

La tipografia è uno degli elementi più importanti nel design digitale retrò. Ci sono infinite possibilità con la progettazione del tipo, alcune delle quali possono essere trovate negli esempi qui sotto.

Questo frammento di tipo design è pieno di effetti positivi per il testo. Il testo è finito con un'ombreggiatura e un semplice, ma davvero impressionante, disegno a diagonale su un pixel.

Ecco il mio pezzo tipografico preferito in questa vetrina. Unisce alcuni eccellenti stili vintage con tecniche moderne. Il tipo è animato dall'aggiunta di dettagli sottili, come il tratto bianco di un pixel sulla linea "Sei invitato cordialmente" e le ombre sempre più importanti sul tipo di data.

Questa tipografia retrò rivela tecniche sorprendentemente semplici. Il tipo "Design è" viene duplicato tre volte e riposizionato. Il duplicato in basso viene quindi strutturato per creare uno splendido stile retrò in pochi minuti.

Ancora più tipografia che utilizza una semplice ombreggiatura per aggiungere profondità al carattere elegante e decorativo.

Tipografia semplice combinata con forme semi-trasparenti e una trama sottile. Il design si sposa bene.

Non è possibile ottenere molto più semplice di questo: una potente scelta di caratteri tipografici.

Questa tipografia tridimensionale è stata probabilmente completata in Illustrator, facendo uso degli strumenti 3D lì. È stato aggiunto del rumore sottile al design, che funziona bene con la combinazione di colori limitata.

Questa piccola e straordinaria fotografia del design retrò prodotto digitalmente combina consistenza, rumore, forme semplici, diversi stili di fusione e una grande combinazione di colori. La tipografia, in particolare il tipo più grande, è animata dalle ombre acuminate.

Questo impressionante pezzo di cartoleria aziendale di ispirazione vintage utilizza elementi disegnati a mano per il suo aspetto. Il design ha anche una combinazione di colori limitata.

La tipografia bianca in questo disegno è stata unita all'immagine come se fosse lì quando è stata scattata la fotografia. Funziona bene con la foto color seppia.

Mini-Tutorial

Come creare una tipografia disegnata a mano con Adobe, Photoshop o Illustrator

In questo breve tutorial, imparerai come produrre, scansionare e vettorizzare rapidamente il tuo tipo disegnato a mano usando Adobe Photoshop e Illustrator.

Prima di tutto, disegna alcune lettere:

È necessario compilare il tipo di schizzo in qualche modo. Puoi farlo usando vernice o un pennarello. Userò Black Indian Ink e un bel pennello, che consiglio vivamente, soprattutto perché è così puro e audace.

Iniziare a riempire le linee tracciate.

Dovresti ritrovarti con qualcosa che assomiglia a questo.

Quindi, scansiona la tua immagine. Se non possiedi uno scanner, puoi semplicemente fotografare il lavoro, ma assicurati che sia di alta qualità. Dopo che l'immagine è stata scansionata o fotografata, apri un nuovo file Photoshop e vai su File → Inserisci; individuare l'immagine e posizionarla nel documento.

Vai a Immagine → Regolazioni → Luminosità / Contrasto. Aumentare il livello di contrasto fino a circa 50. Ciò oscurerà il nero nell'immagine.

Salva il tuo file come immagine e apri Adobe Illustrator. Crea un nuovo file RGB, quindi vai su File → Inserisci. Individua l'immagine appena salvata e posizionala sulla tela. Nella barra dei menu nella parte superiore dell'area di disegno, seleziona l'opzione "Traccia in diretta". Il testo ora è un vettore funzionante e può essere ridimensionato in alto o in basso a piacere, per essere utilizzato nei documenti di Photoshop.

Come aggiungere la tipografia a una fotografia di città usando Adobe Photoshop

Aggiungeremo la tipografia a una fotografia usando una tecnica simile a quella usata per la fotografia di Amsterdam sopra. Ai fini di questo tutorial, lo useremo questa fotografia di Barcellona .

Copia la fotografia e crea un nuovo documento Photoshop. Incolla la fotografia nel documento Seleziona lo strumento Testo e digita "Barcelona" nel carattere di tua scelta. Vai a Modifica → Trasforma → Ruota e ruota la tipografia con un angolo in modo che si allinea approssimativamente con l'angolo degli edifici.

Noterai che alcune delle lettere non si sovrappongono agli edifici. Per risolvere questo problema, seleziona lo strumento Penna e estendi manualmente la parte inferiore delle lettere disegnandone sopra delle nuove forme. Al termine, fai clic con il pulsante destro del mouse e seleziona "Riempi il percorso". Riempi la selezione con il nero.

Quindi, elimina le aree sovrapposte del tuo tipo. Ancora una volta, usa lo strumento Penna per creare una selezione. Zoom direttamente nella tua fotografia e traccia intorno all'edificio e all'albero. Una volta fatto ciò, fai clic con il tasto destro e vai su "Crea selezione". Ora dovresti avere una linea tratteggiata in movimento come quella qui sotto:

Fai clic con il tasto destro del mouse sul tuo livello di tipografia e seleziona "Rasterizza tipo". Questo lo trasformerà da un livello di testo in un livello standard. Unisci il tuo livello di testo con le forme personalizzate che abbiamo creato in precedenza selezionandole tutte tenendo premuto il tasto Maiusc e passando a Livello → Unisci livelli. La selezione effettuata nell'ultimo passaggio con lo strumento Penna dovrebbe essere ancora attiva. Con il singolo livello di testo ora selezionato, premi il tasto Canc. Questo dovrebbe rimuovere tutto il testo che si sovrappone.

È giunto il momento per un fotoritocco molto semplice per unire il tuo tipo un po 'meglio. Seleziona il livello di sfondo (che dovrebbe essere la tua foto) e vai a Immagine → Regolazioni → Desatura per trasformare la tua fotografia in scala di grigi / bianco e nero. Ora vai su Immagine → Regolazioni → Filtro fotografico. Seleziona l'opzione seppia dal menu a discesa e gioca con il cursore del livello per impostare l'intensità dell'effetto. Ho scelto circa il 60%.

Fai clic con il tasto destro sul tuo livello di testo e seleziona "Opzioni di fusione" dal menu. Applica una sovrapposizione di colore al tuo tipo; Ho usato un marrone chiaro. Ecco il mio risultato:

Come applicare un'ombra esterna e una sovrapposizione di motivi alla tipografia Utilizzando Adobe Photoshop

In questo breve tutorial, creeremo un semplice esempio di tipografia utilizzando gli effetti di Photoshop incorporati. Creeremo anche il nostro schema.

Per prima cosa creiamo il nostro schema semplice. Apri un nuovo documento Photoshop di 3 · 3 pixel. Ora seleziona lo strumento Matita. Esegui lo zoom direttamente nella tua area di lavoro e utilizzando il nero # 000000 posiziona tre punti in diagonale sulla tela, come illustrato di seguito:

Vai a Modifica → Definisci pattern per visualizzare la seguente casella di campo. Chiama il tuo modello qualcosa di adatto (ho chiamato il mio "Diag Line 1"). Premi il pulsante "OK". Il tuo modello è fatto!

Crea un altro nuovo documento di Photoshop. Riempi lo sfondo con un colore chiaro a tua scelta e aggiungi della tipografia alla tela. I caratteri tipografici che ho usato sono Helvetica Neue Medium e Helvetica Neue Bold.

Riseleziona il tuo testo e cambia il suo colore. Scegli qualcosa che contrasti bene con lo sfondo. È importante impostare il colore del testo anziché utilizzare una sovrapposizione di colore perché in seguito utilizzeremo un overlay di pattern e, sfortunatamente, non è possibile utilizzarli entrambi.

Fai clic con il tasto destro sul tuo livello di testo e seleziona "Opzioni di fusione" per aprire la finestra Stile livello. Seleziona "Sovrapposizione pattern" e, dalla casella a discesa pattern, seleziona il pattern che abbiamo creato in precedenza. Cambia la modalità di fusione in "Sovrapponi" e l'opacità al 30%. I risultati varieranno a seconda della scelta del colore, quindi sentitevi liberi di sperimentare.

Ora applicheremo un'ombra interiore. Usa le impostazioni viste nello screenshot qui sotto:

Ora applica un'ombreggiatura molto debole ma importante. Prestare attenzione ai piccoli dettagli vale sempre la pena. Usa impostazioni simili a quelle viste nello screenshot qui sotto:

Per completare la tipografia, duplichiamo completamente il testo. Fai clic con il pulsante destro del mouse sul livello di testo e seleziona "Duplica livello". Seleziona lo strumento Sposta, sposta il testo altrove nel documento, quindi riposizionalo sotto il livello di testo originale. Abbassa l'opacità e il gioco è fatto.

4. Stili di fusione

Gli stili di fusione (in genere noti come metodo di fusione in Photoshop e Illustrator) sono un ottimo modo per aggiungere dimensione al tuo lavoro senza un grande sforzo. Ti consente di unire oggetti e colori in diversi modi. I metodi di fusione sono spesso usati con diversi livelli di opacità; ad esempio, quando si applica una texture fotografica a un'immagine, di cui parleremo in seguito.

Sembra che ci siano tre forme in questo marchio, ma in realtà ce ne sono solo due: un blu e un rosso. Alle forme è stato applicato un metodo di fusione che consente di mostrare lo sfondo strutturato, fondere i colori e creare un vivido viola scuro.

Questo piccolo pezzo è ricco di vari metodi di fusione, trame, fotografie e forme semplici, dando vita a un lavoro potente.

Questo delizioso pezzo di lavoro ripete forme semplici e utilizza diversi metodi di fusione per rendere ogni forma unica. I metodi di fusione sono stati applicati anche alla tipografia.

I due cerchi di questo disegno presentano diversi metodi di fusione applicati, uno dei quali proietta una tinta rossa sull'immagine sottostante, l'altra modifica l'immagine sottostante a un rosso scuro, ed entrambi consentono di mostrare la trama. Un rosso vivido è prodotto dove le due forme si incontrano.

Questo pezzo della Open Yoga Gallery è uno dei miei preferiti nella vetrina. Combina una combinazione di colori tenui e limitati con una fotografia, quindi aggiunge rumore, trama leggera e tipografia elegante.

La fotografia di questo pezzo potrebbe essere stata prodotta sovrapponendo l'intera foto a un colore solido e cambiando la modalità di fusione di quel livello, rendendo l'immagine sottostante apparire sbiadita e consumata.

Questo pezzo è pieno di texture. Ad ogni texture è stata applicata una modalità di fusione per consentire la visualizzazione dell'immagine sottostante.

Simile alla fotografia dell'Italia che abbiamo visto, questa foto è stata manipolata utilizzando uno strato pieno di colori con una modalità di fusione. Lo stile ha uno strato di BLOB di diverso colore, molto probabilmente con una modalità di fusione Sovrapposizione applicata a loro e una trasparenza ridotta.

Il cerchio nel mezzo di questo pezzo ha applicato una modalità di fusione che consente di mostrare lo sfondo.

Mini-Tutorial

Come sfumare i colori con le fotografie usando Adobe Photoshop

In questo mini-tutorial, applicheremo il colore a una fotografia in bianco e nero usando lo strumento Pennello e i metodi di fusione. Userò questa fotografia ragnatela .

Apri un nuovo documento Photoshop e posiziona la foto di tua scelta sulla tela. Ho dato il mio un bordo bianco.

Seleziona un pennello morbido e un colore chiaro. Ho scelto un pastello giallo. Crea un nuovo livello andando su Livello → Nuovo livello. Dipingi una grande macchia di colore sul nuovo livello, come mostrato qui:

Ripeti il processo con più colori. Puoi dipingere questi colori sullo stesso livello, non è necessario creare nuovi livelli.

Una volta che hai finito di colorare il tuo livello, vai a Filtro → Sfocatura → Sfocatura gaussiana. Sfoca il livello per unire questi colori un po 'di più. Qualunque cosa al di sopra dei 100 pixel dovrebbe andare bene, ma dipende dalla dimensione della tua tela: più grande è la tela, più pixel avrai bisogno di sfocare.

Ora possiamo cambiare la modalità di fusione del livello. Dal menu a discesa della modalità fusione nella palette dei livelli, seleziona "Sovrapponi".

Riduci l'opacità del tuo livello colorato a circa il 50%. Dovresti finire con qualcosa del genere:

La sperimentazione è la chiave; ogni modalità di fusione modifica il prodotto finale, il che significa che non sarai mai in grado di riprodurre un risultato. L'esempio seguente utilizza la schermata della modalità fusione, che lava la foto e la fa sembrare retrò. Sperimentare con effetti come questo è in genere il modo in cui vengono riprodotti gli effetti fotografici retro di Lomo e Holga.

risorse

Di seguito è riportata una piccola selezione di esercitazioni di poster vintage che utilizzano gli stili di fusione:

5. Texture e rumore

Texture e rumore aggiungono interesse visivo al tuo lavoro. In alcuni casi, un design semplicemente non sembra giusto senza di loro. In altri casi, la trama e il rumore possono essere troppo. Di seguito sono riportati alcuni esempi di design retrò che funzionano bene con la trama.

In questo pezzo viene utilizzata una texture fotografata in tela, che conferisce al design generale un aspetto elegante e logoro.

Questa texture pulita alla fine produce un design pulito. Il look retrò è ottenuto con un pennello leggero grunge per rimuovere alcune aree del logo e della tipografia.

La trama della carta è stata usata eccessivamente in questo pezzo per produrre un pezzo di lavoro digitale consumato dall'aspetto vintage.

Come per l'ultimo esempio, è stata utilizzata una texture di carta per rendere l'immagine simile a un vecchio poster. Una texture scura è posizionata sopra le sagome del pugile.

Una combinazione di legno, carta riciclata e texture di caffè è stata utilizzata qui per produrre un effetto davvero fantastico. Una modalità di fusione è stata applicata al livello su cui è posizionato il personaggio, consentendo alla trama di essere visibile.

La trama di questo web design è minima e sottile, tuttavia contribuisce in modo significativo all'interesse visivo del lavoro complessivo.

La texture è usata qui per ravvivare lo sfondo e la tipografia. La più semplice delle trame ma ancora così efficace.

La texture è stata utilizzata in minima parte per ravvivare questa illustrazione, dargli profondità e renderla più attraente per gli occhi.

Ecco un pezzo che non sembrerebbe lo stesso senza trama: lo sfondo, l'illustrazione e la tipografia sono tutti testurizzati.

Questo pezzo è abbastanza diverso dagli altri in questa vetrina; la texture non è una fotografia ma un'immagine vettoriale.

risorse

L'elenco che segue contiene collegamenti a numerosi siti Web di grande qualità in cui è possibile scaricare le trame, sia premium che gratuite, nel proprio lavoro:

TextureVault
Un mercato premium in particolare per il download di trame individuali. Il prezzo varia a seconda delle dimensioni della trama.
Perso e preso
Un grande blog che pubblica alcune delle trame migliori in circolazione. Alcune cose davvero di alta qualità qui. È inoltre possibile visualizzare il trame in una galleria .
CG Textures
Probabilmente una delle più grandi gallerie di texture in giro. Migliaia di immagini sono disponibili gratuitamente.
TextureLovers
TextureLovers è fondamentalmente una galleria di trame da tutto il web. È un ottimo posto dove andare se non sei sicuro di dove guardare, perché mostra trame da una varietà di siti web.

6. Maschere di ritaglio e livello immagine

Il ritaglio di immagini e le maschere di livello sono efficaci per aggiungere elementi aggiuntivi a un'opera. Perché includere un'intera fotografia quando puoi semplicemente mostrare ciò di cui hai bisogno o adattarlo al resto del lavoro? La semplicità è la chiave del design retrò.

Questo pezzo fa un grande uso di texture e effetti tipografici e utilizza abilmente una maschera di livello per arrotondare un'immagine della galassia. Sembra superbo.

Questo pezzo retrò utilizza non solo fotografie retro-mascherate, ma anche cerchi, tratti, metodi di fusione e una combinazione di colori limitata, praticamente tutti gli elementi principali trattati in questo articolo.

Questo pezzo è ultra minimalista ma sembra fantastico. Le immagini sono mascherate in cerchi e molto rumorose, conferendole un aspetto retro-futuristico.

Di seguito sono riportati alcuni tutorial sul ritaglio di foto e l'utilizzo di maschere di livello Photoshop:

Scritto esclusivamente per WDD da Callum Chapman, un designer e illustrazione commerciale come Circlebox creativo . Gestisce anche The Blog di ispirazione e Picmix Store

Condividi i tuoi disegni e illustrazioni vintage e retrò con noi, così come tutti gli articoli o tutorial che potrebbero aiutare i tuoi compagni lettori.

design web design retrò Vintage ▾ Dribbble