#4 – Images, Icons & GIMP

Hello again,

In the last tutorial we covered:

  • Navigation between pages (C# code)
  • Pivot Pages/Items/Controls
  • Fields/Attributes
  • More on TextBlocks
  • ScrollViewers
  • Images
  • Testing
  • App Store Information

Today we’re going to cover:

  • About/Using GIMP
  • Scaling
  • Layers
  • Transparency
  • Saving
  • VS Manifest File

Let’s dive right in!

Next we’re going to change the icons for this app.

With Visual Studio open look to the solution explorer.
Open the assets folder, hover over the application icon, you should see a star, that is the smallest image of the 3, we’re going to edit this now.

right click on the assets folder and select “Open folder in file explorer”.

You should now see your applicationIcon file.
You can edit this with whatever image software you want paint, Gimp, Photoshop, etc.
I myself use Gimp, It’s basically an open source version of Photoshop.
The problem with paint is that it doesn’t support png, so you want have the transparent background.

GIMP

GIMP
GIMP

Here’s the link for GIMP:
http://www.gimp.org/

Once downloaded right click on the ApplicationIcon.png and select “Edit with Gimp”.

Once Gimp is open I’d recommend selecting the “Windows” menu item at the top right and at the bottom of this menu selecting “single windows mode”.
It makes life a whole lot easier.

The next part takes a bit of creative thinking.
We need an Icon for our app.
I’m going to use a Harp.

At this point I’d recommend creating a folder called IrelandCountiesGimp to hold all your GIMP and jpg/png files for this app.

Now that my Harp image is saved in my Gimp folder I’m going to add in into my ApplicationIcon Image that is already open in GIMP.

In GIMP Select File from the top bar, then select “Open as Layers”.

22-GIMPLayers

Go to your GIMP folder where your Harp is saved.
Double click on it.
It’ll get added in but it’ll probably be huge.

Scaling

Next click on the “Scale” tool to scale the size down.

23-Scale

Click on your image.

A box will pop up called “Scale”.

Click on the Link icon so that the 2 links are connected.

24-ScaleLink

Now the scaling is linked, this means, the ratio of height to width will stay the same.
You can drag the corners to change the size so that it will fit into the image.
You can also move this layer around by dragging the middle circle.

Once this is done I want you to make the star layer invisible.

Layers

To do this look at the layer window to the right:

25-LayerWindow

Click on the Eye beside the Star image.

Now that layer is out of our view.
You can play around here by clicking the eye area again to show the image.
Then move the layers up and down by selecting one and click the the up or down arrow at the bottom of the layer window.
This shows you how the layers work, each layer (Image) is on top of all the layers below it.
It’s kind of like pieces of paper on top of each other.

Transparency

My image is a .png so it has no background, if your image has a white background and you want to get rid of it.

I’m going to add another layer, a harp image that is of .jpg type, jpegs can’t be transparent, png’s can, that’s the main difference.
So this .jpg Harp image has a white background that I want to get rid of.
Since the background is all white, the “Fuzzy Select” tool can detect this and select all of that area, once selected we just press the delete button on the keyboard. We made need to do this several times.

26-Transparency

Too zoom into your image hold the CTRL key on your keyboard and scroll your mouse wheel forward to backward.
You’ll want to get very close to the image at times for precision editing.

Saving

Once you have gotten rid of the white space you are ready to save the image.
Hold CTRL and press ‘S’ to save.

A windows will prompt you to save the image.

27-SavingXCF

Notice that the image is being saved as a .xcf.
This is the GIMP file format.
The two guys that created gimp used the XCF labs in college to develop the program, they then used that name for their file format.

This file format can only be used by GIMP.

Once saved click on file in the top bar in GIMP and select “Export …”.
The name should be “ApplicationIcon.png”, the same as the file name we wanted to edit at the start.

28-ExportOverwrite

We want to overwrite this file, so hit okay.
You’ll be prompted to verify that you want to overwrite the fail, click okay.
Another will pop up with variosu settings for the png file that you want to create(overwrite), leave the settings to their default and click “Export”.

Visual Studio already has these star images linked to the IrelandCounties app so there’s no point moving them around, getting the sizes/dimensions correct when we can just edit them like this.
This is much simpler.

VS Manifest File

Now when you go back to Visual Studio, open the manifest file, you should see our Harp image in the Application Icon area:

29-ManifestIcon

Sometimes in order to refresh the page to show the updates you need to edit some information, so type something into the description and you image should change.

Next we need to do the same for the other images.
The ApplicationIcon is shown in the “All Apps” section of the windows phone.

When you “Pin” an app to your homescreen that’s a different image, when you change the sizes it shows the other images.
Each size needs it’s own image.

We’re going to go back to our Assets folder in our Windows Explorer and open the “Tiles” folder, in here you;ll see the following 5 images:

30-Images

When you hover over them you get the dimensions, pick the largest one first which is the “FlipCycleTileLarge.png”.
Right Click -> “Edit with Gimp”

Add the Harp in as a layer.

You may need to edit the Harp again, only once more though!
Click the eyeball on the star layer to not see it.

Once edited CTRL + S it to save it as a .xcf.
Next Export to .png to overwrite it.

In the layer window select the harp image, hold CTRL and tap the ‘C’ button to copy that layer.

Next go back to your Tile folder and Open the next largest image in GIMP.
Click into the layers window, hold CTRL and press ‘V’.

The harp layer will now be pasted in as a “Floating Selection”.
Select this harp layer and click the “new layer” icon at the bottom of the layer window beside the up arrow:

31-FloatingLayer

Now it’s a normal layer.
You can save it as an xcf and export it as per usually.

Do this for each image, you will need to scale the layer down as the image sizes get smaller.
Remember to Zoom in as the Image gets smaller to make it easier!

Once this is all done your folder should look like the following:

32-TileFolder

Now when you go back into Visual Studio’s Manifest file all the images should be updated.
You edited more images then are shown in the manifest file, these images will be used even though they are not shown.

It’s okay not to have a Large image.

33-ManifestFileUpdated

Conclusion

Good job you made it!

The more you play around with GIMP the better you’ll get.
It’s a great tool to have in your arsenal.
There are tonnes of You-tube videos on how to do various things with it.
Here are some of their very own tutorials:
http://www.gimp.org/tutorials/

Today we covered:

  • About/Using GIMP
  • Scaling
  • Layers
  • Transparency
  • Saving
  • VS Manifest File

In the next tutorial we’re going to cover:

  • Creating a XAP file (for upload)
  • Uploading our app to the store
  • Filling out our App Info & Package Description pages

It’s quite a short one 😉

Happy coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s