Come creare un bel menu per un gruppo VKontakte. Come creare un bellissimo menu in un gruppo VKontakte Creazione di un menu in Photoshop
Scopriamo come creare un menu orizzontale tridimensionale per il sito. Innanzitutto, crea un documento largo 1600 pixel e lungo 2000 pixel.
Creiamo un nuovo livello.
Nella barra degli strumenti laterale, seleziona Selezione rettangolare.
Ora formiamo lo spazio di lavoro per il menu futuro.
Usa lo strumento Riempi per riempire l'area selezionata con il colore. Per semplificare il tuo lavoro - #0391ff, questo è il colore che ho usato. Come cambiare il colore, lo troverai qui.
Ora proviamo a trovare vuoto il centro del menu. Per fare ciò, seleziona lo strumento "sposta" e fai clic sul livello con il pezzo.
Ora vediamo il centro e possiamo segnarlo da soli. Sapere dove si trova ci sarà comunque utile.
Imposta una linea ausiliaria al centro del documento. Per fare ciò, dovremo spostare il cursore sul righello situato nella barra degli strumenti del serbatoio ed estrarlo.
Nella barra degli strumenti laterale, seleziona "Testo" e scrivi il nome delle sezioni future.
Ad esempio, ho scelto il tema dell'arredamento e ho deciso di sviluppare un menu per il sito per le seguenti sezioni:
- casa
- Cucine
- Camere da letto
- Mobili imbottiti
- corridoi
- Muri
- Circa la società
- Contatti
Scriviamo in linea. Lascia degli spazi tra ogni sezione.
Dimensione del carattere arial 18 pixel. Troveremo questi parametri nel pannello "Testo".
Ora, utilizzando il già citato strumento "Sposta", impostiamo il testo al centro del documento di lavoro, concentrandoci sulla linea ausiliaria.
Ora aggiungiamo un po' di volume al nostro menu.
Separiamo i pulsanti. Per fare ciò, dobbiamo selezionare lo strumento "linea" dalla barra degli strumenti. Prendiamo un colore leggermente più scuro rispetto al campo del nostro menu. Diciamo #0179d6. Disegna una linea orizzontale tenendo premuto il tasto Maiusc con uno spessore di 1 pixel. Stiamo cercando di tenerlo dritto. Dal confine al confine della zona blu. Se hai problemi con questo, puoi ridimensionarlo usando lo strumento sposta.
Quindi rasterizza la linea risultante.
Ora dovremmo duplicare l'elemento ricevuto. Per fare ciò, nella finestra dei livelli, fai clic sul livello con la forma con il tasto sinistro del mouse e seleziona "Crea un livello duplicato".
Fare clic sul livello risultante e selezionare Opzioni di fusione. Abbiamo bisogno della scheda Sovrapposizione colore. Prendiamo un colore leggermente più chiaro del campo del menu. Ad esempio, #6bbeff.
Ora, usando lo strumento Sposta, trascina il livello lontano dalla ripresa. Li mettiamo fianco a fianco. Per fare ciò, dovrai ingrandire l'immagine. Le figure devono essere affiancate, in modo che non ci sia spazio tra di loro.
Ecco cosa abbiamo. Il bottone è diventato voluminoso. Abbiamo creato un'imitazione di luci e ombre. Ora facciamo lo stesso con il resto dei pulsanti.
Duplica i livelli per ridurre i tempi di lavoro.
Il volume è apparso, ma manca qualcosa. Proviamo ad aggiungere volume alla barra dei menu.
Creiamo linee orizzontali usando lo stesso metodo usando i colori #0063af e #78c2fb.
Mettiamoli sopra. Ecco cosa abbiamo.
Un semplice menù volumetrico per il sito è pronto!
Buona giornata cari visitatori. Vuoi imparare a creare un bel menu per il tuo gruppo VKontakte, ma non sai come farlo. Quindi la lezione video di formazione "Come creare un menu in VKontakte" ti aiuterà a creare questo menu passo dopo passo.
Questa lezione è una continuazione della precedente lezione video "Progettazione di un gruppo VKontakte" che puoi guardare. Abbiamo anche bisogno di Adobe Photoshop per creare il menu. Puoi imparare come installare e lavorare con questo programma dalla sezione.
Puoi anche scaricare i modelli utilizzati in questo tutorial video https://yadi.sk/d/EFuM8IjjO3zVUA.
1. Creazione di un menu in Photoshop
Nel programma Photoshop, vai alla scheda file, fai clic su Crea o premi Ctrl + N. Creiamo un nuovo documento con una larghezza di 600 pixel, un'altezza di 420 pixel e una risoluzione di 100 pixel per pollice. Quindi, fai clic sul file da aprire e seleziona qualsiasi immagine che ti piace dal computer.
Seleziona lo strumento selezione rettangolare o il tasto M sulla tastiera per selezionare l'immagine. Quindi, fai clic sulla scheda Modifica nel menu e seleziona copia o la scorciatoia da tastiera Ctrl + C. Passiamo nel nostro documento creato e selezioniamo la modifica nel menu incolla o una combinazione di pulsanti Ctrl + V.
Seleziona lo strumento sposta o il tasto V. Nel menu di modifica, seleziona la trasformazione libera o i tasti Ctrl + T. Trascinando uno degli angoli tenendo premuto il tasto Maiusc per ridimensionare in modo uniforme, teniamo la nostra immagine.
1.1. Creazione di pulsanti
Seleziona lo strumento rettangolo o il tasto U. Seleziona un colore, quindi crea un pulsante. Nella barra laterale a destra è possibile impostare i parametri per il raggio di arrotondamento. Facciamo 5 pixel. Nella scheda Anteprima, assicurati che gli ausiliari siano stati abilitati. Spostiamo il nostro pulsante al centro dell'immagine.
Fare clic sul livello del pulsante, fare clic con il pulsante destro del mouse sulle opzioni. Applicare un effetto ombra per evidenziare meglio il pulsante su uno sfondo chiaro. Usando lo strumento sposta, tenendo premuto il tasto Alt sulla tastiera, trascina il pulsante un po' più in basso, copiandolo così. Pertanto, creiamo un terzo pulsante, spostandolo a una tale distanza, come ci parleranno gli elementi ausiliari. Tenendo premuto il tasto Ctrl selezioniamo i livelli, selezioniamo lo strumento sposta e li posizioniamo al centro del documento.
Seleziona lo strumento testo orizzontale o il tasto T. Quindi, premi il pulsante sinistro del mouse, assicurati di essere fuori dai pulsanti futuri. Scrivi il testo di cui abbiamo bisogno, sposta il testo approssimativamente al centro del pulsante o Ctrl + V. Quindi diamo un nome ad altri pulsanti.
Selezioniamo l'utensile da taglio o il tasto C. Selezioniamo uno per uno i pulsanti creati. Seleziona il nostro primo pulsante e punta verso uno degli angoli. In questo caso, l'icona di taglio dovrebbe rimanere invariata. Quindi, seleziona il secondo e il terzo pulsante. Fare clic sul menu file e salvare il documento sul computer. Successivamente, fai clic su Salva per il Web. Salviamo i pulsanti sul computer.
2. Modifica del menu in VKontakte
Andiamo al nostro gruppo VKontakte. Dopo l'avatar della community, andiamo al gruppo delle statistiche. Nella barra degli indirizzi del browser ci sono i numeri di comunità, sono proprio ciò che serve per modificare ulteriormente il gruppo. Per modificare il gruppo abbiamo bisogno del seguente link che dovrai copiare https://vk.com/pages?oid=-XXX&p=Page_name
Invece di un'iscrizione di pagina, può creare un nome arbitrario per la nostra pagina futura. Chiamiamolo, ad esempio, il menu di gruppo. Premi la matita e vai alla modalità di markup wiki. Ora puoi aggiungere le foto che hai appena creato in Adobe Photoshop. Salviamo la pagina e premiamo il pulsante di anteprima e vediamo come appare il nostro menu. Se noti il pulsante è molto piccolo e ci sono anche degli spazi tra i pulsanti.
Passa alla modalità di modifica visiva. Facciamo clic su ciascun pulsante a turno e selezioniamo la dimensione dei pulsanti, la larghezza è di 610 pixel e l'altezza viene allineata automaticamente. Questo è il valore più alto in un contatto.
Rimuoviamo i problemi tra i pulsanti. Per fare ciò, vai al menu di modifica e nell'editor visivo scrivi alla fine di ogni voce; nopadding. Copia questo testo e incollalo nel resto delle immagini. Fare clic per salvare la pagina e vedere cosa abbiamo ottenuto facendo clic sul pulsante di anteprima. Ora i nostri pulsanti sono diventati uno.
In questa lezione creeremo un pulsante originale per il sito.
Passo 1.
Crea un nuovo documento, imposta il colore di sfondo su # f7f5f6. Attiva lo strumento Strumento rettangolo arrotondato (Rettangolo con angoli arrotondati) con un raggio di arrotondamento di 10 pixel. Imposta il colore di primo piano su # 2f88bb. Su un nuovo livello, crea un piccolo rettangolo arrotondato.
Passo 2
Ora vai a Stile livello (Stili livello) e richiedere il rettangolo disegnato Bagliore esterno (Bagliore esterno) e Bagliore Interno (Bagliore Interno) con le seguenti impostazioni:
Passaggio 3
Tenendo premuto un tasto
Attiva lo strumento Strumento selezione ellittica(Area di selezione ovale) e tenendo premuto il tasto
Passaggio 4
Crea un nuovo livello e usa lo strumento Strumento selezione ellittica(Area di selezione ovale), crea un'ellisse come mostrato. Ora usando lo strumento Pendenza(Pendenza), applica lo stile dal primo piano a trasparente e crea un riempimento sfumato sulla selezione ovale. Questo gradiente fungerà da ombra.
Passaggio 5
Quindi, tenendo premuto il tasto
Passaggio 6
Imposta l'opacità del livello del pulsante su 32%. Tenendo premuto un tasto
Passaggio 7
Riempi la selezione creata con il bianco e cambia l'opacità a 11%.
Passaggio 8
Ora crea un nuovo livello e disegna un cerchio come mostrato di seguito.
Passaggio 9
Questo articolo sarà un manuale dettagliato e ti dirò come creare un menu per un gruppo VKontakte. Un menu di gruppo VK dal design accattivante contribuisce a un reale aumento dei visitatori e alla crescita delle vendite sul sito.
Ciao miei cari lettori. Lascia che te lo dica oggi come creare un bel menu per un gruppo VKontakte e completamente gratuito. A proposito, dopo aver imparato a creare tali argomenti, puoi guadagnare un po 'su questo -))). Già, nessun sito commerciale funziona senza creare una propria comunità sui social network, in particolare VK, che è garantito per aiutare ad attirare nuovi clienti, oltre a promuovere la tua attività.
Ma se la tua comunità non è attraente e come stanno tutti coloro che vogliono rimanerci? secondo me nessuno!!! Quindi decoriamo i nostri gruppi con un design di qualità e impariamo come farlo molto rapidamente. Prima di iniziare a creare grafica e il nostro menu futuro, devi installare Photoshop sul tuo computer per tagliare ulteriormente le immagini. Molti chiederanno perché è necessario tagliare le immagini. Il punto qui è che per ogni collegamento di menu dovremo creare una striscia separata dal banner generale.
Oggi ci sono diversi tipi di menu creati:
- Aperto con punti attivi;
- Chiuso come post appuntato;
- Con immagini separate o un'immagine adiacente comune del banner e del menu.
L'essenza della creazione di entrambe le opzioni è la stessa. Solo la differenza principale è negli elementi aggiuntivi e nei tipi di record e questo articolo verrà discusso in modo più dettagliato in questo articolo.
Lavorare con il menu ci aiuterà markup wiki, che oggi è integrato nell'editor di testo VKontakte. Differisce dal solito in quanto utilizzerà i comandi standard per visualizzare un'immagine particolare e inserire collegamenti agli elementi necessari. Il markup wiki stesso ti consente di inserire codice per visualizzare immagini, video e altri elementi.
Menu chiuso del gruppo VK
In questo caso, osserveremo a sinistra dell'avatar del gruppo principale un collegamento ipertestuale sotto forma della scritta "menu di gruppo", quando si fa clic, si aprirà il nostro menu con elementi e immagini attivi.
Il menu sarà simile a questo:
Apri il menu del gruppo (filmato bloccato)
La linea di fondo è creare voci di menu già aperte che verranno visualizzate nella descrizione del gruppo stesso, dove solitamente viene visualizzato in base a tutte le condizioni. La nostra immagine sarà allegata alla descrizione, che prepareremo in anticipo e la collegheremo alla pagina su cui avremo articoli attivi. Questo menu è diventato molto popolare di recente ed è molto richiesto dai clienti. Sembrano così:
Come creare un bel menu per un gruppo VKontakte: istruzioni passo passo
Quindi, prima di tutto, dovremo creare l'avatar del gruppo principale che posizioneremo sulla destra e lo stub del nostro menu sotto forma di banner.
- Per un avatar 200x332 pixel;
- Per il banner del menu principale 395x282 pixel.
Come puoi vedere, l'altezza delle immagini è diversa e questo viene fatto in modo che le immagini non si muovano in altezza e siano allo stesso livello, poiché l'altezza del nome e dello stato della comunità richiede circa 50 px e avremo bisogno per rimuovere questo valore dall'altezza del menu.
Per chiarire, se l'altezza dell'avatar del gruppo principale è 332, sottraiamo 50 da esso e otteniamo l'altezza del menu principale pari a 282. Se le dimensioni non contano, l'altezza può essere impostata su arbitraria.
Il prossimo passo dopo aver creato la community sarà l'impostazione dei materiali e qui dobbiamo vietare ai partecipanti di creare pagine e blocchi aggiuntivi, ma solo di scrivere sul muro. Per fare ciò, sarà necessario andare nella sezione sotto l'avatar del gruppo chiamata "gestione della comunità" dove dobbiamo rendere i nostri materiali "riservati" come mostrato di seguito.
Ora passiamo alla creazione della composizione generale. Certo, puoi semplicemente inserire un'immagine invece di un avatar e nella descrizione, ma non diventiamo dilettanti e mostriamo come farlo professionalmente in modo che sia un'immagine a tutti gli effetti, trasformandosi in un'altra.
Creiamo una nuova tela in Photoshop con dimensioni di 600x350 pixel, che useremo come stencil tagliando le aperture per le nostre immagini. Per funzionare, dobbiamo tradurre le dimensioni di tutti gli elementi e dei righelli in pixel, e questo viene fatto lungo il seguente percorso: "Modifica-Impostazioni-Base" e qui impostiamo già i pixel.
Il passaggio successivo nella creazione di un menu aperto è creare ritagli per il banner e l'avatar, che riceveremo per il download. Per fare ciò, vai nella sezione del menu verticale a sinistra e seleziona il taglio.
Usando il tasto sinistro del mouse, come se si stesse selezionando un'area, è necessario selezionare i blocchi delle dimensioni che ci servono e dopo ogni selezione, premere il tasto cancella “Cancella” e selezionare 50% grigio. Tali azioni porteranno al fatto che i blocchi avranno la dimensione desiderata ed evidenziati con un colore diverso dallo sfondo principale.
Dovresti ottenere quanto segue:
E ora seleziona la gomma e usa la funzione "gomma magica" per fare clic su ciascun blocco grigio e ottenere uno stencil con ritagli. Nel passaggio successivo, selezioniamo la nostra immagine principale e la mettiamo sotto lo sfondo e otteniamo immagini già pronte su cui possiamo scrivere del testo con il nome del menu o altri elementi pubblicitari.
Eccellente. Dopo aver inserito un'immagine del nostro design, dobbiamo solo selezionare "salva per Web" e otteniamo 2 delle nostre immagini come output. Ora torniamo al nostro gruppo e possiamo compilare l'avatar principale (verticale). Useremo il banner per il menu un po' più tardi quando lavoreremo con il codice di markup wiki.
Creiamo il menu stesso, con voci attive che reindirizzeranno l'utente alle sezioni necessarie di un sito di terze parti o ad album e directory del gruppo stesso. Useremo una nuova immagine per una modifica -))).
Quindi, torna su Photoshop e crea una nuova tela con dimensioni di 400x300 pixel. Quindi selezioniamo nella sezione: file-place e selezioniamo un'immagine per lo sfondo del menu.
Posizioniamo i pulsanti del nostro menu futuro sull'immagine e tagliamo l'immagine come abbiamo fatto sopra selezionando i blocchi necessari. Successivamente, selezioniamo anche "salva per il web" e otteniamo una cartella con i nostri tagli. Nel mio caso, ho ottenuto 4 immagini in una cartella separata.
Ora dobbiamo inserire le immagini scaricate da Photoshop in un album separato e nasconderle da occhi indiscreti. Dopo il caricamento, ogni immagine riceverà il suo nuovo nome e l'ID univoco.
Tieni presente che devi avere:
- Materiali aperti in modalità "limitata";
- Discussioni incluse;
- La cartella delle foto è aperta a tutti.
Ora resta da impostare la nostra pagina dove verrà visualizzata nel menu. Per fare ciò, vai alla pagina principale della community e seleziona materiali freschi e modifica e chiama "IL NOSTRO MENU".
Successivamente, dobbiamo inserire le immagini che abbiamo ottenuto durante il taglio in Photoshop. Qualcuno usa codici di markup, ma per non essere più furbo suggerisco semplicemente di scegliere di inserire una foto cliccando sull'icona della fotocamera e caricando una dopo l'altra una per una.
Lavorando in un editor di testo, se dopo aver caricato le immagini, clicchiamo sull'icona delle parentesi nell'angolo in alto a destra, dovremmo vedere il seguente codice:
Consiglio: Un punto importante dopo aver caricato le immagini è rimuovere i rientri. Questo si risolve inserendo "nopadding" davanti alle dimensioni dell'immagine.
Per chiarimento, quello che viene preso da dove viene descritto di seguito, ma dato che tutto verrà inserito automaticamente e non è necessario essere intelligenti, e aprire come alcune persone scrivono ogni immagine e prendono l'id, quindi carica e salva.
[]
dove xxxxx è l'id della tua immagine
aaaaa - larghezza in pixel (non superiore a 388)
Dovrebbe finire così:
Ora le nostre immagini sono raccolte in un banner separato. E per aggiungere un link ad ogni elemento, è sufficiente cliccare sull'immagine con il markup disabilitato e incollare l'URL copiato nella sezione link.
E così arriviamo al punto più importante e ultimo nella creazione del nostro menu VKontakte. Ora dobbiamo salvare la nostra pagina immagine e copiarne l'indirizzo. Nel mio caso si presenta così:
https://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Ricorda, all'inizio dell'articolo abbiamo creato uno stub di menu, che sarà una continuazione del nostro avatar principale, e abbiamo appena creato uno stencil per questo. Questo è esattamente ciò di cui abbiamo bisogno in questo momento.
Vai alla pagina principale e procedi come segue:
Passo 1.
Inseriamo l'indirizzo della pagina nel campo di testo per una nuova voce sulla bacheca, dopodiché verrà convertito in un collegamento.
Passo 2.
Alleghiamo al record l'immagine del nostro stub per il menu e clicchiamo invia.
Passaggio 3.
Ora, dopo aver pubblicato il post, fai clic sull'ora di creazione nella parte in basso a sinistra del post e seleziona "PIN".
Eccellente!!! Questo è dove finiamo. Ora sai come creare fantastici menu e puoi guadagnare buoni soldi su di esso. Ti consiglio di fare tutto nel seguente ordine:
- Elaboriamo una struttura e ordiniamo il design delle immagini dei menu;
- Eseguiamo il ridimensionamento e il taglio di tutte le immagini;
- Inserisci le immagini negli album;
- Modifichiamo tutti i tagli nell'editor e li pubblichiamo nelle pagine principali del gruppo.
Come risultato del lavoro, otterremo il seguente menu.
Ma il menu stesso, se premuto, apparirà con i collegamenti attivi. Vale la pena giocare con le dimensioni e adattarsi allo schermo, ma non dimenticare il display sui dispositivi mobili.
IMPORTANTE: Dopo aver modificato il design di VK nel 2016, sono state apportate nuove modifiche durante la creazione di immagini e requisiti per le immagini su cui.
Scarica il modello di menu di gruppo VK + tutte le fonti di lezione
Spero che il materiale sia stato utile e ora puoi facilmente capire come creare un bellissimo menu per il gruppo VKontakte. Iscriviti agli aggiornamenti del blog e ci vediamo presto nei nuovi post. Se hai domande, scrivile nei commenti e ti aiuterò sicuramente.
Allego un video per rafforzare ciò che ho letto.
In questo tutorial di Photoshop, ti guideremo attraverso il processo di creazione di un semplice menu a discesa.
Anteprima immagine finita
Passo 1
Apri Photoshop, premi Ctrl+N, creando così un nuovo documento. Immettere le impostazioni di seguito e fare clic su OK. Attivare la visualizzazione della griglia: Visualizza > Mostra > Griglia (Visualizza > Mostra > Griglia) e attivare anche l'aggancio alla griglia: Visualizza > Aggancia a ... > Linee griglia (Visualizza > Mostra > Griglia). Per ora, avremo abbastanza linee ogni 5 pixel. Vai al menu Modifica > Impostazioni > Guide, Griglia e Frammenti (Modifica > Preferenze > Guide, Griglia e Slice) e fai attenzione alla sezione Griglia (Griglia). Immettere un valore di 5 nel campo "Riga ogni..." (Griglia ogni) e un valore di 1 nel campo "Divisione interna per..." (Suddivisione). Infine, imposta il colore della griglia su # a7a7a7 e fai clic su OK.
Non lasciare che la griglia spessa che appare sulla tela ti spaventi. È lì per semplificarti il lavoro. Tra l'altro, abiliteremo anche la visualizzazione del pannello info: Finestra > Info (Finestra > Info) per tracciare in tempo reale la posizione dei tuoi elementi e forme.
Passo 2
Imposta il colore di primo piano su # 3f8ecf, seleziona lo strumento Rettangolo arrotondato e imposta il Raggio su 20 pixel. Crea un percorso vettoriale 160x40 e duplicalo: Control + J. Seleziona la copia e rendila bianca. Passa allo strumento Rettangolo, fai clic sul pulsante Interseca nella barra degli strumenti in alto e disegna un percorso vettoriale 40x40 px come mostrato nella terza immagine qui sotto. Vai alla tavolozza dei livelli e fai doppio clic sul contorno bianco per aprire la finestra dello stile del livello.
Applicare Inner Glow (Inner Glow) e Stroke (Stroke), quindi inserire i parametri mostrati nelle illustrazioni seguenti.
Passaggio 3
Riseleziona il rettangolo arrotondato blu creato nel passaggio precedente e duplicalo: Control + J. Seleziona la copia, rendila bianca e passa allo strumento Rettangolo. Fai clic sul pulsante Interseca nella barra degli strumenti in alto e disegna un contorno vettoriale di 120x40 px come mostrato nella seconda immagine qui sotto.
Torniamo alla tavolozza dei livelli. Fare clic con il pulsante destro del mouse sul contorno bianco creato nel passaggio precedente e selezionare "Copia stile livello". Quindi, fai clic con il pulsante destro del mouse sul contorno bianco creato all'inizio di questo passaggio e seleziona "Incolla stile livello" (Incolla stile livello).
Passaggio 4
Seleziona lo strumento testo e digita il testo come mostrato nell'immagine seguente. Imposta il colore del testo su #a1d8ff , quindi apri la finestra dello stile del livello e inserisci le impostazioni mostrate nelle immagini seguenti:
Passaggio 5
Tornando al rettangolo arrotondato blu creato nel secondo passaggio, apri la finestra Stile livello e inserisci le impostazioni di seguito. Duplica questa forma: Control + J, seleziona la copia, apri di nuovo la finestra dello stile del livello e applica Shadow (Drop Shadow) con le impostazioni di seguito. Seleziona tutte le forme create finora e raggruppale: Control + G. Questo sarà il tuo menu a tendina chiuso. Nell'ultimo passaggio, lo perfezioneremo un po' di più.
Passaggio 6
Torniamo alla tavolozza dei livelli. Fare clic con il pulsante destro del mouse sul gruppo creato nel passaggio precedente e selezionare Duplica gruppo. Seleziona il gruppo appena creato, trascinalo sotto e posizionalo come mostrato nell'immagine sottostante.
Passaggio 7
Continuiamo a lavorare con il gruppo creato nel passaggio precedente. Prima di tutto, devi modificare il testo qui. Cambia il colore in # b4b4b4, quindi fai clic con il pulsante destro del mouse (nella tavolozza dei livelli) e seleziona "Cancella stile livello". Apri la finestra dello stile del livello e applica al testo grigio Ombra (Ombra esterna) con le impostazioni di seguito.
Passaggio 8
Imposta il colore di primo piano su # f5f5f5, seleziona lo strumento Rettangolo arrotondato e imposta il Raggio su 20 px. Crea un percorso vettoriale di 160x35 px, posizionalo come mostrato nella prima immagine qui sotto, quindi duplicalo: Control + J. Seleziona il duplicato e rendilo bianco. Passa allo strumento Rettangolo, fai clic sul pulsante Interseca nella barra degli strumenti in alto e disegna un percorso vettoriale 40x35 px come mostrato nella seconda immagine qui sotto.
Andiamo alla tavolozza dei livelli. Riduci l'opacità del riempimento (Riempimento) di questo contorno allo 0%, quindi, aprendo la finestra dello stile del livello, applica le impostazioni mostrate nelle immagini seguenti:
Passaggio 9
Riseleziona il rettangolo arrotondato creato all'inizio del passaggio precedente e duplicalo (Control + J). Seleziona la copia, spostala in primo piano: Shift + Control + ], riduci l'opacità del riempimento (Riempimento) allo 0%, apri la finestra dello stile del livello e inserisci le seguenti impostazioni:
Passaggio 10
Riseleziona il secondo percorso creato nel passaggio 8 e duplicalo: Control + J. Seleziona la copia, portala in primo piano: Shift + Control + ]. Quindi, apri la finestra dello stile del livello e regola le impostazioni dello stile del livello dell'ombra come mostrato di seguito.
Passaggio 11
Trattiamo il lato destro delle forme create nel processo di completamento degli ultimi passaggi. Imposta il colore di primo piano su #ebebeb, seleziona lo strumento Rettangolo, crea un percorso vettoriale 10x15 px e posizionalo come mostrato nella prima immagine qui sotto. Seleziona questo piccolo rettangolo. Fai clic sul pulsante Aggiungi alla selezione nella barra delle opzioni in alto e disegna un altro percorso vettoriale 10x15 come mostrato nella seconda immagine qui sotto. Assicurati che l'ultimo percorso creato sia ancora attivo, premi Control + T, ruotalo di 45 gradi e premi Invio.
Andiamo alla tavolozza dei livelli. Tieni premuto Ctrl e fai clic sulla miniatura del livello del percorso vettoriale creato nel passaggio precedente. Di conseguenza, verrà caricata la sua selezione inattiva. Ora seleziona lo strumento di selezione (Strumento di selezione) e assicurati che il livello con il contorno vettoriale - la freccia - sia attivo.
Fai clic sui pulsanti "Allinea centri verticali" e "Allinea centri orizzontali" nella barra delle opzioni in alto per allineare la freccia come mostrato nella quinta immagine qui sotto. Quindi, apri la finestra dello stile del livello e applica i seguenti stili con le impostazioni seguenti.
Passaggio 12
Seleziona uno strumento Testo (Strumento testo) e digita un testo semplice come mostrato nell'immagine qui sotto. Imposta il colore su # b4b4b4, quindi apri la finestra dello stile del livello e applica l'Ombra con le impostazioni mostrate nell'immagine. Seleziona questo nuovo testo con gli elementi creati negli ultimi quattro passaggi e raggruppalo tutto: Control + G.
Passaggio 13
Crea altre quattro copie dell'ultimo gruppo creato. Disporre i nuovi gruppi come mostrato di seguito e modificare le etichette.
Passaggio 14
Prestare attenzione alla sottovoce di menu, da me indicata come “Tutorial”, aprire la finestra degli stili di livello in relazione alla forma della freccia ed inserire i seguenti parametri:
Passaggio 15
Seleziona il testo "Tutorial" e cambia il suo colore in # 2c95dd. Seleziona anche il rettangolo grigio arrotondato sotto il testo, apri la finestra dello stile del livello, applica Sovrapposizione sfumatura (Sovrapposizione sfumatura) con le impostazioni seguenti.
Passaggio 16
Per completare i passaggi finali, abbiamo bisogno di una griglia con una dimensione della cella di 1 pixel. Quindi, vai nel menu Modifica> Impostazioni> Guide, Griglia e Frammenti (Modifica> Preferenze> Guide, Griglia e Slice) e inserisci il valore 1 nel campo "Linea ogni..." (Griglia ogni). Imposta il Colore di primo piano su # a1d8ff, seleziona lo strumento Rettangolo, crea un quadrato di 6px e posizionalo come mostrato nella prima immagine qui sotto. Quindi, seleziona lo strumento di selezione diretta e presta attenzione alla parte inferiore del percorso vettoriale creato. Seleziona il punto di ancoraggio giusto e spostalo di 3px a sinistra. Passa allo strumento Elimina punto di ancoraggio e fai clic sul punto di ancoraggio inferiore rimanente per eliminarlo. Di conseguenza, il tuo quadrato dovrebbe trasformarsi in un triangolo!
Immagine finita
