Help - Search - Members - Calendar
Full Version: Making Barwork For Sony Ericsson Themes In Ghassemoo's Style!
mobile9 Forum > ThemeMaking > Chat, Tutorials & Resources > Tutorials
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:



STEP 2
Add SE logo in hub of you bachground.



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)



STEP 4
Select half of your document with "Rectangular Marquee Tool".



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.



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.



STEP 7
Make statusbar background like softkeys bachground.



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



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




STEP 10
Duplicate your frame and insert that bottom and top of your softkeys and statusbar.



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.



STEP 12
Remove some of the parts of your new duplicated frames and then combine all frames to 1 layer.



STEP 13
Change frame layer mode from "Normal" to "Over Layer".



STEP 14
Duplicate frame layer and change frame duplicated layer mode from "Over Layer" to "Normal" and set Opacity 60%.



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



STEP 16
Go to Edit/ Fill and fill selected area by this pattern (With Opacity 25%).



STEP 17
Go to Layer/ Layer Style/ Bevel and Emboss and set parameters like picture.



Main screen of our theme is ready!


You can download PSD file here

I made another elements like main screen and this is preview of finished theme:


You can download this theme here (v4.6) and here (v4.7)
shadowthemes
Thanks for providing this tutorial notworthy.gif clap.gif .this will help me to create a good SE theme.laugh.gif
ronaldo23
Yes what a great tutorial indeed ghassemoo clapping.gif clapping.gif thanks for sharing smile.gif
findgirl45
wow !!!!!!!!!!! what a great tutorial Ghass bro clap.gif clap.gif clap.gif clap.gif i am speech less notworthy.gif notworthy.gif notworthy.gif notworthy.gif notworthy.gif
_anuj_
This is an amazing tutorial, thanks for taking the time to do this notworthy.gif notworthy.gif notworthy.gif clap.gif
pingallery
This is a very beautiful and full instructions. wow.gif clapping.gif clapping.gif
Very well done. Thank you for that!

What else can I learn from you? winkiss.gif
ghassemoo
@Shadow, @Rony, @Sonia, @Anuj and @Petra. Thanks to all of you!
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. thumbsup.gif notworthy.gif
angelnaina
woooow awesome tutorial. wow.gif wow.gif ..Hats off to you 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
ghassemoo
@Patricia, @Naina, @Imran, Thanks. 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.
thumbsup.gif
shaon007009
Oooooopppssss.. I forgot to say thanks.. Big thanks to you bro.. It's helps me a lot this time.... notworthy.gif notworthy.gif notworthy.gif
ghassemoo
QUOTE (shaon007009 @ Jun 1 2010, 12:37 AM) *
Oooooopppssss.. I forgot to say thanks.. Big thanks to you bro.. It's helps me a lot this time.... notworthy.gif notworthy.gif notworthy.gif

Your welcome mate. wink.gif
shalu2173
Wow!! Ghass !! Amazing..You are just not superb in making excellent themes but also providing a well descriptive tutorial 10.gif ...Outstanding..Great job!! notworthy.gif notworthy.gif

Thanks a ton !!
ankur_shah88
QUOTE (ghassemoo @ Jun 1 2010, 12:51 PM) *
@ankur_shah, I think you can use this tutorial for making nokia themes. Form is same just size of elements is different.


thanks i will try.
Alamin007
thank u so much bro..... clap.gif clap.gif clap.gif
novchanthol
Thank for tutorial !
Asad_rider
Im using Adobe photoshop 7 and i think there is no Polygonal Lasso Tool ... plz can any one tell me where it is in adobe photoshop7?
_anuj_
QUOTE (Asad_rider @ Aug 6 2010, 08:56 AM) *
Im using Adobe photoshop 7 and i think there is no Polygonal Lasso Tool ... plz can any one tell me where it is in adobe photoshop7?



Yes there is is if you right click on the button for the lassoo tool it gives you the option to chosse between 3 types
Asad_rider
QUOTE (_anuj_ @ Aug 6 2010, 01:05 AM) *
QUOTE (Asad_rider @ Aug 6 2010, 08:56 AM) *
Im using Adobe photoshop 7 and i think there is no Polygonal Lasso Tool ... plz can any one tell me where it is in adobe photoshop7?



Yes there is is if you right click on the button for the lassoo tool it gives you the option to chosse between 3 types

really thnxx brother ... i have tried it
kewlone
WOW wow.gif wow.gif Fabulous Job wow.gif thanks Ghas notworthy.gif notworthy.gif
eliasjan
QUOTE (ghassemoo @ May 25 2010, 11:34 PM) *
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:



STEP 2
Add SE logo in hub of you bachground.



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)



STEP 4
Select half of your document with "Rectangular Marquee Tool".



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.



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.



STEP 7
Make statusbar background like softkeys bachground.



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



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




STEP 10
Duplicate your frame and insert that bottom and top of your softkeys and statusbar.



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.



STEP 12
Remove some of the parts of your new duplicated frames and then combine all frames to 1 layer.



STEP 13
Change frame layer mode from "Normal" to "Over Layer".



STEP 14
Duplicate frame layer and change frame duplicated layer mode from "Over Layer" to "Normal" and set Opacity 60%.



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



STEP 16
Go to Edit/ Fill and fill selected area by this pattern (With Opacity 25%).



STEP 17
Go to Layer/ Layer Style/ Bevel and Emboss and set parameters like picture.



Main screen of our theme is ready!


You can download PSD file here

I made another elements like main screen and this is preview of finished theme:


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

Thanks
Pavlinaslazi
Is there any video for this because i can`t make this from step 9 to the end
byebye.gif
akhilnn
thnx clap.gif clap.gif clap.gif clap.gif
Aleena143
wow,thanks bro for ths wondeful tutorial.its very nice
san-sagar
thanks for cute totorial ...
SweetHoneyBee2512
Thank you very much..
It was very useful clapping.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.