UI 디자인의 실습 -2-

안녕하세요?

 

지난번 포스팅에서 UI버튼하나를 만드는 과정을 실습하다가 일단 중단을 했는데, 이번 포스팅을 마지막으로 해서 일단 일러스트 - 주로 픽셀아트 독학은 대충 마무리를 짓고, 이제 본격적으로 오래전부터 생각해본 프로젝트인 게임의 제작을 들어가 봐야 겠다는 생각이 듭니다.

 

아무튼 간에 일단 위 스크린샷에서 볼 수 있는 선택이라는 메뉴에서 수정이라는 항목이 있는데, 이 항목을 가지고서 확대를 클릭합니다.

 

이게 편집항목에 있는 변형에서 자유변형으로 키우는 것과 어떤 차이가 있는지는 모르겠습니다. 다만, 이렇게 하는 것으로 인해서 일단 3픽셀씩 키우도록 했습니다.

 

이렇게 해서 선택선이 커진것을 확인할 수 있었습니다. 차이가 있다면 일단 있는 것이 바로 이렇게 키워지는 대상이 다르다는 생각이 듭니다.

 

 

이제 편집 메뉴에 있는 획 항목을 가지고 오도록 합니다. 이렇게 해서 선택이 된 영역에 일단 하나씩 만들어 주도록 하는 것을 잊어버리지 말도록 합니다.

 

이렇게 해서 일단 1픽셀 크기의 바깥쪽으로 하얀색 선을 하나 그어 주도록 합니다. 이렇게 하는 것으로 이제 다음의 결과물을 한번 보면..........

 

일단 이렇게 외곽선이 쳐진 것을 확인할 수 있기는 있었습니다. 이제 이를 바탕으로 해서 다음의 과정이 있는지 한번 살펴 보도록 합니다.

 

이번에는 안쪽에 검은색 선이 필요해서 편집 메뉴에서 획을 선택한 다음에, 위 스크린샷처럼 한번 세팅을 해 주도록 합니다.

 

이렇게 해서 일단 UI버튼 하나가 만들어 졌습니다. 그런데 이걸 그냥 쓰면 눈이 아플정도로 너무 눈에 띄는 문제점이 있습니다. 그래서 이런 문제점을 해결하기 위해서, 반투명하게 만들 필요성이 있습니다.

 

그래서 일일히 레이어 항목에 있는 이 불투명도를 원래는 100%라고 되어 있는데, 이걸 50%로 낮춰 주도록 합니다. 그렇게 하면..........

 

이렇게 해서 배경색을 살릴 수 있으면서 일단, 제대로 눈이 덜 아픈 상태로 볼 수 있게 되었습니다. 이렇게 해서 일단 작업이 마무리가 되기는 되었는데, 나머지 버튼은 이런 식으로 만들거나, 이미 만들어진 버튼을 회전 시키는 것으로 간단하게 다른 방향키를 만들 수 있으리라 생각이 됩니다.