Creare un banner su Google Web Designer

Passaggio 1: iniziare

Google Web Designer è un ambiente di sviluppo gratuito per i webmaster che fornisce 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 e installare.

Scarica Google Web Designer dal sito ufficiale

Installazione del programma

1. Fare clic sul collegamento presentato sopra per andare alla pagina Now e fare clic sul pulsante "Download Web Designer". Si noti che il programma supporta solo versioni Windows 7 e successive.



2. Attraverso la finestra Salva pop-up, selezionare un posto sul computer e utilizzare il pulsante contrassegnato sul pannello inferiore.



3. Vai alla cartella con appena salvato il file e fai doppio clic sul pulsante sinistro del mouse per eseguire l'apertura. Di conseguenza, dovrebbe essere aperta la finestra di installazione.

   

   La procedura di installazione stessa viene eseguita in modalità completamente automatica, salvando tutti i file di lavoro nella directory con altri programmi sul disco di sistema.

Autorizzazione

1. Se si desidera salvare i progetti su Internet o in generale, creare un banner specificamente per i servizi interni di Google, vale anche la pena eseguire l'autorizzazione. Per fare ciò, eseguire il programma utilizzando l'icona appropriata, chiudere la finestra di benvenuto e fare clic sul pulsante "Login" sul pannello superiore.



2. Specificare i dati da Google Account, fare clic su "Avanti" e confermare se necessario. Successivamente, l'account verrà immediatamente aggiunto, senza richiedere alcune impostazioni individuali.

Modifica delle impostazioni

1. Avendo capito con la preparazione, ora è auspicabile apportare modifiche alle impostazioni di base del software per facilitare il lavoro in futuro. Usando il pannello superiore, espandere il menu Modifica e selezionare "Impostazioni" alla fine dell'elenco.



2. Nella scheda "principale", è possibile modificare il comportamento iniziale del programma per aprire rapidamente i progetti, assegnare una cartella per salvare i modelli creati, nonché impostare i valori predefiniti per la specifica dell'annuncio durante la creazione.



3. La seguente pagina "Layout View Mode" contiene i parametri di aspetto dell'editor. Modifica delle impostazioni presentate, è possibile regolare gli oggetti griglia e rilegatura per un posizionamento più accurato degli elementi.



4. Google Web Designer ha un editor di codice con le sue impostazioni. Pertanto, sulla scheda "Visualizzatore codice", è possibile assegnare lo stile di progettazione, impostare i parametri di formattazione e aggiungere legami chiave alle attività.



5. L'ultima scheda "Extended" contiene solo due parametri - "Logging" e "Bilancia dell'applicazione". Nel primo caso, l'inclusione creerà un registro di modifica, mentre il secondo elemento consente di impostare una nuova scala standard per l'area di lavoro dell'Editor.

   Stai attento! Se si impostano troppa scala, potrebbero essere visualizzati problemi con una mancanza di spazio sullo schermo per gli elementi importanti.

Eventuali modifiche apportate in qualche modo o altro richiedono un riavvio del programma. Se si inizia a lavorare con l'editor, non dimenticare la possibilità di reimpostare le impostazioni utilizzando un elemento separato su ciascuna schede.

Passaggio 2: creazione di un banner

Configurando il programma, è possibile iniziare a lavorare sul banner utilizzando tutte le opzioni per Google Web Designer. Tuttavia, notare che questo rimedio è esclusivamente come editor visivo, consentendo di postare solo elementi già pronti creati separatamente, ad esempio, in Photoshop.

Lavora con gli strumenti

1. Dopo aver preparato il layout, è necessario conoscere gli strumenti. Sul pannello superiore dell'attenzione principale, la lista "View" merita, consentendo di abilitare e disabilitare gli elementi ausiliari.



2. Attraverso il menu "Finestra", è possibile disabilitare temporaneamente un particolare elemento di interfaccia. Ad esempio, se si desidera creare un banner statico, la "Timeline" interferirà solo, e quindi è meglio rimuovere il segno di spunta appropriato.



3. I principali strumenti dell'editor sono presentati nella colonna di sinistra. Non prenderemo in considerazione ogni opzione, poiché non tutti gli articoli vengono utilizzati durante la creazione, tuttavia, consigliamo di sperimentare te stesso.



4. Accanto alla barra degli strumenti è presentato "annunci annuncianti" con diversi contributi. Attenzione speciale merita "Eventi" responsabile per l'azione con uno o un altro oggetto banner, e "CSS", dove sono impostati i parametri di stile.



5. La parte giusta del programma ha anche un set di strumenti che ti consente di controllare il colore, il testo, la struttura di oggetti, proprietà e semplicemente strati. Come il set principale di funzioni, le finestre sono meglio studiare in modo indipendente nel processo di creazione di un progetto.



6. Se necessario, l'utilizzo della "Timeline" può essere creato un banner animato. Allo stesso tempo, per gestire l'area principale dell'editor, utilizzare uno spazio di serraggio e LCM, nonché un blocco con parametri di scala.

Riempiendo un layout.

1. La creazione di un banner inizia sempre con lo sfondo, e pertanto, dopo aver preparato un layout, aprire la scheda "Proprietà" e nel blocco della pagina, utilizzare la sottosezione "Riempimento". È abbastanza possibile installare qualsiasi colore, incluso un gradiente o uno sfondo completamente trasparente.



2. Inoltre, nella coda, aggiungi elementi grafici preparati in anticipo. Puoi farlo nella scheda Libreria Object Biblioteca facendo clic sull'icona "+" sul pannello inferiore.



3. Seleziona i file grafici desiderati e fare clic su Apri. Questo può essere fatto sia subito per tutti i livelli necessari, e separatamente, ripetendo queste azioni.



4. Per accogliere, morseggiare l'immagine desiderata nella scheda Libreria oggetto e trascinare l'editor nell'area principale.

   

   È possibile controllare la posizione dell'oggetto con solita trascinamento e ridimensionamento con uno strumento di selezione attivo. Se necessario, è sempre possibile utilizzare le guide.



5. Selezionando un file grafico nello spazio di lavoro o nella scheda Editor strutturale, apri le "Proprietà". Esiste molto più di più possibilità che nel caso del background, ad esempio, le impostazioni di confine o i rientri.



6. Se il design del banner prevede la presenza del testo, è possibile aggiungere l'elemento appropriato utilizzando lo strumento standard Google Web Designer. Fare clic sull'icona "T" sul riquadro di sinistra, fare clic sulla finestra Editor principale e inserire il set di caratteri desiderato.

   

   Per controllare il testo, selezionare il livello sulla scheda "Editor strutturale", espandere il "Testo" e impostare i parametri appropriati.

Impostazione dell'animazione

1. Nel blocco "Timeline", è possibile aggiungere e configurare gli effetti dell'animazione. Per iniziare, fare clic sul pulsante "Aggiungi icona" con l'icona "+".



2. Fare clic sull'icona ".5s" tra i fotogrammi e impostare i parametri necessari. Ad esempio, è possibile modificare la durata e lo stile della transizione.



3. Ogni singolo blocco sulla "Timeline" è completamente indipendente dagli altri. Per creare animazioni, modificare alcuni elementi a tua discrezione e controllare il risultato utilizzando il pulsante PLAY.

   

   Dopo aver completato il processo di modifica, utilizzare il pulsante Ripeti. Questo creerà un'animazione infinita.

Aggiunta di eventi

1. Avendo capito con il layout, è necessario aggiungere eventi di transizione per singoli elementi o l'intero banner nel suo complesso. Per eseguire questa operazione, nella colonna Ispettore del settore, aprire la scheda Eventi e fare clic sull'icona "+" sul pannello inferiore.



2. Nella finestra che si apre dall'elenco "Scopo", selezionare un oggetto che verrà referenziale.



3. Nella pagina dell'evento, espandere la pagina "Mouse" e selezionare "Fai clic". A seconda dei requisiti per il risultato, è possibile combinare installazioni diverse.



4. Inoltre dall'elenco "Azione", apri la Dichiarazione di Google e impostare il valore "Transition". Tale scelta lo farà in modo che l'utente vada alla pagina specifica di cui hai bisogno su Internet.



5. Come "destinatario", seleziona una singola versione "GWD-AD".



6. All'ultimo stadio nel campo "Identif. Indicatori »Controllare il collegamento alla scorciatoia e compila" URL "specificando la pagina desiderata. Utilizzare "OK" per salvare.

Lavora con il codice sorgente

1. Come abbiamo detto, Google Web Designer contiene un editor di codice integrato. Può essere abilitato utilizzando il pulsante "Codice" sul lato destro del pannello superiore.



2. È possibile apportare modifiche alla struttura banner usando non solo l'editor visivo, ma anche il lavoro direttamente con il codice nel file del progetto. Questo può essere molto utile quando si allinea una moltitudine di piccoli elementi o aggiungi eventi non forniti dal programma.

Le azioni descritte dovrebbero essere abbastanza da creare un banner, indipendentemente dall'applicazione. Allo stesso tempo, è possibile espandere significativamente le funzionalità combinando questi strumenti.

Passaggio 3: Completamento

Quando il banner è completato e pronto per il posizionamento sul sito, puoi andare all'ultimo passaggio. Prima di tutto, vale la pena controllare come appare il tuo lavoro sulla vera pagina web.

Anteprima

1. Sul pannello superiore, fare clic sul pulsante Anteprima per aprire il menu aggiuntivo. Qui è possibile specificare il browser con cui verrà aperto il banner.



2. Quando si apre tutte le funzioni e l'aspetto del banner viene conservato, ma con alcune funzionalità. Ad esempio, anche se hai installato una ripetizione infinita dell'animazione, tutto sarà limitato qui solo una iterazione.



3. Se necessario, puoi sempre dimostrare il risultato ad altre persone. Per fare ciò, selezionare "Ottieni un collegamento di condivisione" e confermare l'accesso all'account Google.

   

   Di conseguenza, un collegamento apparirà sullo schermo per visualizzare il banner in modo tale come descritto sopra. Certo, è possibile solo se hai un account.

Conservazione e pubblicazione

1. Per salvare il progetto, aprire prima il menu File e utilizzare l'opzione Salva. Successivamente, il file sorgente verrà salvato sul computer e può essere aperto successivamente.



2. È possibile preparare un progetto da posizionare sul sito aprendo il menu "Pubblica" nell'angolo in alto a destra del programma e selezionando una delle posizioni del salvataggio.



3. Modificare i parametri nella finestra di pubblicazione a tua discrezione, lasciando solo le caselle di controllo desiderate e fare clic su "Pubblica". Il salvataggio avviene quindi rapidamente indipendentemente dalle dimensioni del progetto.

   

   Di conseguenza, la cartella può essere trovata nel luogo di salvataggio. Il posizionamento del banner sul sito differisce nella dipendenza del sito e in generale non appartiene più alla procedura di creazione.