로딩이미지(Preloader)를 쉽게 만들자.

안녕하세요 키다리디자이너입니다.

 

오늘은 프리로더 이미지를 쉽고 빠르게 만들 수 있는 사이트를 소개해 드릴게요.

 

웹디자인을 하다 보면 가끔 이런 로딩 이미지를 만들어야 할 때가 있는데 하나 하나 이미지를 만들어 gif애니메이션을 거는 작업이 여간 귀찮은 게 아닙니다.

 

 

대략 이런 이미지를 말합니다.

 

 

 

이럴 때 이 프리로더 제작 사이트를 이용해서 만들면 정말 간단히 제작하실 수 있어요.

특별하게 직접 디자인한 로딩이미지를 사용할 필요가 없다면 유용하게 쓰실 수 있을 것입니다.

 

 

http://preloaders.net/

 

위 사이트로 접속하시면 별도의 회원가입이나 프로그램설치 없이 바로 만들 수 있습니다.

 

먼저 사이트에 접속해 보시면..

 

 

 

 

쓸데 없는 것들은 다 빼고 메인 화면부터 제작을 위한 UI가 보입니다.

간결해서 좋군요.. 키다리디자이너는 이렇게 구구절절 부연설명 없이 본론부터 이야기 하는 것을 좋아합니다.

 

처음 접속하시면 영어라 다소 당황하실지 모르겠지만 사용방법은 아주 간단합니다.

 

 

 

 

먼저 왼쪽 Categories 에서 원하는 디자인 카테고리를 선택하시고...

 

 

 

 

select your preloader를 클릭하시면 관련 카테고리에 등록된 로더들의 디자인을 미리보기 하실 수 있습니다.

 

디자인을 선택하셨다면 이제 거의 다 끝난 겁니다.

 

 

 

 

 

위 옵션들을 차례로 말씀드리면

image type : gif애니메이션으로 완성된 이미지를 받을 것인지, PNG파일로 각각 분리된 이미지를 받을 것인지 선택합니다.

PNG파일로 분리된 이미지를 받고 싶다면 Generate Preloader버튼 클릭 후 우측 옵션에서 Download as sprites를 선택하시면 됩니다.

 

Transparent background : 배경을 투명하게 처리합니다.

 

Foreground color : 프리로더의 색을 지정합니다. 프리로더의 종류에 따라 지정할 수 없는 것도 있습니다.

 

Background color : 배경색을 지정합니다. gif는 배경색이 PNG처럼 정확하게 빠지지 않기 때문에 Transparent background를 지정했더라도 프리로더가 삽입될 문서의 배경색과 일치시켜주는 것이 좋습니다.

 

Animation speed : 프레임 이동 속도를 지정합니다.

 

Preloader size (px) : 프리로더 이미지의 사이즈를 지정합니다.

 

Keep original colors : 미리 지정된 색을 사용합니다. 이 옵션을 체크하면 Foreground color를 사용할 수 없습니다.

 

여기까지 기본 옵션들을 알아봤구요, 추가 사항으로 프레임을 좀 더 늘려서 움직임을 부드럽게 만들고 싶은 경우에는 Advanced option에서 Frames amount 숫자를 늘려주시면 됩니다.