Zanimljive upute za programiranje obrade za dizajnera-Kontrola boje: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:32

U prethodnim poglavljima govorili smo više o tome kako koristiti kôd za oblikovanje umjesto znanja o boji. U ovom poglavlju ćemo dublje istražiti ovaj aspekt znanja.

Korak 1: Osnovno znanje o boji

Boja je u određenom aspektu nadmašila ljudsku intuiciju. Razne lijepe boje koje smo vidjeli golim okom zapravo se sastoje od istih komponenti. Samo s tri svijetle boje, crvenom, zelenom i plavom, možemo stvoriti sve boje koje se ljudskim očima mogu vidjeti kroz mješavinu.

Mobilni ekrani i ekrani računala koje trenutno vidite stvoreni su na temelju ovog načela. Crvena, zelena i plava nazivaju se tri izvorne boje svjetlosti. Omjerom triju elemenata možemo osigurati određenu boju. Ova metoda opisa naziva se i RGB način rada. Među njima je crvena R, zelena G i plava B.

Osim RGB načina, postoji još jedan način koji se naziva CMYK način. Obično se kombinira s tiskom. U tisku postoje i tri izvorne boje. Međutim, razlikuje se od tri izvorne boje svjetlosti. Odvojeno su crvena, žuta i plava. Među njima, C je za cijan, M je za magenta, a Y za žutu. Teoretski, samo pomoću CMY -a možemo pomiješati većinu boja. No, zbog tehnike proizvodnje sirovina, teško možemo postići da zasićenje CMY -a postigne 100%. Pomiješamo li ove tri boje, ne možemo dobiti dovoljno tamnu crnu boju. Dakle, postoji dodatni K, koji je za crnu tiskarsku tintu, kao dodatak ispisu.

Što se tiče RGB -a i CMYK -a, morate samo znati da postoji najočitija razlika u prirodi. RGB je plus način rada u boji, koji povećava svjetlinu miješanjem više boja. Dok je CMYK minus način rada u boji, koji povećava tamu miješanjem više boja. Na donjoj slici možemo vizualno vidjeti sličnosti i razlike dvaju načina. Lijevu sliku, možemo zamisliti kao mračnu kuću s tri različite boje upaljenih svjetiljki. Slika desno, možemo je smatrati papirom za akvarel nakon preklapanja s tri pigmenta crvene, zelene i plave boje.

Ako želite dublje upoznati njegovu relativnu povezanost između različitih načina boja, možete otvoriti svoj Photoshop i odabrati birač boja. Tada možete intuitivno vidjeti vrijednosti boje iste boje u različitim načinima boja.

U posljednjem bismo za vas htjeli predstaviti još jedan uobičajeni način boja, HSB. HSB nema koncept "izvorne boje". Razvrstan je prema osjećajima ljudskih očiju prema bojama. H označava nijansu, S zasićenje, a B svjetlinu.

Nijansa predstavlja tendenciju boje. Svaka boja ima određenu tendenciju boje samo ako nije crna, bijela ili siva. Najbogatije područje prijelaza boje na biraču boja koristi se za označavanje nijanse. Njegova vrijednost u PS kreće se od 0 do 360.

Zasićenost znači čistoću boje. Veća čistoća donosi življe boje. Njegova vrijednost u PS kreće se od 0 do 100.

Svjetlina znači stupanj svjetline boje, u rasponu od 0 do 100.

U usporedbi s RGB načinom, tri dimenzije HSB -a mnogo su usklađenije s osjećajem ljudskih očiju za bojama. Pogledajte samo vrijednosti HSB -a, općenito možete zamisliti o kakvoj je boji riječ.

Što se tiče iste boje, vrijednost boje u RGB načinu rada je (255, 153, 71), dok je u HSB -u (27, 72, 100).

Teško je procijeniti kako će to izgledati nakon miješanja tri izvorne boje zajedno ako pogledamo samo RGB. Ali HSB je drugačiji. Morate se samo upoznati s nijansama boja kao što je crvena 0, narančasta 30 i žuta 60, tada ćete znati da će to biti relativno zasićena narančasta boja s visokom svjetlinom i malo blizu crvene kad je H 27.

Zatim ćemo tri dimenzije dvaju načina prilagoditi u x, y, x u prostoru i nacrtati kubičnu boju radi usporedbe.

RGB i HSB samo su različite metode za opisivanje boja. Adresu možemo uzeti kao metaforu. Pretpostavimo da ako želite drugim ljudima reći položaj Imperijalne palače, možete reći da se nalazi na broju 4 u ulici Jingshan Front Street, područje Dongcheng, Peking. Ili možete reći da je na 15 sekundi, 55 minuta, 39 stupnjeva na sjevernoj širini i 26 sekundi, 23 minute, 116 stupnjeva na istočnoj zemljopisnoj dužini. Metoda opisa HSB -a slična je prethodnoj. Ako ste upoznati s relativnim područjem, općenito možete znati položaj adrese. Iako je RGB možda točniji, ali je vrlo apstraktan.

Način HSB postojao je sa svrhom da nam pomogne da prikladnije opišemo boju. Za prikaz određene vrste boja na zaslonu, konačno je moramo prvo pretvoriti u RGB način rada.

U gore navedenom uvodimo tri načina boje: RGB, HSB, CMYK. U programu se morate usredotočiti samo na dva načina rada: RGB i HSB. Oni imaju svoje prednosti i svoje aplikacije u isto vrijeme. Ako ste upoznati s njim, zadovoljit će vaše zahtjeve za većim dizajnom.

Korak 2: Vrsta podataka za spremanje boja

Za prikaz boja u programu, uglavnom smo koristili RGB način rada u prethodnom. Međutim, samo kontroliranjem tri svojstva možemo prikazati bilo koju boju? U računalu je to ovako.

Prije smo to spomenuli u Obradi, osim za R, G, B, možemo označiti alfa (prozirnost) za boje. Ali alfa ne pripada komponenti boje. Njegovo postojanje je prikladna mješavina s bojama iza. Stoga, da bi računala točno opisala određenu vrstu boje, moramo kontrolirati samo ključne tri varijable.

U nastavku započinjemo s uvođenjem vrste podataka Color, koja se uglavnom koristi za spremanje boja. Slično je prethodno spomenutim vrstama podataka poput boolena, int, float.

Dopustite mi da najprije detaljno objasnim stvarnu uporabu boje. Zamislite ovo: pretpostavimo da ako možemo koristiti samo prethodno savladane metode za pohranu određenih podataka, što ćemo učiniti?

Primjer koda (9-1):

[cceN_cpp theme = "svitanje"] int r, g, b;

void setup () {

veličina (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

pozadina (0);

rectMode (CENTAR);

ispuniti (r, g, b);

pravokutni (širina/2, visina/2, 100, 100);

}

[/cceN_cpp]

Što se tiče boja koje imaju tendenciju boje, moramo stvoriti tri varijable za pohranu podataka u tri kanala u boji, crvenoj, zelenoj i plavoj. Kasnije, ako želimo pozvati ovaj skup podataka o boji, moramo ga zapisati u fill ili stroke.

Ali uvidjet ćete da je to previše problematično jer su podaci međusobno povezani. Ako imate ideju zapakirati ih u uporabu, bit će vam prikladnije. Stoga se stvara boja.

Primjer koda (9-2):

[cceN_cpp theme = "dawn"] boja myColor;

void setup () {

veličina (400, 400);

myColor = boja (255, 0, 0);

}

void draw () {

pozadina (0);

rectMode (CENTAR);

ispunite (myColor);

pravokutni (širina/2, visina/2, 100, 100);

} [/cceN_cpp]

Isto kao i tipovi podataka poput int, na početku moramo koristiti „color myColor“za stvaranje varijabli.

U postavljanju koristimo “myColor = color (255, 0, 0)” za dodjeljivanje vrijednosti varijabli myColor. Dok boja funkcije (a, b, c) s pravom predstavlja da je ovaj skup podataka oblikovao tip boje za uvoz varijable myColor. Ako napišete “myColor = (255, 0, 0)”, program će poći po zlu.

U posljednjem, koristimo fill () za realizaciju operacije umetanja boja. Funkcije fill () i stroke () omogućuju preklapanje. Ovisno o količini i vrsti parametara, imat će različite učinke. Uvoz samo jedne cjelobrojne varijable, što predstavlja boju samo s sivim tonovima. Dok uvozite promjenjivu boju, to znači da će raspon boja biti veći. Također možete uvesti varijablu boje i cjelobrojnu varijablu, promijeniti gornju funkciju fill () u fill (myColor, 150), zatim možete kontrolirati alfa s drugim parametrom.

Korak 3: Metoda popunjavanja koja se preklapa

potez, pozadina imaju istu metodu preklapanja s ispunom.

Pročitajte vrijednost boje kanala

Osim dodjeljivanja, također možete neovisno dobiti RGB vrijednost u varijabli boja

Primjer koda (9-3):

[cceN_cpp theme = "dawn"] boja myColor;

void setup () {

myColor = boja (255, 125, 0);

println (crveno (myColor));

println (zelena (myColor));

println (plavo (myColor));

}

[/cceN_cpp]

Rezultat u konzoli: 255, 125, 0.

Funkcija red (), green (), blue () relativno će se vratiti na vrijednost crvenog, zelenog i plavog kanala u myColor -u.

Heksadecimalni zadatak

Osim korištenja decimalnih brojeva za prikazivanje RGB -a, možemo koristiti i heksadecimalni. Decimalno znači povećanje 1 kada zadovolji 10. Dok heksadecimalno znači povećanje 1 kada zadovolji 16. Njegov relativni odnos s decimalnim brojem je: "0 do 9" odgovara "0" do 9”,“A do F”odgovaraju“10 do 15”.

Na slici ispod prikazana je metoda pretvorbe.

Naravno, ako dobijemo skup heksadecimalnih vrijednosti poput ff7800, ne moramo ga ručno pretvoriti. Program će izravno dodijeliti vrijednosti varijablama boja. Vrlo je prikladno.

Na internetu možemo vidjeti mnoge kartice u boji koje prihvaćaju heksadecimalnu metodu za prikaz boje.

Poput driblinga zajednice dizajnera, umjetnička djela bit će priložene palete boja. Ako vidite omiljenu boju, možete je primijeniti na program.

Primjer koda (9-4):

[cceN_cpp theme = "dawn"] boja backColor, colorA, colorB, colorC;

void setup () {

veličina (400, 400);

rectMode (CENTAR);

noStroke ();

backColor = #395b71;

bojaA = #c4d7fb;

bojaB = #f4a7b4;

bojaC = #f9e5f0;

}

void draw () {

pozadina (backColor);

ispuna (colorA);

izravno (200, 200, 90, 300);

ispuna (boja B);

izravno (100, 200, 90, 300);

ispuna (colorC);

izravno (300, 200, 90, 300);

} [/cceN_cpp]

Sada je boja mnogo ugodnija s boljim učinkom od nasumičnog unosa vrijednosti.

Dodajte "#" ispred vrijednosti heksadecimalne boje, a zatim možete izravno dodijeliti vrijednost varijabilnoj boji.

Korak 4: HSB način rada

Osim RGB načina rada, dalje ćemo govoriti o HSB načinu rada. Slijedi prikaz načina dodjeljivanja vrijednosti u HSB načinu rada.

Primjer koda (9-5):

[cceN_cpp theme = "dawn"] void setup () {

veličina (400, 400);

colorMode (HSB);

}

void draw () {

pozadina (0);

rectMode (CENTAR);

za (int i = 0; i <20; i ++) {

boja col = boja (i/20.0 * 255, 255, 255);

ispuniti (col);

izravno (i * 20 + 10, visina/2, 10, 300);

}

} [/cceN_cpp]

U procesu obrade, da bismo prebacili HSB način rada, moramo samo dodati rečenicu colorMode (HSB). Upotreba funkcije colorMode () mijenja način rada u boji. Ako u zagradu upišemo “HSB”, bit će postavljen na HSB način rada; dok pišemo “RGB”, bit će premješten u RGB način rada.

Ono na što vrijedi obratiti pozornost je kad pišemo colorMode (HSB), zadana maksimalna vrijednost HSB -a je 255. To se prilično razlikuje od maksimalne vrijednosti u Photoshopu. U Photoshopu je maksimalna vrijednost H 360, maksimalna vrijednost S i B 100. Dakle, moramo izvršiti pretvorbu.

Ako je vrijednost HSB -a u Photoshopu (55, 100, 100), kada se pretvori u Obrada, ta bi vrijednost trebala biti (55 /360 × 255, 255, 255), tj. (40, 255, 255).

colorMode () je funkcija koja se može preklapati. U nastavku ćemo vam ga detaljno predstaviti.

Korak 5: Metoda preklapanja ColorMode

Stoga, ako ne želite ručno pretvoriti HSB vrijednost u Photoshopu, možete napisati “colorMode ()” u “colorMode (HSB, 360, 100, 100)”.

Slučaj primjene HSB načina rada 1

Budući da RGB način rada nije prikladan za kontrolu promjena nijanse, u ovom trenutku, ako želite fleksibilnije kontrolirati boje, razmislite o HSB načinu rada.

Primjer koda (9-6):

[cceN_cpp theme = "dawn"] void setup () {

veličina (800, 800);

pozadina (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

hod (int (millis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

newX = mouseX + (šum (millis ()/1000,0 + 1,2) - 0,5) * 800;

newY = mišY + (šum (millis ()/1000,0) - 0,5) * 800;

linija (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Kad kontroliramo H (nijanse) u potezu, koristili smo millis (). Dobivat će vrijeme rada od početka do danas. Tako će se, kako se vrijeme pomiče prema naprijed, vrijednost H (nijansa) automatski povećavati, a zatim će se i boja promijeniti.

Jedinica milis () je ms. Dakle, kada program radi 1 sekundu, povratna vrijednost bit će 1000. To će dovesti do prevelike vrijednosti. Zato ga moramo podijeliti s 1000,0.

Budući da se nadamo da će boje predstavljati periodičku cirkulaciju, pa moramo raditi modulo kada napokon upišemo prvi parametar u potezu. To može osigurati da će ponovno početi od 0 kada H (nijansa) pređe 255.

Funkcija strokeWeight () može kontrolirati debljinu linija. Odgovarajuća jedinica za parametre unutar zagrade je piksel.

Korak 6: Slučaj primjene načina rada 2

Primjer koda (9-7):

[cceN_cpp theme = "dawn"] int num; // količina trenutno iscrtanih linija

plovak posX_A, posY_A; // Koordinata točke A

plovak posX_B, posY_B; // Koordinata točke B

kut plovkaA, brzinaA; // Kut točke A, brzina

kut plovkaB, brzinaB; // Kut točke B, brzina

poluprečnik plovkaX_A, radijusY_A; // Polumjer ovalnog oblika formiran točkom A na X (Y) osi.

radijus plovkaX_B, radijusY_B; // polumjer ovalnog oblika formiran točkom B na X (Y) osi.

void setup () {

veličina (800, 800);

colorMode (HSB);

pozadina (0);

brzinaA = 0,0009;

brzinaB = 0,003;

radijusX_A = 300;

polumjerY_A = 200;

radijusX_B = 200;

radijusY_B = 300;

}

void draw () {

prevesti (širina/2, visina/2);

za (int i = 0; i <50; i ++) {

kutA += brzinaA;

kutB += brzinaB;

posX_A = cos (kutA) * radijusX_A;

posY_A = sin (kutA) * radijusY_A;

posX_B = cos (kutB) * radijusX_B;

posY_B = sin (kutB) * radijusY_B;

hod (int (broj/500,0) % 255, 255, 255, 10);

redak (posX_A, posY_A, posX_B, posY_B);

broj ++;

}

} [/cceN_cpp]

Učinak operacije:

Izlazna slika:

Uzorak koji ste vidjeli proizvodi pokretna linija kroz stalno preklapanje. Tragovi dviju krajnjih točaka crte dvije su kružnice odvojeno.

Kroz HSB način kontrolirali smo promjene nijanse. S povećanjem linija, nijansa će se pomaknuti. Kad se masivne poluprozirne linije preklapaju, stvorit će se vrlo bogat gradijent boje.

For petlju smo ugradili u iscrtavanje funkcije s ciljem korištenja for petlje za kontrolu količine retka. To je ekvivalentno kontroliranoj brzini crtanja. Povećanjem vrijednosti uvjeta procjene u for petlji, to će povećati crtanje seepd.

Dolje je shematski prikaz. Jasnije možete vidjeti tragove kretanja krugova.

Podesite različitu brzinu i radijus, i obrasci će biti različiti. Pokušajte promijeniti varijable kao što su kut, brzina, radiusX, radiusY i vidjeti što će se dogoditi.

Korak 7: Način miješanja slojeva

Različiti načini boja o kojima smo ranije govorili koriste se za bojenje grafičkih komponenti. Osim za korištenje ove metode za kontrolu boje, Obrada može koristiti različite načine miješanja slojeva poput Photoshopa.

Otvorite prozor sloja u PS -u, kliknite za odabir načina miješanja slojeva, tada možemo vidjeti ove opcije.

To su postojeći slojevi u PS -u. Jednostavno rečeno, način miješanja može se smatrati nekom vrstom izračuna boje. Odlučit će koja će se boja stvoriti posljednja kada "boja A" plus "boja B". Ovdje "boja A" znači boju iza trenutnog sloja (naziva se i osnovna boja). "Boja B" znači boju trenutnog sloja (naziva se i mješovita boja). Program će izračunati da dobije boju C prema RGB vrijednosti i alfa boji A i B. To će biti prikazano na ekranu kao rezultat boje.

Način rada s različitim slojevima označava različite metode izračuna. U sljedećoj polovici ove serije članaka ćemo to detaljno objasniti. Sada samo moramo znati njegovu upotrebu.

Pogledajmo primjer korištenja načina dodavanja u programu.

Primjer koda (9-8):

[cceN_cpp theme = "svitanje"] PImage image1, image2;

void setup () {

veličina (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

pozadina (0);

blendMode (ADD);

slika (slika1, 0, 0, 400, 400);

slika (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Proizlaziti:

Funkcija blendMode () koristi se za postavljanje načina miješanja grafike. Iza nas unosimo ADD znači da smo postavili način dodavanja.

U programu nema koncepta sloja. No, budući da postoji slijed crtanja grafičkih komponenti, pa se pri miješanju slika slika 1 smatra osnovnom bojom, a slika 2 mješovitom bojom.

Način ADD pripada "Brighten Class". Nakon uporabe, dobit ćete svjetliji učinak.

Dolje je način miješanja koji se može koristiti u obradi.

Korak 8: Obrada načina miješanja

Možemo pokušati promijeniti drugačiji način miješanja kako bismo vidjeli učinak.

Kada primjer (9-8) prihvati način preklapanja (pozadina bi trebala biti bijela):

Nakon korištenja načina Sažetak (pozadina bi trebala biti bijela):

Korak 9: Primjena načina rada za miješanje slojeva

Način miješanja ne može se koristiti samo za slike, već je prikladan i za sve grafičke komponente na platnu. Dolje je prikazano korištenje načina dodavanja. Može se koristiti za analogne različite svjetlosne efekte.

Primjer koda (9-9):

[cceN_cpp theme = "dawn"] void setup () {

veličina (400, 400);

}

void draw () {

pozadina (0);

blendMode (ADD);

int broj = int (3000 * mišX/400,0);

za (int i = 0; i <num; i ++) {

ako (slučajno (1) <0,5) {

ispuniti (0, 50, 0);

}drugo{

ispuniti (50);

}

elipsa (slučajna (50, širina - 50), slučajna (50, visina - 50), 20, 20);

}

}

[/cceN_cpp]

Ovdje smo, putem random funkcije, spojili zelenu boju i bijelu boju, koje su već nosile alfu, u čestice. Mišem možemo upravljati količinom kruga i gledati učinak preklapanja.

ADD i SCREEN su prilično slični. Iako je isto posvijetliti, postoje suptilne razlike. Možete ga zamijeniti na SCREEN i napraviti usporedbu. Nakon preklapanja, čistoća i svjetlina ADD -a bit će veća. Pogodan je za analogni svjetlosni efekt.

Što se tiče boje, ovdje smo došli do kraja u ovom poglavlju. Za ovaj "jezik" već ste svladali dovoljno rezervoara. Požurite s upotrebom koda da biste uživali u svijetu oblika i boja!

Korak 10: Izvor

Ovaj članak je sa:

Ako imate bilo kakvih pitanja, možete se obratiti na adresu [email protected].