Skapa en banner på Google Web Designer

Steg 1: Komma igång

Google Web Designer är en gratis utvecklingsmiljö för webmasters som ger möjlighet att skapa webbsidor, inklusive enskilda objekt som banners med CSS3 och HTML5. För att använda det här verktyget, först och främst måste du hämta installationsfilen från den officiella webbplatsen och installera.

Hämta Google Web Designer från den officiella webbplatsen

Programinstallation

1. Klicka på länken som presenteras ovan för att gå till sidan nu och klicka på knappen "Hämta webbdesigner". Observera att programmet bara stöder Windows 7 och senare versioner.



2. Genom popup-fönstret Spara, välj en plats på din dator och använd knappen markerad på bottenpanelen.



3. Gå till mappen med bara sparad filen och dubbelklicka på vänster musknapp för att utföra öppningen. Som ett resultat bör installationsfönstret öppnas.

   

   Installationsförfarandet i sig utförs i helautomatiskt läge, vilket sparar alla arbetsfiler till katalogen med andra program på systemskivan.

Tillstånd

1. Om du vill spara projekt på Internet eller i allmänhet, skapa en banner speciellt för Googles interna tjänster, är det dessutom värt att utföra tillstånd. För att göra detta, kör programmet med hjälp av lämplig ikon, stäng det välkomstfönstret och klicka på "Logga in" -knappen på överpanelen.



2. Ange data från Google-konto, klicka på "Nästa" och bekräfta om det behövs. Därefter kommer kontot att omedelbart läggas till, utan att kräva några enskilda inställningar.

Ändra inställningar

1. Efter att ha förstått med preparatet är det nu önskvärt att göra ändringar i de grundläggande inställningarna för programvaran för att underlätta arbetet i framtiden. Använd den övre panelen, expandera EDIT-menyn och välj "Inställningar" i slutet av listan.



2. På fliken "Main" kan du ändra programmets ursprungliga beteende för att snabbt öppna projekt, tilldela en mapp för att spara de skapade mallarna, samt ställa in standardvärden för specifikationen av meddelandet när du skapar.



3. Följande sida "Layout View-läge" innehåller redigeringsparametrarna för redigeraren. Ändra de presenterade inställningarna kan du justera nät- och bindningsobjekten för mer exakt positionering av elementen.



4. Google Web Designer har en kodredigerare med sina inställningar. Således, på fliken "Code Viewer", kan du tilldela designstilen, ställa in formateringsparametrarna och lägga till nyckelbindningar till uppgifter.



5. Den sista fliken "Extended" innehåller bara två parametrar - "Logging" och "Application Scale". I det första fallet kommer inkluderandet att skapa en ändringslogg, medan det andra objektet låter dig ställa in en ny standardskala för redaktörens arbetsområde.

   Var försiktig! Om du ställer för mycket skala kan problem med brist på utrymme på skärmen visas för viktiga föremål.

Eventuella ändringar som gjorts eller andra kräver en omstart av programmet. Om du bara börjar arbeta med redigeraren, glöm inte möjligheten att återställa inställningarna med ett separat objekt på var och en av flikarna.

Steg 2: Skapa en banner

Genom att konfigurera programmet kan du börja arbeta med bannern med alla alternativ för Google Web Designer. Låt oss dock notera att detta åtgärd är uteslutande som en visuell redaktör, så att du bara kan posta färdiga element som skapas separat, till exempel i Photoshop.

Arbeta med verktyg

1. Efter att ha förberett layouten måste du bekanta dig med verktygen. På den främsta panelen av den största uppmärksamheten förtjänar listan "Visa", vilket gör det möjligt att aktivera och inaktivera hjälpelementen.



2. Genom menyn "Fönster" kan du tillfälligt inaktivera ett visst gränssnittselement. Om du till exempel vill göra en statisk banner, kommer "tidslinjen" bara att störa, och därför är det bäst att ta bort lämpligt tick.



3. Huvudredigeringsverktygen presenteras i den vänstra kolumnen. Vi kommer inte att överväga varje alternativ, eftersom inte alla objekt används när vi skapar, rekommenderar vi att experimentera dig själv.



4. Bredvid verktygsfältet presenteras "annonserade annonser" med flera bidrag. Särskild uppmärksamhet förtjänar "händelser" ansvariga för åtgärd med ett eller ett annat bannerobjekt och "CSS", där stilparametrarna är inställda.



5. Den högra delen av programmet har också en uppsättning verktyg som låter dig styra färg, text, struktur av objekt, egenskaper och helt enkelt lager. Liksom den huvudsakliga uppsättningen funktioner är fönstren bättre att studera självständigt i färd med att skapa ett projekt.



6. Om det behövs, kan du använda "tidslinjen", skapas en animerad banner. Samtidigt, för att hantera huvuddelen av redigeraren, använd ett klämutrymme och LCM, såväl som ett block med skalaparametrar.

Fyller en layout

1. Skapa en banner alltid med bakgrunden, och därmed, efter att du har förberett en layout, öppna fliken "egenskaper" och i sidblocket, använd "Fyll" -avdelningen. Det är ganska möjligt att installera vilken färg som helst, inklusive en gradient eller en helt transparent bakgrund.



2. Vidare i kön, lägg till grafiska element framställda i förväg. Du kan göra det på fliken Objektbibliotek genom att klicka på "+" -ikonen på bottenpanelen.



3. Välj önskade grafiska filer och klicka på Öppna. Detta kan göras både på en gång för alla nödvändiga lager, och separat, upprepa dessa åtgärder.



4. För att rymma, kläm den önskade bilden på fliken Objektbibliotek och dra redigeraren till huvudområdet.

   

   Du kan styra platsen för objektet med vanligt drag och skalning med ett aktivt urvalsverktyg. Om det behövs kan du alltid använda guider.



5. Genom att välja en grafisk fil i arbetsytan eller på fliken Structural Editor, öppna "Egenskaper". Det finns mycket mer än fler möjligheter än i bakgrunden, till exempel gränsinställningar eller strecksatser.



6. Om bannerdesignen ger förekomsten av text kan du lägga till det lämpliga objektet med hjälp av det vanliga Google Web Designer-verktyget. Klicka på ikonen "T" på den vänstra rutan, klicka på fönstret för huvudredigerare och ange önskad uppsättning tecken.

   

   För att styra texten, välj skiktet på fliken "Strukturell editor", expandera "texten" och ställa in lämpliga parametrar.

Ställa in animationen

1. I "Timeline" -blocket kan du lägga till och konfigurera effekterna av animering. För att starta, klicka på knappen "Lägg till ikon" med ikonen "+".



2. Klicka på ikonen ".5s" mellan ramarna och ställ in de parametrar du behöver. Till exempel kan du ändra varaktighet och stil på övergången.



3. Varje enskilt block på "tidslinjen" är helt oberoende av andra. För att skapa animeringar, ändra vissa saker till ditt eget gottfinnande och kontrollera resultatet med PLAY-knappen.

   

   När du har slutfört redigeringsprocessen använder du REPEAT-knappen. Detta kommer att skapa en oändlig animering.

Lägga till händelser

1. Efter att ha förstått med layouten måste du lägga till övergångshändelser för enskilda element eller hela bannern som helhet. För att göra detta, i kolumnen Sektorinspektör, öppna fliken Händelser och klicka på ikonen "+" på bottenpanelen.



2. I fönstret som öppnas från listan "Syfte" väljer du ett objekt som kommer att refereras.



3. På händelssidan, expandera sidan "Mouse" och välj "Klicka på". Beroende på kraven på resultatet kan du kombinera olika installationer.



4. Vidare från listan "Åtgärd" öppnar du Google-deklarationen och ställer in "övergångsvärdet". Ett sådant val kommer att göra det så att användaren går till den specifika sidan du behöver på Internet.



5. Som en "mottagare" väljer du en enda "GWD-AD" -version.



6. I det sista steget i fältet "Identif. Indikatorer »Kontrollera länken till genvägen och fyll i" URL "genom att ange önskad sida. Använd "OK" för att spara.

Arbeta med källkod

1. Som vi nämnde innehåller Googles webbdesigner en inbyggd kodredigerare. Det kan aktiveras med hjälp av "Code" -knappen på höger sida av topppanelen.



2. Du kan göra ändringar i bannerns struktur med inte bara den visuella redaktören, utan också direkt med koden i projektfilen. Detta kan vara mycket användbart när man anpassar ett flertal små element eller lägger till händelser som inte tillhandahålls av programmet.

De beskrivna åtgärderna bör vara tillräckligt för att skapa en banner, oavsett ansökan. Samtidigt kan du öka kapaciteten avsevärt genom att kombinera dessa verktyg.

Steg 3: Slutförande

När bannern är klar och klar för placering på webbplatsen kan du gå till sista steget. Först och främst är det värt att kontrollera hur ditt arbete på den riktiga webbsidan ser ut.

Förhandsvisning

1. På den övre panelen klickar du på förhandsgranskningsknappen för att öppna den extra menyn. Här kan du ange den webbläsare som bannern öppnas.



2. När du öppnar alla funktioner och utseendet på bannern bevaras, men med vissa funktioner. Till exempel, även om du installerade en oändlig upprepning av animationen, kommer allt att begränsas här bara en iteration.



3. Om det behövs kan du alltid visa resultatet till andra människor. För att göra det, välj "Få en delningslänk" och bekräfta tillgången till Google-kontot.

   

   Som ett resultat visas en länk på skärmen för att se bannern i ett sådant läge som beskrivits ovan. Det är självklart endast möjligt om du har ett konto.

Bevarande och publikation

1. För att spara projektet, öppna först filmenyn och använd alternativet Spara. Därefter sparas källfilen på datorn och kan öppnas därefter.



2. Du kan förbereda ett projekt på platsen genom att öppna menyn "Publicera" i det övre högra hörnet av programmet och välja en av platserna för spara.



3. Ändra parametrarna i fönstret Publicering efter eget gottfinnande, vilket ger endast de önskade kryssrutorna och klicka på "Publicera". Spara sålunda händer snabbt oberoende av projektets storlek.

   

   Som ett resultat kan mappen hittas på spara plats. Placeringen av bannern på webbplatsen skiljer sig från webbplatsens beroende och i allmänhet inte längre tillhör skapningsförfarandet.