Fireworks에서 애니메이션 GIF 만들기

01/20

터키 Fireworks에서 애니메이션 GIF

텍스트 및 이미지 © Sandra Trainor

이 자습서에서는 Fireworks CS6을 사용하여 색상을 변경하는 꼬리 깃털이있는 칠면조의 애니메이션 GIF를 만듭니다. 일러스트레이션을 만들고 복제하는 것으로 시작하겠습니다. 하나를 변경하고, 둘 다 심볼로 변환하고, 두 번째 상태를 만들고, 애니메이션을 미리 봅니다. 그런 다음 두 상태의 지속 시간을 변경하고 파일을 애니메이션 GIF로 저장 한 다음 브라우저에서 봅니다.

Fireworks CS6이이 자습서에서 사용되었지만 Fireworks 또는 Photoshop 의 최신 버전을 사용하여 따라 할 수 있습니다 .

편집자 주 :

Adobe는 더 이상 Fireworks CC를 Creative Cloud의 일부로 제공하지 않습니다. Fireworks를 찾고있는 경우 Creative Cloud의 추가 응용 프로그램 찾기 섹션에서 찾을 수 있습니다. Adobe가 더 이상 응용 프로그램을 지원하거나 업데이트하지 않는다고 발표하면 응용 프로그램이 사라지는 것이 단지 시간 문제라고 생각할 수 있습니다. 이에 대한 대표적인 예는 Director, Shockwave 및 Contribute에 관한 최근 발표입니다.

Tom Green 업데이트

02 중 20

새 문서 만들기

텍스트 및 이미지 © Sandra Trainor

파일> 새로 만들기를 선택하여 새 문서를 만듭니다. 너비와 높이를 400 x 400 픽셀로, 해상도를 72 픽셀 / 인치로 할 것입니다. 캔버스 색상으로 흰색을 선택하고 확인을 클릭하십시오.

그런 다음 File (파일)> Save (저장)를 선택하고 파일 이름에 PNG 확장명을 지정하고 저장할 위치를 선택한 다음 Save (저장)를 클릭합니다.

03/20

원 그리기

텍스트 및 이미지 © Sandra Trainor

도구 패널에서 스트로크 색상 상자를 클릭하고 검은 색을 선택한 다음 채우기 색상 상자에서 갈색 견본을 선택하거나 16 진수 값 필드 # 8C4600을 입력합니다.

[속성] 패널에서 획 너비를 2 픽셀로 지정합니다. 도구 패널에서 사각형 도구 또는 다른 보이는 모양 도구 옆에있는 작은 화살표를 클릭하여 찾을 수있는 타원 도구를 선택합니다. Shift 키를 누른 상태에서 큰 원을 만들려면 클릭하고 드래그합니다. 이동을 사용하면 원이 완벽하게 둥글게됩니다.

04 / 20

다른 서클 그리기

텍스트 및 이미지 © Sandra Trainor

다시 한 번, 다른 원을 그릴 때 Shift 키를 누르고 있습니다.이 원을 마지막 것보다 작게 만 사용하십시오.

포인터 도구를 사용하여 작은 원을 클릭하여 끌어옵니다. 큰 원형의 윗부분과 겹치기를 원합니다.

05 중 20

둥근 사각형 그리기

텍스트 및 이미지 © Sandra Trainor

둥근 사각형 도구를 사용하여 사각형을 그립니다. 포인터 도구를 사용하여 포인터 도구로 옮깁니다. 저는 그것이 중심에 있고 작은 원의 바닥과 약간 겹치기를 원합니다.

06 20

경로 결합

텍스트 및 이미지 © Sandra Trainor

나는 작은 원을 클릭하고 그 다음 둥근 사각형을 클릭 할 때 shift 키를 누르고있을 것이다. 그러면 두 모양이 모두 선택됩니다. 그런 다음 수정, 경로 합치기> 조합을 선택합니다.

07 중 20

색상 변경

텍스트 및 이미지 © Sandra Trainor

도구 패널에서 필 상자를 클릭하고 크림 견본을 선택하거나 16 진수 값 필드에 # FFCC99를 입력 한 다음 return 키를 누릅니다.

08 중 20

눈 만들기

텍스트 및 이미지 © Sandra Trainor

눈을 만들기 위해 두 개의 작은 원을 그릴 수 있지만이 대신 유형 도구를 사용합니다. 도구 패널에서 유형 도구를 클릭 한 다음 캔버스에서 클릭합니다. 속성 관리자에서 글꼴에 대해 Arial Regular를 선택하고 크기를 72로 만들고 색상을 검정색으로 변경합니다. 총알을 만들 수있는 8 번 키를 눌러 Alt 또는 Options 키를 누른다. 다른 총알을 만들기 전에 스페이스 바를 눌러야 겠어.

09/20

부리 만들기

텍스트 및 이미지 © Sandra Trainor

도구 패널에서 다각형 모양 도구를 클릭합니다. [속성] 패널에서 채우기에 주황색 견본을 선택하거나 [16 진수 값] 필드에 # FF9933을 입력합니다. 또한 [속성] 패널에서 너비가 1 인 검정색을 검정색으로 만듭니다.

다음으로 Window> Auto Shape Properties를 선택합니다. 다각형 모양을 클릭하고 포인트와면을 모두 3, 반지름을 180 도로 지정합니다. 삼각형을 작게 만들려면 외경 값 필드에 20을 입력합니다. 이 숫자는 삼각형의 크기에 따라 다릅니다. 나는 그 때 반환을 누를 것이다.

포인터 도구를 사용하여 삼각형을 클릭하고 부리에 앉아 있어야한다고 생각하는 곳으로 끕니다.

10/20

스네드 만들기

텍스트 및 이미지 © Sandra Trainor

칠면조의 부리에 매달린 빨간 물건을 Snood라고 부릅니다. 펜 도구를 사용하겠습니다.

도구 패널에서 펜 도구를 선택한 후 채우기 상자를 클릭하고 빨간 견본을 선택하거나 16 진수 값 필드에 # FF0000을 입력 한 다음 return 키를 누릅니다.

펜 도구를 사용하여 클릭하여 경로를 형성하는 점을 만들고 때로는 클릭하고 드래그하여 둥근 경로를 만듭니다. 마지막 점이 첫 번째 점과 연결되면 나는 칠면조와 같은 모양을 만들 것입니다.

11/20

다리 만들기

텍스트 및 이미지 © Sandra Trainor

부리에서 채우기 상자를 클릭하여 부리와 동일한 오렌지색으로 채우기 색을 설정할 수 있습니다. 펜 도구를 선택한 상태에서 획 색상을 검은 색으로 만들고 속성 패널에서 획 너비를 2로 설정합니다.

다음으로 펜 도구를 사용하여 칠면조 다리 모양과 같은 모양을 만드는 점을 만듭니다. 선택한 모양으로 편집> 복제를 선택합니다. 그런 다음 수정> 변형> 수평 뒤집기를 선택합니다. 포인터 도구를 사용하면 가장 잘 보이는 부분에 다리를 배치 할 수 있습니다.

12/20

크기 줄이기

텍스트 및 이미지 © Sandra Trainor

선택> 모두 선택을 선택합니다. 그런 다음 도구 패널에서 크기 조정 도구를 클릭합니다. 바깥 쪽 또는 바깥쪽으로 이동할 수있는 핸들 이있는 경계 상자가 나타납니다. 코너 핸들을 클릭하고 안쪽으로 움직여 전체를 작게 만든 다음 리턴 키를 누릅니다.

모든 모양이 선택된 상태에서 포인터 도구를 사용하여 칠면조를 제자리로 이동시킵니다. 캔버스에 중심을 맞추기를 원합니다.

13/20

꼬리 깃털 만들기

텍스트 및 이미지 © Sandra Trainor

타원 도구를 사용하여 클릭하고 드래그하여 긴 타원형을 만듭니다. 그런 다음 편집> 복제를 선택합니다. 총 5 개의 타원이 생길 때까지 나는 타원형을 몇 번이고 반복 할 것이다.

14/20

색상 변경

텍스트 및 이미지 © Sandra Trainor

선택한 타원 중 하나를 사용하여 채우기 상자를 클릭하고 다른 색상을 선택합니다. 나는 세 개의 더 타원으로 이것을 할 것이고, 각각 다른 색깔을 선택할 것이다.

15/20

타원 이동

텍스트 및 이미지 © Sandra Trainor

포인터 도구를 사용하여 다섯 개의 타원을 클릭하고 드래그하여 모두 선택합니다. 그런 다음 수정> 정렬> 맨 뒤로 보내기를 선택합니다. 이것은 내가 자리에 그들을 이동하면 꼬리 깃털은 칠면조 뒤에 떨어질 것입니다.

난 타원형을 클릭하여 선택을 해제 한 다음 한 번에 하나의 타원형을 클릭하고 서로 옆에 앉아서 칠면조 뒤에 부분적으로 끕니다.

스마트 가이드를 사용하면 서로 마주하는 타원을 균등하게 배치하는 데 도움이됩니다. 스마트 가이드가 작동하지 않는다면보기> 스마트 가이드> 스마트 가이드 표시를 선택하십시오.

16/20

타원 회전

텍스트 및 이미지 © Sandra Trainor

타원을 회전시키고 위치를 바꾸고 싶습니다. 이렇게하려면 하나를 선택하고 수정> 변형> 자유 변형을 선택합니다. 그 다음 타원을 약간 회전시키기 위해 경계 상자 바깥 쪽을 클릭하고 드래그합니다. 포인터 도구를 사용하면 타원형이 가장 잘 보이는 곳에 배치 할 것입니다.

나는 남은 타원을 같은 방법으로 회전시키고 그들을 제자리에 위치시킬 것입니다. 균등하게 분배.

17/20

저장하고 다른 이름으로 저장

텍스트 및 이미지 © Sandra Trainor

내 이미지를 보면 칠면조가 캔버스에서 너무 낮아서 선택> 모두 선택을 선택한 다음 포인터 도구를 사용하여 칠면조를 캔버스의 가운데에 배치합니다. 모양이 마음에 들면 파일> 저장을 선택합니다.

다음으로 꼬리 날개를 클릭하여 채우기 상자에서 선택하고 다른 색상을 선택합니다. 각 꼬리 깃털에 대해이 작업을 수행 한 다음 파일> 다른 이름으로 저장을 선택하십시오. 나는 파일 이름을 turkey2로 바꾸고 png 확장자를 붙이고 Save를 클릭한다.

18/20

기호로 변환

텍스트 및 이미지 © Sandra Trainor

파일> 열기를 선택하고 내 turkey.png 파일을 탐색 한 다음 열기를 클릭합니다. 상단의 turkey.png 탭을 클릭하고 선택> 모두 선택을 선택하십시오. 그런 다음 수정> 변환> 심볼로 변환을 선택합니다. 심볼 1로 이름을 지정하고 타입에 대한 그래픽을 선택한 다음 확인을 클릭합니다.

turkey2.png 탭을 클릭하고 같은 작업을 수행합니다.이 기호의 이름을 2로 지정하겠습니다.

19/20

새로운 주를 창조하십시오

텍스트 및 이미지 © Sandra Trainor

turkey.png 탭을 다시 클릭하겠습니다. 내 상태 패널이 보이지 않으면 창> 상태를 선택할 수 있습니다. 상태 패널의 맨 아래에있는 새 중복 상태 버튼을 클릭합니다.

첫 번째 상태를 클릭하여 선택하면 기호가 있음을 알 수 있습니다. 두 번째 상태를 클릭하면 빈 상태라는 것을 알 수 있습니다. 이 빈 상태에 심볼을 추가하려면 파일> 가져 오기> 내 turkey2.png 파일을 탐색하고 열기를 클릭 한 다음 다시 열기를 선택합니다. 그런 다음 캔버스의 오른쪽 위 모서리를 클릭하여 파일을 올바른 위치에 배치합니다. 이제 첫 번째 상태와 두 번째 상태 사이를 클릭하면 두 이미지가 모두 유지되는 것을 볼 수 있습니다. 또한 창 하단의 재생 / 정지 버튼을 눌러 애니메이션을 미리 볼 수 있습니다.

애니메이션 속도가 마음에 들지 않으면 각 주 오른쪽의 숫자를 두 번 클릭하여 조정할 수 있습니다. 숫자가 높을수록 지속 시간이 길어집니다.

20/20

애니메이션 GIF 저장

텍스트 및 이미지 © Sandra Trainor

파일> 다른 이름으로 저장을 선택하고, 파일의 이름을 바꾸고, 애니메이션 GIF (* .gif)를 선택한 다음 저장을 클릭합니다.

브라우저에서 Animation GIF를 열고 재생하려면 브라우저를 실행하고 파일> 파일 열기 또는 열기를 선택하십시오. 저장된 애니메이션 GIF 파일로 이동하여 선택하고 열기를 클릭 한 다음 애니메이션을 즐기십시오.

관련 항목 :
애니메이션 GIF 최적화
• 와일드 터키의 개요
• 추수 감사절 칠면조 역사
• 지금까지 보아온 가장 사나운 칠면조