Esempio di Esame Grafica per il Web

Parte teorica

1. Cosa distingue un’immagine vettoriale da un’immagine bitmap?

2. Data un’immagine di 1800×1300 pixel, 72 dpi, RGB24. Se cambiamo la risoluzione a 150 dpi ricampionando l’immagine con che dimensione verrà stampata e quanti kbytes peserà se non compressa?

Salvare l’immagine conclusiva in PSD e JPG, 72DPI, RGB.
L’obiettivo è disegnare la Landing Page della campagna “Pacchetto surf di lancio” per la presentazione della Surf House che consiste in un viaggio di una settimana presso la surf house con 5 lezioni, posto a dormire, colazione e 3 feste, seguendo le seguenti disposizioni:

                    • Layout generale: La pagina che apriremo seguirà lo standard desktop dei monitor 1366 x 768 pixel. La dimensione dell’immagine sarà 1366  px di larghezza (altezza a vostra discrezione) 72 dpi RGB. La palette dei colori è quella riportata nell’immagine sottostante. La dimensione della sezione content è 1100 px. La sezione content è bianca e ha una lieve ombreggiatura sia a destra che sinistra. Lo sfondo del body è #f4f5fa.
                    • Header: l’header della nostra landing page è wide, occupa il 100% della larghezza.  Altezza 680 px. Nell’header deve comparire un’immagine che ritragga surfisti in spiaggia e un testo in bianco con una piccola ombreggiatura con scritto “BLUE SURFHOUSE FIRST TRIP” “Pacchetto 7 giorni + 5 lezioni + colazione & feste” “700€”
                    • Header. Aggiungere nella spiaggia il surfista dell’immagine “surfista ombra”. Il surfista deve essere scontornato tramite tracciato e poi mascherato tramite maschera vettoriale.
                    • Header: Aggiungere un pulsante un pulsante “PRENOTA SUBITO” rettangolare 300 x 100 px di colore uniforme di sfondo RGB 0,177,215  e traccia bianca di 1 px. Posizionare dove meglio si crede.
                    • Header -> area menù: inserire 4 voci di menù in alto a destra (home, prenota, la surf house, contatti) in colore CMYK 0,0,0,0, arial 20pt, con ombreggiatura in effetto di livello appena accennata. Variante: creare una banda bianca contente il logo (a sinistra) e il menù (a destra) alta 60 px. In questo caso il colore delle voci del menù potrà essere scelto dalla palette colori
                    • Header area logo: inserire l’immagine logosurf.jpg e virare l’azzurro verso l’arancione
                    • Area descrizione: inserire il testo descrittivo su banda colorata (usare uno dei colori della palette) colore #fff. Inserire come immagine di sfondo in trasparenza (usare la fusione fra livelli “sovrapponi” ed eventualmente l’opacità) una fotografia di surf e onde
                                        • La Blue Surf House è a due passi dal break locale
                                        • Abbiamo due surf room, una direttamente sulla spiaggia ed una a 100 metri di distanza
                                        • Grande piscina, giardino e bar sulla terrazza
                                        • Corso di surf con una, o due, sessioni di surf al giorno e un surf trip a settimana

                       

                    • Area Box: inserire tre box quadrati 300×200 px come nell’immagine “surf box” con i titoletti , “SOGGIORNO” “LEZIONI”, “AFFITTO TAVOLE” (titolo, immagine, descrizione, pulsante prenota di un colore della palette). Ogni box deve avere di contorno un filetto di un 1 px (grigio o azzurro).
                    • Box Soggiorno: il muro arancione dell’immagine box-soggiorno.jpg deve diventare azzurro. Cancellare la scritta nel cielo. Il box deve essere 300x200px
                    • Box Lezioni: ritagliare l’area centrale del surfer (immagine box-lezioni.jpg) per ottenere il box 300×200 px (ridimensionate l’immagine prima con larghezza 700px) e schiarire l’immagine rendendola “diurna”.
                    • Box affitto tavola: Ricalibrare la colorimetria dell’immagine (più neutra / rossa), inserire l’immagine murales come grafica della tavola dell’immagine box-affitto.jpg utilizzando lo strumento maschera (vettoriale o di livello). Utilizzare un effetto di fusione di livello per rendere più realistico il fotomontaggio.  Il box deve essere 300x200px
                    • Area contenuti generali -> form: disegnare un form di invio richiesta di soggiorno con Nome, Cognome, Email, Numero di telefono, pulsante invio (consiglio: disegnarne uno e duplicare il livello)
                    • Sidebar: inserire uno screenshot dello stream di Facebook modificando il logo presente nello screenshot con quello della surfhouse
                    • Sidebar: creare una mini gallery di 9 immagini (griglia 3×3) prese dal web e desaturate o una carrellata di news sempre con immagini desaturate
                    • Footer: come da wireframe inserire il testo relativo ai contatti su tre righe  (testo casuale) con interlinea 22pt. Il footer deve essere alto 290 px e occupare il 100% in larghezza (colore da palette).