Making Barwork For Sony Ericsson Themes In Ghassemoo's Style! Options

[ghassemoo]

I had some requests to explain how I make my theme softkeys. Do you like to know too?! So... Let's go!

STEP 1
Let's start with a good background in 240x320 px size like this:
(IMG:http://img704.imageshack.us/img704/8965/step01y.jpg)


STEP 2
Add SE logo in hub of you bachground.
(IMG:http://img695.imageshack.us/img695/2844/step02h.jpg)


STEP 3
Creat a new document sized 240x30 px. Select foreground color (#3D3D3D) and background color (#7F7F7F) and fill your document with "Gradient Tool" (Left and Right with 3D3D3D color and Middle with 7F7F7F color)
(IMG:http://img692.imageshack.us/img692/2266/step03.jpg)


STEP 4
Select half of your document with "Rectangular Marquee Tool".
(IMG:http://img411.imageshack.us/img411/1596/step04.jpg)


STEP 5
Select foreground color (#222222). Creat a new layer and draw linear gradient (Foreground to Transparent) from top to the bottom. Then change layer mode from "Normal" to "Soft Light". Now click "Ctrl + E" and combine 2 layers.
(IMG:http://img52.imageshack.us/img52/7092/step05small.jpg)


STEP 6
Move your 240x30 px document to bottom of your background picture (with 1 px distance from the down) and change layer mode from "Normal" to "Color Dodge". This is your softkeys background.
(IMG:http://img514.imageshack.us/img514/7404/step06small.jpg)


STEP 7
Make statusbar background like softkeys bachground.
(IMG:http://img580.imageshack.us/img580/5237/step07small.jpg)


STEP 8
Now we want to make frame of softkeys and statusbar. So select an area (sized 240x2 px) with "Rectangular Marquee Tool". Select foreground color (#626262) and background color (#FFFFFF). Creat new layer and draw linear gradient from left to right (Left and Right with 626262 color and Middle with FFFFFF color).
(IMG:http://img175.imageshack.us/img175/8747/step08.jpg)


STEP 9
Go to Layer/ Layer Style/ Stroke Style and add stroke to your frame with this parameters:
Size: 1 px
Position: Outside
Blend Mode: Normal
Opacity: 50%
Fill Type: color
Color: 000000
(IMG:http://img295.imageshack.us/img295/6796/step09small.jpg)


STEP 10
Duplicate your frame and insert that bottom and top of your softkeys and statusbar.
(IMG:http://img210.imageshack.us/img210/1112/step10s.jpg)


STEP 11
Duplicate twice top frame of softkeys and bottom frame of statusbar and insert new duplicated frames below your frames with 2 pixle distance.
(IMG:http://img522.imageshack.us/img522/3411/step11g.jpg)


STEP 12
Remove some of the parts of your new duplicated frames and then combine all frames to 1 layer.
(IMG:http://img227.imageshack.us/img227/9274/step12.jpg)


STEP 13
Change frame layer mode from "Normal" to "Over Layer".
(IMG:http://img96.imageshack.us/img96/787/step13small.jpg)


STEP 14
Duplicate frame layer and change frame duplicated layer mode from "Over Layer" to "Normal" and set Opacity 60%.
(IMG:http://img294.imageshack.us/img294/1981/step14small.jpg)


STEP 15
Select an area of softkeys background with "Rectangular Marquee Tool" and "Polygonal Lasso Tool" and duplicate softkeys background on it then change duplicated layer mode from "Screen" to "Luminosity".
(IMG:http://img176.imageshack.us/img176/3392/step15small.jpg)


STEP 16
Go to Edit/ Fill and fill selected area by this pattern (With Opacity 25%).
(IMG:http://img532.imageshack.us/img532/171/step16small.jpg)


STEP 17
Go to Layer/ Layer Style/ Bevel and Emboss and set parameters like picture.
(IMG:http://img217.imageshack.us/img217/1718/step17small.jpg)


Main screen of our theme is ready!
(IMG:http://img227.imageshack.us/img227/4474/jasperse.jpg)

You can download PSD file here

I made another elements like main screen and this is preview of finished theme:
(IMG:http://patricia.mobile9.com/download/wmpreview/300/1274810204-1.png)

You can download this theme here (v4.6) and here (v4.7)

[shadowthemes]

Thanks for providing this tutorial (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/clap.gif) .this will help me to create a good SE theme.(IMG:style_emoticons/default/laugh.gif)

This post has been edited by shadowthemes: May 25 2010, 04:59 PM

[ronaldo23]

Yes what a great tutorial indeed ghassemoo (IMG:style_emoticons/default/clapping.gif) (IMG:style_emoticons/default/clapping.gif) thanks for sharing (IMG:style_emoticons/default/smile.gif)

[findgirl45]

wow !!!!!!!!!!! what a great tutorial Ghass bro (IMG:style_emoticons/default/clap.gif) (IMG:style_emoticons/default/clap.gif) (IMG:style_emoticons/default/clap.gif) (IMG:style_emoticons/default/clap.gif) i am speech less (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif)

[_anuj_]

This is an amazing tutorial, thanks for taking the time to do this (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/clap.gif)

[pingallery]

This is a very beautiful and full instructions. (IMG:style_emoticons/default/wow.gif) (IMG:style_emoticons/default/clapping.gif) (IMG:style_emoticons/default/clapping.gif)
Very well done. Thank you for that!

What else can I learn from you? (IMG:style_emoticons/default/winkiss.gif)

[ghassemoo]

@Shadow, @Rony, @Sonia, @Anuj and @Petra. Thanks to all of you! (IMG:http://www.emoticons.free.fr/smileys/Emotion-Thanks/thanksjap.gif)

[ArthurWill]

Did you just reveal your secret recipe to others? Hehehe, thanks for writing this tutorial Ghasse, I am sure lots of people will find this useful for them. (IMG:style_emoticons/default/thumbsup.gif) (IMG:style_emoticons/default/notworthy.gif)

[angelnaina]

woooow awesome tutorial. (IMG:style_emoticons/default/wow.gif) (IMG:style_emoticons/default/wow.gif) ..Hats off to you (IMG:style_emoticons/default/notworthy.gif)

[ankur_shah88]

this tutorial is for sony ericsson, can you provide any tutorial for nokia?
or is it same in both cases?

[cute_heart]

This is awesome bro , thanks 4 the trip

[arbri135]

@Ghaseemoo Thank you so much

This tutorial was very helpful

By the way i made this
(IMG:http://patricia.mobile9.com/download/wmpreview/300/1275665819-1.png)

This post has been edited by arbri135: Jun 5 2010, 02:51 AM

[ghassemoo]

@Patricia, @Naina, @Imran, Thanks. (IMG:style_emoticons/default/notworthy.gif)

@ankur_shah, I think you can use this tutorial for making nokia themes. Form is same just size of elements is different.

@Arbri, Nice job mate. Keep it up. (IMG:style_emoticons/default/thumbsup.gif)

[shaon007009]

Oooooopppssss.. I forgot to say thanks.. Big thanks to you bro.. It's helps me a lot this time.... (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif)

[ghassemoo]

Oooooopppssss.. I forgot to say thanks.. Big thanks to you bro.. It's helps me a lot this time.... (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif) (IMG:style_emoticons/default/notworthy.gif)

Your welcome mate. (IMG:style_emoticons/default/wink.gif)