Retro Comic Book Art: 웹 디자인에 Ben Day Dot 사용하기

웹 디자이너로서 우리는 항상 웹사이트에 추가할 새롭고 창의적인 아이디어를 찾고 있습니다. 고맙게도 영감을 찾는 것은 어렵지 않습니다. 예를 들어, 레트로 만화책 아트는 항상 컴백합니다. 때로는 타이포그래피처럼, 때로는 사진 필터처럼. 요즘 벤데이 도트가 들어간 텍스처와 일러스트가 곳곳에 등장하고 있습니다. 직접 사용해보고 싶으신가요?

이 기사에서는 Ben Day 도트의 기원과 직접 만드는 방법을 설명합니다. 또한 웹 디자인에서 이 시각적 기술을 사용하는 방법에 대한 몇 가지 예가 있습니다.

벤 데이 도트 및 하프톤 도트

"벤 데이 도트"와 "레트로 만화책 아트"라는 용어는 같은 의미로 사용되는 경향이 있습니다. 사실 벤데이 도트가 먼저 나왔다. Benjamin Henry Day Jr.는 컬러 인쇄 비용을 줄이기 위해 1879년에 제작했습니다. 그리드에 균등하게 떨어진 점을 배치하는 기술입니다. 흰색 위에 인쇄된 빨간색 점은 분홍색을 만들고 파란색 및 노란색 점은 녹색을 만듭니다.

Ben Day 도트는 흑백 석판 인쇄 및 사진 인쇄에 사용된 하프톤 도트에서 영감을 받았습니다. 두 도트 스타일은 정사각형 그리드에 배열되지만 하프톤 도트는 크기가 다른 반면 벤 데이 도트는 모두 동일합니다.

벤 데이 도트, 만화책, 로이 리히텐슈타인

1930년대에 만화책이 크게 등장했고 벤 데이 도트가 인쇄 기술로 사용되었습니다. 벤 데이 도트는 1960년대 Roy Lichtenstein이 그들의 일반적인 독창성에서 영감을 얻을 때까지 정확히 순수 예술이 아니었습니다. Ben Day 도트를 각광으로 가져온 것은 Roy Lichtenstein의 만화책 아트 작업이었습니다. 리히텐슈타인이 한 일은 펄프 만화책 페이지의 작은 부분을 복사하여 대규모 걸작으로 만드는 것이었습니다.

로이 리히텐슈타인은 벤 데이 점과 유사한 점을 사용했지만 조금 달랐습니다. 미술사가들은 "리히텐슈타인 점"이라고 부르는 것이 더 적절하다고 말할 것입니다. 주요 차이점은 Ben Day 점은 작고 정사각형 격자에 있는 반면 Lichtenstein 점은 오프셋된 대각선 격자에 있고 상당히 더 큽니다.

이미지 크레디트 Radu Bercan / shutterstock.com

레트로 만화책 예술의 부상

Roy Lichtenstein의 예술은 복고풍 만화책 예술의 대명사가 되었습니다. 많은 예술가들이 리히텐슈타인 기법을 복사했습니다. 많은 디자이너들이 브랜딩 계획과 마케팅 자료를 위해 작품에 만화책 점을 사용했습니다. 이제 웹사이트에 Ben Day 점 또는 Lichtenstein 점을 추가할 수도 있습니다.

스크롤하여 자신만의 Ben Day 도트 작품을 만드는 방법을 알아보세요. 달성하게 될 최종 디자인은 실제로 다양한 기술을 다룰 것입니다. 하프톤 도트, 벤 데이 도트 및 리히텐슈타인 도트. 전체적으로 복고풍 만화책 스타일의 디자인입니다.

시작하겠습니다.

Photoshop으로 레트로 만화책 아트를 만드는 방법

하프톤 도트는 매우 일반적이어서 Photoshop에는 필터가 있으며 모든 이미지에서 작동합니다. 이 필터가 하는 일은 이미지의 색상을 점으로 바꾸는 것입니다. 점의 각도 분포는 색상 채널에 의해 제어됩니다. 필터를 적용하면 이제 이미지가 청록색, 자홍색, 노란색 및 검은색 점으로 구성됩니다. 빨간색(#ff0000), 녹색(#00ff00), 파란색(#0000ff)과 같은 순수한 색상에 중간색 필터를 적용하면 분리할 색상이 없으므로 필터가 작동하지 않습니다.

적절한 벤 데이 도트와 리히텐슈타인 도트를 만들려면 Adobe Illustrator가 필요합니다. 건너뛰려면 여기를 클릭하세요.

Photoshop을 사용하여 하프톤 도트에서 사진을 레트로 만화책 아트처럼 보이게 하는 방법

1. 만화책 스타일의 점으로 바꾸고 싶은 이미지를 선택하세요.

저는 무료 스톡 사진 사이트인 Gratisography에서 이 웃긴 사람을 선택했습니다. 따라하기 위해 동일한 이미지를 사용하려면 여기를 클릭하십시오. Photoshop에서 이미지를 열고 캔버스 중앙에 놓습니다.

2. 레이어를 두 번 복제하고 첫 번째 레이어를 숨깁니다.

복제하려면 첫 번째 레이어가 선택된 상태에서 마우스 오른쪽 버튼을 클릭하고 '레이어 복제'를 선택하거나 Mac에서는 Command+J, PC에서는 Ctrl+J를 클릭합니다. 각 항목을 추적하지 않도록 이름을 바꿉니다. 상단 레이어의 혼합 옵션을 '하드 라이트'로 조정하고 불투명도를 약 40%로 낮춥니다. 색상이 극적으로 변경되어 하프톤 도트의 거친 모양을 얻는 데 도움이 됩니다.

3. 상위 두 레이어를 그룹화하여 스마트 개체로 바꿉니다.

4. 스마트 오브젝트에 하프톤 도트 필터를 적용합니다.

색상 하프톤 설정 팝업에서 최대 크기 픽셀을 13으로 선택하고 채널을 다양한 각도로 선택합니다. 이것들을 가지고 놀면 다른 효과를 볼 수 있습니다.

5. 맨 아래 레이어를 복제하여 맨 위로 이동합니다.

'가장자리 찾기' 필터를 적용하고 윤곽선이 더 잘 보이도록 수준을 조정합니다. 이렇게 하려면 검은색 삼각형을 오른쪽으로 멀리 이동하고 흰색 삼각형을 왼쪽으로 이동합니다.

6. 조정을 사용하여 레이어를 흑백으로 바꿉니다.

조정 레이어의 불투명도를 30%로 설정합니다. 마지막으로 '가장자리 찾기' 레이어의 레이어 옵션을 '오버레이'로 설정합니다.

완성된 디자인!

Photoshop으로 복고풍 만화책 아트 배경을 만드는 방법

1. 디자인이나 그라데이션이 멋진 배경색을 찾습니다.

Photoshop 대시보드에서 이미지를 열고 화면 중앙에 배치합니다.

2. 배경 레이어의 잠금을 해제하고 복제한 다음 맨 아래 레이어를 숨깁니다.

맨 위 레이어에 중간색 도트 필터를 적용합니다. 다양한 효과에 대해 하프톤 도트 필터 팝업에서 매개변수를 조정합니다.

3. 완성된 디자인!

Illustrator로 레트로 만화책 아트 배경을 만드는 방법

앞서 언급했듯이 이미지의 대비를 재현하기 위해 하프톤 도트의 크기가 다릅니다. 위에서 사용한 Photoshop 필터는 그 효과에 적합합니다. 그러나 벤데이 도트 또는 리히텐슈타인 도트와 같은 동일한 크기의 도트를 만들려면 Adobe Illustrator와 통합 패턴 메이커를 사용해야 합니다. 위에서 언급했듯이 Ben Day 점은 정사각형 격자에 있고 리히텐슈타인 점은 오프셋된 대각선 격자에 있습니다. 두 가지 모두 Illustrator의 패턴 메이커를 사용하여 수행할 수 있습니다.

Illustrator로 벤데이 도트 패턴을 만드는 방법

1. Illustrator에서 새 프로젝트를 만듭니다.

크기는 별로 중요하지 않습니다. 600 x 350픽셀을 사용했습니다.

2. 둥근 사각형 도구를 선택합니다.

대지를 한 번 클릭하고 모양의 크기를 설정합니다. 7.5 황소 모서리 반경으로 15px x 15px로 만듭니다. 획이 없는 파란색 채우기로 원의 색상을 변경합니다.

3. 상단 메뉴바에서 '오브젝트'를 클릭하고 '패턴'을 선택한 후 '만들기'를 선택합니다.

4. 점이 정사각형 격자에 오도록 기본 설정을 조정합니다.

다음은 선택해야 하는 기본 설정입니다.

• 그리드에 타일 유형 선택
• 아트에 타일 크기 확인
• H 간격 및 V 간격을 15x15픽셀로 설정합니다.
• 9 x 9로 복사 선택

아래 이미지와 같은 패턴이 보이면 완료를 클릭합니다. 그러면 패턴이 견본 패널에 자동으로 저장됩니다.

Illustrator로 리히텐슈타인 도트 패턴을 만드는 방법

이 패턴은 위와 동일한 단계를 따르며 패턴 메이커에서 기본 설정을 조정할 때만 변경됩니다. Ben-Day 패턴 환경설정을 열고 '사본 저장'을 누르십시오. 새 패턴의 이름을 'Lichtenstein Dots'로 지정합니다. 확인을 클릭하면 견본 패널에 사본으로 저장됩니다. 벤데이 도트 패턴을 닫습니다. 견본 패널로 돌아가서 리히텐슈타인 점 패턴을 엽니다. 패턴 위에 마우스를 가져가면 패턴 이름이 포함된 팝업이 표시됩니다. 환경 설정에서 레이아웃 유형만 'Brick by Row'로 변경하고 완료를 클릭합니다.

모양에 복고풍 만화책 아트 패턴을 추가하는 방법

이제 자신만의 레트로 만화책 패턴을 만들었으므로 언제든지 원하는 모양에 적용할 수 있습니다. 먼저 향후 프로젝트에 추가할 수 있도록 패턴 견본을 저장해야 합니다.

1. 견본 패널에서 우리가 만든 새 패턴을 모두 선택합니다.

견본 라이브러리 아이콘을 클릭하고 '견본 저장'을 선택하십시오. 새 견본의 이름을 '레트로 만화책 패턴'으로 지정하고 확인을 클릭합니다.

2. 새 프로젝트를 만들고 이러한 패턴을 사용하려면 견본 패널로 이동하십시오.

새 견본이 거기에 표시되지 않으므로 가져와야 합니다. 다시 한 번 견본 라이브러리 아이콘을 클릭하고 '사용자 정의'로 스크롤한 다음 '복고풍 만화책 패턴'으로 스크롤합니다. 견본과 만화책 패턴이 포함된 일반 색상으로 새 창이 열립니다. 이제 원하는 모양에 사용할 준비가 되었습니다.

3. 새 모양을 만들고 패턴 중 하나로 채웁니다.

점의 크기는 만드는 모양의 크기에 따라 달라집니다. 모양의 최대 크기는 대지 크기로 제어됩니다.

모양이 작을수록 점이 커지고 그 반대의 경우도 마찬가지입니다. 작은 모양을 사용할 때 점이 너무 크다고 생각되면 모양 내부의 패턴을 마우스 오른쪽 버튼으로 클릭하고 '변형'을 선택한 다음 '크기 조절'을 선택하십시오. 점을 아주 작게 만들려면 다음 매개변수를 선택하십시오.

• 유니폼: 10%
• 옵션에서: 변환 패턴 확인

다양한 크기의 도트를 얻으려면 '균일' 옵션에 대해 다른 매개변수를 사용해 보십시오.

4. 레트로 만화책 스타일로 별 모양을 만들려면 1000px x 1000px의 새 프로젝트를 만듭니다.

색상 패널에서 획에 검정색을 클릭하고 채우기에 리히텐슈타인 패턴을 클릭합니다. 별 모양을 선택하고 캔버스를 클릭하여 표시합니다.

웹 디자인에서 레트로 만화책 아트를 사용하기 위한 아이디어

만화책 아트 트렌드가 상승세를 타고 있는 것 같습니다. 물론 모든 브랜드가 이러한 창의성 스타일의 혜택을 받는 것은 아닙니다. 재미있고 색상을 좋아하는 브랜드의 경우 Ben Day 도트와 리히텐슈타인에서 영감을 받은 그래픽이 신선한 공기를 마시기에 완벽합니다. 만화책 도트 패턴의 가장 좋은 용도는 다른 색상 위에 있거나 없는 배경입니다. 마찬가지로 콘텐츠에 큰 말풍선을 구분 기호로 사용하거나 만화책 스타일의 느낌표를 사용해 보세요. 위의 자습서를 사용하여 직접 만들거나 Freepik에서 이미 디자인된 이미지를 가져올 수 있습니다.

아래 디자인은 Freepik에서 제공한 만화책 디자인으로 구현되었습니다. 보시다시피, 디자이너는 점의 크기를 디자인하는 방법에 약간의 자유를 주었습니다. 그럼에도 불구하고 그들은 여전히 ​​자신의 방식으로 레트로 만화 스타일을 완벽하게 구현합니다.

결론

보시다시피 레트로 만화책 디자인의 가능성은 매우 다양합니다. 클래식 스타일에서 최신 버전에 이르기까지 거의 모든 작업을 수행할 수 있습니다. 패턴을 직접 만들거나 온라인에서 그래픽을 제공하든 상관없이 Retro Comic Book art와 Divi를 사용하여 꽤 놀라운 것을 만들 수 있습니다!