본문으로 바로가기
  1. Home
  2. 기계치탈출/프로그램 잘쓰기
  3. 포토샵 이미지 레디를 이용한 움직이는 배너 만들기

포토샵 이미지 레디를 이용한 움직이는 배너 만들기

· 댓글 0 · 라라윈

포토샵은 할 수 있는데, 이미지 레디는 못하신다면 참고하셔요..
(이 설명은 포샵 레이어를 만들 수 있는 분께만 유용합니다..^^)

다음과 같이 LALAART가 한글자씩 써진 뒤 미술학원이라고 나오는 배너를 만들어 보겠습니다.

사용자 삽입 이미지


먼저 포토샵을 연 뒤 배너에 사용할 이미지를 불러놓고, 배너를 만들 새 문서를 엽니다.
배너용으로 180* 50 이나, 90*30이나 pixel로 지정하여 만듭니다. (cm는 안됩니다. 나중에 소스 입력할 때.. 어려움이 있습니다.)

사용자 삽입 이미지
 (제가 캡처하고,, jpg를 누른다는 것이 gif로 저장되어 화질이 좀 심히 조악합니다..)

사용자 삽입 이미지
집어넣고 싶은 이미지를 배너문서로 끌어 옵니다. 그리고, 집어 넣고 싶은 문자를 씁니다.
(우선 한글자만.)

사용자 삽입 이미지

그리고, 문자를 복사합니다. 움직이게 만들려면 애니메이션에서 한 동작 30개 그리는 것과 비슷합니다. 한 글자씩 레이어가 있어야 한 글자씩 나타나게 할 수 있습니다.
한 글자가 아니라 한 문장이 나타나게 하고 싶으면 그냥 한 레이어에 다 쓰셔도 됩니다.
저는 LALAART를 쓸건데, 이 글자들이 한 글자씩 나타나게 하고 싶기 때문에 저렇게 여러개의 레이어로 복사하여 한 글자씩 써 주었습니다.

사용자 삽입 이미지

앞의 LALAART와 달리 주소는 한번에 나타나게 할 것이기 때문에 한 레이어에 몰아서 써줍니다. 미술학원이라는 문구도 한번에 나타나게 하려고 한 레이어에 몰아서 써 주었습니다.
끝났으면 포토샵 문서로 저장합니다. JPG로 저장하시면 레이어가 뭉쳐져 버려서 지금까지의 수고가 말짱.. (황) 인거 아시죠..꼭, PSD 파일로.
그런 뒤 툴바 밑에 있는 화살표 있는 것 찍으면 바로 이미지레디로 넘어갑니다.
(원래 그걸 보여드리려고 이 화면을 캡쳐했는데 별 생각없이 CROP 해 버렸습니다..ㅜㅜ)

사용자 삽입 이미지

자, 포토샵에서 이미지레디로 넘어오면 알아서 문서를 데리고 와 줍니다. 안 데려와 주면 OPEN을 눌러 수동으로 데려와 주세요.

사용자 삽입 이미지

밑에 보이는 기다란 창이 한 화면 화면의 프레임 입니다. 우선은 한 칸 보이시죠? 첫 화면 입니다. 저는 첫 화면에서는 L만 보여야 하므로 나머지는 안보이도록 눈을 다 없앱니다.
그리고 이동툴로 붓을 "L"자 옆에 오도록 배치했습니다.

사용자 삽입 이미지

밑에 휴지통 옆에 있는 버튼을 누르면 새로운 프레임이 만들어 집니다. 한 장면 한 장면을 보이게 하고 싶은 것만 눈을 뜨고 있도록 설정해 주면서 만듭니다. 저는 LALAART가 써지는 느낌으로 하려고 앞의 글자를 보이게 했는데, 안 보이게 하고 싶으면 다음 프레임에서는 보이게 하고 싶은 글자만 눈을 뜨게 하고 나머지는 없애면 됩니다.

사용자 삽입 이미지

LALAART가 지워지면서 미술학원이 보이게 하고 싶어서 나머지 다 지우고 미술학원만 눈을 뜨고 있죠?

사용자 삽입 이미지

각 화면을 다 만들었으면 밑에서 시간을 조정해 줍니다.
길게 보이게 하고 싶은 것은 길게, 짧게 보이게 하고 싶으면 짧게..
(싸이월드 플래시 기능 써보신 분은 이해가 더 빠르실 듯..)
하시면서 재생 ▷ 버튼을 눌러가며 어떻게 나오나 보면서 하면 됩니다.

사용자 삽입 이미지

다 끝났으면 저장을 하시는데, SAVE OPTIMISED AS로 하세요. 그냥 저장하면 종종 화면이 안나오는 경우가 있다고 합니다.

그리고, 배너로 쓰시려면 우선 이 파일을 인터넷에 올립니다.
인터넷 주소가 있어야 배너로 사용이 가능합니다.
인터넷에 올리고 속성보기해서 주소를 보면 됩니다.
그리고, 다음과 같이 쓰시면 됩니다.

임시로 복사 허용하기

<a href=" 보여주고 싶은 블로그 주소"target="_blank" style="margin-bottom:4px; display:block;"><img src="그림의 인터넷 주소="width="180" height="50" alt="배너설명" /></a>

밑줄 그은 부분만 넣으시면 배너 완성입니다.


2007/12/07 - [라라 생각/블로그 성장기] - 배너 교환하실분~~ 여기로 오세요!


💬 댓글 0

이름을 저장합니다.

최근글 thumbnail 운전면허증 갱신, 벌금낸 것이 허무해지는 간단한 갱신방법 (7) thumbnail 코로나 속의 평범한 일상 (6) thumbnail 길에서 처음보는 여자 번호 물어볼 때 (4) thumbnail 사소한 말 한마디에 울컥, 내가 예민한걸까? (5) thumbnail 첫 키스 흑역사 만들지 않고 잘하는법 (14) thumbnail 처음 참가한 마라톤 대회, 5km 완주 후기 (2) thumbnail 처음보는 남자가 길에서 번호 물어봤을때 여자 심리 (81) thumbnail 남사친에서 남친 안 돼? 친구 고백 거절 이유 3가지 (135)
인기글 thumbnail 첫 키스 흑역사 만들지 않고 잘하는법(14) thumbnail 처음보는 남자가 길에서 번호 물어봤을때 여자 심리(81) thumbnail 남사친에서 남친 안 돼? 친구 고백 거절 이유 3가지(135) thumbnail 길에서 처음보는 여자 번호 물어볼 때(4) thumbnail 외화입금확인서 vs 외화획득명세서, 애드센스 세금신고 서류(19) thumbnail 운전면허증 갱신, 벌금낸 것이 허무해지는 간단한 갱신방법(7) thumbnail 카톡 읽씹 당하기 쉬운 타이밍 thumbnail 이별 극복의 5단계
금융업은 정장만 입었지 양아⋯ 💬ㅇㅇ ♬~♩ ♪♩♪ 말랐는데 한개⋯ 💬ㅈㄹ 글쓴이 하나만 알고 둘은 모⋯ 💬깽 제가 키 170 살짝 넘는 여고⋯ 💬170cm 여고생 평생 택시타고 아무일 없이⋯ 💬횽횽