EQ6 & PSP - Creating Web Images Part 4

There is a great deal of information in Part 4 of 'Creating Web Images using EQ6 and Paint Shop Pro', but don't be intimidated! Believe me, once you have practiced these steps a few times using the great little toolbar you created in Part 2, you'll be able to take that EQ6 block and make a web image in about 5 minutes. So, grab yourself a cup of coffee or tea and let's begin!

The first step is to find and open the file where you stored your Stork image created in Part 3. Double click on the image and PSP will place it on the workspace.

When you opened the image, PSP's tools, toolbars and palettes became activated. You should see the 'Standard Toolbar' (the tidied up toolbar from Part 2) and your new toolbar (#1 in the above image). Because I have the 'Pan' tool activated on the Tools toolbar on the left (#3), you can see its 'Tool Options Palette' (#2).

Now,  repeat the PSP mantra learned in Part 3, "Never, never, never edit using my Master image!"  Go up to your new toolbar and click on the 'Duplicate Image' command and make a copy of your Master image. The white arrow points to that Command and you can see my duplicated image above.  After duplicating, close your Master image (you know where to find it if you need it again).

In my image above, you will notice rulers on two sides of the image.  I realize now that I forgot to mention those rulers in my tutorial on 'Scanning Fabrics for EQ6' since I always work with the rulers activated. To activate the rulers, click on View > Rulers.

If you are activating the rulers for the first time, they may be displaying either inches or centimetres, however web images are always measured in pixels, so to change the rulers' units go to File > Preferences > General Program Preferences > Units and click on 'Pixels' in the drop down menu beside 'Display units' (image above).

The image that I want to create using the EQ6 Stork block will be displayed on both my shopping cart and on my blog and because I have made previous images for those web pages I can open up those images to remind myself of the image size used before.

I can see by the image rulers that my Angel image is 180 x 180 pixels. I can also find this information by clicking on the Angel and then clicking on the 'Info' tab located on the 'Overview' palette which is activated and located on the right side of my workspace. Notice the rulers' measurements on my Stork image which are substantially larger; yet, the image isn't much bigger - this is because I used the Zoom tool to reduce my Stork image by 50% its actual size to take the screen shot for this tutorial.

But, what do you do if you don't have an image to compare to and you want to make an image for your shopping cart or website? Well, if you didn't design either yourself, you could contact your webmaster or designer and ask for its dimensions and then decide how big you want to make your image. However, if you want the image for your blog, you can do this yourself by checking the HTML coding.

To give you a bit of history, when I decided to create my business blog, I went searching the internet for inspiration and came upon 'Quilting with the Past' created by Lucy, a quilter in the Netherlands. I liked the blog's simplicity, and open space and contacted Lucy and she kindly let me know she had used the 'Scribe' template and customized it herself. She has shared her customizing secrets with her many viewers which is very generous on her part; but, she is a quilter and isn't that what quilters do? So, like Lucy, I have used Bloggers' 'Scribe' template and had my webmaster at Wet-Coast increase its size and replace the template's antique paper look with a plain surface. I then created my own banner and the background is a seamless tile made from a Jo Morton fabric scan.

Sign into your blog and click the 'Layout' tab on the Dashboard and then click 'Edit HTML' below the Layout tab. You will not be doing any editing (so no clicking in the coding!!), but you are going to be scrolling down looking for some information.

The first piece of information you will look for is a 6 digit code that may be comprised of only letters, only numbers or both preceded by a number sign (image #1 above). Mine is #FFF3DB and this is the HTML colour code for my blog posting background. When you find that code, write it down because you will be needing it later. Note in image #1, that above my colour code it says 'width: 860px' - this is my 'customized' total width of my blog; and, if you are using the standard 'Scribe' template, yours will be smaller.

The second pieces of information you will look for are: a) the size of your main posting area - mine is 540px and b) the size of your sidebar which is the column that runs down the left of the Scribe template - mine is 150px (image #2 above). You may have to scroll closer to the bottom of the coding to find those numbers. Write down both those figures and then you can return to the Dashboard and sign out of your blog. Some of you may have two sidebars depending on your blog template.

The next step is to create a new image that you will eventually be copying and pasting your soon to be resized Stork image onto. Click the 'New' command on the Standard toolbar to open the New Image Dialog box.         

The size of you image will depend on where you want to place your image. I want to place my finished image in the left column so I know its width with be 150px and I eventually settled on a height to 235px after a few trials (so ignore those width and height settings in the left image and set your own). The other settings that you see in the dialog box are default settings and you can keep those. Next, move your cursor into the 'Colour' box and it immediately changes to an 'Eye Dropper' and you will also get a pop-up givig you 'RGB' (Red, Green, Blue) numbers of the past colour used which in my image is my actual blog paper background. RGB is another way of setting colours. If there is no colour present, but you see a checkered background that is because there is a check mark in the 'Transparent' box. Remove that check mark if it is there by clicking on it. Now, with the 'Eye Dropper' positioned in the Colour Box , do a left click.

You have now opened the 'Material Properties' Dialog box.  Take a few minutes and move the Eye Dropper all around the palette and you will notice it moves between being and Eye Dropper and an Arrow. You can also move over to your open Stork image and notice that it remains an Eye Dropper and begins picking up the RGB numbers for any area you move over (just like using EQ6!!). Go back onto the dialog box and move the Eye Dropper onto that little white circle on the rainbow coloured ring. Left click, hold and drag the circle around the ring. Notice that figures are changing in three areas below as you do this; as well, the colour in the box labeled 'Current' is also changing. This rainbow ring is where you can choose 'Hue.' The box within the ring is where you set the 'Tone.' Click in the small white circle in the 'Tone' box and move it around and notice the changes, particularly, in the 'Current' box. The variegated box below the ring is where you can do a quick web colour choice and adjust it using the ring or tone box if you wish.

There are three ways to set colour in this dialog box: a) using RGB (Red, Green, Blue) numbers; b) HSL (Hue, Saturation, Lightness) numbers, if you know them; or, c) HTML coding (aha, you say!) - yep, that is where you will enter your own blog colour code that you discovered earlier. So, enter the number sign and those six figures (you can use capital or small letters as it doesn't matter) and notice what happens in the 'Current' box - their is your blog paper background! Click 'OK' and the dialog box closes and you have your new image. You can left click and hold along the top bar of the image and drag it out of the way if you like.

Now, click along the top bar of your Stork image to activate it, then move up to your new toolbar and click the 'Resize' command button. Click in the box beside 'Advanced Settings' at the bottom of the dialog box and in the drop down make sure there is a check mark beside 'Resample Using' and in its drop down menu set 'Smart Size'. Check 'Lock Aspect Ratio' (leave the numbers alone) and check 'Resize all layers.'

Now, we are going to resize our Stork using only the 'Pixel Dimensions' area of the dialog box. In resizing your Stork, you only need to worry about determining its height and this will depend on whether or not you will want to add text to the final image like I did. Here, again, after a few trials, I ended up choosing a height of 165px, so, if you are following along using my settings, put 165 in the height area and because we have 'Lock aspect ratio' checked below, the width will automatically set itself. Click 'OK' and the dialog closes and your image is resized.

I mentioned in Part 1 that whenever you 'Resize' your image (Downsample) you get a slight blurring of the image that you need to correct and this is why I had you add the 'Sharpen Tool' command to your new toolbar. Click that command now. If you look at the image, you will see the legs of the Stork have taken on a 'jagged' appearance (mine have). I have tried the PSP X2 Sharpen Tool a number of times since writing Part 2 and I am not happy with the results. It seems much stronger than the similar tool in my earlier version of PSP. So, click the 'Undo' command on the Standard Toolbar to remove the sharpening and we will do it another way. Click on Adjust > Sharpness > Unsharp Mask and a new dialog box will appear. You never run out of dialog boxes in a photo editing program!

 The first step you will do in this dialog box is click on the 'Reset to default' button (above red arrow) - the 'Reset to default' button has the same appearance for all your tools and dialog boxes: it is that little left back sweeping arrow. I played with a number of settings and I am happiest with what you see in the image above. So, try them yourself and if you are happy with the appearance of the Stork in the 'After' box on the right, great. Notice in the box on the white 'Settings' line it says 'Last Used.' That is because I used the same setting when preparing a previous image. PSP will always open at the 'Last Used' setting on all its tools once they have been used. This is to speed things up if you are working on a number of images using the same settings. If after working in a number of situations, you find that you always use the same setting again and again, you can create your own 'Preset' for that tool by clicking on the 'Save Preset' Icon and giving your 'Preset' a name in the pop-up box. That preset will then always be there in the 'Load Preset' drop down menu. You will notice that PSP has already created some presets and you can try those out another time and see what you think. For now, use my settings and click 'OK.'

Next, do a right click on the top bar of your Stork and click 'Copy' then go to your new image, click on it top bar, right click and choose 'Paste as a new layer' and you have copied your resized, sharpened stork into the new image. Anytime you paste a new layer into an image, PSP automatically centres it in the image. So, we need to move our Stork layer.

Click on the 'Move' tool on the Tools toolbar and if you can't see it, click on the black arrow beside the 'Pick' tool. Move your cursor onto the image, left click, hold and drag the Stork up - did everything move? If so, click the 'Undo' command on the Standard toolbar above and go over to the 'Layers' Palette to the right and look below the 'Overview' palette (if you don't see Layers, go to the menu bar above the workspace and click on View > Palettes > Layers). On the 'Layers' palette click on the Stork (just like in EQ6, which is a graphics program, you have to be on the right layer to accomplish certain tasks!) and you should be able to move your Stork up. Now, click 'Undo' and click in the middle of the Stork and notice that this will activate that Stork layer, too (it may not have worked initially because you clicked more on the background and not on the Stork).

We have one more tool to use and this one is fun. On your new toolbar, click on the 'Drop Shadow' command.

Oh, look! Another dialog box! Click on the 'Reset to default' button and you should see all the settings that are set in the image to the left. Look at the 'After' box. Your Stork now has been given dimension with a drop shadow. Now, I would like you to play with the drop shadow by moving your cursor into the white box and position it over that cross hair (see red arrow). Your cursor will have changed into a thick pair of double arrows. Left click, hold, and drag those arrows around the white space and also move in and out of the centre. Notice the 'Offset' settings change as you do this and also watch the drop shadow in the 'After' box. Leave the white box and move over to 'Attributes' and click on the large arrow on the 'Opacity' setting and slide the bar in the drop down right and left. Watch what happens to the drop shadow as you do this. Do the same with the 'Blur' setting. You can use the 'Zoom' tool to see the overall effect of the drop shadow, too. You should try out all the settings in dialog boxes and also check to see if PSP has created any Presets for the tool. This will help you learn how your tools function under different settings. You will notice, too, that here you have the option to change the colour of your drop shadow if you wish a certain effect.

There is something you must think about if you decide to add a drop shadow to your blog or website images. Once you've decided on the direction of the shadow (right, left, above, below), then you should always apply those same settings to future images for continuity. The first time you add a drop shadow and say it is to the left of the image, you are telling your viewer there is a light source somewhere off to the right which is out of sight. If in the next image, you change to a drop shadow to the right then your saying the light source has moved to the left. Well, your viewer is going to feel something just isn't right on your site; although, he or she may not know exactly what.They will be concentrating on trying to figure out what is bugging them and not concentrating on your content! So, I advise making a drop shadow preset that you can also return to for your blog or website images. I have created one and labeled it '3 duck images' and here are the settings I have chosen for my blog images: Vertical = 4, Horizontal = -4, Opacity = 50, Blur = 7. You can try these or decide on your own.

Another thing to remember, is don't overuse an effect. The drop shadow is fun and its effect is neat, but if all your images have a drop shadow the overall effect on your site can be tiring. You will notice on my blog that I am selective with the drop shadow. When you want to see the overall effect of a block or colour in your quilt, you stand back; well, do the same with your blog and website. Sit back and look at the overall effect of the images, text, and logos you add to your blog. By nature, I like simplicity and clean lines and I think my blog reflects that; but, that is me and I don't expect others to share the same tastes which would make for a boring world if they did. But, do keep in mind that you can overdo an effect..

Now, once you've decided on your drop shadow settings, click 'OK' and they will be applied to the Stork. 'Save' and 'Name' your new image and we'll end here. In Part 5, we will learn how to apply text to the bottom of that image.