타자기에서 픽셀까지: CMYK, RGB 및 색상 시각화 장치 구축을 통한 여정

저는 어렸을 때 만화에 관한 팬진을 발행했습니다. 이것은 컴퓨터가 생기기 훨씬 전의 일입니다. 타자기와 종이, 가위를 사용하여 만든 것입니다!

팬진은 처음에는 흑백으로 만들어졌고 학교에서 복사되었습니다. 시간이 지나면서 더 큰 성공을 거두면서 컬러 표지로 오프셋 인쇄를 할 여유가 생겼습니다!

하지만 그 색상을 관리하는 것이 꽤 어려웠습니다. 각 표지는 시안색, 마젠타색, 노란색, 키(검정색)(CMYK로 약칭) 등 각 색상에 대해 한 번씩 총 4번 인쇄되어야 했습니다.

즉, 각각 검정색 잉크로 인쇄되었지만 특정 색상에 해당하는 별도의 시트 4장을 제공해야 했습니다.

제가 발행한 이슈 중 하나는 다음과 같습니다.

위 이미지에 보이는 노란색은 모두 "노란색" 시트에 검정 잉크를 사용하여 제가 손으로 그린 ​​것입니다. 피부톤에는 "래스터 도트"라는 것을 사용했습니다. 이것은 다양한 밀도의 검은 점들로 구입할 수 있는 시트였습니다. 점을 잘라서 적용합니다. 이 경우에는 "빨간색" 시트에 적용합니다.

저는 조명이 내장된 유리 상판 드로잉 테이블인 라이트 테이블에서 작업했습니다. 이를 통해 다양한 시트를 꿰뚫어 보면서 올바르게 정렬할 수 있었습니다.

매우 시간이 많이 걸렸지만 색상 이해에 대한 평생의 관심을 불러일으켰고 인쇄 색상과 화면 색상의 엄청난 차이를 불러일으켰습니다!

CMYK는 4가지 색상으로 제한되어 있지만 비교적 이해하기 쉽습니다. 우리는 모두 종이에 색연필을 사용해 보았고 색이 어떻게 혼합되는지 직관적으로 알고 있습니다. CMYK는 감산 색상 모델입니다. 흰색 종이로 시작하고 잉크를 더 추가하면 실제로 빛이 줄어듭니다. 모든 색상을 결합하면 검정색으로 이동합니다. 잉크를 전혀 바르지 않으면 종이가 빛을 모두 반사하기 때문에 흰색으로 유지됩니다.

처음 컴퓨터를 받았을 때 CMYK와 매우 다른 RGB를 이해해야 했습니다. RGB는 디지털 화면에 사용되는 첨가 색상 모델입니다. 여기서는 빛 자체를 혼합하고 있습니다. 더 많은 빛을 추가하면 색상이 더 밝아지고 흰색으로 이동하게 됩니다. RGB 조명을 모두 끄면(R=0, G=0, B=0) 빛이 나오지 않아 화면이 검게 변합니다.

당시 그래픽 디자이너로서 화면에서 본 색상과 인쇄물에서 본 색상이 매우 다른 경우가 많았기 때문에 화면을 보정해야 했습니다!

---

RGB 시각화

RGB는 빨간색, 녹색, 파란색의 세 가지 광원을 나타냅니다. 조명이 꺼진 경우 해당 값은 0입니다. 완전히 켜졌을 때 값은 255입니다. 이 조명들이 겹쳐지면 서로 다른 색상을 만들어냅니다.

RGB 작동 방식을 더 잘 이해하기 위해 작은 도구를 만들어 보겠습니다.

---

HTML

<fieldset class="rgb">
  <label class="r">
    R:<input
      type="number"
      name="r"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="g">
    G:<input
      type="number"
      name="g"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="b">
    B:<input
      type="number"
      name="b"
      min="0"
      max="255"
      value="255"
  /></label>
  <output class="rg">R+G</output>
  <output class="rb">R+B</output>
  <output class="gb">G+B</output>
</fieldset>

스타일

먼저 9x8 그리드를 만들어 보겠습니다.

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

특이한 크기인데 R, G, B 원이 5x5이고 겹쳐:
기 때문입니다.

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

.r, .g 및 .b에 대한 CSS는 다음과 같습니다.

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

최근에는 그리드 영역을 많이 사용하고 있습니다. 매우 특정한 위치에 그리드 항목을 배치할 수 있습니다.

행 시작 / 열 시작 / 행 끝 / 열 끝

Dev Tools의 그리드 시각화 도우미를 활성화하면 시각화하기가 더 쉽습니다.

세 가지 CSS 사용자 정의 속성인 --r, --g 및 --b를 보셨나요? 작은 JS 스니펫으로 이를 업데이트하겠습니다.

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

기본적으로 그게 전부입니다. 몇 가지 <출력> 요소를 추가하고 사소한 조정을 했습니다. 하지만 시각화 도우미가 작동하도록 가장 중요한 한 줄을 언급하는 것을 거의 잊었습니다.

믹스-블렌드 모드: 차이

여기에서 자세한 내용을 읽어보세요. 모든 모드를 반복해 보는 것은 정말 재미있습니다.

---

데모

여기 Codepen이 있습니다. R, G, B 아래의 숫자를 클릭하고 편집하면 페이지 배경과 세 원의 겹치는 부분이 어떻게 변하는 지 확인할 수 있습니다.

위 내용은 타자기에서 픽셀까지: CMYK, RGB 및 색상 시각화 장치 구축을 통한 여정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!