神刀安全网

Boom, Wham, Pow! Comic Book FX Lettering with SVG Filters

In twoprevious articles I’ve talked about using SVG to make comic book speech bubbles ; in this one, I’m going to look at text effects associated with lettering for sound effects, which are more broadly applicable to web design.

Joined Outlined Letters

Stroking the exterior of letterforms is a fairly well-established technique in web design: Webkit has a property to do so; you can also fake it with text-shadow , or use SVG stroke . However, none of those techniques allow you to do joined stroked letterforms, shown in the example at the top, where the stroke goes around the shared outline of letters that overlap . To achieve that, we have to use SVG filters:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 500">     <defs>         <filter id="outline">             <feMorphology operator="dilate" in="SourceAlpha" radius="3"/>             <feComposite in="SourceGraphic"/>         </filter>     </defs>     <text fill="yellow" filter="url(#outline)" x="0" y="100"          dx="0, -10, -10, -12">         BOOM     </text> </svg>

The <text> element (sized to 120px with CSS) uses staggered dx values, explained in thelast article, to draw the letters together, while the <filter> strokes the joined outline.

I’ll have more to say about the dilate filter in a future article: for now, you might want to experiment with changing the thickness of the stroke by altering the radius value of the filter in the associated CodePen demo.

Roughened Text

WHAM

Sound effect lettering is also often drawn distorted or jagged to enhance the effect: think of the visual association of a sound like KERR-UNCH! , for example. We can achieve a similar result with SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">     <defs>         <filter id="breakup">             <feTurbulence result="TURBULENCE" baseFrequency=".7"                 numOctaves="1" seed="1" />             <feDisplacementMap in="SourceGraphic" in2="TURBULENCE"                  scale="1.7" />         </filter>     </defs> <text x="10" y="50" dy="0, -10, 8, -8" filter="url(#breakup)">WHAM</text> </svg>

This time the text is staggered vertically with dy values. Again, I’ll have more to say about the feTurbulence filter in a future article. For now, I’d suggest playing with the baseFrequency and scale values in the CodePen demo: these two values control how “fragmented” the roughness is, and the size of the fragment details.

Ben-Day Dots

POW

In a previous article I’ve demonstrated a halftone effect with SVG . Officially, halftone uses dots or shapes that can change size and distribution, whereas Ben-Day dots, the variation I’m using here, must always remain the same size and spacing.

Boom, Wham, Pow! Comic Book FX Lettering with SVG Filters
Initial design of Ben-Day pattern in Adobe Illustrator

The Ben-Day printing process was cheaper, making it ideal for comics; over time, the effect also became popularized by artists like Roy Lichtenstein, and associated with the “pop art”

movement.

To create this effect, I started by creating a series ofcircle elements with their centers at the points of ahexagon. Fit on the edges of a <pattern> element, these circles would create the fill, with the addition of a <rect> behind them (since a <pattern> cannot take a traditional fill ). This technique echoes the many examples I’ve used in makingSVG backgrounds.

<pattern id="hexapolka" patternUnits="userSpaceOnUse"  width="100" height="86" patternTransform="scale(.1)">     <rect width="100%" height="86" fill="#f0f" />     <circle cx="0" cy="44" r="16" id="dot" fill="red" />  <use xlink:href="#dot" transform="translate(48,0)" />     <use xlink:href="#dot" transform="translate(25,-44)" />     <use xlink:href="#dot" transform="translate(75,-44)" />     <use xlink:href="#dot" transform="translate(100,0)" />     <use xlink:href="#dot" transform="translate(75,42)" />     <use xlink:href="#dot" transform="translate(25,42)" /> </pattern>

Added to the <defs> section, this was joined by a <filter> to create a drop shadow for the text:

<filter id="shadow">     <feConvolveMatrix order="4,4"         kernelMatrix="        1 0 0 0        0 1 0 0        0 0 1 0         0 0 0 1" in="SourceAlpha" result="bevel" />     <feOffset dx="1" dy ="1" in="bevel" result="offset" />     <feMerge>        <feMergeNode in="offset" />        <feMergeNode in="SourceGraphic" />     </feMerge> </filter>

I’ll provide much more information on <feMerge> and <feConvolveMatrix> in a future article; for now, I’d recommend playing with the dx and dy values to change the shadow offset in the CodePen demo.

The text is treated slightly differently in this case, as it has both a fill and a filter applied to it:

svg text {   filter: url(#shadow);   fill: url(#hexapolka); }

Conclusion

With a little work and experimentation, many different kinds of text effects can be easily achieved with SVG filters, which is a topic I’ll look at in depth next.

Sound effect text samples use Nate Piekos’ excellent Badaboom font

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Boom, Wham, Pow! Comic Book FX Lettering with SVG Filters

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮