CSS와 SVG를 사용하여 만화 텍스트 다시 만들기 — Smashing Magazine
CSS와 SVG 애니메이션에 관해 내가 할 수 있는 모든 것을 배워야 하는 프로젝트를 마친 후, 저는 Smashing Animations와 “고전 만화가 현대 CSS에 영감을 주는 방법”에 관한 이 시리즈를 쓰기 시작했습니다. 올해를 마무리하면서 저는 최신 CSS를 사용하여 툰 제목을 매우 인상적으로 만드는 요소인 타이포그래피를 만드는 방법을 보여드리고 싶습니다.
타이틀 아트워크 디자인
1920년대와 30년대 초반의 무성영화 시대에 영화 타이틀 카드의 타이포그래피는 분위기를 조성하고 장면을 설정하며 관객에게 그들이 보기 위해 돈을 지불한 영화 유형을 상기시켰습니다.
만화 타이틀 카드에는 브랜딩, 분위기, 장면 설정도 모두 하나로 통합되었습니다. 주요 스튜디오 예산이 더 컸던 초기에는 이러한 타이틀 카드가 종종 삽화적이고 회화적인 느낌을 주었습니다.
그러나 1950년대 텔레비전이 붐을 이루면서 예산이 줄어들고 Lawrence “Art” Goble과 같은 예술가가 디자인한 카드는 새로운 시각적 언어를 채택하여 더욱 그래픽적이고 스타일리시하며 덜 복잡해졌습니다.
메모: 로렌스 “아트” 고블(Lawrence “Art” Goble)은 20세기 중반 미국 애니메이션에서 종종 간과되는 영웅 중 한 명입니다. 그는 1950년대와 1960년대의 가장 영향력 있는 시기에 Hanna-Barbera에서 주로 일했습니다.
고블은 캐릭터 애니메이터가 아니었습니다. 그의 역할은 분위기를 조성하는 것이었기 때문에 그는 다음과 같은 환경을 디자인했습니다. 플린스톤 가족, 허클베리 하운드, 퀵 드로우 맥그로그리고 요기베어분위기를 조성하는 오프닝 타이틀 카드도 포함됩니다. 로고가 오버레이된 그림이 포함된 그의 타이틀 카드는 Hanna-Barbera의 상징적인 모습을 정의하는 데 도움이 되었습니다.
Quick Draw McGraw 및 Yogi Bear와 같은 캐릭터에 대한 Goble의 작품은 작은 TV 화면에서 효과적이었습니다. 그는 만화의 스틸 이미지를 재현하는 대신 그 본질을 포착하는 하나의 강력한 아이디어(종종 실루엣으로)를 제시하는 데 중점을 두었습니다. “The Buzzin’ Bear”에서 요기는 헬리콥터를 타고 윙윙거리며 지나갑니다. 그는 “Bear on a Picnic”에서 피크닉 바구니를 손에 들고 튀어오르고, “Prize Fight Fright”에서는 제목 텍스트를 상자에 넣습니다.
의존할 모션이 거의 또는 전혀 없는 Goble의 단일 프레임은 분위기를 조성하고, 장면을 설정하고, 스토리를 설명해야 했습니다. 그들은 작품에 자주 통합되는 평면 색상, 그래픽 모양 및 타이포그래피를 사용하여 이를 수행했습니다.
웹에서 작업하는 디자이너로서 만화 제목은 브랜드의 개성을 전달하고, 첫인상을 남기고, 제품이나 웹 사이트를 사용하는 사람의 경험에 대한 기대치를 설정하는 방법에 대해 많은 것을 가르쳐 줄 수 있습니다. 효과적인 배너, 랜딩 페이지 헤더, 심지어 좋은 구식 스플래시 화면을 만드는 아티스트의 기술을 배울 수 있습니다.
툰 제목 타이포그래피
만화 타이틀 카드는 문자와 이미지를 병합하여 헤더나 영웅에게 필요한 효과를 어떻게 제공하는지 보여줍니다. 소수의 text-shadow, text-stroke그리고 transform 트릭을 사용하면 최신 CSS를 통해 동일한 에너지를 활용할 수 있습니다.
툰 텍스트 제목 생성기
이 기사를 작성하는 도중에 나는 내가 너무 좋아하는 만화 제목과 같은 스타일의 텍스트를 생성하는 도구가 있으면 유용할 것이라는 것을 깨달았습니다. 그래서 하나 만들었어요.
내 툰 텍스트 제목 생성기를 사용하면 색상, 획 및 여러 텍스트 그림자를 실험해 볼 수 있습니다. 페인트 순서를 조정하고 문자 간격을 적용하고 샘플 글꼴 선택으로 텍스트를 미리 본 다음 생성된 CSS를 클립보드에 직접 복사하여 프로젝트에서 사용할 수 있습니다.
툰 제목 CSS
Toon Text Title Generator가 제공하는 CSS를 복사하여 붙여넣기만 하면 됩니다. 하지만 그것이 무엇을 하는지 좀 더 자세히 살펴보자.
텍스트 그림자
Augie Doggie의 에피소드 “육육덕”에 나오는 이 제목의 활자를 보세요. 옅은 노란색 글자와 어둡고 딱딱한 상쇄 그림자가 배경에서 들어 올려 깊이 있는 환상을 만들어냅니다.
아마 당신은 이미 그것을 알고 있을 것이다. text-shadow (1) 수평 및 (2) 수직 오프셋, (3) 흐림, (4) 단색 또는 반투명할 수 있는 색상의 네 가지 값을 허용합니다. 이러한 오프셋 값은 양수 또는 음수일 수 있으므로 오른쪽 아래로 당겨진 단단한 그림자를 사용하여 “육육오리”를 복제할 수 있습니다.
color: #f7f76d;
text-shadow: 5px 5px 0 #1e1904;
반면, 이 “파인트 자이언트” 타이틀은 네거티브 세미 소프트 섀도우로 인해 다른 느낌을 줍니다.
color: #c2a872;
text-shadow:
-7px 5px 0 #b100e,
0 -5px 10px #546c6f;
깊이를 더하고 더 흥미로운 효과를 만들기 위해 여러 개의 그림자를 겹쳐서 만들 수 있습니다. “Let’s Duck Out”에서는 4개의 그림자를 결합합니다. 첫 번째는 음수 수평 오프셋을 사용하여 텍스트를 배경에서 들어 올리기 위한 단색 그림자이고, 그 다음에는 점차적으로 부드러운 그림자를 사용하여 주변에 흐림 효과를 만듭니다.
color: #6F4D80;
text-shadow:
-5px 5px 0 #260e1e, /* Shadow 1 */
0 0 15px #e9ce96, /* Shadow 2 */
0 0 30px #e9ce96, /* Shadow 3 */
0 0 30px #e9ce96; /* Shadow 4 */
이 그림자는 다음을 사용하여 보여줍니다. text-shadow 조명 효과를 만드는 것뿐만 아니라 장식적이고 개성을 더할 수도 있습니다.
텍스트 스트로크
많은 만화 제목 카드에는 배경에서 눈에 띄게 만드는 굵은 윤곽선이 있는 문자가 포함되어 있습니다. 다음을 사용하여 이 효과를 재현할 수 있습니다. text-stroke. 오랫동안 이 부동산은 다음을 통해서만 이용 가능했습니다. -webkit- 접두사이지만 이는 이제 최신 브라우저에서 지원된다는 의미이기도 합니다.
text-stroke 는 두 속성의 약어입니다. 첫 번째, text-stroke-width개별 문자 주위에 윤곽선을 그리는 반면, 두 번째는 text-stroke-color색상을 제어합니다. “Whatever Goes Pup”에는 다음을 추가했습니다. 4px 파란색 획을 노란색 텍스트로:
color: #eff0cd;
-webkit-text-stroke: 4px #7890b5;
text-stroke: 4px #7890b5;
획은 그림자와 결합될 때 특히 유용할 수 있으므로 “Growing, Growing, Gone”에는 얇은 선을 추가했습니다. 3px 스트로크가 거의 흐려지지 않음 1px 그림자를 사용하여 3차원 텍스트 효과를 만듭니다.
color: #fbb999;
text-shadow: 3px 5px 1px #5160b1;
-webkit-text-stroke: 3px #984336;
text-stroke: 3px #984336;
페인트 순서
사용 text-stroke 특히 더 얇은 문자와 두꺼운 획의 경우 기본적으로 브라우저가 채우기 위에 획을 그리기 때문에 예상한 결과가 항상 생성되는 것은 아닙니다. 안타깝게도 CSS에서는 Sketch에서 자주 하는 것처럼 획 배치를 조정할 수 없습니다. 그러나 paint-order 속성에는 채우기 앞이 아닌 뒤에 획을 배치할 수 있는 값이 있습니다.
paint-order: stroke. 오른쪽: paint-order: fill. (큰 미리보기)paint-order: stroke 획을 먼저 칠한 다음 채우기를 칠합니다. paint-order: fill 그 반대이다:
color: #fbb999;
paint-order: fill;
text-shadow: 3px 5px 1px #5160b1;
text-stroke-color:#984336;
text-stroke-width: 3px;
효과적인 획은 글자의 가독성을 유지하고, 무게감을 더하며, 그림자 및 페인트 순서와 결합되면 단순한 텍스트에 실제 존재감을 부여합니다.
텍스트 내부의 배경
많은 만화 타이틀 카드는 문자에 텍스처, 그라데이션 또는 일러스트 디테일을 추가하여 단순한 색상을 뛰어넘습니다. 때로는 텍스처일 수도 있고 미묘한 색조 변화가 있는 그라데이션일 수도 있습니다. 웹에서는 배경 이미지나 텍스트 뒤의 그라디언트를 사용한 다음 문자 모양에 맞게 잘라서 이 효과를 재현할 수 있습니다. 이는 함께 작동하는 두 가지 속성에 의존합니다. background-clip: text 그리고 text-fill-color: transparent.
먼저 텍스트 뒤에 배경을 적용합니다. 이는 비트맵, 벡터 이미지 또는 CSS 그라데이션일 수 있습니다. Quick Draw McGraw 에피소드 “Baba Bait”의 예에서는 제목 텍스트에 어두운 부분에서 밝은 부분으로 미묘한 위-아래 그라데이션이 포함되어 있습니다.
background: linear-gradient(0deg, #667b6a, #1d271a);
다음으로 해당 배경을 글리프에 맞게 자르고 배경이 보이도록 텍스트를 투명하게 만듭니다.
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
이 두 줄만 있으면 배경이 더 이상 텍스트 뒤에 그려지지 않습니다. 대신 그 안에 그려져 있습니다. 이 기술은 획 및 그림자와 결합할 때 특히 효과적입니다. 잘린 그래디언트는 문자에 색상과 질감을 제공하고, 획은 가장자리를 선명하게 유지하며, 그림자는 배경에서 문자를 끌어올립니다. 그들은 함께 약간의 CSS를 사용하여 손으로 그린 타이틀 카드의 레이어 모양을 재현합니다. 항상 그렇듯이, 브라우저의 문제가 그림자와 렌더링에 영향을 줄 수 있으므로 잘린 텍스트를 주의 깊게 테스트하세요.
텍스트를 개별 문자로 분할
때로는 전체 단어나 제목의 스타일을 지정하고 싶지 않을 때도 있습니다. 개별 문자의 스타일을 지정하고 싶습니다. 즉, 문자를 제자리에 밀어넣거나, 하나의 글리프에 추가 가중치를 부여하거나, 몇 개의 문자에 독립적으로 애니메이션을 적용하고 싶습니다.
일반 HTML과 CSS에는 이를 수행하는 신뢰할 수 있는 방법이 하나뿐입니다. 즉, 각 문자를 자체적으로 래핑하는 것입니다. span 요소. 수동으로 할 수도 있지만 취약하고 유지 관리가 어렵고 복사본이 변경되면 금방 무너질 것입니다. 대신 문자별 제어가 필요할 때 splt.js와 같은 텍스트 분할 라이브러리를 사용합니다(다른 솔루션도 사용할 수 있음). 이는 텍스트 노드를 사용하여 자동으로 단어나 문자를 래핑하므로 마크업을 엉망으로 만들지 않고도 애니메이션과 스타일을 적용할 수 있는 추가 연결 기능을 제공합니다.
이는 HTML을 읽기 쉽고 의미론적으로 유지하는 동시에 고전 만화 타이틀 카드에서 볼 수 있는 고르지 않고 특징적인 타이포그래피를 재현하는 데 필요한 세밀한 제어 기능을 제공하는 접근 방식입니다. 그러나 대부분의 화면 판독기가 텍스트 노드를 순서대로 읽기 때문에 이 접근 방식에는 접근성 주의 사항이 있습니다. 그래서 이것은:
Hum Sweet Hum
…예상대로 읽습니다.
흠 스윗 흠
그러나 이것은:
H
u
m
…브라우저와 스크린 리더에 따라 다르게 해석될 수 있습니다. 일부는 글자를 연결하여 단어를 올바르게 읽습니다. 다른 사람들은 문자 사이에 일시 중지할 수 있으며 최악의 경우 다음과 같이 들릴 수 있습니다.
“하…” “너…” “엠…”
안타깝게도 일부 분할 솔루션은 항상 접근 가능한 결과를 제공하지 않습니다. 그래서 저는 현재 베타 버전인 자체 텍스트 분할기인 splinter.js를 작성했습니다.
개별 문자 변환
내 Toon Text Splitter를 활성화하려면 data- 분할하려는 요소에 대한 속성:
Hum Sweet Hum
먼저 내 스크립트는 각 단어를 개별 문자로 분리하고 이를 다음과 같이 묶습니다. span 클래스 및 ARIA 속성이 적용된 요소:
그런 다음 스크립트는 분할 요소의 초기 콘텐츠를 가져와 접근성을 유지하는 데 도움이 되는 aria 속성으로 추가합니다.
해당 클래스 속성을 적용하면 원하는 대로 개별 문자의 스타일을 지정할 수 있습니다.
예를 들어, “Hum Sweet Hum”의 경우 글자가 기준선에서 멀어지는 방식을 복제하고 싶습니다. Toon Text Splitter를 사용한 후 네 가지 다른 항목을 적용했습니다. translate 여러 가지를 사용하여 값 :nth-child 반 무작위 모양을 만드는 선택기:
/* 4th, 8th, 12th... */
.toon-char:nth-child(4n) { translate: 0 -8px; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { translate: 0 -4px; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { translate: 0 4px; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { translate: 0 8px; }
하지만 translate 내가 사용할 수 있는 유일한 속성은 transform 내 툰 텍스트.
더욱 혼란스러운 모습을 위해 개별 캐릭터를 회전할 수도 있습니다.
/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) { rotate: -4deg; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) { rotate: -8deg; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) { rotate: 4deg; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) { rotate: 8deg; }
하지만 translate 내가 사용할 수 있는 유일한 속성은 transform 내 툰 텍스트. 나도 할 수 있어 rotate 더욱 혼란스러운 모습을 위한 개별 캐릭터:
/* 4th, 8th, 12th... */
.toon-line .toon-char:nth-child(4n) {
rotate: -4deg; }
/* 1st, 5th, 9th... */
.toon-char:nth-child(4n+1) {
rotate: -8deg; }
/* 2nd, 6th, 10th... */
.toon-char:nth-child(4n+2) {
rotate: 4deg; }
/* 3rd, 7th, 11th... */
.toon-char:nth-child(4n+3) {
rotate: 8deg; }
그리고 물론 애니메이션을 추가하여 캐릭터를 흔들고 만화 텍스트 스타일 제목에 생기를 불어넣을 수도 있습니다. 먼저 캐릭터를 회전하는 키프레임 애니메이션을 만들었습니다.
@keyframes jiggle {
0%, 100% { transform: rotate(var(--base-rotate, 0deg)); }
25% { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); }
50% { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); }
75% { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); }
}
에 적용하기 전에 span 내 Toon Text Splitter로 만든 요소:
.toon-char {
animation: jiggle 3s infinite ease-in-out;
transform-origin: center bottom; }
마지막으로 각 캐릭터가 흔들리기 시작하기 전 회전량과 지연 시간을 설정합니다.
.toon-char:nth-child(4n) { --base-rotate: -2deg; }
.toon-char:nth-child(4n+1) { --base-rotate: -4deg; }
.toon-char:nth-child(4n+2) { --base-rotate: 2deg; }
.toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { animation-delay: 0.1s; }
.toon-char:nth-child(4n+1) { animation-delay: 0.3s; }
.toon-char:nth-child(4n+2) { animation-delay: 0.5s; }
.toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
인상을 남기는 한 프레임
만화 제목 작가들은 인상을 남기기 위해 하나의 프레임을 갖고 있었고, 그들의 타이포그래피는 그들이 그린 작품만큼이나 중요했습니다. 웹에서도 마찬가지이다.
잘 디자인된 헤더 또는 히어로 영역에는 단순히 희미한 전체 너비 배경 이미지가 아닌 명확성, 특성 및 자신감이 필요합니다.
그림자, 획, 잘린 배경, 제한된 애니메이션 등 신중하게 선택한 몇 가지 CSS 속성을 사용하여 동일한 효과를 재현할 수 있습니다. 내가 만화 텍스트를 좋아하는 이유는 향수에 젖어서가 아니라 그 디자인이 의도적이기 때문입니다. 신중하게 선택하고 작은 만화 텍스트 타이포그래피를 사용하여 디자인에 펀치감을 더해보세요.
(gg, yk)
Post Comment