EQ6 & PSP - Creating Web Images Part 5

It is time, once again, for the 'didactic' portion of the Three Ducks blog which is a fancy way of saying, "Let's have some more fun with EQ6 and Paint Shop Pro"! In this the fifth and concluding tutorial to 'Creating Web Images,' we are going to explore the text tool in Paint Shop Pro so that we can add text to the web images we have created using EQ6 blocks. Now, it is long past the new year, so the image you prepared in Parts 1 to 4 is no longer appropriate.  Valentine's Day has also passed; however, there is an Irish celebration coming up in March which could offer possibilities for a fun blog image. So, let's get started!


Using the Text Tool 

The first step you will need to do is create a new web/blog image following the lessons in Part 1 to Part 4. In the EQ6 block library, there are two blocks most appropriate to St. Patrick's Day and to find them go to Contemporary Appliqué > Holiday and the two St. Paddy's Day blocks are in the first column. Add the blocks to your sketchbook; pick your fabrics to paint with; and, then export your image to PSP. When your image is ready, come back to this tutorial.

As you can see in the image above, I chose the Shamrocks for my new blog image. I made the image background 200 x 300 pixels and more than likely will crop it smaller (at least height-wise) once I have my text decided on and added to the image.

Now, with your new image on the worktable, I want you to go over the 'Layers' palette on the right side of the work table. I am using my older version of PSP and if you have the newer 'X' versions your palette will look lightly different. Think of layers as sheets of plastic or glass placed one on top of the other.  Each time you add something to your image it goes on a new layer and the advantage to this is that you can then edit individual items or objects in your image at any time by simply clicking on the layer where that item has been placed. When I add my three ducks logo to my image it goes on a separate layer and I can then move it around anywhere in the image with out disturbing the other objects.

You will notice that there are two layers displayed in the palette: one is your background layer in your blog or web page colour, and the second will have a number preceded the word 'Raster.' There are actually many 'types' of layers in graphics programs. but here we will be just concerned with two: raster and vector. In the PSP X2 manual, there is a good explanation of these two layers on pages 213 - 214 (you can also use the Learning Centre Palette). If you are following these tutorials out of interest, you can do a 'Google' definition search for these two layer types. I'm pointing this out to you now because when we add our text to the image, it will be created as a 'vector' and will go onto it's own vector layer. The advantage to this is that we can then edit our text in my different ways.

So, let's get started with the PSP text tool. Move over tho the Tools toolbar at the left of the workspace and click on the Text tool (#1). Above the workspace, the Text Tool Options palette will appear. We want to ensure the palette is at its default settings and to do this click on the small black arrow beside the 'A' under 'Presets' (#2) and then click on  the backward sweeping arrow (#3) in the drop down box. Notice that there is a 'Save' button above the sweeping arrow. After you have decided on the font, font size, etc for your image you can save all those settings as a preset by clicking on that 'Save' button and giving it a name. Whenever, you want those settings again you just need to go to the preset set box, click on the arrow and click on your saved preset. Presets are a real time saver when you are using the same settings over and over again.

Let's take a closer look at the Text Tool Options palette that appeared above the workspace when we clicked on the Text tool button.

It is quite a long palette and to see what is hidden you can go to its end and click on the small black arrow. The first half of the palette offers many of the same features found in word processing programs; it is the second half that offers features that you may not be familiar with. For our purposes, we will keep these default settings except that you will be choosing a font, its size and its colour. If you would like to read more about these Text Tool Options, visit pages 163 to 166 in the PSP manual or use the Learning Centre Palette.

You don't need your prepared image right now, so minimize it to get it to the bottom of the worktable. Create a new image at a 300 x 300 pixel size and use this new image to try out different fonts and font sizes and just play around with the text tool and its features.

The fonts that are available in the drop down menu box are those that have come installed with your operating program and/or may  have been added by other programs. PSP, itself, does not come with additional fonts. Just for fun, click on the 'Comic Sans MS' font if available and choose a size of 24. Now, we will head over to the Materials palette where we will set our font colour. Hover your cursor over the two boxes labelled #1 & #2. Over #1, the pop-up tooltip, tells you this colour box is for 'Foreground & Stroke Properties', The second box is for 'Background & Fill Properties'. Click on box #1 and pick a colour using the 'Materials' dialog box or bring up your St. Paddy's image and pick a colour from it with the eyedropper (this is what I did). Leave or make box #2 white. Click on your new empty image, and a 'Text Entry' box appears and type in some text and click 'Apply'. You should get the same result as that upper 'Happy' in the image above. Move up to the Text Tool Options Palette and change the 'Stroke Width' to the number 2, click on your image again and type some more text and click apply. You now know how 'Stroke Width' and how the colour setting boxes affect text. Return the 'Stroke Width' to 1 and change the colour of the 'Background & Fill Properties' box to match the colour you have chosen for your text.

You will have noticed each time your test text appeared on your image it was surrounded by dotted red box. This 'Editing' box only appears around text when the Text Tool on the left hand Tool toolbar is activated. Hover your cursor over any of the box's solid red squares and when your cursor changes click, hold and pull the box in and out. Pull the corner boxes diagonally to see what happens. Move to the centre circle and when your cursor changes to double arrows, click and move the whole text around the image box. Follow the solid red line (upper arrow) to the end and your cursor will change to two circling arrows, click, hold and move that red bar and you will notice your text moving in a circle. These are some quick editing features for your text.

The next step is to decide on your text font and its size and you can play until you are ready to apply text to your image. When ready, make sure that the 'Align Centre' button in the 'Alignment' area of the Text Tool Options palette is active and move over to your blog image and click in the centre of the box. Enter your text in the Text Entry box and as you do so you will discover if your font size is too big or two small and you can adjust the font size, If you want two lines of text, clicking the keyboard 'Enter' key after the first line will move you down. When ready, hit the 'Apply' button.

Oh-oh, don't like what you see?  Your text can still be edited by heading over to the Layers palette. You will see that a 'Vector' layer has been added to your image and click on the 'plus' sign in from of it. This will expand to display the first word of your text. Do a right click on that first word and you can click on 'Edit Text' to make changes using the 'Text Entry' box or you can click on 'Clear' to remove the text and start over again. Don't forget you can stretch or compress your text vertically and horizontally and move your text by using the red dotted editing box.

When you are satisfied with your text's appearance and position, click on the 'Drop Shadow' button on your new toolbar above the worktable. You are going to get a dialog box telling you that the text (current) layer must be converted to a raster - click 'OK,' Your Drop Shadow dialog box will appear and you can try different settings until to are happy with the results. If you have clicked 'OK' but don't like the drop shadow's appearance, click the 'Undo' arrow and try again. When completed, click the 'Save' button a dsave as a .pspimage file and then click on the 'Jpeg' optimizer button to save as a 'jpeg' file.


Here is the final appearance of my new web/blog image. After I added my text and had it positioned where I wanted it, I did use my crop tool to eliminate the extra image space. I can easily use this image for my cart by returning to its .pspimage file and using the 'Colour Replacer' tool to change its background colour. Using that file, I can also resize the image to make it smaller for that left hand blog column and make another .jpeg image for uploading to blogger.

Now, the rest is up to you to go wild and crazy with EQ6 and your photo editing program to produce lots of neat web and blog images. I would love to see the images you produce!

(Note: There is still a problem with the Blogger editor and I cannot get those nice 'extra large' images as with my earlier tutorials. I hope to find out the problem sometime down the road and fix these images. In the meantime, to see them at their full size, just click on the image and when finished hit your back arrow to return to the blog page)