Linux

How do I create a translucent text box in Scribus?

Jack Wallen walks you through the steps for placing a shadow box between an image and text in the open source tool Scribus.

If you're into desktop publishing, then you know that placing text over a busy image can be a nightmare. In many instances the image has too many colors to find a text color that won't blend into the background or the dictated text color (for whatever reason) will simply not appear when placed over the image. To solve this problem, you need to use a translucent text (or shadow) box to make the text appear clearly on your image. I'm going to show you how to accomplish this with one of my favorite open source tools, Scribus.

I'm going to start with the original image -- a picture of Geddy Lee (from the band Rush, my fav) that makes it nearly impossible to place black text anywhere in the image (Figure A).

Figure A

Geddy Lee unmodified

A modern day warrior sure takes a mean, mean picture.

As you can see, finding a place for black text would be a task to make any designer pull her hair out. But let's do it anyway. First I'm going to just place the text over the image to illustrate how bad it will look. Then I'll add the shadow box to help us out.

Placing the text

The first thing you must do is add a layer to the image. You could just place the text directly on the background layer (the layer that holds our image) but you wouldn't be able to manipulate the text or place anything between layers that don't exist.

So, the first thing to do is add a couple of layers. Click on the Window menu at the top of the screen and select the Layers entry. A new window will open, as in Figure B, that will allow you to manipulate layers.

Figure B

By default the "Background" layer is created.

Click on the Add A New Layer button (bottom left) and a new entry in the window will appear. The new entry will be called (by default) Layer 1. If you double-click that entry, you can rename it. Let's rename this layer Shadow Box. Add yet another layer and call this layer Text. Now you are ready to start working.

Take a look at Figure C to see what the image looks like with straight-up black text.

Figure C

Text disappears

This would not pass inspection in ANY department.
Of course I already created the text in the Background layer to show you how it would look. I can fix that simply by moving to the Background layer (the layer switcher is at the bottom of the window as seen in Figure D).

Figure D

Just click the drop-down arrow and select the layer you want.
To move an object to another layer, you right-click on that object and then select the target layer from the Send To Layer menu (see Figure E).

Figure E

Move between layers

You can also move an object forward or backwards from this right-click menu.
Now that you have your text in the proper layer, it's time to add the shadow box. First, switch to the Shadow Box layer. Now, from the tool menu near the top of the screen, select the Insert Shape button (making sure it's set on the square image - see Figure F).

Figure F

Choose a box shape

From the drop-down you can select a number of different shapes to insert.
Now click, hold, and draw your shadow box to the precise size you want it underneath your text. When you're done drawing, release your mouse button and you will have a solid black box on your image (see Figure G).

Figure G

Black box

Where did my text go?!
Now you need to manipulate your shadow box so the text can be seen. The first thing you want to do is change the color of the box. Open up the Properties Window (from the Window menu) and click on the Colors tab (see Figure H).

Figure H

By default the image color is black.
The first thing to do is change the box color to White. As you can see there are two colors to change: line and fill. You are going to change the Fill color first. So make sure the fill can is selected and then select White from the list. As you can see, from Figure I, we're moving in the right direction.

Figure I

Choosing a fill color

White works, but this looks unprofessional.
Now you have to edit the opacity of the image. Go back to the Properties Window. There is an Opacity percentage selector. Change that to "50" and notice how much better it looks in Figure J.

Figure J

Set opacity

Now we're getting some where!

Now to finish off the look, you can do couple of things. First, change the line color of the box to white in order to lose the black outline of the box. Next, edit the corners of the box to round them off a bit.

To change the outline color, click on the Line Color Properties button and select None from the list. Next, to round off the corners of the box, click on the Shape tab (from the Properties Window) and change the Round Corners number to 20. The shadow box is complete in Figure K.

Figure K

Modified text box

Modern day warrior filled with mean, mean pride.
Final thoughts

Making your publications professional looking isn't as hard as it seems. It only takes a bit of pre-planning, and tweaking to go from substandard to professional. Of course, a dash of imagination in this recipe can take professional to amazing. So don't forget to use that imagination in your creations.

Related: See my post on how to wrap text around an image in Scribus.

About

Jack Wallen is an award-winning writer for TechRepublic and Linux.com. He’s an avid promoter of open source and the voice of The Android Expert. For more news about Jack Wallen, visit his website getjackd.net.

2 comments
alexey
alexey

Have you tried white color instead of black at step 1? What is the result?

jlwallen
jlwallen

i used the black color to make it VERY obvious. but using a white color is much more appropriate. of course with the white colorbox you would also use a darker font.