Creare una bacheca con ombre realistiche, parte 1

Ombre e luci possono creare o distruggere una composizione. Le bacheche (o le bacheche) sono tipi di grafica molto diffusi da utilizzare nei progetti web e di stampa, ma spesso appaiono poco realistici a causa del modo in cui sono illuminati e in ombra. In questa serie di tutorial in due parti dimostreremo come creare una trama in legno e poi come creare ombre e luci dall'aspetto autentico usando gli oggetti di natura morta che includeremo sulla nostra tavola. Iniziamo creando la nostra bacheca e posizionando il nostro primo elemento.

Step 1: The Corkboard Texture

Crea un nuovo documento (Dimensione: 600px per 400px). La dimensione dipende da te, ma queste sono le dimensioni che useremo in questo tutorial.

Rinominare il primo livello "corkboard".

Suggerimento: assicurati che Percorsi sia selezionato per lo strumento rettangolo e lo strumento rettangolo arrotondato in questo tutorial.

Usando lo strumento Rettangolo, crea un rettangolo (Dimensione: 480px per 280px).

Suggerimento: per dare una forma a una dimensione fissa, accedi al pannello nella barra delle opzioni.

Fai clic con il tasto destro sul rettangolo e seleziona Crea selezione.

Suggerimento: CTRL o CMD + INVIO come sostituto per il clic destro su un tracciato e selezionando Crea selezione.

Crea il tuo colore di primo piano # a37d54 e il tuo colore di sfondo # 4e2f0d. Questi due colori sono sfumature di marrone, ma sentiti libero di scegliere colori simili.

Per produrre la trama della bacheca. Vai a Filtro> Rendering> Nuvole, quindi deseleziona la selezione e deseleziona sempre una selezione in seguito.

Suggerimento: CTRL o CMD + D come sostituto per la deselezione di una selezione.

Proseguendo; vai a Filtro> Schizzo> Carta per appunti (Image Balance: 32, Graininess: 11 and Relief: 12).

Vai a Filtro> Pennellate> Spruzzo (Raggio di spruzzatura: 15 e Levigatezza: 10).

Infine, diamo un colore più scuro, vai a Immagine> Regolazioni> Ombre / Punti salienti (Ombre - Quantità: 50%, Larghezza tonale: 83%, Raggio: 208px. Punti salienti - Quantità: 0%, Larghezza tonale: 50%, Raggio : 30px. Regolazioni - Correzione colore: +20, Contrasto mezzitoni: -17.)

L'immagine sotto è il risultato.

Step 2 - The Corkboard Wooden Borders

In questo passaggio, produrremo i bordi in legno della bacheca.

Crea un nuovo livello sotto il livello "bacheca" e rinominalo come "bordi".

Utilizzando lo strumento Rettangolo arrotondato, crea un rettangolo arrotondato (Dimensioni: 502 px per 302 px e Raggio: 10 px). Fai clic con il tasto destro sul rettangolo e seleziona "Crea selezione".

Suggerimento: ALT + BACKSPACE per riempire una selezione con il colore di primo piano corrente. CTRL o CMD + BACKSPACE per riempirlo con il colore di sfondo corrente.

Riempi questo rettangolo con il colore # 4e2f0d quindi deseleziona la selezione.

Suggerimento: per selezionare due o più livelli, fai MAIUSC + CLIC su di essi.

Suggerimento: per centrare due o più livelli l'uno con l'altro, selezionare i livelli da allineare, scegliere lo strumento Sposta, nella barra delle opzioni, fare clic sui pulsanti Allinea centri orizzontali e Allinea centri verticali:

Ora, centrare entrambi gli strati "bacheca" e "bordi".

L'immagine sotto è il risultato.

Step 2 - The Corkboard Wooden Borders - Linee guida sugli spigoli d'angolo

Per rendere autentico ogni lato dei bordi, dobbiamo creare degli spazi tra i loro angoli.

Le linee guida che faremo in questo passaggio verranno utilizzate per selezionare correttamente ciascun lato dei bordi e posizionarli su livelli diversi.

Dovrai applicare le procedure in questo passaggio su tutti gli angoli della bacheca.

Crea un nuovo livello sopra "bordi" e sotto "bacheca", quindi chiamalo "linee di confine diagonali" o qualcosa di simile. Useremo queste linee come linee guida per creare le lacune diagonali sopra menzionate.

Ingrandisci l'immagine e utilizza lo strumento Penna, tieni premuto MAIUSC e crea un percorso diagonale angolato di 45 gradi nell'angolo in alto a destra, come mostrato di seguito.

Suggerimento: assicurati che la dimensione del diametro del pennello per lo strumento Matita sia di 1 pixel.

Con lo strumento Penna e il livello "linee diagonali" selezionate, fate clic con il tasto destro, selezionate Tracciato tratto, selezionate Matita dal menu a discesa, fate clic su OK, quindi fate nuovamente clic con il pulsante destro del mouse e scegliete Elimina percorso.

Ripeti il ​​punto 2 su tutti gli altri lati della bacheca.

Step 3 - The Corkboard Wooden Borders - Separating The Borders

Usando le linee diagonali che abbiamo appena creato, usiamole come linee guida per selezionare il bordo destro della bacheca con lo strumento Penna.

Dopo aver selezionato il bordo destro con lo strumento Penna, fare clic con il tasto destro e scegliere Crea selezione.

Per mettere il bordo destro su un nuovo livello separato, con il livello "bordi" selezionato, duplica il livello. Rinominare il nuovo layer prodotto in "border right".

Ripeti il ​​passaggio 3 su tutti gli altri lati della bacheca.

Dopo aver fatto ciò, dovresti avere ogni bordo della bacheca su livelli separati. Quindi, ora, possiamo eliminare i livelli "linee di confine diagonali" e "bordi".

Step 4 - The Corkboard Wooden Borders - Applicare i gradienti

È ora di applicare alcuni gradienti sui nostri confini. Iniziamo con il bordo destro.

Suggerimento: per accedere alle Opzioni di fusione di un livello, fai clic con il tasto destro su quel livello e scegli Opzioni di fusione.

Suggerimento: per aggiungere un nuovo cursore sfumatura, posiziona il cursore proprio sotto l'anteprima sfumatura.

Nelle Opzioni di fusione per il livello "bordo destro", applica una sovrapposizione sfumatura (Angolo: 0 gradi, Cursore primo gradiente: # e77d15, Cursore secondo gradiente: # f69834, Cursore terzo gradiente: # 804504).

Ora, il livello "border top", applica un altro Sovrapposizione sfumatura (Primo cursore sfumatura: # e77d15, Secondo cursore sfumatura: # f4942d, Cursore terzo gradiente: # d16f04).

Successivamente, il livello "bordo sinistro" applica un altro Sovrapposizione sfumatura (Primo cursore sfumatura: # 0d550e, Cursore secondo gradiente: # f4942d, Cursore terzo gradiente: # d16f04).

Infine, il livello "bordo inferiore", applica un altro Sovrapposizione sfumatura (Primo cursore sfumatura: # 6e3c0b, Dispositivo di scorrimento secondo gradiente: # f4942d, Cursore terzo gradiente: # d16f04).

L'immagine sotto è il risultato.

Step 5 - The Corkboard Wooden Borders - Applicando The Texture

Ricorda, dovrai ripetere questo passaggio su tutti gli altri lati della bacheca.

Duplica il livello "border right", fai clic con il pulsante destro del mouse sul nuovo layer duplicato che dovrebbe essere denominato "border right copy" e scegli Clear Layer Style.

Suggerimento: CTRL o CMD + J per duplicare un livello.

Suggerimento: CTRL o CMD + CLIC sulla miniatura di un livello per selezionarne il contenuto.

Seleziona il contenuto del livello "copia con il bordo destro" (CTRL o CMD + CLIC sulla miniatura del livello). Compila la selezione con il colore # d48631.

Vai a Filtro> Rumore> Aggiungi disturbo (quantità: 33,03%, gaussiana e monocromatica).

Vai a Filtro> Sfocatura> Sfocatura movimento (Angolo: 90 gradi e Distanza: 24 pixel).

Ecco la parte divertente; faremo nodi sui nostri bordi di legno.

Vai a Filtro> Fluidifica (Dimensione pennello: 8, Densità pennello: 50 e Pressione pennello: 100). Usando il mirino nella finestra Fluidifica, tira, allunga e fai ruotare il contenuto del livello "copia destra del bordo" per creare nodi di legno.

Suggerimento: puoi cambiare l'opacità di un livello nel pannello Livelli:

Riduci l'opacità del livello "copia del bordo destro" al 50%.

Rinominare questo livello "trama destra in legno", raggrupparlo con il livello "bordo destro" e rinominare il gruppo come "bordo destro".

L'immagine sotto è il risultato.

Ripeti il ​​punto 5 su tutti gli altri lati della bacheca.

Step 6 - The Corkboard Inner Shadow

Aggiungiamo una leggera ombra sulla parte superiore interna della bacheca.

Nelle Opzioni di fusione del livello "pannello di sughero", applica un'Ombra Interna (Modalità di fusione: Normale, Colore: # 000000, Opacità: 100%, Angolo: 90 gradi, Distanza: 1px, Soffoca: 0%, Dimensione: 3px).

L'immagine sotto è il risultato.

Step 7 - The Paper

Crea un nuovo livello e rinominalo come "carta". Scegli lo strumento Selezione rettangolare e fai una selezione come di seguito:

Seleziona il livello "carta" e completa la selezione con il bianco.

Nelle opzioni di fusione del livello carta, applicare una sovrapposizione sfumatura (primo cursore a gradienti: # d1d1d1, cursore a gradienti: #ededed).

Quindi applica un'ombra esterna (Opacità: 100%, Angolo: 90 gradi, Distanza: 1px, Diffusione: 0%, Dimensione: 5px).

Fai clic con il tasto destro sul livello "carta" e seleziona Crea livelli. Fai clic su OK quando vedi questa finestra di dialogo:

Step 8 - The Paper - Portandolo in vita

Lo strumento chiave usato qui è lo strumento Warp.

Suggerimento: CTRL o CMD + T per far apparire lo strumento Trasformazione libera, facendo clic con il pulsante destro del mouse sulla selezione e scegliendo Warp per accedere allo strumento Warp.

Seleziona il livello "carta" e accedi allo strumento Warp.

Afferra la carta in basso a destra e sollevala in modo che sembri che il vento la stia soffiando.

Tirare tutti gli altri angoli.

L'immagine sotto è il risultato.

Step 9 - The Paper - Highlights

Ora creeremo alcuni punti salienti su questi angoli.

Suggerimento: Comando + ALT + MAIUSC + N per creare un nuovo livello di ritaglio sul livello attualmente selezionato.

Suggerimento: trascina un livello nel pannello Livelli per spostarlo sotto o sopra un altro livello.

Crea un nuovo livello di ritaglio sopra il "Riempimento gradiente" della carta, rinominalo come "evidenzia in basso a destra", fai clic sul menu a discesa Metodo di fusione e scegli Schermo.

Suggerimento: il pannello Sfumatura è simile al seguente:

Seleziona lo strumento Sfumatura, fai clic sul pannello Sfumatura e applica una sfumatura (Cursore primo gradiente: # 000000, Cursore secondo gradiente: #ffffff, Cursore terzo gradiente: # 000000).

Trascina una sfumatura nell'angolo in basso a destra del foglio come mostrato di seguito:

Usa lo strumento Trasformazione libera per ridimensionare, modificare e ruotare l'evidenziazione. Puoi anche abbassare l'opacità del punto culminante per renderlo più credibile.

Fai più luci sugli altri angoli del foglio.

L'immagine sotto è il risultato.

Step 10 - The Paper - Shadows

Ora, per rendere l'ombra del foglio più realistica. Seleziona il livello "Ombra esterna" della carta, sposta l'ombra verso il basso di alcuni pixel e abbassa l'Opacità al 60%. Proprio come abbiamo fatto sulla carta, deforma l'ombra come mostrato di seguito:

L'immagine sotto è il risultato.

Passo 11 - The Paper - Scarabocchiare il testo

Scriviamo qualcosa sul giornale.

Crea un nuovo livello, seleziona lo strumento Testo, scegli un tipo di carattere per la scrittura a mano, abbiamo scelto "Diario" (Dimensione: 26px), cambia il colore del carattere in # 414040 e inizi a digitare del testo sulla carta.

L'immagine sotto è il risultato.

Resta sintonizzato per la seconda parte

Nell'ultima parte di questa serie metteremo più elementi sul nostro tabellone e finalizzeremo questo progetto.