Danas ću ti pokazati kako napraviti glatki prijelaz između dvije fotografije.
Slikao sam unapred i ovo je rezultat koji sam dobio:
Da bih dobio takvu sliku, napraviću dve fotografije koje ću kombinovati.
Napravio sam prekrasnu pozadinu sa morem i fotografiju djevojke koja je uslikana na pozadini tmurnog drveća bez lišća.
Pa da počnemo - ja ću glatki prelaz boja a za to ću slijediti ove korake:
Korak 1
Otvaram svoje fotografije u Photoshopu i koristim alat kreće se Prevlačim sliku djevojke na fotografiju sa morskom pozadinom.
Želim malo da smanjim sliku djevojke i za ovo zovem slobodna transformacija, pritiskom na prečicu na tastaturi CTRL+T.
Okvir koji se pojavio oko fotografije sa djevojkom ima čvorove koje možete povući i smanjiti veličinu fotografije, držeći ključ Shift, tako da proporcije slike nisu izobličene.
Korak 2
Sada prelazim na paletu Slojevi i kada sam na sloju sa devojkom kliknem na ikonicu koja se zove Dodajte vektorsku masku.
Kao što vidimo na paleti Slojevi na sloju sa djevojkom se formirala maska sloja, koja je istaknuta okvirom, što ukazuje da je maska aktivna i sav posao koji ću obaviti će biti obavljen upravo na maski sloja.
Na gornjoj ploči, gdje se nalaze sve postavke alata Gradijent kliknem na strelica, koji se nalazi pored ikone alata iu prozoru koji se pojavljuje sa gradijentima, biram radijalni gradijent, koji ide od crne do prozirne.
Sada crtam linije gradijenta ne dostižući figuru djevojke, kao što je prikazano na slici (možete imati više pravaca). Kada nacrtate liniju gradijenta, pozadina glatko nestaje.
Trebalo mi je dva ili tri puta da nacrtam liniju gradijenta u svakom od smjerova naznačenih na slici da bih postigao rezultat koji vidite ispod na slici.
Korak 4
Međutim, možemo primijetiti da se nestankom pozadine na fotografiji djevojke donekle promijenila i slika same djevojke, jer je na nekim mjestima postala prozirna.
Ali ovo je vrlo lako popraviti.
Dok sam na sloj maski, uzimam mekani krug četka bijele boje i slikaj ovim kistom na djevojci.
Bijela četka vraća sve izgubljene dijelove djevojčinog imidža.
Također želimo da vas podsjetimo da uvijek možete razgovarati o temama Photoshopa na Photoshop forumu i pronaći odgovore na mnoga vaša pitanja.
Evo rezultata:
Spojio sam dvije fotografije koristeći glatki prijelaz.
Nadam se da sam jasno objasnio kako napraviti glatku tranziciju između dvije fotografije - kao što vidite prilično je jednostavno.
Također vam savjetujem da pogledate moju prethodnu lekciju Valentina u Photoshopu, koji ima mnogo zanimljivih stvari.
Želim vam uspeh u daljem savladavanju Photoshopa!
Sa vama je bila Galina Sokolova.
1 glasDobar dan, dragi čitaoci. Danas sam odlučio da vam dokažem da se teorija učenja najbolje izvodi u praksi. Čak i ako ste početnik, za samo sat vremena možete postići dobar rezultat, a da ništa ne razumijete u Photoshopu! Gledajte, ova slika je nastala u potpunosti zahvaljujući gradijentima. Primjenjuju se na različite elemente iu raznim varijacijama.
Ako pročitate ovaj članak do kraja, ne samo da ćete naučiti kako napraviti glatku tranziciju boja u Photoshopu, već ćete i primijeniti ovo znanje u praksi u odnosu na tekst, oblik, stvoriti prekrasne svjetlucave dijamante i još mnogo toga.
Već sam snimio ovu sliku. Ako želite, onda možete sami kreirati potpuno isto, ili možda čak i bolje, ali ja ću vas naučiti drugim primjerom. Koji? Saznajte na kraju članka. Crtaću sa vama i opisivati proces paralelno, ni sam još ne znam šta mogu da uradim. Zahvaljujući tome, moći ću vidjeti na koje probleme možete naići i pomoći u njihovom rješavanju.
Osnovno znanje i jedna tajna uvijek dobitne opcije
Dakle, prvo trebamo otvoriti Photoshop. Toplo preporučujem da preuzmete ovaj program ( ovdje možete kupiti licenciranu verziju ). Nikada nećete naći bolju od nje. Ako se bojite da nećete uzalud savladati i potrošiti novac, potpuno zaboravljajući na program nakon prvog pokušaja, možete isprobati online uslugu https://editor.0lik.ru/ . Mnogo je zgodnije imati svoj program i vrlo brzo ćete shvatiti zašto.
Ovako izgleda verzija Photoshopa za 2015. godinu, ako imate drugo izdanje, ne brinite. Sve će biti otprilike isto. Imate nešto manje opcija i to je jedina razlika.
Kreiramo novi dokument.
Odabir veličine mi je jedno od najtežih pitanja. Kao osnovu uzeo sam maksimalne veličine slike za objavu na društvenim mrežama. 800x500, ali, kao što razumijete, nije to poenta. Sve zavisi od ciljeva i zadataka koje ćete ostvariti koristeći Photoshop.
Pogledajte, panel sa desne strane sadrži sve glavne tipke, uključujući gradijent. Međutim, sada to nije pronađeno. Kako to? I sam sam se suočio sa ovim problemom kada sam počeo da učim da radim sa Photoshopom. Pročitate članak, a pola informacija morate potražiti u izvorima trećih strana. Gugl, google, google.
Oprostite, jako pametan čitalac koji sve odlično zna za male digresije od teme. Želim da svi posjetioci bloga mogu raditi na mojim lekcijama. Možda će vam jednog dana biti od velike koristi. Štedi dosta vremena.
U donjem desnom uglu skoro svakog dugmeta, osim lupe, nalazi se nešto poput strelice. Ovo ukazuje da je nekoliko alata skriveno u dugmetu.
Držite lijevu tipku miša na dugmetu nekoliko sekundi da otvorite dodatni meni i odaberete gradijent.
Još jedan dodatni meni je otvoren na vrhu. Primjenjuje se isključivo na gradijente. Kliknite na tekst - otvorit će se poseban tekstualni meni u gornjem dijelu, na četkici i ... pa, razumijete.
Kliknite na strelicu pored ikone u boji. Ovdje se pohranjuju standardni prijelazi ili oni koje ste otpremili.
Ako se ne smatrate genijem dizajna, preporučujem vam da preuzmete besplatne predloške s Interneta. Pune su. Prvo, štedi vrijeme, a drugo, nekoliko sličnih opcija obično se kombiniraju u temu kreiranu u istom stilu. ovo se bez problema može primijeniti na jednu sliku i gotovo uvijek će izgledati dobro.
Instaliranje novih šablona nije problem. Preuzmite ih s interneta, zatim odaberite maticu u gornjem desnom kutu i pronađite vezu "Preuzmi...".
Odaberite fasciklu sa preuzetim fajlovima na svom računaru i sačuvajte.
Oni će biti dodati na dno liste.
ispuniti
Sada naučimo kako se puni. Odaberite bilo koju opciju koja vam se sviđa (preći ćemo na kreiranje malo kasnije) i kliknite na nju. Držite lijevu tipku miša bilo gdje na ekranu i povucite u bilo kojem smjeru. Određuje lokaciju prijelaza boja.
Vidite razliku.
Možete skrenuti bilo gdje.
Da spriječite pomicanje i zamućenje vaše linije, držite pritisnutu tipku Shift dok postavljate smjer.
Vidite, prelaz boje se sada izvodi u sredini. Pobliže ćemo pogledati postavke kada kreiramo vlastiti gradijent. Sada ću reći samo o pomjeranju centra. Kliknite na ovu ploču.
Zgrabimo lijevu tipku miša za boju ispod i pomjerimo je lijevo ili desno.
Evo šta sam završio.
Kako primijeniti gradijent na tekst kako bi slova izgledala moderno
Hajde da napišemo nešto. Odaberite odgovarajuće dugme.
Ako trebate promijeniti veličinu ili sam font, obratite pažnju na tablu na vrhu ekrana. Tamo je sve jednostavno.
Sada pritisnite Ctrl i istovremeno kliknite na sličicu novog tekstualnog sloja. Budite oprezni, ne morate kliknuti na tekst, već na pravougaonik, kao što je prikazano na slici ispod.
Sada kreirajmo novi sloj. Postoje tri opcije za rješavanje problema: istovremeno držite Shift, ctrl, N; koristite panel na vrhu, pronađite tamo "Sloj - novi - kreirajte"; koristite dugme u brzom meniju sa desne strane. Na donjoj slici sam ga pokazao sa strelicom.
Sada, da biste uklonili isticanje na rubovima slova, možete kliknuti na odabir, a zatim kliknuti bilo gdje na slici. Dobićete ovaj rezultat.
Ovo nije kraj teksta. Vidite, imamo 2 sloja: jedan sa gradijentom, a drugi sa slovima. Zašto se to dogodilo tamo? Objasniću najbolje što mogu. Pišite u komentarima ako vam nije jasno. Napisali ste tekst. Photoshop je shvatio da su to slova i čak vam je ponudio da ih povećate, smanjite, promijenite font itd.
Zatim ste odabrali ovaj fragment. Napravili smo novi sloj, ako povučemo analogiju, izrezali smo šablonu iz papira i popunili je. U ovom trenutku, Photoshop se izgubio. Prestao je da vidi tvoja pisma. Za njega je to samo dio neke slike, poput romba, kvadrata ili kruga sa izrezanim središtem. Ako krenete raditi sa slovima na sloju, nećete uspjeti, ako želite primijeniti gradijent na tekst - ista stvar.
Ako sada odlučite da premestite tekst negde i uđete u odgovarajući odeljak, a zatim počnete da pomerate strelicu, onda će se sve pomeriti iz vas.
Brišemo tekstualni sloj da se ne bismo zbunili. Kliknite na njega desnom tipkom miša i odaberite željenu opciju.
Vrste gradijenata, ispune oblika i stvaranje zvijezda
Ako obratite pažnju na traku gradijenta na vrhu, možda ćete otkriti da dolaze u različitim oblicima: linearni, radijalni, ugaoni, zrcalni ili dijamantski. Nije teško uočiti razlike, za to nije potrebno čitati članke, samo otvorite prazan list i pokušajte primijeniti jednu ili drugu opciju. Vidi šta se desilo.
Jedina stvar koju treba napomenuti je da ako želite da vidite savršen rezultat, kao na mojoj slici, strelica mora biti usmjerena od centra.
Sada se vratimo na našu sliku. Dozvolite mi da vas naučim jednom zanimljivom triku. Prijelazi boja mogu se koristiti unutar oblika koje crtate. Ovo je vrlo korisno, posebno za one koji će kreirati web stranice.
Dakle, odaberite pravougaonik ili krug. Nije bitno.
Sada boja ispune.
Pređimo na dio s gradijentom.
Ovdje nam treba romb.
Vidite, ispao je zanimljiv efekat, samo bijela boja sve pokvari. Treba vam transparentan. Može se naći unutar šablona. Ako vidite takvu rešetku unutar predloška, to je ono što nam treba.
Poigrajte se s postavkama i dobit ćete savršeno pristajanje.
Sada hajde da kloniramo ovaj blic. Odaberite potez. Samo kliknite na dugme.
Sada držite alt i povucite duplikat u stranu.
Dobio sam ovaj rezultat.
Kreiranje novog gradijenta i dugmadi za web stranice
I na kraju, reći ću vam kako sami kreirati gradijente od nule, a ujedno ćemo razumjeti njihova podešavanja. Hajde da napravimo lepo dugme, hoćemo li? Svojoj slici ću dodati pravougaonik sa zaobljenim ivicama.
Ovako to izgleda. Ovaj put nećemo koristiti unutrašnje punjenje. Nije baš zgodno raditi s novim šablonom kroz njega. Neka za sada bude samo crno.
Odaberite poznati alat i kliknite na ploču.
Novi gradijenti se kreiraju na osnovu starih. Kliknite na bilo koji. Stara verzija neće nestati. Zatim samo smislite novi naziv za njega i sačuvajte ga.
Gornje kontrolne tačke kontrolišu nivoe transparentnosti.
Uz pomoć donjih izvodi se rad s bojom. Da biste proširili gamu, kliknite pored bilo koje tačke i ona će se duplirati.
Možete kreirati koliko god želite.
Da bi prijelaz izgledao moderno, potrebno je da izgladite boje. Ne dirajte ovaj indikator i sve će biti u redu. Mora biti 100%. Spreman. Možete kliknuti na "OK" ili "Save" - sve ovisi o vašoj želji.
Sada ponavljamo ono što smo nedavno uradili sa tekstom. Držite pritisnut ctrl, kliknite na dugme željenog stila u sredini i kreirajte novi na osnovu njega.
Sada dodajte prijelaz i voila.
Dodajte tekst na dugme i to je to. Nije jasno zašto je neophodna naprava završena. Usput, možete preuzeti moj izvor ako želite ( Preuzmite gradient.psd izvor ). Možete ga otvoriti u Photoshopu i poboljšati moju sliku. Mislim da neće biti teško.
To je to. Sada znate dosta o gradijentima. Ako ste dizajner, layout dizajner, kreator web stranica ili želite to postati, a ova lekcija vam je zaista bila korisna, pretplatite se na newsletter i saznajte više o onome što vas zanima. Možete pogledati i ovu stranicu: https://photoshop-master.org/disc149/ . Ovdje možete pronaći gomilu plaćenih i besplatnih kurseva koji će vas naučiti stvarnom, profesionalnom radu sa Photoshopom.
Sretno i vidimo se opet.
Kreiranje kolaža nije samo kombinovanje nekoliko fotografija u jednu. Pravi kolaž pokazuje vještinu autora, a također pokazuje njegovu sposobnost da lijepo i kompetentno rasporedi fotografije tako da izgledaju elegantno i atraktivno. Kolaž će biti uspješan i uočljiv, u kojem nema primjetnih granica između fotografija - umjesto toga, fotografije kao da se prelijevaju jedna u drugu. Ovaj efekat se može postići izvođenjem jednostavnih operacija u Adobe Photoshopu.
Trebaće ti
- - Adobe Photoshop softver
Uputstvo
Premjestite drugu fotografiju na prethodno otvorenu.
Više o povezivanju fotografija možete pročitati u.
Zatim, pomoću alata Move Tool, postavljamo željenu lokaciju fotografija jedna u odnosu na drugu. Potrebno je osigurati da se jedna fotografija preklapa s drugom, na mjestu preklapanja će se montirati glatki prijelaz. Radi praktičnosti, možete privremeno smanjiti neprozirnost slika na panelu Slojevi, a također je dobra ideja staviti vodiče na granice preklapanja.
Sada odredimo koja će fotografija biti na vrhu, i ako je potrebno, promijenimo raspored slojeva na panelu slojeva. Imaću sliku sa Twitterom na vrhu.
Zatim vratite neprozirnost slojeva slike na 100%.
A sada, pređimo na stvaranje glatkog prijelaza između fotografija, u ovom primjeru ćemo to učiniti pomoću maske sloja i primjene crno-bijelog gradijenta.
Dodajte masku sloja sloju sa gornjom fotografijom klikom na odgovarajuću ikonu na dnu palete, dok se boje u paleti boja automatski mijenjaju u crnu boju prednjeg plana i boju bijele pozadine, ikona maske na odgovarajućem sloju će se pojavljuju na panelu Slojevi. Zatim otvorite Gradient Tool u paleti alata. U gornjem levom uglu radnog prozora Photoshopa kliknite na trougao da otvorite paletu gradijenta i izaberite prvu, koja ima naziv "Od glavne boje do pozadine". Zatim povlačimo liniju od jedne vodilice do druge u smjeru prikazanom na slici.
Da biste nacrtali liniju gradijenta strogo horizontalno (ili, u drugim slučajevima, strogo okomito), držite pritisnutu tipku Shift.
Kao rezultat, dobijamo glatki prijelaz na prozirnost desne ivice gornje slike, što daje efekat glatkog prijelaza između dvije fotografije.
Na ikoni maske u panelu slojeva vidjet ćemo sljedeće promjene, crna boja pokazuje punu transparentnost, a bijela, naprotiv, punu neprozirnost slike na koju je primijenjena maska sloja.
To je sve, zadatak je obavljen!
Pozdrav dragi webmasteri početnici. Ponovo.
U ovom članku ću vam reći kako da pređete iz tamnih u svjetlije nijanse, kao i iz jedne boje u drugu.
Takva radnja se naziva gradijent, a budući da je u suštini pozadinska slika, izvodi se pomoću svojstva pozadine, koje uzima dvije vrijednosti:
1. linearni gradijent - prelaz boje sa jedne ivice ili ugla u drugu.
2. radijalni gradijent - prelaz boje od centra ka ivicama.
Napisano je kako slijedi:
pozadina: -moz-linear-gradient (vrh, #ff0000, #ffcfcf);
vrh, #ff0000, #ffcfcf);
U nastavku ćemo, koristeći primjer, detaljno analizirati svaki element ovog zapisa.
Nažalost, gradijent još uvijek ima problema s renderiranjem u pretraživačima i W3C specifikacijama, tako da vrijednosti i dalje moraju imati prefiks.
Stavite prefiks na početak vrijednosti i počinje crticom.
Ovo je lista koju ćemo morati da ubacimo u selektor elemenata, kreirajući gradijent za njega, kako bi se vaša veoma lepa pozadina pravilno odrazila u svim pretraživačima. Ljepota zahtijeva žrtvu.
Ovo je najjednostavniji, dvobojni gradijent. Hajde da detaljno analiziramo vrijednosti svojstva pozadine
Prvi red postavlja pozadinu za pretraživače koji ne podržavaju linearne gradijente.
Sljedećih 5 redova služe za prikaz pozadine u različitim pretraživačima. Prvo, vrijednost gradijenta se upisuje s prefiksom na početku.
Zatim, u zagradama:
vrh - smjer iz kojeg počinje prva boja (može biti dolje, lijevo, desno)
#ff0000 - prva boja odvojena zarezom; 
#ffcfcf — druga boja odvojena zarezima;
Safari, do verzije 5, i Chrome do deset, imali su vlastitu sintaksu, što je značajno povećalo kod. To je vjerovatno razlog zašto gradijent za ove verzije često nije preciziran, posebno kada postoji veliki broj boja.
Možete napraviti prijelaz boje ne vodoravno ili okomito, već od ugla do ugla. Za to postoje sljedeći smjerovi:
donji desni - od donjeg desnog ugla do gornjeg lijevog;
dolje lijevo - od donjeg lijevog do gornjeg desnog;
gore desno - od gornjeg desnog do donjeg lijevog;
gore lijevo - od gore lijevo do dolje desno;
Možete napraviti prijelaz boje od sredine bloka do rubova. Zatim u značenju umjesto riječi linearno (linearno) stavite radijalno (radijalno)
#gradient(
pozadina : #ff0000 ;
pozadina: -moz-radial-gradient( centar, poklopac elipse, #ff0000, #ffcfcf);
pozadina: -webkit-radial-gradient( centar, poklopac elipse, #ff0000, #ffcfcf);
centar, poklopac elipse, #ff0000, #ffcfcf);
centar, poklopac elipse, #ff0000, #ffcfcf);
širina: 600px
visina: 400px
granica : 1px čvrsta #333 ;
}
A sada napravimo, da tako kažem, nešto poput duge. Da biste to učinili, dodajte još nekoliko boja u gornji kod i postavite jačinu svake boje kao postotak (broj boja nije ograničen)
Jačina boje je podešena od 0% do 100%, (prvi je 0%, zadnji je 100%, ostali između njih su u nizu). Razmotrite ovu opciju na radijalnom gradijentu. Na linearnom se sve radi na isti način.
#gradient(
pozadina : #ff0000 ;
pozadina: -moz-radial-gradient();
pozadina: -webkit-radial-gradient-t( centar, poklopac elipse, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%);
pozadina: -o-radial-gradient( centar, poklopac elipse, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005);
pozadina: -ms-radial-gradient( centar, poklopac elipse, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100%);
širina: 600px
visina: 400px
granica : 1px čvrsta #333 ;
}
Mislim da je princip jasan. Dakle, red za Safari do pete verzije, i Chrome do desete, pokušajte sami napisati.
Gradijent je postavljen na bilo koji HTML blok (body, div, h1-6, p, ul, ol), i globalne i inline stilove (ovo je za WordPress stranicu).
Sada nekoliko riječi o tome kako i gdje odabrati boje. Postoje usluge gradijenta koje nude i boju, postotak volumena i gradijentni kod, ali njihov izbor je ograničen ponudom.
Stoga koristim alat colorscheme.ru, u kojem možete odabrati boju u neograničenom rasponu, te optimalno usklađene sekvence i kombinacije.
U gornjem redu panela se bira broj kombinovanih boja. Prolaskom kroz "Ugao 30°" raspon izbora se mijenja.
U "Scheme Adjustment" ton je tamniji ili svjetliji. U "Listi boja", sve boje prisutne u šemi su raspoređene po zasićenosti, i sa kodom u naslovu.
Općenito, neograničene mogućnosti za odabir boja za kreiranje gradijenta.
Želim vam kreativan uspjeh.
— Rabinoviču! Imate li sto dolara da promijenite?
Ne, ali hvala na komplimentu!
Dva Odesana:
Rosa, kako ti se sviđa moja nova haljina?
„Izvini, Sarah, žurim, trenutno nemam vremena za skandale!“
