1 glas

Dobar dan, dragi čitaoci. Danas sam odlučio da vam dokažem da je najbolje proučavati teoriju u praksi. Čak i ako ste početnik, možete postići dobar rezultat za bukvalno sat vremena, a da ništa ne razumijete o Photoshopu! Gledajte, ova slika je nastala u potpunosti zahvaljujući gradijentima. Primjenjuju se na različite elemente iu različitim 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, oblike, stvoriti prekrasne svjetlucave dijamante i još mnogo toga.

Već sam snimio ovu sliku. Ako želite, onda možete sami kreirati potpuno isti, a možda čak i bolji, ali ja ću vas naučiti na drugom primjeru. Koji? Saznajte na kraju članka. Crtaću s vama i istovremeno opisati proces. Ni sam još ne znam šta mogu. Zahvaljujući tome, mogu vidjeti na koje probleme možete naići i pomoći da ih riješite.

Osnovno znanje i jedna tajna uvijek pobjede

Dakle, prvo moramo 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 ga nećete savladati i da ćete potrošiti novac, potpuno zaboravljajući program nakon prvog pokušaja, možete pokušati online usluga https://editor.0lik.ru/ . Mnogo je zgodnije imati svoj program i vrlo brzo ćete shvatiti zašto.

Ovako izgleda verzija Photoshopa iz 2015., ako imate drugo izdanje, ne brinite. Sve će biti otprilike isto. Imate malo manje mogućnosti i to je jedina razlika.

Mi stvaramo novi dokument.

Odabir veličine mi je jedno od najtežih pitanja. Uzeo sam kao osnovu maksimalne dimenzije slike za objavljivanje društvene mreže. 800x500, ali, kao što razumijete, nije to poenta. Sve ovisi o ciljevima i zadacima koje ćete ostvariti kada Photoshop pomoć.

Pogledajte, na panelu sa desne strane nalaze se svi glavni tasteri, uključujući gradijent. Međutim, sada se ne može pronaći. Kako to? I sam sam se susreo sa ovim problemom kada sam počeo da učim da radim sa Photoshopom. Pročitali ste članak, ali polovinu informacija morate potražiti u izvorima trećih strana. Google, Google, Google.

Neka mi veoma pametan čitalac, koji sve odlično zna, oprosti na malim odstupanjima od teme. Želim da svi posjetitelji bloga mogu pratiti moje lekcije. Možda će vam ovo jednog dana biti od velike koristi. Uštedjet ćete puno vremena.

U donjem desnom uglu skoro svakog dugmeta, osim lupe, nalazi se nešto poput strelice. Ovo sugerira da postoji nekoliko alata skrivenih u gumbu.

Zadržite nekoliko sekundi lijevo dugme mišem na dugme da otvorite dodatni meni i izaberete gradijent.

Još jedan dodatni meni je otvoren na vrhu. Koristi se isključivo za gradijente. Kliknite na tekst - otvoriće se poseban tekstualni meni na vrhu, na četkici i... pa, shvatili ste.

Kliknite na strelicu pored ikone boje. 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. Ima ih dosta. Prvo, štedi vrijeme, a drugo, nekoliko sličnih opcija se obično kombiniraju u temu kreiranu uniformni stil. Ovo se bez problema može primijeniti na jednu sliku i gotovo uvijek će izgledati dobro.

Instaliranje novih šablona nije problem. Preuzmite ih sa interneta, zatim odaberite maticu u gornjem desnom uglu i pronađite link "Preuzmi...".

Odaberite fasciklu sa preuzetim fajlovima na svom računaru i sačuvajte.

Oni će biti dodati na dno liste.

Fill

Sada naučimo kako se puni. Odaberite bilo koju opciju koja vam se sviđa (krećemo je malo kasnije) i kliknite na nju. Držite lijevu tipku miša bilo gdje na ekranu i pomjerajte se u bilo kojem smjeru. Lokacija prijelaza boja ovisi o tome.

Vidite razliku.

Možete ga vrtjeti bilo gdje.

Kako biste spriječili pomicanje vaše linije i zamućenje gradijenta, držite pritisnuto tipku Shift dok postavljate smjer.

Vidite, tranzicija boja se sada odvija u centru. Pogledat ćemo postavke detaljnije dok stvaramo vlastiti gradijent. Sada ću govoriti samo o pomjeranju centra. Kliknite na ovu ploču.

Kliknite lijevom tipkom miša na boju na dnu i pomaknite je lijevo ili desno.

Ovo je ono sa čime 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 panel na vrhu ekrana. Tamo je sve jednostavno.

Sada pritisnite Ctrl i istovremeno kliknite na ikonu novog tekstualnog sloja. Budite oprezni, ne morate kliknuti na tekst, već na pravougaonik, kao što je prikazano na slici ispod.

Sada krenimo novi sloj. Postoje tri opcije za rješavanje problema: istovremeno držite Shift, ctrl, N; Koristimo panel na vrhu, tamo pronalazimo “Layer – new – create”; koristite dugme u brzom meniju sa desne strane. Na donjoj slici sam to pokazao sa strelicom.

Sada, da biste uklonili isticanje duž rubova slova, možete kliknuti na odabir, a zatim kliknuti na bilo koji dio slike. Ovo je rezultat.

Rad sa tekstom se tu ne završava. Vidite, imamo 2 sloja: jedan sa gradijentom, a drugi sa slovima. Zašto se to tamo dogodilo? 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 je predložio da ih povećate, smanjite, promijenite font i tako dalje.

Zatim ste odabrali ovaj fragment. Napravili smo novi sloj, da koristimo analogiju, izrezali smo šablonu iz papira i popunili je. U ovom trenutku, Photoshop je izgubljen. Prestao je da vidi tvoja pisma. Za njega je to samo dio neke slike, poput romba, kvadrata ili kruga sa izrezanim središtem. Ako radite sa slovima na sloju, nećete uspjeti ako želite primijeniti gradijent na tekst, ista stvar.

Ako sada želite da premjestite tekst negdje i odete u odgovarajući odjeljak, a zatim počnete da ga pomičete strelicom, onda će se sve pomaknuti.

Uklanjamo tekstualni sloj kako bismo izbjegli zabunu. Kliknite desnim tasterom miša na njega i odaberite željenu opciju.

Vrste gradijenata, popunjavanje oblika i stvaranje zvijezda

Ako ste obratili pažnju na gradijent panel na vrhu, možda ste primijetili da dolaze u različitim tipovima: linearni, radijalni, ugaoni, zrcalni ili dijamantski. Nije teško uočiti razlike, ne morate čitati članke, samo otvorite blanko list i pokušajte koristiti jednu ili drugu opciju. Vidi šta se desilo.

Jedina stvar vrijedna pažnje je da ako želite vidjeti 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 jednoj zanimljivoj tehnici. Prijelazi boja mogu se koristiti unutar oblika koje crtate. Ovo je vrlo korisno, posebno za one koji planiraju kreirati web stranice.

Dakle, odaberite pravougaonik ili krug. Nije bitno.

Sada boja ispune.

Idemo na odjeljak za gradijente.

Ovdje nam treba romb.

Vidite, ispao je zanimljiv efekat, ali bijela boja sve pokvari. Treba transparentno. Može se naći unutar šablona. Ako vidite ovakvu rešetku unutar predloška, ​​to je ono što nam treba.

Poigrajte se postavkama i dobit ćete svoju idealnu opciju.

Sada hajde da kloniramo ovaj blic. Odaberite pokret. Samo kliknite na dugme.

Sada držite alt i povucite duplikat u stranu.

Ovo je rezultat koji sam dobio.

Kreirajte novi gradijent i dugmad za web stranice

I na kraju, reći ću vam kako sami kreirati gradijente od nule, a ujedno ćemo razumjeti njihove postavke. Hajde da napravimo prelepo dugme, hoćemo li? Svojoj slici ću dodati pravougaonik sa zaobljenim ivicama.

Ovako on 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 kockicu.

Novi gradijenti se kreiraju na osnovu starih. Kliknite na bilo koju. Stara verzija neće nestati nigde. Zatim samo smislite novi naziv za njega i sačuvajte ga.

Koristeći gornje kontrolne tačke možete kontrolisati nivoe transparentnosti.

Donji se koriste za rad sa bojom. Da proširite opseg, kliknite pored bilo koje tačke i ona će se duplirati.

Možete kreirati koliko god želite.

Da bi prijelaz izgledao moderno, morate izgladiti boje. Ne dirajte ovaj indikator i sve će biti u redu. Trebalo bi da bude 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.

Dodajmo tekst na dugme i to je to. Nije jasno zašto je potrebna stvar završena. Usput, možete preuzeti moj izvor ako želite ( Preuzmite izvorni gradient.psd ). Možete ga otvoriti u Photoshopu i poboljšati moju sliku. Mislim da to neće biti teško.

Pa, to je sve. Sada znate dosta o gradijentima. Ako ste dizajner, layout dizajner, kreator web stranice 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. Također možete obratiti pažnju na ovu stranicu: https://photoshop-master.org/disc149/ . Ovdje možete pronaći oblak i plaćenih i besplatni kursevi, koji će vas naučiti stvarnom, profesionalnom radu sa Photoshopom.

Sretno i vidimo se opet.

Zadovoljstvo nam je poželjeti vam dobrodošlicu na našu sljedeću lekciju o radu Adobe Photoshop. Ovaj članak će govoriti o tome kako napraviti glatke prijelaze u programu na granici između slika/boja. Ovo je vrlo korisna vještina koja će vam svakako trebati, pa hajde da počnemo!

Ostvarivanje glatkog prijelaza između boja

Jer Photoshop je profesionalni program obrade slike, vrlo često se isti rezultat može postići na više načina. Isto je i sa prijelazima.

Korištenje alata Gradient

Vjerovatno ste upoznati sa ovim alatom. Stoga idite na alatnu traku s lijeve strane i odaberite "Gradijent".

Kada se odabere alat, ispod glavnog menija će se pojaviti panel sa postavkama gradijenta, gde možete odabrati predložak gradijenta i postaviti dodatne parametre po želji.

Nažalost, standardni skup gradijenata ne uključuje mnogo predložaka, tako da možete koristiti pretragu i proširiti svoju kolekciju ili kreirati vlastitu verziju.

Da bi prijelaz bio upravo u boji, a ne proziran, potrebno je postaviti i postavke za kontrolna tačka neprozirnost (pogledajte snimak ekrana ispod):

Nakon što je sve spremno, ostaje samo primijeniti promjene klikom na "OK" i ispuniti platno gradijentom. Da bismo to učinili, kreiramo odabrano područje koje želimo popuniti ili primjenjujemo gradijent na cijelo platno. Samo kliknite LMB (lijevu tipku miša) na željeno mjesto i povucite koliko je potrebno.

Važno! Obratite pažnju na to koja je vrsta punjenja odabrana:

U našem slučaju "Linearni gradijent".

Preko Layer Mask

Ovu metodu koriste iskusni korisnici. Sve radnje će se odvijati kroz paletu slojeva. da počnemo:

Kroz selekciju perja

Suština ove metode je stvaranje glatkog prijelaza na granici ispunjenog objekta/slike i pozadine. Počnimo!

1. Trebat će nam alat Rectangular Marquee.
   
   
2. Sada morate kreirati selekciju:
   
   
3. Kada je izbor spreman, koristite prečice SHIFT+F6 pozvati prozor u koji treba da unesete vrednost u stavku “Polumjer perja”.
   
   
4. Nakon toga, potrebno je da popunite formirani izbor. Da bismo to učinili, ponovo ćemo koristiti prečice SHIFT+F5 i odaberite boju ispune.
   
5. Nakon primjene promjena, dobijamo sljedeći rezultat glatkog prijelaza:
   
   
6. Ostaje samo ukloniti odabir pomoću CTRL+D i gotovi ste:
   
   

Kao što vidite, nema ništa teško napraviti glatke prijelaze između boja u Photoshopu. Predstavili smo čak 3 načina kako to učiniti, od kojih je svaki prikladan u određenoj situaciji.

To je sve! Vidimo se na našim narednim časovima!

Slažem se, jedan od najneobičnijih darova su kolaži. Oni mogu ukrasiti unutrašnjost, nasmijati prijatelje i zadovoljiti voljene. Originalne fotografije se obično naručuju iz foto studija ili ih sami pokušavate snimiti na kompjuteru. Da bi preklapanje jedne fotografije na drugu izgledalo organski, morate naučiti nekoliko jednostavnih kombinacija. Najvažnije je da nema kontrasta između okvira. Prilikom odabira pozadine za kolaž, vodite računa o bojama i smjeru svjetlosti na obje fotografije, kao i o veličini objekata i glavnog objekta. Da biste razumjeli kako napraviti glatki prijelaz u Photoshopu, samo proučite proceduru predstavljenu u ovom članku.

O proceduri

Pokušajte da uvežbate sledeći redosled radnji.

Studiranje grafički uređivači omogućit će vam stvaranje neobičnih radova, ispravljanje slika, uređivanje i stvaranje nevjerovatnih kompozicija s bilo kojim fotografskim materijalom!

Nadamo se da će vam naš članak omogućiti da uspješno završite zadatak, kao i da zaista uživate u ovom uzbudljivom i kreativnom procesu.

Izrada 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 uredi fotografije tako da izgledaju elegantno i atraktivno. Uspješan i uočljiv kolaž bit će onaj u kojem ne postoje vidljive granice 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 program Photoshop

Uputstva

Otvorite dvije fotografije približno iste veličine koje želite kombinirati u kolaž.

Pritisnite tipku V da aktivirate alat za pomicanje i prevucite jednu fotografiju na drugu tako da se obje nalaze u istom prozoru na dva različita sloja.

Odaberite gornji sa liste dva sloja koja se pojavljuju, a zatim mu dodajte vektorsku masku (Dodaj masku sloja).

Ikona maske u obliku bijelog kvadrata pojavit će se blizu ikone fotografije u redu slojeva. Kliknite na njega da aktivirate sloj. Ikona će biti okružena crnim okvirom koji označava njenu aktivnost.

Na traci s alatima odaberite gradijent i odredite smjer gradijenta crtanjem linije od donjeg desnog do gornjeg desnog kuta. Primijetit ćete kako jedna od slika počinje da se pojavljuje kroz drugu gdje ste nacrtali ugaoni gradijent.

Eksperimentirajte i mijenjajte dužinu i širinu gradijenta dok ne budete zadovoljni rezultatom i dok se slike glatko i lijepo ne prelijevaju jedna u drugu na mjestu gdje želite da se pojavi prijelaz.

Da biste postigli željeni efekat, gradijent koristite samo kada aktiviran način rada maske slojeva - inače ništa neće raditi.

Izađite iz režima maske klikom na ikonu fotografije u sloju nakon što je vaš kolaž spreman.

Spojite slojeve i sačuvajte kolaž u željenom formatu.

Pozdrav dragi početnici webmasteri. Opet .

U ovom članku ću vam reći kako napraviti prijelaz iz tamnih nijansi u svjetlije, kao i iz jedne boje u drugu.

Ova akcija se zove gradijent, i pošto u suštini i jeste pozadinska slika, zatim izvršava pozadinsko svojstvo koje uzima dvije vrijednosti:

1. linearni gradijent - prelaz boje sa jedne ivice ili ugla u drugi.

2. radijalni gradijent - prijelaz boje od centra do rubova.

Napisano je kako slijedi:

background : -moz-linear-gradient (vrh, #ff0000, #ffcfcf );
vrh, #ff0000, #ffcfcf );

U nastavku ćemo, koristeći primjer, detaljno ispitati svaki element ovog zapisa.

Nažalost, gradijent još uvijek ima problema s prikazom u pretraživačima i W3C specifikacijom, tako da vrijednosti i dalje moraju imati prefiks.

Prefiks se stavlja na početak vrijednosti i počinje crticom.

Morat ćemo umetnuti takvu listu u selektor elemenata, kreirajući gradijent za nju, tako da će se vaša vrlo lijepa pozadina ispravno odražavati u svim pretraživačima. Ljepota zahtijeva žrtvu.

Это самый простой, двухцветный градиент. Разберём подробно значения свойства background

В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.

Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.

Затем, в круглых скобках:

top — направление от которого начинается первый цвет (может быть bottom , left , right )

#ff0000 — через запятую первый цвет;

#ffcfcf — через запятую второй цвет;

У Safari, до 5-ой версии, и у Chrome до десятки был свой собственный синтаксис, заметно увеличивающий код. Наверное поэтому, градиент для этих версий, зачастую, не указывается, особенно при наличии большого количества цветов.

Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:

bottom right — от правого нижнего угла к левому верхнему;

bottom left — от левого нижнего к правому верхнему;

top right — от правого верхнего к левому нижнему;

top left — от левого верхнего к правому нижнему;

Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)

#gradient {
background : #ff0000 ;
background : -moz-radial-gradient (center, ellipse cover, #ff0000, #ffcfcf );
background : -webkit-radial-gradient (center, ellipse cover, #ff0000, #ffcfcf );
center, ellipse cover, #ff0000, #ffcfcf );
center, ellipse cover, #ff0000, #ffcfcf );
width : 600px ;
height : 400px ;
border : 1px solid #333 ;
}

А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)

Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.

#gradient {
background : #ff0000 ;
background : -moz-radial-gradient ();
background : -webkit-radial-gradien t(center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
background : -o-radial-gradient (center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005 );
background : -ms-radial-gradient (center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
width : 600px ;
height : 400px ;
border : 1px solid #333 ;
}

Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.

Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).

Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.

Поэтому я пользуюсь инструментом colorscheme.ru , в котором можно подобрать цвет в неограниченном диапазоне, и оптимально подобранных последовательностях и сочетаниях.

В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.

В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.

В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.

Желаю творческих успехов.

— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!

Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!