Creation of T610/T616 themes with nice effects.
Tutorial by MO
Programs to use:
Photoshop 7 (Download: http://www.adobe.com/products/photoshop/main.html)
Theme Creator Pro 3G (Download: http://members.lycos.co.uk/themecreator)
In this tutorial I will make 19timothy's request for "Batman the movie with a picture of Catwoman"
The T610 screen is divided into several sections. You have to make pictures for each section.
Total 9 images (statusbar.gif, wallpaper.gif, desktop.gif, softkeys.gif, menu.gif, popup_title.gif, highlight.gif, popup_highlight.gif)
---------- FIND THE IMAGE ------------
First, search the web for the picture you want to use. I usualy use Google Image Search to find the picture I want to use.
Here I type in "batman the movie catwoman". It came up with several pictures of Catwoman and I chose this one:
Click on the thumbnail on Google, so you can have the full size image, and save it (the full size image) to your harddisk.
Now you have what you're going to need. Open Photoshop, and import the picture you just saved...
You are now ready to start manipulating :) Your screen should look something like this:
---------- RESIZE THE IMAGE --------------
Now, in the Toolbox on the left on the screen, select the "Rectangular Marquee Tool".
In the top of the screen you now can see options for the Rectangular Marquee Tool. Choose the style to be "Fixed Aspect Ratio" and type in the width (128) and height (160 or 141 or 127). In this example I type in 128x160 (the full T610-screen).
Drag the little cross from the top left corner, down to the bottom right corner. You will this way select the picture in the correct aspect ratio, suitable for the T610.
You could also set the aspect ratio of the Marquee Tool to 128x141 (this means that the picture not fills out the whole T610 screen, and will not be a part of the softkeys)
When you are happy with your selection, press "Ctrl+C" (for copy). You could also go to "Edit->Copy" in the menu in the top of the screen.
Press "Ctrl+N" or go to "File->New..."
Remember ALWAYS when making new windows(workspaces) in this tutorial it has to be TRANSPARENT background
Press OK
A new window appears
Press "Ctrl+V" or go to "Edit->Paste"
Go to "Image->Image Size..."
Make sure that "Constrain Proportions" is selected and type in "128" in the Width-field
Press OK
The image is now resized to fit the phones screen.
----------- SLICE UP THE IMAGE ----------
Now we need to split picture up in parts that fits the T610. We need to split it up into 3 pieces:
To make it a little bit easier for us self we need to make some guidelines.
Go to "View->New Guide..."
Select "Horizontal" Orientation
And in position type "14px"
Press OK
Go to "View->New Guide..."
Select "Horizontal" Orientation
And in position type "141px"
Press OK
Time to slice it out...
To make statusbar in the correct format we set the Marquee Tool to use aspect ratio 128 and 14.
Drag from the top left corner, down across the image.
Your selection should fit to the guideline you just made.
Press "Ctrl+C" (copy)
Press "Ctrl+N" (new window)
Type "statusbar" (the windows name)
Press OK
Press "Ctrl+V" (paste)
Now you have your statusbar :)
Go back to the other picture. The one with the guidelines.
Now set aspect ratio of the Marquee Tool to 128 and 127
Drag across the image, from the top left corner.
Make sure your selection fits nicely between the two guidelines. It should "jump" in place automaticly.
Press "Ctrl+C" (copy)
Press "Ctrl+N" (new window)
Type "wallpaper_desktop" (the windows name)
Press OK
Press "Ctrl+V" (paste)
Go back to the picture with guidelines
Set aspect ratio to 128 and 19
Drag across the image, from the bottom right corner.
Press "Ctrl+C" (copy)
Press "Ctrl+N" (new window)
Type "softkeys" (the windows name)
Press OK
Press "Ctrl+V" (paste)
Close the picture with the guidelines. You will not need it anymore.
------------ MANIPULATE THE IMAGES ----------
The statusbar image is done. You do not have to do annything with it.
Lets now make the softkeys.
I use the softkeys from the Vodafone Blue Theme. I think they look nice.
Save this softkeys-image to your harddisk
(Right-click
and choose "Save Picture As...")
In Photoshop open this image.
Press "Ctrl+A" or go to "Select->All"
Press "Ctrl+C"
Close the window
Select the softkeys you sliced out before
Press "Ctrl+V"
The red softkeys should now hide the image you sliced out.
Press "Ctrl+U" or go to "Image->Adjustments->Hue/Saturation..."
Your screen should now look something like this:
Now adjust the hue, saturation, and lightness, until you think the color is right. In the example I choose
Hue: +30
Saturation -60
Lightness +20
Press OK
On the right of the screen you can see your Layers. In the softkeys image there are two layers. The first one (Layer 1) is the one you sliced out, and the second (Layer 2) is the softkeys you just changed color to.
Now you want the first layer to be seen trough the softkeys. Now set the opacity on the selected layer to 80%.
WOW !! Do you see the background shine through the softkeys. The softkeys are now done !!
Now it is time to make the desktop. Highlight the window you named wallpaper_desktop.
Press "Ctrl+A"
Press "Ctrl+C"
Press "Ctrl+V"
You now have to identical layers.
Go to "Filter->Blur->Blur"
Press "Ctrl+F"
Press "Ctrl+F"
Press "Ctrl+F"
Press "Ctrl+F"
Save this T610-desktop-image to your harddisk.
(Right-click and
choose "Save Picture As...")
Open it in Photoshop
Press "Ctrl+A"
Press "Ctrl+C"
Close the window
Paste it in the image with the two identical layers, where the one is blured. Paste it in by pressing "Ctrl+V"
In the toolbox select the "Magic Wand Tool"
With the Magic Wand Tool select the white color in the layer you just pasted in the image.
Press "Delete" or "Back-space" on your keyboard
With the Magic Wand Tool "Right-click" in the selection and choose "Select Inverse"
On the right on your screen, where you see your three layers (two identical, but the one blured and a transparent T610-desktop)
Right-click on the top-layer (the T610-desktop) and choose "Blending Options"
A window opens, and it is from this window you can control the shadows, strokes and glowing effects to you desktop icons.
I will in this example make them glow and give them shadow.
To make them glow push the "Outer Glow" button, select the color to be a bright color. Bright colors glow best. I choose white. You can also set the opacity up to make them glow a little more.
Play around with these settings and you you will find out what you like best
To make the shadow push the "Drop Shadow" button
In the example I use a red shadow color and the Difference blend mode, which gives a nice effect on my dark background. I set opacity to 100%
The desktop is done. (You can here also use the "Stroke" function instead of "Outer Glow")
Now select the blured layer.
You can make the other layers invisible/visible by pressing til eye-icon next to the layer. You will need this function, in the end when you are going to save the images.
Now select your Rectangular Marquee Tool and set aspect ratio to 128x104.
Drag across the image from the bottom right corner
Press "Ctrl+C"
Press "Ctrl+N"
Type "menu"
Press OK
Press "Ctrl+V"
Now you have your menu-image.
In this example, I want to darken the image a little, so it will be easier to read a light (white) text
To do this, press "Shift+Ctrl+N" or go to "Layer->New->Layer..."
Press OK
Select the "Paint Bucket Tool" in the toolbox
Select Black color and paint the new layer you just made.
It will now get all black.
Go to the opacity selector on the right on screen just above the layers. Set it to 50% and see the background peep through. Just as it did with the softkeys.
The menu is now finsihed.
Now only the two title-images and the two highlight-images is missing.
Press "Ctrl-N"
Type in "title" in name field
Type in "128" in width field (remember to select pixels)
Type in "23" in height field (remember to select pixels)
Because the title image has to be 128x23 px
Press OK
Now select the "Eyedropper Tool"
Head to your softkeys image and select a dark color with the Eyedropper Tool
Push the little arrow that switches between Foreground and Background Color
Now select white color, or at least a very bright color.
Push the arrow to switch Foreground and Background colors again
Select the Paint Bucket Tool
Fill the title image with the Foreground color (this should be the dark one)
Push the arrow to switch Foreground and Background colors again
Right-click on the layer and choose "Blending options" at the left of the screen. As you did when you made glowing shadow effects on the desktop image
Click on the "Inner Glow" button
Select white color and set opacity to 100%
Click the "Gradient Overlay" button
Click the gradient
In Gradient Editor choose the first preset (Foreground to Background color)
Then choose the bottom right color and slide it to left until the location says "65%"
Se picture below. It is hard to explain.
(Try playing around with the "Bewel and Emboss" function also)
Press OK
Press OK
Right-click the layer (at the right of the screen) and choose "Copy Layer Style"
Press "Ctrl-N"
Type in "popup_title" in name field
Type in "118" in width field (remember to select pixels)
Type in "23" in height field (remember to select pixels)
You have probably guessed that we are going to make the popup-title image now.
Press OK
Use the Paint Bucket Tool to fill the image.
Go to the layers section at the right of the screen
Right-Click on the layer and choose "Paste Layer Style"
You can change the Gradient Overlay colors by using the Gradient Editor as before. Instead of sliding the bottom right color to the left, just click it, and you will be available to choose color.
Press OK when youre happy with the color
Press "Ctrl-N"
Type in "highlight" in name field
Type in "123" in width field (remember to select pixels)
Type in "16" in height field (remember to select pixels)
You're now making workspace for the highlight
Press OK
Choose the color you want the highlight to be
Fill in the color with the Paint Bucket Tool
Right-Click the layer at the right of your screen and choose "Blending Options..."
Click on "Inner Glow"
Choose white color and set opacity to 100%
You've done it before ;)
Press OK
Press "Ctrl-N"
Type in "popup_highlight" in name field
Type in "113" in width field (remember to select pixels)
Type in "16" in height field (remember to select pixels)
You're now making workspace for the popup_highlight
Press OK
Choose the color you want the highlight to be
Fill in the color with the Paint Bucket Tool
Right-Click the layer at the right of your screen and choose "Blending Options..."
Click on "Inner Glow"
Choose white color and set opacity to 100%
You are now set, and finished with all images. You should have something looking like this:
Now what you need to do is save the images.
Select the "statusbar"-image
Go to "File->Save For Web..."
Select "GIF" - "256" colors
Press "Save"
Choose or create a folder to save the images in.
Press Save
Do the same with all images EXCEPT the "wallpaper_desktop" image
Here you have two images (wallpaper and desktop) in the same image, and you have to make the right layers visible, before saving.
First make sure that the two upper layers are invisible (the T610desk and the blured one)
Then you will have a clear wallpaper image
Go to "File->Save For Web..."
Press Save
Name the file "wallpaper"
Press Save
Now make visible the two upper layers of the image
Go to "File->Save For Web..."
Press Save
Name the file "desktop"
Press Save
Congratulations !! :)
Know the only thing you have to do is import the images to Theme Creator Pro 3G and chosse the colors.
And the result could be something looking like this:
You can download the theme here
You can download the images here: statusbar.gif, wallpaper.gif, desktop.gif, softkeys.gif, menu.gif, popup_title.gif, highlight.gif, popup_highlight.gif
I have not made tutorial for using Theme Creator Pro 3G, but if somebody needs it please say so :)
Hope you can use it, and happy theme-making ;)
/MO
