Vytvoření banneru na Google Web Designer

Krok 1: Začínáme

Google Web Designer je bezplatné vývojové prostředí pro webmastery poskytující schopnost vytvářet webové stránky, včetně jednotlivých položek, jako jsou bannery pomocí CSS3 a HTML5. Chcete-li použít tento nástroj, nejprve je třeba stáhnout instalační soubor z oficiální stránky a instalovat.

Stáhněte si aplikaci Google Web Designer z oficiální stránky

Instalace programu

1. Klikněte na odkaz, který je uveden výše, přejděte na stránku Now a klepněte na tlačítko "Stáhnout web designer". Všimněte si, že program podporuje pouze Windows 7 a novější verze.



2. Prostřednictvím vyskakovacího okna Uložit vyberte místo v počítači a pomocí tlačítka označeného na spodním panelu.



3. Přejděte do složky s právě uloženým souborem a poklepejte na levé tlačítko myši pro provedení otvoru. V důsledku toho by mělo být otevřeno instalační okno.

   

   Samotný postup instalace se provádí v plně automatickém režimu, ukládání všech pracovních souborů do adresáře s jinými programy na systémovém disku.

Povolení

1. Pokud chcete uložit projekty na internetu nebo obecně vytvořit banner speciálně pro interní služby společnosti Google, dodatečně stojí za to provádět povolení. Chcete-li to provést, spusťte program pomocí příslušné ikony, zavřete uvítací okno a klepněte na tlačítko "Přihlášení" na horním panelu.



2. Zadejte data z účtu Google, klepněte na tlačítko "Další" a v případě potřeby potvrďte. Poté bude účet okamžitě přidán bez nutnosti určité individuální nastavení.

Změna nastavení

1. Po pochopení přípravkem je nyní žádoucí provádět změny základních nastavení softwaru pro usnadnění práce v budoucnu. Pomocí horního panelu rozbalte nabídku Úpravy a vyberte "Nastavení" na konci seznamu.



2. Na kartě "Hlavní" můžete změnit počáteční chování programu rychle otevřít projekty, přiřadit složku pro uložení vytvořených šablon, stejně jako nastavit výchozí hodnoty pro specifikaci oznámení při vytváření.



3. Následující stránka "Režim zobrazení rozvržení" obsahuje parametry vzhledu editoru. Změna prezentované nastavení, můžete nastavit mřížky a vazebné objekty pro přesnější umístění prvků.



4. Web Designer Google má editor kódu s jeho nastaveními. Na kartě "Prohlížeč kód" můžete přiřadit styl návrhu, nastavit parametry formátování a přidat klíčové vazby na úkoly.



5. Poslední karta "Extended" obsahuje pouze dva parametry - "Protokolování" a "aplikační měřítko". V prvním případě se začlenění vytvoří protokol změny, zatímco druhá položka umožňuje nastavit novou standardní měřítko pro pracovní plochu editoru.

   Buď opatrný! Pokud nastavíte příliš mnoho stupnice, problémy s nedostatkem prostoru na obrazovce se mohou objevit pro důležité položky.

Jakékoli změny provedené způsoby nebo jiné vyžadují restart programu. Pokud právě začnete pracovat s editorem, nezapomeňte na možnost resetování nastavení pomocí samostatné položky na každém z karet.

Krok 2: Vytvoření banneru

Konfigurací programu můžete začít pracovat na banneru pomocí všech možností pro služby Google Web Designer. Všimněte si však, že tento opravný prostředek je výhradně jako vizuální editor, což vám umožní odeslat pouze hotové prvky, které jsou vytvořeny samostatně, například v aplikaci Photoshop.

Práce s nástroji

1. Po přípravě rozložení se musíte seznámit s nástroji. Na horním panelu hlavní pozornosti, seznam "Zobrazit" si zaslouží, což umožňuje povolit a vypnout pomocné prvky.



2. Prostřednictvím nabídky "Okno" můžete dočasně zakázat konkrétní prvek rozhraní. Pokud například chcete vytvořit statický banner, "časová osa" pouze zasahovat, a proto je nejlepší odstranit příslušné klíště.



3. Nástroje pro hlavní editor jsou uvedeny v levém sloupci. Nezvažujeme každou možnost, protože ne všechny položky se používají při vytváření, nicméně doporučujeme experimentovat sami.



4. Vedle panelu nástrojů je prezentován "oznamovací reklamy" s několika příspěvky. Zvláštní pozornost si zaslouží "události" zodpovědný za akci s jedním nebo jiným objektu banneru a "CSS", kde jsou nastaveny parametry stylu.



5. Správná část programu má také sadu nástrojů, které vám umožní ovládat barvu, text, strukturu objektů, vlastností a jednoduše vrstev. Stejně jako hlavní sada funkcí jsou okna lepší studovat nezávisle v procesu vytváření projektu.



6. Pokud je to nutné, pomocí "časové osy" lze vytvořit animovaný banner. Současně spravovat hlavní oblast editoru použijte upínací prostor a LCM, stejně jako blok s parametry měřítka.

Vyplnění rozložení

1. Vytvoření banneru vždy začíná s pozadím, a proto po přípravě rozvržení otevřete kartu "Vlastnosti" a v bloku stránky použijte pododdíl "Fill". Je docela možné nainstalovat jakoukoliv barvu, včetně gradientu nebo plně průhledného pozadí.



2. Dále ve frontě přidejte grafické prvky připravené předem. Na kartě Knihovna objektů můžete provést klepnutím na ikonu "+" na spodním panelu.



3. Vyberte požadované grafické soubory a klepněte na tlačítko Otevřít. To lze provést jak najednou pro všechny nezbytné vrstvy, a odděleně opakovat tyto akce.



4. Chcete-li přizpůsobit požadovaný snímek na kartě Knihovna objektů a přetáhněte editor do hlavní oblasti.

   

   Umístění objektu můžete řídit obvyklým přetažením a měřítkem nástrojem Active Selection Tool. V případě potřeby můžete vždy používat vodítka.



5. Výběrem grafického souboru v pracovním prostoru nebo na kartě Strukturální editor otevřete "Vlastnosti". Existuje mnohem více než více možností než v případě pozadí, například nastavení hranic nebo odrážek.



6. Pokud návrh bannerů zajišťuje přítomnost textu, můžete přidat příslušnou položku pomocí standardního nástroje Google Web Designer. Klikněte na ikonu "T" na levém podokně, klikněte na okno Hlavní editor a zadejte požadovanou sadu znaků.

   

   Chcete-li text ovládat, vyberte vrstvu na kartě "Strukturální editor", rozbalte položku "Text" a nastavte příslušné parametry.

Nastavení animace

1. V bloku "Časová osa" můžete přidat a konfigurovat efekty animace. Chcete-li spustit, klepněte na tlačítko "Přidat ikonu" pomocí ikony "+".



2. Klikněte na ikonu ".5S" mezi rámečky a nastavte parametry, které potřebujete. Můžete například změnit dobu trvání a styl přechodu.



3. Každý jednotlivý blok na "časové ose" je zcela nezávislý na druhých. Chcete-li vytvořit animace, změňte některé položky k diskreční pravomoci a zkontrolujte výsledek pomocí tlačítka Přehrávání.

   

   Po dokončení procesu úprav použijte tlačítko opakování. To vytvoří nekonečnou animaci.

Přidání událostí

1. Po pochopení s dispozicí, musíte přidat přechodové události pro jednotlivé prvky nebo celý banner jako celek. Chcete-li to provést, v sloupci sektor inspektor otevřete kartu Události a klepněte na ikonu "+" na spodním panelu.



2. V okně, které se otevře z seznamu "Účel", vyberte objekt, který bude odkazován.



3. Na stránce Událost rozbalte stránku "Myš" a vyberte možnost "Click". V závislosti na požadavcích na výsledek můžete kombinovat různé instalace.



4. Dále od seznamu "Akce" otevřete deklaraci Google a nastavte hodnotu "Přechod". Taková volba to udělá tak, že uživatel přejde na konkrétní stránku, kterou potřebujete na internetu.



5. Jako "příjemce" vyberte jednu verzi "GWD-AD".



6. V poslední fázi v poli "Identif. Indikátory »Zkontrolujte odkaz na zástupce a vyplňte" URL "zadáním požadované stránky. Použijte "OK" pro uložení.

Práce se zdrojovým kódem

1. Jak jsme zmínili, Web Designer Google obsahuje vestavěný editor kódu. Lze jej aktivovat pomocí tlačítka "Code" na pravé straně horní panelu.



2. Můžete provést změny struktury bannerů pomocí nejen vizuálního editoru, ale také přímo pracovat s kódem v souboru projektu. To může být velmi užitečné při vyrovnání mnoha malých prvků nebo přidat události, které program neposkytuje.

Popsané akce by měly být dostačující k vytvoření banneru, bez ohledu na aplikaci. Současně můžete výrazně rozšířit možnosti kombinací těchto nástrojů.

Krok 3: Dokončení

Když je banner dokončen a připraven k umístění na webu, můžete jít do posledního kroku. Za prvé, to stojí za to kontrolovat, jak vypadá vaše práce na skutečné webové stránce.

Náhled

1. Na horním panelu klepněte na tlačítko Náhled otevřete další nabídku. Zde můžete určit prohlížeč, se kterými bude banner otevřen.



2. Při otevírání všech funkcí a vzhled banneru je zachován, ale s některými funkcemi. Například, i když jste nainstalovali nekonečný opakování animace, vše bude omezené zde pouze jedna iterace.



3. V případě potřeby můžete vždy prokázat výsledek ostatním lidem. Chcete-li to provést, vyberte možnost "Získat odkaz sdílení" a potvrďte přístup k účtu Google.

   

   V důsledku toho se na obrazovce objeví odkaz, který zobrazí banner v takovém režimu, jak je popsáno výše. Samozřejmě je možné pouze v případě, že máte účet.

Uchování a publikace

1. Chcete-li projekt uložit, nejprve otevřete nabídku Soubor a použijte možnost Uložit. Poté bude zdrojový soubor uložen v počítači a může být otevřen následně.



2. Můžete připravit projekt na místo na webu otevřením menu "Publikování" v pravém horním rohu programu a výběrem jedné z míst uložení.



3. Změňte parametry do okna publikace podle svého uvážení, ponechte pouze požadované zaškrtávací políčka a klepněte na tlačítko "Publikovat". Úspora se tak stane rychle bez ohledu na velikost projektu.

   

   Výsledkem je, že složka naleznete v místě uložení. Umístění banneru na místě se liší v závislosti na místě a obecně již nepatří do postupu tvorby.