facebook| twitter|  russian| Phone Search:
  • RSS
Samsung Galaxy Note. First Look

Today, large companies, especially corporate giants like Samsung, do not surprise users with extraordinary products...

First look. Sony ST21i Tapioca Microsoft Windows Phone 7: Reasons for Failure First Look at Samsung Galaxy S3 as a 2012 Flagship
Reviews Editorials


Rambler's Top100

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... [email protected]

 

News:

[ 31-07 16:21 ]Sir Jony Ive: Apple Isn't In It For The Money

[ 31-07 13:34 ]Video: Nokia Designer Interviews

[ 31-07 13:10 ]RIM To Layoff 3,000 More Employees

[ 30-07 20:59 ]Video: iPhone 5 Housing Shown Off

[ 30-07 19:12 ]Android Fortunes Decline In U.S.

[ 25-07 16:18 ]Why Apple Is Suing Samsung?

[ 25-07 15:53 ]A Few Choice Quotes About Apple ... By Samsung

[ 23-07 20:25 ]Russian iOS Hacker Calls It A Day

[ 23-07 17:40 ]Video: It's Still Not Out, But Galaxy Note 10.1 Gets An Ad

[ 19-07 19:10 ]Another Loss For Nokia: $1 Billion Down In Q2

[ 19-07 17:22 ]British Judge Orders Apple To Run Ads Saying Samsung Did Not Copy Them

[ 19-07 16:57 ]iPhone 5 To Feature Nano-SIM Cards

[ 18-07 14:20 ]What The iPad Could Have Looked Like ...

[ 18-07 13:25 ]App Store Hack Is Still Going Strong Despite Apple's Best Efforts

[ 13-07 12:34 ]Infographic: The (Hypothetical) Sale Of RIM

[ 13-07 11:10 ]Video: iPhone Hacker Makes In-App Purchases Free

[ 12-07 19:50 ]iPhone 5 Images Leak Again

[ 12-07 17:51 ]Android Takes 50%+ Of U.S. And Europe

[ 11-07 16:02 ]Apple Involved In 60% Of Patent Suits

[ 11-07 13:14 ]Video: Kindle Fire Gets A Jelly Bean

Subscribe

Register | Lost password?

E-mail


Password




© Mobile-review.com, 2002-2012. All rights reserved.