Come costruire un banner grafico per il tuo sito HTML5 e CSS3 - manichini

Quasi tutti i siti web commerciali HTML5 e CSS3 hanno una grafica - una grafica speciale, di solito con una dimensione impostata (900 × 100 è comune), che appare su ogni pagina. Normalmente, se stai modificando un modello CSS, hai un banner grafico predefinito. Dovrai copiare questo grafico per iniziare con la giusta dimensione e forma.

Puoi costruire un banner in molti modi, ma ecco una semplice tecnica che puoi modificare:

1. Carica o crea la forma base.

   Se si dispone di un grafico iniziale da utilizzare, caricarlo in Gimp. In caso contrario, crea una nuova immagine della dimensione che ti serve. Il mio è alto 100 pixel per 900 pixel di larghezza.

2. Crea uno sfondo al plasma.

   Usa il filtro al plasma (Filtri → Rendering → Nuvole → Plasma) per creare un modello semi-casuale. Usa i pulsanti Nuovo seme e Turbolenza per cambiare la sensazione generale. Non preoccuparti per i colori; li rimuovi nel passaggio successivo.

3. Dopo aver applicato lo sfondo al plasma, utilizzare il filtro Colorize per applicare un colore allo sfondo.

   Scegli un colore coerente con il tuo tema. Per questo esempio, scegli un colore più chiaro perché utilizzi le ombre, che richiedono uno sfondo chiaro. Usa il cursore Luminosità per creare un colore relativamente chiaro.

4. Crea un livello di testo usando lo strumento Testo.

   Il testo in un'immagine deve essere grande e in grassetto. Lo strumento Testo crea automaticamente un nuovo livello. Dopo aver digitato il testo, specificare il carattere e la dimensione.

5. Duplica il livello del testo.

   Nel pannello Livelli, crea una copia del livello testo. Seleziona il più basso dei due livelli di testo (che diventerà un'ombra).

6. Sfoca l'ombra.

   Con il livello di ombra selezionato, applica la sfocatura gaussiana (Filtri → Sfocatura → Sfocatura gaussiana).

7. Muovi l'ombra.

   Usa lo strumento Sposta per spostare le posizioni relative del testo e dell'ombra. In genere, gli utenti si aspettano che un'ombra sia leggermente più bassa e a destra del testo (simulando la luce proveniente dall'alto in alto). Più l'ombra è lontana dal testo, più il testo sembra fluttuare.

8. Trasforma l'ombra semitrasparente.

   Con il livello di ombra ancora selezionato, regola il cursore Opacità a circa il 50 percento. Questo renderà le ombre meno pronunciate e permetterà a parte dello sfondo di apparire attraverso il livello dell'ombra.

9. Stagione da assaggiare; fare aggiunte in base alle tue esigenze.

10. Salva in un formato riutilizzabile.

    Il formato nativo per le immagini in Gimp è XCF. XCF memorizza tutto - livelli, impostazioni e tutto. Se hai bisogno di modificare il banner più tardi (e lo farai), avrai una buona versione su cui lavorare.

    Scegli File → Salva come per salvare il file. Se si specifica il. estensione xcf, Gimp salva automaticamente nel formato completo.

11. Esportare in un formato web-friendly.

    In genere, è necessario salvare la grafica del banner come file PNG o GIF. (Gimp supporta entrambi i formati.) Considera PNG a meno che il livello inferiore non abbia trasparenza (perché alcuni browser non supportano ancora le funzionalità avanzate di trasparenza del formato PNG). Non salvare le immagini contenenti testo in formato JPG. Lo schema di compressione JPG è noto per aggiungere artefatti al testo.

    

Normalmente, quando si salva in un altro formato, viene visualizzata una finestra di dialogo di opzioni. In caso di dubbio, vai con i valori predefiniti.