Help - Search - Members - Calendar
Full Version: How To Make Simple Icons For Nokia S40
mobile9 Forum > ThemeMaking > Chat, Tutorials & Resources > Tutorials
your_mother
This is an easy tutorial for photoshop beginners who want to make their own icons. Hope it's understandable (finally my photoshop is in english!!), if you have any questions don't hesitate to ask...

1. Create a new file with the size 48 x 48 px.

2. Add a new layer on top of your background layer. You can simply click on the little icon on the bottom of your layers-palette.


3. Select the ellipse tool. You might have to make a right-click to find it...

Make sure the option shown below is active. You can find those options on the top of your photoshop window.


4. Draw an ellipse. If you want it perfectly round you can hold shift while drawing.

5. Right click on the layer with your ellipse and choose 'Blending Options'.



6. Play around with the layer-options.
As you can see I added a small shadow (size and distance 2px), beavel and emboss (I used an angle of 90 to 70 with a pretty big size and low depth), color overlay (light blue) and a stroke (1px).

You can already see what it looks like now on your screen. Once you're satisfied click ok.

7. Choose the custom shape tool. Again, you have to right click on the tools palette to find it.


8. Choose your desired shape in the options on the top of your photoshop window. If you click on the little arrow on the right you are able to choose from more shapes.


9. Create a new layer. As described in point 2.

10. Draw your shape to fit nicely into your ellipse.

11. Hide the background of your icon. That's very important, otherwise you end up with a white square. Simply click on the little eye on the side of your background layer to do that.


12. Save your file as .png. Choose 'File' - 'Save for web and devices'. Choose 'PNG 24' in the dropdown menu on the right top and save.



And that's it. Here's the finished icon:

Now of course you don't have to repeat all of this for every icon. You can simply add a new layer and draw a new custom shape on it for your next icon. Of course you have to always hide the previous shape before...
Aleena143
Mom nice tutorials,definetly it will be a great tutorials whom r beginners...

mom i need a help frm u....pls teach me r give me one examples for ,how to create ornamental softkeys.i just love to do it...

like lia, u, and others doing.....here



waiting for one more tutorial based on ths softkeys.

your_mother
QUOTE (Aleena143 @ Jul 11 2011, 01:41 PM) *
mom i need a help frm u....pls teach me r give me one examples for ,how to create ornamental softkeys.i just love to do it...

I would love to help you, but for once I can't. I simply don't know myself how those people do it... If you take a look at my themes you can see that most of them have very simple borders. I'm hoping somebody else makes a tutorial about it, I'd like to learn that myself...
Na3em0
owsum tutorial thnx
LordOfLightning
Awesome tutorial mom
and thanks
Aleena143
QUOTE (your_mother @ Jul 11 2011, 09:03 AM) *
QUOTE (Aleena143 @ Jul 11 2011, 01:41 PM) *
mom i need a help frm u....pls teach me r give me one examples for ,how to create ornamental softkeys.i just love to do it...

I would love to help you, but for once I can't. I simply don't know myself how those people do it... If you take a look at my themes you can see that most of them have very simple borders. I'm hoping somebody else makes a tutorial about it, I'd like to learn that myself...


Oh, thanks mom, but i hope anyone write tutorial on ths .
Mr_Crash
wow.gif Once again great Tutorial mom.. notworthy.gif

And about ornament softkey you can download ornament brushes from Deviantart...! thumbsup.gif
san-sagar
nice tutorial once again momy...****
pokefansara
could i pls knw how do i upload a preview of d icon pds file i've made for the dc contest pls....!!i'm a li' new here...!!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.