The first part is divide & conquer, we need to divide the image into its basic elements:
Photoshop makes this division relatively easy since it already divides elements to layers, although often these layers make sense in photoshop and not within our application. So reviewing this image:
We have the following elements in the background:
- Gradient from 00d8fe to black:
- Translucent texture image, notice that this image is translucent and it appears here on the background of the blog. When layered on the gradient it will look quite different:
Effectively these two come together to form a background like this:
Notice the color at the top its actually the area where the title bar background should reside, that is a part of the title component design.
The components within the design are far more complex, there are easy elements such as the title:
And the list background:
Which are both pretty easy. It gets complicated when looking at an element like this:
Obviously the word Bars is part of the foreground its just here for visualization. As you can see the round portion of the cup fits snugly into the button, because it contains and icon and is aligned perfectly to that icon it can't be separated from that icon.
Yet because it aligns to the button and the button needs to grow with the text within it we might end up with something that looks like that:
We will treat this element as the component:
The rest of the images and the text within the application are really just the content, this separation is critical since elements that are background elements should be incorporated in the theme and elements that represent content should be incorporated into the UI.
In the next post I will start explaining how to move this logic into the resource editor and create the UI for this demo.