이미지 그림자 추가

그림자

밋밋한 제품 스크린샷도 부드러운 드롭 섀도우와 함께라면 페이지에서 떠오릅니다. 같은 샷이 그림자가 없으면 붙여 넣은 것처럼 보입니다. 이 도구는 블러 반경, 오프셋, 스프레드, 색상을 독립적으로 제어하는 커스텀 그림자를 추가하고, 그림자가 구워진 PNG를 만듭니다, 마케팅 페이지, 블로그 헤더, 문서에 바로 쓸 수 있습니다.

드롭 섀도우 추가 방법

  1. 1

    이미지 업로드

    이미 투명도가 있는 PNG나 프레임을 씌우고 싶은 제품 스크린샷에 가장 잘 됩니다.

  2. 2

    그림자 파라미터 설정

    블러 반경, X/Y 오프셋, 불투명도, 색상.

  3. 3

    캔버스 선택

    이미지 더하기 그림자에 맞춤, 또는 패딩이 있는 고정 크기.

  4. 4

    내보내기

    PNG 출력은 부드러운 그림자 가장자리를 보존합니다. JPG는 배경이 보입니다.

느낌이 맞는 그림자 설정

좋은 드롭 섀도우는 보통 사람들이 본능적으로 고르는 것보다 더 부드럽고 덜 불투명합니다.

프리셋 스타일

스타일 블러 오프셋 Y 불투명도 스프레드
미묘한 들림 (UI 카드) 12 px 2 px 8% 0
머티리얼 높이 2 8 px 2 px 15% 0
머티리얼 높이 8 24 px 12 px 20% 0
소셜 미디어 게시물 40 px 20 px 25% 0
떠 있는 히어로 이미지 80 px 40 px 30% 0
긴 그림자 (플랫 디자인) 0 px 40 px 30% 0

그림자 색상

  • 검정은 쉽지만 종종 거칠어 보입니다. 이미지의 지배색을 어둡게 채도를 낮춘 버전이 더 잘 어우러져 보입니다.
  • 25% 불투명도의 순수 검정이 보통 70% 검정보다 낫습니다.
  • 따뜻한 이미지 아래에는 따뜻한 그림자, 차가운 이미지 아래에는 차가운 그림자.

빛은 어디에

이미지에 내부적인 조명감(하이라이트가 있는 로고)이 있다면, 그림자 방향을 그 조명에 맞추세요. 일반 사진 스크린샷은 보통 위에서 내려오는 빛(그림자를 아래로 2-20 px 오프셋)에서 가장 좋아 보입니다.

PNG vs JPG 출력

  • PNG: 그림자 가장자리가 투명도로 깔끔하게 페이드합니다. 이미지를 어떤 배경에든 놓을 때 가장 좋습니다.
  • JPG: 그림자가 선택한 배경색에 평면화됩니다. 최종 배치 배경을 알 때 쓰세요.

효과 쌓기 피하기

드롭 섀도우 + 두꺼운 테두리 + 둥근 모서리 + 틴트는 산만해 보이기 시작합니다. 한두 개만 고르세요, 미묘한 테두리 + 그림자면 대개 충분합니다.

자주 묻는 질문

거의 항상 불투명도가 너무 높습니다. 20-30%로 줄이고 블러 반경을 키우세요. 대낮의 진짜 그림자는 흐릿합니다. 날카롭고 어두운 그림자는 무대 조명처럼 읽힙니다.

도구는 외부 드롭 섀도우만 만듭니다. 인셋 그림자(예: 표면에 눌린 텍스트)는 전용 베벨/엠보스 필터를 쓰세요.

기본으로 네, 캔버스가 그림자 범위를 포함하도록 확장됩니다. 그림자가 가장자리에서 잘리길 원하면(타일링이나 연속 배경용) 캔버스를 원래 크기로 고정할 수 있습니다.

네. 알파가 있는 PNG 입력은 전체 사각형이 아니라 불투명한 부분 주위에 그림자를 만듭니다. 복잡한 실루엣의 제품 컷아웃은 자연스럽고 형태에 맞는 그림자를 렌더링합니다.

관련 도구

이 도구는 다른 언어로도 제공됩니다