russian| Phone Search:
Hands-on with Nokia N96

We take the much-hyped Nokia N96 for a test drive in this Hands-On. This phone tops the NSeries line-up index-wise, but does it have the makings of a true flagship? We find out.

Review of GSM/UMTS-smartphone Nokia N78 S60 3rd edition Feature Pack 2 Samsung G810 - new flagship
Reviews Editorials Specifications


Rambler's Top100
AddThis Social Bookmark Button
Print this review

Creation of T610 themes with nice effects

Due to our collegue you can enjoy new themes in your Sony Ericsson T610.

Special thanks to MO for this tutorial, original version could be found here

Tutorial by MO

Programs to use:

In this tutorial I will make 19 pimothy'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:

  • Statusbar (128x14 px)
  • Wallpaper/Desktop (128x127 px)
  • Softkeys (128x19 px)

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" 4 times

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%"

See picture below. It is hard to explain.

(Try playing around with the "Bewel and Emboss" function also). Press OK two times.

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)

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 ;)

Published — 8 September 2003

Have something to add?! Write us... eldar@mobile-review.com

 

News:

 [ 09-10 18:46 ]LG-KC780 surfaces, boasts 8 Mpix shooter

 [ 06-10 12:15 ]Sony Ericsson shows a new way to zoom in/on with mobile phones

 [ 06-10 09:46 ]Samsung i7110's specs leak

 [ 03-10 22:43 ]Nokia rolls out S60 5th Edition for touchscreen devices

 [ 03-10 22:42 ]Nokia Music appliction for PC finally sees release

 [ 01-10 22:50 ]iPhone NDA dropped by Apple

 [ 01-10 21:06 ]LG KP500: cheapest touchscreen handset yet

 [ 01-10 20:19 ]LG KC780: thinnest 8MP camera phone

 [ 29-09 21:43 ]Andriod-based handsets coming from LG and Samsung, in Q3 next year

 [ 28-09 20:30 ]Sony Ericsson K750 successor, with 5MP camera leaked

 [ 25-09 23:54 ]8MP LG slider leaked

 [ 25-09 19:53 ]9MP camera module with autofocus now available

 [ 25-09 18:12 ]Sony Ericsson Play Now Plus to launch soon

 [ 25-09 17:16 ]Nokia looking into advertising in S60 handsets

 [ 24-09 23:51 ]Nokia 5800 Tube to launch in a week

 [ 24-09 21:16 ]LG Prada breaks 1 million mark

 [ 24-09 11:06 ]New Android walk-throughs and demos

 [ 24-09 10:04 ]T-Mobile finally rolls out Android-based G1

 [ 23-09 23:59 ]T-Mobile G1 to feature seamless integration with Google applications

 [ 22-09 16:16 ]First Android phone caught on camera


Email

Subscription settings
© Mobile-review.com, 2002-2008. All rights reserved.