How to Isolate an image and create a clipping path for text flow



Sometimes you have an image that you want text to flow around but you don't want the background of the image to show. If that's the case you can isolate the image and create a clipping path so Scribus can flow the text around that.

NOTE: A clipping path is one of the things Scribus can use to flow text around an image. Other things, such as a contour line, are available but won't be explained here.

This tutorial is a little unusual for the Scribus Wiki in that it is in two parts. The first part is in GIMP, the second part is in Scribus.

It's been written this way in order to show how you can use both applications to create an effect that is used in many professional publications.

IMPORTANT : This tutorial isn't really for people who haven't used either GIMP or Scribus before. Total beginners might get a bit lost as I don't explain everything down to the fine detail but most people who have used both applications should be able to follow it quite easily.

Part 1 - The GIMP Work
First you'll need an image to work on. You can use any image you want - within reason - but if you want to follow along you'll need to download the image (figure 1) I've used from here: http://pixabay.com/en/auto-audi-black-vehicles-tuning-383897/ (I'd recommend downloading the 1280x850 version as it will look nice but the choice is up to you.)

The image you choose should, ideally, have one main "focus" and the background should be relatively "bland". The more bland the background the easier it will be to isolate the image. (Also, hair and fur are a nightmare to isolate properly without putting in a lot of time.)

Step 1A - Selection

 * Load the image into GIMP.

You will be doing quite a lot of precision work here so it's best if you zoom in, 200% is good.


 * Select the "Free Select Tool" from the Toolbox. (It's the one that looks like a cowboy's noose.)
 * Make sure that "Antialiasing" is ticked.
 * Make sure that "Feather edges" is also ticked and the "Radius" is set to 2.

Setting the Antialiasing and feathering like this works well for most images but you can experiment with using different settings.

On this image you want to isolate the car and to do that you need to make a selection that encompasses that car without including the background. Essentially what you do is draw a line around what you want to isolate.

At this point you don't need to be extremely accurate as you can go back and alter any minor mistakes - pressing backspace undoes the last point you clicked, but the more time you take getting it right the better the outcome will be. Use small distances between clicks to go round curves but use long distances for straight edges (such as, in this instance, the underside of the car and the bottom of the tyres).
 * Click where you want to start and then keep clicking round the shape you want to isolate from the image (figure 2).

Your goal is to draw a line with the select tool completely around the object you want to isolate while having as little of the background inside the selection (figure 3). If in doubt as to where to draw the selection line draw it very slightly inside the bit of the image you're trying to isolate instead of outside.

For the purposes of this tutorial you can make the selection as crude as you want but you'll see the effect better if you take the time to trace the object properly.

Step 1B - Isolation

 * Once you've gone all round your image and you're happy with the selection line, choose menu "Select -> Invert".

This inverts the selection so you have now got the background selected.


 * Select the "Bucket Fill Tool" from the Toolbox. (It looks like a bucket, not surprisingly.)
 * Go to the colour samples - figure 4 - just below the tools and make sure that white is the foreground colour. (We're using white here because the page we'll be putting the image onto will be white.)clipping-colour-samples.png
 * Make sure "FG color fill" is set (underneath the colour samples).
 * Make sure "Fill whole selection" is also set.
 * Move the cursor over to the background of your image and click.

You've now erased the background (figure 5).

If you're not happy with what has been erased, use the Undo function and alter the selection using any of the selection tools. (There are plenty of really good tutorials on the web about using GIMP's selection tools so I won't give any more information here but see the Epilogue to this tutorial for a little tip.)

You should now see that the selection has grown and there's a "gap" around the image (figure 6).
 * Choose menu "Select - Invert" to get the selection back to the image rather than the background.
 * Choose menu "Select -> Grow…".
 * Enter a size that you want to enlarge the selection by. (I've used 32px as I don't want the text to touch the image but you can use whatever you want.) Use 32px if you're following along.

NOTE: If you didn't fill the background with white earlier your selection would now include some of the background, and that's not what you want in this case.

Step 1C - Adjustments
Before continuing you need to keep in mind that Scribus will try its best to fit the text around the image in the most efficient way it can. This means that it will try and put text wherever it can including "concave" areas, such as - in this instance - the area under the car.

To remove these areas you'll need to add more to your selection.


 * Select the "Free Select Tool" from the toolbox again.
 * In the "Free Select" options under the tools select the "Add to the current selection" mode.
 * Now draw a new selection that goes from the bottom of the rear tyre to the bottom of the front tyre, then inside the original selection under the front wheel arch, then under the rear wheel arch, then back to your start point.
 * Next use the same technique to remove the gap from under the front of the car (figure 7).clipping-final-selection.png

You now need to make a clipping path for the image so text will flow around it.

NOTE: Once you've tried this tutorial, try it again but without making these adjustments so you can see what happens to the text under the car.

NOTE: In most cases you would also shrink the overall size of the image to remove all of the un-needed white area outside of the selection but we won't bother with that here.

Step 1D - Clipping Path

 * Choose menu "Select -> To Path".

GIMP will now create the clipping path according to the selection. This may take a little while on slow computers with a large image. A status bar at the bottom of the GIMP main window will show its progress.


 * Once done, choose menu "File -> Export As…".
 * Set the file type to TIFF - give the file a suitable name if you want to - and press the "Export" button.
 * Set whatever compression options you want, or accept the default, and press the "Export" button again.

You've now got an image with a clipping path.

IMPORTANT : You need to save as TIFF as JPEG doesn't allow clipping paths.

Part 2 - The Scribus Work
Now you will put the image into a document and put some text around it.

Step 2A - Base Image

 * Go to Scribus and either open a new document or open a document you want to put your image into.
 * Create an image frame. (For the purposes of this tutorial, make it pretty big so you can get the whole image in.)
 * Right-click the image frame and choose "Get Image…".
 * Select the TIFF image and press the "OK" button.

You may need to resize your image to get it how you want it inside the frame. Do so before proceeding.

Step 2B - The Text

 * Create a text frame over the image frame. Where you put it is up to you depending on the effect you want to see. I've just made a text frame a bit larger than the image frame so you can see the effect.


 * Right-click the text frame and choose "Sample text".

You can load your own text or type it using the editor as normal if you want but I'm suggesting sample text here for demonstration purposes.


 * Press the "OK" button to create the sample text.
 * Go to "Properties / Text" and in the "Columns and Text Distances" area make the number of columns 2 and make the gap between them 20pt.

NOTE: You don't always need to do this, depending on your needs, but if you don't do this - for the purposes of this tutorial - the text will be difficult to read as sentences will run from one side of the image to the other. Once you're finished with the tutorial try setting the number of columns back to 1 and see for yourself.

The text should be written all over the image (figure 8), but that's fine for now.


 * Right-click the text frame and choose "Level -> Lower to Bottom".

The image should be above the text but there's a load of white space. No problem.

Step 2C - Using the Clipping Path
You now need to tell Scribus to use the clipping path you created earlier.


 * Right-click the image and choose "Extended Image Properties".
 * Select "Selection" - you can see the shape of the path - and press the "OK" button.

There is now a "boundary" - the gap you created by "growing" the selection earlier - around the image but the text isn't flowing around it.


 * In "Properties / Shape" select "Use Image Clip Path".

Ta Da!

The text now flows nicely around the image. Fantastic.

Epilogue
There are lots of different ways that you can create a selection in GIMP - before you create the clipping path - and they all have their disadvantages and advantages depending on the effect you're trying to achieve.

For instance, for images where the background is mostly one colour, why not try the "Fuzzy Select Tool" on the background to see if you can create the "inverted" selection - as you'd get at the start of Step 1B - with just one click?

Have a play around and see what you can achieve.