뛰어난 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용 화면 캡쳐 및 녹화 프로그램

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
웹통 꼴랑모

댓글을 달아 주세요

  1. 파슬 2015.01.09 12:44 신고  수정/삭제  댓글쓰기

    이런 애니메이션들은 어떻게 만드나 싶었는데,신기하네요!강좌들 감사합니다~

    • 웹통 꼴랑모 2015.01.12 15:50 신고  수정/삭제

      안녕하세요. 파슬님~ 도움되셨다니 다행이네요. 2015년에도 웹통 많은 관심 부탁드리구요. 좋은일만 가득하세요.

Powerd by Tistory, designed by criuce
rss