Animoidun verkkobannerin luominen Photoshopissa

Verkkopalkkien luominen ei ole kaikkein hohdokkain työpaikka maailmassa, mutta jokaisen suunnittelijan on tehtävä jokin suunnittelijan uran vaiheessa, todennäköisesti monta kertaa. Vaikka verkkobannereiden luomisessa ei ole kovia ja nopeita sääntöjä, on sanomattakin selvää, että tyypin on oltava iso ja viestin reipas.

Animoimme myös tämän, joten suosittelen korkeintaan kolme diaa tai animaatiota, koska ihmiset eivät yksinkertaisesti katso sitä. Vilkkuvat elementit voivat myös auttaa kiinnittämään katsojan huomion.



Tee tämä animoitu banneri alla olevalle verkkosivustolle ...



Tee tämä animoitu banneri alla olevalle verkkosivustolle ...

Seuraavissa vaiheissa esittelen, kuinka määritetään ja luodaan yksinkertainen animoitu verkkobanneri, jonka hallinnan jälkeen on helppoa soveltaa kaikkiin uusiin töihin tulevaisuudessa.

hp zbook studio x360 g5 -muunnettava työasema

01. Asenna asiakirja



Käynnistä Photoshop, siirry tiedostoon> uusi ja valitse avattavasta Preset-valikosta Web. Valitse pudotusvalikosta kokotaulukko tai jos mitat vaihtelevat, valitse mukautettu ja kirjoita pikselimitat manuaalisesti.

Kun napsautusruutu on valittu näkymävalikosta, vedä ohjaimet napsauttamalla kaikki asiakirjan rajat.



kuinka muokata Adobe Premiere Pro -sovelluksessa

02. Graafisten elementtien lisääminen

Microsoft 12 päivän diilit vuotivat

Nyt sijoittamaan tärkeimmät muotoiluelementtimme. Yllä olevaan esimerkkiin liitin T3-neliön logon, ja luodessani oppaat voisin muuttaa sen kokoa ja saada sen napsautumaan asiakirjan rajoihin helposti. Liitä nuolikuvio, jota käytämme myöhemmin, ja aseta viestisi ensimmäiselle dialle kirjoitustyökalun avulla. Liitä tarvitsemasi kuvat ja varmista, että nimeät kaikki tasosi oikein.

03. Toissijaisten dioiden luominen

Nyt yksinkertaisesti kopioi tyyppikerros, poista tyyppikerros käytöstä ja kirjoita viestin seuraava vaihe, tässä tapauksessa ”MYYTY NYT”. Kun olet onnellinen siitä, että kaikki elementit ovat paikallaan, yhdistä mahdollisimman monta kerrosta. Koska tausta, logo ja kansikuva pysyvät staattisina, voimme yhdistää tämän jättäen meille neljä kerrosta, taustan, tyyppikerrokset ja nuolikerroksen.

04. Luo kehysanimaatio

mac pro 13 tuuman kova kotelo

Napsauta nyt vain aikajanan välilehteä ikkunan alaosassa tai siirry ikkunaan> Aikajana. Napsauta ikkunan keskellä olevaa pientä nuolta, valitse Luo kehysanimaatio ja napsauta sitten painiketta. Sammuta nyt kaikki kerrokset pois lukien taustakerros ja ensimmäinen viestikerros. Käytä yhden sekunnin viivettä kehykseen pienen animaatiokehyksen avattavasta valikosta. Napsauta nyt vain osoita aikajanan kaksoiskappaleita valitut kehykset -painiketta, mutta sammuta ensimmäinen viesti ja kytke päälle toinen viesti. Toista tämä prosessi kaikille tasoille viimeistelemällä nuolikerros.

05. Anna nuolen vilkkua ja säädä ajoituksia

Jotta nuoli vilkkuisi, osoita aikajanan Kopioi valitut kehykset -kohtaa ja sammuta nuoli. Säädä aika 0,5 sekunniksi ja toista nuolen kytkeminen päälle ja pois kerrosten paneelissa siten, että se näyttää siltä kuin se vilkkuisi. Lopuksi haluat ehkä säätää joitain ajoituksia, kunnes olet täysin onnellinen. Ihmisillä on hyvin lyhyt tarkkailualue, joten ei ole mitään syytä olla hidas kehysnopeuden kanssa, mutta heidän on silti pystyttävä lukemaan se.

06. Tallenna verkkoon ja laitteisiin

Siirry lopuksi kohtaan Tallenna verkkoon ja valitse avattavasta valikosta GIF. Voit myös heikentää laatua täällä, jotta tiedostokoko pienenee. Kun olet tyytyväinen, tallenna gif ja vedä se sitten verkkoselaimeen testataksesi sitä.