În stadiul de creare a unui proiect de banner viitor, trebuie să acordați prioritate setărilor personalizate ale bannerului. Ie specificați lățimea și înălțimea sa Aveți dreptul să modificați oricând acești parametri. În acest scop, utilizați panoul din partea dreaptă din secțiunea "Proprietăți". Alegeți un loc pe site-ul dvs. în care doriți să plasați bannerul gata și setați dimensiunile acestuia pornind de la acesta.
Creați un banner.
Pasul 1. Pregătirea imaginilor.
Înainte de a începe să creați un banner, nu este necesar să pregătiți imaginile originale. Nu vă voi concentra atenția asupra creării unui banner specific. Voi spune doar că imaginile pentru banner-ul dvs. viitoare ar trebui să fie optimizate în avans pentru reducerea greutății. Desigur, opțiunea ideală ar fi modificarea dimensiunii imaginilor la dimensiunea bannerului. Dar nu vă faceți griji dacă nu ați făcut deja acest lucru. Puteți converti dimensiunea direct la Google Web Designer.
Pasul 2. Setarea fundalului.
În primul rând, vom crea un fundal pentru viitorul banner. Acest lucru se poate face în secțiunea "Proprietăți" - "Stil". Iată instrumentele cu care puteți seta fundalul pentru banner. Imaginea de fundal poate fi utilizată, dar în acest caz greutatea bannerului va crește ușor.
Pasul 3. Construirea unui banner.
Va fi logic să construim toate elementele grafice astfel încât să vedem cum vor arăta gata. Pentru aceasta, trebuie doar să trageți toate programele din dosarul dvs. în program. Deplasați mouse-ul peste graficul selectat. Apoi, țineți apăsat butonul stâng al mouse-ului și trageți acest obiect în zona de lucru a programului.
După ce ați făcut acest truc simplu, accesați secțiunea "Proprietăți". Aici trebuie să atribuiți un identificator și, de asemenea, să faceți alte setări dacă este necesar. După ce plasați toate elementele grafice ale bannerului într-o ordine logică, veți vedea că fiecare element a luat o poziție de pornire pe cronologie.
Pasul 4: Personalizați animația.
Pentru a configura animația, ar trebui să decideți ce obiect va apărea mai întâi și care al doilea, al treilea, etc. Se pare că va trebui să compuneți un anumit scenariu. Când decideți în sfârșit ce obiect ar trebui să fie primul obiect activ, selectați-l în panoul de jos al programului. Apoi mutați cursorul mouse-ului pe cronologie. Pe această scală, faceți clic pe butonul din dreapta al mouse-ului. În meniul contextual nou apărut, selectați elementul "Inserați o cheie de bază".
Rețineți că acest cadru va fi responsabil pentru modul în care va apărea primul dvs. obiect. Dar, împreună cu cadrul pe care l-ați definit drept unul cheie, a apărut și originalul (la începutul liniei temporale).
Trebuie să faceți clic pe butonul stâng al mouse-ului de pe cadrul sursă. Apoi, puteți începe personalizarea animației. Să presupunem că vă gândiți că în viitorul dvs. banner unele dintre obiecte vor apărea ca și cum ar fi de la o adâncime. În acest scop, trebuie să mergeți la secțiunea "Proprietăți" și să modificați mărimea obiectului la valorile zero și, de asemenea, să setați transparența la zero.
Apoi, trebuie să treceți la cadrul cheie. Apoi trebuie să returnați proprietățile obiectului la valorile originale. Acesta este modul în care animația este configurată. Desigur, ați ghicit deja că netezirea mișcării obiectelor în bannerul dvs. viitoare este reglementată de cât de departe este cadrul cheie din original.
Puteți configura alte obiecte în același mod. Pe cadrul sursă, vi se va permite să mutați obiecte în afara bannerului. Și pe cadrele cheie, puteți returna obiecte înapoi la banner. Dacă faceți acest lucru în acest fel, veți obține impresia de a zbura obiecte grafice.
Înainte de acest pas, ați creat o animație pe linia de timp, dar ați făcut-o în modul avansat. Totul este același lucru cu ceea ce ați făcut înainte, o puteți face în așa-numitul mod rapid. Pentru a intra în modul rapid, trebuie să faceți clic pe un buton care arată ca trei cutii și aceste casete sunt situate orizontal. Puteți găsi acest buton lângă butonul "redare" din panoul de jos.
Pentru mine personal, modul rapid în programul Google Web Designer se aseamănă cu munca din Photoshop cu panoul de animație. Aici aveți posibilitatea să formați vizual fiecare cadru și, desigur, să schimbați intervalul de timp dintre cadre. Voi spune imediat că dacă ți-a plăcut să lucrezi în acest mod și e potrivit să lucrezi, atunci poți să faci animația aici.
Pasul 6. Setarea acțiunii (evenimente).
Prin urmare, în panoul din stânga găsiți secțiunea "Componente". Și apoi - butonul "Imagine". Și este logic să transferați șablonul pe butonul dvs. Apoi trebuie să configurați acțiunea corespunzătoare pentru acest element. Pentru a face acest lucru, faceți clic dreapta pe acest element și selectați "Add Event" din meniul pop-up care apare.
Rețineți că este posibil ca acest buton să nu funcționeze în unele cazuri. Dacă se întâmplă acest lucru și butonul nu funcționează, puteți vedea rezultatul preliminar într-un mod diferit. Pentru a face acest lucru, executați fișierul proiectului în același director în care îl stocați.
Plasarea unui banner pe site.
Toți dosarul creat anterior trebuie să copiați pe site-ul dvs. Pentru aceasta, vă sfătuiesc să utilizați orice manager de fișiere care este convenabil pentru dvs., care efectuează o conexiune ftp. Deci, ar trebui să copiați dosarul cu fișierele sau arhiva pe server.
Acum, când dosarul cu fișierele bannerului dvs. este încărcat pe site-ul dvs. prin intermediul conexiunii ftp, trebuie să îl inserați fără obstacole în bara laterală.
Deoarece bannerul gata este un fișier html, este mai ușor să îl inserați ca obiect cadru. Să presupunem că lucrați cu WordPress. Apoi deschideți panoul de administrare și selectați elementul "Aspect", apoi "Widget-uri". Apoi găsiți widgetul de text și inserați codul în el.
Pasul 3. Personalizați stilurile de design.
Trebuie să desemnați identificatorul după mărimea bannerului. Crede-mă, este foarte convenabil. Pentru că atunci când plasați mai multe bannere de dimensiuni diferite pe site, acest lucru nu vă va permite să vă confundați.
Dacă există o dorință, puteți adăuga alinierea bannerului. De obicei, mă aliniez fie cu centrul, fie cu marginea dreaptă. Puteți utiliza alte stiluri, dar depinde de dvs. Ei bine, în cele din urmă bannerul nostru este gata.
Doresc noroc tuturor!
Trimiteți-le prietenilor: