Home Design Photoshop 을 이용한 긴 그림자 효과 Flat Long Shadow Effect

Photoshop 을 이용한 긴 그림자 효과 Flat Long Shadow Effect

전 세계 디자이너들 사이에서 가장 최신의 디자인 트렌드인 flat long shadow로, 웹 디자이너들 flat design에 사용한다.
flat style design은 텍스처, 그림자, 그라데이션이 없는 디자인을 의미하지만 매우 효과적이고 날카로운 디자인 스타일이다.

inline ad

Flat Design은 모바일 웹의 단순성을 높이고 파일 크기를 줄이기 위해 만들어졌으며 현재에도 많이 이 디자인을 사용하고 있습니다.

이 디자인 효과를 photoshop 에서 매우 쉽게 만들수 있는데요 action 을 사용하여 flat long shadow를 만들어보겠습니다.
제 블로그 썸네일 이미지도 이것을 사용하여 간편하게 만들고 있습니다.

Flat Long Shadow Effect 만드는 방법

아래의 파일을 받아서 포토샵 action 폴더에 넣어두시면 되요. 경로는 프로그램 버전마다 상이해서 XXXX 로 적어두었습니다.

경로는 C:\Program Files\Adobe\Adobe Photoshop CC XXXX\Presets\Actions

액션파일 다운로드

Long_shadow.atn

첫번째로 캠퍼스에 컬러를 입히고 텍스트를 중앙으로 위치했습니다. 여기에서 사용한 폰트는 S-Core Dream 이라는 폰트를 사용했습니다.

액션파일 import

Action Tab 에서 Load Actions 으로 파일을 불러옵니다.

저는 포토샵을 켜둔 상태에서 action 파일을 넣어서 Load Actions 로 해서 열었구요 포토샵을 실행하기 전에 넣어두셨다면 action 리스트에서 확인하실 수 있을거에요.

액션파일 실행

Load Actions 을 선택하시면 Long Shadow 라는 action 이 불려와지구요.
아래 그림처럼 Long shadow 45d 를 선택해서 action 을 실행주시면 됩니다.

텍스트가 마구마구 늘어나면서 일을 하고 있네요. 레이어가 막 늘어나서 컴퓨터가 뻗지 않을까 생각될 수도 있지만 끝이 날때까지 기다려보았습니다.

Long shadow effect 완성

짜잔~ 계속 늘어났던 레이어는 마지막에는 하나의 레이어로 합쳐주면서 동시에 그림자 영역에는 white color 로 채워져있네요. 거기에 color Overlay 라는 이펙트가 들어가 있어요. 여기에서 shadow의 Opacity 를 조절하면서 자기가 원하는 농도의 그림자를 조절하시면 원하시는 결과물을 얻을 수 있을 거에요.

action 에는 4가지 종류가 있고 다 실행하지 않았는데 아마 faded 라는 건 그림자가 점점 옅어지는 효과가 아닐 지 예상해보구요.

120d 는 반대쪽으로 그림자가 이동된 것을 확인해볼 수 있습니다.

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...