디시인사이드 갤러리

마이너 갤러리 이슈박스, 최근방문 갤러리

갤러리 본문 영역

[🖼️작품] Pixel Joint Forum Tutorial [한글판] 04

새우맨(222.120) 2017.04.10 17:48:55
조회 8196 추천 19 댓글 4
														

원문 : http://pixeljoint.com/forum/forum_posts.asp?TID=11299

01 : https://gall.dcinside.com/mgallery/board/view/?id=pixelart&no=1732
02 : https://gall.dcinside.com/mgallery/board/view/?id=pixelart&no=2011

03 : https://gall.dcinside.com/mgallery/board/view/?id=pixelart&no=2014


(의역 심함 주의)


~ 03편 : '피해야 할 것들' 에서 이어짐 ~





#밴딩(Banding)

밴딩이란 간단히 말해서 픽셀들이 일렬로 늘어선 것입니다. 인접한 픽셀들이 x나 y축으로 일렬로 늘어서게 되면 그 픽셀들이 돋보이게 되고, 결과적으로 사각사각한 그리드(격자grid)를 더욱 드러나게 만듭니다. 이는 해상도가 낮다는 사실을 보는 사람에게 주지시키게 되죠.

아래에는 밴딩의 몇가지 사례가 있습니다. (각각의 밴딩에 붙인 이름은 일반적인 용어가 아니라 이 튜토리얼에서 임의로 붙인 이름입니다.)

허깅(Hugging)
아래 보시면 한줄로 늘어선 외곽선 픽셀들이 보이시죠. 외곽선 자체의 역할은 잘 해내고 있지만 내부의 형체를 드러내는 데에는 효과적이지 않을 뿐더러 사각사각한 그리드를 눈에 띄게 만들어버리고 있습니다.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d1f2203d1f7ab33228e76c52


(왼쪽:허깅 / 오른쪽:허깅이 해소된 적절한 예)

두꺼운 픽셀(Fat pixels)

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad680f23038ff83cf6a64524ae6


두꺼운 픽셀이라 이름붙인 이것은 홀로 있으면 작은 사각형처럼 보입니다. 덧대어지면 두꺼운 선처럼 보이고 더 덧대어지면 커다란 계단 모양의 밴딩이 되어버립니다.

1칸 건너뛴 밴딩(Skip-one banding)

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d6a62a0b7f3d604c0c500086


(왼쪽: 보라색 픽셀이 가로로 밴딩을 만듭니다. / 오른쪽: 한픽셀 없앰으로써 가로로 일렬로 된 형태를 해소했습니다)
두개의 밴딩 사이에 빈칸 1칸이 있음에도 불구하고 우리의 눈에는 격자를 눈에 띄게 해버립니다.

45도 밴딩(45 degree banding)

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d4f9e2e3c2fbe661a336bad8


1픽셀 두께로 외곽선을 쳤지만 밴딩이 생겨버립니다.




#필로우 셰이딩 (<- 명암을 꼭 베개(pillow)처럼 안쪽에서 바깥쪽으로 생각없이 넣었다.. 를 뜻하는 픽셀아트 관용구입니다...)
필로우 셰이딩은 명암을 중앙에서부터 바깥으로 점점 어둡게 띠를 이루며 넣은 것을 의미합니다. 필로우셰이딩은 보통 피해야할 방법으로 여겨집니다. 왜냐하면 광원에 대한 고려가 없고, 그때문에 빛에 의해 나타나는 형태가 아니라 그저 관념적인 형태를 그려넣은 것에 불과하기 때문입니다. 필로우셰이딩은 대개 밴딩 현상을 수반합니다. 빛이 어디에서 오는지 고려해서 명암을 넣는다면 필로우셰이딩을 해결할 수 있습니다.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d4a1d059989f86d7a796706f


(왼쪽: 필로우셰이딩(광원을 생각하지 않음) / 오른쪽: 제대로 된 명암넣기(광원이 왼쪽위에서 쏟아짐))

필로우셰이딩이 잘못됐다 말하는 이유는 단지 광원이 보는사람의 시점에서 쏘아질 수 없다는 것 때문이 아닙니다. 광원의 방향이 어때야 한다는 규칙은 없습니다. 필로우셰이딩이 잘못된 이유는 공간에서 광원이 향하는 방향을 생각치않고 그저 기계적으로 명암을 넣었기 때문입니다.
만약 보는 사람 시점에서 광원이 쏘아진다면 아래처럼 그려낼 수 있을 것입니다.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d6a116b979db8a3b0c8e4b04


(왼쪽: 필로우셰이딩 / 오른쪽: 적절한 명암넣기(보는사람 시점에서 광원이 쏘아질 때))


#노이즈
많은 경우에 단독으로 떨어진 픽셀(픽셀 클러스터(덩어리)에 속하지 않은 픽셀)은 그자체로는 충분한 정보를 제공하지 못하며, 그저 노이즈처럼 보일 뿐입니다. 노이즈는 전체 그림의 묘사에 도움을 주기는 커녕 그저 보는 사람에게 눈에 거슬리는 잡음처럼 느껴집니다. 그래서 픽셀아트에서 혼자 덩그러니 놓여져 있는 픽셀들은 노이즈로 여겨집니다. 이 튜토리얼에서 '혼자 떨어져있는 픽셀이 만드는 노이즈'를 그냥 간단히 '노이즈'라고 부르겠습니다.
25% 디더링 패턴을 사용할 경우(사실 모든 디더링이 마찬가지지만) 특히 주의를 기울여야 하는 이유는 각각의 따로 떨어진 픽셀들이 만들어내는 '노이즈' 때문입니다.
단독 픽셀들은 픽셀들이 놓여진 그리드 공간(격자)를 더욱 돋보이게 하고 이미지가 저해상도라는 사실을 부각시킵니다. 기억하세요, 픽셀은 언제나 무리지어 다녀야만 합니다. 픽셀 클러스터(픽셀 덩어리)에 속해 있어야 하는 것입니다. 이런 이유로 단독으로 떨어진 픽셀들은 매우 의도적으로 필요한 곳에만 활용되어야 합니다.

아래에는 단독 픽셀들이 적절하게 활용된 예시를 보여드립니다.


반사광 하이라이트를 묘사할 때
단독 픽셀로 디테일을 묘사하면 그 픽셀은 매우 주목받는 존재가 됩니다. 만약 그걸 의도한 것이라면 괜찮습니다. 밝은 반사 하이라이트를 묘사할 때 같은 경우죠. 예를 들어 아래 몬스터의 코 부분 같은 경우입니다.

작지만 필수적인 디테일을 묘사하는 경우

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad681f0659d9f23a96dc2222703


(왼쪽: 하이라이트가 코와 윗입술에 묘사됨 / 오른쪽: 부리와 눈이 단독 픽셀로 묘사됨)

또 작은 이미지에서 눈이나 새의 부리, 별, 작은 물거품 등을 묘사할 때

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad682a697cde076ee4c6094fc73






#셀아웃(Sel-out) (broken outlines)
셀아웃(sel-out : selective outline 또는, 깨진 외곽선broken outlines)은 외곽선에게 배경색과의 안티알리아싱을 먹인 결과입니다. 이건 좋지 않은 안티알리아싱의 예에 속하지만 따로 섹션을 할애할 정도로 흔하게 보이는 실수이기도 합니다.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d6a538d670aae8a6881d3da0


(왼쪽: 검정외곽선 / 오른쪽: 외곽선에 생각없이 안티알리아싱을 먹인 예)



외곽선에 어두운 색을 칠하는 이런 방식은 배경색에 어떤 컬러가 오더라도 물체가 뭍히지 않게 해주는 요령으로 활용되곤 합니다. 그런데 셀아웃이란 이 외곽선에 광원에 대한 고려없이 기계적으로 첨가한 셰이딩을 가리킵니다. 제대로 광원을 고려해서 외곽선 명암을 수정한다면 이렇게 끊어진 듯 깨진 외곽선이 나오지 않겠죠. 아래를 봐 주세요.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d1f77be11f0f1af8075febed


(왼쪽: 외곽선이 왼쪽위에서 쏟아지는 광원을 고려해 처리됨 / 오른쪽: 광원 고려 없이 외곽선을 셀아웃함)




아래에 보다 심플한 예시가 있습니다. 왼쪽위에서 내려오는 광원에 대해 왼쪽 반원의 외곽선은 제대로 묘사되어 있습니다. 그러나 오른쪽 반원은 그렇지 않죠.

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad681f8a6c4d257910acfb13e4f



셀아웃은 특별한 상황을 고려해서 넣은 경우에는 잘 작동하기도 합니다. 예를 들면 항상 어두운 배경만 나오는 게임의 캐릭터 스프라이트 같은 경우죠. (역주 : 이경우 왼쪽보다는 오른쪽이 더 올바른 예시라 볼 수 있겠습니다)

viewimage.php?id=3db4c823e9d32ab2&no=29bcc427b28477a16fb3dab004c86b6f97928ae591e31d37f62aeb7c4f18a5876196a2b9815a30d3ab4082fdfad6d2a34d7a3d1cb558f495da71






......이미지 12개도 올라가잖아...? 디용..

다음편은 '팔레트 만들기'

추천 비추천

19

고정닉 4

댓글 영역

전체 댓글 0
등록순정렬 기준선택
본문 보기

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 말머리 제목 글쓴이 작성일 조회 추천
2860 설문 경제관념 부족해서 돈 막 쓸 것 같은 스타는? 운영자 24/05/13 - -
24973 공지 완장호출용 Pixelart갤로그로 이동합니다. 22.12.26 1802 5
24510 공지 도트갤 공지,가이드 글 [5] Pixelart갤로그로 이동합니다. 22.11.10 26846 30
2385 공지 도트에 관련된 글을 맘편히 올려주세요. [18] 픽셀아트갤로그로 이동합니다. 17.05.22 13597 57
2386 공지 점갤에는 콜라보라는 유익한 문화가 있습니다. 이곳에서 확인해보세요. [22] 픽셀아트갤로그로 이동합니다. 17.05.22 19252 42
29359 🖼️작 공격 모션 [1] 도붕이(119.69) 13:32 30 2
29358 🖼️작 천둥의돌 날이갤로그로 이동합니다. 13:28 39 5
29357 ❔질문 하늘보는 구도 왜케 어렵지 ㅇㅇ(121.188) 13:05 15 0
29356 ❔질문 aseprite 닫기 질문 [1] 06갤로그로 이동합니다. 11:29 40 0
29355 🖼️작 멀티거너 IFV [1] 도트초보갤로그로 이동합니다. 10:17 52 4
29354 🖼️작 f*** the end [3] BitBits갤로그로 이동합니다. 08:36 84 8
29353 🖼️작 첫글입니다~ [2] 도붕이(110.8) 01:33 95 6
29352 ❔질문 무지성박치기하다 밑그림의 중요성을 깨달음 [4] ㅇㅇ갤로그로 이동합니다. 01:13 95 0
29351 🖼️작 요즘 유행하는거 만드는중.gif [6] 무마우스메갤로그로 이동합니다. 01:12 120 8
29350 ❔질문 픽셀아트의 저작권은 어떻게되나요? [6] 도붕이(222.103) 05.15 125 0
29349 🖼️작 키로프 비행선 [1] 도트초보갤로그로 이동합니다. 05.15 91 5
29348 ❔질문 도트 늘려면은 따라 찍는게 맞나요? [4] 도붕이(118.37) 05.15 103 0
29347 🖼️작 수영복 시바밥갤로그로 이동합니다. 05.15 97 4
29345 🖼️작 첫 도트? 친구 그림 [1] 청포채갤로그로 이동합니다. 05.15 150 4
29344 🖼️작 최근 만든 것들 [9] ㅇㅇ(121.133) 05.15 193 11
29343 🖼️작 블아 사키 [1] 2049갤로그로 이동합니다. 05.15 148 13
29342 🖼️작 아주 사나운 댕댕이 [1] 야유요갤로그로 이동합니다. 05.15 150 10
29341 🖼️작 동방프로젝트 텐시 [5] ㅇㅇ갤로그로 이동합니다. 05.15 227 19
29340 ❔질문 원래있는 그림색깔을 팔레트에 있는 색으로만 변경할수있나요??? [1] 도붕이(211.168) 05.14 101 0
29339 🖼️작 도트캐릭터그린거+낙서한거(씹덕주의) [6] 삐유갤로그로 이동합니다. 05.14 328 25
29338 🖼️작 방 그렸어요 [1] 도붕이(121.159) 05.14 192 13
29337 ❔질문 도트 처음 시작한 뉴비인데.. [2] 도붕이(211.238) 05.14 264 18
29336 🖼️작 2장 지문12갤로그로 이동합니다. 05.14 166 13
29335 ❔질문 도붕이 aseprite 뭔가가 이상해 도와줘 [1] 도붕이(121.137) 05.14 130 0
29333 🧩wi 공격 모션 제작 중 [3] ㅇㅇ갤로그로 이동합니다. 05.14 294 16
29332 🖼️작 도트 [6] ㅇㅇ(61.43) 05.13 265 14
29330 🖼️작 블루아카 하루카 [3] 티니아갤로그로 이동합니다. 05.13 1182 14
29329 🖼️작 블루아카 시미코 [6] 죽어라이거머리야갤로그로 이동합니다. 05.13 279 22
29328 🔗퍼옴 도트에서 감성이 느껴지는 이유가 뭐지 [2] Mayushi갤로그로 이동합니다. 05.13 178 0
29325 🖼️작 도트 뉴비 조언+질문좀 받아주세여 [3] 나즈나즈나(49.175) 05.13 218 2
29324 ❔질문 도트의 빌게이츠급만 [2] 도붕이(211.34) 05.13 185 1
29323 🖼️작 커미션 모음 [2] 시계태엽케이크갤로그로 이동합니다. 05.13 237 5
29322 🧩wi 마르르크 ㅇㅇ(123.212) 05.12 159 5
29321 🖼️작 연합군 MCV [2] 도트초보갤로그로 이동합니다. 05.12 274 15
29320 🖼️작 팁보면서 만든거 [3] ㅇㅇ갤로그로 이동합니다. 05.12 331 15
29319 🖼️작 마작 호시노 [8] 알토스갤로그로 이동합니다. 05.12 366 30
29318 🖼️작 따끈한 뉴비 도붕이 평가좀 [1] 도붕이(39.114) 05.12 223 11
29317 🖼️작 오리 기사 [4] 호오리갤로그로 이동합니다. 05.12 285 16
29316 💡정보 짤막한 팁 공유 [4] 도붕이(119.206) 05.12 201 4
29315 🖼️작 바니걸 [1] 시바밥갤로그로 이동합니다. 05.12 212 7
29314 ❔질문 도트 게임 만드시는 분들께 질문 하나만 드려요 ㅠㅜ [2] ㅇㅇ(106.101) 05.12 274 1
29313 🖼️작 그레고리오 [1] 롤툴룰톨갤로그로 이동합니다. 05.12 335 21
29312 🖼️작 밤해파리 카노 찍었습니다. [1] 22.7갤로그로 이동합니다. 05.11 260 13
29311 🖼️작 도린이 짱구와 모닥불 그려보았어요 [2] ㅇㅇ(106.101) 05.11 216 11
29310 🖼️작 자캐 도트.gif ㅇㅇ(115.138) 05.11 226 8
29309 ❔질문 에이스프라이트로 첨 그려본건데 [4] ㅇㅇ갤로그로 이동합니다. 05.11 292 10
29308 🖼️작 돋트 ㅇㅇ(61.43) 05.11 286 14
29307 🖼️작 도트낙서 도붕이(59.29) 05.11 163 6
29306 🖼️작 아이작 창작 보스 [1] ㅇㅇ(124.153) 05.11 309 21
29305 🖼️작 입에물고 시바밥갤로그로 이동합니다. 05.11 193 5
갤러리 내부 검색
제목+내용게시물 정렬 옵션

오른쪽 컨텐츠 영역

실시간 베스트

1/8

뉴스

디시미디어

디시이슈

1/2