Zanimiva programska navodila za obdelavo za oblikovalca-Nadzor barve: 10 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:02

V prejšnjih poglavjih smo več govorili o tem, kako uporabiti kodo za oblikovanje namesto točk znanja o barvi. V tem poglavju bomo ta vidik znanja poglobili.

1. korak: Osnovno znanje o barvah

Barva je v določenem pogledu presegla človeško intuicijo. Različne čudovite barve, ki jih vidimo s prostim očesom, so pravzaprav sestavljene iz istih sestavin. Samo s tremi svetlimi barvami rdečo, zeleno in modro lahko ustvarimo vse barve, ki jih človeške oči vidijo skozi mešanico.

Mobilni zasloni in računalniški zasloni, ki jih trenutno vidite, so ustvarjeni na podlagi tega načela. Rdeča, zelena in modra se imenujejo tri prvotne barve svetlobe. Z razmerjem treh elementov lahko zagotovimo določeno barvo. Ta način opisa se imenuje tudi način RGB. Med njimi je rdeča R, zelena G in modra B.

Razen načina RGB obstaja še en način, imenovan način CMYK. Običajno se kombinira s tiskanjem. V tiskanju so tudi tri izvirne barve. Vendar se razlikuje od treh prvotnih barv svetlobe. Ločeno so rdeče, rumene in modre. Med njimi je C za cian, M za magenta in Y za rumeno. Teoretično lahko samo s CMY mešamo večino barv. Toda zaradi proizvodne tehnike surovin težko nasičenost CMY dosežemo 100%. Če mešamo te tri barve, ne moremo dobiti dovolj temne črne barve. Torej obstaja dodaten K, ki je za črno tiskarsko črnilo, kot dodatek tiskanju.

Kar zadeva RGB in CMYK, morate vedeti le, da je razlika v naravi najbolj očitna. RGB je barvni način plus, ki poveča svetlost z mešanjem več barv. Medtem ko je CMYK minus barvni način, ki povečuje temo z mešanjem več barv. Na spodnji sliki lahko vizualno vidimo podobnosti in razlike obeh načinov. Na levi sliki si lahko predstavljamo temno hišo s prižganimi tremi različnimi barvami svetilk. Slika na desni jo lahko obravnavamo kot akvarelni papir, potem ko se prekriva s tremi pigmenti rdeče, zelene in modre barve.

Če želite globlje poznati relativno razmerje med različnimi barvnimi načini, lahko odprete svoj Photoshop in izberete izbirnik barv. Nato lahko intuitivno vidite barvne vrednosti iste barve v različnih barvnih načinih.

V zadnjem bi radi predstavili še en skupni barvni način za vas, HSB. HSB nima pojma "izvirne barve". Razvrščen je glede na občutke človeških oči za barve. H pomeni odtenek, S pomeni nasičenost, B pa svetlost.

Hue predstavlja težnjo po barvah. Vsaka barva ima določeno barvno težnjo le, če ni črna, bela ali siva. Najbolj bogato območje prehoda barve na izbirniku barv se uporablja za označevanje odtenka. Njegova vrednost v PS se giblje od 0 do 360.

Nasičenost pomeni čistost barve. Višja čistost prinaša živahnejše barve. Njegova vrednost v PS se giblje od 0 do 100.

Svetlost pomeni stopnjo svetlosti barve, ki se giblje od 0 do 100.

V primerjavi z načinom RGB so tri dimenzije HSB veliko bolj skladne z občutkom človeških oči za barve. Samo poglejte vrednosti HSB, na splošno si lahko predstavljate, kakšne barve je.

Kar zadeva isto barvo, je barvna vrednost v načinu RGB (255, 153, 71), v HSB pa (27, 72, 100).

Težko je presoditi, kako bo videti po mešanju treh prvotnih barv, če pogledamo le RGB. Toda HSB je drugačen. Seznaniti se morate le z odtenki barv, kot je rdeča 0, oranžna 30 in rumena 60, potem boste vedeli, da bo to relativno nasičena oranžna barva z visoko svetlostjo in nekoliko blizu rdeče, ko je H 27.

Nato bomo tri dimenzije obeh načinov uskladili v x, y, x v vesolju in za primerjavo narisali barvno kubično.

RGB in HSB sta samo različni metodi za opis barv. Naslov lahko vzamemo kot metaforo. Recimo, če želite drugim povedati položaj cesarske palače, lahko rečete, da je to na številki 4 na ulici Jingshan Front Street, območje Dongcheng v Pekingu. Lahko pa rečete, da je 15 sekund, 55 minut, 39 stopinj na severni zemljepisni širini in 26 sekund, 23 minut, 116 stopinj na vzhodni zemljepisni dolžini. Metoda opisa HSB je podobna prejšnji. Če poznate relativno območje, lahko na splošno poznate položaj naslova. Čeprav je RGB morda bolj natančen, je pa zelo abstrakten.

Način HSB je obstajal z namenom, da nam olajša opisovanje barv. Za prikaz določene barve na zaslonu jo moramo nazadnje najprej pretvoriti v način RGB.

V zgornjem delu predstavljamo tri barvne načine: RGB, HSB, CMYK. V programu se morate osredotočiti le na dva načina: RGB in HSB. Imajo svoje prednosti in svoje aplikacije hkrati. Če ga poznate, bo zadovoljil vaše najbolj oblikovalske zahteve.

2. korak: Podatkovni tip za shranjevanje barv

Za prikazovanje barv v programu večinoma prej uporabljamo način RGB. Vendar pa lahko samo z nadzorom treh lastnosti prikažemo kakršne koli barve? V računalniku je tako.

To smo že omenili v obdelavi, razen za R, G, B lahko označimo alfa (prosojnost) za barve. Toda alfa ne pripada sestavini barve. Njegova prisotnost je v priročni mešanici z barvami zadaj. Zato moramo računalniki natančno opisati določeno barvo, zato moramo nadzorovati le tri ključne spremenljivke.

V nadaljevanju začenjamo uvajati nekakšen podatkovni tip Barva, ki se večinoma uporablja za shranjevanje barv. Podobno je prej omenjenim vrstam podatkov, kot so boolena, int, float.

Naj najprej natančno razložim dejansko uporabo barve. Predstavljajte si to: kaj lahko storimo, če lahko za shranjevanje določenih podatkov uporabimo le prej obvladane metode?

Primer kode (9-1):

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

void setup () {

velikost (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

ozadje (0);

rectMode (CENTER);

napolni (r, g, b);

rect (širina/2, višina/2, 100, 100);

}

[/cceN_cpp]

Kar se tiče barv, ki imajo težnjo po barvah, moramo ustvariti tri spremenljivke za shranjevanje podatkov v treh barvnih kanalih rdeče, zelene in modre barve. Kasneje, če želimo priklicati ta niz barvnih podatkov, ga moramo zapisati v polnilo ali potezo.

Vendar se vam bo zdelo, da je to preveč težavno, ker so podatki med seboj povezani. Če imate idejo, da jih zapakirate v uporabo, bo to bolj priročno. Tako nastane barva.

Primer kode (9-2):

[cceN_cpp theme = "dawn"] barva myColor;

void setup () {

velikost (400, 400);

myColor = barva (255, 0, 0);

}

void draw () {

ozadje (0);

rectMode (CENTER);

izpolnite (myColor);

rect (širina/2, višina/2, 100, 100);

} [/cceN_cpp]

Podobno kot pri vrstah podatkov, kot je int, moramo na začetku za ustvarjanje spremenljivk uporabiti »color myColor«.

Pri nastavitvi uporabljamo »myColor = color (255, 0, 0)« za dodelitev vrednosti spremenljivki myColor. Medtem ko barva funkcije (a, b, c) upravičeno predstavlja, da je ta niz podatkov oblikoval barvno vrsto, da uvozi spremenljivko myColor. Če napišete »myColor = (255, 0, 0)«, bo program šel narobe.

V zadnjem delu uporabljamo fill () za izvajanje operacije barvnega oblazinjenja. Funkcija fill () in stroke () omogočata prekrivanje. Glede na količino in vrsto parametrov bo imel različne učinke. Uvoz samo ene celoštevilske spremenljivke, ki predstavlja barvo samo s sivino. Med uvozom spremenljive barve pomeni, da bo barvno območje večje. Barvno in celoštevilsko spremenljivko lahko uvozite tudi, spremenite funkcijo fill () zgoraj v fill (myColor, 150), nato pa lahko z drugim parametrom nadzirate alfa.

3. korak: Metoda prekrivanja, ki se prekriva

poteza, ozadje imajo enak način prekrivanja s polnilom.

Preberite barvno vrednost kanala

Poleg dodelitev lahko v barvni spremenljivki neodvisno pridobite tudi vrednost RGB

Primer kode (9-3):

[cceN_cpp theme = "dawn"] barva myColor;

void setup () {

myColor = barva (255, 125, 0);

println (rdeča (myColor));

println (zelena (myColor));

println (modra (myColor));

}

[/cceN_cpp]

Rezultat v konzoli: 255, 125, 0.

Funkcija rdeča (), zelena (), modra () se bo relativno vrnila k vrednosti rdečega, zelenega in modrega kanala v moji barvi.

Šestnajstiška dodelitev

Razen za uporabo decimalnih števil za prikaz RGB lahko uporabimo tudi šestnajstiško. Desetiško pomeni povečanje 1, ko izpolni 10. Medtem ko šestnajstiško pomeni povečanje 1, ko izpolni 16. Njegovo relativno razmerje z decimalno je: »0 do 9« ustreza »0 do 9 "," A do F "ustrezajo" 10 do 15 ".

Spodnja slika prikazuje sliko metode pretvorbe.

Seveda, če dobimo niz šestnajstiških vrednosti, kot je ff7800, ga ni treba ročno pretvoriti. Program bo barvnim spremenljivkam dodelil vrednosti neposredno. To je zelo priročno.

Na spletu lahko vidimo veliko barvnih kartic, ki vse uporabljajo šestnajstiško metodo prikaza barve.

Tako kot driblanje oblikovalske skupnosti bodo umetniška dela priložene barvne palete. Če vidite najljubšo barvo, jo lahko uporabite v programu.

Primer kode (9-4):

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

void setup () {

velikost (400, 400);

rectMode (CENTER);

noStroke ();

backColor = #395b71;

barvaA = #c4d7fb;

barvaB = #f4a7b4;

barvaC = #f9e5f0;

}

void draw () {

ozadje (backColor);

polnilo (colorA);

rect (200, 200, 90, 300);

polnilo (barva B);

rect (100, 200, 90, 300);

polnilo (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Zdaj je barva veliko bolj udobna z boljšim učinkom kot naključno vnašanje vrednosti.

Pred vrednostjo šestnajstiške barve dodajte »#«, nato lahko spremenljivki neposredno dodelite vrednost.

4. korak: način HSB

Poleg načina RGB bomo naslednjič govorili o načinu HSB. Spodaj je prikazan način dodeljevanja vrednosti v načinu HSB.

Primer kode (9-5):

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

velikost (400, 400);

barvni način (HSB);

}

void draw () {

ozadje (0);

rectMode (CENTER);

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

barvni stolpec = barva (i/20,0 * 255, 255, 255);

izpolni (stolpec);

rect (i * 20 + 10, višina/2, 10, 300);

}

} [/cceN_cpp]

V procesu obdelave moramo za preklop načina HSB dodati le stavek colorMode (HSB). Funkcija colorMode () je uporaba barvnega načina. Če v oklepaj napišemo »HSB«, bo nastavljen na način HSB; medtem ko pišemo »RGB«, bo ta premaknjen v način RGB.

Kar je vredno biti pozoren, je, ko zapišemo colorMode (HSB), privzeta največja vrednost HSB je 255. To se precej razlikuje od največje vrednosti v Photoshopu. V Photoshopu je največja vrednost H 360, največja vrednost S in B 100. Zato moramo narediti pretvorbo.

Če je vrednost HSB v Photoshopu (55, 100, 100), mora biti pri pretvorbi v obdelavo ta vrednost (55 /360 × 255, 255, 255), to je (40, 255, 255).

colorMode () je funkcija, ki se lahko prekriva. V nadaljevanju vam ga bomo podrobno predstavili.

5. korak: Metoda prekrivanja ColorMode

Če torej ne želite ročno pretvoriti vrednosti HSB v Photoshopu, lahko zapišete »colorMode ()« v »colorMode (HSB, 360, 100, 100)«.

Primer uporabe načina HSB 1

Ker način RGB ni ravno primeren za nadzor sprememb odtenkov, lahko v tem trenutku, če želite bolj prožno nadzirati barve, razmislite o načinu HSB.

Primer kode (9-6):

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

velikost (800, 800);

ozadje (0);

barvni način (HSB);

}

void draw () {

strokeWeight (2);

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

float newX, newY;

newX = mouseX + (hrup (milis ()/1000,0 + 1,2) - 0,5) * 800;

novoY = miškaY + (hrup (milis ()/1000,0) - 0,5) * 800;

vrstica (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Ko nadzorujemo H (odtenke) v kapi, smo uporabili millis (). Pridobila bo čas delovanja od začetka do danes. Tako se bo s časom naprej vrednost H (odtenek) samodejno povečala, nato pa se bo barva spremenila.

Enota milis () je ms. Ko bo program deloval 1 sekundo, bo vrnjena vrednost 1000. To bo vodilo do prevelike vrednosti. Zato ga moramo razdeliti na 1000,0.

Ker upamo, da bodo barve predstavljale periodično kroženje, zato moramo opraviti po modulu, ko končno zapišemo prvi parameter v kapi. Tako lahko zagotovite, da se bo znova začelo z 0, ko bo H (odtenek) presegel 255.

Funkcionalna poteza Weeight () lahko nadzoruje debelino črt. Ustrezna enota za parametre v oklepaju je slikovna pika.

Korak 6: Primer uporabe načina 2

Primer kode (9-7):

[cceN_cpp theme = "dawn"] int num; // količina trenutno narisanih črt

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

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

plavajoči kotA, hitrostA; // Kot točke A, hitrost

plavajoči kotB, hitrostB; // Kot točke B, hitrost

plavajoči radijX_A, polmerY_A; // Polmer ovala, ki ga tvori točka A v osi X (Y).

plavajoči polmerX_B, polmerY_B; // polmer ovalne oblike, ki ga tvori točka B na osi X (Y).

void setup () {

velikost (800, 800);

barvni način (HSB);

ozadje (0);

hitrostA = 0,0009;

hitrostB = 0,003;

polmerX_A = 300;

polmer Y_A = 200;

polmerX_B = 200;

polmerY_B = 300;

}

void draw () {

prevesti (širina/2, višina/2);

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

kotA += hitrostA;

kotB += hitrostB;

posX_A = cos (kotA) * polmerX_A;

posY_A = sin (kotA) * polmerY_A;

posX_B = cos (kotB) * polmerX_B;

posY_B = sin (kotB) * polmerY_B;

kap (int (št./500,0) % 255, 255, 255, 10);

vrstica (posX_A, posY_A, posX_B, posY_B);

število ++;

}

} [/cceN_cpp]

Učinek delovanja:

Izhodna slika:

Vzorec, ki ste ga videli, proizvaja gibljiva črta s stalnim prekrivanjem. Sledi dveh končnih točk črte sta dva kroga ločeno.

Z načinom HSB smo nadzorovali spremembe odtenka. S povečanjem črt se bo odtenek pomaknil. Ko se masivne napol prozorne črte prekrivajo, bo ustvaril zelo bogat barvni preliv.

V zanko funkcije smo vgradili zanko for, katere namen je uporabiti zanko for za nadzor količine vrstice. Enakovredno je, da imamo nadzorovano hitrost risanja. Če povečamo vrednost pogoja presoje v zanki for, se poveča risba seepd.

Spodaj je shematična slika. Jasneje si lahko ogledate sled gibanja krogov.

Prilagodite različno hitrost in polmer, tudi oblikovani vzorci bodo različni. Poskusite spremeniti spremenljivke, kot so kot, hitrost, polmer X, polmer Y in poglejte, kaj se bo zgodilo.

7. korak: Način mešanja plasti

Različni barvni načini, o katerih smo govorili prej, se uporabljajo za barvanje grafičnih komponent. Razen za uporabo te metode za nadzor barve, lahko pri obdelavi uporabite načine mešanja različnih plasti, kot je Photoshop.

Odprite okno plasti v PS, kliknite, da izberete način mešanja slojev, nato lahko vidimo te možnosti.

To so načini slojev v PS. Preprosto povedano, način mešanja lahko štejemo za nekakšen način izračunavanja barv. Odločil se bo, katera barva bo nastala zadnja, ko bo »barva A« plus »barva B«. Tukaj "barva A" pomeni barvo za trenutno plastjo (imenovano tudi osnovna barva). "Barva B" pomeni barvo trenutne plasti (imenovano tudi mešana barva). Program bo izračunal, da pridobi barvo C glede na vrednost RGB in alfa barve A in B. Kot rezultat bo prikazana na zaslonu.

Način različnega sloja pomeni različne metode izračuna. V naslednji polovici tega dela člankov bomo to podrobneje razložili. Zdaj moramo le še poznati njegovo uporabo.

Poglejmo primer uporabe načina dodajanja v programu.

Primer kode (9-8):

[cceN_cpp theme = "dawn"] Slika PImage1, image2;

void setup () {

velikost (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

ozadje (0);

blendMode (ADD);

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

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

}

[/cceN_cpp]

Rezultat:

Funkcija blendMode () se uporablja za nastavitev načina mešanja grafike. Izpolnimo ADD zadaj, kar pomeni, da smo nastavili način dodajanja.

V programu ni koncepta plasti. Ker pa obstaja risbeno zaporedje grafičnih komponent, se pri mešanju slik slika 1 obravnava kot osnovna barva, slika 2 pa kot mešana barva.

Način ADD spada v razred »Brighten Class«. Po uporabi boste dobili svetlejši učinek.

Spodaj je način mešanja, ki ga lahko uporabite pri obdelavi.

8. korak: Obdelava načina mešanja

Poskusimo lahko spremeniti drugačen način mešanja, da vidimo učinek.

Ko je primer (9-8) sprejel način prekrivanja (ozadje mora biti nastavljeno na belo):

Po uporabi odvzetega načina (ozadje mora biti belo):

9. korak: Primer uporabe načina mešanja slojev

Način mešanja ni mogoče uporabiti le za slike, ampak je primeren tudi za vse grafične komponente na platnu. Spodaj je prikazana uporaba načina dodajanja. Uporablja se lahko za analogne različne svetlobne učinke.

Primer kode (9-9):

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

velikost (400, 400);

}

void draw () {

ozadje (0);

blendMode (ADD);

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

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

če (naključno (1) <0,5) {

izpolni (0, 50, 0);

} drugo {

napolni (50);

}

elipsa (naključno (50, širina - 50), naključno (50, višina - 50), 20, 20);

}

}

[/cceN_cpp]

Tu smo z naključno funkcijo v delce združili zeleno in belo barvo, ki sta že prenesli alfa. Z miško lahko nadzorujemo količino kroga in opazujemo učinek prekrivanja.

ADD in SCREEN sta si precej podobna. Čeprav je enako osvetliti, obstajajo majhne razlike. Lahko ga zamenjate z SCREEN in naredite primerjavo. Po prekrivanju bosta čistost in svetlost ADD višja. Primeren je za analogijo svetlobnega učinka.

Kar se tiče barve, smo v tem poglavju zaključili. Za ta »jezik« ste že obvladali dovolj praznih mest. Zdaj pa pohitite z uporabo kode in uživajte v svetu oblik in barv!

10. korak: Vir

Ta članek je iz:

Če imate kakršna koli vprašanja, se lahko obrnete na: [email protected].