뛰어난 2D 벡터 그래픽 애니메이션 SVG 강좌 소개

 

벡터 그래픽 SVG의 활용도 높은 강좌 모음

 

 

SVG는 XML 기반의 2D 벡터 그래픽 파일 형식입니다. 다른 애니메니션 방식과 가장 큰 차이점은 해상도입니다. 어떤 장치 또는 브라우저에서 픽셀에 대한 걱정 없이 동일한 해상도를 보여줄수 있어서 매우 활용도가 높습니다. 현재 SVG는 그래픽 전문 프로그램들이 많이 개발되어서 예전에 비해 빠르고 쉽게 애니메이션을 제작할 수 있습니다. SVG 그래픽 도구는 얼마전에 포스팅한 내용을 참고하시면 도움이 되실것 같구요. (하단 관련글 참조)

 

오늘은 SVG 애니메이션을 배울수 있는 몇가지 강좌를 소개해 드리겠습니다. 버턴, 애니메이션, SVG 파일 변환 등 기본적인 SVG 활용 강좌들입니다. 다만 영문으로 제작되어 내용을 쉽게 이해하기 어려운데요. 구글 크롬 자동 번역 기능을 사용하면 좀더 쉽게 이해하실 수 있습니다.

 

SVG를 이용하여 멋진 애니메이션을 만들어 보세요.~

 

 

 

 

 

 

Making a SVG HTML Burger Button

 

매우 자연스러운 움직임의 SVG 버턴을 만드는 강좌입니다.

 

 

  

 

 

 

 

 

Exporting SVG for the web with Adobe Illustrator CC

 

어도비 일러스트레이터CC에서 벡터파일을 SVG로 변환하는 강좌입니다.

 

 

 

 

 

 

 

A Look Into Scalable Vector Graphics

 

SVG의 개념과 장점 그리고 기초적인 도형을 만드는 강좌입니다.

 

 

 

 

 

 

 

 

How to Add Scalable Vector Graphics to Your Web Page

 

웹페이지에 플러그인 없이 SVG를 사용할수 있도록 설정하는 방법을 배울수 있는 강좌입니다.

 

 

 

 

 

 

 

 

Polygon feature design: SVG animations for fun and profit

 

일러스트레이터로 시각적인 애니메이션을 만드는 강좌입니다.

 

 

 

 

 

 

 

 

From Illustrator to the Web

 

일러스트레이터에서 SVG를 저장하는 방법을 설명하는 강좌입니다.

 

 

 

 

 

 

 

Export from Photoshop to SVG

 

포토샵에서 SVG 형식의 파일로 변환하는 방법입니다.

 

 

 

 

 

 

 

 

Using SVG

 

어도비 일러스트레이터에서 SVG을 사용하는 기본적인 방법을 배울수 있는 강좌입니다.

 

 

 

 

 

 

 

Animating Vectors with SVG

 

SVG와 벡터 애니메이션에 대한 이해도롤 높일수 있는 간단한 강좌입니다.

 

 

 

 

 

 

 

 

Using SVG stroke Attributes

 

SVG 스트로크 속성을 사용하여 다양한 애니메이션 효과를 배울수 있습니다.

 

 

 

 

 

 

 

Animating SVG with Clipping

 

클리핑마스크와 CSS를 사용하여 멋진 애니메이션 효과를 만드는 과정입니다.

 

 

 

 

 

 

 

 

<관련글>

2014/01/21 - SVG 애니메이션 제작 도구로 홈페이지를 역동적으로 만들어 보자

2014/11/28 - [포토샵 강좌] 활활 타오르는 불꽃을 이용한 파이어 텍스트 효과

2014/11/17 - [포토샵 강좌] 일반 이미지를 8비트 스타일의 픽셀 아트로 만들어 보자

2014/10/01 - 애플의 새로운 프로그래밍 언어 스위프트(Swift) 무료 강좌 모음

2014/08/20 - 웹제작에 유용한 홈페이지 버튼 디자인

2014/08/18 - 강력한 기능을 가진 맥 OS용 화면 캡쳐 및 녹화 프로그램

이 글을 공유하기

댓글

Designed by JB FACTORY