Izdelava travnatega ozadja za spletno stran

Pri izdelavi spletne strani za podjetje Urejanje okolja Brus, smo za ozadje uporabili sliko trave. V vodiču vam bomo predstavili, kako smo izdelali ozadje spletne strani. V enostavnem postopku bomo s pomočjo brezplačnega programa za urejanje slik – GIMP, naredili neopazno stikanje robov na sliki. S tem omogočimo, da se slika v ozadju lahko ponavlja.

1. Prenesite sliko in jo pomanjšajte

Prenesite sliko, ki jo bomo rabili pri izdelavi ozadja: http://www.sxc.hu/photo/844630

Odprite sliko v orodju GIMP in jo nekoliko pomanjšajte (cca. 1000px širine) z ukazom v orodni vrstici: Slika > Spremeni merilo slike.

slika trave

2. Obrežite sliko

V orodjarni izberite orodje za obrezovanje. Izberite osrednji del slike, približno 50% celotne slike. Enkrat kliknite na izbor, da se slika obreže.

crop

3. Naredite stikanje robov neopazno

Tukaj pride na vrsto vsa čarovnija. Za prepričljivo ponavljajoče ozadje je potrebno, da prehodi med ponavljanji slike niso vidni. V orodni vrstici kliknite na Filtri in nato izberite Poslikaj > Naredi stikanje neopazno. Filter bo poskrbel, da bodo prehodi na vseh štirih stranicah spremenjeni.

stikanje robov

4. Odstranite moteče elemente

S kloniranjem odstranite dele slike, ki bi preveč bodli v oči ob ponavljanju.  Tako bo ponavljanje slike še manj opazno. V orodjarni izberite gumb za kloniranje. Za tip kloniranja označite Kloniranje v perspektivi. Vzemite čopič z zamegljenimi robovi in mu povečajte velikost. Držite tipko Ctrl in kliknite par deset pikslov stran od mesta kjer hočete popraviti večje črne lise. Nato kliknite na črno liso, oziroma drug moteč element, ki ga hočete popraviti. Čopič bo tako kloniral del, ki ste ga izbrali ob prvem kliku z držanjem tipke Ctrl.

kloniranje

5. Rezultat

Končni rezultat je travnata površina z nevidnim stikanjem robov. S podobnim pristopom smo uredili ozadje za spletno stran www.brus-urejanjeokolja.si. Sliko lahko prav tako uporabite tudi na namizju, nastaviti morate ponavljanje (Tile).

končni rezultat

Enak rezultat lahko dosežete tudi z adobovim orodjem Photoshop. Vodič v angleščini si oglejte tukaj.

Deli z drugimi

  • Facebook
  • Twitter
  • Google Plus
  • Pinterest
  • Add to favorites
  • Email

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja

Lahko uporabite te oznake HTML in atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>