Astăzi vă voi arăta cum să faci o tranziție lină între două fotografii.
Am facut o poza in avans si acesta este rezultatul pe care l-am obtinut:
Pentru a obține o astfel de poză, voi face două fotografii, pe care le voi combina.
Am făcut un fundal frumos cu marea și o fotografie a unei fete care a fost fotografiată pe un fundal de copaci posomorâți fără frunze.
Deci, să începem - voi face tranziție lină a culorilor si pentru asta voi urma pasii de mai jos:
Pasul 1
Deschiderea fotografiilor mele în Photoshop și utilizarea instrumentului In miscare trageți fotografia fetei pe fotografia de fundal marin.
Vreau să reduc puțin fotografia fetei și pentru asta sun Transformare liberă prin apăsarea comenzii rapide de la tastatură CTRL+ T.
Rama care a apărut în jurul fotografiei cu fata are noduli pentru care puteți trage și reduce dimensiunea fotografiei, în timp ce țineți tasta Schimb, astfel încât proporțiile imaginii să nu fie distorsionate.
Pasul 2
Acum trec la paletă Straturi si fiind pe stratul cu fata, dati click pe pictograma numita Adăugați mască vectorială.
După cum vedem în paletă Straturi pe stratul cu fata se formează o mască de strat, care este evidențiată cu un cadru, ceea ce indică faptul că masca este activă și se va desfășura toată munca pe care o voi efectua, și anume, pe masca de strat.
Pe panoul de sus, unde se află toate setările instrumentului Gradient dau click pe săgeată lângă pictograma instrument și în fereastra de gradient care apare, aleg gradient radial, care merge de la negru spre transparent.
Acum desenez liniile de gradient înainte de a ajunge la forma fetei așa cum se arată în imagine (poți avea mai multe direcții). Pe măsură ce desenați o linie de gradient, fundalul se estompează.
Mi-a luat de două sau trei ori să trasez o linie de gradient în fiecare dintre direcțiile indicate în imagine pentru a obține rezultatul pe care îl vedeți în imaginea de mai jos.
Pasul 4
Cu toate acestea, putem observa că, odată cu dispariția fundalului aparținând fotografiei fetei, imaginea fetei în sine s-a schimbat oarecum, deoarece în unele locuri a devenit translucidă.
Dar este foarte ușor să-l repari.
În timp ce pe masca de strat, iau o rundă moale perie albși pictează cu această pensulă pe fată.
Peria albă restabilește toate zonele pierdute ale imaginii fetei.
De asemenea, vrem să vă reamintim că puteți discuta oricând despre subiectele Photoshop pe forumul Photoshop și puteți găsi răspunsuri la multe dintre întrebările dvs.
Iată rezultatul:
Am îmbinat cele două fotografii împreună folosind un amestec.
Sper ca am explicat clar cum să faci o tranziție linăîntre cele două fotografii - după cum puteți vedea este destul de simplu.
De asemenea, vă sfătuiesc să vă uitați la lecția mea anterioară. Valentine în Photoshop, în care sunt multe lucruri interesante.
Vă doresc succes în continuare în stăpânirea Photoshop-ului!
Galina Sokolova a fost cu tine.
1 votO zi bună, dragi cititori. Astăzi am decis să vă demonstrez că cel mai bun mod de a învăța teoria este prin practică. Chiar dacă ești începător, în literalmente o oră poți obține un rezultat bun fără să înțelegi nimic în Photoshop! Uite, această imagine a fost creată doar datorită degradelor. Ele sunt aplicate la diferite elemente și în diferite variații.
Dacă citiți acest articol până la sfârșit, nu numai că veți învăța cum să faceți o tranziție lină de culoare în Photoshop, ci și să aplicați aceste cunoștințe în practică în legătură cu text, o formă, să creați romburi frumoase pâlpâitoare și multe altele.
Am facut deja aceasta poza. Dacă doriți, atunci puteți crea pe cont propriu exact la fel, sau poate chiar mai bine, dar vă voi învăța printr-un alt exemplu. Care? Aflați la sfârșitul articolului. Voi desena cu tine și voi descrie procesul în același timp, eu însumi nu știu încă ce voi obține. Datorită acestui lucru, voi putea vedea ce probleme puteți întâmpina și voi ajuta să le rezolv.
Cunoștințe de bază și un secret al opțiunii întotdeauna câștigătoare
Deci, mai întâi trebuie să deschidem Photoshop. Vă recomand cu căldură să descărcați acest program ( puteți cumpăra versiunea cu licență aici ). Nu vei găsi niciodată mai bun decât ea. Dacă ți-e teamă că nu îl vei stăpâni și vei irosi banii, uitând complet de program după prima încercare, poți încerca serviciul online https://editor.0lik.ru/ ... Este mult mai convenabil să ai propriul tău program și foarte curând vei înțelege de ce.
Așa arată versiunea 2015 de Photoshop, dacă aveți o altă ediție, atunci nu vă faceți griji. Totul va fi cam la fel. Ai ceva mai puține opțiuni și aceasta este singura diferență.
Creați un document nou.
Alegerea unei marimi este una dintre cele mai dificile intrebari pentru mine. Ca bază, am luat dimensiunea maximă a imaginii pentru o postare pe rețelele de socializare. 800x500, dar, după cum vă puteți imagina, nu acesta este ideea. Totul depinde de scopurile și obiectivele pe care le vei realiza cu Photoshop.
Uite, panoul din dreapta conține toate butoanele principale, inclusiv gradientul. Cu toate acestea, nu poate fi găsit acum. Cum așa? Eu însumi m-am confruntat cu această problemă când am început să învăț cum să lucrez cu Photoshop. Citiți un articol și jumătate din informațiile pe care trebuie să le căutați în surse terțe. Google, Google, Google.
Să mă ierte un cititor foarte deștept, care știe totul foarte bine pentru mici abateri de la subiect. Vreau ca toți vizitatorii blogului să poată lucra cu lecțiile mele. Poate că într-o zi îți va fi foarte util. Vă va economisi mult timp.
În colțul din dreapta jos al aproape fiecărui buton, cu excepția lupei, există ceva ca o săgeată. Acest lucru indică faptul că există mai multe instrumente ascunse în buton.
Țineți apăsat butonul stâng al mouse-ului pentru câteva secunde pentru a deschide un meniu suplimentar și a selecta un gradient.
Un alt meniu suplimentar deschis în partea de sus. Se folosește exclusiv pentru degrade. Poke at text - se va deschide un meniu special de text în partea de sus, o perie și... ei bine, ați înțeles ideea.
Faceți clic pe săgeata de lângă pictograma de culoare. Aici sunt stocate tranzițiile standard sau cele pe care le-ați descărcat.
Dacă nu vă considerați un geniu al designului, atunci vă recomand să descărcați șabloane gratuite de pe Internet. Sunt destule. În primul rând, economisește timp și, în al doilea rând, mai multe opțiuni similare, de regulă, sunt combinate într-o temă creată în același stil. acest lucru poate fi aplicat cu ușurință la o singură imagine și aproape întotdeauna va arăta bine.
Instalarea de noi șabloane nu este o problemă. Descărcați-le de pe Internet apoi selectați nuca din colțul din dreapta sus și găsiți linkul „Descărcați...”.
Selectați folderul cu fișierele descărcate pe computer și salvați.
Acestea vor fi adăugate în partea de jos a listei.
Completati
Acum să învățăm cum să umplem. Alegeți orice opțiune care vă place (vom trece la creare puțin mai târziu) și faceți clic pe ea. Oriunde pe ecran, țineți apăsat butonul stâng al mouse-ului și deplasați-vă în orice direcție. Locația tranziției de culoare depinde de aceasta.
Vezi diferenta.
Te poți învârti oriunde.
Pentru a preveni mișcarea liniei și neclaritatea gradientului, țineți apăsată tasta Shift în timp ce setați direcția.
Vedeți, tranziția de culoare este acum în centru. Vom arunca o privire mai atentă asupra setărilor atunci când ne creăm propriul gradient. Acum voi vorbi doar despre offset-ul central. Facem clic pe această placă.
Luați culoarea de mai jos cu butonul stâng al mouse-ului și mutați-o la stânga sau la dreapta.
Iată cu ce am ajuns.
Cum să aplicați un gradient textului pentru a face literele să pară moderne
Acum hai să scriem ceva. Selectăm butonul corespunzător.
Dacă trebuie să schimbați dimensiunea sau fontul în sine, acordați atenție panoului din partea de sus a ecranului. Totul este simplu acolo.
Acum apăsați Ctrl și, în același timp, faceți clic pe pictograma noului strat de text. Fiți atenți, trebuie să faceți clic nu pe text, ci pe dreptunghi, așa cum se arată în captura de ecran de mai jos.
Acum creăm un nou strat. Există trei opțiuni pentru rezolvarea problemei: ținem simultan apăsat Shift, ctrl, N; utilizați panoul de sus, găsiți acolo „Layer - new - create”; utilizați butonul din meniul rapid din dreapta. În poza de mai jos, am arătat-o cu o săgeată.
Acum, pentru a elimina evidențierea din jurul marginilor literelor, puteți face clic pe selecție, apoi faceți clic pe orice parte a imaginii. Obțineți următorul rezultat.
Lucrarea cu textul nu se termină aici. Uite, avem 2 straturi: unul cu gradient, iar al doilea cu litere. De ce s-a întâmplat acolo? O sa explic cat pot. Scrieți în comentarii dacă nu este clar. Ai scris textul. Photoshop și-a dat seama că acestea sunt litere și chiar a sugerat să le măriți, să le reduceți, să schimbați fontul și așa mai departe.
Atunci ai ales această piesă. Am creat un nou strat, dacă desenăm o analogie, tăiem un șablon din hârtie și îl umplem. În acest moment, Photoshop s-a pierdut. A încetat să vă vadă scrisorile. Pentru el, este doar o parte a unei imagini, cum ar fi un romb, un pătrat sau un cerc în centrul sculptat. Dacă te duci să lucrezi cu literele de pe strat, vei eșua, dacă vrei să aplici un gradient textului - același lucru.
Dacă acum decideți să mutați textul undeva și urcați în secțiunea corespunzătoare și apoi începeți să mutați săgeata, atunci totul se va muta pentru tine.
Înlăturăm stratul de text pentru a evita confuzia. Faceți clic pe el cu butonul din dreapta al mouse-ului și selectați opțiunea dorită.
Vizualizări în degrade, forme de umplere și asteriscuri
Dacă ai acordat atenție barei de gradient de deasupra, s-ar putea să descoperi că acestea sunt diferite: liniare, radiale, unghiulare, oglindă sau în formă de romb. Nu este greu să vezi diferențele, pentru asta nu trebuie să citești articolele, doar deschide o foaie goală și încearcă să aplici una sau alta opțiune. Vezi ce sa întâmplat.
Singurul lucru care merită remarcat este că, dacă doriți să vedeți rezultatul perfect, ca în poza mea, săgeata trebuie direcționată din centru.
Acum să revenim la imaginea noastră. Lasă-mă să te învăț un truc interesant. Tranzițiile de culoare pot fi utilizate în formele pe care le desenați. Acest lucru este foarte util, mai ales pentru cei care urmează să creeze site-uri web.
Deci, alegeți un dreptunghi sau un cerc. Nu conteaza.
Acum culoarea de umplere.
Accesați secțiunea cu degrade.
Avem nevoie de un romb aici.
Vedeți, acesta este un efect interesant, dar culoarea albă strică totul. Avem nevoie de unul transparent. Găsit în interiorul șabloanelor. Dacă vedeți o astfel de grilă în interiorul șablonului, atunci acesta este ceea ce avem nevoie.
Joacă-te cu setările și vei avea cea ideală.
Acum să clonăm acest bliț. Alegerea unei mișcări. Doar faceți clic pe butonul.
Acum țineți apăsat alt și trageți duplicatul în lateral.
Am obtinut urmatorul rezultat.
Cum să creați un nou gradient și butoane pentru site-uri web
Și, în cele din urmă, vă voi spune cum să creez eu însumi degrade de la zero și, în același timp, să le dau seama de setările acestora. Să creăm un buton frumos? Voi adăuga un dreptunghi rotunjit la imaginea mea.
Așa arată. De data aceasta nu vom folosi umplerea interioară. Nu este foarte convenabil să lucrezi cu un șablon nou prin intermediul acestuia. Să fie doar negru deocamdată.
Selectați instrumentul familiar și faceți clic pe placă.
Noile degrade se bazează pe cele vechi. Faceți clic pe oricare. Vechea versiune nu va dispărea nicăieri. Apoi veniți cu un nume nou și salvați-l.
Punctele de control superioare pot fi folosite pentru a controla nivelurile de transparență.
Cu ajutorul celor inferioare se lucrează cu culoarea. Pentru a extinde gama, faceți clic lângă orice punct și acesta va fi duplicat.
Puteți crea câte doriți.
Pentru ca tranziția să pară modernă, trebuie să neteziți culorile. Nu atingeți acest indicator și totul va fi ok. Ar trebui să fie 100%. Gata. Puteți face clic pe „OK” sau „Salvați” - totul depinde de dorința dvs.
Acum repetăm ceea ce am făcut deja recent cu textul. Țineți apăsat ctrl, apăsați butonul stilului dorit în centru și creați unul nou pe baza acestuia.
Acum adăugați tranziția și voilà.
Adăugați text la buton și gata. Nu este clar de ce dispozitivul necesar este terminat. Apropo, puteți descărca sursa mea dacă doriți ( Descărcați sursa gradient.psd ). Puteți să-l deschideți în Photoshop și să îmi îmbunătățiți imaginea. Cred că nu va fi greu.
OK, totul sa terminat acum. Acum știi destul de multe despre degrade. Dacă ești designer, layout designer, creator de site sau vrei să devii unul, iar această lecție a fost cu adevărat utilă pentru tine - abonează-te la newsletter și află mai multe despre ceea ce te interesează. De asemenea, puteți acorda atenție acestui site: https://photoshop-master.org/disc149/ ... Aici puteți găsi o mulțime de cursuri plătite și gratuite, care vă vor învăța să lucrați profesional cu Photoshop.
Succes si ne vedem curand.
Realizarea unui colaj nu înseamnă doar combinarea mai multor fotografii într-una singură. Colajul corect arată priceperea autorului și, de asemenea, demonstrează capacitatea sa de a aranja frumos și competent fotografiile, astfel încât să pară elegant și atractiv. Un colaj va fi reușit și vizibil, în care nu există limite vizibile între fotografii - în schimb, fotografiile par să curgă unele în altele. Acest efect poate fi obținut cu pași simpli în Adobe Photoshop.
Vei avea nevoie
- - program Adobe Photoshop
Instrucțiuni
Mutați a doua fotografie la cea deschisă anterior.
Puteți citi mai multe despre alăturarea fotografiilor în.
Apoi, folosind Instrumentul de mutare, setați locația dorită a fotografiilor una față de alta. Este necesar să vă asigurați că o fotografie se suprapune pe cealaltă, iar o tranziție lină va fi montată în locul suprapunerii. Pentru comoditate, puteți reduce temporar opacitatea imaginilor din panoul Straturi, de asemenea, este o idee bună să puneți ghiduri pe limitele suprapunerii.
Acum vom determina ce fotografie va fi deasupra și, dacă este necesar, vom schimba poziția straturilor în panoul Straturi. Am o imagine pe Twitter deasupra.
Apoi setați opacitatea straturilor de imagine înapoi la sută la sută.
Și acum, să trecem la crearea unei tranziții ușoare între fotografii, în acest exemplu o vom face folosind o mască de strat și aplicând un gradient alb-negru.
Adăugați o mască de strat la stratul cu fotografia de sus făcând clic pe pictograma corespunzătoare din partea de jos a paletei, în timp ce culorile din paleta de culori se schimbă automat în negru ca culoare principală și alb ca culoare de fundal, se va afișa o pictogramă de mască. apar în panoul Straturi pe stratul corespunzător. Apoi deschideți Instrumentul Gradient din Paleta de instrumente. În colțul din stânga sus al ferestrei de lucru Photoshop, faceți clic pe triunghi pentru a deschide paleta de gradient și selectați-o pe prima, care are numele „De la culoarea principală la fundal”. Apoi trasăm o linie de la un ghid la altul în direcția prezentată în figură.
Pentru a desena linia de gradient strict orizontal (sau, în alte cazuri, strict vertical), țineți apăsată tasta Shift.
Ca rezultat, vom obține o tranziție lină la transparență a marginii din dreapta a imaginii de sus, ceea ce dă efectul unei tranziții lină între cele două fotografii.
Pe pictograma masca din Panoul Straturi, vom vedea urmatoarele modificari, culoarea neagra arata transparenta totala, iar albul, dimpotriva, opacitatea deplina a imaginii la care se aplica masca de strat.
Asta, de fapt, este tot, sarcina este finalizată!
Bună ziua dragi webmasteri începători. Din nou .
În acest articol vă voi spune cum să faceți trecerea de la nuanțe închise la nuanțe mai deschise, precum și de la o culoare la alta.
Această acțiune se numește gradient și, deoarece este în esență o imagine de fundal, este executată de proprietatea de fundal, care ia două valori:
1.linear-gradient - tranziție de culoare de la o margine sau colț la alta.
2. radial-gradient - tranziție de culoare de la centru la margini.
Este scris astfel:
fundal: -moz-linear-gradient (sus, # ff0000, #ffcfcf);
sus, # ff0000, #ffcfcf);
Mai jos, folosind un exemplu, vom analiza în detaliu fiecare element al acestei înregistrări.
Din păcate, gradientul are în continuare probleme cu randarea în browsere și cu specificația W3C, așa că mai trebuie să folosiți prefixe în valori.
Un prefix este pus la începutul valorii și începe cu o liniuță.
Va trebui să inserăm o astfel de listă în selectorul de elemente, creându-i un gradient, pentru ca fundalul tău foarte frumos să se reflecte corect în toate browserele. Frumusețea necesită sacrificii.
Acesta este cel mai simplu gradient, cu două tonuri. Să analizăm în detaliu valorile proprietății de fundal
Prima linie setează fundalul pentru browserele care nu acceptă gradienți liniari.
Următoarele 5 rânduri sunt pentru afișarea fundalului în diferite browsere. În primul rând, valoarea gradientului este scrisă cu un prefix la început.
Apoi, între paranteze:
sus - direcția din care începe prima culoare (poate fi jos, stânga, dreapta)
# ff0000 - prima culoare separată prin virgule; 
#ffcfcf - a doua culoare separată prin virgule;
Safari până la versiunea 5 și Chrome până la duzină aveau propria lor sintaxă, ceea ce mărește semnificativ codul. Acesta este probabil motivul pentru care gradientul pentru aceste versiuni adesea nu este specificat, mai ales atunci când există o mulțime de culori.
Puteți face tranziția de culoare nu pe orizontală sau pe verticală, ci din colț în colț. Pentru aceasta, există următoarele direcții:
dreapta jos - din colțul din dreapta jos până în stânga sus;
stânga jos - de la stânga jos la dreapta sus;
dreapta sus - de la dreapta sus la stânga jos;
stânga sus - de la stânga sus la dreapta jos;
Puteți face o tranziție de culoare de la centrul blocului la margini. Apoi, în sensul în locul cuvântului liniar (liniar), puneți radial (radial)
#gradient (
fundal: # ff0000;
fundal: -moz-radial-gradient ( centru, capac elipsă, # ff0000, #ffcfcf);
fundal: -webkit-radial-gradient ( centru, capac elipsă, # ff0000, #ffcfcf);
centru, capac elipsă, # ff0000, #ffcfcf);
centru, capac elipsă, # ff0000, #ffcfcf);
latime: 600px;
înălțime: 400px;
chenar: 1px solid # 333;
}
Acum să facem ceva ca un curcubeu, ca să spunem așa. Pentru a face acest lucru, mai adăugați câteva culori la codul de mai sus și setați volumul fiecărei culori ca procent (numărul de culori nu este limitat)
Volumul culorii este setat de la 0% la 100%, (primul - 0%, ultimul - 100%, restul între ele în ordine). Luați în considerare această opțiune pe un gradient radial. Pe unul liniar, totul se face în același mod.
#gradient (
fundal: # ff0000;
fundal: -moz-radial-gradient ();
fundal: -webkit-radial-gradien t ( centru, capac elipsă, # ff0000 0%, # 00b630 30%, # 6ff5f5 70%, #ffcfcf 100%);
fundal: -o-radial-gradient ( centru, capac elipsă, # ff0000 0%, # 00b630 30%, # 6ff5f5 70%, # ffcfcf1005);
fundal: -ms-radial-gradient ( centru, capac elipsă, # ff0000 0%, # 00b630 30%, # 6ff5f5 70%, #ffcfcf 100%);
latime: 600px;
înălțime: 400px;
chenar: 1px solid # 333;
}
Principiul, cred, este clar. Deci linia pentru Safari până la versiunea a cincea și Chrome până la a zecea, încercați să o scrieți singur.
Gradientul poate fi setat pentru orice bloc HTML (body, div, h1-6, p, ul, ol), atât stil global cât și inline (acesta este pentru un site WordPress).
Acum câteva cuvinte despre cum și unde să selectați culorile. Există servicii de gradient care oferă culoare, procent de volum și cod de gradient, dar opțiunile lor sunt limitate.
Prin urmare, folosesc instrumentul colorscheme.ru, în care puteți alege o culoare într-o gamă nelimitată și secvențe și combinații selectate optim.
Numărul de culori combinate este selectat în rândul de sus al panoului. După ce parcurgeți „Unghiul 30 °”, intervalul de selecție se schimbă.
În „Schema de ajustare”, tonul este mai închis sau mai deschis. În „Lista de culori”, toate culorile prezente în schemă sunt aranjate prin saturație și cu un cod în semnătură.
În general, posibilități nelimitate de selecție a culorilor pentru crearea unui gradient.
Vă doresc succes creativ.
- Rabinovici! Ai o schimbare de o sută de dolari?
- Nu, dar mulțumesc pentru compliment!
Două femei din Odesa:
- Rose, ce-ți place noua mea rochie?
- Îmi pare rău, Sarah, mă grăbesc, acum nu sunt până la scandal!
