I have been encouraged to write a column on how I design my backgrounds and graphics so here it is for what it's worth!
Hope it will help some people!
I have uploaded all of the pictures used to illustrate this column to my photo bucket account where you can view them as larger clearer images by clicking on any of the images to enlarge them from this page:
http://s179.photobucket.com/albums/w294/kazytc/AP%20Column%20Graphics/?start=all
Or if you click on each image it will take you to an enlarged version of it in Photobucket, and if you want to view that image larger again, just click on it.
There is a sequel column to this one up at:
http://allpoetry.com/column/show/2346777
I use a design programme known as
"Adobe Photoshop Elements"
See:
&
I have used this design programme for many years now
It is simple to use
I have used it to create graphics for my own web sites see:
Both web sites were created in basic HTML using a design programme called:
OK lets go into Adobe Photoshop Elements ....
This is the opening interface of Adobe Photoshop Elements:
(* Remember - if click on each image it will take you to an enlarged version of it in Photobucket, and if you want to view that image larger again, just click on it*)
The white box centre of the screen asks:
---------------------------
"New"
"Open"
"Paste"
"Acquire"
"Tutorial"
"Help"
Close.
----------------------------
You select "NEW"
Then you get this box on screen:
This box invites you to select the
dimensions you want your background to be in.....
In the grey box centre of the interface you then see
You need to use the drop down boxes in the little grey window to select
Pixels for the width and the height dimensions.
The width needs to be:
1600 pixels
for an AP background
(Kevin's advice)
If you want to use the maxium pictures in the left border I have found that
the maxium height dimension needs to be set at:
980 pixels.
(I tried to make one deeper and it failed to upload to AP).
Once you have set the dimensions and clicked "OK"
The basic window in which you can design your background appears
as below:
Design Colour Mode Settings
But it will be set to design in 'Gray' scale so you need to change this to
'RGB Colour' so that your design is will come out in colour.
To set the design to RGB colour click 'Image' on top left side of the upper task bar and then go to "Mode" and select "RGB Colour".
Next you need to select the "Paintbucket Tool"
This is on the thin grey tool interface left of your Adobe Screen see:
^
^
The "Paintbucket Tool" has the icon of a bucket with paint pouring out of it!
Next you need to select the colour you want for the whole page:
To do this you click on the BLACK SQUARE
on the bottom of the thin grey strip interface left of your screen see:
This brings up another dialogue box as you can seefrom the above screenshot.
(If you want the colour of the background to be basically black, then you ignore the page colour selection bit).
If You want a different colour to black then you simply click your mouse on the colour you want in the colour strip on the colour picker interface (show above).
Once you have the basic colour by doing that, you can then select the shade by clicking anywhere in the larger colour window to the left of the multicoloured strip on the colour picker interface. See:
Once you have done this and clicked on "OK" then you will see that the top square that was previously black on the bottom of the thin grey strip left of your user screen, has changed to the colour you have chosen for your overall page colour See:
^
^ * Note that theblack square is now purple as I chose it to be*
Ok now you click your mouse anywhere in the large white rectangle in the centre of your screen and the paintbucket tool previously selected will change the whole working area from white to the colour you have chosen (purple in this example) see:
There are many things you can do from here...
You can make the page have a lovely gradient colour effect:
To make a gradient first of all you need to click on the gradient tool on the thin gray strip to the left of your screen this is the 4th icon on you see in the right hand column on this tools interface.
Next you need to edit the gradient effect by clicking on the "EDIT" button seen in the picture below, its just above the word "Untitled" on your working rectangular window (now coloured purple)
V
V
Click on the "EDIT" button to get this screen up:
^
^ *Note the little tiny coloured squares underneath the long
thin colour strip on this interface, one is green, another is
yellow, to the far left of the strip*
You simply click on these tiny little squares (which can be slid to the left or right along the thin colour strip into any position to change the location of the colour on the page when set) and you can select the desired gradient colour see:
In the same was as you chose the overall page colour you use the (same) colour picker interface to chose each gradient colour tab, one after another in the same way as the first, see:
Once you have managed to choose the preferred colour, click "OK"
Then you should see the change in the thin gradient colour bar:
* Note the tab has changed colour and also the part of the gradient strip to match this*
Do the same with all tabs until the thin gradient strip is the way you want the colours to look on your page, (represented by the thin strip on the gradient editor interface). As below:
OK thats complete now click "OK"
Then you need to apply the gradient to the working area (the purple rectangle) :
This is the basic working area screen before you change the working area to a gradient:
To change the rectangular working area to a gradient click your mouse in the centre of the left hand side of the working area (anywhere centre of the side of the purple working area of the rectangle). Once you have done this keep your finger pressing down on your mouse (left side of mouse) and effectively draw a line across the working area from left to right and if needs be up or down so that this line will be completely straight and not jagged and then once it is straight from the left edge to the right edge, take your finger off the mouse button and the working area should have changed to look something like this:
* Note the bands of gradient colour replace the plain former background*
OK thats the gradient sorted!
You can make the gradient into a curve by selecting "Filter" across the top of the interface and then selecting "Blur" and then selecting as below:
You select : "Filter" then "Blur"and finally "Radial Blur"
This brings up another dialogue box like this:
Slide the slider across to 100% in top of the box and then select (radio buttons) "Spin" then "Best" then click "OK".
The programme then loads the effect which will look something like this:
Want to jazz the colours up?
OK then this is how....
Click "Filter"
Then Select "Render"
Then select "Lighting Effects"
This brings up this dialogue box:
*Note the centre white spot (a straight white line runs diagonally down to the bottom right corner from it)*
Click on the white dot centre (as noted above) and keeping your left mouse button depressed move the white spot across to the left hand side of your working area .. see:
OK now you need to change the slant on the oval lighting area so what you do is to click on the bottom of the straight line (running from the centre of the oval to the bottom edge) and keeping your left mouse button depressed, simply drag the line to the left until the straight line is vertically straight as below:
Now you can choose how you want to light the area by clicking on any of the dots on the outer edge of the oval and pulling them in any given direction to stretch the oval until the lighting is as you like it.
The slider bars to the right can be used to change the metalicity, focus, matte, plastic etc effects of the lighting, to get an effect like this....
*Note "Default" "Spotlight" was chosen in the drop down selector boxes*
Once you like the effect click "OK".
You should get something like this:
Want to add texture to the overall basic design? OK here's how:
For a glass texture click on "Filter" then select "Distort" then "Glass" as shown above.
This brings up this dialogue box:
In this dialogue box (as shown above) youn use the sliders to select the "glass" effect and its intensity, I tend to choose these slider positions:
Once you have selected the intesity of the effect using the sliders as shown above click on "OK" the programme then applies the effects. They are usually subtle so don't always show a dramatic change but then you are left with something like this basic design:
Want to add pictures to the left side?
OK you need to locate the pictures you want to use in the files of pictures you have on your computer and then open each of them up in Adobe Photoshop Elements by clicking on "File" (top left) and then click on "Open" and this brings up this dialogue box:
Select the pictures folder you want pictures from, as above. Then click on the folder they are in, and then select the images you want to open, and open each one in Adobe Photoshop Elements in exactly the same way until they are alll open in the programme.
I advise"Duplicating" each image and closing the originalsso that you have original copies and you can then change the size of the images you are using as required.
To "Duplicate" each image, click on the image and then click "Edit" (top left) and then select "Duplicate" this will open up a copy of the original image (right over the top of the original). Lower the image so you can close the original. Then you need to alter the image to the size right for the border.
AP margins are about 200 pixels wide (left side in) and so the width of the pictures you chose needs to be no wider than 200 pixels.
If you are working on a 1600 pixels wide by 980 pixels deep the width needs to be around 150 pixels wide, or no more than say 175 or 180 pixels wide so that when it is placed on the working area it won't obscure text from your poem by being too far into toward the centre of the page from the edge.
Usually when you alter the width you automaticaly alter the height and the less high the images are the more you can fit in a vertical stack up the left margin of your working area.
Ok so lets take the first image you want to use in the left border of your background here it is aside the working area on your user interface .....
Now for resizing the image to fit into the left hand side of the border:
Top left click "Image"
then select "Resize"
then select "Image Size"
see:
Having selected the image tools as above now you need to set the dimensions of the image.
You should now have a new dialogue box up which enables you to do this see:
In the resizing dialogue box (as above) ...
I have set the width to 170 pixels and the depth is automatically set in line with the proportions of the picture.
You need to set each image at 170 pixels to match, in the exact same way as above until you have all images resized ready to be placed on the border, see:
Ok so now you have 4 images ready to position down the left hand side of your border.
In the thin tool box left of your screen you select the "arrow" icon which is the the top one in the second / right hand column, this will enable you to drag the images into place...
So you use your mouse with left hand side depressed to systematically drag each of these 4 images from outside the working area into the working area of your background, one at a time, into position down the left hand side, ensuring that they are all in line one underneath the other as below:
*Note - Even though you have dragged the images into place from the right to the left of your working area, you will still see the originals remain to the right where they were, as you are dragging a copy across so having dragged the images across you can just close each picture once you have done so and then you are left with the basic working area see:
*Note: I have moved the BG working area across in the Adobe Photoshop Elements user interface to make it easier to work further on*
OK, so you now have a basic pictoral background. Which even as it is you can save and use. I save it as a psd and a JPEG file and when saving it as a JPEG file I select to use "High" quality.
This is the BG file saved as it is:
Ok so having saved that as file in its own right and ensuring that whatever you do next you have that basic design on file, you could go on to create a new BG using the same file (remember though to save any new designs with different name or you will lose the original!).
So how about creating a smudged effect? I have been asked "How do I get the "flaming effects"!
Here is how:
First you need to flatten the images, if you don't you won't be able to smudge them.
To flatten the images click on "Layer" and then select "Flatten Image" see:
Having done that the images will now have been flattened and secured in place on the BG.
Then you select the "Smudge" tool in the slim grey box to the left of the BG, the "Smudge" tool is the finger icon, which is the 9th icon down in the right hand column on the tool bar see:
OK having selected the"Smudge Tool" you can either leave the Smudge tool the same size smudger oryou can change the size of the smudges/brush strokes by clicking the "Brush" Edit button on the top taskbar see:
* Note I didn't change the brush size from the size automatically set, for this design*
OK so now you are ready to Smudge the pictures to create the flamed or smuged effect.
To do this you simply click on the endge of each picture and keeping your left side of your mouse depressed you pull the edges outward from around the picture see:
Continue until you have something like this....
OK so you need to save this as it is, and having done so this could be a smudged version on file and for use as it is looking something like this:
OK want to add some hearts?!
Open up the file with the hearts pic in and select this, as you did for the images used.
Then in the same way as you added the basic pictures to your BG you do the same with the hearts, dragging them across from the same original to the BG and positioning them in place. See:
Save this as a file so that you will always have a copy of your BG design as it is this is what you have now:
OK want to add your name/text and use it as your author page BG?
Here's how:
Select the "HorizontalType Tool" on the slim grey box in the Adobe Photosshp Elements interface (the icon which looks like a captial T = 3rd icon down in right hand column) as below:
You need to set the font type next. (My choice is "Book Antiqua"). See:
You click on the arrow in the drop down selector box in your top taskbar and scroll down to find the font you want and then you click on the name of it.
Having selected the font you then need to select the colour of the font, and I am going to choose white and this is how to do this:
Below is a screenshot of the Adobe Photoshop interface and you can see where it says "Set the Text Colour"
V Note the black square, click on this
V
Once you have clicked on the black square this brings up another dialogue box as seen below:
To select your colour click on the vertical colour band strip on the colour you want and this changes the larger coloured area to that colour and shades of it, and then you simply click on the part of the larger coloured panel to select the exact colour shade you want.
Alternatively you can simply enter the code for the colour in the small bottom right hand box. White = FFFFFF Black = 000000.
Once you have done this click "OK" top right of the dialogue box, this has now set the colour of the font and this will replace the black square that was once on the top task bar, to the colour you have chosen.
Then you can write the text you choose like this....
For now, just write the text anywhere on the working area as this can be moved into position afterwards.
If you want to change the font size this is how you do this:
First run your mouse over the text from left to right to highlight the text as below:
Having done so then you select the size you want to change it to, I am selecting 48pt for this BG this is how:
Just simply click on the size you want after clicking on the "Set the Font Size" option on the top taskbar using the drop down button as seen above.
This will change the size of what you wrote on the working area of your background.
Having done that you need to move the text into position and to do this you click on the "arrow button" on the thin grey tool bar to the left of your interface and this is the icon which is the top button on the right hand vertical column.
Having selected the "arrow tool" you then click on the text and it will look like this once you have:
Once you have done this, keep your left mouse button depressed and drag the text over into position like this:
Once you have set the text in place you simply save the image as both a JPEG and also a PSD file and then you simply upload this as a custom background in AP setting the margin width to 200 pixels to save the text of your author or poem page from overlapping it.
This is how the background looks once saved:
Other than more advanced texturing and special effects, that is just about all there is to know about how I create the sort of backgrounds I have uploaded to my AP author page and also some of my poem pages.
Simple really! Just looks a lot reading the above but its not rocket science!
I have uploaded all of the pictures used to illustrate this column to my photo bucket account where you can view them as larger clearer images by clicking on any of the images to enlarge them from this page:
http://s179.photobucket.com/albums/w294/kazytc/AP%20Column%20Graphics/?start=all
By all means dowload all of the images and copy this entire page to a word document for reference, and if any of you want to use any of the images I have uploaded to my Photobucket account or any of the albums in this please feel free to do so these are viewable at:
http://s179.photobucket.com/albums/w294/kazytc/
The list of albums are down the left hand side of the page click on any of them to access each individual album.
I upload and add more to my Photobucket account daily and also add new albums daily too, so keep checking in for new material.
Hope this has been of some help to you all.
Thanks for reading and have fun designing!
Artistic Hugs, Thanks Millions & Best of Luck to you all in all contests!
Kaz.
Kazytc
xx xx
Adding your comment:
Love the creativity of smudging to, nice effect! Superb job here! 
