Difference between revisions of "How to create a comic book text effect"

From Scribus Wiki
Jump to: navigation, search
m (The Outline: typo)
m (Converted to use new TOC+Key combination.)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{HOWTO Index}} [[Category:EN]]
 
{{HOWTO Index}} [[Category:EN]]
 
[[File:comic-book-text-effect.png|centre]]
 
[[File:comic-book-text-effect.png|centre]]
 +
<div style="float: left;">__TOC__</div>{{TutorialKey}}{{clear}}
 +
== Introduction ==
 +
This quick tutorial shows how you can create a simple but effective comic book text effect using only the tools in Scribus.
  
Here's a quick tutorial showing how you can create a simple but effective comic book text effect using only the tools in Scribus.
+
=== Specific techniques used in this tutorial ===
  
For the purposes of this tutorial I've used the "SF Comic Script Bold" font that is available here: http://www.dafont.com/sf-comic-script.font (It's free for personal use but check the licensing for your own purposes.)
+
* Creating a text frame
 +
* Converting text to polygons
 +
* Duplicating objects
 +
* Aligning objects
 +
* Creating a gradient fill
  
=== The Text ===
+
== The Text ==
 +
 
 +
For the purposes of this tutorial I've used the "SF Comic Script Bold" font that is available [http://www.dafont.com/sf-comic-script.font here]. (It's free for personal use but check the licensing for your own purposes.)
  
 
* Draw a large coloured - blue looks nice - rectangle across the page. (This is only so you can see the effect, you can delete it later if you want.)
 
* Draw a large coloured - blue looks nice - rectangle across the page. (This is only so you can see the effect, you can delete it later if you want.)
 
* Create a text frame inside the rectangle and enter your text. (A short word looks best.)
 
* Create a text frame inside the rectangle and enter your text. (A short word looks best.)
 
* Make the text large. (I've used 80pt.)
 
* Make the text large. (I've used 80pt.)
* Choose menu "Item -> Convert to -> Outlines".
+
* Choose menu {{Menuitem|Item}} &rarr; {{Menuitem|Convert to}} &rarr; {{Menuitem|Outlines}}
* Re-select the text, right-click and choose "Ungroup".
+
* Re-select the text, right-click and choose {{Menuitem|Ungroup}} from the menu.
* Choose menu "Item -> Combine Polygons".
+
* Choose menu {{Menuitem|Item}} &rarr; {{Menuitem|Combine Polygons}}
* Re-select the text and choose menu "Item -> Duplicate", then "Item -> Duplicate" again so you've got three copies of the text.
+
* Re-select the text and choose {{Menuitem|Item}} &rarr; {{Menuitem|Duplicate}} from the menu, then {{Menuitem|Item}} &rarr; {{Menuitem|Duplicate}} again so you've got three copies of the text.
  
=== The Outline ===
+
== The Outline ==
  
* With the last copy selected go to "Properties / Colours" and change both the Outline and Fill colours to White.
+
* With the last copy selected go to {{Window|Properties|icons}} &rang;&rang; {{Window|Colours}} and change both the Outline and Fill colours to White.
* Go to "Properties / Line" and change the line width to 3pt.
+
* Go to {{Window|Properties|icons}} &rang;&rang; {{Window|Line}} and change the line width to 3pt.
* Choose menu "Item -> Duplicate".
+
* Choose menu {{Menuitem|Item}} &rarr; {{Menuitem|Duplicate}}
* With this new duplicate selected Shift-select the other white text and choose menu "Windows -> Align and Distribute".
+
* With this new duplicate selected Shift-select the other white text and choose menu {{Menuitem|Windows}} &rarr; {{Menuitem|Align and Distribute}}
 
* Press the "Center on vertical axis" button, then the "Center on horizontal axis" button.
 
* Press the "Center on vertical axis" button, then the "Center on horizontal axis" button.
 
* De-select all, then re-select the top white text.
 
* De-select all, then re-select the top white text.
 
* Using the cursor keys nudge the text three times to the right and down, i.e. press right-arrow three times then down arrow three times.
 
* Using the cursor keys nudge the text three times to the right and down, i.e. press right-arrow three times then down arrow three times.
  
=== The Shadow ===
+
== The Shadow ==
  
* Select the upper black text, right-click, and choose "Level -> Raise to Top".
+
* Select the upper black text, right-click, and choose {{Menuitem|Level}} &rarr; {{Menuitem|Raise to Top}} from the menu.
 
* Drag the black text over the white text until it's just above and to the left of the lower-right-hand white text.
 
* Drag the black text over the white text until it's just above and to the left of the lower-right-hand white text.
  
=== The Foreground ===
+
== The Foreground ==
  
* Select the lower black text, right-click, and choose "Level -> Raise to Top".
+
* Select the lower black text, right-click, and choose {{Menuitem|Level}} &rarr; {{Menuitem|Raise to Top}} from the menu.
* In "Properties / Colours" set the Line colour to be black.
+
* In {{Window|Properties|icons}} &rang;&rang; {{Window|Colours}} set the Line colour to be black.
* Still in "Properties / Colours" set the Fill to be a Vertical Gradient.
+
* Still in {{Window|Colours}} set the Fill to be a Vertical Gradient.
 
* Set the left-hand gradient tab to a Red colour.
 
* Set the left-hand gradient tab to a Red colour.
 
* Set the right-hand gradient tab to a yellow colour.
 
* Set the right-hand gradient tab to a yellow colour.
 
* Drag the gradient-filled text over the white text until it's just above and to the left of the black text.
 
* Drag the gradient-filled text over the white text until it's just above and to the left of the black text.
 +
 +
== Conclusion ==
  
 
And you're done.
 
And you're done.
  
 
You can try playing around with different line widths, offsets and gradient colours to get slightly different effects.
 
You can try playing around with different line widths, offsets and gradient colours to get slightly different effects.

Latest revision as of 09:41, 24 March 2015

This article is part of the HOWTOs series.
Installation Usage PDF issues Imposition Other
Comic-book-text-effect.png
Key
This article uses these graphical conventions
Tutorial template icon window.pngWindow 〉〉 Tab/Panel in Window
ButtonMenuChoiceKeyboard

Introduction

This quick tutorial shows how you can create a simple but effective comic book text effect using only the tools in Scribus.

Specific techniques used in this tutorial

  • Creating a text frame
  • Converting text to polygons
  • Duplicating objects
  • Aligning objects
  • Creating a gradient fill

The Text

For the purposes of this tutorial I've used the "SF Comic Script Bold" font that is available here. (It's free for personal use but check the licensing for your own purposes.)

  • Draw a large coloured - blue looks nice - rectangle across the page. (This is only so you can see the effect, you can delete it later if you want.)
  • Create a text frame inside the rectangle and enter your text. (A short word looks best.)
  • Make the text large. (I've used 80pt.)
  • Choose menu ItemConvert toOutlines
  • Re-select the text, right-click and choose Ungroup from the menu.
  • Choose menu ItemCombine Polygons
  • Re-select the text and choose ItemDuplicate from the menu, then ItemDuplicate again so you've got three copies of the text.

The Outline

  • With the last copy selected go to Tutorial template icon window.pngProperties 〉〉 Colours and change both the Outline and Fill colours to White.
  • Go to Tutorial template icon window.pngProperties 〉〉 Line and change the line width to 3pt.
  • Choose menu ItemDuplicate
  • With this new duplicate selected Shift-select the other white text and choose menu WindowsAlign and Distribute
  • Press the "Center on vertical axis" button, then the "Center on horizontal axis" button.
  • De-select all, then re-select the top white text.
  • Using the cursor keys nudge the text three times to the right and down, i.e. press right-arrow three times then down arrow three times.

The Shadow

  • Select the upper black text, right-click, and choose LevelRaise to Top from the menu.
  • Drag the black text over the white text until it's just above and to the left of the lower-right-hand white text.

The Foreground

  • Select the lower black text, right-click, and choose LevelRaise to Top from the menu.
  • In Tutorial template icon window.pngProperties 〉〉 Colours set the Line colour to be black.
  • Still in Colours set the Fill to be a Vertical Gradient.
  • Set the left-hand gradient tab to a Red colour.
  • Set the right-hand gradient tab to a yellow colour.
  • Drag the gradient-filled text over the white text until it's just above and to the left of the black text.

Conclusion

And you're done.

You can try playing around with different line widths, offsets and gradient colours to get slightly different effects.