LuckyTemplates 치트 시트를 위한 Adobe Illustrator CC

Illustrator 사용 방식에서 가장 극적인 변화 중 많은 부분이 벡터 이미지를 웹으로 번역하는 영역에서 일어나고 있으며, 과소 평가된 SVG 형식은 그 과정의 핵심 링크입니다. SVG 파일은 벡터 아트웍의 소중한 확장성 기능을 유지하며 웹 사이트 및 웹 개발 환경에서 거의 보편적으로 지원됩니다. 웹용 벡터 아트웍을 준비할 때 Illustrator의 표준 효과를 피하고 대신 SVG 필터를 사용하는 것이 중요합니다.

Illustrator는 적절하지만 최소한의 SVG 필터 세트와 함께 제공되지만, 여기에 SVG 필터를 찾고 추가하는 방법과 자신만의 SVG 필터를 만들기 위한 리소스에 대한 몇 가지 팁이 있습니다. 웹 및 앱 개발자와 함께 일하는 사람들의 경우 SVG 코드 전달에 대한 치트 시트를 확인하여 삶을 더 쉽고 생산적으로 만드십시오.

Illustrator에서 SVG 필터를 적용하는 방법

Illustrator에서 화면용 SVG 파일을 만들고 그림자 효과와 같은 효과를 적용하려면 SVG 필터로 적용해야 합니다. 그렇게 하면 SVG 파일이 왜곡 없이 무한한 확장성을 유지할 수 있습니다.

다음 단계에서는 Illustrator의 그래픽에 SVG 필터를 적용하는 방법을 안내합니다.

필터를 적용할 개체를 선택합니다.

효과 → SVG 필터를 선택하십시오.

표시되는 목록에서 필터를 선택합니다.
대부분의 필터에는 설명적인 이름이 있습니다. 예를 들어 이름에 그림자 가 있는 것은 그림자 가 있고 이름에 가우시안 이 있는 것은 가우시안 흐림입니다. 워크플로는 약간 이상하고 원형 교차로이지만 필터를 적용하는 데 사용할 수 있는 모든 옵션에 액세스하려면 먼저 필터를 선택해야 합니다.

선택한 필터를 변경하려면:

• 필터가 적용된 개체를 선택한 상태로 유지하고 창 → 모양을 선택하여 모양 패널을 엽니다.
• 모양 패널에서 패널의 채우기 섹션에 나타나는 SVG 필터를 클릭합니다. SVG 필터 적용 패널이 열립니다.
• SVG 필터 적용 패널에서 적용된 필터를 변경합니다.
• 필터가 어떻게 보이는지 보려면 그림과 같이 미리 보기 확인란을 선택합니다.
  

필터를 설정한 후 SVG 필터 적용 패널에서 확인을 클릭합니다.

Illustrator에 SVG 필터를 추가하는 방법

Illustrator의 SVG 필터 세트는 미니멀하지만 자신만의 필터를 디자인하거나 온라인 소스에서 미리 패키지된 SVG 필터 세트를 다운로드하여 개선할 수 있습니다. 필터 디자인에는 코딩이 포함되지만 HTML에 익숙하다면 가능합니다. SVG 필터 생성을 위한 w3Schools 의 튜토리얼을 추천합니다 . 또는 온라인 필터 세트를 구입, 심지어에서 무료로 SVG 필터의 멋진 세트를 찾을 수 있습니다 Creatingo .

SVG 필터를 구입하거나 만든 후 Illustrator에 설치하는 방법은 다음과 같습니다.

효과 → SVG 필터 → SVG 필터 가져오기를 선택합니다.

열리는 대화 상자에서 무료로 만들거나 다운로드한 SVG 필터 파일로 이동하여 두 번 클릭합니다.
찾고 있는 파일은 SVG 파일이어야 합니다(여러 필터가 단일 SVG 파일에 번들로 제공됨).
이제 SVG 필터 하위 메뉴에서 새 필터를 사용할 수 있습니다.

효과 → SVG 필터를 선택하여 선택한 개체에 새 필터를 적용하십시오.

Illustrator에서 개발자에게 SVG 코드를 전달하는 방법

종종 Illustrator에서 만든 SVG 그래픽은 게임 디자이너, 애니메이터, 인포그래픽 또는 기타 출력으로 전달되어 개발자가 SVG 그래픽 뒤에 있는 코드로 작업하게 됩니다. 일러스트레이터는 해당 코드를 만드는 방법을 알 필요는 없지만 코드를 가져와 개발자에게 넘기는 방법을 알아야 할 수도 있습니다. 방법은 다음과 같습니다.

SVG 그래픽을 코드로 내보내는 경로는 Illustrator의 저장 기능을 통해 실행됩니다. 저장 메뉴에는 파일을 SVG 코드로 내보내는 옵션(찾기가 쉽지 않음)이 있습니다. 몇 가지 옵션이 해당 코드가 사용되는 방식에 따라 결정되기 때문에 해당 코드를 생성할 때 화면 개발자와 실시간으로 통신하고 싶을 것입니다.

파일→저장(또는 파일을 다시 저장하는 경우 다른 이름으로 저장)을 선택합니다.

열리는 대화 상자의 형식 메뉴에서 SVG를 선택합니다.
브라우저에 표시되지 않는 압축 파일용인 SVGZ 파일 옵션은 무시하십시오.

저장을 클릭하여 SVG 옵션 대화 상자를 엽니다.

SVG 프로파일 드롭다운에서 항상 SVG 1.1을 선택하십시오. 다른 버전은 더 이상 사용되지 않습니다.

SVG 파일에 이미지를 포함하거나 링크한 경우 이미지 위치 드롭다운에서 포함을 선택합니다. 그러나 먼저 이 선택에 대해 웹 개발자와 상의하십시오.

Illustrator에서 파일을 편집할 수 있도록 하려면 Illustrator 편집 기능 유지를 선택합니다.
이 옵션을 선택하면 파일 크기가 증가하지만 편집, 업데이트 및 웹 개발자와 공유할 수 있는 단일 SVG 파일로 작업할 수 있습니다.

추가 옵션 버튼이 표시되면 클릭하여 고급 옵션에 액세스합니다. 선택합니다.
기본적으로 다양한 옵션은 다음과 같은 방식으로 속성을 정의하는 파일과 함께 CSS를 생성합니다. 이러한 CSS 속성을 정의하는 방법에 대해서는 웹 개발자 팀원에게 문의하세요.

• 프레젠테이션 속성 은 SVG 코드에 스타일을 포함합니다. 이 옵션은 가장 단순하고 기본값입니다. 웹 또는 앱 개발자와 공동 작업하지 않는 경우 사용합니다.
• 두 가지 스타일 속성 옵션은 가능한 경우 스타일을 관리하기 위해 CSS에 의존합니다.
• 스타일 요소 는 스타일 지정을 위한 클래스 스타일 선택기를 생성합니다.
• 는 사용하지 않는 스타일 포함 옵션은 코드를 생성하는 가능성이 증가 함수 값을 추가하지 않고 SVG 파일 크기.

개발자 파트너가 선택하도록 요청하지 않는 한 SVG 옵션 대화 상자 하단에 있는 5개의 확인란을 선택 취소합니다.
이러한 옵션은 고도로 전문화된 응용 프로그램을 위한 것입니다.

SVG 옵션 대화 상자에서 선택한 항목을 기반으로 SVG 코드를 생성하려면 SVG 코드 버튼을 클릭 합니다.
생성된 SVG 코드는 운영 체제의 텍스트 편집기에 표시됩니다. 운영 체제의 텍스트 편집기를 사용하여 해당 코드를 텍스트 파일로 저장하고 파일을 개발자에게 전달할 수 있습니다.

코드를 생성한 후 확인을 클릭하여 파일을 저장합니다.
Illustrator에서 이 파일을 다시 열고 편집할 수 있습니다.