디자인 트렌드 : 슬라이스 텍스트 및 타이포그래피

순수 주의자들은 타이포그래피를 변경해서는 안된다고 말합니다. 문자 디자이너가 의도 한대로 문자를 나타내거나 다른 글꼴을 모두 선택해야합니다. 이것은 대부분 사실이지만 슬라이스 텍스트 경향에서는 예외입니다.

멋진 효과는 정밀한 도구를 사용하여 자른 것처럼 보이는 요소를 보이게하며 로고, 헤드 라인 및 간단한 텍스트 블록에 시각적 인 관심을 더할 수 있습니다. 얇게 썬 텍스트 효과는 빠진 미묘한 글자와 같이 아주 미묘한 단어부터 완전히 사라진 단어의 주요 부분에 이르기까지 다양합니다.

슬라이스 텍스트를 사용할 때 명심해야 할 것은 단어를 항상 읽을 수 있어야한다는 것입니다. 그렇지 않으면 어떤 점이 있습니까? – 의도하지 않은 문자 조합이나 단어가 슬라이싱으로 표시되지 않도록주의를 기울여야합니다. 다음은 잘 수행하는 디자인의 예를 통해 어떻게 작동하는지 살펴 보겠습니다.

Envato Elements 살펴보기

"전통적인"슬라이스

슬라이스 텍스트에는 단어 또는 작은 단어 그룹과 같이 하나의 텍스트 요소가 두 평면에서 잘리고 겹치는 거의 계층화 된 모양이 포함됩니다. 이 효과는 깊이를 만들고 간단한 문자 집합을 시각적으로 흥미롭게 만들 수 있습니다.

Resoluut는 앰퍼샌드와 함께이 효과를 사용하여 사용자를 디자인의 중심으로 끌어들입니다. 슬라이스 텍스트는 회사가“태도를 가진 디지털 디자인”에 중점을 둔 메시지를 반영합니다. 슬라이스 텍스트는 문자 그대로의보다 생생한 분위기를 전달하기 때문입니다.

이 기술은 문자 세트가 단순하고 (산 세리프체를 먼저 생각할 때) 단어가 잘리고 가독성을 유지할 수있는 자연스러운 중단 점이있을 때 가장 효과적입니다.

슬라이스 텍스트 및 사진

레이어 효과는 글꼴과 공간의 조합으로 제한되지 않습니다. 디자이너는 이미지와 텍스트를 사용하여 위의 The Shift 예제와 같이 멋진 슬라이스 효과를 만들 수도 있습니다.

글자로 된 단일 이미지 (슬라이스)의 기울어 진 슬라이스 조합은 사용자를 디자인에 끌어들입니다.

처음에는 일부 단어를 식별하기가 좀 더 힘들지만 애니메이션간에 메시지를 쉽게 파악할 수있는 충분한 시간이 있습니다.

이 트렌드는 디지털 에이전시 및 포트폴리오 사이트에서 현대적인 모양과 느낌을 보여줄뿐만 아니라 창의적인 절단을 강조하는 방법으로도 효과적입니다.

애니메이션과 슬라이스

얇게 썬 텍스트 효과는 다른 유행 디자인 요소와 결합 될 수 있습니다. 슬라이싱과 애니메이션을 혼합하면 멋진 시각적 요소가 될 수 있습니다.

위의 예에서 슬라이스 된 각 텍스트 요소는 실제로 탐색입니다. 사용자는 두 요소 중 하나를 클릭 할 수 있지만 더 인상적인 것은 호버 동작으로 슬라이스 된 텍스트가 다시 결합됩니다.

로고 타입

얇게 썬 텍스트는 작업해야하는 유일한 요소가 텍스트 일 ​​때 로고를 만드는 재미있는 방법이 될 수 있습니다. 재미있는 로고 타입은 브랜드 인지도를위한 표시 이상일 수 있습니다. 또한 위의 셔츠 디자인과 같은 여러 용도로 사용되는 그래픽 요소가 될 수 있습니다.

얇게 썬 텍스트로 작업 할 때는 읽기 쉬운 상태를 유지하면서 보는 것이 재미 있도록 슬라이싱을위한 자연스러운 모양과 기울기를 찾으십시오.

슬라이싱이 공백을 만드는 방식에주의하십시오. 위의 디자인은 그 안에 다양한 추가 정보를 사용합니다. 슬라이싱의 더 일반적인 사용법은 종종 얇은 것이지만 (이 게시물의 예제에서 볼 수 있듯이) 접근 방식은 크게 다를 수 있습니다.

상호 작용 만들기

사용자가 대화 형 텍스트 및 브러시 조합 (예 : 위의 예)으로 자신의 텍스트를 슬라이스 할 수 있습니다. 텍스트 자체가 정확하게 슬라이스되지는 않지만 효과는 예술 제작 과정에서 만들어집니다.

사용자가 설계를 변경할 수있는 도구는 대화식 구성 요소로 인해 현장에서 더 오랜 시간이 걸릴 수 있습니다.

슬라이스 된 수직 스트로크

각 조각이 단일 문자의 일부이기 때문에 세로 조각은 더 짧은 경향이 있습니다.

대부분의 디자이너는 수평 방향 슬라이스로 같은 방식으로 트렌드를 사용하는 것처럼 보이지만 컷도 수직이 될 수 있습니다.

각 조각이 단일 문자의 일부이기 때문에 세로 조각은 더 짧은 경향이 있습니다. 수직 슬라이스를 작동시키는 비결은 일관성입니다. 자르는 방식은 글자가 서로 어울리는 것처럼 보이도록 서로를 모방해야합니다. 이 슬라이싱 방법은 서체의 의도 된 부분 인 것처럼 보일 것입니다. (위의 예에서는 슬라이스가 글자 간 너비가 같고 동일한 글자가 같은 슬라이스임을 나타냅니다.)

시각적 흐름 설정

컷은 글자를 가로 질러 화면의 주 화면으로 압축 할 수 있도록 읽기 긴급 성을 거의 느끼게합니다.

의도적이든 아니든 얇게 썬 텍스트의 결과는 시각적 흐름을 생성한다는 것입니다. 사용자의 눈은 슬라이스의 방향과 그 주변의 공백을 따릅니다.

위의 예에서 로고 타입을보십시오. Robocath의 R과 o에 슬라이스가 있고 (c의 정상적인 누락 부분) 화면에서 왼쪽에서 오른쪽으로 명백한 방향으로 당깁니다.

슬라이스는 문자를 빠르게 통과하기 때문에 일반 판독 (왼쪽에서 오른쪽으로)과 비교할 때 당김이 더 강합니다. 컷은 글자를 가로 질러 화면의 주 화면으로 압축 할 수 있도록 읽기 긴급 성을 거의 느끼게합니다.

글자에 강조 추가

슬라이스 텍스트 디자인 트렌드를 사용하는 마지막 이유는 문자 나 메시지를 강조하는 것입니다. 슬라이싱은 디자인에서 문자의 일부가 누락 된 문자의 변경과 거의 같습니다.

위의 MJND는 더 많은 레이어 효과를 사용하여 문자를 숨기거나 슬라이스하여 메시지에 중점을 둡니다. 이미지는 여기서 모든 커뮤니케이션을 쉽게 수행 할 수 있지만이 효과는 사용자를 기본 메시징으로 다시 가져 오는 데 도움이됩니다. 조합은 간단하고 효과적이며 시각적으로 흥미 롭습니다.

학습 자료

작성하려는 대상에 따라 프로젝트에 대해 분할 텍스트 효과를 작성하는 몇 가지 방법이 있습니다. 가장 널리 사용되는 옵션에는 편집 소프트웨어를 사용하여 수동으로 텍스트 효과를 만들거나 CSS를 사용하여 웹 프로젝트에 대한 효과를 만드는 것이 있습니다.

다음은 이러한 각 옵션에 대한 자습서이므로 트렌디 한 슬라이스 텍스트 효과를 만들 수 있습니다.

  • 비디오 : Adobe Illustrator에서 슬라이스 텍스트를 만드는 방법
  • CSS를 사용하여 텍스트 효과 스 니펫 잘라 내기

결론

슬라이스 된 텍스트 트랜드를 사용하는 것은 유형 요소를 변경하기 때문에 약간 까다로울 수 있습니다. 가독성을 잃지 않거나이 효과로 사용자를 잃을 수있는 것이 중요합니다.

그러나 슬라이스 텍스트 효과는 재미있는 솔루션이 될 수 있으며 초점을 생성하는 데 도움이됩니다. 애니메이션 터치를 추가하면 다음 단계로 넘어갈 수 있습니다. (이 게시물에 포함 된 많은 예제는 바로 그 작업을 수행합니다. 해당 웹 사이트를 방문하여 클릭하십시오.)

© Copyright 2024 | computer06.com