2D 도트 프로그램 - 2D doteu peulogeulaem

지도보기

[신도림테크노마트] 서울 구로구 구로동 6층 스킬트리랩

참여신청/취소 안내

  • * 모임의 신청/취소/변경/환불은 참여신청 기간 내에만 가능합니다.
  • * 결제한 유료모임은 환불 시 결제 수단과 환불 시점에 따라 수수료가 부과될 수 있습니다. 자세한 사항은 취소/환불약관을 확인해주세요.
  • * 결제, 환불, 참여신청 수정/취소, 참여상태 확인, 참여내역 확인은 마이페이지에서 할 수 있습니다.
  • * 모임 또는 그룹의 설정, 모집정원 초과 여부에 따라 대기자로 선정될 수 있습니다. 자세히보기
  • * 온오프믹스 결제서비스를 이용하는 모임은 개설자의 사업자 여부에 따라 결제증빙 발행이 가능합니다. 자세히보기
  • * 개설자 선정방식 또는 개설자 통장입금 방식의 모임 참여/결제 확인은 개설자에게 문의 바랍니다.
  • * 온오프믹스는 참여신청 및 참가비 결제 기능을 제공하는 회사로 모임개설자(주최측)가 아닙니다. 모임 내용과 관련한 사항은 모임 개설자에게 문의 바랍니다.

아티스트 Dado Almeida 씨의 픽셀 아트 만드는 법 강좌입니다. 64×64 픽셀 캔버스에 초상화를 만들면서 선을 깔끔하게 조정하는 방법과 적은 선 수로 그라데이션을 넣는 방법에 대해 자세히 설명합니다.

  • 클튜
  • CLIP STUDIO PAINT
  • 일러스트

픽셀 아트 소개

오늘날 우리가 알고 있는 컴퓨터 그래픽과 디지털 아트의 근본은 픽셀 아트입니다.

 

옛날에는 컴퓨터에서 만들어진 모든 예술 작품이 픽셀에 의한 것이어야 했기 때문에 ‘픽셀 아트’라는 스타일이 없었습니다.

 

컴퓨터가 진화하면서 이미지를 렌더링할 수 있는 기능이 고도화되어 컴퓨터 아티스트가 구형 하드웨어의 제한 없이 창작할 수 있게 되었습니다.

 

이러한 한계를 염두에 두고 예술을 창조하는 것은 하나의 예술 형태로 픽셀 아트의 핵심입니다.

 

더 이상 필요하지 않지만, 오래된 기술이나 기술의 테두리 안에서 자신을 창조하는 것은 아티스트로서 도움이 됩니다.

 

다음은 픽셀 아트를 사용한 탐구의 몇 가지 예입니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

이 첫 번째 글에서는 여러분만의 픽셀 아트를 만들 수 있도록 몇 가지 특징, 기본 기술 및 지침에 중점을 두어 설명하겠습니다.

여기에 있는 모든 정보는 모든 ‘스타일’ 및 모든 소프트웨어에 적용할 수 있습니다. 그리고 이것이 이 주제의 매력입니다.

 

이 예술 형태의 기술적인 측면은 특히 비디오 게임기에 활용하려는 경우 중요합니다.

 

하지만 마음에 들지 않으면 세 가지 색으로만 구성된 32×32 픽셀 크기의 작품을 억지로 만들 필요는 없다는 것을 기억하세요. 

 

실제로 구식 디지털 아티스트의 기본과 기술을 존중하는 것이 도움이 되지만, 반드시 그렇게 해야 하는 것은 아닙니다.

 

직접 만들면서 배우기

이 글에서는 접근하기 쉬운 도전을 제안합니다.

64×64 픽셀 초상화를 만들어 봅시다.

 

간단해요!

자신을 그리거나 팬 아트나 캐릭터를 만들 수 있습니다.
소셜 미디어 아바타로 사용할 수 있는 작품을 만드는 것이 목표입니다.

 

픽셀 단위가 보이도록 작은 (해상도) 파일 크기로 시작하세요. 픽셀이 선명하지 않으면 픽셀 아트를 만드는 의미가 없습니다.

 

캔버스 설정

 이 글에서는 CLIP STUDIO PAINT(클튜)를 사용하겠습니다.
픽셀 아트를 만들기 위한 훌륭한 전용 도구가 있지만 어떤 드로잉 프로그램으로도 만들 수 있습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

    • 64×64 픽셀 캔버스를 만듭니다(1).
    • [표시]로 이동 → [그리드/눈금자 설정]을 선택합니다(2).
    • 단일 픽셀마다 그리드를 볼 수 있도록 다음과 같이 구성하세요. SHIFT+G 단축 키를 사용하여 언제든지 그리드를 켜고 끌 수 있습니다(3).

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

픽셀 아트로 작업하는 좋은 방법은 확대하여 그리는 데 익숙해지는 것이지만 실제 크기의 작품을 주시하는 것입니다(4).

 

현재 캔버스의 보조 보기를 작성하려면 [창] → [캔버스] → [신규 창]을 선택하세요.
100%로 설정하고 [워크스페이스]에서 조정하세요(5).

 

픽셀 아트 도구 만들기

기본 개념을 소개할 시간입니다.

픽셀 아트는 자동 안티에일리어싱과 함께 사용되지 않습니다.

 

안티에일리어싱은 모양의 가장자리를 부드럽게 하는 유용한 알고리즘입니다.
이것은 에일리어싱된(우둘투둘해진) 가장자리에 가까운 픽셀 행을 추가하여 만들어집니다.

 

이 예에서 볼 수 있듯이 안티에일리어싱된 가장자리(7)에는 픽셀의 자동 그라데이션이 있어 모양의 윤곽이 더 매끄러워집니다.

에일리어싱된 가장자리(6)는 픽셀 아트를 만들 때 필요한 것입니다. 나중에 가장자리를 부드럽게 할 수 있지만 수동으로 안티에이리어싱을 추가할 수 있습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

픽셀 아트를 만들기 위해 소프트웨어를 사용할 때 일반적으로 브러시, 도구 및 변형에서 안티에일리어싱 알고리즘을 비활성화하는 것이 좋습니다.

 

다음의 경우 CLIP STUDIO PAINT(클튜)에서 안티에일리어싱을 해제해야 합니다.

 

  • 브러시(8)
  • 선택, 채우기, 텍스트 등의 도구(9)
  • 그리고 [편집] → [변형](10)을 사용하여 변환 시

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

CLIP STUDIO PAINT(클튜)에는 이미 ‘픽셀 아트’ 펜이 있는데 [마커] 보조 도구에 있는 ‘도트 펜’이 그것입니다(11).

사용 가능한 가장 간단한 그리기 브러시입니다. 고정된 1픽셀 크기로 안티에일리어싱이 항상 꺼져 있으며 손떨림 보정 또는 밑바탕 혼색에 대한 옵션이 없습니다.

이 강좌에서는 이 브러시만 사용하시길 바랍니다.
후반에 ‘공통’ 브러시를 복제하여 픽셀 아트에 사용할수 있습니다(브러시 크기를 낮추고 안티에일리어싱을 비활성화하는 한) .

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

선화 그리기

이것은 정면을 향한 초상화이므로 [대칭자](12)를 사용하여 그리기 시작하겠습니다.

 

캔버스에 대칭자를 배치하고 한가운데에 있는지 확인하려면 [오브젝트] 도구를 사용하여 이를 선택하고 수동으로 값을 입력하세요(13).

이 경우 중심 X 및 중심 Y값을 32로 변경했습니다. 이는 전체 캔버스 크기(64픽셀)의 절반입니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

이제 도트 펜을 다시 선택하고 그리기 시작하세요.
이 브러시의 크기를 조정할 수 없으므로 그리기 중인 캔버스를 확대(15)하고 복제한 것을 참조(14)로 사용하는 것이 좋습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

머리의 모양(16)을 파악하기 위해 초기 스케치를 그린 후 디테일을 추가했습니다(17).

굳이 파란색을 사용할 필요는 없습니다. 저는 최종 드로잉을 위해 러프 스케치를 만들고 있다고 인식하는 데 도움이 되기 때문에 선호합니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

스케치를 마치면 선화 작업을 진행할 수 있습니다.

마지막 선을 그려 넣기 전에 픽셀 아트에서 선과 곡선을 그리는 간단한 기술을 보여드리겠습니다.

 

아래 예에서 선화(18)는 단일 픽셀 라인이어야 하는 중복 픽셀이 많기 때문에 부드럽지 않습니다.

 

곡선에서 인접한 픽셀을 제거하는 ‘중복’을 수정할 수 있습니다. 예(19)에서 빨간색으로 표시된 모든 픽셀을 삭제했습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

스케치로 돌아가서 선화 작업을 깨끗하게 수정할 수 있는 ‘중복’을 찾아보세요.

곡선이 올바르지 않다고 걱정하지 마세요. 그저 원하지 않는 픽셀만 삭제하세요.

요령: 픽셀을 지워야 하는 경우 투명색으로 간단히 바꿀 수 있습니다(단축 키가 X로 설정되어 있음).

아래 예에서 초기 스케치(20)와 정리된 버전(21)의 차이를 볼 수 있습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

다른 기법에 대해 배울 준비가 되었나요?

그림을 수정하고 곡선을 조정해 봅시다.

 

아래의 예(22)를 보면 픽셀의 분포와 간격이 논리적이지 않은 것을 알 수 있습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

이 개선된 버전(23)에서 곡선을 그리기 위해 더 나은 픽셀 배열을 찾을 수 있습니다.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

그 지식을 바탕으로 그림을 계속 그리기 전에 다음 연습을 해 보세요.

지금까지 배운 두 가지 개념으로 임의의 선과 곡선을 그려 보세요. ‘중복‘을 제거하고 ‘픽셀 배열‘을 유지하세요.

 

이를 통해 픽셀 아트에서 도형의 윤곽을 그리는 방법에 대해 확실히 알 수 있습니다.

비율, 곡선을 약간 조정하고 불필요한 픽셀을 삭제하여 얼굴을 더 알아보기 쉽게 만듭니다.

아래의 최종 선화(25)와 원래 버전(24)과 비교하고 기술을 어디에 적용했는지 알아맞춰 보세요.

 

2D 도트 프로그램 - 2D doteu peulogeulaem

 

채색

스프라이트(게임 개발에서 장면 일부를 구성하는 2D 비트맵 이미지를 등록하고 합성하는 기능을 지칭하는 용어)에 사용되는 색 수는 기존 기술의 특정 한계에 어느 정도 가깝게 할 것인지에 따라 다릅니다.