Yksinkertainen banneri Photoshopissa. Animoidun bannerin luominen Photoshopissa - ilmainen opetusvideo

Hei ystävät! Olen taas kanssasi, Vladimir Saveljev, ja tänään jatkamme aihetta bannerien luomisesta sivustolle! Artikkelin ensimmäisessä osassa kerroin sinulle asioista, jotka auttavat sinua toteuttamaan villeimmät ideasi!

Nyt on aika näyttää sinulle, kuinka bannerit luodaan Photoshopissa! Itse asiassa sinua ei odota mitään vaikeaa tai kauheaa, toista vain kaikki vaiheet minun jälkeeni ja yhdessä pääsemme finaaliin, nimittäin luomme ensimmäisen mainosbannerimme!

No, en vedä kissaa palloista liian kauan, mennään...

Bannerin tekeminen Adobe Photoshopissa

Ennen työn aloittamista on erittäin tärkeää mallintaa tarkasti itse bannerin luonne (sen koko, onko se staattinen vai animoitu). Tärkeää on myös päättää värimaailmasta, yritysidentiteetin käytöstä sekä keksiä tarttuvia otsikoita ja iskulauseita.

Sitten voit käynnistää Photoshopin ja luoda uuden kuvan, jonka tausta on läpinäkyvä (Tiedosto/Uusi) -koko, esimerkiksi 468 x 60 pikseliä;

Näytä paneeli kerrosten käsittelyä varten "Layer".
Luomme taustan erillisenä kerroksena - suosittelemme, että et säästele tässä ja aseta kaikki havaittavat bannerin elementit erilliseen kerrokseen, jopa siihen asti, että valitset erillisen kerroksen jokaiselle iskulauseen kirjaimelle.

Erillisellä kerroksella on mainos vetoomus sekä valokuva ja tunnus, joka on valmistettu etukäteen kokoon.

Kokoamme kaikki bannerin elementit ja muistamme luoda useita mahdollisia vaihtoehtoja, joista ei haittaisi keskustella kollegoiden kanssa.

Kaikki vaihtoehdot, toistaiseksi monikerroksisessa versiossa, tallennetaan erillisiin tiedostoihin psd-muodossa (huomaa, että jpg-muoto "ei muista" tietoja tasoista, se kerää kaikki tasot yhdeksi ja jatkossa osiointia ei tehdä enää mahdollista).

On erittäin hyödyllistä astua toistaiseksi pois tietokoneen äärestä, pitää tauko työstä ja palata sen pariin seuraavana päivänä, jotta voidaan arvioida tehtyä "tuoreella silmällä" ja valita lopullinen versio, joka korjataan ja käännetty jpg:ksi.

Teos on luonteeltaan pitkälti luovaa Photoshop-ohjelman työkalujen hallitsemisen, psykologian tunteen, mainonnan vaikutuksen ja sen aiheen partaalla.

Kuinka tehdä banneri animoituna Photoshopissa (gif-tiedosto)? Ja alkuperäinen Photoshopmme selviää tästä tehtävästä loistavasti! Avaa välilehti - ikkuna - Animaatio.

Seuraavaksi tässä ikkunassa sinun on lisättävä kehyksiä piilottamalla ja näyttämällä tasoja. Määritämme myös kehyksen näyttönopeuden ja sen silmukan!

Sinun on ymmärrettävä, että olet jo luomassa jonkinlaista videota, mikä tarkoittaa, että et voi tehdä ilman pientä "käsikirjoitusta". Ainakin on erittäin tärkeää mallintaa tarkasti animaation koko luonne - kunkin "sankarikerroksen" osa.

Täällä sinun on määritettävä kaikki tarkasti:

• kunkin kerroksen käyttäytymisen aikaparametrit;
• sen läpinäkyvyyskäyttäytyminen;
• liikkeen rata.

Asia ei ole ollenkaan monimutkainen, mutta se saa sinut tuntemaan, kuinka vaikea tämä käsikirjoittaja-ohjaajan ammatti on.

Kaiken työn takaa perusidea - monikerroksiset kuvat ja kyky työskennellä jokaisen kerroksen kanssa täysin toisistaan ​​riippumatta.

Tämä on banneri, jonka loin 5 minuutissa! Tietenkin se on kaukana täydellisestä, mutta tavoitteeni oli näyttää sinulle Photoshopin mahdollisuudet ja onnistuin siinä!

Kyllä, melkein unohdin kertoa löydöstäni Viime artikkelissa puhuin siitä, kuinka ostin Sergei Buibarovin videokurssit luoda bannereita Ja tehdä niistä rahaa! Yksityiskohtaisen tutkimuksen jälkeen (vietin koko päivän katsomalla videoita Seryozhan temppuista ja temppuista) tajusin, että tällaiset kurssit ovat erittäin tarpeellisia RuNetissä! Suosittelen ehdottomasti ostamaan...

Hei rakkaat ystävät! Blogini: - "", on aina avoinna sinulle! Aiemmissa artikkeleissa kerroin kuinka ja miten myöhemmin blogissa. Tänään haluan kertoa sinulle kuinka tehdä banneri Photoshopissa .

Photoshopilla tehdyissä bannereissa on enemmän etuja kuin haittoja.

1. Kevyt
2.Helppo asentaa
3. Näytetään kaikentyyppisissä laitteissa
4. Helppo tehdä
5. Sivusto ei lataudu
6. Banneria voidaan päivittää usein

Ainoa haittapuoli on, että se ei ole niin "elävä" kuin salama, voit tuntea eron elokuvan ja kuvan välillä. Mutta tämä on ainoa haittapuoli, ja se voidaan osittain poistaa käyttämällä GIF-kuvaa.

Ennen kuin aloitat bannerien luomisen, sinun on tehtävä valmistelutöitä. Valitse tarvittavat kuvat ja painikkeet. Päätä, minkä tyyppinen banneri se on: liikkumaton vai animoitu. Tee luonnos tulevasta bannerista paperille ymmärtääksesi selvästi, mitä haluat saada lopputuloksena.

Kerää kaikki valmistetut kuvat työpöydällesi luotuun erilliseen kansioon. Bannerin luomisen jälkeen se voidaan helposti poistaa, etkä unohda tehdä tätä, koska se on näkyvissä. Joten, kuvat on valmis, ja aloitamme!

Staattisten JPEG-bannerien luominen Photoshopissa.

Avaa Photoshop, luo uusi asiakirja: "Tiedosto" - "Luo". Kirjoita avautuvaan ikkunaan nimi, määritä leveys pikseleinä ja korkeus pikseleinä. Leveyden saat selville mittaamalla sivupalkin. Koko sivupalkin leveydelle sijoitettu banneri näyttää kauniilta. Määritä korkeus valmistetun kuvan korkeuden perusteella plus 50 tai 60 pikseliä - tilaa painikkeelle.

Asiakirjan tarkkuus – määritä 72 pikseliä, tämä on Internetin optimaalinen tarkkuus. Suuremmalla resoluutiolla kuva on raskas, pienemmällä resoluutiolla huonolaatuinen. Valitse taustaväri kuvan taustavärin mukaan.

Kuinka selvittää kuvan korkeus? Voit tehdä tämän avaamalla kuvasi Photoshopissa, napsauttamalla "kuva" - "kuvan koko". Muuta avautuvassa ikkunassa kuvan leveys sivupalkin leveydeksi. Varmista, että koko ilmoitetaan pikseleinä, jos muita arvoja on, syötä pikseleitä.

Korkeus muuttuu automaattisesti, muista se tai kirjoita se muistiin. Napsauta "ok".
Vedä kuva luodun asiakirjan päälle pitämällä sitä hiiren vasemmalla painikkeella ja painamalla näppäimistön ALT-painiketta. Valitse Photoshopin vasemmasta paneelista "siirrä" -työkalu. Ensimmäinen ylhäältä. Ja käyttämällä näppäimistön nuolia asetamme sen banneriin.

Avaa valmiit kuvat sisältävä kansio kaksoisnapsauttamalla näyttöä ja valitse painike. Vedämme sen banneriin ja asennamme sen oikeaan paikkaan. Voit antaa painikkeelle varjoefektin. Kaksoisnapsauta tasoa painikkeella, valitse avautuvassa ikkunassa "varjo" ja määritä tarvittavat parametrit.

Siinä kaikki, banneri on valmis! Yhdistä kaikki tasot: - "Yhdistä näkyvissä". Seuraava "tiedosto" - "Tallenna verkkoon...". Valitse JPEG-tallennusmuoto. Valitse tallennettava kansio. Napsauta "tallenna".

Animoidun GIF-bannerin luominen Photoshopissa.

Animoidun bannerin luominen eroaa staattisesta bannerista vain siinä, että joudut luomaan useita eri kerroksia, jotka muuttuvat luoden kuvan animaation. Ensin sinun on päätettävä, mikä bannerissasi vilkkuu. Voit vaihtaa bannerin pääosan. Eli yksi kuva korvataan toisella. Voit saada painikkeen vilkkumaan tai painikkeen etiketin muuttumaan.

Mitä tahansa päätätkin animoida, luomisen periaate on sama. Siksi päätin näyttää sinulle kuinka tehdä vilkkuva painike ja vaihtuva kirjoitus. Ensin, kuten ensimmäisessä tapauksessa, luomme uuden asiakirjan ja vedämme kaikki tarvittavat kuvat siihen. Huomaa, että kaikki kuvat saadaan erilliselle kerrokselle.

Tämä antaa meille mahdollisuuden saada kuva liikkumaan.
Luodaksesi suunnittelemani animaation tarvitset painikkeen ilman etikettiä. Maalaan sen eri väreillä. Teen tason painikkeella aktiiviseksi (napsautan sitä kerran). Seuraavaksi "kuva" - "korjaus" - "sävy - kylläisyys".

Valitse avautuvassa ikkunassa sävytyksen valintaruutu. Ja siirtämällä yläliukusäädintä valitsen kuvaani sopivan värin. Napsauta sitten tasoa hiiren vasemmalla painikkeella ja valitsin "luo kopiotaso". Näkyviin tulee taso, jossa on täsmälleen sama painike. Siirryn jälleen kohtaan "kuva" - "korjaus" - "sävy - kylläisyys".

Valitsen ruudun - sävytys. Valitsen saman värin, mutta eri sävyllä. Nyt minulla on kaksi kerrosta napilla, eri sävyjä.
On tekstin aika. Valitse vasemmasta paneelista "teksti"-työkalu. Säädän kokoa ja fonttia. Kirjoitan yhden sanan.

Päätin esimerkiksi tehdä merkinnän: "Hanki ilmaiseksi." Voit kirjoittaa "Lisätietoja". Kirjoitan sanan "Get" painikkeen koon mukaan. Napsautan kerran tekstitasoa. Valitsen "siirrä" -työkalun. Asetan merkinnän tiukasti painikkeen keskelle.

Otan "Teksti"-työkalun uudelleen. Luon tekstikerroksen kopion, valitsen tekstin ja korvaan sen sanalla "Ilmainen". Tässä tapauksessa sana on siellä, missä sitä tarvitaan, voit siirtää sitä hieman oikealle tai vasemmalle, unohtamatta käyttää siirtotyökalua.
Meidän tarvitsee vain värittää teksti jotenkin. Kaksoisnapsauta tekstitasoa Määritä avautuvassa ikkunassa varjo, valitse liukuväri ja tee viiva.

Valitset kaiken bannerisi, kuvan ja painikkeiden värin mukaan. Kaiken tulee sopia harmonisesti.
Kun olet valinnut tarvittavat tehosteet, napsauta "ok". Napsauta seuraavaksi hiiren kakkospainikkeella tasoa, jossa on valitut tehosteet, ja napsauta ikkunassa "kopioi tasotyyli". Napsauta tasoa, jossa on tekstiä ilman tehosteita, ja napsauta "liitä tasotyyli". Nyt molemmilla kerroksilla on samat vaikutukset. Banneri on luotu, aloitetaan animaatio.

Bannerianimaatio Photoshopissa.

Voit tehdä tämän avaamalla yläpaneelin "ikkuna"-välilehden ja valitsemalla avattavasta luettelosta "aikaskaala" ja asteikon alareunasta "luo kehysanimaatio". Nimi voi olla erilainen Photoshopin eri versioissa. Esimerkiksi viiden parhaan joukossa sinun on valittava "animaatio" ikkunasta. Ajatuksena on, että etsit kaikkea kehysanimaatioon liittyvää. Jos sinulla on vaikeuksia, kysy kysymyksiä kommenteissa.

Nyt sinun on suljettava kaikkien kerrosten silmät, joiden pitäisi pysyä näkymättöminä. Esimerkiksi: - meillä on kaksi painiketta, mikä tarkoittaa, että suljemme yhden näkyvyyden. Meillä on kaksi sanaa yhdessä paikassa - yksi sana on tilapäisesti poistettu käytöstä.

Alle mittakaavassa olemme jo luoneet ensimmäisen kehyksen. Valitse kehyksen näyttöaika. Älä huoli, jos et pidä siitä, voit muuttaa sen milloin tahansa. Napsauta lehtiä alhaalta, ja olemme luoneet seuraavan kehyksen.

Jotta se eroaisi ensimmäisestä, päätin vaihtaa painikkeen. Toisin sanoen avasin kerroksen painikkeella, joka oli kiinni, ja suljin painikkeen, joka oli näkyvissä. Otan seuraavan laukauksen. On aika muuttaa painikkeen lisäksi myös sanaa.

Suljen näkyvän sanan, avaan aiemmin suljetun kerroksen silmän ja vaihdan myös painikkeiden silmät. Ja luomme viimeisen, neljännen kehyksen. Vaihdamme vain painikkeita. Valitsemme ruudun toistaaksesi animaation - "jatkuvasti" ja aloitamme animaation tarkistamisen. Jos kaikki on tehty oikein, painikkeet vilkkuvat kaksi kertaa niin usein kuin sanat vaihtuvat.

Banneri on valmis. Tallennamme sen verkkoon Gif-muodossa.
Jotta voisit ymmärtää, kuinka kaikki on tehtävä, nauhoitin bannerien luomisprosessin videoleikkeeseen. Älä tuomitse tiukasti, koska tämä on ensimmäinen videotuntini. Yritin olla kiirettämättä, jotta voisit nähdä bannerin luomisprosessin Photoshopissa.

Video on ilman sanoja, mutta selityksillä. Nauhoitin sen yöllä, kun kaikki nukkuivat, joten en voinut puhua. Mutta voit kuunnella miellyttävää musiikillista säestystä. Nauti katsomisesta!

Kun teet oman bannerin ensimmäistä kertaa, bannerien luominen Photoshopissa ei enää näytä vaikealta. Ja animaatio on helppo tehdä, tärkeintä ei ole sekaantua kerroksiin ja vaihtaa varovasti silmiä.

Samalla periaatteella voit tehdä muuttuvan kuvan. Kokeile tehdä banneri itse ja ymmärrät, että se ei ole vaikeaa. Jos sinulla on vaikeuksia bannerien luomisessa, ota yhteyttä, autan mielelläni. Tai voit tilata bannerin valmistuksen, niin teen sen sinulle alusta loppuun.

Lataamme luodun bannerin kirjastoon, avaamme sen erilliselle välilehdelle, kopioimme kuvan osoitteen ja tallennamme sen. Liitämme sen koodiin ja laitamme koodin widgetiin.

Koodi bannerin lisäämiseksi widgetiin:

Nyt on aika sanoa hyvästit, kerroin kuinka tehdä staattinen ja animoitu banneri Photoshopissa. Jos jokin ei toimi sinulle, kirjoita kommentteihin. Ja älä unohda napsauttaa sosiaalisen verkoston painikkeita, se ei ole sinulle vaikeaa, mutta kirjoittaja on tyytyväinen!

PS. Lue artikkeleita asentamisesta, tekemisestä, kauniista tai. Älä kiirehdi poistumaan blogista, löydät paljon mielenkiintoista tietoa.
Batalova Irina

Hei kaikki. Tässä artikkelissa näytän sinulle, kuinka voit tehdä GIF-bannerin Photoshopilla. Yleensä olen tottunut tekemään bannereita ja animaatioita . Photoshop ei tietenkään voi verrata tätä pakettia animaatiotoimintojen suhteen. Mutta voit silti tehdä melko yksinkertaisia ​​ja mielenkiintoisia bannereita Photoshopissa, koska sen uusissa versioissa, alkaen CS5:stä, on tietääkseni mahdollista luoda animaatioita läpinäkyvyydestä, skaalauksesta, perspektiivistä jne. Katsotaanpa GIF-bannerin luomisprosessia Photoshopissa artikkelin otsikossa olevan työn esimerkin avulla.

Luodaan uusi kokoinen asiakirja 600-200px. Tausta - #589fff

Ensin kootaan banneri staattiseen muotoon. Laitetaan päähenkilömme – kala – kerrokseen, josta saat ilmaisia ​​resursseja työhösi, kirjoitin artikkelissa "":

Käyttämällä " Vapaa figuuri» aseta tasolle huomioteksti valintaikkunan kanssa.

Haluan muistuttaa, että voit muokata muotoa (vektoriobjektia) työkalulla "Solmun valinta."

Näin tein - poistin tarpeettomat elementit tasosta ensimmäisellä muodolla ja lisäsin vielä 3 ellipsiä, jotta näyttäisi siltä, ​​että tämä dialogipilvi tulee kalan suusta. Tapahtui seuraavaa.

Laitetaan nyt teksti asiakirjan kerroksille siinä järjestyksessä, jossa se tulee näkyviin. Koska tekstimme ilmestyy peräkkäin, on luonnollista, että staattisessa versiossa kerrokset menevät päällekkäin. Näytän kaikki tasot, joissa viimeinen tekstitaso on poistettu käytöstä.

Ja huomioi, että tekstitasomme on rajattava dialogipilvimuodolla olevan kerroksen kokoiseksi, jotta se toimii kehyksenä, jonka vuoksi tekstiä ei enää näy.

Joten kaikki kerroksemme ovat valmiita. Järjestetty niiden esiintymisjärjestykseen (alhaalta ylös). Voimme aloittaa animaation.

Valitse esine Ikkuna – Aikajana. Valitse näkyviin tulevasta paneelista painike Luo videolle aikajana. Tämän seurauksena luodaan aikajana, joka sisältää kaikki tasomme, joita voimme jo siirtää ja animoida.

Koska meillä on lukittu taustakerros, sitä ei näytetä aikajanalla, se on aina läsnä muuttumattomana. Jos haluat animoida taustan, avaa sen kerroksen lukitus kaksoisnapsauttamalla hiiren vasenta painiketta.

Jokaisella aikajanan kerroksella on attribuutteja animaatiota varten. Ne näkyvät, jos laajennat luetteloa tason nimen vasemmalla puolella. Voimme muuttaa sijaintia, peittävyyttä, tyyliä.

Lisäksi, jos napsautat hiiren kakkospainikkeella itse tason nimeä aikajanalla, näkyviin tulee luettelo muista animaatiotoiminnoista.

Voit aktivoida avainkehysten luomisen tietylle raidalle kerroksella napsauttamalla animaatioattribuutin nimen vieressä olevaa kellokuvaketta.

Keltainen timantti (avainkehyskuvake) tulee näkyviin kohtaan, jossa aikamerkki sijaitsee aikajanalla. Esimerkiksi alussa. Voit muuttaa objektiattribuutin, kuten sijainnin, arvoa, ja sen arvo tallennetaan kyseiselle avainkehykselle. Sitten, jotta voit asettaa uuden arvon ja uuden avainkehyksen, sinun on siirrettävä aikaosoitin uuteen paikkaan. Napsauta määritteen nimen vieressä olevaa timanttikuvaketta (aikajanalle ilmestyy uusi avainkehyskuvake) ja aseta uusi määritteen arvo. Esimerkiksi siirrä objekti uuteen paikkaan.

Yritetään nyt soveltaa hankittua tietoa. Kalamme pitäisi näkyä vasemmalta oikealle ja sen läpinäkyvyyden tulisi muuttua 0:sta 100 prosenttiin. Tältä aika-asteikko näyttää tässä tapauksessa.

Kun kala on ilmestynyt, dialogipilvi ilmestyy osissa. Ensin ellipsit, sitten itse hahmo. Voimme siirtää kunkin kerroksen jälkiä aikajanalla, joten jaamme niiden sijainnit niin, että ne näkyvät halutulla aikavälillä ja asetamme animaation parametriin Peittävyys jokaiselle kerrokselle.

Kuvassa käytämme samoja vaiheita.

Luodaan nyt animaatio tekstille samalla algoritmilla. Vain tekstissä on parametri, ei Position, vaan Perspective, ja voimme paitsi muuttaa sijaintia, myös muuttaa asteikkoa pienemmästä suurempaan, kun teksti alkaa liikkua. Voit tehdä tämän käyttämällä tavallista objektin muunnostyökalua ( Ctrl + T). Koska tekstiä sisältävät tasot leikataan aluksi kuvan muodon mukaan, ne näkyvät vain sen rajojen sisällä. Muutin myös toisen tekstin tyyliä. Lisätty kaltevuus tasojen sekoitusasetuksiin.

Nyt kohdistetaan kaikki raitojen reunat lopussa. Tätä varten sinun on vedettävä kunkin raidan oikeasta reunasta ja säädettävä kaikki samaan aikaan. Jotta kaikki esineet eivät yhtäkkiä katoa. Voit asettaa jokaisen raidan peittävyydeksi 0. Toista mitä tapahtui. Voit painaa näppäintä tilaa.

Vaikka Photoshopia ei ole luotu millekään monimutkaiselle animaatiolle (ja tämä on järkevää), mutta näiden yksinkertaisten vaiheiden avulla voit saavuttaa kunnollisen tuloksen luodessasi GIF-banneria. Varsinkin jos tunnet olosi mukavammaksi Photoshopissa kuin Flashilla työskennellessäsi.

(Vierailtu 2 252 kertaa, 1 käyntiä tänään)

Jokainen meistä kohtaa mainoksia joka päivä, katselee televisiota, surffailee Internetissä, oleskelee kadulla, ostoskeskuksessa ja monissa muissa paikoissa. Tässä artikkelissa puhumme yhdestä suosituimmista mainonnan tyypeistä - bannereista. Opit mitä bannerit ovat, mitä tyyppejä niitä on, ja bannerin Photoshopissa.

Mitä on bannerimainonta

Bannerimainonta on mainosluonteinen graafinen kuva. Mainostaulut kaduilla, bannerit kauppojen yläpuolella, kuvat Internetin verkkosivustoilla, kun klikkaat niitä, siirryt toiselle sivustolle - nämä ovat kaikki bannereita. Katubannerit ilmestyivät kauan sitten, kun ei ollut vielä edes radiota. Mutta ne vuotivat Internetiin vuonna 1994 ja alkoivat nopeasti saada suosiota. Nykyään yksikään yritys ei tule toimeen ilman mainontaa ja erityisesti mainontaa Internetissä, ja bannerit ovat yksi erittäin tehokkaista työkaluista tavaroiden ja palveluiden mainostamisessa.

Millaisia ​​bannereita on olemassa?

• Ulkomainontabanneri. Valmistettu erityisestä polyvinyylikloridikalvosta, vinyylistä, lateksista tai nylonpaperista. Se on erikokoinen suorakaiteen muotoinen kangas, jolle painetaan mainostiedot. Tulostus suoritetaan tulostimilla suurikokoiseen tulostukseen - plottereilla.
• Mainosbannerit Internetissä. Aluksi nämä olivat kirkkaita, mieleenpainuvia kuvia, mutta tekniikan kehittyessä ilmestyi animoituja bannereita lyhyen videoleikkeen muodossa ja jopa interaktiivisia minipelejä. Joka tapauksessa tämä on mainos, joten se sisältää hyperlinkin, joka johtaa tiettyyn sivustoon. Vaikka et klikkaa banneria, mainosluonteinen informaatiokuva säilyy silti muistissasi.

Internet-bannerien tyypit toteutusmenetelmien mukaan

Ennen kuin opimme luomaan bannerin Photoshopissa, tutustumme erilaisiin tapoihin toteuttaa niitä.

• Staattinen. Yksinkertaisin banneri on kuva, jossa on mainossisältöä. Tiedoston koko on pieni, joten se latautuu nopeasti jopa hitaassa Internetissä. Bannerin luominen on helppoa sekä Photoshopissa että muissa graafisissa muokkausohjelmissa.
• Animoitu. Ne painavat useita kertoja enemmän kuin staattiset, ja siksi ne latautuvat hitaammin, mutta ne ovat käyttäjälle paremmin havaittavissa. On paljon vaikeampaa luoda tällainen mainosbanneri Photoshopissa.
• Rikas teksti. Banneri, joka muistuttaa tietoartikkelia, jossa on graafinen komponentti.
• HTML5, JS, flash-animaatio. Nämä ovat jo bannereita, jotka ovat interaktiivisia miniohjelmia. Esimerkiksi: erilaiset testit, primitiiviset pelit, kyselyt. Tällaisen mainosbannerin luominen Photoshopissa, kuten ymmärrät, ei toimi.

Bannerin koon määrittäminen

Ennen kuin opit luomaan banner-asettelun Photoshopissa, sinun on päätettävä sen mitat. Vakiokoko on 100 x 100 pikseliä. Yleisimmin käytetyt vaihtoehdot ovat 468 x 60 ja 234 x 60. Ensimmäinen numero määrittää leveyden ja toinen pituuden. Pystybannerin koko on siis esimerkiksi 60 x 468 pikseliä. Siksi on tärkeää tietää, mihin bannerisi sijoitat.

Mistä aloittaa

Joten opimme, että voit luoda Photoshopissa sekä suuren että pienoisbannerin. Mutta sinun ei tarvitse kiirehtiä, ja ennen kuin avaat ohjelman luomaan banneri, kuten kaikissa luovissa yrityksissä, sinun on selvitettävä suunnittelu ja sisältö. Suosittelemme tekemään tämän paperilla ja kynillä. Ensin piirrämme suorakulmion ottaen huomioon tulevan bannerin mittasuhteet. Laadimme tarvittavan mainostekstin. Sitten päätetään, mikä tausta on. Kaikkea tätä ei tarvitse piirtää, riittää, kun kirjoitat sen, mitä olet suunnitellut. Sitten voit selvittää, mitä kuvia voit lisätä ja mihin ne tyylikkäästi sijoittaa, mukaan lukien mahdollinen yrityksen logo. Todennäköisesti tulos paperilla näyttää kaaviomaiselta suunnitelmalta. Valmistelun viimeinen vaihe: etsimme Internetistä kuvia, jotka vastaavat ideasi. On tärkeää muistaa tekijänoikeudet, joten valitsemme kuvat ilmaisista lähteistä.

Oman mainosbannerin tekeminen

Joten asettelusi on valmis. Siirrytään nyt suoraan pääprosessiin.

Tässä artikkelissa teemme staattisen vaakasuuntaisen mainosbannerin, jonka koko on 468 × 60 pikseliä ja teksti "iPhone 5 Sale" Photoshop CS6:ssa.

Tämä oli johdantoartikkeli aloittelijoille, ja siinä on vähän yksityiskohtaiset ohjeet bannerin luomiseen. Internetissä on paljon erikoiskirjallisuutta ja video-opetusohjelmia. Kun käytät muutaman päivän tämän hämmästyttävän ohjelman oppimiseen, voit luoda paljon parempia bannerimainoksia. On myös syytä huomata, että samanlaisia ​​tuotteita on kevyellä toiminnallisuudella sekä erityisesti luomiseen tarkoitettuja sovelluksia

Hei rakkaat ystävät. Tänään puhumme bannereista, animoidun bannerin tekemisestä Photoshopissa. Olet ehkä nähnyt bannereita useilla sivustoilla. Tietenkin minkä tahansa bannerin tavoitteena on houkutella vierailijan huomio. Ja jos valitset hyvät kuvat, kunnollisen bannerin tekeminen ei ole vaikeaa.

Joten animoidun bannerin tallentamiseksi sinun on avattava valikkokohta "Tiedosto"— "Tallenna verkkoon".

Nyt sinun tehtäväsi on valita GIF-muoto, Photoshop hoitaa loput puolestasi. Tietysti voit kokeilla asetuksia. Mutta en usko, että tämä on tarpeen.

Tämän seurauksena saat samanlaisen bannerin.

Kuinka asentaa banneri verkkosivustolle

Kauniin bannerin tekeminen ei riitä. Se on vielä asennettava sivustolle. Tätä varten itse banneri on ladattava verkkosivustollesi. Tämä voidaan tehdä käyttämällä tai kautta.

Lisää nyt tämä koodi siihen paikkaan sivustolla, jossa sinun on näytettävä banneri:

Muista vain, että koodit lisätään sivuston lähdekoodiin tai widgetien kautta. Älä unohda muuttaa linkkien ja bannereiden kokoa.

Tekemäni banneri on ihanteellisen kokoinen sivustopalkkiin, joten se on helpoin lisätä widgetin kautta.

Voit tehdä tämän avaamalla WordPressin hallintapaneelin - "Ulkomuoto"- - widget-tyyppi "Teksti".

Lisää sitten widget sivustopalkkiin ja liitä bannerikoodi siihen. Muista vaihtaa linkkejä!

Valmis, nautitaan työmme hedelmistä.

Katso nyt video-opastus, siinä näet kaiken selvästi ja monet kysymykset ratkeavat itsestään.

Ystävät, siinä kaikki tälle päivälle. Toivon sinulle onnea ja hyvää mieltä! Nähdään uusissa artikkeleissa.