로딩 이미지 만들기 [ Ajax loding gif generator ]

Category : Web/Site     Posted at 2008/10/30 18:08
라이트박스를 자신의 입맛에 맞게 스타일을 바꾸려고 할 때나,
플래시 등 이미지를 만드려고 할 때, 이러한 로딩 이미지가 필요할 거라 생각됩니다.



gif 확장자로 레이어를 여러개 만들어 이미지 편집 프로그램으로 만들어도 어려운 일은 아닙니다만,
애니메이션 이미지의 경우, 하나하나 만들어 모두 적용해야 하니 좀 귀찮은 일이 아니지요.
일반적으로 쓰이는 로딩 이미지 경우에는, Ajax loding gif generator 를 이용하시는 게 더욱 편리합니다.
원하는 색상과 모양대로 바로바로 생성이됩니다.






사용 방법)



a. Ajax loding gif generator(http://www.ajaxload.info)로 가면 위와 같은 페이지가 보입니다.






b. 로딩 이미지를 만드는 데 필요한 부분은 좌측에 노란박스로 되어 있는 Generator와
붉은박스로 되어 있는 Preview입니다.







c. 먼저 노란박스의 Indicator type의 선택 항목을 열어보면 여러가지 로딩 이미지가 보입니다.
여기서 원하시는 이미지를 선택하시면 됩니다.








d. Background color와는 바탕색이고, Foreground color는 로딩이미지의 색상입니다.
여기서 원하시는 대로 배경과 이미지의 색상을 지정하실 수 있습니다.
컬러코드가 쓰여 있는 항목칸에 마우스의 커서를 놓으면, 자동으로 색상을 고를 수 있는 스크립트가 뜹니다.
마우스를 움직여 컬러피커의 십자 모양을 원하는 색상에 놓으시면 코드가 생성됩니다.








e. Transparent background는 배경을 투명하게 나타내는 것입니다.
투명 기능을 사용할 때는 배경 이미지 색상과 동일하게 바탕색을 지정하셔야 합니다.
로딩 이미지 자체에 투명하게 표현되는 부분이 있기 때문에 배경 색상이 있을 때,
동일한 색상을 사용하지 않으시면 경계가 보여 깨끗하게 표현되지 않습니다.


예)
1. 배경 색상과 동일한 색상을 바탕색으로 지정



2. 배경 색상과 다른 색상을 바탕색으로 지정










f. 원하는 대로 모두 지정하신 후, Generate it!을 클릭합니다.
그러면 Preview에 지정한 대로의 이미지가 뜹니다.
바로 아래, Download it!을 클릭하면 이미지가 저장됩니다.


Ajax loding gif generator로 만들어 본 기타 로딩 이미지입니다.

                     

                        

                      

                

            







이올린에 북마크하기(0) 이올린에 추천하기(0)

'Web > Site' 카테고리의 다른 글

로딩 이미지 만들기 [ Ajax loding gif generator ]  (2) 2008/10/30
유료, 무료 프로그램 다운로드 [SoftPedia]  (0) 2008/10/17
Posted by 크림*앙마
, , , , ,
No trackback | 2 Comments

Trackbacks - http://acream.tistory.com/trackback/23 관련글 쓰기

::: Write a comment :::

  1. BlogIcon WhiteFox commented at 2009/02/21 14:12 │ + - │ add a new comment

    그 설정은 어떻게해야하죠?

  2. BlogIcon 크림＊앙마 commented at 2009/04/07 06:37 │ + - │ add a new comment

    관리를 안해서 답변이 늦었지만, 그 설정이라면 라이트박스를 말씀하시는 건가요?
    라이트박스 설정 방법이 따로 포스팅 되어 있으니 그걸 보셔면 되고요.
    간단히 말씀드리면 스킨의 라이트박스 이미지 이름과 똑같이 바꾸어서 원하시는
    이미지를 업로드 하시면 따로 설정할 것은 없습니다.
    이름을 바꾸고 싶다면 스킨 설정에서도 그 이름으로 바꿔주시면 되고요.

Viewing most recent entries.
Later 1 2 3 4 5 ... 9 Earlier