포토샵으로 픽셀 도트만들기 -01

안녕하세요 디자이너 수빈입니다

푸하하하...

오늘은 저도 예전에 가물가물하게 도트디자인으로 해커톤을 나갔던기억이...

에어스프라이트를 구매할까 고민도했지만 이미 어도비 정품유저이기때문에!!

 

의외로 포토샵에서 도트강좌가 정말없더라구요

그래서 제가 준비하게되었습니다

바로 시작해볼까요~

먼저 첫번째  포토샵을 키게되면 왼쪽상단 새파일과 열기가 나옵니다

새파일: 새로운 파일만들기

열기:기존에있던 파일이나 이미지 열기

입니다

최근항목은 본인이했던 작업물들이구욥

 

먼저 새파일을 열고 저희는 16x16픽셀의 도트디자인을 만들어보려고 합니다.

폭 16 높이 16 픽셀, 해상도 72면 됩니다.

먼저 제첫번째로 할일은 왼쪽하단 레이어 추가를 하는것인데요

레이어의 개념은 샌드위치라고 생각하시면될것같습니다.(?)

레이어 위에 또 레이어위에 그리고 위로 차곡차곡 올린다 생각하시면되요

레이어를 추가하시면 레이어1이 뜹니다.

 

자 여기서 절반은왔습니다

(구라임)

 

저희는 16픽셀로 화면을 구성했기 때문에 엄청작은데 확대를 어떻게하냐!!!

할까봐 단축키를 알려드립니다 z 를 누르면 확대 알트를 누르면 축소입니다.

 

 

확대가 됐다면 저희는 브러쉬가 아닌 연필을 쓸것인데요 

연필을 쓰는이유는 브러쉬의 경우 픽셀이 번지기 때문입니다

 

지우개를 쓰는법도 알려드려야겠죠?

좌측 브러쉬쪽을 보다보면 지우개 모앵이 있습니다 하지만 지우개모양을 선택후에 상단에 블럭으로체크해주셔야되요

1픽셀크기로 깔끔하게 지워지기 때문입니다.

 

다음은 조금어려울만한 그리드세팅에 대해 알아보도록 하겠습니다

 

먼저 환경설정-> 안내선 ,그리드 및 분할영역을 선택합니다

환경설정이 뜨면 안내선 ,격자 및 분활영역으로 들어가 격자에서 격자간격1과 픽셀, 세분 1로 두시면됩니다

 

그런데 아무것도 뜨지않는다!?????

 

 보기->표시->격자를 키시면 격자를 보실수있습니다

 

이렇게 나오셨다면 정말 절반이상은 끝내신거에요 (진짜임)

 

 

자 여러분이 찍고싶은 도트를 찍어봅시다 전 하트같은걸 그려봤어요

아참 색상을 바꾸는법은

좌측하단에있는 이것을 더블클릭하시면 색상을 바꿀수있습니다

 

 

개꿀팁중 하나인데 페인트통으로 한번에 채색할수있는방법이있습니다. 좌측에 메인트통을 찾으신후

상단에있는 앤티앨리언스를 꼭꼭!!!!!! 체크해제해주세요

이유는 흐리멍텅한 계단현상같은개 생겨버립니다,,,,

 

자 이제 배경을 끄면 저희는 투명한 채로 픽셀아트를 한것이에요

 

이것도 개꿀팁인데 2중으로 여러번 볼필요없이 전체이미지를 한번에 확인하는법이있습니다

 

창에들어가서 새창(파일이름)을 선택하시면 새로운 작업했던 파일이 생성이 되는데요!

창에서 정돈을 들어가신후 2장세로를 하시면~~~

이렇게 한번에 두장을 보실수있습니다.처음엔 왜필요하지 할수있는데 나중에 전체적으로 어떤지 100% 보게되요,,,,,

 

 

이미지를 키우고싶으신분이 계실것같아서 이미지를 키우는법도 알려드리겠습니다

이미지-> 이미지크기

1000픽셀로 맞추고

젤중요한 최단입점 (명확한 가장자리)!!! 이거중요
왜냐면 깨지기때문입니다.....

(당해봄)

 

 

이렇게 수많은 픽셀갯수가 생겨났습니다 쩔죠!!

 

이제 마지막으로 저장하는법에 대해 알려드리겠습니다.

 

파일->내보내기->웹용으로 저장(레거시) ->사진설정밑의 gif를 png 24로 바꾼후 저장하시면 됩니다

마지막으로 깔끔하게 도트(?)가 완성됐습니다 다음시간에는 그리는법에 대해 알려드릴게요