7 days of PS Actions, graphics, templates & fonts - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Web Design

Disegna il Sito di un Parrucchiere in Stile Minimale in Adobe Illustrator

Read Time: 22 mins

Italian (Italiano) translation by Manuela Langella (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Ti piacciono i siti eleganti? Allora allaccia le cinture, perchè in questo tutorial scoprirai come combinare la semplicità e l'eleganza in un sito a pagina singola con Adobe Illustrator.

Questo tutorial ti mostrerà tutto il necessario per creare un sito semplice ma elegante in Adobe Illustrator per la tua piccola attività, utilizzando un Salone Bellezza e Capelli come esempio. Cominciamo.

Materiali per il Tutorial

Fonts

Questo tutorial utilizza diversi font gratuiti ed altri materiali che sono disponibili per il download nei link sottostanti:

La famiglia di font utilizzata in questo tutorial si chiama Proxima Nova e viene fornita con un abbonamento Typeset, così la puoi utilizzare per impostare il tuo design e pubblicare il tuo sito finito:

Immagini

Questo tutorial utilizza inoltre diverse immagini che puoi scaricare da Photodune. Le immagini che ho trovato vanno bene per i fini di questo tutorial, ma se preferisci puoi utilizzare immagini tue:

1. Imposta il Layout e la Griglia

Step 1

Per prima cosa, crea un Nuovo Documento. Imposta le dimensioni della Tavola da Disegno a 1500 px per 4500 px. Dal momento che stiamo creando grafiche per utilizzo su monitor, assicurati che Metodo di Colore sia settato su RGB e Effetto Raster 72 ppi.

Step 2

Creiamo un Nuovo Livello. Chiamiamo il livello superiore "Griglia" e quello inferiore "Creazione". Qui andremo a posizionare la griglia che ci aiuterà visivamente ad allineare gli oggetti sulla tavola da disegno.

Step 3

Usa lo Strumento rettangolo (M) per creare una nuova fascia. Dagli come dimensioni 30 px per 4500 px.

Step 4

Assicurati che la fascia sia posizionata sul livello "Griglia". Riempila di rosso (R 255 G 0 B 0).

Step 5

Mantenendo la striscia rossa selezionata, vai al tuo Pannello Aspetto e clicca su Aggiungi nuovo Effetto > Distorci & Trasforma > Trasforma.

Step 6

Sposta la striscia orizzontalmente di 40 px. Fanne 23 copie. Moltiplicando la striscia per 23 volte creerà una griglia verticale con uno spazio di 10 px tra ogni striscia.

Step 7

Di nuovo, con la striscia rossa selezionata vai su Oggetto > Espandi Aspetto. Questo trasformerà l'effetto moltiplicatorio in strisce separate.

Step 8

Seleziona le strisce raggruppate e Allinea queste alla Tavola da disegno sia orizzontalmente che verticalmente.

Step 9

Vai al Pannello Trasparenza e setta l'Opacità a 10%.

Step 10

Per assicurarti che la griglia non si muova accidentalmente quando ci clicchi sopra, blocca il livello Griglia.

2. Imposta il Background

Step 1

In questo step, creeremo un background tiled. A tal proposito, usa l'immagine PNG "Debut Dark BG." Con il Livello Creazione selezionato, vai su File > Inserisci. Importa questa immagine.

Step 2

Ora creiamo un pattern tiled. Seleziona l'immagine importata e vai su Oggetto > Pattern > Crea.

Step 3

In Opzioni Pattern, puoi giocare con le impostazioni avanzate. Dai al pattern il nome Debut Dark.

Step 4

Nell'angolo in alto a destra, conferma il nuovo pattern cliccando su Chiudi.

Step 5

Crea un nuovo Rettangolo con dimensioni 1500 px per 4500 px.

Step 6

Seleziona il nuovo rettangolo e Allinealo alla Tavola da disegno.

Step 7

Riempi il rettangolo con il pattern Debut Dark prendendolo dL Pannello campioni.

3. Crea l' Header superiore e il Menu

Step 1

Vai su File > Importa e importa l'immagine header. Assicurati di deselezionare l'opzione Link . Vogliamo che l'immagine sia incorporata nel documento, non linkata.

Step 2

Seleziona l'immagine header e Allineala alla Tavola da disegno. Allineala verticalmente al Bordo superiore.

Step 3

Crea un nuovo Rettangolo con dimensioni 1300 px per 55 px. Sarà la base per il menu di navigazione.

Step 4

Riempi il rettangolo con il Nero (R 0 G 0 B 0). Nel Pannello Trasparenza, setta l'Opacità a 60%.

Step 5

Allinea il rettangolo al centro della tavola da disegno. Inoltre allinealo al bordo inferiore dell'immagine header.

Step 6

Con lo Strumento Testo (T), scrivi "Welcome." Questo tutorial utilizza il font Proxima Nova , che si ottiene tramite un abbonamento Typekit, però sentiti libero di utilizzare qualsiasi font tu voglia.

Nel Pannello Carattere, imposta la dimensione Font su 16 pt e l'Avvicinamento Caratteri a 10. Attiva l'opzione Tutto Maiuscole . Riempi il testo di Bianco (R 255 G 255 B 255).

Step 7

Seleziona il testo "Welcome". Premi Alt - Shift, clicca e trascina il testo. Questo creerà una nuova copia del carattere seleionato. Duplica il testo altre tre volte.

Step 8

Rinomina ogni nuova copia del testo come nell'immagine. Dal momento che il bottone "Welcome" è attivo, ha il colore Bianco. Altri stati del bottone sono inattivi. Riempiamoli con un Sottile Grigio (R 201 G 201 B 201).

Step 9

Usa le Guide Sensibili (Cmd - U) e la guida verticale per allineare ugualmente i bottoni nel menu nero di navigazione. Assicurati che lo spazio tra i bottoni sia uguale.

Step 10

Crea una nuova Linea ( \ ). Falla di 410 px di lunghezza. Regola l'Angolo a .

Step 11

Porta lo Spessore traccia a 1 pt. Riempilo di Bianco (R 255 G 255 B 255).

Step 12

Usa di nuovo le Guide Sensibili (U) per allineare la linea con la griglia verticale. Assicurati che tocchi il bordo destro della prima striscia rossa.

Se invece ti senti più a tuo agio con la precisione dei numeri, puoi usare il Punto di Riferimento e regolare la posizione della linea separatamente per le assi X e Y.

Step 13

Con la linea bianca selezionata, premi Invio. Una nuova finestra ti mostrerà le opzioni di trasformazione. Imposta la Posizione Orizzontale a 477 px. Clicca su Copia. Questo passaggio duplicherà la linea e la porterà sul lato destro.

Step 14

Prossimo passo, creiamo la forma di un cuore. Tramite lo Strumento Ellisse, crea un nuovo cerchio con dimensioni 17 px per 17 px. Riempilo di Colore Bianco

Step 15

Con il cerchio bianco selezionato, premi Invio. Si aprirà una nuova finestra con le opzioni di trasformazione. Imposta la Posizione Orizzontale su 13 px. Accertati di cliccare su Copia. Questo passaggio creerà due cerchi identici sovrapposti di 13 px.

Step 16

Con lo Strumento Stella, crea un triangolo. Mentre trascini il cursore sullo schermo per creare una stella, premi la Freccia giù tanto da ridurre i punti fino a creare un triangolo.

Step 17

Usa lo Strumento di Trasformazione libera (E) per ruotare il triangolo di 180 gradi.

Step 18

Scala il triangolo sul suo asse verticale di13 px.

Step 19

Vai su Oggetto > Tracciato > Aggiungi Punti di Ancoraggio. Questo passaggio aggiungerà nuovi punti di ancoraggio al triangolo selezionato.

Step 20

Usa lo Strumento Punto di Ancoraggio (Shift - C) per smussare l'angolo del punto di ancoraggio centrale. Regola la curva di Bezier in modo tale da creare un bordo ricurvo destro sul cuore. Ripeti la stessa procedura sul sul bordo sinistro del cuore. Assicurati che entrambi i bordi risultino uguali e lisci.

Step 21

Usa lo Strumento Trasformazione Libera (E) per posizionare la forma del cuore tra le strisce bianche.

Step 22

Segui gli Steps 10 – 13 per creare un nuovo set di strisce che saranno posizionate alla fine dell'header. Assicurati che la Posizione sia 306 px sull' asseX e 560 px sull'asse Y. Stavolta fai le strisce più corte dall'interno per fare in modo che il testo si possa adattare in mezzo.

Step 23

Usa lo Strumento Testo (T) per aggiungere testo tra le strisce in basso. Il font è sempre Proxima Nova Semibold.

Assicurati di usare il Maiuscoletto. Perchè usiamo il Maiuscoletto e non il Maiuscolo? C'è una grossa differenza tra questi due elementi in tipografia, dipende dalla situazione. La differenza principale è che il Maiuscoletto utilizza un set di glifi differente dal Maiuscolo. Nel Maiuscoletto la dimensione dei glifi è regolata sull'aaltezza-x in modo tale che il testo enfatizzato apparirà naturale tra le altre lettere nel paragrafo. In questo caso il Maiuscoletto è più adatto ed è più attraente.

Nota la differenza tra i due.

Step 24

Prendi di nuovo lo Strumento Testo (T), digita il nome dello studio – Salone Di Bellezza. Questa testata usa il font Canter Outline , che è disponibile per il download gratuito. Dimensione del testo è 190 pt.

Step 25

Usa lo Strumento Inclinazione per inclinare il testo. Assicurati che l'Angolo sia 348º e che l' Asse sia settato su Verticale.

Step 26

Duplica l'heading principale per creare un sottotitolo. Il sottotitolo usa il font Canter Bold . La Dimensione del Testo è settata a 98 pt. Con lo Strumento Trasforma (E), sposta il sottotitolo sotto il titolo principale.

4. Creating the "What We Do" Section

Step 1

Usa lo Strumento rettangolo (M) per creare una nuova sezione sfondo. La dimensione è di 1300 px per 760 px. Riempi il rettangolo con un Colore Marrone Chiaro (R 216 G 207 B 195).

Step 2

Posiziona il nuovo background sotto il menu superiore. Aiutati con le Guide Sensibili (U).

Step 3

Con lo sfondo selezionato, vai sul Pannello Aspetto. Crea un nuovo Riempimento e fallo Nero.

Step 4

Con il Riempimento Nero selezionato, vai su Effetti > Texture > Granulosità

Step 5

Nella finestra effetti, regola l'Intensità della Granulosità su 81. Imposta il Contrasto su 50. Usa gli Spruzzi come Tipo Granulosità.

Step 6

'

Ora, vai su Opacità. Imposta il Metodo di Fusione su Luce Soffusa. Regola l' Opacità sul 30%.

Step 7

Duplica il sottotitolo bianco come testo di riferimento per creare un nuovo titolo per la sezione "What We Do." Il nuovo titolo usa il Dark Color (R 38 G 38 B 37). La dimensione del testo è settata su 67 px. Inoltre, l'Avvicinamento carattere è impostato su un valore negativo di -10.

Step 8

Crea un Nuovo Paragrafo. Digita un testo fittizio. Imposta il font Proxima Nova Regular. Imposta la Dimensione a 15,5 pt.Setta l' Interlinea a 23 pt. Il colore del testo dovrebbe rimanere lo stesso del titolo.

Step 9

Seleziona il primo paragrafo. Clicca Alt - trascina in basso. Quest'azione duplicherà il paragrafo e ne creerà un altro. Accertati che ci sia abbastanza spazio tra tra questi paragrafi in modo tale da avere posto per le icone che verranno create dopo.

Step 10

Creiamo il testo per la firma. Usa lo Strumento Penna (P) per creare una nuova linea curva.

Step 11

Seleziona lo Strumento testo (T) e portalo sulla linea curva. Il cursore indicherà che potrai scrivere sulla linea.

Step 12

Digita un nome che desideri, per esempio "Emilly Douglass." Il font è LHF Sofia Script Regular. Imposta la Dimensione del Testoa 44 pt.

Step 13

Con lo Strumento Selezione Diretta, divertiti con le maniglie del testo e muovi il testo curvo sul tracciato verso destra.

Step 14

Con lo Strumento Ellisse (L), crea un nuovo cerchio. Imposta le sue dimensioni a 90 px per 90 px. Regola lo SpessoreTraccia a 3 pt. Imposta il Colore sul Dark Black (R 38 G 38 B 37) – come per il testo precedente.

Step 15

Con lo Strumento Rettangolo (M), crea un nuovo rettangolo. Imposta le sue dimensioni su 14 px per 28 px.

Step 16

Assicurati che l'opzione Allinea a Griglia Pixel sia deselezionata nel Pannello Trasforma. Con lo Strumento Selezione Diretta (A), avvicina i punti di ancoraggio superiori .

Step 17

Poi, usa lo Strumento Rettangolo con angoli arrotondati per creare un rettangolo arrotondato. Imposta le sue dimensioni a 23 px per 29 px. Puoi regolare la dimensione del raggio premendo i tasti Su o Giù mentyre trascini il rettangolo.

Step 18

Ancora con lo Strumento Selezione Diretta (A), avvicina i due punti di ancoraggio in basso.

Step 19

Crea un nuovo rettangolo con lo Strumento Rettangolo (M). Impostane la dimensione a 11 px per 17 px e posizionalo all'angolo superiore sinistro all'interno della forma arrotondata.

Step 20

Clicca P per attivare lo Strumento Penna. Posiziona il cursore sull'angolo in basso a destra finchè non ti indica che puoi cancellare il punto di ancoraggio. Premi Cancella per cancellarlo.

Step 21

Poi seleziona l'angolo in alto a sinistra con lo Strumento Selezione Diretta e spostalo verso sinistra.

Step 22

Con il punto d'ancoraggio in alto a sinistra ancora selezionato, regola il raggio trascinando il punto bianco all'interno della forma. Questa caratteristica si chiama Angoli Dinamici ed è disponibile in Illustrator CC.

Step 23

Con lo Strumento Rettangolo (M), crea un nuovo rettangolo con dimensioni 15 px per 31 px.

Step 24

Di nuovo, con lo Strumento Selezione Diretta (A), avvicina il più possibile l'uno all'altro i punti di ancoraggio in basso .

Step 25

Con lo Strumento Rettangolo Angoli Arrotondati, crea un nuovo rettangolo con dimensione 3 px per 18 px. Scambia il colore del tratto con il colore del riempimento nella Palette Colori (Shift - X).

Step 26

Con lo Strumento Stella, crea un nuovo triangolo. Ricorda di tener premuto il Pulsante Freccia giù mentre trascini la forma, per ridurre il numero di punti. Assicurati che le misure del triangolo siano di 5 px per 6,5 px.

Step 27

Usa lo Strumento Selezione Diretta per attivare l'Opzione Angoli Dinamici e manipola il punto di ancoraggio in basso per creare un angolo arrotondato.

Step 28

Aggiungi del testo con lo Strumento Testo (T). Il testo è settato su Proxima Nova Semibold. Imposta la DimensioneTesto a 19 pt. Regola l'Interlinea a 22 pt e l'Avvicinamento Caratteri a 75.

Step 29

Creiamo l'icona della bottiglia di profumo. Usa lo Strumento Ellisse (L) per creare un nuovo cerchio. Imposta la sua dimensione a 90 px a 90 px.

Step 30

Crea un nuovo cerchio all'interno. Imposta la sua dimensione a 37 px per 37 px. Assicurati che lo Spessore Traccia sia di 2 pt. Non dimenticare di deselezionare l'opzione Allinea a Griglia Pixel .

Step 31

Crea un nuovo rettangolo con lo Strumento Rettangolo (M). Impostane la dimensione a 13 px per 12 px.

Step 32

Con lo Strumento Selezione Diretta (A), seleziona i punti di ancoraggio superiori, e trascinando la maniglia del cerchietto bianco manipola i punti di ancoraggio per creare angoli arrotondati.

Step 33

Crea un Nuovo Rettangolo. Imposta la sua dimensione su 9 px per 9 px. Con lo Strumento Trasformazione Libera (E), ruota il rettangolo di 90 gradi.

Step 34

Con il rettangolo selezionato, usa lo Strumento Selezione Diretta (A) per attivare lo Strumento Angoli Dinamici e regola un po' la maniglia bianca per creare angoli arrotondati.

Step 35

Crea un nuovo rettangolo. Imposta la sua dimensione a 6 px per 3 px. Posiziona questo rettangolo sul primo.

Step 36

Seleziona entrambi i rettangoli e Combinali attraverso il Pannello Elaborazione Tracciati.

Step 37

Tramite lo Strumento Rettangolo con Angoli Arrotondati, crea una nuova forma con dimensioni 18 px per 14px.

Step 38

Con il cerchio ancora selezionato, vai su Oggetto > Tracciato > Scostamento Tracciato...

Step 39

Imposta lo Scostamento a -9 px.

Step 40

Con lo Strumento Selezione Diretta, rimuovi i punti di ancoraggio in basso e a destra. Imposta lo Spessore Tracciaa 10 pt.

Step 41

Usa lo Strumento larghezza (Shift - W) per regolare la larghezza della traccia. Giocaci un po' finchè non ottini il risultato desiderato.

Step 42

Seleziona la forma e vai su Oggetto > Espandi Aspetto.

Step 43

Usa lo Strumento Contagocce (I) per scambiare il riempimento con la traccia della forma selezionata.

Step 44

Con lo Strumento Testo (T), aggiungi il nuovo testo. Oppure puoi copiare la stessa frase del testo precedente e usarla come riferimento.

Step 45

Crea un nuovo cerchio utilizzando lo Strumento Ellisse (L). Imposta la sua dimensione a 90 px per 90 px.

Step 46

Attiva lo Strumento Penna (P). Crea la forma mostrata nell'immagine sotto. Usa la tua creatività e immaginazione. Nota la posizione dei punti – meno punti ancora utilizzi, più la tua forma apparirà liscia.

Step 47

Usa lo Strumento Ellisse (L) per creare una ellisse all'interno della maniglia delle forbici. Con lo Strumento Trasformazione Libera, ruota e allunga leggermente l'ellisse verso sinistra.

Step 48

Fai clic con il tasto destro su entrambe le forme selezionate. Vai su Trasforma > Rifletti...

Step 49

Rifletti la forma su Asse Verticale. Clicca su Copia.

Step 50

Usa lo Strumento Trasformazione Libera per spostare la forma verso destra.

Step 51

Usa lo Strumento Ellisse (L) per creare una nuova forma. Imposta la sua dimensione a 3 px per 3 px. Riempila con il Nero Scuro (R38 G 38 B 37).

Step 52

Usa lo Strumento Linea ( \ ) per creare una linea verticale al centro delle forbici. Imposta lo Spessore Traccia su 1 px.

Step 53

Adesso ingrandiamo. Con lo Strumento Selezione Diretta (A), seleziona i due punti di ancoraggio superiori. Clicca J per unire i Punti di Ancoraggio in una sola forma.

Step 54

Con lo Strumento Penna (P), aggiungiamo un altro punto di ancoraggio tra i due punti di ancoraggio uniti. Tramite lo Strumento di Selezione Diretta (A), spingi un po' il punto di ancoraggio verso l'alto. Nel Pannello Traccia, scambia il tipo di Angolo da Angolo arrotondato ad Angolo Vivo.

Step 55

Usa lo Strumento Stella per creare un triangolo al centro delle forbici.

Step 56

Con lo Strumento Selezione Diretta (A), seleziona il punto di ancoraggio centrale e premi Delete.

Step 57

Attiva lo Strumento Rotazione (R). Nel pannello Rotazione, imposta l' Angolo a -40°.

Step 58

Con lo Strumento Testo (T), inserisci del testo.

Step 59

Usa la griglia verticale per posizionare ogni icona uniformemente. Usa lo Strumento Trasformazione Libera (E) a questo proposito.

Crea la Sezione Prima & Dopo

Step 1

Vai su File > Importa (Shift - Cmd - P) e seleziona l'immagine mostrata sotto. Importala nel documento.

Step 2

Con lo Strumento Trasformazione Libera (E), sposta l'immagine sotto lo sfondo marrone chiaro.

Step 3

Crea un nuovo rettangolo con lo Strumento rettangolo (M). Imposta la sua dimensione a 1300 px per 840 px.

Step 4

Sposta questo rettangolo sotto llo sfondo marrone chiaro. Assicurati che sia sopra l'immagine della ragazza.

Step 5

Nel Pannello Livelli, seleziona sia l'immagine che il rettangolo nero. Premi Cmd - 7. Questo creerà una Maschera di ritaglio dal tracciato superiore. L'immagine verrà tagliata della stessa forma del tracciato.

Step 6

Creiamo di nuovo un nuovo rettangolo. Imposta la sua dimensione a 1300 px per 840 px.

Step 7

Usa lo Strumento Trasformazione Libera (E) per posizionare questo rettangolo sullo stesso punto dell'immagine. Riempilo con il Nero (R 0 G 0 B 0). Nel Pannello Trasparenza, setta l'Opacità a 65%. Questo creerà una sovrapposizione nera sopra l'immagine così da rendere il testo bianco leggibile.

Step 8

Clicca Alt - click e trascina il titolo superiore "What We Do" per spostarlo in basso. Questa azione duplicherà il titolo. Sostituisci il testo e riempi il Colore di Bianco (R 255 G 255 B 255).

Step 9

Ripeti questo semplice processo con il prossimo blocco di testo. Riempi di nuovo il Colore di Bianco (R 255 G 255 B 255).

Step 10

Crea un nuovo cerchio con lo Strumento Ellisse (L). Imposta la sua dimensione a 470 px per 470 px. Riempi il Colore di White (R 255 G255 B 255). Nele Pannello Trasparenza, imposta l'Opacità a 30%.

Step 11

Con il cerchio bianco selezionato, premi Invio. Nel Pannello Sposta, Imposta la Posizione orizzontale a 400 px. Clicca su Copia.

Step 12

Vai su File > Importa (Shift - Cmd - P). Seleziona l'immagine mostrata a clicca su Importa.

Step 13

Con lo Strumento Trasformazione Libera (E), posiziona l'immagine direttamente sopra il primo cerchio.

Step 14

Seleziona il cerchio sotto l'immagine e vai su Oggetto > Tracciato > Scostamento Tracciato...

Step 15

Imposta lo Scostamento su -22 px. Clicca OK.

Step 16

Nel Pannello Livelli, sposta il cerchio bianco sopra l'immagine. Seleziona sia il cerchio che l'immagine. Premi Cmd - 7 per creare una maschera di ritaglio.

Step 17

Seleziona il cerchio di destra. Vai su Oggetto > Tracciato > Scostamento Tracciato...

Step 18

Imposta di nuovo lo Scostamento a -22 px. Premi OK.

Step 19

Riempi il cerchio di Bianco (R 255 G 255 B 255). Nel Pannello Trasparenza, imposta l'Opacità a 100%.

Step 20

Seleziona il cerchio bianco e vai su Oggetto > Tracciato > Scostamento Tracciato. Imposta lo Scostamento a -45 px.

Step 21

In questo cerchio interno appena creato, scriveremo del testo. Attiva lo Strumento Testo (T). Sposta il cursore del testo sul cerchio finchè non ti indica che puoi scrivere nella forma.

Step 22

Scriviamo del testo. Imposta la dimensione del titolo a 23 pt. Divertiti con le opzioni del testo per vedere quale va meglio per te. Segui le regole base della tipografia per assicurarti che il risultato finale sia esteticamente piacevole.

Step 23

Usa lo Strumento Rettangolo (M) per creare un nuovo rettangolo. Impostane la dimensione a 70 px per 70 px. Imposta lo Spessore Traccia a 1 pt. Riempi la traccia di Bianco (R 255 G 255 B 255).

Step 24

Attiva lo Strumento Trasformazione Libera (E). Premi Shift ruota il rettangolo di 45º.

Step 25

Con lo Strumento Selezione Diretta (A), seleziona il punto di ancoraggio a destra e premi Cancella.

Step 26

Fai clic con il tasto destro sulla forma e vai su Trasforma > Rifletti...

Step 27

Nel Pannello Rifletti, imposta l'Asse a Verticale. Clicca Copia.

Step 28

Usa lo Strumento Trasformazione Libera (E) per spostare la forma verso destra vicino al cerchio.

Crea la Sezione Ispirazione

Step 1

Crea un nuovo rettangolo con lo Strumento Rettangolo (M). Imposta la sua dimensione su 1300 px per 360 px. Riempi il Colore con Grigio Chiaro (R 218 G 218 B 218). Sposta il rettangolo sotto la sezione "Before & After".

Step 2

Nel Pannello Aspetto, crea un nuovo Riempimento. Riempi con il Nero (R 0 G 0 B 0).

Step 3

Con il nuovo riempimento selezionato, vai su Effetti Illustrator > Texture > Granulosità...

Step 4

Nel Pannello Effetto Granulosità, imposta l'Intensità su 81 e il Contrasto a 50. Usa il Tipo a Spruzzi.

Step 5

Nel Pannello Aspetto, imposta il Metodo di Fusione su Luce Soffusa. Regola l' Opacità sul 25%.

Step 6

Click Alt - click e trascina il precedente testo per crearne uno nuovo. Riscrivi il testo selezionato.

Step 7

Riempi il nuovo testo di Colore Rosso (R 186 G 67 B 63).

Step 8

Ripeti lo stesso procedimento e duplica il cuore e le strisce dalla sezione header. Usa lo Strumento Selezione Diretta (A) per accorciare le strisce e riempire la Traccia di Colore Rosso (R 186 G 67 B 63).

Step 9 

Vai su File > Importa (Shift - Cmd - P). Seleziona l'immagine desiderata ed importala nel documento.

Step 10

Con lo Strumento Trasformazione Diretta (E), allinea l'immagine verticalmente e spostala direttamente sotto il rettangolo grigio chiaro.

Step 11

Crea un nuovo rettangolo con lo Strumento Rettangolo (M). Imposta la sua dimenzione a 1300 px per 55 px.

Step 12

Nel Pannello Trasparenza, imposta l'Opacità al 60%.

Step 13

Usa lo Strumento Ellisse (L) per creare un nuovo cerchio. Imposta la sua dimensione a 11 px per 11 px. Riempilo con Colore Grigio Chiaro (R 221 G 221 B 221).

Step 14

Con il cerchio selezionato, premi Invio. Nel Pannello Sposta, imposta la Posizione Orizzontale a 30 px. Clicca si Copia.

Step 15

Ripeti il passaggio precedente per creare diversi cerchi della stessa dimensione. O, semplicemente clicca Cmd - D più volte.

Step 16

Con lo Strumento Selezione (V), seleziona i precedenti quattro cerchi e riempili con Colore Grigio Scuro (R 48 G 48 B 48).

Step 17

Premi G per raggruppare i cerchi e Allineali Orizzontalmente alla Tavola da Disegno.

Step 18

Seleziona le forme freccia precedenti e premi Alt e trascina le frecce in basso sotto la sezione "Inspiration".

Crea la Sezione Meet Us

Step 1

Con lo Strumento Selezione (V), duplica lo sfondo marrone chiaro della sezione superiore.

Step 2

Seleziona lo sfondo marrone e imposta il Punto di Riferimento sul bordo superiore. Imposta l' altezza del rettangolo a 404 px.

Step 3

Duplica la nuova sezione del testo – ripeti lo stesso procedimento che abbiamo usato per le sezioni precedenti. Riempi il testo di Colore Nero scuro (R 38 G 38 B 37).

Step 4

Poi, crea un nuovo blocco di testo con lo Strumento Testo (T). Imposta la Dimensione de Carattere a 18 pt, Interlinea a 22 pt, e l'Avvicinamento Caratteri a 75.

Step 5

Crea un nuovo Rettangolo con lo Strumento Rettangolo (M) Imposta la dimensione a 1300 px per 500 px

Step 6

Vai su File > Importa (Shift - Cmd - P) e importa Map Screenshot.

Step 7

Nel Pannello Livelli, sposta la Map Screenshot in basso, sotto il rettangolo nero. Con entrambi gli oggetti selezionati, clicca Cmd - 7 per creare una maschera da ritaglio.

Step 8

Con lo Strumento Testo (T), crea un testo "Copyright" sotto la sezione "Meet Us". Riempilo con Colore Grigio (R 89 G 89 B 89). Imposta la Dimensione Font a 11 pt e usa Tutto Maiuscolo. Puoi importare un logo vettoriale della tua azienda, se preferisci.

Step 9

Crea un nuovo rettangolo con lo Strumento Rettangolo (M). Imposta la sua dimensione a 1300 px per 4370 px.

Step 10

Fai clic con il tasto destro sul rettangolo e vai su Ordina > Porta Sotto. Questo porterà il rettangolo sotto tutti gli altri oggetti presenti nel documento.

Step 11

Con il rettangolo ancora selezionato, vai su Effetti Illustrator > Stilizzazione > Ombra Esterna...

Step 12

Nel Pannello Ombra Esterna, imposta l'Opacità al 75%. Regola la Sfocatura to 6 px.

Conclusione

Congratulazioni! In questo tutorial abbiamo utilizzato semplici strumenti, tecniche ed effetti delicati per creare questa pagina di webdesign minimalista. Spero che ti sia piaciuto il tutorial e che abbia imparato qualcosa di utile e nuovo.

Advertisement
Did you find this post useful?
One subscription.
Unlimited Downloads.
Get unlimited downloads