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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그


이미지를 보면 가까운 것은 빠르고 먼 것은 느리게 내립니다. 또한 비오는 효과 와 다르게 바람의 영향을 받아 날리는 효과도 있습니다. 눈 내리는 효과는 노이즈 필터와 블러 필터를 사용하고 흩날리는 효과는 디스플레이스 필터를 사용합니다.

샘플이미지1.zip

이미지를 가로 700픽셀로 잘라서 사용하세요.


사진을 포토샵에 열고 새 레이어를 만든 다음, Shift+백스페이스키를 눌러 50%회색을 채워줍니다.


D키를 눌러 색상도구를 검정-흰색의 기본색으로 하고 메뉴에서 필터-노이즈-노이즈추가를 선택합니다. Amount 는 400%로 하고 3과 4에 체크합니다.


다시 메뉴에서 필터-블러-가우시안블러를 선택하고 1의 수치를 입력하고 나옵니다.


Ctrl+L키를 눌러 레벨조정창에서 눈송이 이미지처럼 나오도록 슬라이더를 조정해줍니다.


메뉴에서 필터-기타(Other)-오프셋을 선택하고 Vertical의 슬라이더를 이동하면 경계선이 올라오면서 줄이 생깁니다. OK클릭합니다.


도장툴을 선택하고 Alt키를 누르면 커서가 2처럼 바뀝니다. 클릭하면 그부분이 복사됩니다. 줄무늬가 있는 3에 클릭하고 우측으로 드래그하면 줄무늬가 지워집니다. 눈송이처럼 생기지 않은 곳도 마찬가지로 다른 부분을 복사해서 지워줍니다.


메뉴에서 편집-패턴정의를 선택하고 이름을 입력한 다음, OK클릭합니다. 위의 검정색 바탕의 눈이미지는 이제 패턴으로 등록되었으니 필요가 없습니다. 하지만 디스플레이스맵을 만들기 위해 그냥 둡니다.


기본색이 선택된 상태에서 메뉴에서 필터-렌더-구름을 선택하면 구름효과가 적용됩니다. Ctrl+F키를 누르면 다른 형태의 구름효과가 나옵니다. 콘트라스트의 분배가 잘된 위 사진처럼 나오도록 Ctrl+F키를 계속 눌러줍니다.


메뉴에서 필터-블러-가우시안블러를 선택하고 7입력하고 나옵니다.


구름레이어를 우클릭해서 나오는 메뉴에서 레이어 복사(Duplicate Layer)를 선택하면 창이 나옵니다. 1에서 New를 선택하고 2에 displace로 이름을 입력하고 OK클릭하면 새 탭에 이미지가 나타납니다. Ctrl+Shift+S키를 눌러 psd파일로 저장합니다. 디스플레이스먼트 맵은  디스플레이스 필터를 적용하면 흑백 이미지의 명암에 따라서 이미지가 왜곡되도록하는 지도역할을 합니다. psd파일로 저장되었으니 이제 위 구름이미지도 필요없게 됩니다. 하지만 다음단계를 위해 그냥 둡니다. Delete키를 눌러 제거해도 되지만 불필요한 작업이고 레이어를 재활용합니다.


구름레이어가 선택된 상태에서 Shift+백스페이스키를 눌러 50%회색을 채워줍니다. Ctrl+J키를 두번눌러주면 회색레이어는 3개가 됩니다.


1과 2의 레이어의 눈아이콘을 꺼주고 3의 레이어를 선택하고 레이어스타일 아이콘을 클릭하여 패턴오버레이를 선택합니다. 5의 작은 세모를 클릭하고 스크롤바를 내려서 하단에서 이미 등록한 눈패턴을 선택하면 회색의 이미지가 눈패턴이 적용됩니다.


1의 레이어를 선택하고 눈아이콘을 켜준다음 레이어스타일에서 패턴오버레이를 선택하고 같은 눈패턴을 적용하는데 4의 스케일  수치를 75%로 해줍니다. 5의 레이어를 선택하고 눈아이콘을 켜준 다음 같은 방법으로 눈패턴을 선택하고 4의 스케일을 50%로 해줍니다. 그러면 세개의 레이어의 눈송이의 크기는 다 다르게 됩니다. 50%의 레이어는 작아서 멀리 있는 듯하게 보이고 75%는 좀더 가까이, 100%는 더 가까이 있는 것처럼 보이게 됩니다. 다음 단계에서 이 패턴이 적용된 레이어의 내려가는 속도를 조절할 것인데 가까이 있는 레이어는 빠르게 내려갈 것이고 중간은 좀더 느리게 멀리 있는 것은 더 느리게 내려가도록 설정할 것입니다.


1의 레이어만 눈아이콘을 켜주고 메뉴에서 윈도우-애니메이션을 선택하면 하단에 패널이 나옵니다(최신 버전은 윈도우-타임라인). 사진처럼 타임라인 형태가 아니면 2의 전환버튼을 클릭합니다. 3의 메뉴아이콘을 클릭하여 Document Settings를 선택하고 시간을 04초로, 초당프레임은 15로 설정합니다. 6의 삼각형 아이콘을 크릭하면 세부항목이 나옵니다. 7의 스타일 시계아이콘을 클릭하면 8에 키프레임이 만들어집니다. 9의 패턴오버레이 스타일을 더블클릭해서 아래사진처럼 블렌드모드를 스크린으로 하고 블렌딩옵션을 선택해서 Fill Opacity를 0으로 내려주면 사진의 검은 색은 사라지고 눈송이만 남습니다. OK클릭하고 나옵니다.

 


1의 인디케이터를 우측끝으로 이동하고 2의 패턴오버레이를 더블클릭한 다음, 창이 나오면 이미지의 상단인 3을 클릭하고 Shift키를 누른채 하단 끝까지 두번 내려줍니다. OK클릭하고 나오면 5에 키프레임이 만들어집니다. 6의 플레이버튼을 클릭하면 애니메이션이 실행됩니다. 처음에는 렌더링으로 인해 느리지만 한바퀴돌고 나면 빨라집니다. 잘못된 경우 7의 시계아이콘을 클릭하면 키프레임이 제거되고 처음부터 다시합니다.


나머지 레이어도 같은 방법으로 설정해주는데 두번째 레이어는 이미지를 클릭해서 내려줄때 한번 반만 내려줍니다. 헷갈리니 1의 눈아이콘을 꺼준 다음 2의 레이어를 선택하고 눈아이콘을 켜주고 타임라인에서 2의 레이어에 해당하는 3의 아이콘을 클릭해서 세부항목을 보이게 합니다. 4의 시계아이콘을 클릭하면 5에 키프레임이 만들어집니다. 6의 패턴오버레이를 더블클릭하여 이전처럼 스크린모드를 적용하고 Fill을 0%로 하고 OK클릭하고 나옵니다. 6의 인디케이터를 우측끝으로 이동하고 8의 패턴오버레이를 더블 클릭해서 창이 나오면 Shift키를 누르고 클릭드래그해서 한번 반만 내려줍니다. 마찬가지로 2의 레이어 눈아이콘을 꺼주고 10레이어를 선택한 다음 작업을 해줍니다. 10의 레이어는 한번 내려줘야 눈내리는 속도가 달라보이게 됩니다. OK클릭한 다음 눈아이콘들을 다 켜주고 플레이버튼을 클릭하여 애니메이션을 확인합니다. 여기까지 하면 눈은 수직으로 내려오게 되므로 현실감이 없습니다. 


1의 레이어를 선택하고 우클릭하면 메뉴가 나옵니다. 2의 스마트오브젝트로 전환을 선택하면 화면이 검게됩니다. 3에서 블렌드모드를 스크린으로 선택하면 원상복귀됩니다.


메뉴에서 필터-왜곡-디스플레이스를 선택하고 사진처럼 설정한 다음 OK클릭하면 브라우저창이 나옵니다. 저장한 displace.psd파일을 선택합니다. 같은 방법으로 나머지 레이어도 스마트오브젝트로 전환하고 블렌드모드를 스크린으로 선택해준 다음 디스플레이스 필터를 적용해주고 애니메이션을 실행시키면 처음에는 렌더링으로 인해 느리게 진행되지만 한번 돌고 나면 정상적인 속도로 애니메이션 되면서 바람에 날리는 효과가 나오게 됩니다. 가로 700픽셀로 저장하면 용량이 커지므로 작게 잘라서 저장합니다.


Ctrl+Shift+Alt+S키를 누르면 위와같은 화면이 나옵니다. 용량이 크므로 이미지가 나오는데 시간이 좀 걸립니다. 1의 용량이 12메가나 되는데 2에서 GIF를 선택하고 3에서 사이즈를 줄이고 탭키를 누르면 세로사이즈도 비율에 맞게 조정됩니다. 4에서 Forever로 선택하고 저장버튼을 클릭하여 저장합니다. 애니메이션 GIF파일은 인터넷에서만 실행되므로 윈도우 탐색기에서 파일을 우클릭하여 메뉴에서 연결프로그램을 선택하고 웹브라우저를 선택하면 인터넷창에서 실행되는 것을 확인할 수 있습니다.