Results 1 to 3 of 3

How to Make a Theme for your Blackberry with Photoshop In these instructions we will ... Software & Theme Development forum

  1. #1
    bipolar's Avatar
    bipolar no está en línea Stack level 2
    Join Date
    Mar 2007

    Lightbulb ''How To'' - Making Themes w/ Photoshop Guide


    How to Make a Theme for your Blackberry with Photoshop

    In these instructions we will be making a theme which I have already made "Gothic Fairy". If you follow each step all the way through, your theme should come out like mine. In the end, you should be able to take what you have done and make your own complete theme.

    Step One: Setting the Background: When you are doing this, try and pick something that doesnt take away from the whole theme, or distract you to much. You want the theme to still be something you can work with on a day to day basis.

    Open the image ''gothicfairy.png''. When you are doing this for your own theme, remember that depending on the size of the image you may have to resize it to get the part of the image you want in. Remember when doing this, try and leave the top 5th of your image blank because thats where your banner will be.

    After you open your image, open a new image by hitting ''control + N'' with these settings:

    Name: Background1
    Preset Sizes: Custom
    Width: 240 Pixels
    Height: 260 Pixels
    Resolution: 72 Pixels/Inch
    Mode: RGB Color
    Contents: Transparent

    In the image below you will see my background. Notice how in my image, the girl is to large to fit in the size image I just had you create? We need to resize the gothicfairy.png image to make her fit.

    To resize the image, go to ''Image - Image Size'' and use those options. I usually change the ''pixels'' on the first line to ''percent'', that way you only have to change the first number, from 100 to whatever percent you want the image to be and the rest stays in proportion. I go with 55 here. [To do this, the ''constrain proportions'' box MUST be checked].
    Click on the title bar of the image we are going to use to focus it. Make sure you have the ''Move Tool'' [The arrow] selected in the ''Tools Menu'' [the bar on the left with all the tools on it]. Click on the image and Drag it onto the new image we created. Now get it about where you want it and use your arrow keys on your keyboard to make fine adjustments.
    Once you have her where you want her [no pun intended] use the ''Paint Bucket'' tool to fill the rest of the image in with white. Below is what it should look like.

    Now we are ready to move on!

    Step Two: Creating the Banner: This is where you can make or break the them. Take the things you learn here and try them out on you own theme! [You will need both butterfly images for this step]

    Open a new file again but this time use these settings:

    Name: Banner1
    Preset Sizes: Custom
    Width: 240 Pixels
    Height: 65 Pixels
    Resolution: 72 Pixels/Inch
    Mode: RGB Color
    Contents: Transparent

    To Start the Banner you need to have a good idea of how you want it to look. The first thing we need to do is take ''butterfly1.jpg'' and get it to the right size for the banner, then rotate it and add the effects to make it look like it does on the finished theme.

    Rotate: ''Image - Rotate Canvas - 90 CW''
    Resize: ''50%''

    Now lets add some effects!

    On the right side of photoshop you should see a menu box that looks like this:

    If not then you can open it by going to ''Window'' and Checking ''Layers''

    You will see a small picture of your image there and it should be named ''layer1'' [disregard the 2 layers in the image above] by default. If you double click on that image a menu box will open. We want to choose the following options.

    Check ''Drop Shadow'', the double click it and change the following settings:
    Angle: 56
    Opacity: 100%

    Check ''Inner Shadow'' and change the following settings:
    Angle: 56
    Opacity: 75%

    Now close that menu box.

    Go to ''Filters - Artistic - Plastic Wrap'' and use these settings:

    Highlight Strength: 15
    Detail: 9
    Smoothness: 7

    Click ''OK''

    You should now have an image that looks like this:

    Lets get our Banner ready to add this first image to!

    Remember that new file we opened [240x65]? Focus on that now. In the ''Tools Menu'' [the box on the left of your photoshop screen] Choose the ''Rectangle Marquee Tool'', the one that lookes like a box with broken lines. At the top of PS you will see an option now for ''Style'' click on that and make it ''Fixed Size''. Now make the ''Width: 180 px'' & ''Height: 7 px''. Now click anywhere on the blank image and you will see a line appear. Use the Paint Bucket to fill this with any light color of pink you choose.

    Now add the effects. Again, go to the layers menu on the right of your screen and double click on the layer which has the line you just created. Check ''Drop Shadow'' and ''Bevel and Emboss" with these settings:

    Drop Shadow:
    Angle: 56
    Opacity: 100%

    Bevela and Emboss:
    Leave all Defaults

    Once you have done this, click on the Arrow in the Tools menu and use it to move the line to about where we want it, then use your arrow keys on the keyboard for fine adjustments.

    Now go to ''Layer - New - Layer'' and make a second layer named Line2. Repeat the steps over again for the second line!

    You should end up with something like this:

    Now we add the Butterflies. Take the First Butterfly we changed to fit remember? Move it onto the banner image like this:

    Now lets get that second Butterfly. Open the image ''Butterfly2.jpg''. Resize it to ''55%''.
    Focus back on your Banner Image and create another new layer named butterfly2. once you do that, drag the second butterfly onto the image and set it where you want it. By double clicking on the image in the layers list add the following effects:

    ''Drop Shadow'' and ''Bevel and Emboss''

    You should have this:

    Once you are POSITIVE you have everything the way you want it, go to ''Layer - Merge Visible'' then to ''File - Save As'' and save this as ''Banner1'' with a file type of ''.png''

    Once you have saved this, go to Plazmic and start your 8100 Dimension theme, load the background and the banner and you should have this!

    Notice none of the icons in the banner are set right, thats all up to you! In mine, all fonts that are used in a button or in the banner are set to "Serifa Th BT''.

    Step 3: Making the Icons

    Make a new image with these settings:

    Width: 48 pixels
    height: 36 pixels

    When you are working with smaller images, you can always hit ''control +'' to enlarge it.

    Now click on the the Rectangle Selection tool again and set the size to:

    Width: 44 pixels
    height: 32 pixels

    Now Use the arrow keys to center the selection in the image. Use the Paint Bucket Tool to fill in the center of the selection with a light pink [should still have a pink selected].

    Now click on the the Rectangle Selection tool again and set the size to:

    Width: 42 pixels
    height: 30 pixels

    Now center that in the middle of the Pink section. Once your there hit ''Control + X''. You should now have this.

    OK, lets add some effects. Double click on the image in the layers menu and add the following effects:

    Drop Shadow:
    Opacity: 100%
    Angle: 56
    Distance: 1
    Size: 3

    Bevel and Emboss:
    Depth: 71
    Size: 2

    Now you should have this:

    This will be the BASE for ALL your Icons.

    Now find and open the address book icon here:
    ''C:\Program Files\Plazmic CDK 4.2\samples\Themes\Images\8100\icons''

    This is going to be what you do for EACH icon.

    Once the address book icon is opened, resize it to 75%. Now drag it over to the icon image we created and you should have this:

    Now Save this file to use as your address icon #1. Make sure you ALWAYS save these files as .png file type to ensure they keep their transparency, VERY important.

    Now start another file with the dimensions of 20 pixels x 20 pixels. This will be the highlight peice to add to each icon so youhave a second icon that when you use your theme on the blackberry and you scroll through each icon, you see which one you are on!

    Now, ''Right Click'' on your Rectangle Selection Tool and Select "Elliptical Marquee Tool" Set the Size to ''15px'' by ''15px''.

    Click on the image and center the circle. Use the Paint Bucket Tool to fill in the circle with yellow. Double click on your image in the Layer Menu and add these effects:

    Drop Shadow:
    Opacity: 100%
    Distance: 5
    Size: 5
    Bevel and Emboss:
    Depth: 85
    Size: 4
    Soften: 0

    Once you have this, Drag it over to the corner of your Icon Image. You should have this:

    This image is Zoomed in, when correct size it isnt distorted.

    Now SAVE this image as ''whatever you called the first one 2.png'' and use this as your ''focused'' icon for the address book.

    Repeat these steps for each icon you want to make and your done!

    After you do all this, you will have a theme that looks like this:

    In this guide you learned how to use only a few of the aspects of photoshop but enough to go on. Try and make a theme of your own with the different things you learned here and post them on for everyone to see!!

    Please let me know if this was helpfull. If it was I may do a more in depth Icon making guide along with a more in depth banner creation guide.
    Last edited by bipolar; 03-25-2007 at 02:21 AM.
    My mother always said "hard work never killed anyone..."
    I say "Why take that chance?..."

    PIN: 23E3A7A0

  2. #2
    EvolutionCSR's Avatar
    EvolutionCSR no está en línea Stack level 5
    Join Date
    Mar 2006

    Re: ''How To'' - Making Themes w/ Photoshop Guide

    Thanks for the Guide is a very nice contribution to the Stacks, and im sure many will find it useful.

    The Icon guide I will especially look forward to.

    It will be interesting to see some people's themes who followed your guide.

  3. #3
    cp6169's Avatar
    cp6169 no está en línea Device Pro
    Join Date
    Mar 2006

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts