Granice i pozadinske slike i dalje su popularni elementi dizajna pri izradi web stranica. Korištenje pravih pozadinskih slika može vašoj web stranici dodati osobnost i stil bez trošenja vremena i novca na prilagođenu grafiku. I granice su korisne za dodavanje strukture vašem sadržaj.
Danas ćemo ovo dvoje spojiti dizajnirajući pozadinske slike kao obrube. Divi ima skup korisnih opcija za prilagodbu pozadinskih slika, što olakšava dizajn pozadinskih slika za jedinstvene dizajne obruba. To nam omogućuje kombiniranje boja, gradijenata, sjena okvira i načina stapanja na razne kreativne načine.
Počnimo.
Što trebate za početak
Da biste započeli, trebate 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žaj izmišljeni
Nakon toga ćete imati prazno platno na kojem možete početi dizajnirati Divi.
Opći savjeti za stvaranje obrasca obruba pozadinske slike
Prije nego što započnete s izgradnjom, evo nekoliko općih savjeta koje morate imati na umu pri stvaranju obrasca obruba pozadinske slike.
# 1 Odaberite slike s 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 upotrijebiti fotografiju krajolika, buket cvijeća ili visoki toranj. Evo nekoliko slika koje koristim za ovaj vodič.
# 2 koristite gradijente i prozirnost s obrubom pozadinske slike
Pozadinske slike ponekad same po sebi mogu biti sjajna granica za vas sadržaj. Ali većinu vremena pozadinskoj slici ćete htjeti dodati slojeve kako biste postigli boju ili pozadinu učinili tamnijom ili svjetlijom. Pozadinski gradijenti izvrstan su način za dodavanje slojeva vašim pozadinskim slikama i stvaranje jedinstvenih dizajna obruba.
# 3 Koristite načine spajanja
Korištenje načina miješanja na pozadinskim slikama može primijeniti jedinstvene boje i teksture na obrube. Sve što trebate je dodati pozadinsku boju ili gradijent svojoj pozadinskoj slici, a zatim odabrati način miješanja za pozadinsku sliku. Boja, svjetlina, umnožavanje i zaslon sjajni su načini kombiniranja granica pozadinske slike.
Koristite zaobljene mogućnosti ugla za jedinstvene oblike
Ne moraju svi rubovi imati ravne rubove. Promiješajte malo! Mogućnosti zaobljenog kuta Divi omogućuju kreativno oblikovanje ovih kutova.
Kao obrube koristite pozadinske slike paralakse
Sjajna stvar u vezi s paralaksom je što pokreta oživljava dizajn. Uz to, ako za dizajniranje obruba koristite pozadinske slike s paralaksom, možete stvoriti suptilno kretanje koje se ističe i ističe vaš sadržaj.
Dizajn obruba pozadinske slike u Divi-ju
Sada kada razumijemo opću ideju koja se temelji na stvaranju obrasca obruba pozadinske slike, zamislimo nekoliko zajedno. Izgradit ć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.
Započnimo s našim prvim dizajnom.
#1 pozadinska slika obruba
Ovaj prvi dizajn sadrži usku granicu pozadinske slike sa sjenom 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 dnu, 5% na lijevoj strani, XNUMX% na desnoj strani
- Tapaciranje: 7% na vrhu, 7% na dnu, 10% na lijevoj strani, 10% na lijevoj strani
- Zaobljeni uglovi: 20px u gornjem desnom kutu, 20px u donjem lijevom kutu
- Box Shadow: pogledajte snimak zaslona
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 retka, a zatim postavke za stupac 1 i dodajte sljedeću pozadinu:
- Pozadinska slika: [prenesite sliku po vašem izboru]
- Boja pozadine: #303a7a
- Pozadina slike mješavine: Svjetlina
Zatim ažurirajte zaobljene kutove i sjenu okvira kako slijedi:
- Zaobljeni uglovi: 20px u gornjem desnom kutu, 20px u donjem lijevom kutu
- Box Shadow: pogledajte snimak zaslona
Konačni rezultat
Sada provjerite konačni dizajn.
Pozadinska slika obruba # 2
Ovaj sljedeći dizajn ističe činjenicu da se pomoću visoko teksturnih slika mogu stvoriti lijepe obrube, pogotovo ako ih kombinirate s načinima miješanja slika.
Evo kako to dizajnirati.
Dodajte modul Blurb
Da bismo stvorili dizajn, dodati ćemo zamućeni tekst u stupac 2 istog retka koji sadrži dizajn # 1. Naprijed i kopirajte modul za izgled dizajna # 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 dnu, 10% na lijevoj strani, XNUMX% na desnoj strani
- Tapaciranje: 15% na vrhu, 15% na dnu, 10% na lijevoj strani, 10% na lijevoj strani
- Širina granice: 1px
- Boja obruba: #ffffff
Dodajte pozadinsku sliku u stupac
Kad je naš modul na mjestu, otvorite postavke linije i dodajte pozadinski gradijent u stupac 2.
- Lijevi gradijent pozadine: #f7e0a5
- Desni pozadinski gradijent Boja: rgba (237,240,0,0.79)
- Smjer gradijenta: 90deg
- Početna pozicija: 50%
- Završna pozicija: 0%
Zatim dodajte pozadinsku sliku s lijepim gradijentom.
- Pozadinska slika: [preuzmi sliku]
- Mješavina pozadinske slike: boja
Kao što vidite, način kombiniranja boja čuva 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 obruba 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 su s različitim kombinacijama boja dizajni bezgranični. Dakle, nabavite nekoliko slika i istražite više dizajn granica sa slikama na Diviju.
Za vaše zdravlje.
