디시인사이드 갤러리

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

갤러리 본문 영역

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

새우맨(222.120) 2017.04.10 17:48:55
조회 8239 추천 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
등록순정렬 기준선택
본문 보기

하단 갤러리 리스트 영역

왼쪽 컨텐츠 영역

갤러리 리스트 영역

갤러리 리스트
번호 말머리 제목 글쓴이 작성일 조회 추천
2863 설문 시세차익 부러워 부동산 보는 눈 배우고 싶은 스타는? 운영자 24/05/27 - -
24973 공지 완장호출용 Pixelart갤로그로 이동합니다. 22.12.26 1841 5
24510 공지 도트갤 공지,가이드 글 [5] Pixelart갤로그로 이동합니다. 22.11.10 27979 30
2385 공지 도트에 관련된 글을 맘편히 올려주세요. [18] 픽셀아트갤로그로 이동합니다. 17.05.22 13644 57
2386 공지 점갤에는 콜라보라는 유익한 문화가 있습니다. 이곳에서 확인해보세요. [22] 픽셀아트갤로그로 이동합니다. 17.05.22 19318 42
29497 🖼️작 두 번째 도트~ [1] KIVVI(221.155) 10:49 22 1
29496 🖼️작 월플풍 도트 찍음 ㅇㅇ갤로그로 이동합니다. 04:02 64 3
29495 🖼️작 잉크기능을 맛본 뉴비 [1] ㅇㅇ(39.115) 02:17 79 1
29494 🖼️작 푸른밤 옥상달빛 mr.life(1.229) 02:13 61 4
29493 🔧피드 도트뉴비조언구합니다>가라조언인데 받을래? dualSkewer갤로그로 이동합니다. 05.31 106 2
29492 🖼️작 돝린이 판타지 배경 그려옴 [8] ㅎㄹ(221.168) 05.31 181 11
29491 ❔질문 psd를 에이스프라이트로 변환하는건 없어? [1] 도붕이(123.142) 05.31 66 0
29490 🖼️작 연습했다 도붕이(211.39) 05.31 98 3
29489 🔧피드 도트 뉴비 조언구합니다 [2] 남무갤로그로 이동합니다. 05.31 173 0
29488 🖼️작 팡타스크급 구축함 [3] 도트초보갤로그로 이동합니다. 05.31 135 6
29487 💡정보 무료 도트 프로그램 Pixelorama 도붕이(117.111) 05.30 205 11
29486 🔗퍼옴 도트겜을 초고해상도로 돌린다면..jpg [1] 슬러시갤로그로 이동합니다. 05.30 206 2
29485 🖼️작 도붕이 그리고 있는거 [8] ㅇㅇ(58.126) 05.30 190 7
29484 🖼️작 아조씨 그리는중 [1] ㅇㅇ(1.241) 05.30 142 5
29483 🖼️작 아마 올해 안에 [4] ㅇㅇ(222.120) 05.30 307 14
29482 💡정보 콜로소보다는 유데미 강의가 가성비가 좋음 [1] 도붕이(117.111) 05.30 150 7
29481 🖼️작 통나무 도트 [1] ㅇㅇ(125.189) 05.30 157 6
29480 🖼️작 도트 도트 [2] 도붕이(122.34) 05.30 138 7
29479 ❔질문 뉴비 도트 찍었는데 질문있음 [4] 도붕이(118.129) 05.30 207 3
29478 🖼️작 날틀 3종 IllIlIll갤로그로 이동합니다. 05.30 123 4
29477 ❔질문 뉴비 도트 강의 뭐 들으면 좋음? [4] 도붕이(118.37) 05.30 139 0
29476 🖼️작 오버워치 도트 [1] ㅇㅇ(218.153) 05.30 172 8
29475 🖼️작 포켓몬 땅밑 탐험대 [2] 호오리갤로그로 이동합니다. 05.30 236 13
29474 ❔질문 aseprint 컴파일 질문 도붕이(112.184) 05.29 68 0
29473 💡정보 픽셀 스튜디오 버그 레전드... [2] ㅎㄹ(221.168) 05.29 240 1
29472 🖼️작 기계 커미션 [2] 도트초보갤로그로 이동합니다. 05.29 294 12
29471 🖼️작 색상 선택할때 명도 채도에 따른 공식이 있나요? [2] 사골육수갤로그로 이동합니다. 05.28 216 0
29470 🖼️작 카드캡터 체리 2 [9] 2049갤로그로 이동합니다. 05.28 391 12
29469 🖼️작 이게 뭐게요 [3] 도붕이(193.175) 05.28 240 1
29468 🖼️작 뉴비 처음으로 도트찍음 ㅇㅇ(39.115) 05.28 263 8
29467 🖼️작 두번째 도트 [2] ㅇㅇ갤로그로 이동합니다. 05.27 240 5
29466 🖼️작 메카닉 [1] ADYODYO갤로그로 이동합니다. 05.27 279 12
29464 🖼️작 보석 4종 아아갤로그로 이동합니다. 05.27 160 6
29463 ❔질문 그림 용량은 픽셀크기만 상관있디 않나요? [3] 사골육수갤로그로 이동합니다. 05.27 173 0
29461 🖼️작 불꽃의돌 [12] 날이갤로그로 이동합니다. 05.27 510 23
29460 ❔질문 도린이인데 질문좀요,.. [1] 도붕이(39.118) 05.26 210 1
29459 🖼️작 뉴게임 아오바 [1] 모냐모냐갤로그로 이동합니다. 05.26 212 9
29458 ❔질문 Asprite 한글 커지게 표시되는거 어떻게 하면 정상적으로 바뀌나요? [1] 도붕이(220.95) 05.26 111 0
29457 🖼️작 뉴비 처음으로 도트 찍음 ㅇㅇ갤로그로 이동합니다. 05.26 231 4
29455 🖼️작 어나힐레이터 탱크 [1] 도트초보갤로그로 이동합니다. 05.26 684 14
29454 🖼️작 [2] 블서갤로그로 이동합니다. 05.26 153 3
29453 🖼️작 연습 [1] ㅇㅇ갤로그로 이동합니다. 05.26 174 5
29452 🖼️작 프링글스 [2] 호오리갤로그로 이동합니다. 05.26 159 5
29451 🔗퍼옴 겜을 안하지만 도트겜은 모으게 되는 [3] 양옷늑대갤로그로 이동합니다. 05.26 219 2
29450 ❔질문 옛날에 Aseprite 한글화했었는데, 영어로 쓰고 싶은데 방법 없음? [2] ㅇㅇ(116.121) 05.25 147 0
29448 🖼️작 도트 4일차 금마리 & 머핀 도붕이(182.211) 05.25 257 5
29447 🖼️작 몬스터 에너지 피치 [3] 알토스갤로그로 이동합니다. 05.24 574 24
29445 🖼️작 오래된 게임 박스 mr.life(1.229) 05.24 331 11
29444 🖼️작 우끼끼 [1] 도붕이(222.235) 05.24 268 11
29443 🖼️작 도트 뉴비 3일차 산나비 철이 찍어옴 도붕이(182.211) 05.24 261 7
갤러리 내부 검색
제목+내용게시물 정렬 옵션

오른쪽 컨텐츠 영역

실시간 베스트

1/8

뉴스

디시미디어

디시이슈

1/2