웹 그래픽 최적화
그래픽 정보텍스트보다 훨씬 느리고 이미지 로딩 시간은 그래픽 파일의 크기에 비례합니다. 그래서 빠른 로딩웹 페이지에는 작은 크기의 그래픽 이미지가 포함되어 있어야 하며 이는 최적화를 통해 달성됩니다. 이미지 최적화는 이 경우에 필요한 이미지 품질을 유지하면서 최소 파일 크기를 제공하는 변환으로 이해되며, 이는 주로 그래픽 이미지의 색상 수를 줄이고 압축 및 특수 파일 형식을 사용하고 개별 압축 설정을 최적화함으로써 달성됩니다. 이미지 조각.
Illustrator에는 다음을 제공하는 이미지 최적화 도구가 내장되어 있습니다. 다양한 방법빠르고 효율적인 최적화 프로세스를 미리 봅니다. 시사최적화된 이미지가 실시간으로 어떻게 보이는지에 대한 상당히 정확한 아이디어를 제공하여 최적화 결과를 평가하고 올바른 이미지를 선택하는 데 도움이 됩니다. 원하는 설정. 또한 Illustrator에서 직접 만든 이미지와 웹 사이트에 올릴 사진과 같은 다른 이미지를 모두 최적화할 수 있습니다.
최적화 매개변수는 창에서 설정됩니다. 구하다 웹용 (웹용으로 저장), 메뉴에서 같은 이름의 명령으로 호출 파일(파일). 이 프로그램은 네 가지 미리보기 모드 중 하나를 사용하도록 제안하지만 두 가지가 최적화 품질을 평가하는 데 가장 좋습니다.
- 2업(두 가지 옵션) 지정된 설정에 따라 원본과 최적화된 이미지를 동시에 보기(그림 1);
- 4업(네 가지 옵션) 이 모드에서는 보기 영역이 네 개의 창(그림 2)으로 나뉘어 표시됩니다. 원본 이미지및 3개의 최적화된 버전: 첫 번째 버전은 설정된 최적화 값을 기반으로 생성되고 나머지 두 개는 현재 최적화 설정의 변형입니다.
두 모드 모두 이미지를 저장할 필요가 없기 때문에 최상의 최적화 옵션을 찾는 시간을 크게 절약할 수 있습니다. 다른 설정최적화 및 후속 시각적 비교. 또한 최적화된 이미지의 품질뿐만 아니라 다양한 연결 옵션에 대한 크기 및 다운로드 시간도 평가할 수 있습니다. 비교를 위해 가장 편리한 모드는 압축 또는 팔레트 축소가 이미지 품질 및 크기에 미치는 영향을 시각적으로 평가하고 궁극적으로 최상의 최적화 매개변수를 결정할 수 있는 4-Up(4가지 옵션)입니다.
Illustrator를 사용하면 GIF, JPG, PNG-8 및 PNG-24 형식뿐만 아니라 SWF 및 SVG 형식의 웹 그래픽을 최적화할 수 있습니다. 색상 수가 적은 인덱스 이미지는 GIF 형식으로 저장됩니다. 풀 컬러 및 그레이스케일 이미지 사진 및 그래디언트 채우기와 같은 풍부한 색상의 그래픽을 저장하려면 다음을 사용하십시오. JPG 형식. 투명 영역이 있는 풀 컬러 이미지의 경우 PNG 형식, 인덱스 및 풀 컬러 이미지를 모두 저장할 수 있는 반면 PNG-8에서는 최적화된 이미지의 가능한 최대 색상 수는 256이고 PNG-24에서는 이미지가 수백만 가지 색상을 가질 수 있으므로 다음과 같이 보입니다. jpeg 형식. PNG-24와 JPEG의 차이점은 PNG-24 이미지를 최적화하는 데 사용되는 압축 방법이 품질 손실을 초래하지 않지만 파일 크기를 증가시킨다는 점입니다. SVG 및 SWF 형식은 그래픽, 텍스트 및 대화형 구성 요소를 결합하며 최적화할 수도 있습니다.
고려하다 구체적인 예이미지 최적화. Illustrator 프로그램에서 원래 AI 형식으로 저장된 사이트 엠블럼이 개발되었다고 가정해 보겠습니다(그림 3). 웹에 대해 즉시 최적화하려는 시도는 좋지 않습니다. 이 경우 이미지가 자동으로 잘려 변형의 결과로 얻은 비문의 실제 위치를 고려하지 않기 때문입니다(그림 4 및 5).
따라서 명령을 사용하여 엠블럼을 PSD 형식으로 내보내 보겠습니다. 파일=>내보내기(파일=>내보내기) 생성된 이미지의 크기는 143KB입니다. 결과 PSD 파일을 열고 명령을 사용하십시오. 파일=>웹용으로 저장(파일=>웹용으로 저장). 이미지와 관련된 제한된 수의 색상을 고려할 때 이 경우 GIF 형식이 최적이며 특정 설정을 결정해야 합니다. 설정을 실험해 보면 알 수 있습니다. 최고의 품질프로그램의 기본 압축 알고리즘을 제공합니다. 선택적(선택적). 스무딩의 경우 그래디언트 채우기가 있는 경우 노이즈 생성이 있는 알고리즘을 선택하는 것이 좋습니다. 소음(그림 6). 결과 최적화 파일의 크기는 6.729KB(그림 7)이며 배경 투명도는 보존되며 HTML 파일과 함께 GIF 이미지를 저장하여 쉽게 확인할 수 있습니다(그림 8). 결과적으로 이 예 emblem.html 및 emblem.gif 파일은 Primer1 폴더에서 가져왔습니다.
버튼
모든 웹 페이지의 필수 불가결한 특정 디자인 요소는 그래픽 컨트롤 버튼입니다. 그것들이 없는 페이지를 상상하는 것은 단순히 불가능합니다. 오늘날 드로잉 버튼은 특별한 장르가 되었으며 Illustrator를 사용하면 가장 복잡한 옵션을 만들 수 있습니다. 예를 들어 그리드 객체로 디자인된 버튼 및/또는 마스크가 있는 버튼은 일반적인 버튼보다 훨씬 더 효과적입니다.
Illustrator에서 둥근 볼록 버튼을 만드는 옵션을 고려하십시오. 원 형태로 임의의 색상으로 채워진 벡터 개체를 그리고(그림 9) 명령을 사용하여 그리드로 변환합니다. 객체=>그라디언트 메쉬 생성(Object=>Create Gradient Mesh) 4개의 행과 4개의 열을 지정하고 목록에서 모습(보기) 옵션 선택 센터로 가장 밝은 부분(백라이트)를 60으로 설정합니다(그림 10). 도구 선택 직접 선택그리고 왼쪽 클릭 상단 모서리거기에 있는 절점을 강조 표시합니다(그림 11). 팔레트에서 선택하여 해당 셀의 색상을 흰색으로 변경 견본(그림 12).
도구를 가져 가라. 타원(타원) 키를 누른 상태에서 이전에 만든 원의 중심에 마우스 마커를 설정하고 대안그리고 옮기다, 이전 원 위에 새 원을 늘려 모든 면에서 이전 원보다 1-2픽셀 더 크게 만듭니다. 검은색 테두리로 만들어주세요 뇌졸중) 너비가 1-2픽셀이고 빨간색에서 흰색으로 방사형 그라데이션으로 채웁니다(그림 13). 생성된 벡터 개체를 오른쪽 아래로 1-2픽셀 드래그한 다음 선택을 제거하지 않고 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 명령을 선택합니다. 배열=>뒤로 보내기(구성=>다시 보내기). 결과적으로 그림에 표시된 버튼에 대한 공백이 생깁니다. 14.
일반적으로 모든 웹 페이지에는 동일한 유형의 여러 버튼이 있습니다. 예를 들어 사이트 이동 방향을 나타내는 화살표 방향만 다릅니다. 두 개의 버튼이 있는 가장 간단한 경우를 생각해 보십시오. 그 중 하나는 아래쪽 화살표가 있는 경우 다음 페이지로 이동하고 화살표가 있는 버튼은 이전 페이지로 이동하는 것을 의미합니다. 화살표의 여백으로 도구로 그린 정삼각형을 찍자 다각형(Polygon) 검은색으로 채워지고 더 큰 효과를 위해 메쉬 개체로 스타일이 지정되었습니다. 화살표를 버튼으로 이동하고 해당 팔레트 버튼을 사용하여 서로에 대한 모든 개체의 위치를 조정합니다. 맞추다(조정). 받은 버튼 중 첫 번째 버튼이 그림에 나와 있습니다. 15. 명령을 선택하여 버튼으로 레이어 사본을 만듭니다. 중복 레이어 레이어결과적으로 두 개의 동일한 레이어를 얻습니다. 그런 다음 레이어 사본에서 화살표를 선택하고 상황에 맞는 메뉴에서 명령을 선택하여 180° 회전합니다. 변형=>회전변환=>회전. 그림과 같이 동일한 버튼을 얻습니다. 16. 한 프로젝트의 동일한 유형의 버튼을 모두 다른 레이어의 한 파일에 저장하는 것이 훨씬 더 편리하다는 점에 유의하십시오. 이 경우에 설명되어 있습니다.
이제 각 버튼에 최적화된 옵션을 저장해야 합니다. 이 경우 맨 아래 레이어를 먼저 보이지 않게 만드십시오. 이 경우 맨 위 레이어의 버튼이 유지됩니다. 팀을 선택하세요 파일=>웹용으로 저장(File=>Save for Web), 예를 들어 그림과 같이 버튼 최적화 매개변수를 구성합니다. 17, 버튼을 클릭 구하다(저장)을 클릭하고 파일 이름을 입력합니다. 결과로 저장된 버튼은 Fig. 18. 이제 아래쪽 레이어를 보이게 하고, 위쪽 레이어를 보이지 않게 만든 다음 같은 방식으로 두 번째 버튼을 다른 이름으로 저장합니다. 결과는 그림에 나와 있습니다. 19.
이제 남은 일은 단추가 웹 페이지에서 잘 보이는지 확인하고 사용자 지정 페이지에 배치하는 것입니다(그림 20). 그 결과 이 예제에서는 이미지 폴더(폴더 프라이머2).
원하는 경우 최적화 프로세스 중에 버튼을 쉽게 슬라이스로 전환할 수 있습니다. 이 경우 명령을 선택한 후 파일=>웹용으로 저장(파일 => 웹용으로 저장) 및 최적화 설정은 도구 팔레트 도구에서 선택해야 합니다. 슬라이스 선택(슬라이스 선택) 이미지를 두 번 클릭하면 자동으로 슬라이스로 바뀝니다. 일련 번호 1 (그림 21). 반복 더블 클릭마우스가 창을 엽니다 슬라이스 옵션(슬라이스 옵션) 링크를 지정하고 원하는 경우 슬라이스 이름을 변경한 다음(그림 22) 최적화된 이미지를 저장해야 합니다. 이 경우 결과는 Primer3.html(그림 23) 및 Primer3.gif(Primer3 폴더) 파일이 됩니다.
인터랙티브 요소
페이지를 멋지게 꾸밀 수 있는 한 가지 방법은 페이지를 변경하는 디자인 요소를 도입하는 것입니다. 모습(또는 상태) 마우스의 동작에 따라 또는 드물게 다른 상황의 경우(확대/축소, 스크롤, 로드, 오류 등)
이러한 요소 중 가장 유명한 것은 마우스의 영향으로 모양이 변경되는 롤오버(영어 롤오버에서 롤오버로 롤오버) 요소입니다. 애니메이션 버튼은 일반적인 롤오버의 예입니다. 롤오버는 다른 사이트 탐색 요소를 만들 때 자주 사용됩니다. 실제로 모든 롤오버는 하나가 아니라 각각 특정 이벤트에 해당하는 여러 이미지(최대 4개)입니다. 주요 이벤트는 다음과 같은 것으로 간주됩니다. 일반 일반 상태, 요소 위에 마우스 커서를 올려 놓기 및 요소 위에 마우스를 올려 놓았을 때 마우스 왼쪽 버튼을 아래로 누르기. 이론적으로 Click 클릭 후 왼쪽 마우스 버튼 해제, 버튼 해제 후 Up, 활성 영역을 벗어날 때 Out과 같은 이벤트가 포함될 수 있습니다. 그러나 실제로는 처음 세 개 또는 심지어 두 개의 이벤트에 대해서만 요소를 변경하는 것으로 더 자주 제한됩니다.
클래식 롤오버
고전적인 의미에서 롤오버는 GIF 형식의 일련의 그래픽 이미지와 해당 HTML 코드로, 마우스 동작에 따라 브라우저 창에서 한 이미지가 다른 이미지로 대체됩니다.
Illustrator는 고전적인 의미에서 롤오버를 직접 생성하도록 설계되지 않았지만 롤오버의 초기 요소를 개발하는 데 도움이 될 수 있습니다. 이 경우 아이디어는 첫 번째 이벤트에 해당하는 이미지로 레이어를 만드는 것입니다. 그런 다음 레이어의 복사본을 만들고 두 번째 이벤트와 일치하도록 이미지를 변형합니다. 결과 레이어 이미지는 레이어가 보존된 PSD 파일로 내보내집니다. 이를 기반으로 롤오버가 생성됩니다. 이미지 프로그램준비가 된. 다른 많은 경우와 마찬가지로 Illustrator 사용의 이점은 벡터 그래픽 변환의 편리함과 결합된 다른 소프트웨어 도구에서는 사용할 수 없는 여러 가지 흥미로운 기능입니다.
마우스 동작에 따라 색상이 변하는 비문 형태로 롤오버를 만들어 봅시다. Illustrator를 열고 둥글고 검은색 직사각형으로 채워진 형태로 모양을 만들고(그림 24) 복사본을 만들어 화면의 빈 부분에 배치합니다. 직사각형의 첫 번째 사본을 중앙에 하이라이트가 있는 그리드 객체로 변환합니다(명령 객체=>그라디언트 메쉬 생성 Object=>Create Gradient Mesh), 4개의 행과 10개의 열을 지정합니다(그림 25). 직사각형의 두 번째 사본을 활성화하고 그림에 표시된 것과 유사하게 그라디언트 채우기를 설정하십시오. 26. 그래디언트 객체를 메쉬 위에 오버레이하고 그래디언트 객체의 불투명도를 약 80%로 줄이고 그래디언트 객체의 크기를 약 1픽셀로 줄여 결국 벌지 효과를 시뮬레이션합니다. 그런 다음 물체 위에 비문을 인쇄하십시오. 원래 형태에서는 일반 상태에 해당하는 흰색을 가지게 한 다음(그림 27) 롤오버 상태가 변경되면 비문의 색상이 예를 들어 마우스 마커가 있을 때 녹색으로 변경됩니다. 위에 마우스를 올렸을 때(오버 상태) 마우스 버튼을 누르면 파란색으로 바뀝니다(다운 상태).
팔레트에 주목 레이어이 단계에서는 하나의 단일 레이어만 있습니다. 명령을 사용하여 이 레이어의 복사본을 두 개 만듭니다. 중복 레이어(레이어 복제) 팔레트 메뉴에서 레이어, 팔레트에 세 개의 레이어가 있습니다(그림 28). 그런 다음 레이어의 첫 번째 복사본에서 비문의 색상을 녹색으로 변경하고 두 번째는 파란색으로 변경합니다(그림 29). 결과적으로 롤오버에 필요한 블랭크를 얻을 수 있습니다.
명령을 사용하여 생성된 이미지를 레이어가 보존된 PSD 형식으로 내보냅니다. 파일=>내보내기(파일=>내보내기) RGB 색상 모델을 선택합니다(그림 30). ImageReady에서 생성된 PSD 파일을 엽니다(그림 31 및 32). 명령을 선택하여 레이어를 기반으로 프레임 만들기 레이어에서 프레임 만들기(레이어에서 프레임 만들기) 팔레트 메뉴에서 생기. 애니메이션 창은 그림과 같습니다. 33. 팔레트에서 동시에 롤오버처음에는 단일 정상 상태가 생성됩니다.
그런 다음 창에서 생기팔레트에 있는 동안 가리킨 상태에 해당하는 프레임을 선택합니다. 레이어레이어가 자동으로 선택됩니다 레이어 1 복사(그림 34). 팔레트로 이동 롤오버버튼을 클릭하십시오 롤오버 상태 생성(롤오버 상태 생성) 무화과. 35, 그러면 상태가 표시됩니다. 오버 스테이트팔레트에서 롤오버(그림 36). 같은 방식으로 상태를 만듭니다. 다운 상태. 활성화 상태 정상팔레트에서 롤오버팔레트에서 삭제 생기상태와 일치해야 하는 프레임을 제외한 모든 프레임 정상. 결과적으로 팔레트의 각 롤오버 상태에 대해 생기하나의 프레임만 있을 것입니다(그림 37, 38 및 39).
쌀. 38. 오버 상태에 대한 이미지, 애니메이션 창, 레이어 및 롤오버 팔레트 보기
버튼을 클릭하여 결과를 확인하십시오. 기본 브라우저에서 미리보기(브라우저 미리보기)를 클릭하고 브라우저 창으로 이동합니다(그림 40). 그런 다음 명령을 사용하여 파일을 저장하십시오. 파일=>최적화 저장(파일=>최적화와 함께 저장) 및 옵션 지정 HTML 및 이미지(*.html). 결과적으로 이 예제에서는 Primer4.html 파일과 이미지 폴더의 일련의 그래픽 이미지를 얻었습니다.
쌀. 40. 롤오버 요소가 있는 브라우저 창
SVG 롤오버
인기를 끌다 SVG 형식(확장 가능한 벡터 그래픽 확장 가능한 벡터 그래픽) XML 표준을 기반으로 생성되어 다양한 대화형 요소, 특히 롤오버를 얻을 수 있지만 실제로는 완전히 다른 방식으로 구현됩니다. 해당 HTML 코드가 완전히 자동으로 생성될 때 클래식 롤오버와 달리 대화형 SVG 롤오버를 생성하려면 지식이 필요합니다. 자바스크립트 언어객체 지향 프로그래밍의 기본 원칙을 이해합니다.
특수 팔레트는 SVG 개체와 함께 작동하도록 설계되었습니다. SVG 상호작용, 명령으로 쉽게 열 수 있습니다. 창=>SVG 상호 작용(Window=>SVG 상호작용) 그림. 41.
고려하다 이 옵션대화형 버튼의 예에서 롤오버를 생성합니다. 레이블의 색상은 마우스를 가리키면 검은색에서 파란색으로 바뀌고 마우스가 활성 영역을 벗어나면 다시 검은색으로 바뀝니다.
모서리가 둥근 직사각형 버튼을 만들고 예를 들어 그림과 같이 적절한 그라데이션 채우기를 선택합니다. 42. 팔레트에서 버튼 투명도 조절 투명도(투명도) 이 예에서 매개변수의 값은 불투명(불투명도)는 50%로 설정됩니다. 버튼의 복사본을 만들고 짙은 녹색으로 채운 다음(그림 43) 명령을 사용하여 메쉬 개체로 변환합니다. 객체=>그라디언트 메쉬 생성(Object=>Create Gradient Mesh) 4개의 행과 10개의 열을 지정하고 목록에서 모습(보기) 옵션 선택 센터로(가운데 방향) 및 값 설정 가장 밝은 부분(강조 표시)를 100으로 설정합니다. 메쉬 개체 레이어의 불투명도를 약 40%로 줄입니다(그림 44). 그래디언트 개체 위에 메쉬 개체를 배치하면 버튼이 그림과 같이 표시됩니다. 45.
쌀. 44. 버튼 사본을 그리드 객체로 바꾸기
의도한 비문으로 버튼을 완성하고 해당 팔레트 버튼을 사용하여 위치를 조정합니다. 맞추다(조정). 결과 이미지에는 세 개의 개체가 서로 겹쳐진 하나의 레이어가 포함됩니다(그림 46). 예약된 이벤트는 텍스트 개체를 참조하므로 편의상 이름을 텍스트개체를 두 번 클릭하고 새 이름을 입력합니다. 마찬가지로 레이어 이름을 레이어 1에서 레이어로(그림 47).
이벤트 처리에는 JavaScript 프로시저 사용이 포함되므로 이러한 프로시저에 대한 설명이 있는 파일을 포함해야 합니다. Events.js라고 하며 Adobe Illustrator가 설치될 때 디스크의 Sample Files\Sample Art\SVG\SVG 폴더에 저장됩니다. Events.js 파일을 포함하려면 다음 명령을 사용하십시오. 자바스크립트 파일 SVG 상호작용(그림 48). 다음으로 버튼을 눌러야합니다. 추가하다(추가) 및 찾기 원하는 파일하드 드라이브에. 필드에 그의 이름이 나타날 때 URL(그림 49) 버튼을 클릭합니다. 완료(나가).
쌀. 48. JavaScript 파일 명령 선택
그런 다음 개체에 대한 마우스 이벤트에 대한 반응을 정의해야 합니다. 텍스트. 필드에서 텍스트 개체를 선택합니다. 이벤트(이벤트) 팔레트 SVG 상호작용이벤트 선택 onmouseover elemColor(evt, "텍스트", "#3333FF")이는 마우스가 개체 위에 있을 때 텍스트색상이 파란색으로 바뀝니다(그림 50). 마우스가 활성 영역을 떠난 후 텍스트 색상이 검은색으로 변경되도록 하려면 이벤트를 하나 더 생성해야 합니다. 온마우스아웃필드에서 선택 이벤트(이벤트) 팔레트 SVG 상호작용. 그런 다음 액션 라인에 텍스트를 입력하십시오. elemColor(evt, "텍스트", "#000000")이렇게 하면 검정색이 반환됩니다(그림 51).
쌀. 51. 텍스트 개체에 대한 SVG 상호 작용 팔레트의 최종 모양
명령을 사용하여 생성된 롤오버를 SVG 파일로 저장 파일=>다른 이름으로 저장(파일=> 파일 형식체재 SVG, 그런 다음 그림과 같이 SVG 파일 저장 옵션을 설정합니다. 52. 저장 후에는 클래식 롤오버의 경우와 같이 SVG 확장자를 가진 단일 파일 하나만 수신되며, 이 경우 Primer5.svg 파일(Primer5 폴더)을 얻었습니다. 단, 롤오버가 제대로 동작하기 위해서는 SVG 파일이 있는 폴더에 자바스크립트 절차에 대한 설명이 포함된 Events.js 파일을 추가로 복사해야 합니다. 그 후, 롤오버의 성능을 확인할 수 있으며 결과는 그림과 같습니다. 53.
SVG 애니메이션
SVG 형식은 애니메이션을 전달하는 데에도 사용할 수 있습니다. 간단한 애니메이션 요소(이 경우 회사에 대한 정보가 됨)를 만들어 봅시다. 해당 그래픽 개체 위로 마우스를 가져가면 화면에 나타나고 마우스를 인터랙티브 요소에서 제거하면 사라집니다.
그림과 같이 일련의 그래픽 및 텍스트 개체를 대략적으로 만들어 봅시다. 54. 팔레트에서 다음 개체의 이름을 연속적으로 클릭하여 편리한 방식으로 생성된 모든 개체의 이름을 바꿉니다. 레이어원하는 이름을 입력합니다(그림 55). 그림에서 강조 표시된 점에 유의하십시오. 56개 항목 텍스트1, 텍스트2, 텍스트3그리고 경로1항상 표시되며 다른 모든 항목은 개체 위로 마우스를 가져갈 때만 표시됩니다. 텍스트 1.
쌀. 54. 이미지 원본 보기
명령을 사용하여 JavaScript 절차에 대한 설명과 함께 Events.js 파일을 포함합니다. 자바스크립트 파일(JavaScript 파일) 팔레트에서 SVG 상호작용버튼을 눌러 추가하다(추가) 하드 드라이브에서 원하는 파일을 선택하고 버튼을 클릭하여 완료(나가).
개체에 대한 마우스 이벤트 응답 정의 텍스트 1. 개체 선택 텍스트, 현장에서 이벤트(이벤트) 팔레트 SVG 상호작용이벤트 선택 onmouseover아래 줄에 텍스트를 입력하십시오. elemShow(evt, "텍스트4"); elemShow(evt, "경로2"). 결과적으로 마우스가 개체 위에 있을 때 텍스트 1개체가 표시됩니다 텍스트4그리고 경로2. 이벤트 발생 시 여러 동작을 수행해야 하는 경우 ";" 기호를 통해 지정해야 합니다. 그런 다음 이벤트에 대해 동일한 작업을 수행하십시오. 온마우스아웃, 텍스트를 입력하면 개체 숨기기를 의미합니다 (그림 57).
명령을 사용하여 결과를 SVG 파일로 저장 파일=>다른 이름으로 저장(파일=>다른 이름으로 저장), 파일 이름 지정, 필드에서 선택 파일 형식 SVG 형식을 선택한 다음 그림에 따라 SVG 파일을 저장하기 위한 옵션을 설정합니다. 58. 저장하면 Primer6.svg 파일(Primer6 폴더)이 생성됩니다. Events.js 파일을 이 파일이 있는 폴더에 복사하는 것을 잊지 마십시오. 그 후에 coz를 실행하면 주어진 파일, 당신은 그림에 표시된 결과를 볼 수 있습니다. 59. 이것은 거의 필요한 것입니다. 우리 계획에 포함되지 않은 유일한 것은 객체의 초기 모습이었습니다. 텍스트 4와 길 2 로딩시. 이 단점을 없애려면 이 두 개체를 한 번에 선택하고 그에 대한 작업을 만듭니다. elemHide(evt, "텍스트4"); elemHide(evt, "경로2")행사 중 길 위에(그림 60). 파일을 다시 저장하고 개체가 지금 있는지 확인합니다. 텍스트4그리고 경로2개체 위로 마우스를 가져갈 때만 표시됨 텍스트 1.
GIF 애니메이션
애니메이션 GIF를 포함하여 웹 애니메이션 없이는 모든 웹 페이지를 생각할 수 없습니다. 애니메이션을 만드는 한 가지 방법은 특히 레이어에서 애니메이션을 만들 수 있는 Adobe ImageReady 응용 프로그램을 사용하는 것입니다. 이 경우 다층 이미지 자체를 다음과 같이 준비할 수 있습니다. 다른 응용 프로그램, Adobe Illustrator 포함.
팔레트의 요소를 기반으로 애니메이션을 만드는 것은 매우 쉽습니다. 기호(기호) 명령으로 열림 창=>기호(Window=>Symbols) 또는 명령을 사용하여 열 수 있는 기호 라이브러리 중 하나에서 창=>기호 라이브러리(창=>기호 라이브러리).
예를 들어 개체 기호의 크기를 늘리려면 개체를 늘리는 프로세스의 주요 단계를 별도의 레이어에 설정해야 합니다. 먼저 기호 개체를 다른 개체 위에 배치한 다음 예를 들어 그림과 같이 각 후속 개체의 크기를 늘립니다. 61. 결과적으로 팔레트에서 레이어많은 개체가 있는 하나의 레이어가 생성됩니다(그림 62). 이 이미지를 PSD 형식으로 직접 내보내면 레이어가 하나뿐이고 당연히 ImageReady에서 PSD 파일을 열면 레이어도 하나만 있기 때문에 작동하지 않습니다. 따라서 먼저 다른 레이어에 개체를 배치해야 합니다. 이것은 할 수 있습니다 다른 방법들가장 쉬운 방법은 먼저 레이어를 선택하는 것입니다. 레이어 1레이어 팔레트에서 명령을 사용하십시오. 레이어로 릴리스(레이어로 릴리스). 그 결과 각 개체가 자체 레이어로 이동하지만 모두 레이어에 중첩됩니다. 레이어 1. 따라서 중첩된 모든 레이어를 레이어 팔레트의 맨 위로 수동으로 드래그하여 레이어 위에 있도록 해야 합니다. 레이어 1, 빈 레이어 레이어 1쉽게 제거할 수 있습니다(그림 63). 명령을 사용하여 이미지를 PSD 형식으로 내보냅니다. 파일=>내보내기(파일=>내보내기) 그림과 같이 설정합니다. 64.
ImageReady 프로그램에서 생성된 PSD 파일을 불러옵니다(그림 65, 66). 팔레트 메뉴 열기 생기레이어에서 프레임 만들기(레이어에서 프레임 만들기). 결과적으로 5개의 프레임이 생성되며 각 프레임은 해당 레이어와 팔레트 창에 해당합니다. 생기그림과 같이 보일 것입니다. 67.
그런 다음 생성된 각 프레임의 지속 시간을 설정합니다. 이 경우 모든 프레임의 지속 시간은 0.2초로 설정됩니다. 그런 다음 명령을 사용하여 최적화된 애니메이션을 저장합니다. 파일=>최적화 저장(파일=>최적화와 함께 저장). 얻은 결과는 그림과 유사할 수 있습니다. 68.
기능을 사용하는 것이 더욱 편리합니다. 라이브 블렌드일러스트레이터 소프트웨어. Illustrator와 ImageReady를 함께 사용하면 GIF 애니메이션을 만드는 프로세스의 속도가 크게 빨라집니다.
예를 들어 임의의 다색 개체 두 개를 그린 다음 적절한 매개 변수와 혼합합니다(그림 69). 이미지가 단일 레이어에 있기 때문에 이 파일을 직접 사용하여 애니메이션을 만드는 것은 불가능합니다(그림 70). 따라서 먼저 블렌드 개체의 각 요소를 별도의 레이어에 배치해야 합니다. 이렇게 하려면 창에서 레이어라인을 강조
쌀. 70. 레이어 창의 초기 상태
명령을 사용하여 만든 파일을 PSD 형식으로 내보냅니다. 파일=>내보내기(파일=>내보내기). ImageReady에서 생성된 PSD 파일을 엽니다(그림 73). Illustrator 프로그램에서 생성된 모든 레이어는 레이어 창(그림 74)과 창에 나타납니다. 생기하나의 프레임 만있을 것입니다.
팔레트 메뉴 활성화 생기, 팔레트의 오른쪽 상단 모서리에 있는 검은색 화살표를 클릭하고 명령을 선택합니다. 레이어에서 프레임 만들기(레이어에서 프레임 생성) 결국 이 예제에서는 5개의 프레임이 생성되고 팔레트 창 생기그림과 같은 형식을 취하게 됩니다. 75. 키를 길게 눌러 모든 프레임 선택 옮기다, 이 예에서 적절한 프레임 지속 시간을 설정하면 각 프레임에 대해 0.2초의 동일한 시간이 소요됩니다. 그런 다음 최적화 명령으로 파일을 저장하십시오. 파일=>최적화 저장(파일=>최적화 저장) 목록에서 설정 파일 형식옵션 이미지만(*.gif). 애니메이션은 Fig. 76.
훨씬 더 흥미로운 것은 움직임이 아니라 블렌드 오브젝트의 부드러운 크기 조정입니다. 예를 들어 이미 생성된 혼합 전환을 사용할 수 있습니다. 이 경우 혼합 전환의 각 요소에 대해 별도의 레이어를 만든 후 버튼을 사용하여 모든 개체를 서로 위에 배치합니다. 수평 정렬 센터(가로 중심에 대한 정렬) 및 수직 정렬 중심(수직 중앙 정렬) 팔레트 맞추다(그림 77).
생성된 파일을 PSD 형식으로 내보냅니다( 파일=>내보내기파일=>내보내기) ImageReady 프로그램에서 생성된 PSD 파일을 엽니다(그림 78). 레이어를 기반으로 애니메이션 프레임 만들기( 레이어에서 프레임 만들기레이어에서 프레임 생성) 적절한 기간을 선택합니다(그림 79). 그런 다음 애니메이션을보다 효과적으로 만들려면 기존 프레임을 역순으로 복사하여 이미지가 먼저 증가한 다음 감소하는 식으로 원을 그리십시오 (그림 80). 그런 다음 최적화 파일을 저장합니다( 파일=>최적화 저장파일=>최적화와 함께 저장). 결과 애니메이션은 그림에 나와 있습니다. 81.
쌀. 80. 프레임 복제 후 애니메이션 창 상태
쌀. 81. 완성된 애니메이션
모두 안녕! 오늘은 프로그램의 특징에 대해 설명하려고 합니다. 어도비 일러스트레이터, 플러시 기능과 비교합니다. 이것은 뼈 프로그램에 대한 전반적인 분석이 아니라 이 프로그램에서 발견한 흥미로운 칩에 대한 설명입니다. 하나의 게시물에 모든 것을 담기 위해 공부하면서 정보를 하나씩 수집했습니다. 나는 경험이 풍부한 일러스트레이터 사용자가 아니라는 것을 즉시 인정해야 합니다. 지난 6개월 동안만 그림에 사용했습니다(그 전에는 모든 것을 플래시로 그렸습니다). 많은 사람들이 일러스트레이터가 복잡하고 항상 직관적이지는 않다고 불평합니다. 어느 정도 플래시 이후에 이 프로그램이 어렵다는 데 동의합니다. 그러나 여기서 가장 중요한 것은 그만두는 것이 아니라 공부를 계속하는 것입니다. 그리고 몇 주 후에 생각이 떠오릅니다. 이전에 그것 없이는 어떻게 관리 했습니까!
그래서 제가 일러스트레이터에 대해 좋아했던 점과 플래시에 없는 점을 스스로 찾았습니다.
1. 가장 간단하지만 동시에 필요한 것부터 시작하겠습니다. 플래시에서 원 안에 물체를 배열해 보십시오. 이전에는 데코 도구, 그러나 제거되었으며 불필요한 것으로 간주되었습니다. 우리는 손으로 하는 것이 더 재미있을 것이라고 결정했습니다. Illustrator에는 다음과 같은 기능이 있습니다. 효과 - 왜곡 및 변형 - 변형.
모든 것이 빠르고 간단하며 설정에서 값(개체 간 거리, 사본 수)을 직접 설정합니다.
2. 지그재그
훨씬 더 간단하지만 그럼에도 불구하고 유용한 것입니다. 사소한 것처럼 보이지만 플래시에서는 손으로 그려야 합니다. 일러스트레이터에서는 몇 초면 됩니다.
3. 물체의 변형(Warp)
플래시에는 이와 같은 것이 없습니다. 아래 예에서는 간단한 도형을 변형하는 2가지 방법(Effect - Warp - Arc / Fish)만 보여주었습니다. 실제로는 15개가 있습니다. 최신 버전프로그램들.
4. 모서리 자동 라운딩(Round Corners)
수동으로 수행할 수 있습니다. 그래픽 개체에서 모서리(모든 모서리)에서 선택하면 흰색 점과 둥근 선 기호가 나타납니다. 마우스를 드래그하여 취향에 맞게 조정하십시오.
그러나 이것은 모양에만 적용되며 연필 선은 약간 다릅니다. 라운딩 효과를 적용합니다( 효과 - 스타일화 - 둥근 모서리). 출력에서 동일한 결과를 얻습니다.
5. 거칠게
이 효과는 단순한 모양( 효과-왜곡 및 변형-거칠게). 결과적으로 저 폴리 3D 모델과 유사한 것을 얻습니다. 멋지다고 생각합니다 :) 그리고 가장 중요한 것은 매우 간단합니다.
6 퍼커&블로트(당겨 팽창)
아래 그림의 예:
7. 양식 확장(오프셋 경로)
플래시에는 확장 채우기(채우기 확장) 기능이 있는데 일러스트레이터와 달리 연필 선으로는 전혀 작동하지 않습니다.
8. 브러시(아트 브러시, 패턴 브러시, 스캐터 브러시)
예를 보려면 아래 그림을 참조하십시오.
9. 텍스처 브러시(텍스처 브러시)
또한 일러스트레이터에는 내가 쓴 많은 텍스처 브러시가 있으며 새 버전의 플래시에서 어떻게 나타나는지 설명합니다. Adobe Animate에서 브러시 사용이 매우 느린 것으로 나타났습니다. 그게 다야 :(
10. 이게 꼼수인지는 모르겠지만 이름이 웃기는 브러쉬에 집중하고 싶다 얼룩브러시. 도구 모음에 있으며 사용하기 매우 좋은 브러시입니다. 그것은 많은 설정을 가지고 있으며 평소보다 더 좋아합니다. 그 장점을 말로 설명하기는 어려우니 한 번 해보는 것이 좋다.
10. 그리드로 분할
또 다른 유용한 기능은 Split to Grid(Object-Path-Split to Grid) 기능으로 형태를 균등하게 분할할 수 있습니다. 이것은 우리에게 무엇을 상기시켜 줍니까? 맞습니다-고층 건물의 창문입니다. 저는 예를 들어 도시 풍경을 그리는 데 멋진 것입니다.)
다른 것 유용한 도구, 아마도 첫 번째 릴리스 이후 일러스트레이터로 제공됩니다. 이를 통해 예를 들어 나무 질감을 만들 수 있습니다.
12. 이동(오른쪽 - 변형 - 이동)
주어진 거리만큼 개체를 오프셋합니다. 원하는 경우 선택한 개체에서 가로/세로로 원하는 거리에 배치할 복사본을 즉시 만들 수 있습니다. 이전 버전의 플래시에는 플러그인이 있었습니다. 이 기능. 불행히도 나는 그 이름을 기억하지 못한다.
일러스트레이터( 개체 패턴 만들기). . CC 2015의 일러스트레이터 버전에서는 모든 것이 자동화되어 있습니다. 다양한 설정을 통해 몇 가지 그래픽 요소만으로 수십 가지 변형 패턴을 만들 수 있습니다. 이전 버전의 프로그램에서는 지금까지 플래시에서와 같이 모든 작업을 수동으로 수행해야 했습니다.
(참고 - 패턴은 구문 분석 기능( 개체 확장 모양).
14. 오브제 모자이크(모자이크)
기존 이미지를 기반으로 색상 팔레트를 만듭니다. 마음에 드는 그림을 일러스트레이션으로 가져온 다음(열기), 개체 - 개체 모자이크 만들기. 설정에서 높이와 너비의 분할 빈도를 지정합니다.
그리고 출력에서 다음을 얻습니다.
15.블렌드(믹싱)
그라디언트를 만드는 데 사용됩니다. 예를 들어 그림과 같이 단계별 전환을 만들 수 있습니다. 자주 사용한다고 말할 수는 없지만 누군가에게는 유용할 수 있습니다. 간단한 배경 그림을 만들 때 사용할 수 있을 것 같습니다.
이 도구는 개체를 복제하는 데에도 사용할 수 있습니다. 두 개체를 서로 떨어진 곳에 배치하고 혼합 옵션을 적용하고 단계 수(복제된 개체 수)를 선택합니다.
16. 모양 도구 만들기.프리미티브 작업에 매우 편리한 것입니다. 순식간에 나에게 보였던 것처럼 덜 편리합니다.
Alt를 누른 상태에서 선택한 세그먼트를 클릭하면 세그먼트가 삭제됩니다. 선택한 여러 영역-연결 위로 마우스를 끌기만 하면 됩니다.
추가 - 자동으로 자르고 연결하는 데 도움이 되는 도구입니다. 선택한 양식. 저는 그다지 편리하지 않고 더 자주 사용합니다 짓다모양도구.
(대지)
18. 사용자 지정 도구 패널
자신만의 도구 모음을 만들고 불필요한 도구 모음을 버리고 사용하는 도구 모음만 선택할 수 있는 기능.
Flash에서 아트보드, 즉 장면( 장면 1,2,3..)는 별도로 위치하며 이들 사이를 전환해야 합니다(Shift + F2). 일러스트레이터에서는 모두 눈앞에 배치할 수 있습니다. 동일한 도면의 여러 버전을 만들 때 모든 옵션이 비교를 위해 눈앞에 있도록 편리합니다.
19. 그래픽 스타일이 있는 아이소메트릭
그리고 마지막으로 그래픽 스타일( 그래픽 스타일). 이것이 어떻게 이루어 졌는지 다음에 쓸 것입니다.
일러스트레이터가 플래시와 공통적으로 가지고 있는 것은 객체를 심볼(심볼)로 저장하는 기능이며 이 심볼도 문제 없이 플래시로 전송할 수 있습니다(플래시에서 .ai 파일 열기, 가져오기 - 스테이지로 가져오기).
일러스트레이터의 기호는 플래시와 동일한 속성을 가집니다.
그리고 결국 일러스트레이터에서 플래쉬보다 못하다고 생각하는 것을 쓰겠습니다. 예, 예, 있습니다. 그리고 이것은 채우기 도구( 페인트 통). 일라에서 아무리 익숙해지려고 해도 플래시가 더 편합니다.
내 메모가 도움이 되었거나 직접 추가하고 싶다면 의견을 환영합니다! 모두에게 행운을 빕니다;)
애니메이션으로 생명을 불어넣고 싶은 아이콘이 한두 개 있습니다. 어디에서 시작하시겠습니까? SVG 파일, Illustrator CC 및 After Effects CC가 있지만 솔루션을 찾을 수 없다고 가정해 보겠습니다.
이 기사에서는 Illustrator에서 SVG 파일을 준비하고 After Effects CC로 가져오는 것을 포함하여 SVG 파일에 쉽게 애니메이션을 적용하는 방법을 보여드리겠습니다. 또한 모양 레이어로 변환하고 움직임을 추가하는 방법도 설명합니다. 마지막으로 내보내기 및 렌더링에 대해 이야기해 보겠습니다.
작업의 최종 결과입니다.
이제 가장 흥미로운 부분인 이미지 애니메이션 방법에 대해 알아보겠습니다.
Illustrator에서 SVG 파일 준비
Adobe Illustrator CC에서 SVG 파일을 열어 시작하겠습니다. Week Of Icons에서 무료로 제공되는 작은 자동차 아이콘에 애니메이션을 적용하겠습니다.
파일을 연 후 모든 객체를 그룹 해제하고 레이어로 분리해야 합니다. 수동으로 수행하거나 사용할 수 있습니다. 레이어로 릴리스(시퀀스)프로세스 속도를 높이려면. 파일을 After Effects로 가져오기 전에 Illustrator 파일 형식으로 저장해야 합니다.
소중한 시간을 낭비하지 않기 위해 Release to Layers(시퀀스)를 사용하여 개체를 그룹 해제할 수 있습니다. After Effects CC에서 파일 가져오기 및 구성
이제 After Effects CC로 가져올 준비가 되었습니다. 단축키를 사용하자 Ctrl+I(윈도우)또는 커맨드+I (맥)대화 상자를 로드하려면 가져오기 파일, 또는 이동 파일 > 가져오기 > 파일…같은 위치에서 준비한 Illustrator CC 파일을 선택하고 클릭 수입.선택한 파일의 이름과 함께 작은 대화 상자가 나타납니다. 선택하다 구성라는 드롭다운 목록에서 가져오기 종류.
더 빠른 길파일 가져오기 - 프로젝트 패널에서 열 위치를 두 번 클릭합니다. 타임라인 패널에서 새로운 컴포지션을 볼 수 있습니다. 더블 클릭합니다. 이제 이름 왼쪽에 주황색 아이콘이 있는 Illustrator CC 레이어가 표시됩니다.
사업을 시작하기 전에 이 모든 레이어를 모양 레이어. 우리는 그들을 모두 선택해야합니다 Ctrl+A/커맨드+A또는 수동으로 Shift + 왼쪽 마우스. 그런 다음 레이어를 마우스 오른쪽 버튼으로 클릭하고 선택하십시오. 만들기 > 벡터 레이어에서 모양 만들기.
이제 새 레이어가 선택되었으므로 Illustrator CC 레이어 위의 패널 상단으로 드래그한 다음 방해가 되지 않도록 Illustrator CC 레이어를 삭제합니다.
After Effects CC에서 Illustrator CC 레이어를 모양 레이어로 변환 필수는 아니지만 각 레이어에 적절한 이름 및/또는 색상을 지정하는 것이 중요합니다. 이렇게 하면 키프레임에 집중할 때 보다 효율적으로 작업할 수 있습니다. 아래 예에서 레이블 색상은 해당 레이어의 채우기와 거의 일치합니다.
적절한 이름, 색상, 레이블 및 위치로 모양 레이어에 레이블을 지정하는 것은 매우 실용적입니다. 키보드 단축키를 사용하여 설정 구성 Ctrl+K/명령+K또는 컴포지션 > 컴포지션 설정…컴포지션 설정에서 너비, 높이, 프레임 속도 및 너비, 높이, 프레임 속도 및 기간에 대한 기간을 선택해야 합니다. 이 프로젝트에서는 애니메이션을 부드럽게 유지하기 위해 60fps를 선택했습니다.
~에 이 순간모든 것이 준비가 된 것 같지만 한 가지 더 해야 할 일이 있습니다. 특정 레이어를 함께 그룹화하여 그들의 움직임이 우리가 제어할 수 있는 기본 레이어와 동기화되도록 해야 합니다. 이 방법은 육아.
Pick Whip을 사용하여 상위 레이어를 여러 레이어에 할당합니다. 이 예에서는 바람막이, 신체 부위, 나무 및 로프와 같이 덜 중요한 레이어(하위 레이어)를 기본 바디 레이어(부모 레이어)에 할당했습니다. 이를 통해 상위 레이어를 사용하여 전체 자동차(바퀴 제외)의 위치와 회전을 제어할 수 있었습니다.
애니메이션 제작
나는 차가 바위에 부딪혀 공중에 잠시 매달려 있기를 원했습니다. 나는 또한 나무가 위아래로 움직이고 트렁크가 열리기를 원했습니다. 나는 돌, 자동차, 바퀴를 만드는 것으로 시작했습니다. 그런 다음 가장 큰 장애물을 극복할 시간이었습니다. 작업이 완료되면 랙과 로프와 같은 작은 세부 작업을 시작했습니다.
애니메이션을 설명하는 스케치 첫 번째 단계는 바위 요소 또는 레이어를 만드는 것이었지만 다른 레이어를 추가하기 위해 Illustrator CC로 돌아가는 대신 After Effects CC에서 펜 도구를 사용했습니다. 이를 통해 작은 돌을 빠르게 디자인할 수 있었습니다.
오, 강력한 펜 도구! 트렁크는 비교적 간단한 작업이었습니다. 차량 뒷부분에 설치하고 왼쪽 하단 꼭지점에 앵커 포인트를 만들어 주었습니다. Pick Whip 을 사용하여 신체의 상위 레이어에 할당했습니다. 두 번째 단계는 회전 효과를 주어 자동차의 튀는 순간을 더욱 사실적으로 표현하는 것이었습니다.Lottie 모바일 라이브러리와 결합한 Bodymovin.
추신내 Illustrator CC 및 After Effects CC 파일을 찾을 수 있습니다.
아이콘 세트는 에서 무료로 다운로드할 수 있습니다.
오늘은 평소와 다름없는 어도비 레슨일러스트레이터. 이번에는 정적인 그림이 아니라 실제 애니메이션을 만들 것이기 때문입니다. Adobe Illustrator의 도움으로 만화를 그릴 수도 있다고 상상해보세요 :)
그리고 우리는 이것을 위해 아무것도 필요하지 않습니다. 레이어의 유능한 구성 및 각 레이어가 애니메이션 프레임으로 변환되는 swf 형식으로 최종 작업 내보내기. 오늘의 튜토리얼에서는 레트로 무비 스타일의 카운트다운 애니메이션을 그려보겠습니다. 출력은 이와 동일한 카운트다운이 포함된 플래시 동영상이어야 합니다.
가장 먼저 해야 할 일은 향후 애니메이션에 필요한 모든 요소를 그리는 것입니다. 이를 위해 별도의 문서에 두 개의 필름 프레임 위치, 별도의 섹터로 절단되는 참조용 원, 고대의 효과를 추가하기 위한 질감 및 세로 스크래치, 모든 숫자와 비문을 만들었습니다.
만화의 모든 부분이 준비되면 애니메이션 자체 제작을 시작할 수 있습니다. 편의를 위해 이 작업은 새 문서에서 수행하는 것이 가장 좋습니다. 이 경우 레이어는 애니메이션 프레임 역할을 합니다. 그리고 첫 번째 레이어에서 필름 프레임을 복사하기만 하면 됩니다. 작업 영역 중앙에 배치합니다.
이제 두 번째 레이어를 만들고 가장자리의 구멍이 이동하여 만들어지는 필름 프레임을 복사합니다. 또한 중심을 잡아야 합니다.
이 두 레이어에서 이미 움직이는 영화의 애니메이션을 얻을 수 있습니다. 그러나 나중에 훨씬 더 많은 레이어가 필요합니다. 따라서 처음 두 레이어를 선택하고 패널 옵션으로 이동하여 레이어를 복사합니다.
비슷한 방식으로 움직임을 정의하는 필름 프레임으로 12개의 레이어를 축적해야 합니다.
이제 전체 레이어가 있고 모두 표시됩니다. 상위 레이어가 하위 레이어를 차단한다는 점에서 작업에 그다지 편리하지 않습니다. 따라서 레이어 이름 왼쪽의 눈 아이콘을 클릭하여 일부 레이어를 끌 수 있습니다. 모든 레이어를 한 번에 끄거나 켜려면 Alt 키를 누른 상태에서 눈 아이콘을 클릭합니다. 레이어를 켜고 끄면 향후 애니메이션의 특정 프레임에 무엇이 있는지 정확히 볼 수 있습니다. 이제 필름 움직임에 약간의 떨림을 추가하려면 수신된 프레임을 약간 이동해야 합니다. 다른 측면. 이렇게 하려면 현재 작업할 레이어만 켠 다음 원하는 방향으로 몇 픽셀씩 프레임을 이동합니다.
모든 레이어를 살펴보고 약간의 변화를 추가하면 움직이는 원의 애니메이션 생성을 시작할 수 있습니다. 이렇게 하려면 만화 부품 문서에서 섹터로 구성된 원을 복사하여 필름 프레임 상단의 첫 번째 레이어에 배치합니다.
원에서 선택 항목을 제거하면 하나의 전체처럼 보입니다. 이것이 바로 우리에게 필요한 것입니다.
그러나 별도의 섹터로 구성되어 있기 때문에 색상을 변경하여 매우 빠르고 쉽게 애니메이션을 만들 수 있습니다. 이렇게 하려면 이 원을 두 번째 레이어에 복사하고 첫 번째 섹터를 더 밝게 만듭니다. 필름이 움직이는 동안 흔들리는 것을 기억하므로 원을 프레임 중앙에 정확히 놓을 필요는 없습니다. 그것을 눈에 두십시오.
마찬가지로 이전보다 한 섹터 더 밝은 색상으로 페인팅하면서 각 다음 레이어에 원을 복사해야 합니다. 이 12개의 레이어가 함께 채워지는 원과 함께 영화의 움직임에 대한 애니메이션을 형성합니다.
다음으로 레이어에 텍스처를 추가해야 합니다. 첫 번째 레이어를 켜고 소스 파일의 텍스처를 예비 부품과 함께 복사합니다.
그런 다음 다음 레이어를 차례로 켜고 거기에 동일한 텍스처를 복사합니다. 프레임마다 다르게 보이도록 하려면 90도 회전하면 됩니다. 짐작하셨겠지만 12개 프레임 모두에 텍스처를 추가해야 합니다.
이미 복사하는 데 지쳤다면 기쁘게 해드릴 수 있습니다. 남은 것이 거의 없습니다. 가장 어려운 부분은 끝났습니다. 수직 흠집과 거의 모든 것을 추가하는 것이 남아 있습니다. 이렇게하려면 다시 원본 스크래치를 복사하여 여러 레이어의 임의 위치에 배치하십시오. 제 경우 스크래치는 딱 두 겹만 나타납니다.
이제 영화 애니메이션의 주요 주기가 준비되었으므로 숫자를 추가해야 합니다. 3에서 1에 Go!!!라는 단어를 더한 것이므로 더 많은 레이어가 필요합니다. 12 개가 아니라 48 개입니다. 이렇게하려면 영화 애니메이션으로 기성품 레이어 사본을 3 개 더 만들어야합니다.
그리고 모든 것이 간단합니다. 첫 번째 레이어를 켜고 거기에 숫자 3을 넣으십시오.
그런 다음 원 애니메이션이 끝날 때까지 이 그림을 다음 레이어에 복사해야 합니다. 원이 다시 완전히 채워지는 다음 레이어 사본에 도달하면 숫자 2를 입력해야 합니다. 같은 방법으로 1번을 원하는 레이어에 복사합니다. 그리고 Go!!! 레이블의 최종 레이어에 도달하면 레이블을 원하는 레이어에 복사하기 전에 원을 삭제하기만 하면 됩니다.
애니메이션이 전부입니다. 여기서 가장 중요한 것은 혼동하지 않는 것입니다. 레이어에 편리한 이름을 지정할 수 있지만 너무 게을렀습니다 :) 완료되면 눈 아이콘을 클릭하여 모든 레이어를 다시 켜십시오.
내보내기 설정 창에서 다음으로 내보내기: AI 레이어를 SWF 프레임으로 설정해야 합니다. Illustrator 레이어를 애니메이션 프레임으로 바꾸는 것이 이 옵션입니다. 다음으로 고급 버튼을 클릭합니다.
열 예정이다 추가 세팅. 여기에서 프레임 속도를 설정해야 합니다. 나는 초당 12 프레임을 가지고 있습니다. 루핑 확인란은 애니메이션 순환을 담당합니다. 그녀 덕분에 동영상이 원을 그리며 재생됩니다. 레이어 순서: 상향식 옵션은 일러스트레이터 레이어를 패널의 아래에서 위로 렌더링합니다. 이것이 바로 우리가 애니메이션을 만든 방법입니다.
결과적으로 애니메이션과 함께 플래시 무비를 얻습니다.
이제 당신은 그것을 참조하십시오 간단한 애니메이션 Adobe Illustrator에서 작업하는 것은 언뜻 보기에 그리 어렵지 않습니다.
그러나 긴 비디오나 대화형 응용 프로그램을 만들려면 여전히 사용하는 것이 좋습니다. 어도비 플래시또는 다른 플래시 편집기. 예를 들어, 나는 이 고양이를 오래된 매크로미디어 플래시직장에서 파낸 것.
또한 최근에는 애니메이션을 만드는 데 HTML5 및 CSS3이 점점 더 많이 사용되고 있습니다. 주어진 코드지원 최신 브라우저플래시 플레이어를 사용할 필요가 없습니다.
로마 일명 dacascas특히 블로그에
새로운 소식을 놓치지 않도록 뉴스레터를 구독하세요.
체재 플래시 파일(SWF) 기반 벡터 그래픽웹용 확장 가능하고 컴팩트한 그래픽용으로 설계되었습니다. 이 파일 형식은 벡터 그래픽을 기반으로 하므로 개체는 모든 해상도에서 이미지 품질을 유지하며 애니메이션 프레임을 만드는 데 이상적입니다. Illustrator에서는 레이어에 개별 애니메이션 프레임을 만든 다음 이미지 레이어를 웹 사이트에서 사용할 개별 프레임으로 내보낼 수 있습니다. 당신은 또한 정의할 수 있습니다 기호 Illustrator 파일에서 애니메이션의 크기를 줄입니다. 내보낼 때 각 심볼은 SWF 파일에서 한 번만 정의됩니다.
내보내기 명령(SWF)
애니메이션 및 비트 압축에 대한 대부분의 제어 기능을 제공합니다.
단편화된 레이아웃에서 SWF와 비트맵 형식의 혼합에 대해 더 많은 제어 기능을 제공합니다. 이 명령은 내보내기(SWF) 명령보다 적은 이미지 옵션을 제공하지만 가장 최근에 사용된 내보내기 명령 옵션을 사용합니다( 참조).
SWF로 저장하기 위해 객체를 준비할 때 다음 지침을 염두에 두십시오.
사용하여 앱 장치 Central 앱에서 Illustrator 그래픽이 어떻게 보이는지 확인할 수 있습니다. 플래시 플레이어다양한 핸드헬드 장치에서.
Illustrator 그래픽 삽입
Illustrator에서 만든 아트워크를 빠르고 쉽게 복사하고 붙여넣을 수 있습니다. 플래시 애플리케이션.
Illustrator 그래픽을 Flash 응용 프로그램에 붙여넣을 때 다음 특성이 유지됩니다.
스트로크 두께
그라디언트의 정의
텍스트(OpenType 글꼴 포함)
관련 이미지
혼합 모드
윤곽과 모양
또한 Illustrator 및 Flash는 그래픽을 붙여넣을 때 다음 기능을 지원합니다.
Illustrator 아트워크에서 전체 최상위 레이어를 선택하여 Flash에 붙여넣으면 레이어와 해당 속성(가시성 및 차단)이 유지됩니다.
RGB 이외의 Illustrator 색상 형식(CMYK, 그레이스케일 및 사용자 지정 형식)은 Flash에서 다음으로 변환됩니다. RGB 형식. RGB 색상일반적인 방법으로 삽입합니다.
Illustrator 아트웍을 가져오거나 붙여넣을 때 다양한 옵션을 사용하여 특정 효과(예: 텍스트에 의한 그림자)를 Flash 필터로 저장할 수 있습니다.
Flash는 Illustrator 마스크를 저장합니다.
Illustrator에서 SWF 파일 내보내기
Illustrator에서 내보낸 SWF 파일은 Flash에서 내보낸 SWF 파일과 품질 및 압축이 동일합니다.
내보낼 때 최적의 출력을 위해 미리 정의된 다양한 스타일 중에서 선택하고 여러 대지가 사용되는 방식, 문자, 레이어, 텍스트 및 마스크가 변환되는 방식을 지정할 수 있습니다. 예를 들어 Illustrator 심볼을 동영상이나 그래픽으로 내보내거나 Illustrator 레이어에서 SWF 심볼을 만들도록 선택할 수 있습니다.
Illustrator 파일을 Flash 애플리케이션으로 가져오기
Illustrator에서 전체 레이아웃을 만든 다음 한 번에 Flash로 가져오려면 Illustrator 기본(AI) 형식으로 아트웍을 저장하고 파일 > 작업 영역으로 가져오기 명령을 사용하여 고화질로 Flash로 가져올 수 있습니다. 영역" 또는 " 파일"> "라이브러리로 가져오기".
Illustrator 파일에 여러 아트보드가 포함된 경우 Flash 가져오기 대화 상자에서 가져올 아트보드를 선택하고 해당 아트보드의 각 레이어에 대한 설정을 지정합니다. 선택한 대지의 모든 개체를 로 가져옵니다. 플래시 프로그램단일 레이어로. 동일한 AI 파일에서 다른 대지를 가져오면 해당 대지의 개체를 새 레이어로 Flash에 가져옵니다.
Illustrator 아트웍을 AI, EPS 또는 PDF 파일로 가져올 때 Flash는 붙여넣을 때와 동일한 특성을 유지합니다. 그래픽 개체일러스트레이터. 또한 가져오는 Illustrator 파일에 레이어가 포함된 경우 다음 방법 중 하나를 사용하여 가져올 수 있습니다.
Illustrator 레이어를 Flash 레이어로 변환합니다.
Illustrator 레이어를 Flash 프레임으로 변환합니다.
모든 Illustrator 레이어를 하나의 Flash 레이어로 변환합니다.