워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

blank






웹페이지 로딩중.. 아이콘입니다. 애니메이션툴인 플래시나 애프터이펙트로 만들면 쉽지만 포토샵으로 만들면서 여러가지 도구의 사용법과 포토샵의 GIF애니메이션이 어떻게 만들어지는지 알아봅니다.  개선판 


1. 새문서만들어서 셰이프툴로 막대모양 그리기



포토샵 새문서만들기에서 가로세로 600픽셀 해상도는 72dpi로 새문서를 만듭니다. 스냅기능을 활성화(Ctrl+Shift+;)하고 가이드선을 그려줍니다(스냅기능이 활성화되면 가이드선이 문서의 중앙에 올때 자석처럼 달라붙는 곳이 중심). 도구모음에서 둥근 사각형툴을 선택하고 옵션바에서 2의 셰이프레이어(Shape Layers)를 선택, 3이 선택된 것을 확인하고 4에서 모서리 둥근정도를 10픽셀 입력, 5에서 색상을 검정으로 하고 6에서 7로 클릭드래그합니다.   

2. 막대모양의 회전 중심이동



화면을 확대하고 Ctrl+Alt+T키를 누르면 복사자유변형툴이 나옵니다. 1의 중심을 2로 이동하는데 1의 중심이 선택이 안될경우 Alt키를 누르고 합니다. 

3. 막대모양의 회전복사



Shift키를 누르고 마우스를 1에서 화살표방향으로 이동하면 45도에서 멈춥니다. 엔터키를 친다음 Ctrl+Shift+Alt+T키를 여섯번 눌러줍니다.


이제 Ctrl+H키를 눌러 가이드선이 안보이게 합니다. 1의 아이콘을 클릭하고 2를 클릭하여 3처럼 만듭니다(단축키 D와 X를 순서대로 눌러줌). 4의 레이어스타일 아이콘을 클릭하고 그래디언트 오버레이를 선택합니다.

4. 앵글그래디언트 오버레이



1을 클릭하면 그래디언트 에디터 창이 나옵니다. 2를 클릭하고 3부분을 클릭해서 화살표방향으로 이동하여 Location을 12가 되도록 하고 OK클릭, 5의 스타일을 앵글로 선택, 6에 각도를 77입력합니다.


Ctrl+J키를 7번 눌러주고 총 8개의 레이어를 확인합니다.


제일 하단의 세이프레이어 1을 선택하고 2의 레이어만들기 아이콘을 클릭, 4의 전경색이 흰색이 된 상태에서 Alt+Delete키를 누르면 5처럼 흰색이 입혀집니다. 그다음 레이어도 같은 방법으로 6처럼 만들고 마지막까지 해줍니다. 셰이프레이어와 흰색배경이 한쌍이 되는겁니다. 배경이 없이도 만들 수 있으나 GIF파일은 배경이 없으면 이미지가 깨지는 현상이 나타나서 화질이 안좋습니다. 어떤 색이든 배경이 있도록 만드는 것이 좋습니다.


배경이 없이 투명하게 만들었을경우의 이미지입니다.


1의 셰이프 레이어를 선택하고 2의 눈아이콘을 클릭하고 화살표 방향으로 드래그하여 위에있는 모든 레이어들은 안보이도록 합니다. 3의 그래디언트 오버레이를 더블클릭해서 레이어스타일 창을 열고 4의 각도를 16입력하면 10처럼 검정막대가 이동합니다. 이번에는 6과 7레이어의 눈아이콘을 켜주고 8을 더블클릭해서 레이어스타일 창을 열고 9를 클릭드래그하여 아래로 내려 각도를 변경합니다. 그러면 10의 검정막대가 11의 위치로 오는데 12부분을 보면서 앵글그래디언트가 막대를 가려지지 않도록 각도를 조절합니다.
이런식으로 세번째 레이어쌍도 각도를 조절합니다. 세번째는 -21, 네번째는  -65, 다섯번째는 -104, 여섯번째는 -156, 일곱번째는 +164, 마지막은 +119입니다. 

5. 레이어쌍의 병합



한쌍의 레이어를 Ctrl키를 누르고 클릭하여 선택한 다음 Ctrl+E키를 누르면 3처럼 병합됩니다. 위에서부터 차례대로 병합해줍니다.


메뉴에서 윈도우-애니메이션을 클릭하면 하단에 프레임창이 나옵니다. 1을 클릭하여 No delay를 선택, 2를 클릭하여 Forever를 선택한 후 3을 클릭해서 나오는 메뉴에서 4의 Make Frames From Layers를 클릭하면 레이어창에서 만든 이미지들이 5에서 프레임으로 만들어집니다. 6의 플레이버튼을 클릭하면 애니메이션이 됩니다.


사이즈를 줄여서 저장하기위해 Ctrl+Shift+Alt+S를 누릅니다.

 
1에서 50픽셀 입력하고 탭키를 누르면 2의 사진이 축소됩니다. 이화면에서도 3을 변경하거나 4의 플레이버튼을 클릭해서 시험할 수 있습니다. Save버튼을 클릭하여 저장하고 윈도우탐색기에서 파일을 우클릭하고 연결프로그램을 웹브라우저를 선택하면 인터넷화면에서 실행되는 것을 확인할 수 있습니다. 애니메이션 GIF 파일은 사진보는 프로그램인 사진뷰어에서는 애니메이션이 실행되지 않고 한장의 사진으로만 나옵니다. 개선판