Custom Skins

Skins are used in Awesemulator to provide "In-Device" look and feel to your screenshots, presentations and screencasts. There are several skins that come with Awesemulator by default. These should be adequate for most of your needs, but sometimes more specialized skins are needed.

When looking for custom skins the first place to start is the Skin Gallery to see if someone else has already created a skin suitable for your needs. If you still can't find what you are looking for then it's time to create your own custom skin! This might sound like some work, but it's actually no more than getting an image or two and creating a simple XML file in Notepad.

The following should provide you with all the information you need to get started. The steps below will be creating the iPhone 4 skin available in the Skin Gallery.

Common Reasons for Creating Custom Skins

  • Use of a device not yet released and/or included with Awesemulator
  • Add visible watermarking (Company logo, copyright, etc.) to all screenshots
  • Addition of Custom Hardware
  • Themed images, for instance:
    • Undersea background for a fishing app
    • Picture Frame for a photo editor
    • Sunshine and cutesy animals for a kid's app
    • Scary clouds and a dark castle for a Halloween app
    • Lasers and more Lasers for an awesome app from the future

Creating Your Image(s)

Skin images are created for use when the emulator is at 100% zoom and are auto-scaled by Awesemulator. This means we need pretty large images, but we only need 1. The auto-scaling is pretty good but there are a few tweaks that will probably have to be made using the Helper Elements with the help of the SkinOffsetHelper app. More information on that can be found below. Images are also made in Portrait mode (They will be rotated appropriately by Awesemulator to match the emulator orientation).

There are two uses of skins: Screenshot & Overlay. Generally a skin pack will include a Skin Element for each using slightly different images - but this is NOT required. The content of these image(s) are totally up to you but in general:
  • Screenshot: This is a fairly tightly cropped image of the device overlaid on top of the screen image
  • Overlay: This is generally the same image as above but with additional spacing (whitespace or otherwise) to create buffer for presentations and/or videos
Basic Image Properties:
  • PNG image - Transparency is used and in fact required for displaying the screen
  • Designed for 100% Zoom - All other sizes are auto-scaled
  • Portrait - Orientation will be matched to emulator, but it is assumed images start in Portrait
  • 96 DPI - Not a strict requirement but will make your life easier
You can use whatever image editor you want, but one that supports layers and advanced editing will be a huge help. We use GIMP since it's free and does everything we need.

For this example we have taken an iPhone 4 device with a nice reflection on the bottom and resized it to make the screen size match the WP7 Emulator (480x800). In this case, we had to do some stretching since the iPhone devices are not a perfect match proportionately but this wouldn't always be necessary. We then cut out the screen (Transparent section in the middle of our image). This is all that's required to make this whole thing work.

However, you can also get a little fancy. Since we know the skin image will be overlaid on top of the screenshot, we can add anything we want to the screen and it will be on top of the final image. In addition, all mouse clicks and gestures are passed directly through the overlay regardless of what's visible underneath. This is an excellent opportunity to add screen glares, shadows and other things to make the final screenshots and overlays look as real and professional as possible. So for our iPhone, we added a diagonal screen glare to match the device and made it semi transparent. Again, this doesn't hurt the overlay functionality and when applied sparingly and subtly it shouldn't obscure the screenshots but rather enhance them.

For the Overlay image all we did was increase the canvas size around the device and filled with an opaque white background but we could have added anything we wanted.

Setting up the Configuration File

Awesemulator Configuration files are simply XML files (specialized text files) that can be created and edited in your favorite text editor (such as Notepad). They are stored in the Configuration Folder and are pretty simple to make. The easiest way is to cut and paste the example below and customize it. To be recognized by Awesemulator they need to be named *.Skins.xml (our iPhone example is named iPhone4.Skins.xml).

Each XML file will be validated (any failures will be listed in a log within the Configuration > Validation folder) to ensure all necessary information is provided. For specific questions about the XML and acceptable values, please refer to the Skin XML Reference - but it's really not that complicated.
iPhone4.Skins.xml
<?xml version="1.0" encoding="utf-8" ?>
<!--
    WireBear Awesemulator
    Created by Chris Kent
    Copyright 2011 WireBear. All rights reserved
    
    Example of how to make additional skin definitions. See Default.Skins.xml for information
    about what to put in each attribute. To create a skin definition, you just need an image
    and a definition file like this located somewhere in the Configuration folder named 
    *.Skins.xml (ie iPhone4.Skins.xml). The skin definition needs a Skins root element
    and then one or more Skin elements.
    
    New device released? Get a copy of the image and cut out the screen.
    Making a To Do list app? Create a notebook with the screen for the paper.
    Got a good one? Why not share it with everyone else.
    Find details on http://wirebear.com or http://awesemulator.codeplex.com.
-->
<Skins>
  <Skin Name="iPhone" Purpose="Just for Fun"
         Use="Screenshot"
         ImageFile="Configuration/Images/Skins/iPhone4.png"
         RelativeX="56" RelativeY="202" Author="WireBear"/>
  <Skin Name="iPhone" Purpose="Just for Fun"
         Use="Overlay"
         ImageFile="Configuration/Images/Skins/iPhone4Overlay.png"
         RelativeX="230" RelativeY="398" Author="WireBear"/>
</Skins>

The above configuration file follows the basic structure of a Skin Configuration file (Header, Comments, Skins Element). Fill in the comments section with whatever you want - generally who you are, any copyrights/attributions, license information, special instructions, etc. Comments are not required, they are just a good idea.

The Skins Element shown above is pretty typical (it contains two Skin Elements: one for the screenshot skin and one for the overlay skin) - but this can actually contain as many skin elements as you want. The Skin attributes are pretty self explanatory but here's a quick rundown of important information: (Again, see Skin XML Reference for details)
  • The name show in the dropdown(s) in Awesemulator are just a combination of the Name and Purpose values: Name (Purpose) so, in the example above the dropdown(s) will read: iPhone (Just for Fun)
  • Names do not need to be unique but you should do it anyway to make things easier for the end user
  • Use can be All, Screenshot, or Overlay
  • The ImageFile is a relative (to Awesemulator) path to the image to use.
    • Generally skin images are stored in the Configuration > Images > Skins directory, but this is not a strict requirement and you could create all the nested folders your heart desires
  • RelativeX and RelativeY correspond to the origin of the screen (upper left corner)
  • Author is never actually used, just provided for anyone looking through your config file

Using Helpers

The way screenshots are put together and skins are auto-scaled to match the emulator zoom level can sometimes create minor alignment issues depending on the size and DPI of your skin images. To help correct this you can optionally add Helper Elements for any ratio (zoom level) to any of your skin elements.

We are not using any in the sample above but an example would look like (From Default.Skins.xml):
  <Skin Name="Emulator" Purpose="With Dropshadow"
      Use="Screenshot"
      ImageFile="Configuration/Images/Skins/Emulator.png"
      RelativeX="60" RelativeY="94" Author="WireBear">
    <Helper Ratio="75" OffsetX="0" OffsetY="0" OffsetWidth="1" OffsetHeight="0"/>
    <Helper Ratio="66" OffsetX="-1" OffsetY=".25" OffsetWidth="-1" OffsetHeight=".25"/>
    <Helper Ratio="50" OffsetX="0" OffsetY="0" OffsetWidth="0" OffsetHeight="-.5"/>
  </Skin>

These of course can be added to Overlay skins but is generally not that important to do since the alignment doesn't generally have to be as precise.

You can of course read all about the details of the Helper element in the Skin XML Reference, but here is a quick breakdown of the important stuff:
  • Ratio refers to a specific zoom level and is entered as an integer (ie 75% becomes 75)
    • You should only specify the standard zoom levels since any custom zoom setting will use the nearest matching helper if it exists: 75%, 66%, 50%, 33% (Things are so small at 33%, however, that it's hard to actually spot any problems)
  • OffsetX and OffsetY are the number of pixels (specified in decimal) to shift the skin either horizontally or vertically
    • OffsetX: (negative is left, positive is right)
    • OffsetY: (negative is up, positive is down)
  • OffsetWidth and OffsetHeight are the number of pixels (specified in decimal) to add or subtract from the scaled width/height of the skin image
  • Helper adjustments are rotated to match the orientations (Portrait, Landscape Left, & Landscape Right should all be tested)
Determining these values for your skin images is primarily a trial and error process but a special Windows Phone 7 app is available, SkinOffsetHelper, to make this easier. A general strategy for testing your skins and identifying the need for any Helper elements is laid out in our SkinOffsetHelper Guide.

Testing Your Skin

The easiest way to test your skin is to place the image file(s) and the XML Configuration file in the Configuration Folder and using the Advanced Menu have Awesemulator reload the settings every time you make a change to the config file.

Once you've got a working skin, please share it with us! Check out the Distribution of Custom Assets Guide to find out how simple it is (Zip and email).

See Also

Last edited Sep 8, 2011 at 2:12 PM by theChrisKent, version 9

Comments

No comments yet.