Share
Quest'anno ha visto un grande aumento di design in stile grungey / texture / disegnati a mano in stile. Per natura tendo a disegnare io stesso un look più pulito, ma ho pensato di provare la mia mano al grunge di oggi e scrivere un tutorial sulla creazione di una semplice trama di carta da zero in Photoshop e poi sposarlo con un layout web per creare un design pulito.
Poi alla fine di questa settimana prenderemo lo stesso web design e ti mostrerò come puoi remixare oltre il semplice cambio di sfondi e combinazioni di colori, che in effetti puoi cambiare l'intero stile di un design. Ma prima facciamo il nostro sito di texture di carta!
Questo post è il 4 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 3Session Day 5"
Esistono tre diversi modi per ottenere un aspetto di carta ruvida:
Realizzare una texture in Photoshop genererà in genere un aspetto più stilizzato che realistico, ma ha il suo fascino. Significa anche che non hai bisogno di immagini esterne.
Quindi per prima cosa inizieremo un nuovo documento, questa tela è alta 1200 px x 900 px. Quindi riempiamo il livello di sfondo con un colore beige - # e8e8e2.
Ora crea un nuovo livello in cima e crea i tuoi colori di primo piano e di sfondo: # 979a8f e # cfd1c5 che sono variazioni del colore originale. Quindi vai a Filtro> Rendering> Nuvole
Ora corriamo Filtro> Artistico> Palette Knife con le impostazioni mostrate nell'immagine sopra. Le spatole trasformano le nostre nuvole in blob ... una sorta di, alla fine, questo darà una leggera sensazione di consistenza alla trama.
Quindi aggiungeremo un po 'di rumore alla tela Filtro> Disturbo> Aggiungi disturbo usando l'impostazione mostrata. Questo dovrebbe rendere ruvida la nostra texture.
Ora prendiamo il nostro strato rumoroso e scontroso e lo impostiamo Moltiplicare e 30%. Questo lo restituirà di nuovo.
Ora crea un nuovo livello in cima e crea i tuoi colori di primo piano e di sfondo: # 42433e e # cfd1c5 - che è una versione più scura dell'ultimo set in modo da ottenere più contrasto questa volta. Quindi vai a Filtro> Rendering> Nuvole
Quindi eseguiamo di nuovo il Filtro> Artistico> Palette Knife filtro.
E questa volta impostiamo il nuovo livello copertura e 60%. Questo dovrebbe dare alla nostra texture un po 'più di profondità.
E questo è tutto! Questa è la nostra trama!
Per questo tutorial la texture leggera è perfetta, ma puoi facilmente fare altre variazioni semplicemente facendo confusione con gli strumenti di fusione. Ad esempio per realizzare questa texture di carta marrone scuro:
Se le variazioni di colore non sono sufficienti, puoi anche modificare la sensazione della texture con l'uso di filtri diversi. Per esempio qui abbiamo fatto una sensazione più pergamena prendendo la nostra texture leggera e:
Ora che hai una texture puoi ovviamente trasformarla in uno sfondo senza interruzioni.
Per questo tutorial useremo il primo trama che abbiamo creato, quella del punto 8.
Quindi ora stiamo andando a creare un layout di portafoglio per andare con la nostra trama di carta. Ecco la struttura approssimativa per la homepage. Come puoi vedere è un po 'più di una struttura complicata rispetto al tutorial del layout web precedente perché questa volta abbiamo un layout all'interno del layout.
Quindi la nostra griglia generale è una griglia a tre colonne, quindi nel pannello principale, abbiamo usato quella griglia per suddividere l'area in due spazi principali, uno è la dimensione della colonna 1 e l'altro si estende su entrambe le altre colonne.
Quindi per prima cosa creeremo un'area di lavoro e la alleggeriremo. Quindi qui ho trascinato due guide sullo schermo, una a 100px e una a 1100px - che rende l'area in cui sto lavorando esattamente a 1000px che è perfetta.
Quindi creiamo un nuovo livello e disegniamo una grande scatola bianca come mostrato.
Ora imposteremo la casella bianca su 25% opacità.
Quindi lo irruvidiremo. Ci sono un sacco di fantastici pennelli grunge in giro, ma per questo passo useremo solo uno dei pennelli standard di Photoshop. Puoi vederlo nello screenshot qui sopra con il 60 sotto di esso.
Se questo pennello non ti appare, fai clic sulla piccola freccia destra nella parte superiore della schermata dei pennelli e scegli Spazzole di carta bagnata, quindi fai clic su Aggiungi per aggiungerli al set corrente.
Quindi scegli il Strumento gomma (E), seleziona quel pennello che abbiamo appena menzionato e poi gira intorno ai bordi della nostra forma e irruvidiscilo come meglio credi. Ho lasciato intatto il margine superiore come puoi vedere.
Quindi crea un nuovo livello appena sotto la casella bianca e disegna in a Gradiente radiale (G) passando dal bianco alla trasparenza. Questo evidenzierà dove posizioneremo il nostro logo in un secondo. Imposta il livello su copertura e 70%.
Ora aggiungeremo un piccolo "logo" - nel nostro caso solo una parola impostata in un simpatico carattere tipografico. Il font che ho scelto qui è Egyptian710 BT, che è un font abbastanza noto e adatto ai nostri scopi perché è molto irregolare - le lettere maiuscole sono più spesse delle lettere minuscole - e le serif lastre sembrano un po 'typewriter-ish che accompagna il nostro tema di carta.
Quindi faremo una filigrana solo per aggiungere un po 'di roba in background. In realtà puoi diventare pazzo e aggiungere tonnellate di materiale nella trama dello sfondo, ma ci accontenteremo di una singola filigrana.
Quindi qui ho scritto la parola Folio in un font casuale (HumstSlab712 Blk) e l'ho impostato in questo colore - # c5c6ba.
Ora cambiamo la modalità di fusione in Colore brucia e 70% e aggiungeremo un colpo di 1 pixel come mostrato. Si noti che per Tipo di riempimento Ho usato un Modello e poi ho scelto una trama che avevo in giro. Se combinato con una bassa opacità (36%) e una modalità di fusione (Moltiplica), questo aspetto sembra sfumato in parti.
Ora sposteremo la nostra filigrana per sederci dietro il logo.
Quindi faremo un piccolo elemento separatore orizzontale. Quindi crea un nuovo livello e disegna una linea da 1px nel marrone scuro.
Ora prendi lo stesso vecchio pennello per la gomma e vai sopra la linea cancellandone dei piccoli pezzi così da sembrare angosciato. Eliminare anche i bordi in modo che inizi nello stesso punto della scatola bianca.
Quindi crea un nuovo livello sotto e disegna in una scatola marrone alta circa 3-4px come mostrato.
Imposta la scatola marrone su Moltiplicare e 5%. Questa sarà una specie di ombra per il nostro separatore.
Quindi crea un nuovo livello e questa volta disegna una casella bianca di circa 20px sopra la linea.
Imposta la casella bianca su circa 50% opacità e ancora una volta usando il nostro pennello, basta cancellare la parte superiore in modo disordinato.
Ora ripeti gli ultimi tre passaggi per disegnare una seconda scatola bianca, ma questa volta quando la cancelli, cancella di più in modo che sia una striscia bianca più sottile.
Quando entrambi i livelli bianchi sono combinati, daranno una sorta di clou disordinato.
Raggruppa questi livelli separatori in un unico gruppo di livelli.
Ora possiamo duplicare il nostro gruppo di livelli per avere tre copie per formare la nostra area di griglia orizzontale come mostrato.
Qui ho inserito alcuni contenuti. Come puoi vedere ho mescolato un po 'il carattere tipografico del display con un normale carattere HTML.
Per il testo normale ho effettivamente usato Cambria, che è un font Vista. Nel CSS avresti di default in Georgia per le persone che non hanno i font Vista. Se tu stesso non hai i font di Vista, puoi ottenerli liberamente e legalmente, basta seguire queste istruzioni. Ci sono un paio di caratteri, mi piace anche Calibri.
Ora stiamo per aggiungere il nostro pannello principale. Quindi disegnare in una grande scatola rettangolare nel colore marrone scuro - # 1e1a19 - e farlo usando il Strumento Rettangolo arrotondato (U) con un raggio di 5px.
Ora ingrandisci l'angolo in alto a sinistra e prendi una piccola selezione quadrata, quindi riempila con lo stesso colore marrone scuro. Non vogliamo una curva in questo angolo.
Ora ingrandisci l'angolo in alto a destra e usa il Strumento lazo poligonale (L) mentre tieni premuto shift down fai una selezione inclinata come mostrato e poi premi Elimina.
Ora in un nuovo livello sopra disegnare in un quadrato di un colore marrone più chiaro, ad esempio # 352f2b, e poi fai un'altra selezione angolata e cancella metà del quadrato in modo da lasciarti con un triangolo che è 1px lontano dal bordo.
Quindi crea un nuovo livello e ingrandisci nuovamente l'angolo in alto a sinistra. Ora stiamo andando a dare forma alle nostre schede. Lo facciamo usando lo strumento penna e alcuni clic molto precisi. Nell'immagine sopra ho disattivato tutti i livelli di sfondo in modo da poter vedere esattamente la forma. Ecco come lo fai:
Dopo aver fatto il quinto punto, puoi semplicemente riempire il resto della forma con qualsiasi vecchio modo, perché stiamo per tagliare semplicemente il bordo inferiore per essere perfettamente dritti comunque.
Una volta completata la forma, fai clic con il tasto destro e scegli Fare selezione.
Ora puoi riempire la forma con il marrone scuro per abbinare la scatola principale. Quindi taglia i pezzi in basso in modo che siano belli e piatti e siedano perfettamente in alto come mostrato.
Quindi duplicheremo il nostro livello di tabulazione e sposteremo quello nuovo sotto la vecchia scheda (quindi quella marrone sembra che sia di fronte). Quindi fai clic destro sulla nostra nuova scheda e scegli Opzioni di fusione e dargli un Sovrapposizione colore di questo bel colore rosso-arancio - # cc5630. Il motivo per cui eseguiamo un overlay a colori e non limitiamo a riempire la scheda con il nuovo colore è che se si esegue il secondo metodo, ne resteranno alcuni in pixel marroni che mostrano attraverso.
Avanti tenere premuto CTRL e fare clic sulla prima scheda quindi scegliere il strumento per selezione di un'area rettangolare e premere la freccia destra alcune volte finché la selezione non si è spostata per sovrapporsi alla scheda arancione. La ragione per cui dico che dovresti scegliere lo strumento selezione in questo passaggio è che per spostare una selezione devi avere uno strumento di selezione in alto. Se invece avessi selezionato lo strumento freccia normale, avresti effettivamente spostato i pixel e la selezione. Prova entrambi e vedrai cosa intendo.
Ora creiamo un nuovo livello tra le due schede e riempiamo la nostra selezione con un colore arancione più scuro - # b44724. Quindi tieni premuto CTRL e fare clic sul livello della scheda arancione, quindi fare clic su CTRL-SHIFT-I per invertire la selezione e fare clic sul livello intermedio e premere Elimina. Questo dovrebbe lasciare solo la parte arancione più scura che si sovrappone alla linguetta arancione.
Come puoi vedere abbiamo creato una sorta di ombra sulla nostra seconda scheda.
Ora, se lo dico io, queste schede sembrano fantastiche, e la ragione per cui lo fanno è perché si sovrappongono. Sfortunatamente questo rende anche più difficile lavorare con HTML. Puoi comunque fare una varietà di cose con PNG trasparenti, o alternativamente solo fare cambiare il testo con i colori nei rollover e non preoccuparti di cambiare i colori delle schede. Comunque questo è un po 'oltre lo scopo di questo tutorial. Basti dire che il menu potrebbe essere un po 'complicato da costruire.
Quindi, ecco il nostro layout finora. Ho aggiunto un paio di altre schede e ho dato loro del testo.
Ora disegneremo nell'area di lavoro in primo piano. Questo sarà un semplice rettangolo bianco in cui andrà il lavoro. Quindi, dietro a ciò, crea un altro livello e usa il Strumento lazo poligonale (L) disegnare una sorta di rettangolo traballante e riempirlo con un colore marrone scuro scuro - # 0e0c0c.
Successivamente aggiungeremo del testo descrittivo a sinistra e l'elemento stesso. Si noti che con il testo ho usato un marrone scuro per i due descrittori (Titolo del progetto e Descrizione del progetto) questo li fa sfumare sullo sfondo che è buono perché non sono così importanti. Il titolo del progetto e il testo descrittivo invece si distinguono. Questi ultimi due elementi sono impostati in un colore beige chiaro scelto dallo sfondo con il titolo più luminoso del testo.
Inoltre ho aggiunto un debole gradiente radiale al campione di lavoro che va dal bianco al beige chiaro - solo perché amo i gradienti radiali e non ne ho mai abbastanza :-)
Ora finalmente aggiungerò un paio di piccoli disegnini disegnati a mano per completare il design. Per questi ho usato David Leggett degli eccellenti e liberi pennelli disegnati a mano di Tutorial9. È possibile aggiungere pennelli aprendo la tavolozza dei pennelli come mostrato, facendo clic sulla piccola freccia destra e scegliendo Carica pennelli, quindi selezionando il file del pennello che hai scaricato.
Poiché i pennelli sono molto più grandi di quanto io li desideri, è importante affilare il livello dopo averlo ridimensionato. Quindi qui ho ristretto la freccia verso il basso e poi eseguo a Filtro> Precisione> Maschera non nitida per sistemarlo.
Quindi eccoci, il progetto finale, con un paio di varianti per pagine diverse. I design finali di PSD sono ovviamente su ThemeForest in vendita, e aggiungerò la home page PSD al sistema Plus.
Quindi questo è il mio modo di concepire una trama di carta. Ci sono molti designer che fanno questo aspetto molto meglio di me, in particolare dai un'occhiata al lavoro di Liam McKay a WeFunction e dai un'occhiata anche attraverso le gallerie di design come WebCreme e troverai tantissimi disegni sgualciti e cartacei.
Questo post è il 4 ° giorno della nostra sessione di Web Design. Sessioni creative "Session Day 3Session Day 5"
Accentsconagua