Дизайнерге арналған өңдеуге арналған қызықты бағдарламалық нұсқаулық-Түсті бақылау: 10 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:23

Алдыңғы тарауларда біз түс туралы білімнің орнына кодтауды қалай қолдану керектігі туралы толығырақ айттық. Бұл тарауда біз білімнің осы аспектісін тереңірек қарастырамыз.

1 -қадам: Түс туралы негізгі білім

Түс белгілі бір аспектілерде адамның интуициясынан асып түсті. Жалаңаш көзбен көрген әр түрлі әдемі түстер бір компоненттерден тұрады. Тек қызыл, жасыл және көк түстердің үш ашық түстерінің көмегімен біз адам көзімен араласатын барлық түстерді жасай аламыз.

Сіз көріп отырған мобильді экрандар мен компьютерлік экрандар осы принцип негізінде жасалады. Қызыл, жасыл және көк түстер жарықтың бастапқы үш түсі деп аталады. Үш элементтің қатынасы арқылы біз белгілі бір түске сенімді бола аламыз. Бұл сипаттау әдісі RGB режимі деп те аталады. Оның ішінде қызыл - R, жасыл - G, көк - B.

RGB режимінен басқа, CMYK режимі деп аталатын басқа режим бар. Ол әдетте басып шығарумен біріктіріледі. Басып шығаруда үш түпнұсқа түстер де бар. Алайда, бұл жарықтың бастапқы үш түстерінен өзгеше. Олар бөлек қызыл, сары және көк. Оның ішінде C - көгілдір түске, М - қызыл күреңге, Y - сарыға арналған. Теориялық тұрғыдан алғанда, тек CMY арқылы біз көптеген түстерді араластыра аламыз. Бірақ шикізат өндіру техникасының арқасында біз CMY қанықтылығын 100%-ға жеткізе алмаймыз. Егер біз осы үш түсті араластырсақ, біз жеткілікті қараңғы түс ала алмаймыз. Басып шығаруға қосымша ретінде қара баспа сиясына арналған қосымша K бар.

RGB және CMYK -ке келетін болсақ, сіз табиғатта айқын айырмашылық бар екенін білуіңіз керек. RGB - бұл қосымша түс режимі, ол көбірек түстерді араластыру арқылы жарықтығын арттырады. CMYK минус түс режимі болып табылады, ол көбірек түстерді араластыру арқылы қараңғылықты арттырады. Төмендегі суретте біз екі режимнің ұқсастығы мен айырмашылығын көре аламыз. Сол жақтағы суретте біз үш түрлі түсті фонарь қосылған қара үйді елестете аламыз. Оң жақтағы сурет, біз оны қызыл, жасыл және көк үш пигментті қабаттасқаннан кейін акварельді қағаз деп санауға болады.

Егер сіз әр түрлі түс режимдерінің салыстырмалы байланысын тереңірек білгіңіз келсе, сіз фотошопты ашып, түс таңдаушыны таңдай аласыз. Содан кейін интуитивті түрде әр түрлі түс режимдерінде бір түстің түс мәндерін көруге болады.

Соңында біз сізге HSB үшін тағы бір жалпы түс режимін енгізгіміз келеді. HSB -де «Түпнұсқа түс» деген түсінік жоқ. Адамдардың түстерге деген сезіміне қарай жіктеледі. H - реңкті, S - қанықтылықты, B - жарықтықты білдіреді.

Реңк түске бейімділікті білдіреді. Кез келген түстің ақшыл немесе сұр болмаса ғана белгілі бір түске бейімділігі болады. Реңкті көрсету үшін түс таңдағыштағы ең бай түс ауысу аймағы қолданылады. PS -де оның мәні 0 -ден 360 -қа дейін.

Қанықтылық түстің тазалығын білдіреді. Жоғары тазалық жарқын түс береді. PS -де оның мәні 0 -ден 100 -ге дейін.

Жарықтық 0 -ден 100 -ге дейінгі түстердің ашықтық дәрежесін білдіреді.

RGB режимімен салыстырғанда HSB үш өлшемі адам көзінің түстерге деген сезіміне көбірек сәйкес келеді. HSB мәндерін ғана қараңыз, сіз оның түсі қандай екенін елестете аласыз.

Бір түске келетін болсақ, RGB режиміндегі түс мәні (255, 153, 71), ал HSB -де (27, 72, 100).

Егер біз тек RGB -ге қарасақ, үш түпнұсқалық түстерді араластырғаннан кейін оның қандай болатынын бағалау қиын. Бірақ HSB басқаша. Сіз тек қызыл - 0, апельсин - 30 және сары - 60 сияқты түстердің реңктерімен танысуыңыз керек, сонда сіз оның жарықтығы жоғары және қызылға сәл жақын H салыстырмалы түрде қаныққан қызғылт сары болатынын білесіз. 27.

Әрі қарай, біз екі режимнің үш өлшемін x, y, x кеңістігіне сәйкестендіреміз және салыстыру үшін текше түстерін саламыз.

RGB және HSB - түстерді сипаттаудың әр түрлі әдістері. Біз адресті метафора ретінде қабылдай аламыз. Егер сіз басқа адамдарға Императорлық сарайдың жағдайын айтқыңыз келсе, оны Пекин, Дунчэн ауданы, Цзиньшань фронт көшесінің №4 мекенжайы деп айтуға болады. Немесе солтүстік ендікте 15 секунд, 55 минут, 39 градус және шығыс бойлықта 26 секунд, 23 минут, 116 градус деп айта аласыз. HSB сипаттамалық әдісі бұрынғыға ұқсас. Егер сіз салыстырмалы аймақпен таныс болсаңыз, сіз әдетте мекен -жайдың орнын біле аласыз. RGB дәлірек болуы мүмкін, бірақ бұл өте дерексіз.

HSB режимі түстерді ыңғайлы түрде сипаттауға көмектесу үшін пайда болды. Белгілі бір түсті экранда көрсету үшін алдымен оны RGB режиміне түрлендіру керек.

Жоғарыда біз үш түсті режимді енгіземіз: RGB, HSB, CMYK. Бағдарламада сіз тек екі режимге назар аударуыңыз керек: RGB және HSB. Олардың бір мезгілде өздерінің артықшылықтары мен жеке қосымшалары бар. Егер сіз онымен таныс болсаңыз, ол сіздің дизайнерлік талаптарыңызды қанағаттандырады.

2 -қадам: Түстерді сақтауға арналған деректер түрі

Бағдарламада түстерді көрсету үшін біз көбінесе RGB режимін қолданамыз. Алайда, тек үш қасиетті басқару арқылы біз кез келген түстерді көрсете аламыз ба? Компьютерде осылай болады.

Біз бұған дейін өңдеуде R, G, B қоспағанда, түстерге альфа (мөлдірлік) белгілеуге болатынын айтқан болатынбыз. Бірақ альфа түс компонентіне жатпайды. Оның болуы - артында түстері бар ыңғайлы қоспасы. Демек, компьютерлер белгілі бір түс түрін дәл сипаттай алуы үшін, біз тек үш айнымалыға қарсы тұруымыз керек.

Келесіде біз түстерді сақтау үшін қолданылатын Color типті мәліметтер түрін енгізе бастаймыз. Бұл boolena, int, float сияқты бұрын айтылған деректер түрлеріне ұқсас.

Мұнда, алдымен, түстердің нақты қолданылуын түсіндіруге рұқсат етіңіз. Мұны елестетіп көріңізші: егер біз белгілі бір деректерді сақтау үшін бұрын меңгерілген әдістерді ғана қолдана алатын болсақ, не істеуіміз керек?

Код үлгісі (9-1):

[cceN_cpp theme = «таң»] int r, g, b;

жарамсыз орнату () {

өлшемі (400, 400);

r = 255;

g = 0;

b = 0;

}

жарамсыз жеребе () {

фон (0);

rectMode (ЦЕНТР);

толтыру (r, g, b);

тік (ені/2, биіктігі/2, 100, 100);

}

[/cceN_cpp]

Түстер бейімділігі бар түстерге келетін болсақ, сәйкесінше қызыл, жасыл және көк түстердің үш түстік арнасында деректерді сақтау үшін үш айнымалыны құру қажет. Кейінірек, егер біз осы түсті деректер жиынтығын шақырғымыз келсе, оны толтыруға немесе сызықшаға жазуымыз керек.

Бірақ сіз мұны істеу өте қиын екенін көресіз, себебі деректер өзара байланысты. Егер сіз оларды орауды жоспарласаңыз, бұл ыңғайлы болады. Сондықтан түс пайда болады.

Код үлгісі (9-2):

[cceN_cpp theme = «таң»] түсі myColor;

жарамсыз орнату () {

өлшемі (400, 400);

myColor = түс (255, 0, 0);

}

жарамсыз ұтыс () {

фон (0);

rectMode (ЦЕНТР);

толтыру (myColor);

тік (ені/2, биіктігі/2, 100, 100);

} [/cceN_cpp]

Int сияқты деректер түрлерімен бірдей, біз айнымалыларды құру үшін басында «color myColor» қолдануымыз керек.

Орнатуда біз myColor айнымалысына мән беру үшін «myColor = color (255, 0, 0)» қолданамыз. Функция түсі (a, b, c) бұл деректер жиынтығы myColor айнымалысын импорттау үшін түс түрін қалыптастырғанын дұрыс көрсетеді. Егер сіз «myColor = (255, 0, 0)» деп жазсаңыз, онда бағдарлама қате болады.

Соңында, біз түсті толтыру жұмысын іске асыру үшін fill () қолданамыз. Функцияны толтыру () және инсульт () екеуі де қабаттасуға мүмкіндік береді. Параметрлердің саны мен түріне сәйкес әр түрлі әсер етеді. Тек қана сұр шкаласы бар түс болып табылатын бір бүтін сан айнымалысын импорттау. Айнымалы түсті импорттау кезінде бұл түс ауқымы үлкен болатынын білдіреді. Сондай -ақ, түс айнымалысы мен бүтін сан айнымалысын импорттауға болады, жоғарыдағы fill () функциясын толтыруға (myColor, 150) ауыстырыңыз, содан кейін альфаны екінші параметрмен басқаруға болады.

3 -қадам: Толтыру әдісі

инсульт, фон толтыру әдісімен сәйкес келетін әдіске ие.

Түстің арна мәнін оқыңыз

Тапсырмалардан басқа, түс айнымалысында RGB мәнін дербес алуға болады

Код үлгісі (9-3):

[cceN_cpp theme = «таң»] түсі myColor;

жарамсыз орнату () {

myColor = түс (255, 125, 0);

println (қызыл (myColor));

println (жасыл (myColor));

println (көк (myColor));

}

[/cceN_cpp]

Консольдегі нәтиже: 255, 125, 0.

Red (), green (), blue () функциясы myColor ішіндегі қызыл, жасыл және көк арнаның мәніне салыстырмалы түрде оралады.

Он алтылық тапсырма

RGB көрсету үшін ондық сандарды қолданудан басқа, біз он алтылықты қолдана аламыз. Ондық 10 -ға сәйкес болғанда 1 -ге көбейтуді білдіреді, ал он алтылық ондық 16 -ға жеткенде 1 -ге көбейтуді білдіреді. Оның ондық бөлшекпен салыстырмалы байланысы: «0 -ден 9 -ға дейін» «0» -ге сәйкес келеді. 9 -ға дейін »,« А -дан F -ге дейін »« 10 -нан 15 -ке »сәйкес келеді.

Төмендегі суретте түрлендіру әдісі көрсетілген.

Әрине, егер біз ff7800 сияқты он алтылық мәндер жиынтығын алсақ, оны қолмен түрлендірудің қажеті жоқ. Бағдарлама түс айнымалыларына тікелей мән береді. Бұл өте ыңғайлы.

Біз Интернетте көптеген түсті карталар түстерді көрсету үшін он алтылық әдісті қолдана алатынын көре аламыз.

Дизайн қауымдастығы сияқты, өнер туындыларына түстер палитрасы бекітіледі. Егер сіз сүйікті бояуды көрсеңіз, оны бағдарламаға қолдануға болады.

Код үлгісі (9-4):

[cceN_cpp theme = «таң»] түс backColor, colorA, colorB, colorC;

жарамсыз орнату () {

өлшемі (400, 400);

rectMode (ЦЕНТР);

noStroke ();

backColor = #395b71;

түсA = #c4d7fb;

colorB = #f4a7b4;

түсC = #f9e5f0;

}

жарамсыз ұтыс () {

фон (backColor);

толтыру (түс A);

тік (200, 200, 90, 300);

толтыру (түс B);

тік (100, 200, 90, 300);

толтыру (түс C);

тік (300, 200, 90, 300);

} [/cceN_cpp]

Енді түс кездейсоқ мәндерді енгізуден гөрі жақсы әсермен әлдеқайда ыңғайлы.

Он алтылық түс мәніне дейін «#» белгісін қосыңыз, содан кейін айнымалы түске тікелей мән бере аласыз.

4 -қадам: HSB режимі

RGB режимінен басқа, біз HSB режимі туралы сөйлесетін боламыз. Төменде HSB режимінің мәнін тағайындау әдісі көрсетілген.

Код мысалы (9-5):

[cceN_cpp theme = «таң»] жарамсыз орнату () {

өлшемі (400, 400);

colorMode (HSB);

}

жарамсыз жеребе () {

фон (0);

rectMode (ЦЕНТР);

үшін (int i = 0; i <20; i ++) {

түс col = түс (i/20.0 * 255, 255, 255);

толтыру (col);

тік (i * 20 + 10, биіктік/2, 10, 300);

}

} [/cceN_cpp]

Өңдеу кезінде HSB режиміне ауысу үшін бізге тек colorMode (HSB) сөйлемін қосу керек. ColorMode () функциясын қолдану түс режимін ауыстыру болып табылады. Егер жақшаға «HSB» жазсақ, онда ол HSB режиміне қойылады; біз «RGB» жазған кезде, ол RGB режиміне ауысады.

Біз colorMode (HSB) жазған кезде назар аударған жөн, HSB әдепкі мәні 255. Бұл Photoshop -тың максималды мәнінен мүлде өзгеше. Photoshop -та H -дің максималды мәні 360, S пен B -дің максималды мәні 100. Сондықтан біз конверсия жасауымыз керек.

Егер Photoshop -та HSB мәні (55, 100, 100) болса, Өңдеуге ауысқанда, бұл мән (55/360 × 255, 255, 255), яғни (40, 255, 255) болуы керек.

colorMode () - бұл қабаттасуы мүмкін функция. Келесіде біз сізге оны егжей -тегжейлі таныстыратын боламыз.

5 -қадам: ColorMode әдісінің қабаттасу әдісі

Сондықтан, егер сіз Photoshop -та HSB мәнін қолмен түрлендіргіңіз келмесе, «colorMode ()» «colorMode (HSB, 360, 100, 100)» деп жаза аласыз.

HSB режимін қолдану жағдайы 1

RGB режимі реңктің өзгеруін бақылауға ыңғайлы емес болғандықтан, егер сіз түстерді икемді басқарғыңыз келсе, HSB режимін қарастыруға болады.

Код үлгісі (9-6):

[cceN_cpp theme = «таң»] жарамсыз орнату () {

өлшемі (800, 800);

фон (0);

colorMode (HSB);

}

жарамсыз ұтыс () {

инсульт салмағы (2);

инсульт (int (millis ()/1000.0 * 10)%255, 255, 255);

float newX, newY;

newX = mouseX + (шу (миллис ()/1000.0 + 1.2) - 0.5) * 800;

newY = mouseY + (шу (миллис ()/1000,0) - 0,5) * 800;

сызық (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Біз инсульт кезінде H (реңктерді) басқарған кезде біз миллис () қолдандық. Ол басынан бастап қазіргі уақытқа дейін жұмыс уақытын алады. Осылайша, уақыттың алға жылжуы сияқты, H (реңк) мәні автоматты түрде артады, содан кейін түс өзгереді.

Миллис () бірлігі мс. Сонымен, бағдарлама 1 секунд жұмыс істегенде, қайтару мәні 1000 болады. Бұл тым үлкен мәнге әкеледі. Сондықтан біз оны 1000.0 -ге бөлуіміз керек.

Біз түстер мерзімді айналымды ұсынады деп үміттенеміз, сондықтан біз бірінші параметрді инсультке жазғанда модульдік операцияны орындауымыз керек. Бұл H (реңк) 255 -тен асқанда, ол қайтадан 0 -ден басталатынына сенімді бола алады.

Функционалды инсультWeight () сызықтардың қалыңдығын басқара алады. Жақша ішіндегі параметрлердің сәйкес бірлігі пиксель болып табылады.

6 -қадам: Режимді қолдану жағдайы 2

Код мысалы (9-7):

[cceN_cpp theme = «таң»] int num; // қазіргі уақытта салынған сызықтар саны

қалқымалы posX_A, posY_A; // А нүктесінің координатасы

қалқымалы posX_B, posY_B; // В нүктесінің координатасы

өзгермелі бұрыш A, жылдамдықA; // А нүктесінің бұрышы, жылдамдық

өзгермелі бұрыш B, жылдамдық B; // В нүктесінің бұрышы, жылдамдық

қалқымалы радиусX_A, радиусY_A; // X (Y) осіндегі А нүктесінен құрылған сопақша радиусы.

қалқымалы радиусX_B, радиусY_B; // ол X (Y) осіндегі В нүктесінен құрылған сопақша радиусы.

жарамсыз орнату () {

өлшемі (800, 800);

colorMode (HSB);

фон (0);

жылдамдықA = 0.0009;

жылдамдықB = 0,003;

радиусX_A = 300;

радиусY_A = 200;

радиусX_B = 200;

радиусY_B = 300;

}

жарамсыз ұтыс () {

аудару (ені/2, биіктігі/2);

үшін (int i = 0; i <50; i ++) {

бұрыш A += жылдамдықA;

бұрыш B += жылдамдық B;

posX_A = cos (бұрыш A) * радиусы X_A;

posY_A = sin (бұрыш A) * радиусы Y_A;

posX_B = cos (бұрыш B) * радиусы X_B;

posY_B = sin (бұрыш B) * радиусY_B;

инсульт (int (саны/500,0) % 255, 255, 255, 10);

сызық (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Операциялық әсер:

Шығару суреті:

Сіз көрген үлгіні үнемі қабаттасу арқылы қозғалыс сызығы шығарады. Сызықтың екі соңғы нүктесінің іздері бөлек екі шеңбер болып табылады.

HSB режимі арқылы біз реңктің өзгеруін басқардық. Сызықтардың ұлғаюымен реңк ығысады. Массивті жартылай мөлдір сызықтар қабаттасқанда, ол өте бай түстер градиентін жасайды.

Біз циклды сызық санын бақылау үшін қолдану мақсатында функция циркулярына циклды енгіздік. Бұл бізде сурет салу жылдамдығын бақылайтынымызға тең. Ақпараттық шарттың мәнін циклде жоғарылату, бұл сызбаның көлемін арттырады.

Төменде схемалық фигура берілген. Сіз шеңберлердің қозғалыс ізін анық көре аласыз.

Әр түрлі жылдамдық пен радиусты реттеңіз, қалыптасқан өрнектер де әр түрлі болады. Бұрыш, жылдамдық, radiusX, radiusY сияқты айнымалыларды өзгертуге тырысыңыз және не болатынын көріңіз.

7 -қадам: қабаттарды араластыру режимі

Біз бұрын айтқан әр түрлі түс режимдері графикалық компоненттерді бояуға қолданылады. Түсті басқару үшін бұл әдісті қолданудан басқа, Өңдеу Photoshop сияқты әр түрлі қабаттардың араластыру режимдерін қолдана алады.

PS -де қабат терезесін ашыңыз, қабаттардың араласу режимін таңдау үшін басыңыз, содан кейін біз бұл опцияларды көре аламыз.

Бұл PS жүйесінде бар деңгейлік режимдер. Қарапайым тілмен айтқанда, араластыру режимін түстерді есептеудің бір түрі ретінде қарастыруға болады. Ол «А түсі» мен «В түсі» болған кезде соңғы түс қандай болатынын шешеді. Мұнда «А» түсі ағымдағы қабаттың түсін білдіреді (оны негізгі түс деп те атайды). «B түсі» ағымдағы қабаттың түсін білдіреді (аралас түс деп те атайды). Бағдарлама А және В түсінің RGB мәні мен альфасына сәйкес С түсін алуды есептейді. Ол экранда түс ретінде көрсетіледі.

Әр түрлі деңгей режимі әр түрлі есептеу әдістерін білдіреді. Осы мақалалар сериясының келесі жартысында біз егжей -тегжейлі түсіндіреміз. Енді біз алдымен оның қолданылуын білуіміз керек.

Бағдарламада қосу режимін қолдану мысалын қарастырайық.

Код үлгісі (9-8):

[cceN_cpp theme = «таң»] PImage image1, image2;

жарамсыз орнату () {

мөлшері (800, 400);

image1 = loadImage («1.jpg»);

image2 = loadImage («2.jpg»);

}

жарамсыз жеребе () {

фон (0);

blendMode (ADD);

сурет (сурет1, 0, 0, 400, 400);

сурет (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Нәтиже:

BlendMode () функциясы графиканы араластыру режимін орнату үшін қолданылады. Біз ADD толтырамыз, біз қосу режимін орнаттық.

Бағдарламада қабат туралы түсінік жоқ. Бірақ графикалық компоненттердің сызбасы бар болғандықтан, суреттерді араластыру кезінде 1 -сурет негізгі түс, ал 2 -сурет аралас түс ретінде қабылданады.

ҚОСУ режимі «Ағарту класына» жатады. Оны қолданғаннан кейін сіз жарқын әсерге ие боласыз.

Төменде өңдеуде қолдануға болатын араластыру режимі берілген.

8 -қадам: араластыру режимін өңдеу

Біз әсерді көру үшін әр түрлі араластыру режимін өзгертуге тырысамыз.

(9-8) мысалы қабаттасу режимін қабылдаған кезде (фон ақ түске орнатылуы керек):

Субъектілік режимді қолданғаннан кейін (фон ақ түске орнатылуы керек):

9 -қадам: Қабаттарды араластыру режимінің қосымшасы

Араластыру режимі суреттерге ғана емес, сонымен қатар кенептегі барлық графикалық компоненттерге де жарамды. Төменде Қосу режимі туралы қолдану көрсетіледі. Ол әр түрлі жарық эффектілерінің аналогы ретінде қолданыла алады.

Код мысалы (9-9):

[cceN_cpp theme = «таң»] жарамсыз орнату () {

өлшемі (400, 400);

}

жарамсыз жеребе () {

фон (0);

blendMode (ADD);

int num = int (3000 * mouseX/400.0);

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

егер (кездейсоқ (1) <0.5) {

толтыру (0, 50, 0);

} басқа {

толтыру (50);

}

эллипс (кездейсоқ (50, ені - 50), кездейсоқ (50, биіктік - 50), 20, 20);

}

}

[/cceN_cpp]

Мұнда кездейсоқ функция арқылы біз альфа тасымалдайтын жасыл түс пен ақ түсті біріктірдік. Біз тінтуірдің көмегімен шеңбер санын бақылауға және қабаттасу әсерін бақылауға болады.

ADD және SCREEN бір -біріне өте ұқсас. Жарқырау бірдей болғанымен, нәзік айырмашылықтар бар. Сіз оны SCREEN -ге ауыстырып, салыстыра аласыз. Қосылғаннан кейін ADD тазалығы мен жарықтығы жоғары болады. Ол жарық әсерін аналогтау үшін жарамды.

Түстерге келетін болсақ, біз осы тарауда аяқтадық. Бұл «тіл» үшін сіз жеткілікті бос орындарды меңгердіңіз. Енді пішін мен түс әлемінен ләззат алу үшін кодты қолдануға асығыңыз!

10 -қадам: Дереккөз

Бұл мақала:

Егер сізде сұрақтар туындаса, мына мекенжайға хабарласа аласыз: [email protected].