스윙 기능 도움말

대기화면 이미지 제작방법 (가이드라인)

517 views 2016년 12월 29일 2017년 8월 21일 root 7

대기화면이미지 제목

대기화면은 앱이 실행되기 전 아주 잠깐1~2초 정도 보여지는 이미지이구요.

어플에서는 필수로 등록해야 하는 이미지이기 때문에 앱제작을 하시는 사용자분들은 대기화면 이미지를 제작해서 넣어주셔야 합니다.

이때 스윙에서 제공하는 사이즈는 2282*2282(px) 정사각형 사이즈이기 때문에 대기화면에 꽉 맞게 이미지를 제작한 다음 어플을 실행하시면 이미지가 잘려서 보이거나, 세로로 길게 찌그러져 보일 수 있습니다. 따라서 대기화면 이미지는 넣고자 하는 이미지를 화면 가운데에 배치하고, 주변에는 배경이미지로 작업을 해주셔야 합니다.

대기화면 이미지 가이드라인을 통해서 핸드폰 화면에 알맞게 들어가는 대기화면 이미지 제작방법을 알려드리겠습니다.


STEP.1 대기화면 가이드라인

대기화면에 들어갈 이미지는 가이드라인을 참고해서 만들어주세요.

보통 앱 대기화면은 정사각형 비율로 작업을 하게 됩니다.

-가이드라인-e1468810327771

파란색으로 보이는 부분에 배경이미지를 넣고, 가운데 회색 영역이 중요이미지 및 로고가 들어갈 부분입니다.

즉 전체 이미지는 배경이미지로 지정해놓고, 중요 이미지는 화면 가운데로 배치해놓아야 합니다.

그래야만 핸드폰 기종에 따라서도 잘리거나 찌그러지지 않고 정상적으로 보일 수 있습니다.

 

  • 대기화면 이미지 예시

대기화면11

대기화면31

20152518-e1468810647138

기존의 앱들 역시 대기화면을 보시면 중요이미지를 가운데에 배치하고 전체 이미지는 배경이미지로 만듭니다.


 

STEP.2 포토샵으로 대기화면 사이즈 이미지 만들기
  • 먼저 포토샵 프로그램으로 대기화면 이미지를 만들어보겠습니다.

1.포토샵 실행 – 2282*2282 사이즈로 된 이미지 만들기

대기화면이미지3

1. 2282*2282 대기화면 사이즈의 네모 이미지를 먼저 만들어주세요.
2. 눈금선을 이용하여 총 9등분을 내구요. (굳이 눈금선을 내지 않아도 되지만 좀 더 정확하게 이미지 작업이 되요)
3. 750*750 px 사이즈의 정사각형 네모 영역을 가운데로 배치합니다.

= 이해를 좀 더 쉽게 할 수 있도록 영역에 컬러를 넣었는데요.
(이미지 제작이 다 되면 색상은 빼면 되니 일단 색상을 넣어서 만들어보겠습니다)
* 회색으로 된 부분은 이미지의 전체 영역으로 배경이 들어가는 부분입니다.
* 그리고 실제로 핸드폰에서 보여지는 이미지는 바로 파란색 영역이 되는데요.
파란색 영역 안으로 만드시고자 하는 이미지 혹은 회사의 로고를 넣어서 이미지를 만들어주십니다.

* 파란색 영역 안으로만 작업해주세요. 회색은 핸드폰 상에서 잘리는 부분이기 때문에 파란색 영역을 넘어가지 않도록 해주세요.

2. 파란색 영역에 이미지 넣기

대기화면이미지4

만들어 놓은 파란색 영역에 로고 혹은 이미지를 넣어줍니다.
따로 이미지를 제작하셔도 좋지만 가장 깔끔한 것은 회사의 로고 정도를 넣어주시는게 가장 좋아요.
만약 별도의 홍보용 이미지를 만들어서 넣고자 하신다면 영역 안으로만 넣어주시면 될 것 같습니다.

저는 회사 로고와 스윙을 넣어주었는데요.
이미지에서 보듯이 이렇게 영역 안으로 깔끔하게 넣어주시면 됩니다.

3.배경색 삭제하기

대기화면이미지5

이미지 작업이 다 완료되었으면 아까 넣어둔 배경색과 영역색을 삭제해줍니다.
* 배경색을 아예 없애면 투명하게 지정이 되니깐요. 흰색이나 사용자가 원하는 다른 색상으로 꼭!! 넣어주세요

 

4. 배경이미지 꾸미기

대기화면이미지6

좀 더 업그레이드해서 배경이미지에도 효과를 줄 수가 있습니다. 

배경이미지는 핸드폰에서는 잘려서 보이기 때문에 큰 이미지로 하나 넣는 것이 아니라 브러시 효과만 줘도 좋을 것 같아요.

*이렇게 대기화면 가이드라인 방법을 보시고 이미지를 제작하시면 절대~ 핸드폰에서 잘리거나 찌그러져 보이지 않아요 ^^


 

STEP.3 그림판으로 대기화면 이미지 만들기
  • 만약 포토샵이 없어서 대기화면 이미지를 만들기 힘드시다면!! 그림판을 이용해서 만들 수 있습니다. 

대기화면이미지7
1. 그림판을 실행 한뒤 상단의 [크기 조정]메뉴에서 2282*2282 사이즈 크기의 이미지를 만듭니다.

2. 그리고 [사각형 도형] 툴팁을 선택해서 중앙에 750*750 사이즈로 만들어주세요. (사이즈가 749가 되었지만 이 정도 오차는 괜찮습니다 ^^)

3. 그러면 포토샵에서 본 것과 동일하게 해당 영역 안으로 이미지를 넣어서 제작할 수 있습니다.

4. 만든 후 사각형 영역은 삭제해주시면 됩니다.


 

STEP.4 어플실행. 핸드폰에서 대기화면 이미지 확인하기

대기화면이미지 어플실행

어플을 실행 한 후 나타나는 대기화면 이미지입니다.
위에서 만든 대기화면 이미지를 등록했는데요.
분명히 우리는 정사각형으로 만들었지만 직사각형의 핸드폰 화면에 아주 잘 맞게 들어갔죠? ^^
이러한 방법으로 대기화면 이미지를 제작해주시면 됩니다.


STEP.5 대기화면 이미지의 잘못된 예시

1.대기화면에 꽉 채워서 이미지를 넣은 경우

대기화면이미지1

대기화면 이미지를 만들 때 위의 방법처럼 가운데 이미지 영역을 만들어 놓지 않고
이미지를 전체 배경 사이즈에 꽉 채워서 넣게 되면, 핸드폰 어플 실행시 해당 이미지가 잘리거나 세로로 길게 찌그러져서 보여요!!
절대 이미지는 화면에 가득채워서 제작하지 마세요!

 

2.대기화면에 꽉 채워서 글자(텍스트)를 넣은 경우

대기화면이미지2그리고 2번째도 역시 비슷한데요.

화면 전체에 글자(텍스트)를 꽉 채워서 넣는 경우입니다. 이 경우도 글자가 잘리거나 이미지가 길게 늘어나게 보여요.

보통 대기화면 이미지는 글자를 많이 넣지 않는 것을 권장드리고 싶어요. 간단하고 심플한 이미지를 넣는 것을 추천드려요!


 

 

이미지를 만들었는데 대기화면 이미지 사이즈대로 수정하기가 어렵고!!

아이콘 이미지도 사이즈를 수정하기 어렵다면…

** 스윙에서 제공하는 이미지편집도구 기능을 이용하여 편리하게 앱에 들어갈 이미지 사이즈를 수정해주세요

이미지편집도구 이용방법 보러가기 

 

Was this helpful?