In this example I will make a K800-theme. I've set up my toolbars in PSP to look like this:
-----------------------------------------------------------------------------------------------------------
Here you find the images I made in this tutorial:
Layered:
http://www.skorpan.dk/tut/wall1.pspimage
http://www.skorpan.dk/tut/wall2.pspimage
http://www.skorpan.dk/tut/wall3.pspimage
http://www.skorpan.dk/tut/wall4.pspimage
http://www.skorpan.dk/tut/wall5.pspimage
Finished:
http://www.skorpan.dk/tut/wall1.png
http://www.skorpan.dk/tut/wall2.png
http://www.skorpan.dk/tut/wall3.png
http://www.skorpan.dk/tut/wall4.png
http://www.skorpan.dk/tut/wall5.png
-----------------------------------------------------------------------------------------------------------
First off, create a new image.>
Brings up this dialog:
I will make everything except the highlights and tabs in one image, so I make
a blank image: 240 in width and 320 in height with transparent background.
That will give you this:
The checkered pattern is to indicate that the area is transparent.
I find the rulers to be very helpful and if you want to activate them go here:
(If they’re not set to show pixels, change that in "file"-"preferences"-"general program preferences" – under the tab "units").
First is to select a background for the theme.
I will make a corporate theme and this is the background I start off with:
This image is 800x600 so I need to cut that down a bit..
I make a selection with the selection tool and these settings:
ctrl+c copies the selection and ctrl+v will paste it as a new image and that's what I will do.
Giving me this:
Now I will resize it to fit my theme-image which is 240x320.
Brings this up:
Very important! See to it that "Smart Size" is chosen and
That "Lock aspect ratio" is checked. I enter the width I want,
and that's 240 in this case. The height will automatically follow
and ignore that it's not 320 at the moment. Hit OK.
You will now have a smaller version of the original picture.
Press ctrl+c to copy the image.
Go to your blank 240x320 image and hit ctrl+e which
will paste the image as a floating selection:
Now just center it where you want it. When using the Smart-resize the image will get a bit blurred.
To fix this, we simple sharpen it:
Stage 1 complete.
Now we have some space above and below the image to fill out.
Choose the dropper tool:
This tool is used to pick any color from whatever you click it at.
And to match the rest of the image we need the exact color so what
we fill in matches the background perfectly.
With the dropper tool, now click on the white part of the image.
This will give you this in the "Materials" toolbox:
(Left mouse-click sets foreground, right mouse-click sets background)
We just set the foreground color, make sure that solid color is selected for foreground:
Click this one.
And choose the first (solid color).
Now we can take the fill tool:
In your 240x320 image, make a new raster layer:
Just OK the box that follows. With the fill-tool, left-click anywhere in the image.
It will give you this:
What is this!? All white? That's not what I wanted!
But don't worry, this is easily fixed.
What we have done is filled the whole image with a white background
on top of the layer with the company logo. This is what's neat with layers.
Now we just need to bring the logo-layer on top of the white layer.
This is the layer-toolbox:
We simple drag the top layer (raster 2) and drop it under the first layer (Raster 1).
And the image will look like this:
We now have a complete white background in the bottom layer
with the logo sitting in a layer of its own on top.
Stage 2 done.
I won't start with the softbar/statusbar just yet. This background needs some work first.
It doesn't look very exciting as it sits right now. What to do? This is where your sense of colors
and style comes in handy. What can we mix with this to make it look good? I will keep it very simple.
The logo is only black and white so I won't get any colors into this one.
I will only use a black gradient from the top and the same coming from the bottom.
First we need a new layer but before you make that, click once on the top layer, making it active:
This is because every new layer you create will be created above the layer that is active
and we want these black gradients to stay on top of everything at this stage.
Now we make a new layer:
We return to the image and make a selection on the top half of the image:
Make sure the selection goes all the way out to the left and right.
Now we pick the fill tool once again:
We turn to the "Material"-toolbox.
Click on the foreground color:
Brings this one up:
Click the "Gradient"-tab. Then click on the gradient that is selected.
A new windows pops up:
Here we look around for a fading black color. And there is at least one by default.
Choose a black to transparent gradient as the one marked above.
There are four different ways of producing that gradient.
We want a linear gradient from top to bottom like in the image below.
(If we would like it from bottom to the top we can just tic the "invert" box.)
(If you don't find any gradient that works, find the closest one
and click "Edit..." and you can make them look as you'd like.)
There, all done, click OK.
Now using the fill-tool, click in the selection we made in the 240x320 image.
The result should be something like this:
Now we want the same for the bottom and we could do the
same process all over again but we'll take shortcut instead..
Right-click on the top layer and choose "duplicate":
Now we've made a copy of the black gradient layer,
now all we have to do is flip it:
Giving you this:
So what do we have so far? One layer at the bottom, all white.
One layer above that one with the logo.
One layer with the black gradient from top to bottom.
And the top layer is a flipped copy of the black gradient.
I would do so much more to this but I promised to keep it simple
so this will do as background. Now we will start with the softbar!
The softbar is 240x30 so we'll make that selection at the bottom,
but we'll go crazy and make a little bigger softbar, 240x32:
We will fill this with a pattern so we go the the "Materials"-toolbox
once more and click the foreground color.
It gives you this:
We pick the "Pattern"-tab. Choose a fitting pattern and I also picked a texture
to it by ticking the "texture"-box. Here you can play around for ages and get any
combination of patterns, textures, sizes, scales and angles. Try a few to see what
they do. I will pick the example above.
Now, create a new layer, choose the fill-tool and left-click in the softbar-selection.
And the result is this:
It doesn't look too exciting... So we'll add a shadow and a border to it.
Don't remove the selection because we'll use it for a couple of things.
Create a new layer..
We'll add the shadow first:
If you don't have any plug-in's, the default filters works just fine for this:
Brings this up:
Use these settings and click OK. Now we have a top layer with just a tiny shadow.
Without removing the softbar-selection, Create a new layer.
On the toolbar, choose this:
Brings this up:
We want our border to be within the selection we made so we choose "inside"
and make the border 2 pixels wide. We also tic the "anti-alias"-box which will make
the border smoother. So choose as above and click OK.
Gives you this:
The logo is pretty metallic so we can go for a metallic gradient for the border.
Off to the "Materials"-toolbox again. This time we use the background color,
to leave the settings for the foreground alone for the statusbar later on. Click in the background color.
Brings this up:
We choose the gradient-tab again and look for a metallic gradient. Metal Steel will do just fine.
But we'll make it with a twist so we choose to make it a sunburst-gradient:
When that is done we use the fill-tool and right-click in the selection.
It will give you this:
We'll leave the soft as that for now and turn to the statusbar.
Create a new layer..
The statusbar needs to be 24x240 but we'll make it 26x240.
I will explain why later.
Make the selection for the statusbar.
Now we have forground and background all set for filling
but we need a new layer so - create a new layer!
Left-click with the fill-tool in the selection.
Create a new layer.. Now we will add a shadow like we did on the softbar:
Gives you this:
Note that now we have changed the vertical setting so that the
shadow is going down instead of up! Click OK..
Create a new layer..
Now we will add the border to the statusbar.
We will modify our selection again:
Use the same settings as before.. It will give you this:
Now just right-click with the fill-tool into the selection and we're all done!
This is the standby-screen and now I will save the 240x320 as wall1.pspimage
But we're far from done yet!
This screen looks ok for standby but it will NOT work
as background for the navigation because it has both very bright parts as well as very dark.
The text will be very hard to read so we'll need to do some adjustments..
That's part 2! We will now make the background for the desktop.
For this I decided to remove the text totally.
So we turn to the layers:
If we move the mouse over the layers we get thumbnails of how the layer looks like,
we're looking for the layer with the logo and I just found it..
Now just click the eye to make the layer invisible..
The image now looks like:
Now I will just add a little title and the desktop will be done.
Click the top layer to make it active:
Then, create a new layer..
The title is 240x40 and now we will use the ruler to decide where to make the selection for it:
We remember the status is 24 in height so we start the selection from 24 pixels down
and if we move the selection down we get to 64 to get a selection that is 40 in height.
But I want a shadow to fit in there too so I will leave 3 pixels and make the selection
37 in height and 238 in width, leaving 1 pixel left and right.
Now we will modify the selection like before:
Same settings as before... Now we use the fill-tool and rightclick in the selection giving us this:
Ok, done.. But I think it got a bit much with that fill so I will do some adjusting to it..
First I will remove the top part of the title so I select the top of the title:
Then hit delete on your keyboard and the result is this:
Now I will fade the bars coming down from the statusbar: Still using the selection-tool we adjust the settings:
We start the selection from top right and move to the left while moving halfway down on the title:
When the selections is made it automatically widens into this:
That's the feather expanding our selection. Now we hit delete on the keyboard
and the result will be something like this:
Now we're left with this:
Now I think the title is just a little bit too sharp so I will set the opacity/transparency for it:
I just use the slider next to the layer and I decided for 80 for the title.
The result will be this:
Almost done.. Just a tiny drop shadow left. Now we need to select the title.
This is done like this:
Now click anywhere in the image and the selection will look like this:
Create a new layer..
We then set a drop shadow like before:
The setting will be these:
Giving you this:
I think the shadow is a little bit too strong so I will
use the opacity-slider for the shadow:
45 seems to be working in this case.. Leaving you with this:
The difference from no shadow is this: 
I think the shadow makes it look so much better so I'll use that one and the desktop is now finished.
Saving the layered image as wall2.pspimage.
Step 3 will be making the navigation background.
I could just use the background that I have right now but it looks a bit empty and boring so I will add
some detail to the background and for that I return to the original logo-image:
I've decided to use the X in the logo in the background so now we have to cut it from the image.
We will use the magic wand for this:
We need to play with the tolerance for this one:
The first click on the border of the X gives me this:
That's good but we need to get the center of the X as well, so we hold shift on the keyboard
and click the magic wand inside the X. We may need to do that several times and a few clicks later
all of the X will be selected:
We do have some of the surrounding in the selection, but we'll leave that in for now.
Now we press ctrl+c and then ctrl+v, pasting it in a new image. We do that because
we may need to resize it, but we'll see about that.
We can now close the original logo image.
Now we return to the 240x320 image and create a new layer..
Hit ctrl+e, pasting it into your image as a floating selection.
Now you can drag it along and place it where you want it.
I decided for this position:
Imo, this will look good but it will also make a functional theme.
Now we will fade the X..
16 on the slider will do just fine.
The result is this:
But the part at the bottom right on the X doesn't look very good
so we'll remove it.. We use the eraser:
There's lots of settings for the eraser but the most important in this case are
the size, hardness and opacity:
So, big in size and small in opacity will do the trick.
We zoom in to get it exactly as we want:
Now it's just to click away to remove the part we want to get rid of.
Some clicks later we're left with this:
That will do, but we'll duplicate the X and make the duplicate even more faded.
So right-click on the top layer and choose "Duplicate":
Now we will move the duplicated X by first selecting "all":
Now we can drag the overlaying X to where we want it.
I decided for this position:
I will also adjust the transparency for this layer:
That's about it.. Now we have the navigation screen all set..
I save it as wall3.pspimage.
The K800 has a title that is 240x71 too and we'll fix that right now.
We'll continue working with wall3.pspimage. All we need to do is to
move the title down but we'll first combine the title-bar with the shadow
to make the move easier: We right-click on the layer with the title-shadow and choose "Merge Down":
This will combine the shadow-layer with the title-bar-layer.
Now we select all:
Now we start dragging the bar down to 95 on the ruler like so:
Why 95?? Well, the statusbar goes to 24, the title is 71, and 24+71 is ? Yup... 95.
The result will be this:
There, all done!
Now we can save this as wall4.pspimage.
Now we'll make the merged title-layer invisible by clicking the eye:
This is what we get:
We save that as wall5.pspimage
All except highlight are now basically done and this is when we start cutting.
Open wall1.pspimage and save it as wall1.png
Open wall2.pspimage and save it as wall2.png
Open wall3.pspimage and save it as wall3.png
Open wall4.pspimage and save it as wall4.png
Open wall5.pspimage and save it as wall5.png
Why we do this is just to get the images without layers, making the copying and pasting a bit easier,
also, we need png to be able to use in the theme creator.
So, open wall1.png
Now we'll cut out the status and soft:
Select 240x24 at the top:
(Now you see why we did the status a bit bigger, so that
the signal and battery-indicator will remain inside the border.)
To help you with the pixel-count, you can look at the bottom of your screen.
This will be very helpful when cutting for the some other screens later.
Hit ctrl+c and then ctrl+v, pasting it as a new image.
Save that image as status.png
Now select 240x30 at the bottom. Hit ctrl+c and ctrl+v.
Save that image as soft.png Close wall1.png and open wall3.png.
Make a selection 240x40 for the title:
Hit ctrl+c and then ctrl+v.
Save as 240x40.png Close wall3.png.
Open wall4.png.
Make a selection 240x71 for the big title:
Hit ctrl+c and then ctrl+v.
Save as 240x71.png
Close wall4.png
Open wall5.png
Make a selection 240x266 for the input:
(Starting from 24 pixels down)
Hit ctrl+c and then ctrl+v.
Save as 240x266.png
Do the same for the small input which is 240x226.
(Starting your selection from 64 pixels down)
Hit ctrl+c and then ctrl+v.
Save as 240x226.png
We will also use wall5 for the popup (214x234) and the morelist (212x193).
This is how you calculate where to start your selections for those screens:
For the popup you start at 40 pixels from the top and 13 from the left and then
make the selection 214x234 big. Hit ctrl+c and then ctrl+v - save as 214x234.
The same procedure goes for the morelist (212x193).
If all went well you will now have the screens you need to complete the theme.
Of course there will still be some work left;
The popup (214x234) will need some titles in the same style as the titles already made and maybe a border.
The inputs (240x266/240x226) will need some borders and maybe some overlaying gradient/pattern.
The highlights will have to be made and so does the tabs and desktop highlight.
I hope at least someone managed to get through this, understanding it and without losing hope..
/dr_megabyte @ mobile9.com