메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

안녕하세요, 포토샵으로 찍는 生도트를 허접하지만 강좌할
Es.(혹은 에스군 혹은 엣군 혹은 그냥 암케나;) 입니다. 꾸벅 _(__)_

오늘 찍어볼 넘은 쪼매나고도 귀엽고 버튼용으로도 쓸수도 있고
응용도 가능한 #1 엿공장 입니다. 왜 엿공장이냐구요? 보시면 압니다.

:: 완성품 ::



쪼매난 박스에서 엿이 계속 만들어 지고 있습니다. 그리고 만들어진
엿은 원인모를 어딘가로(가 아닌 루프를 노린 제작자의 의도로 의해)
어디론가 증발되고 있군요..

자! 그럼 이 쪼매난 엿 공장을 함 맹거 볼까낭~!

※ 이미지 사이즈는 96X96 으로 했습니다.

Step 1. 스케치



자 이제 이쁘고 쪼매난 엿공장을 스케치 해봅쉐다! 뭐 이정도는 슥슥
슥슥 할수 있으리라..

※ Q! 개인적으로 생각하기에 저 안정감 있는 대각선은 대체 어떻게
        긋는건가요!! 뽀록인가요?

※ A! 뽀록이 아닙니다; 쿼터뷰 시점으로 쓰이는 대각선은 기울기의
        절대값이 1/2로 이루어진 직선입니다. 자세히 알아볼까요.

        기울기라는건 수학에서도 말하듯이 X의 변화량 분에 Y의 변화
        량 아니겠습니까. 기울기가 1/2라는 것은, 가로로 점 두개 찍고
        나서 한칸 위로 올라(혹은 내려)가서 또 다시 가로로 두개 찍고
        한다는 말이지요.

        

        이런 식으로..

Step 2. 컬러링



빛이 들어오는것을 생각해서, 각 면마다 밝기를 다르게 해줍시다. 입
체감이 드는군요 -_-)~



어색함을 없애기 위해서 테두리도 칠한 색 계통으로 해줍시다.



미처 달지 못했던 공장 문짝도 달아줍시다.

오늘의 명언 : 까먹은 공장문짝 후일에 다시 다네

Step 3. 움직임

이제, 중요합니다. 완성품을 참고하면서 읽어주시면 더 효과가 있
으리라 생각됩니다.

먼저 공장 문짝을 열리는걸 만들겠습니다. 그냥 공장문짝이 닫혀 있
다가 90도로 휘꺼덕 열리면 뭔가 이상하겠죠? 그것을 방지하기 위하여
열리는것을 3단계로 나눴습니다.



단계 : 준비단계. 공장문의 세로 직선의 기울기는 무한대. (그냥 세워져
           있는 평범한 세로선)

1단계 : 공장문이 1/3 열린다. 이때는 공장문의 세로 직선의 기울기는 2.
           기울기 관련은 위의 QUIZ를 보세요. (단 이제부터 명시되는 기울
           기는 모두 양수로 취급합니다.) 어때요? 문이 조금 열리면서 직선
           이 조금 기울었죠?

2단계 : 공장문이 반정도 열린다. 이때 공장문의 세로 직선의 기울기는 1.
           위에보다 더 기울어진 느낌입니다.

3단게 : 다 열린다. 공장문의 세로 직선 기울기는 1/2. 다른곳의 직선의 기
          울기들도 1/2이기 때문에, 평행을 이뤘습니다.

이해하기 어려운 말들로 가득 써놨지만, 수학을 조금 하시고 그래프의 기
울기에 대해 아시는 분들은 별 어려움이 없으리라; 그렇지 않으신 분들도
뚫어져라 보시면 어떠하게 문이 변화되었는지 아실수 있을겁니다 :)

※ 주의! 문짝의 밝기를 조심하라!

문짝이 열려도 밝기가 그대로라면 뭔가 이상하겠죠? 빛에 대해 먼저 이해
합시다. 지금 박스 상태를 보면, 윗면이 제일 밝고, 그 다음에 왼쪽면, 그
리고 오른쪽면이 제일 어둡습니다. 이로써 유추해볼때, 빛은 위와 왼쪽 사이
그러나 위쪽에 좀 더 가깝게 들어온다고 볼 수 있습니다. (그래야 빛을 제
일 많이 받는 윗면이 제일 밝겠죠.)

공장문이 다 열어지면, 최종적으로 공장문은 윗면에 포함됩니다. 그렇기 때
문에 원래 박스의 윗면과 밝기가 같아지게 되는거죠. 또하나, 문짝이 열
리면서, 면의 기울기가 변하기 때문에, 한번에 밝아지는것이 아닌, 조금씩
점차 밝기가 밝아지는것이 자연스럽습니다. (그림을 참고하세요)



이제 엿이 나올 차례입니다. 엿은 그냥 가는 둥근 모양에 색만 입혀서
거의 날림이라고 할 수준으로 만들었습니다. 우선 엿은, 엿공장의 최신
식 롤러 시스템으로 옆으로 삐져 나옵니다. >엿 레이어<를 만든후 옆으로
두칸, 아래로 한칸(그래야 기울기에 맞겠죠?)씩 이동해주며 한컷씩
자르면 위와같이 됩니다. 한칸씩 밀려 나올때마다 한번씩 찍으면, 엿
이 나오는 속도가 느려지고, 반면에 더 많이 밀려나올때마다 한번씩
찍으면 엿이 나오는 속도가 빨라지겠죠?



허나, 공장문짝은 높이가 있었습니다. 지구의 중력에 의해서 엿은 땅
바닥으로 떨어지겠죠. 땅바닥으로 떨어지는 것은 3개로 분할해서 찍었
습니다. 위와같이 하면 별 어려움이 없으리라 봅니다.



얼마 안남았습니다! 힘을 냅시다! 이제 좀더 리얼한 모션을 위해서 떨
어진 엿이 앞으로 굴러옵니다. 최신식 깔끔 대리석을 깔아서 먼지는 전
혀 묻지 않습니다;; 이 굴러오는 모션도, 기울기에 입각하여 움직여 준
다면, 위의 그림과 같이 움직이겠죠?



이제 엿공장은 다음에 나올 엿을 위해서 공장문을 닫습니다. 닫는것은
위에 공장문짝을 여는것을 응용하여 거꾸로 돌려주시면 됩니다. 단,
아까는 없던 >엿<을 포함시켜야 합니다.



이제 애니메이션은 Loop(루프)를 합니다. 반복 되죠. 그러나 엿이 있
는 상태에서 계속 엿이 나올때마다 쌓이는걸 만들라면, 개노가다중에
상노가다겠죠; 1000개가 나오면 1000개가 쌓인걸 그려야 하니.. 그럼
어떤 원인 모를 힘에 의해서 증발되는 모션(이것은 투명도로 조절하
면 간단합니다. 전 투명도를 20%씩 낮췄습니다.)을 만듭시다.
생각보다 간단합니다.

이제, 이 만든 모션들을 애니메이션을 맹거주는 플그램(전 애니메이션
샵 2를 사용했습니다.)으로 애니메이션을 맹그면! 드디어 엿공장이 가
동되는 순간! 맘껏 엿을 먹읍시다 ㅠ_ㅠ)/

어느 장면에서 좀 오래 끌고 싶다, 라는 생각이 드시면, 똑같은 그림을
3~4 프레임정도 중복해 넣으면, 그만큼 그 장면에서 시간이 오래 가겠
죠? 저는, 마지막에 엿을 뽑고 문이 완전히 닫힌 장면에서 엿을 오래
감상하게 하기 위해 위의 방법을 사용했습니다.

단, 전 보기 편하게 모션 컷은 이어서 그림으로 게시를 했으나, 여러분은
제작하실때, 각 컷마다 96X96(제가 제작한 그림 사이즈)등, 원래 처음에
시작했던 그림 사이즈로 맞춰주셔야 합니다.

자, 힘들고 어렵고 복잡하고 난해하고 허접하고 뭔말인지 모를수도 있는
강좌가 끝났습니다; -_-)a 휴;

굳이 엿 공장을 만든 이유는 2003년 수능을보는 선배님들을 미리 화이팅
하기 위한 이유..도 있고 엿이 제작하기 쉬워서;;;; 도 있습니다.

이를 활용하면 엿 대신에 러브레터를 넣는다거나, 장미를 넣는다거나,
기술이 좋으신 분은 아기를 넣어도(-_-;;;;;;) 좋으리라 생각됩니다.

엿 대신에 편지를 넣어서 롤 오버를 시키면 좋은 이메일 아이콘이 되리
라 생각됩니다 ^^;

의문나시는 점 있으면 코멘트 달아주시면, 제가 답변해드리겠습니다.
도트에 가장 필요한것은 인내입니다! 모두 인내합시다! 우오오 -_-)/_-)/

자, 그럼 다음에 새로운 生도트로 여러분을 찾아뵙겠습니다
즐 도트 하세요 ^^;
번호 제목 글쓴이 날짜 조회 수
공지 공지 강좌를 올리기전 공지사항을 읽어주세요 [12] Eccen 2004.12.15 48035
95 [pts6 디피 강좌5] 파란색 키보드에 글씨 집어넣기2 [13] file Difications 2002.03.03 8624
94 [pts6 디피 강좌4] 파란색 키보드에 글씨 집어넣기1 [1] file Difications 2002.03.03 7391
93 (FLASH) 제로보드 플래시로 만들기 (1) [14] file 야웅 2002.03.03 31992
92 生도트 :: #3 샤론 슬라임 [13] Es. 2002.03.02 8143
91 이미지 밝은 효과주기 [2] file LitQoo 2002.03.02 6255
90 [키르강좌] 빤짝이는 축전만들기~★요청&추천★ [2] 키르(SP) 2002.03.02 10060
89 [PSP5] 간단하게 글자에 태두리 넣기 [7] file emotions 2002.03.02 3746
88 [퍼니페인트]페인트샵 풀무원..;; [7] funnyPSP 2002.03.01 3093
87 스켄라인 긋기 [3] file 후니 2002.03.01 6614
86 [퍼니페인트]그림 나누어 저장 시키기 [2] funnyPSP 2002.03.01 2630
85 초코렛 만들기 [10] file 후니 2002.03.01 7883
84 [디피 포샵 강좌 3] 풀무원 로고 흉내내기 [10] file Difications 2002.03.01 12570
83 [디피의 쓸대없는 강좌2] msn을 이용한 도트 흉내내기 [4] file Difications 2002.03.01 7031
82 生도트 :: #2 나무를 심어보자! [18] Es. 2002.03.01 8316
81 [pts6 : 허접 강좌시리즈1]스타버스트 응용[수정완료-_-v] [11] Difications 2002.03.01 5783
80 [키르강좌] 귀신만들기..-_-;; [2] 키르(SP) 2002.03.01 6270
79 멋진 네온문자 만들기~ [1] file 후니 2002.02.28 7716
» 生도트 :: #1 엿공장 [21] Es. 2002.02.28 9273
77 사진에 테두리 넣기 [5] file 후니 2002.02.28 20356
76 [PSP정보]매우 좋은 사이트가 탄생 했네요 :) [5] 국왕 2002.02.27 14653