Contenuti
Fase 1: Iniziare
Google Web Designer è un ambiente di sviluppo gratuito per i webmaster che offre la possibilità di creare pagine web, inclusi singoli elementi come banner, utilizzando CSS3 e HTML5. Per utilizzare questo strumento, prima di tutto, è necessario scaricare il file di installazione dal sito ufficiale ed eseguire l’installazione.
Scarica Google Web Designer dal sito ufficiale
Installazione del programma
- Cliccare sul link qui sopra per andare alla pagina principale del software e cliccare su “Download Web Designer”. Tenere presente che il programma supporta solo Windows 7 e versioni successive.
- Attraverso la finestra pop-up “Salva”, selezionate un posto sul vostro computer e utilizzate il pulsante contrassegnato sul pannello inferiore.
- Navigare fino alla cartella con il file appena salvato e fare doppio clic con il tasto sinistro del mouse per aprirla. Di conseguenza, la finestra di installazione dovrebbe aprirsi.
La stessa procedura di installazione viene eseguita in modalità completamente automatica, salvando tutti i file di lavoro nella directory con altri programmi sul drive di sistema.
Autorizzazione
- Se volete salvare progetti sul web o in generale creare un banner specifico per i servizi interni di Google, vale la pena di autorizzare anche questo. Per fare ciò, lanciare il programma utilizzando l’apposita icona, chiudere la finestra di benvenuto e cliccare sul pulsante “Accedi” nel pannello superiore.
- Specificare i dati del proprio account Google, premere “Avanti” e, se necessario, confermare. L’account sarà quindi aggiunto subito, senza bisogno di impostazioni separate.
Modifica impostazioni
- Dopo aver sistemato i preparativi, è ora consigliabile apportare modifiche alle impostazioni di base del software per facilitare il lavoro in futuro. Utilizzare il pannello superiore per espandere il menu “Modifica” e selezionare la sezione “Impostazioni” alla fine della lista.
- Nella scheda “Basic” è possibile modificare il comportamento iniziale del programma per aprire rapidamente i progetti, assegnare una cartella per salvare i modelli creati e impostare valori predefiniti per la variazione dell’annuncio al momento della creazione.
- La pagina successiva “Modalità di visualizzazione del layout” contiene le impostazioni dell’aspetto dell’editor. Modificando le impostazioni presentate, è possibile modificare la griglia e il binding degli oggetti per un posizionamento più accurato degli elementi.
- Google Web Designer ha un editor di codici con le proprie impostazioni. Ad esempio, nella scheda “Modalità di visualizzazione del codice” è possibile assegnare uno stile di progettazione, impostare le opzioni di formattazione e aggiungere legature chiave ai compiti.
- L’ultimo tab “Advanced” contiene solo due parametri – “Logging” e “Application Scale“. Nel primo caso, abilitandolo si crea un registro delle modifiche, mentre il secondo elemento permette di impostare una nuova scala di default per l’area di lavoro dell’editor.
Fate attenzione! Se si imposta una scala troppo grande, possono apparire problemi di mancanza di spazio sullo schermo per elementi importanti.
Qualsiasi modifica apportata richiede in qualche modo il riavvio del programma. Se avete appena iniziato con l’editor, non dimenticate la possibilità di reimpostare le impostazioni utilizzando la voce separata di ogni scheda.
Passo 2: Creare un banner
Dopo aver impostato il programma, potete iniziare a lavorare sul vostro banner utilizzando tutte le funzionalità di Google Web Designer. Tuttavia, si prega di notare che questo strumento agisce solo come editor visuale, consentendo di inserire solo elementi già pronti che vengono creati separatamente, ad esempio, in Photoshop.
Leggi anche: Creazione di un banner in Adobe Photoshop
Preparazione del layout
- Per creare un nuovo progetto, utilizzare il link “Crea file” nella finestra di avvio. Per riaprirlo potete utilizzare la voce “Nuovo” del menu “File“.
- Selezionate “Banner” nel blocco “Annunci” e compilate il campo principale “Titolo” senza il quale non potete salvare. È anche possibile specificare la posizione del progetto da preparare.
- Utilizzare l’elenco a discesa “Contesto” per impostare una delle opzioni a seconda dell’applicazione futura del banner. La risoluzione stessa può essere modificata con il menu “Dimensioni”.
Se necessario, è possibile regolare le dimensioni del layout da soli.
Per
fare questo, impostare l’opzione “Custom”
e specificare la risoluzione desiderata.
Selezionando “Adaptive Layout” potresti non curarti delle dimensioni, in quanto il tuo annuncio verrà allungato per adattarsi al blocco padre dopo che sarà stato aggiunto al sito web.
- Le opzioni di impostazione possono essere espanse selezionando un’altra scheda, sia “Espansione” che “Pagina incrociata“. Non prenderemo in considerazione queste opzioni, perché il layout standard è sufficiente come esempio.
A parte questo, si noti che “AMPHTML Banner” dovrebbe essere utilizzato se si desidera adattare i propri annunci per i dispositivi mobili. Questo velocizzerà il caricamento degli annunci, ma allo stesso tempo bloccherà alcune funzionalità dell’editor.
Lavorare con gli strumenti
- Dopo aver preparato il layout, è necessario familiarizzare con gli strumenti. Nel pannello superiore, la lista “Visualizza” merita la vostra attenzione, poiché vi permette di attivare o disattivare gli elementi ausiliari.
- Attraverso il menu “Finestra” è possibile disattivare temporaneamente uno o l’altro elemento di interfaccia. Ad esempio, se si vuole fare un banner statico, “Timeline” si metterà solo in mezzo, e quindi è meglio deselezionarlo.
- Gli strumenti principali dell’editor sono presentati nella colonna di sinistra. Non prenderemo in considerazione tutte le opzioni, perché non tutti gli elementi vengono utilizzati quando si crea un banner, ma si consiglia di sperimentare per conto proprio.
- Accanto alla barra degli strumenti, è possibile trovare l’Ad Inspector con diverse schede. La sezione Eventi dove si possono impostare le azioni che si vogliono eseguire con un certo oggetto banner e la sezione CSS dove si possono impostare le opzioni di stile meritano particolare attenzione.
- Nella parte destra del programma c’è anche un set di strumenti che permette di controllare il colore, il testo, la struttura dell’oggetto, le proprietà e semplicemente i livelli. Come il set di funzioni di base, le finestre sono meglio esplorate da sole mentre si costruisce il progetto.
- Se necessario, è possibile creare un banner animato con l’aiuto della Timeline. In questo caso, usare la barra spaziatrice e il LKM per controllare l’area principale dell’editor e il blocco con i parametri della scala.
Riempimento del layout
- La creazione di un banner inizia sempre dallo sfondo, quindi dopo aver preparato un layout, aprire la scheda “Proprietà” e utilizzare la sottosezione “Riempimento” nel blocco ” Pagina”. Qui è possibile impostare qualsiasi colore, compreso un gradiente o uno sfondo completamente trasparente.
- Successivamente nell’ordine è necessario aggiungere elementi grafici preparati in anticipo. Potete farlo nella scheda “Libreria di oggetti” cliccando sull’icona “+” sul pannello inferiore.
- Selezionare i file grafici necessari e cliccare su “Apri“. È possibile farlo sia per tutti i livelli richiesti in una sola volta, sia separatamente, ripetendo i passaggi sopra descritti.
- Per posizionarla, cliccare sull’immagine desiderata nella scheda “Libreria di oggetti ” e trascinarla nell’area principale dell’editor.
È possibile controllare il posizionamento dell’oggetto tramite normale trascinamento e scalatura con lo strumento di selezione attivo. È sempre possibile utilizzare le guide in base alle esigenze.
- Selezionando un file immagine nell’area di lavoro o nella scheda Texture Editor, aprire Properties. Qui avete molte più opzioni che per lo sfondo, come le impostazioni dei bordi o la dentellatura.
- Se il design del vostro banner include del testo, potete aggiungere un elemento di testo utilizzando lo strumento standard di Google Web Designer. Cliccate sull’icona “T” nel riquadro a sinistra, cliccate nella finestra principale dell’editor e digitate il set di caratteri desiderato.
Per controllare il testo, selezionare il livello nella scheda “Structure Editor”, espandere “Testo” e impostare i parametri appropriati.
Regolazione dell’animazione
- Nel blocco “Timeline” è possibile aggiungere e regolare gli effetti di animazione. Cliccate prima di tutto sul pulsante “Aggiungi icona” con l’icona “+”.
- Cliccare l’icona “.5s” tra le cornici e impostare i parametri desiderati. Ad esempio, è possibile modificare la durata e lo stile della transizione.
- Ogni singolo blocco della Timeline è completamente indipendente dagli altri. Per creare animazioni, modificare alcuni elementi come si ritiene opportuno e controllare il risultato con il pulsante play.
Una volta completato il processo di modifica, utilizzare il pulsante Repeat. Questo creerà un’animazione senza fine.
Aggiunta di eventi
- Ora che avete capito il layout, potete aggiungere eventi di transizione per i singoli elementi o l’intero banner. Per farlo, aprire la scheda Eventi nella colonna Ispettore annunci e fare clic sul segno + nel pannello inferiore.
- Nella finestra che si aprirà, selezionare un oggetto dalla lista “Target” per fungere da link.
- Nella pagina “Evento”, espandere il “Mouse” e selezionare “clicca”. A seconda delle esigenze del risultato, è possibile combinare diverse impostazioni.
- Successivamente, dalla lista “Azione”, aprire “Google A ds” e impostarlo su “Salta“. Questa scelta vi permetterà di far andare l’utente alla pagina specifica che desiderate sul web.
- Come “Destinatario” selezionare l’unica opzione presentata “gwd-ad”.
- Nell’ultimo passo impostare il link alla scorciatoia nel campo “Indicator ID” e compilare l ‘”URL” specificando la pagina desiderata. Per salvare utilizzare “OK“.
Lavorare con il codice sorgente
- Come abbiamo detto, Google Web Designer contiene un editor di codice integrato. È possibile abilitarlo utilizzando il pulsante “Codice” sul lato destro del pannello superiore.
- È possibile apportare modifiche alla struttura dei banner, non solo utilizzando l’editor visuale, ma anche lavorando direttamente con il codice nel file di progetto. Questo può essere molto utile quando si allineano molti piccoli elementi o si aggiungono eventi non previsti dal programma.
Le azioni descritte dovrebbero essere sufficienti per creare un banner indipendentemente dall’applicazione. Allo stesso tempo, è possibile ampliare notevolmente le possibilità combinando questi strumenti.
Fase 3: Finitura
Quando il banner è completo e pronto per essere posizionato sul sito, si può passare all’ultimo passo. La prima cosa da fare è controllare l’aspetto del vostro lavoro sulla pagina web vera e propria.
Anteprima
- Nel pannello superiore, cliccare sul pulsante “Anteprima” per aprire un ulteriore menu. Qui è possibile specificare il browser che verrà utilizzato per aprire il banner.
- Una volta aperto, tutte le funzioni e l’aspetto del banner sono conservati, ma con alcune peculiarità. Ad esempio, anche se avete impostato l’animazione in modo che si ripeta all’infinito, qui tutto sarà limitato ad una sola iterazione.
- Se ne avete bisogno, potete sempre mostrare il risultato ad altre persone. Per farlo, selezionare “Get sharing link” e confermare l’accesso dell’app al proprio account Google.
Di conseguenza, sullo schermo apparirà un link per visualizzare il banner in questa modalità, come detto sopra. Naturalmente, questo è possibile solo se si dispone di un conto.
Salvataggio e pubblicazione
- Per salvare il vostro progetto, aprite prima il menu file e utilizzate l’opzione “Salva”. Il file originale sarà quindi salvato sul vostro computer e potrà essere aperto in seguito.
- È possibile preparare il progetto da inserire sul sito web aprendo il menu “Pubblica” nell’angolo in alto a destra del programma e selezionando una delle posizioni di salvataggio.
- Modificate le impostazioni nella finestra di pubblicazione a vostro piacimento, lasciando solo le spuntature desiderate e cliccate su “Pubblica”. Il risparmio in questo modo è rapido indipendentemente dalle dimensioni del progetto.
La cartella risultante si trova nel luogo di salvataggio. La collocazione del banner sul sito è diversa a seconda del sito e in generale non è più rilevante per la procedura di creazione.