Il progetto grafico può essere effettuato sia con Photoshop sia con altri programmi di editing di immagini o fotoritocco, per questo esempio abbiamo comunque utilizzato Photoshop. Apriamo il programma di editing di immagine preferito e apriamo un progetto da 1000px di larghezza e diciamo 800px di altezza e importiamo il banner 728x90, dal banner che abbiamo utilizzato decidiamo di estrapolare quello che poi sarà lo sfondo a tutto il sito, per l'occasione abbiamo preso delle linee diagonali percui basta creare una selezione attorno alla zona con le diagonali (ingrandisci l'immagine per comodità) e selezionare dal menu "Modifica" di Photoshop il comando "definisci partner".
A questo punto nello sfondo in cui abbiamo precedentemente inserito il banner andiamo sul livello di sfondo e sempre dal menu "Modifica" scegli riempi, scegli il pattern appena creato e fai ok
poi inserisci il banner al centro crea delle linee guida ai bordi estremi del banner, il risultato diverrà il seguente:
Ora continuo inserendo un tema bicolore per il corpo del sito, qui abbiamo scelto di mettere il menu a destra e i contenuti a sinistra nello spazio bianco, per ottenere la curva abbiamo usato lo strumento selezione cerchio e raddrizzato con ulteriori selezioni ai lati per le zone dritte.
Nelle 2 zone (bianca e rossa) abbiamo aggiunto delle immagini da utilizzare come sfondo, abbiamo utilizzato una donna ad un tavolo da usare nella zona rossa e una serie di carte per la zona bianca, fai attenzione di ritagliare le immagini in modo che non sbordino dai limiti dei colori, il risultato potrebbe essere una cosa simile a questa:
A questo punto decidiamo di aggiungere un ulteriore barra subito sotto il banner originale, per fare questa barra creiamo intanto lo spazio spostando in basso tutto quello che è presente sotto il banner quindi lo spazio bianco, il rosso e il verde con tutte le immagini che sono state fuse, dallo spazio risultante faccio una selezione per tutta la larghezza del banner e come altezza una quarantina di pixel. A questa selezione do il comando "arrotonda" che si trova in Selezione/Modifica/arrotonda e diamo il valore di 18, proseguiamo con ok.
siccome arrotondando si ottiene di arrotondare anche il basso (cosa che non vogliamo) aggiungo il pezzo mancante in basso (ottenuto dall'arrotondamento) quindi con lo strumento selezione mi appresto ad aggiungere una selezione premendo il tasto SHIFT (apparirà il cursore con +) la selezione deve partire dai limiti estremi destra-sinistra:
la quale diverrà come nell'esempio
Ora inserendo la nuova barra nel progetto o inserendola nel giusto punto nel caso tu sia rimasto sul file originale con seguente risultato:
Ok ora dobbiamo prendere nel sito originale degli elementi grafici come questi:
|
|
|
|
|
da utilizzare nello spazio verde in basso e nello spazio ancora più giù.
A questo punto dobbiamo ritagliare le grafiche per poi usarle nel nostro editor HTML. Per tagliare con precisione le grafiche utilizza lo strumento zoom fino a vedere bene i dettagli e crea una selezione che copra tutta la zona compresa tra le linee guida che ci accingiamo a ritagliare
Entra in InterGadget.eu la neo nata che offre servizi per
aprire un sito web, grafica, app e software di ogni genere.
