05.스타일, 레이어를 꾸며보자

색, 두께, 이미지, 그라데이션 등 다양한 시각 기법을 이용해 다양한 레이어를 어떻게 변형할 수 있는지 알아보겠습니다.

색 채우기

모양 레이어에 색을 넣을 수 있습니다. 체크박스를 이용해 색을 보여줄지 말지 선택할 수 있으며, color를 선택해 자세하게 색을 정할 수 있습니다. 보편적으로 많이 쓰이는 HEX 코드를 이용해서 지정이 가능하며 투명도와 블렌딩 모드를 설정할 수 있습니다.

팔레트와 HEX, RGBA를 이용해 색을 지정합니다.

이미지 채우기

이미지를 채울 수도 있습니다. 로컬 컴퓨터에 저장되어 있는 이미지를 모양 안에 넣을 수 있습니다. 이미지를 넣을 때 채우기, 맞춤, 늘이기 또는 바둑판 등으로 모양 안에 이미지가 어떻게 표시되는지를 지정할 수도 있습니다.

그라데이션 채우기

다양한 그라데이션을 채울 수도 있습니다. 일반적인 그라데이션 입력 방식이 동일하며 선형 그라데이션, 방사형 그라데이션, 모서리 그라데이션 등으로 채울 수 있습니다.

선형, 방사형, 모서리 그라데이션을 넣을 수 있습니다.

텍스트 레이어를 제외한 모든 레이어는 원하는 만큼 테두리를 설정할 수 있습니다. 다양한 두께, 색상 및 블렌드 모드를 설정할 수 있습니다. 선이 모양의 안쪽, 중앙, 바깥쪽에 위치하게 할 수 있으며, 주로 픽셀 퍼펙션을 위해 안쪽으로 설정하는 편입니다.

선의 위치를 설정할 수 있습니다.

끝과 결합

End에서 선이나 패스의 끝 부분을 설정할 수 있습니다.

  • Butt cap : 기본 옵션으로 끝 부분을 따로 표시하지 않습니다.
  • Round cap : 둥근 끝을 표시합니다.
  • Projecting cap : 각진 끝을 표시합니다.

Join에서 선의 꺽이는 부분의 표시되는 방식을 설정할 수 있습니다.

  • Miter join : 기본 옵션으로 각진 형태로 표시합니다.
  • Round join: 테두리에 둥근 모서리가 표시됩니다. (반지름은 테두리 두께)
  • Bevel join : 테두리 모서리에 사선으로 깎인 모서리가 표시됩니다.

그림자

그림자는 내부와 외부 모두 표시할 수 있습니다. 그림자의 X,Y 위치를 설정할 수 있고 흐림 효과의 반경과 흩어지는 범위를 지정할 수 있습니다. 여러개의 그림자를 중첩시키고 블렌드 모드를 설정할 수도 있습니다.

블러

4가지 방식으로 흐림을 표현 할 수 있습니다.

  • Gaussian Blur : 일반적인 블러 효과입니다.
  • Motion Blur: 한 방향으로만 흐리지며 움직이는 것처럼 보입니다.
  • Zoom Blur : 특정 지점만 흐려집니다.
  • Background Blur : 레이어 뒤에 나타나는 모든 컨텐츠를 흐리게 표시합니다. (배경 블러 효과를 보려면 불투명도를 조정해야합니다.)

인기

lotteria-rebranding-01
롯데리아 리브랜딩: 불고기 버거에서 리아 불고기로
toss-stock-pc-01
토스 증권 PC 출시: 증권 서비스도 디자인 혁신
musinsa-desktop-quit-01
무신사 PC 버전 종료: 넘쳐 버린 개발 부채

최근

window11-design
마이크로소프트 윈도우 11 비주얼 디자인
cmf-phone
CMF Phone 1
slack-ios-widget
슬랙 iOS 위젯

디자인 나침반 아카데미

thumbnail-course-list-ux
UX 디자인 클래스: 선택 받는 서비스를 위한 UX 디자인
ui-design-main-mobile
UI 디자인 클래스: 변치 않을 인터페이스의 본질 배우기

최근 소식

dyson-ontrac-01
q10-accident-01
harrisforpresident-01
ms-cloud-error-01
lotteria-rebranding-01
toss-stock-pc-01
cfcldn-01
kakao-id-card-01
Channela-rebranding-01
baemin-increase-price-01
galaxy-ring-01
olympic-uniform-01