From Forum Nokia Wiki

Overview

This article describes on how to make use of carbide.ui and Adobe Illustrator to edit vector elements. The process is explained by editing Grid Highlight component.

The components are either divided in to single element or nine element components. In S60 you can find 3 element component also.

To start with you can download the S60 Theme Design Highlight Template provided.

The above provided screen shot is of Grid Highlight from the template, opened in a vector editor. You can hide and unhide the layers as shown above. After opening this you may design it according to your creative requirements.

Edit the elements of the template and keep it ready, once you are satisfied with the changes made save it and keep it open in the editor.

Now open the theme you would like to make the changes to inside carbide.ui.

Go to highlights tab, where you will find grid highlights. Once you click on it, you will find the component view updated to show the Grid elements. the Grid Highlight element in this case is divided in to nine parts.

Some components can be either 9-piece bitmap graphics or individual single-piece svg graphics. The 9-piece component consists of four corner graphics, four side graphics, and a center graphic. You can design the corner graphics individually. The side and center area graphics can be tiled or equal the maximum size of the component area.

Switch to carbide.ui Right click on any element and open it in the external editor (Adobe Illustrator).

Copy the prepared image by dragging and dropping inside the vector editor tool.

You need to replace the element opened from carbide,ui, with the new one you have designed. Alternatively, you can edit it using the vector editor (Illustrator).

After editing or replacing it save the file. And now when you check the edited piece in the carbide.ui, you will find that the changes are reflected in the theme.

You will have to repeat this process for all the nine elements and then save it.

You can follow the above process for editing any other component also.

References

• [S60 Theme Templates]