Meidän , opimme sovelluksemme työskentelemään viittausten ja palettien kanssa. Nyt on aika lisätä lisää vaihtoehtoja hienosäätöväreille ja visuaalisille tehosteille. Edellinen Tutorial Esittelemme muutamia uusia työkaluja, jotka mahdollistavat joustavamman kuvankäsittelyn. Lisäksi tutkimme uutta värimallia, HSV:tä, joka toimii värillä eri tavalla kuin RGB ja LAB. Tämä malli helpottaa ominaisuuksien, kuten sävyn, kylläisyyden ja keveyden, manipulointia, mikä tekee siitä erityisen hyödyllisen värin säätämisessä kuvissa. Koko hankkeen koodi on saatavilla osoitteessa ja Tämä linkki Tämä linkki Adjusting the Number of Colors in the Extracted Palette Olemme jo nähneet, miten paletin rajoittaminen voi muuttaa kuvan ulkonäköä. Joustavampia suodattimia ja kuvankäsittelyn säätöjä varten lisäämme mahdollisuuden hallita kuvasta poistettujen värien määrää.Nyt voit asettaa tarkasti, kuinka monta väriä on korostettu kuvassa, mikä mahdollistaa paremman hallinnan visuaalisista tehosteista.Tämä ominaisuus on erityisen hyödyllinen, kun työskentelet palettien kanssa suodattimien luomiseksi, koska värien määrän muuttaminen koskee monenlaisia suunnittelutoimintoja. Sovelluksessa on nyt liukusäädin, jonka avulla voit valita kuvan poistamien värien määrän (10-20). Tämä säätö vaikuttaa suodattimen tuloksiin ja auttaa saavuttamaan parempia visuaalisia tehosteita. <div style={{ marginBottom: 12 }}>
  <label>Number of Colors</label>
  <input
    type="range"
    min="10"
    max="20"
    value={colorCount}
    onChange={(e) => setColorCount(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 Tulemme kokeilemaan hämmästyttävää valokuvaa, jonka on tehnyt So Sasaki Siinä on laaja valikoima värejä ja sävyjä, mikä tekee siitä täydellisen kohteen tutkimuksellemme. Lähde Tokio Alla voit verrata, miltä kuva näyttää eri kokoisten palettien kanssa. Filter Intensity Slider Jotta suodatusprosessi olisi joustavampi, lisäämme liukusäätimen hallitsemaan paletti-sovelluksen voimakkuutta kuvaan. Valitse vain haluttu suodattimen voimakkuus ja napsauta ”Käytä suodatinta”. <div style={{ marginBottom: 16 }}>
  <label style={{ display: "block", marginBottom: 6 }}>Filter Intensity</label>
  <input
    type="range"
    min="0"
    max="100"
    value={intensity}
    onChange={(e) => setIntensity(Number(e.target.value))}
    style={{ width: "100%" }}
  />
</div>
 How does it work? Kun voimakkuus on asetettu 100 prosenttiin, kuva muuttuu täysin käyttämällä valitun paletin värejä. Mitä pienempi voimakkuusarvo on, sitä pienempi vaikutus paletilla on kuvaan, jolloin voit säilyttää enemmän alkuperäisiä värejä. HSV Color Model HSV (Hue, Saturation, Value) on yksi suosituimmista värimalleista, jota käytetään usein värin, kylläisyyden ja kirkkauden osalta. on on on on Väri: Tämä edustaa ensisijaista väriä (kuten punaista, vihreää, sinistä jne.), mitattuna asteina 0–360. Saatavuus: Tämä osoittaa värin voimakkuuden. Saatavuus vaikuttaa värin harmaan määrään: 100% on täysin kyllästynyt väri ja 0% on harmaa. Arvo (kirkkuus): Tämä osoittaa, kuinka kirkasta väri on. Arvo 0% antaa mustan, kun taas 100% on värin kirkkain versio. • : Differences from RGB and LAB on on on Toisin kuin RGB, jossa värit yhdistyvät punaisen, vihreän ja sinisen voimakkuuden perusteella, HSV perustuu ihmisen visuaaliseen havaintoon. Verrattuna LAB:hen, joka käyttää monimutkaisempaa matemaattista mallia tarkkojen värien esittämiseen eri valaistusolosuhteissa, HSV on intuitiivisempi ja käyttäjäystävällisempi. Esimerkki koodista RGB: n muuntamiseen HSV: function rgbToHsv(r, g, b) {
  r /= 255;
  g /= 255;
  b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const delta = max - min;

  let h = 0, s = 0, v = max;

  if (delta !== 0) {
    s = delta / max;
    if (r === max) {
      h = (g - b) / delta;
    } else if (g === max) {
      h = 2 + (b - r) / delta;
    } else {
      h = 4 + (r - g) / delta;
    }
    h *= 60;
    if (h < 0) h += 360;
  }

  return [h, s * 100, v * 100];
}
 Alla on esimerkkejä kuvista samassa paletissa, mutta eri väri malleissa. Contrast Slider Kontrasti tarkoittaa kuvan valoisimpien ja pimeimpien pisteiden välistä eroa. Kontrastin säätäminen mahdollistaa tämän eron lisäämisen tai pienentämisen. How does contrast adjustment work? Kun kontrastia lisätään, kuvan tummat alueet muuttuvat entistä tummemmaksi ja valoisat alueet entistä kirkkaammiksi.Tämä vaikutus voi tehdä kuvan näkyvän kirkkaammaksi ja terävämmäksi, mikä lisää sen visuaalista vaikutusta. Esimerkki koodista kontrastin muuttamiseksi: const applyContrast = (r, g, b, contrast) => {
  const contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
  r = contrastFactor * (r - 128) + 128;
  g = contrastFactor * (g - 128) + 128;
  b = contrastFactor * (b - 128) + 128;
  return [r, g, b];
};
 • : Algorithm Description Kontrastialgoritmi käyttää tekijää, joka riippuu nykyisestä kontrastin arvosta.Tätä tekijää sovelletaan jokaiseen värikomponenttiin (punainen, vihreä ja sininen), säätämällä niiden kirkkautta kontrastin tason perusteella. Noise Slider Niille, jotka haluavat pitää hauskaa, olemme lisänneet melun liukusäätimen. Melun lisääminen kuvaan auttaa luomaan vintage-valokuvaefektiä tai tekemään kuvan tuntumaan "elävämmältä".Tätä vaikutusta käytetään piilottamaan epätäydellisyyksiä tai lisäämään taiteellista kosketusta kuvaan. How does the noise work? Melu liukusäätimellä voit hallita kuvassa olevan jokaisen pikselin väriin sovellettavien satunnaisten muutosten määrää.Mitä korkeampi melu-arvo on, sitä suurempi on kuvan satunnaisten muutosten määrä. Kun kuviin lisätään melua, kunkin pikselin RGB-arvoihin lisätään pieniä, satunnaisia vaihteluita, mikä johtaa viljan vaikutukseen.Tämä vaikutus voi olla hienovarainen tai voimakas riippuen käytetyn melun määrästä.Tämä voi auttaa antamaan kuvalle teksturoidumman ilmeen tai simuloimaan vanhan, matalan resoluution valokuvan ulkonäköä. const applyNoise = (r, g, b, noise) => {
  r += Math.random() * noise - noise / 2;
  g += Math.random() * noise - noise / 2;
  b += Math.random() * noise - noise / 2;
  return [r, g, b];
};
 • : Algorithm Description Jokaiseen pikseliin lisätään satunnaisarvo määritetyn alueen sisällä. Tämä luo satunnaisten värimuutosten vaikutuksen, mikä antaa kuvalle meluisan tai viljeltävän ulkonäön. Meidän tapauksessamme simuloimme yksinkertaisesti vääristymiä, joilla ei ole mitään tekemistä todellisen elokuvan viljan tai melun kanssa. ) toimivat samalla periaatteella. Näytönohjain: Sony Ericsson W810 Hallitsemalla melun määrää käyttäjät voivat kokeilla eri intensiteettiä erilaisten luovien vaikutusten saavuttamiseksi tai kuvata valokuvan epätäydellisyyksiä. Ja tietenkin olemme lisänneet Reset Settings -painikkeen, joka poistaa kaikki suodattimet ja palaa alkuperäiseen kuvaan. Olemme tutkineet, miten väripaletteja voidaan poimia ja säätää, kontrastin, kyllästymisen ja melun vaikutuksia sekä miten voidaan työskennellä eri värimalleilla – RGB, LAB ja HSV. Värikorjaus on ratkaiseva osa kuvankäsittelyä, jonka avulla voimme parantaa visuaalista havaintoa, korostaa tiettyjä elementtejä ja saavuttaa harmoniaa värien välillä.Olemme osoittaneet, miten värien määrän säätäminen paletissa tai kontrastiasetusten muuttaminen voi täysin muuttaa kuvan, mikä tekee siitä ilmeisemmän ja dynaamisemman. On tärkeää huomata, että värin ja kontrastin säätö ei vaikuta vain kuvan ulkonäköön vaan myös siihen, miten se havaitaan.

Read My Stories

Tämä ääni on tuotettu tarinan alkuperäisellä kielellä!

Liian pitkä; Lukea

Make resilience your competitive advantage

Tämä web-sovellus muuttaa minkä tahansa kuvan retro-kuumeeksi - ei tarvita Photoshopia

About Author

KOMMENTIT

RIPUTA TAGSIA

TÄMÄ ARTIKKELI ESITETTIIN

Related Stories

How Apex Fusion Achieved FINMA Qualification Without Compromising Decentralization

10 Stories To Learn About Internships

10x Research: How a FIL Backed USD Stablecoin By Secured Finance Would Boost The Filecoin Ecosystem

Web 2.5: HackerNoon's Vision for a New Wave Internet

How Apex Fusion Achieved FINMA Qualification Without Compromising Decentralization

10 Stories To Learn About Internships

10x Research: How a FIL Backed USD Stablecoin By Secured Finance Would Boost The Filecoin Ecosystem

Web 2.5: HackerNoon's Vision for a New Wave Internet

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps