Recently I created an XCF template for app marketing and wrote a post about how to use it.
Nokia Lumia 1520 is a gorgeous phone. So is your Windows Phone app’s hub in panorama. And you do know that a well developed app is just the half way. Getting the app to its audience is the second half. I created this layered GIMP image to easily sandwich a panorama hub between the layers and showcase your app with your own shining colors. You need to do following to create your app’s panorama with this template: Read more…
Some people wanted the template in PSD format. So, here you are.
Nokia Lumia 1520 is a gorgeous phone. So is your Windows Phone app’s hub in panorama. And you do know that a well developed app is just the half way. Getting the app to its audience is the second half. I created this layered GIMP image to easily sandwich a panorama hub between the layers and showcase your app with your own shining colors. You need to do following to create your app’s panorama with this template:
Have all your panorama pages in a single image. 4 or 5 pages will work great.
Copy aforesaid panorama image in this XCF.
Adjust perspective, add your colors, and export!
With very little efforts you can have your app in your choice of colors.
First, grab the GIMP XCF (PSD here). If you do not have GIMP, download here, it’s open-source and free. Prepare an image of all the panorama items of your app (a little help here).
Layers!
Open PanoramaAppShowcaseOn1520.xcf in GIMP. Look at the Layers windows. There are multiple groups and layers inside. Some layers/groups are not editable. Their names start with [DoNotEdit]. So, do not edit them. The layers you will be editing are – “YourApp.YourAppGoesHere”, “UseBucketToolAndFillAnyColorHere”, and “UseBucketToolAndFillBackgroundColor”.
Bring Your App In
Open “YourApp” layer group and select “YourAppGoesHere” layer.
Copy or Open As Layer from File menu, your app’s panorama image. If you Open As Layer, drag it down to just above YourAppGoesHere and right click and merge down. If you copy, as you see in image, a floating layer will be created.
Click on Anchor the floating button at the bottom. You will see now your panorama image is in the layer YourAppGoesHere
Prepare to Skew
Make sure YourAppGoesHere layer is selected.
Slide opacity to about 50.
Select Layer > “Autocrop Layer” menu to crop this layer. You will see yellow marching ant line around the layer
Choose perspective tool.
Go 3D
The layer now has a grid with 4 handles on corners.
Grab a corner and drag it as close as possible to the corresponding corner on white base. Don’t worry about matching corners exactly, just keep close. Repeat the process for all corners. Look at black arrows in the image.
Now your image’s layout looks something like this:
Micro Adjust and Transform
You are still in Perspective transform edit mode. Here you will zoom-in to every corner and match every corner exactly with the corner of the white base.
To zoom-in to the corner you want to adjust, take your mouse pointer on the corner, and ctrl+mousewheelup to zoom-in max. Match both the corners pixel perfect. Repeat for all the four corners. Zoom-in and out to make sure all the corners are matching.
Click on Transform button.
Your image now looks something like this:
Your Colors
These steps are to easily change phone’s color.
Select UseBucketToolAndFillAnyColorHere layer.
Click on foreground color and pick a color from color picker.
Select Bucket tool from Tools menu
Click anywhere inside the image
More Color and Done
If you want to edit background color select UseBucketFillBackgroundColor.
Click on foreground color and pick a color from color picker.
Click anywhere on image
Open File menu and select Export As… Type “filename.png” in the File Name field and save.
If everything goes well, you will have a gorgeous image like this for your app:
If your app has a panorama hub, an image showing all the pano items with device could be a very impressive marketing image. I have created this template which makes your life a bit easier, if you want to create such image. You can download the template XCF image file here (yes this is a GIMP template 0_0. I may create PSD edition if you insist). Currently the device image in this template is Microsoft Windows Phone stock emulator image, Nokia Lumia device images could also come in future. When you open this XCF in GIMP you get something like this:
Take snapshots of your app’s pano items from emulator and replace screen 1, 2, 3, and 4 in GIMP with respective images. Once you are satisfied with the image, export it to JPG/PNG with File > Export option. You might want to scale the image down before you send it out. Open the exported JPG in GIMP and use Image > Scale option to scale the image to desired scale.
Notes:
This is 1080P edition (480X800 version is on its way, see below), so your emulator/device screen shots should also be 1080P.
If your pano has BG image, disable it before you take screen shots and give it a plain #00ff00 color. After copying the screens in GIMP, select #00ff00 color in layer and replace it with alpha. Repeat for all pano items. In the end have a stitched, single background image, and copy it on the background layer in GIMP. You are doomed if you have #00ff00 color in other parts of your pano images, other than BG :-D. (Just kidding, choose some other color for BG which is unique).
Because of parallax effect in panorama, you will get repetitive panorama title in your app’s screen shots. Initially, copy the screen as they are. Then, in GIMP, with Rectangle selection tool (R), select the title part, Ctrl+X and Ctrl+V to make another layer. Do same with all the pano items. Select Move tool (M) and move pano item 2, 3, 4’s title sections to left to adjust with pano item 1.
Watch this space for a 480X800 version. Or follow me on Twitter @sanjayAtPilcrow.
As an app developer you are supposed to reach out to your prospective users as much as you can to let them know about your app. Social networks – FB, Twitter, Reddit, etc. are some great tools to spread the word. I also think creating a small video about your app and publishing it to YouTube is an effective way to let your users quickly get to know about your app. These are some fantastic posts to talk more about how to promote your apps: Making A Love Connection? Build Relationships To Promote Your Apps The Simplest Things People Don’t Do To Market Their Apps (But should)
In this post I will share some points about creating video.
The simplest and very effective way of creating a video is capture the physical phone screen while you are using it. That’s it. You can upload it as it is with your commentary in it. If you want to be fancier, there could be many other pricey options – e.g. hiring an advertising agency. Here I would talk about a no-cost (but a little extra work) option for creating attractive videos showcasing your app. The two videos, listed below, are created with following tools and processes.
In this setup I chose not to go for a video on physical device screen because i wanted to keep focus on the functionality and information about the app, rather than telling about how to use the app. I used emulator instead. It’s easier with emulator and it also gives more control to capture the desired section on the screen.
Prepare Emulator
You could choose to use the default generic emulator image to show your app in. Following is the generic emulator skin which comes with the IDE:
Or, to make your video more personalized/interesting, you could use a custom skin. You can customize skins at your heart content, for example, for one video I created this skin:
Once you have taken care of the device skin, have your app installed on the emulator. Don’t forget to prepare example data and load with the app, if your app is data heavy and you want to showcase the same for your users. Set up a nice background on your desktop (it could be your app’s or company’s branding). Background is required because in this case you would have the complete HD movie created along with the background. The least HD movie size is 720P, so apart from the device there would be a lot of background in the video.
Animations and 2D Graphics
Silverlight is an ultimate tool to create fantastic 2D animations. You need to come up with a story as to how you would want to present information to the audience. Think about dynamics of the information, their movements, exit, and entry. Plan 5-10 slides. Create animations and transitions in Silverlight desktop application. If your animations and graphics are showing on the same screen with the video, first capture the video and using VideoBrush add the video in the Silverlight application. Fine tune the timing of the video while test running the app. You can see in the videos below, one of the video is a completely Silverlight video captured on screen and other is a mix of Silverlight and pre-captured video. You can have your titles, credits, and subtitles in the app itself with your custom animations.
Raw Video Footage
I captured screen with Expression Encoder 4 (I hear that the studio has been discontinued, but there are other tools available to download with which you can effectively capture screen). Set the capture size to minimum 1280X720 to play well in HD. Run the app on emulator, or run your desktop Silverlight application and capture the video.
Voice Over
You might want to include commentary in your video. It might be your own voice or you can choose to use text to audio tools. In both the cased you will need a script to read. Prepare the script by running and re-running the video and match your speed with the video speed. The best free tool to prepare audio is Audacity. You can add commentary, music, effects in a single with multiple tracks. You can adjust the speed of your audio and match it with your video output.
Fuse Video And Audio
Now remains the simple task of bringing Video and Audio together. In this step you would make least changes to video or audio so a simple video editing tool like Movie Maker is enough. Export the video in MP4 format with the source dimension locked.
Sharp Snippets 