26 Oct 2011

layoutArturo Toledo works at Microsoft on the Windows Phone Design Studio team, and last week I had the chance to attend phone training with him. In that training he showed a grid he used for layout so that his apps match the layout of Windows Phone 7 apps – I call this the Arturo Grid.

Yesterday he posted about it and released an Expression Design version of it, which is great if you have Expression Design… but if you don’t it can be a problem. So I recreated it using the free graphics tool, The GIMP, and produced a transparent PNG version so that it can work in just about anything!

Downloads

How I did it?

GIMP is a fantastic tool and I thought I would share how I created this layout. First I started with a new image, with the resolution of 480 x 800 and a transparent background.

image

Next run FiltersRenderPatternGrid and set the parameters as in the screen shot below. Note the offset horizontal & vertical lines are not linked. What we are doing here are creating grids of 37x37 (25 + 12 based off the Arturo Grid) with line width of 12 (so the space that is left is 25x25). The offset is +6 so that it pushes out, because the line widths are based on the middle of the line and not the edge.

image

Now add two layers, another transparent one and a white backed layer.

image

Place the new transparent at the bottom and the white in second place.

image

and now merge down the grid layer onto the white layer.

image

Now drag on guides:

  • Vertical: 24px
  • Vertical: 456px
  • Horizontal: 56px
  • Horizontal: 784px

and select that region.

image

Create a new

Then use Select ► Invert and press delete. This removes the area around the grid for the bleed (padding) area that your app shouldn’t use.

image

Now use the Fuzzy Select Tool (aka the magic wand selector tool) and click on the black.

image

Now hit delete to remove those black lines leaving just the white squares.

image

You can tweak the colours using the colour exchange tool (Colors ► Map Color ► Exchange) and you can tweak the transparency using the Opacity option on the layer tool to make it more transparent.

image

There you go, now you are done Smile

image

AttachmentSize
Image icon layout.png2.62 KB
File wp7grid.xcf465.82 KB

Comments

Matt's picture

Great, thanks!

ux.artu.tv » Blog Archive » The Windows's picture

[...] GIMP .xcf Windows Phone Grid (thank you  Robert!) [...]

ux.artu.tv » Blog Archive » 24 Weeks of 's picture

[...] GIMP .xcf Windows Phone Grid (thank you  Robert!) [...]

Add new comment