Share
Ti sei mai chiesto come creare pattern di sfondo perfetti e senza interruzioni che funzionano su Photoshop e sul Web? Non cercare oltre perché oggi lo scomporremo per te - passo dopo passo. Creerai i tuoi pattern di sfondo in pochissimo tempo!
Ciao a tutti! Oggi ho il piacere di iniziare una serie di screencast che mi piacerebbe fare da un po 'di tempo: come creare pattern web che funzionano sia su Photoshop che sul web. Lo faremo come una serie, partendo dagli schemi più basilari e passando ad alcuni dei pattern di sfondo più avanzati che possiamo trovare, incluse le trame complesse.
Il nostro obiettivo è semplice: Insegnare a chiunque come creare pattern di sfondo destinati al web (ma che possono anche essere usati facilmente durante il processo di progettazione). Saremo "programma agnostici", il che significa che la maggior parte dei suggerimenti funzionerà sia in Photoshop che in Fireworks.
Sia chiaro: le idee alla base della creazione di pattern di sfondo sono tutte abbastanza semplici: la maggior parte dei pattern richiede solo un paio di passaggi e può risultare in trame straordinariamente efficaci. In effetti, i peggiori schemi per il web sono di solito quelli che "provano troppo" tentando di adattarsi troppo all'interno di ogni tessera.
Perché è così male? Perché i pattern di sfondo (nella maggior parte dei casi) dovrebbero essere sottili e non abrasivi. Texture ruvide distolgono l'attenzione di un utente dalla vera star su qualsiasi web design: il contenuto.
Quindi perché usare le trame? Perché, correttamente, i pattern di sfondo danno a un sito un senso di carattere e personalità che può spazzare via i colori piatti. I motivi e le trame danno profondità e separazione dei contenuti, aiutano a sviluppare la gerarchia e possono dare ai siti web (che sono piatti per loro natura) un senso di sensazione tattile. Possono rendere un sito elegante, raffinato e professionale - il che aiuta a enfatizzare il contenuto e renderlo memorabile.
Mentre le idee dietro la creazione di modelli sono semplici? far sì che funzionino perfettamente, spesso può essere difficile. Tuttavia, questa serie di tutorial ti mostrerà tutti i trucchi di cui avrai bisogno per creare le tue varianti personalizzate da utilizzare nei tuoi progetti. Lungo la strada distribuiremo anche omaggi!
Oggi è solo il primo giorno della nostra serie, quindi inizieremo con alcuni modelli super-semplici per far muovere il nostro cervello. Inizieremo con una semplice griglia, passeremo a un motivo a campitura incrociata, mostreremo come creare un modello diagonale di ridimensionamento, e poi diventeremo un po 'eccentrici mostrandoti come aggiungere colori e texture sottili.
Pronto? Facciamolo!
La parte video di questo tutorial ti aiuterà a sviare qualsiasi passaggio che non segui nella versione scritta (sotto). Inoltre, a volte è anche bello vedere come funziona qualcun altro, quindi divertiti!
Poiché alcuni di questi pattern saranno difficili da vedere su uno screencast con risoluzione Web, fornirò anche un tutorial scritto passo passo. Puoi guardare il video o la versione scritta (o entrambi!), Dipende da te in che modo impari meglio. Tuffiamoci dentro?
Lo schema di base della griglia è tanto semplice quanto diventa, quindi è un fantastico punto di partenza. Iniziamo aprendo un documento 7px per 7px.
Perché questa taglia? Perché creeremo uno schema a griglia con una linea 1px che scorre verso il centro? e vorremmo avere una uguale quantità di spazio su ciascun lato della griglia. Questo non è obbligatorio per questo particolare schema (purché la griglia sia un quadrato perfetto, continuerà comunque a ripetersi), ma è un'abitudine che vorremmo avere quando passeremo ai modelli più avanzati in seguito.
I passaggi sono semplici:
Ecco gli screenshot:
Una volta che hai il tuo pattern esattamente dove lo vuoi, vogliamo salvarlo come un pattern. Per farlo, seleziona dal menu in alto in Photoshop "Modifica> Definisci modello"Ciò salverà automaticamente il tuo documento come un pattern che può essere usato all'interno del"Stili livello> Sovrapposizione modello" biblioteca.
Ora che abbiamo le basi, puoi armeggiare molto con questo. Abbiamo usato un documento 7px, ma se si desidera una griglia più stretta, si potrebbe scendere a 5px o 3px. In alternativa, se si desidera una griglia aperta più ampia, è possibile utilizzare una dimensione di documento più grande. La larghezza della linea, la spaziatura e i colori dipendono interamente da te.
Mancia: Il colore che potrebbe sembrare sottile (basso contrasto) sul documento del modello potrebbe sembrare troppo intenso quando li si utilizza come un modello reale in un altro documento più grande. Il trucco qui è:
Per questo secondo modello, stiamo essenzialmente ruotando le nostre linee di 45 gradi. Ricorda che la spaziatura è fondamentale anche se - quindi dovremo usare un po 'di pensiero critico per ottenere il modello da ripetere:
Apri questa volta un nuovo documento a 8px per 8px. Perché 8px e non 7px come abbiamo fatto prima? Perché vogliamo che le nostre linee soddisfino esattamente ogni angolo e se usiamo e se usiamo 7px, le linee non funzioneranno del tutto.
Ecco gli screenshot:
Presta particolare attenzione a quest'ultimo screenshot, in quanto illustra come puoi davvero modificare l'intera sensazione della griglia distanziandola o cracciandola. Un motivo a tratteggio incrociato può creare una grossa trama altrettanto bene che un motivo molto succoso. Gioca con la spaziatura e la larghezza della linea fino a quando non sei soddisfatto dei risultati.
Questo modello successivo è abbastanza semplice in quanto essenzialmente utilizza solo le idee del motivo a campitura incrociata (utilizzando solo una riga anziché due ovviamente!). I semplici motivi a linee diagonali sono un ottimo modo per aggiungere una texture sottile dietro al testo (come titoli) perché aggiunge carattere senza rendere il testo illeggibile.
Per la linea diagonale, vai avanti e inizia con il documento crosshatch, ma questa volta rimuovi una delle linee prima di salvare il pattern (Modifica> Definisci modello). La dimensione del documento in questo caso sarà cruciale, in quanto direttamente correlata a come saranno strettamente legate le linee.
Gli screenshot:
La seconda immagine mostra come, regolando la spaziatura del documento e il peso e la direzione della linea, è possibile ottenere una gamma molto ampia di motivi. Non troppo difficile eh?
Mancia: Per i puristi là fuori, puoi ottenere una linea molto più pulita e più nitida passando attraverso la tua linea - pixel per pixel - e rimuovendo qualsiasi "sfumatura" che abbiamo visto dal rendering di Photoshop. Questo accade essenzialmente perché Photoshop sta disegnando una linea anti-alias dove idealmente vogliamo una linea pixelata. I pixel sono così piccoli che, nella maggior parte dei casi, non importa in alcun modo. Ecco solo uno screenshot della versione super-nitida nel caso in cui tu voglia vederlo.
Bene, quindi abbiamo le basi in basso! Ora aggiungiamo un po 'più di personalità usando due tecniche più veloci: aggiungere colore e texture.
La parte a colori è probabilmente abbastanza facile se non l'hai ancora capito. Aggiungi colore allo sfondo e alle linee fino a ottenere l'effetto desiderato. I miei consigli: Mantenere il contrasto basso - non c'è niente di più odioso di un modello troppo vibrante.
La parte texture è un po 'più complicata. La trama è sempre stata una cosa notoriamente difficile da padroneggiare sul web. Perché? Perché nella maggior parte dei casi, la trama si ripete? e molte persone riescono a individuarlo a un miglio di distanza. Anche le trame ad alta risoluzione si ripetono e mostrano le separazioni delle tessere a meno che non si utilizzino immagini enormi (ad esempio 1920 x 1080)? che non è sempre una soluzione pratica.
Il trucco con motivi materici?
Nelle parti successive di questa serie di tutorial esamineremo come creare trame avanzate? ma per arrotondare oggi, diamo un'occhiata ad uno schema molto semplice con un po 'di grunge. I passi:
E gli screenshot:
E, ultimo ma non meno importante, diamo un ultimo sguardo alle quattro trame che abbiamo appena creato:
Suggerimento bonus 01: Quando si salva il motivo (Modifica> Definisci modello), ricordarsi di nascondere il livello di sfondo se si desidera creare un motivo trasparente. A volte vuoi davvero salvare il colore di sfondo, ma altre volte può essere davvero utile poter sovrapporre un disegno a un altro colore senza dover tornare al file originale e apportare modifiche. Ovviamente, usando il bianco o il nero, il colore del motivo è la soluzione migliore in termini di estensione dell'usabilità di questi modelli trasparenti.
Suggerimento bonus 02: Abbiamo esaminato come trasformare questi pattern in "Pattern" che possono essere usati da Photoshop (o Fireworks), ma come li usiamo sul web? Facile in realtà - proprio come i file .GIF, .PNG o .JPG (consiglio PNG per i pattern trasparenti). Quindi aggiungili alla tua cartella web e usali come immagini di sfondo tramite CSS! Ricorda di impostare il valore "Ripeti" se desideri che si sovrappongano all'intera pagina.
Tutto apposto! Quindi spero che tu abbia ottenuto qualcosa da questa prima sessione. A questo punto dovresti avere una buona conoscenza dei concetti teorici su come funzionano i pattern - e una comprensione tecnica su come crearli e usarli in Photoshop. Puoi salvare tutti i file che abbiamo creato qui come file .GIF, .PNG o .JPG e usarli immediatamente anche sul web? ma abbiamo appena iniziato.
Nel prossimo livello di questa serie ti mostreremo come creare alcuni pattern di sfondo "rumorosi" che ti fanno giurare di poterli toccare. Ci occuperemo anche di come creare modelli strutturali avanzati, modelli basati su spae, modelli trasparenti e altro in futuro.
Iscriviti o ricontrolla sul sito per vedere tutti gli aggiornamenti di questa serie man mano che accadono!
Accentsconagua