Ivice i pozadinske slike i dalje su popularni elementi dizajna prilikom izrade web stranica. Korištenje pravih pozadinskih slika može dodati osobnost i stil vašoj web lokaciji bez trošenja vremena i novca na prilagođenu grafiku. I granice su korisne za dodavanje strukture vašem sadržaja.
Danas ćemo spojiti ovo dvoje tako što ćemo dizajnirati pozadinske slike kao ivice. divi ima skup korisnih opcija za prilagođavanje pozadinskih slika, što olakšava dizajniranje pozadinskih slika za jedinstveni dizajn granica. Ovo nam omogućava da kombinujemo boje, gradijente, senke okvira i modove mešanja na razne kreativne načine.
Počnimo.
Šta vam je potrebno za početak
Da biste započeli, potrebno vam je sljedeće:
- Le Divi tema instaliran i aktivan
- Nova stranica stvorena za izgradnju od nule na prednjem dijelu (vizualni konstruktor)
- Slike za korištenje sadržaja fiktivno
Nakon toga imat ćete prazno platno za početak dizajna divi.
Opći savjeti za izradu obrasca obruba pozadinske slike
Prije nego što započnete s izgradnjom, evo nekoliko općih savjeta koje morate imati na umu prilikom stvaranja obrasca obruba pozadinske slike.
# 1 Odaberite slike sa puno teksture
Većinu vremena želite da vam granice budu uže. To znači da nećete moći vidjeti veći dio slike. Stoga je korisno koristiti slike koje imaju puno teksture. Na primjer, možete koristiti fotografiju pejzaža, buketa cvijeća ili visokog tornja. Evo nekoliko slika koje koristim za ovaj vodič.
# 2 koristite gradijente i prozirnost s obrubom pozadinske slike
Pozadinske slike ponekad mogu biti odlična granica za vas sadržaja. Ali većinu vremena ćete htjeti dodati preklapanja vašoj pozadinskoj slici kako biste postigli boju ili da biste pozadinu učinili tamnijom ili svjetlijom. Pozadinski gradijenti su odličan način za dodavanje slojeva vašim pozadinskim slikama i stvaranje jedinstvenog dizajna obruba.
# 3 Koristite režime spajanja
Upotreba načina blenda na pozadinskim slikama može primijeniti jedinstvene boje i teksture na obrasce obruba. Sve što trebate je dodati boju pozadine ili gradijent svojoj pozadinskoj slici, a zatim odabrati način miješanja za pozadinsku sliku. Boja, svjetlina, umnožavanje i zaslon su neki od sjajnih načina kombiniranja granica pozadinske slike.
Koristite zaobljene ugaone mogućnosti za jedinstvene oblike
Ne moraju sve ivice imati ravne ivice. Pomiješajte malo! Opcije zaobljenih uglova divi omogućavaju vam da kreativno oblikujete ove uglove.
Koristite pozadinske slike paralakse kao obrube
Sjajna stvar u vezi s paralaksom je što pokreta oživljava dizajn. Uz to, ako za dizajn obruba koristite pozadinske slike s paralaksom, možete stvoriti suptilno kretanje koje se ističe i ističe vaš sadržaj.
Dizajn okvira pozadinske slike u Divi-ju
Sada kada razumijemo opću ideju koja se temelji na stvaranju obrasca granice pozadinske slike, zamislimo nekoliko zajedno. Izradit ćemo 2 različite modele. Svaka će imati osnovni prezentacijski modul koji će služiti kao izmišljeni sadržaj. Parametre stupca koristit ćemo za dodavanje granice pozadinske slike modula.
Krenimo od našeg prvog dizajna.
#1 pozadinska slika obruba
Ovaj prvi dizajn sadrži usku granicu pozadinske slike sa sjenkom područja kako bi izgledala više poput okvira za sadržaj.
Evo kako to dizajnirati.
Prvo dodajte red od dva stupca redovnom odjeljku.
Dodaj modul sažetka
Zatim u lijevi stupac dodajte modul zamućivanja.
Jednom kada je zamućenje postavljeno, otvorite postavke zamućenja i izvucite zadanu sliku tako da budu vidljivi samo naslov i sadržaj tijela.
Zatim svom tekstu pružite bijelu pozadinu.
Zatim ažurirajte parametre dizajna prezentacije na sljedeći način:
- Naslov teksta: Oswald
- Tijelo policije: Lato
- Marža 5% na vrhu, 5% na dnu, 5% na lijevoj strani, 5% na lijevoj strani, XNUMX% na desnoj strani
- Tapaciranje: 7% na vrhu, 7% na dnu, 10% na lijevoj strani, 10% na desnoj strani
- Zaobljeni uglovi: 20px u gornjem desnom uglu, 20px u donjem lijevom kutu
- Box Shadow: vidi screenshot
Dodajte pozadinsku sliku u stupac
Ovo se brine za naš prezentacijski modul. Sada dodamo našu granicu pozadinske slike. Da bismo to učinili, u stupac koji sadrži modul Blurb dodati ćemo pozadinsku sliku. Otvorite postavke reda, a zatim postavke za stupac 1 i dodajte sljedeću pozadinu:
- Slika u pozadini: [prenesite sliku po vašem izboru]
- Boja pozadine: #303a7a
- Pozadina slike mješavine: Svjetlina
Zatim ažurirajte zaobljene uglove i sjenu okvira na sljedeći način:
- Zaobljeni uglovi: 20px u gornjem desnom uglu, 20px u donjem lijevom kutu
- Box Shadow: vidi screenshot
Konačni rezultat
Sada provjerite konačni dizajn.
Pozadinska slika obruba # 2
Ovaj sljedeći dizajn ističe činjenicu da se pomoću visoko teksturisanih slika mogu stvoriti prekrasne obrube, pogotovo ako ih kombinirate sa načinima miješanja slika.
Evo kako to dizajnirati.
Dodajte modul Blurb
Da bismo kreirali dizajn, dodaćemo blurb tekst u stupac 2 istog retka koji sadrži dizajn # 1. Naprijed i kopirajte modul za raspored izgleda # 1 i zalijepite ga u stupac 2. Zatim ažurirajte postavke prezentacijskog modula na sljedeći način:
- Zaobljeni uglovi: vratite zadane postavke
- Margin: 10% na vrhu, 10% na dnu, 10% na lijevoj strani, 10% na lijevoj strani, XNUMX% na desnoj strani
- Tapaciranje: 15% na vrhu, 15% na dnu, 10% na lijevoj strani, 10% na desnoj strani
- Širina granice: 1px
- Boja obruba: #ffffff
Dodajte pozadinsku sliku u stupac
Kada je naš modul postavljen, otvorite postavke linije i dodajte pozadinski gradijent u 2 stupac.
- Lijevi gradijent pozadine: #f7e0a5
- Desni pozadinski gradijent Boja: rgba (237,240,0,0.79)
- Gradient Direction: 90deg
- Početni položaj: 50%
- Finalna pozicija: 0%
Zatim dodajte pozadinsku sliku s lijepim efektom gradijenta.
- Slika u pozadini: [preuzmi sliku]
- Miks pozadinske slike: boja
Kao što vidite, način kombiniranja boja zadržava svjetlinu dva gradijenta boja iza slike kako bi stvorio lijep uzorak obruba slike s nježnim bojama.
Konačni rezultat
Otkrijte konačni rezultat dizajna.
Najnovije misli
Stvaranje granica sa slikama jednostavan je način da svom dizajnu dodate ljepotu i osobnost. Dizajn istaknut u ovom vodiču napravljen je kako bi naglasio mogućnosti koje Divi nudi u dizajniranju jedinstvenih obruba. Stoga, s različitim kombinacijama boja, dizajni su neograničeni. Dakle, uzmite nekoliko slika i istražite više dizajn ivica sa slikama na Divi-u.
Na vaše zdravlje.
