웹디자인 강의
Photoshop 축전에 쓰면 좋을 하트 움직이기 &세로선 움직이기
2003.09.26 21:23
![pho_3_3_0_1.gif](/files/attach/images/19360728/558/416/019/pho_3_3_0_1.gif)
![pho_3_3_0_2.gif](/files/attach/images/19360728/558/416/019/pho_3_3_0_2.gif)
{완성작} 1. 하트가 움직이는 강좌
2. 세로선이 움직이는 강좌
하트가 움직이는 강좌
![3_3_1.gif](/files/attach/images/19360728/558/416/019/3_3_1.gif)
1. 이미지를 하나 준비해주세요.
아무 이미지나 괜찮아요.
전 미리 리터칭해 놓은 이미지를 불러왔습니다.
![3_3_2.gif](/files/attach/images/19360728/558/416/019/3_3_2.gif)
2. 새 레이어를 하나 추가해주시고,
하트모양 브러쉬를 박아주시던가,
펜툴로 패스를 따서 하트를 만들어주세요.
그리고 그 레이어에 opacity (투명도) 를 낮춰주세요.
![3_3_4.gif](/files/attach/images/19360728/558/416/019/3_3_4.gif)
3. 이미지레디로 넘어가주시고,
애니메이션 팔레트에서 새프레임을 하나 추가해주세요.
![3_3_5.gif](/files/attach/images/19360728/558/416/019/3_3_5.gif)
4. 이제, 마음속으로 하트를 어떻게 움직일지 그림을 그려두세요.
이동툴을 선택해주시고,
아까 그린 하트를 움직이려는 곳으로 이동해주세요.
![3_3_6.gif](/files/attach/images/19360728/558/416/019/3_3_6.gif)
5. 또 새프레임을 추가해주세요.
![3_3_7.gif](/files/attach/images/19360728/558/416/019/3_3_7.gif)
6. 또 하트를 이동하려는 곳으로 이동해주세요.
이렇게 계속 반복해주시면 됩니다.
![3_3_8.gif](/files/attach/images/19360728/558/416/019/3_3_8.gif)
7. 이제 2프레임을 선택해주시고,
트윈 버튼을 눌러주세요.
![3_3_9.gif](/files/attach/images/19360728/558/416/019/3_3_9.gif)
8. 트윈 상자가 뜨면, 프레임 Frame To Add 에 수치를 조정해주세요.
그 수치가 커질수록 움직임이 부드러워지는거예요.
단, 그럴수록 프레임수가 많아지기 때문에,
이미지의 용량이 확 늘어나니깐 감안해주세요.
![3_3_10.gif](/files/attach/images/19360728/558/416/019/3_3_10.gif)
9. 그다음 다음 프레임인 6프레임도 트윈버튼을 눌러서 트윈을 걸어주세요.
--------------------------------------------------------------------------------------------------------
세로선이 움직이는 강좌
![3_3_11.gif](/files/attach/images/19360728/558/416/019/3_3_11.gif)
1. 우선 작업할 이미지를 불러주시구요.
배경 레이어 위에 레이어 1, 레이어 2 를 만들어 주신 다음,
레이어 1 에 네모 선택툴로 선택을 하시고,
흰색 페인트통을 부으신 다음, Opacity (투명도) 를 낮춰주세요.
레이어 2 도 그렇게 똑같이 해주시구요.
![3_3_12.gif](/files/attach/images/19360728/558/416/019/3_3_12.gif)
2. 이미지 레디로 넘어가세요.
그 세로선이 어떤 방식으로 움직일지 머릿속으로 미리 그려놓으시구요.
전, 첫장면에 세로선이 왼쪽에서 등장하도록 할겁니다.
그러니까, 세로선을 왼쪽 이미지 밖으로 감추어놔야겠죠.
![3_3_13.gif](/files/attach/images/19360728/558/416/019/3_3_13.gif)
3. 새프레임 만들기 버튼을 눌러주시면 2번 프레임이 생기죠?
![3_3_14.gif](/files/attach/images/19360728/558/416/019/3_3_14.gif)
4. 이번엔 세로선을 움직일 목표지점으로 이동시켜 주세요.
![3_3_15.gif](/files/attach/images/19360728/558/416/019/3_3_15.gif)
5. 중간 과정을 만들기 위해서 이번에도 역시 트윈 버튼을 눌러줍니다.
![3_3_16.gif](/files/attach/images/19360728/558/416/019/3_3_16.gif)
6. Frame to Add 수치에다가 원하는 수치만큼 넣어주세요.
당연히 수치가 커질수록 이미지를 부드럽게 움직이지만,
용량은 엄청 늘어난다는 점, 명심하시고요.
![3_3_17.gif](/files/attach/images/19360728/558/416/019/3_3_17.gif)
7. 또, 새프레임을 추가해주세요.
![3_3_18.gif](/files/attach/images/19360728/558/416/019/3_3_18.gif)
8. 이번에도 세로선을 움직여서 이동시켜 주세요.
![3_3_20.gif](/files/attach/images/19360728/558/416/019/3_3_20.gif)
9. 또 수치 조정하셔서 트윈 걸어주시구요.
![pho_3_3_0_3.gif](/files/attach/images/19360728/558/416/019/pho_3_3_0_3.gif)
이해가 안가시는 분들을 위해서
느리게 움직이는 화면을 준비했습니다.
어느 방향에서 어느 방향으로 움직여졌는지,
어떤 타이밍으로 움직여졌는지,
확인하시고 참고하세요.
댓글 4
-
꼬마사탕
2003.09.27 00:59
좋은 강좌 감사!^^ 시간 지정 해주는 것도 포함이 있었으면 더욱더 좋을거 같아요..^^;; 태클 아니었습니다!!!^^;; -
체리향기∮
2003.10.07 18:30
도움되는 강좌였습니다. ^^ 이미지 레디를 써보지 않아서 트윈이라는 것을 몰랐답니다. -_-;; -
마법구술
2003.10.08 20:19
태클은 아닌데요.. 2번째 세로줄을 .. 트윈버튼인가??공스르륵 하는거요..
그걸로 뭘 어떡게 하면 왔다갔다 자연스럽게 뚝뚝안끊어지고 움직여요;ㅁ;[그래서어쨋다고?퍽]
-ㅁ-;;그런강좌도 있었으면 좋겠네요;; 벌써있는가??-ㅁ-;; -
이오르
2003.11.10 23:13
애니메이션 팔레트의 시간 조정해주는 부분에서 시간을 줄여주시던가,
트윈 거실때 더 많은 프레임을 만드시면 해결됩니다 ^^