Composer Hints and Tips

[scottbg1]

I decided to start this thread as a reference for people like me who are searching for information on how to create things in composer, and are looking for EASY TO UNDERSTAND, STEP BY STEP DIRECTIONS.

I hope this is worthy of a sticky, and maybe I will, or somebody would like to start a Theme builder thread as well.

As you know the user guides are vague and irritating so I searched online for 4 days trying to figure out how to make custom sized home screen icons, and even left a couple of private messages to guys who have succeeded in making them, but obviously didn't want to share such "SACRED" information.

So after pulling my hair out, I finally figured it out myself. Now I would like to share this info for folks interested in making these icons, without the aggrivation of trial and error.

Thanks to "no1", a CrackBerry member, for suggesting I post this tutorial.

How to make custom size home screen icons using Plazmic Composer, for use in Plazmic Theme Builder v4.6.

First you will need two images. The "default_application", and "default_application_focus" icons located in your plazmic sample folders.

Since I have a 9000 series device (Bold) I will use the Bold Precision icons as an example.

You can find these icons by navigating to:

C:\Program Files\Plazmic CDK 4.6\samples\Themes\Images\Precision480x320\icons

I would recommend copying these two files and save them is a seperate project folder, say on your desktop for easy access.

You will need an image editor such as Photoshop or Gimp. Any editor will do as long as it is capable of resizing .png images.

The precision icons I mentioned earlier are 80x80 pixels in size. This is the default icon size on the Bold 9000 OEM themes.

Resize both "default_application" files to whatever size you would like for your theme. If you want "half size" icons, then you will reduce the image size to 40x40 pixels/inch. Always start with a larger image and work down. Increasing the size of an image will result in poor quality.

Save those files in the project folder you created. Be sure not to get them mixed up with the originals.

Open composer.

Go to File/New.

Name your project whatever you like, say “Theme Buttons”.
For Device, select 9000 series.(per this example)
Background: I always use transparent.

Over on the left is the tool bar. Click on “Theme Button”. It will arm your cursor with a “+” sign. Click on the background in the area you would want your first icon to be. Let’s say you want a bottom Dock. Start in the bottom left hand corner. Don’t worry about keeping the buttons perfectly aligned, we’ll do that in a minute. But to keep things neat and tidey, try and keep them in order, left to right. You’ll notice composer names them button 1, button 2, ect.

You’ll see a green square appear after clicking on the screen. Now to your right is the inspector pane. In the launch application section, you’ll see several choices.

BlackBerry Application: You can make the button into a OEM button of any icon on your device. Say you choose browser. It will turn your button into a browser icon, and when you load it onto your phone, that’s what it will always be, or permanent.

Third party app is just that. You can create a custom third party app button, say a weather app you have. We will save that for another tutorial.

Application Menu: This is the button in the bottom left hand corner of some carrier themes that navigate you to your application icon screen. You can make a custom "Application Menu" icon.

Now, the “use device application order” is the one you want for this tutorial, to be able to arrange what icons you want on your home screen. Choose this for your theme button.

Now, to change the button to the size you want, we have to do a little more clicking from here. This is where the icons you resized come in.

After choosing this selection, you’ll get a little blue folder. Right click on that and choose edit.

Your screen will change and you will see your button all alone on the background, look to the toolbox to your right and you will see the “objects box. Click on “Normal image”, and more options will appear in your inspector box.

In inspector, you have several tabs, choose the tab with the “Image” graphic at the top. It probably is already selected but, I mention it just in case. In that box you will see “Change Bitmap”. Click that.

An “OPEN” pop up will appear, navigate to the folder with your newly resized icons, and open the file named "default_application". This will be the icon you see under normal conditions, on your home screen. You will see the button change size, to the size of the icon you resized.

Now in the objects box choose “Focus image”, and again click change bitmap in the inspector box. The OPEN pop up appears, then navigate to your project folder, except this time, choose the "default_application_focus" icon. This is how your icon “lights” up when you hover over it on your home screen.

Now, right click on your newly created button, and choose “end edit”.

Congratulations, you have made a custom sized default application button!!!!!!

Now repeat for each button you want. There is a way to copy each button, instead of having to make each one from scratch, but lets keep it simple.

As you make them, try and keep them aligned left to right, close to the bottom, or where ever you want them to be on your theme background

Now, the far left icon, and far right icon’s position horizontally are important to set the alignment center. What I did was line the outer box of the icon with the edge of the background. The icons in the middle will be aligned by the program.

Now select ALL the icons at once. Either by going to “EDIT/SELECT ALL” or by holding down your control button and selecting each button one at a time.

Then in your menu at the top, go to OBJECT, then ALIGN, then choose Align bottom. They are now perfectly aligned left to right on the bottom.

Leaving all selected, go back to OBJECT, then ALIGN, then choose SPACING HORIZONTALLY.

They should now be nice and straight, and spaced just right.

Before de-selecting the icons, you can move the group up, down, left or right by hitting the corresponding arrows on your keyboard, and get them right where you want them.

Now that we are done with your buttons, it’s time to change them into a format that theme builder can use.

Go to FILE, then EXPORT, and choose SVG.

A popup will appear. You don’t have to name it now, unless you want too, just hit ok. A SAVE AS pop up will appear. If the file name isn’t what you want it to be, then re name it now, and save it where you want.

Phase one is complete.




THEME BUILDER


Now open Theme builder, and create a new CUSTOM theme.

Now click on the button in your inspector choices that takes you to your home screen editing, or the second box from the top, under the button with the time on it. You will see a box called SVG FILE. Click on the open folder button to the right of the field,. And navigate to where you saved your SVG file you created in composer and open it.

You will see your little folders appear on the screen.

TAH DAH!!!! You have now created small icons for your theme!!

I hope you are able to follow this with no problems, as I am NOT a Plazmic guru! Just a guy who wanted to make my own themes, and mustered up the patience to try and figure this out. There are many other things you can do with composer, but I haven't got them figured out yet. Maybe somebody will post another cool hint/tip in this thread so we all can learn.



Thanks, and I hope this helps.

Scott

[kutikayla]

This was amazing! Thank you. Now if only you could type this much for the question I posted above! haha Thanks tons

[Bones_6]

This guide was perfect!

[boldUser7]

This was super helpful. Check out my new zen twenty theme in the theme forum!

However, I think this causes a bug. Icons will not update with a red star or remove the red star when checked unless you re-arrange them first. any ideas how to fix this?

[Rockdog97]

Thanks Scott.. I'll have to check that out.. thanks for the tips!

[justlovejoy]

nice of you to go the extra length in creating this thread!
thanx!

[aristile]

Scott, you are awesome for posting this! Thank you Very Very Very much. Definitely saved me time figuring this out on my own. I will try to create myself a theme for my 8900 used 1/2 sized (or otherwise smaller) icons.

Is there some other additional "trick" to get ALL of the 3rd party applications to re-size smaller automatically that you know of?

[aristile]

All I can say is WOW!! Scott you are great!

I tried this out and the 3rd party applications re-size automatically with this tutorial as well. Just greatness. Thanks again man!


Also, I'm not sure if this is with the new 4.7 Composer or not. But I have noticed that if you select one (or multiple) buttons you have created and then choose Edit ... Copy, followed by Edit ... Paste - you actually can copy and paste buttons without having to recreate them each time.

This needs to be a sticky for sure !!!

[mistabyggs]

Okay, I have a question for you concerning custom svg homescreens for OS 4.5 phones (8300, 8800, 8100). Once you create your custom homescreen in composer, then export the svg file and load it in theme builder, the custom homescreen is centered properly and looks correct. Yet when you load the theme in a device simulator or onto an actual device, the icons are in the proper place, but the rest of the custom svg homescreen is off centered. The bottom right edge of the svg homescreen is now positioned directly in the center of the screen. I've asked other theme creators this question also, and they have informed that its a OS 4.5 thing and there is no fix. Yet I've seen other themes with custom svg homescreens with the same setup I'm attempting to do. I asked the designers of those themes, but they were less willing to help a fellow theme creator. Do you know of a work around for this? Perhaps editing the svg file in notepad, or a custom setting I'm missing somewhere? Any help would be greatly appreciated.

[jmaverick]

Thanks a lot!! This helps.

[scottbg1]

Originally Posted by mistabyggs

Okay, I have a question for you concerning custom svg homescreens for OS 4.5 phones (8300, 8800, 8100). Once you create your custom homescreen in composer, then export the svg file and load it in theme builder, the custom homescreen is centered properly and looks correct. Yet when you load the theme in a device simulator or onto an actual device, the icons are in the proper place, but the rest of the custom svg homescreen is off centered. The bottom right edge of the svg homescreen is now positioned directly in the center of the screen. I've asked other theme creators this question also, and they have informed that its a OS 4.5 thing and there is no fix. Yet I've seen other themes with custom svg homescreens with the same setup I'm attempting to do. I asked the designers of those themes, but they were less willing to help a fellow theme creator. Do you know of a work around for this? Perhaps editing the svg file in notepad, or a custom setting I'm missing somewhere? Any help would be greatly appreciated.

To be honest, I have yet to make a theme for 4.5 using a composer file.
The only thing I could even guess would be the problem is make sure your objects have been centered. Highlite your object, and then in the inspector window click on the "center" button.

This is strictly a guess, but I hope it helps.

I'm glad you guys are getting some use out of this.

Thanks.

Posted from my CrackBerry at wapforums.crackberry.com

[omgbeav]

Thank you so much for taking the time to write this up.

I have two problems that maybe someone could help me with.

1. My over/underlays show up in composer and builder but not on my Berry. I only see the app icons. I've set it up for device ordered.

2. My scroll is reversed but the icons are in the correct order.

I'm designing for an 83xx and have a bottom dock.

[Cristyluv]

Thanks so much for the post. You saved me a head full of hair and countless hours of frustration. It's sad that others who have knowledge won't share it, after all that's what the site is for. Anyway thanks a million!!

[a6co1lostud]

I have done what many others have done as far as requesting help about theme making...with little and mostly no luck...thanks for this tutorial! keep em' coming! Instead of buying garbage themes from the information horders...I would rather pay for the information to mk them myself!

[Greg G]

Originally Posted by boldUser7

This was super helpful. Check out my new zen twenty theme in the theme forum!

However, I think this causes a bug. Icons will not update with a red star or remove the red star when checked unless you re-arrange them first. any ideas how to fix this?

Did you ever solve this? I followed the steps here and get the same result (tried in simulator by simulating an incoming call and missing it and not seeing a new message notification icon).

-Greg

PS - Thanks to the OP for the great guide - I've been hacking up other people's svg files by hand - this is much better.