BlueFrame OTT App Design Template
The photoshop template is attached at the bottom of this article!
The template works as a hierarchy or trickle down operation using 5 photoshop
documents (6 if you’re creating mobile app assets). There are 29 app assets that are
constructed using a default logo and a default background. Using these two assets you
build the Default App Logo and the Default App Background. Then those two assets are
used to create the master list of App Assets (around 29 images). These 29 app assets
are made up of launch images, backgrounds, icons, buttons, and other promotional
images that are used within the different app stores. Below is a simple step by step
guide on how to use this template to create your assets.
A few notes before you get started
- If you wish to create all of the assets individually with different designs you can skip to
step 5 and just make changes to the Master OTT Template file and disregard the
other template files. However using the template is significantly easier.
- *When saving in the following steps be sure to overwrite the file you started with. If
you rename it or save a new copy the template won’t work.
Step by Step Instructions
1. Open the Default_Logo.psd file and create/import your logo design.
- You’ll want to fill around 90% of the canvas with your logo leaving the background transparent. You can always return and adjust as needed.
- Save when finished*.
2. Open the Default_Background.psd file and create/import your
Tip: The default text in the apps are white so you’ll want to make sure your
backgrounds are dark to keep the text readable.
- You’ll see in the project there is a templated layer/group that shows you where
different elements in the app will be located. For example loading animations,
video players, and text. Be sure to respect those guides as ignoring them will
result in text being difficult to read and overcrowding of elements.
- Hide that template layer and save when finished*.
3. Update the Default_App-BackgroundImage.psd file
This file creates the background image for the main background of your app.
It can utilize the Default_Background and Default_Logo that you created in steps 1 and
2, or you can edit/modify it however you wish.
- The Default_Logo and Default_Background files are linked to layers within this
Default_App-BackgroundImage file. If you have all 3 files open at the same time
in Photoshop you’ll see this file update live as you save the Default Logo and
Default Background files.
- If the changes aren’t automatically made go to Layer (Menu bar) > Smart
Objects > Update All Modified Content.
4. Update the Default_App-LaunchImage.psd file
This file creates the launch images for your app as well as the icons for the
app. It can utilize the Default_Background and Default Logo that you created in steps 1
and 2, or you can edit/modify it however you wish.
- By default, the Default Logo is placed in the center of the image with the Default
Background behind it. If your logo and background doesn’t update automatically
you can go to Layer (Menu bar) > Smart Objects > Update All Modified
- Here’s is where you can add changes like drop shadows or any other design
changes your want on your launch images.
- Just remember that this design will be feeding all of your launch images as well
as your icons so if you add a sponsor logo here it’ll show up on all icons as well.
You can add more images later to just the launch images later if you wish.
- Save when finished*.
5a. Updating the Master_OTT_Template.psd file
This file creates all of the assets needed for BlueFrame to build the
apps. It uses a combination of the previous 4 files we’ve talked about to build the
assets. Just like before, if you don’t see your designs go to Layer (Menu bar) >
Smart Objects > Update All Modified Content.
- This is the last document in the process therefore it’s the best place to do
any additional customization. Here you can go through each element and
make and adjustments or changes for specific assets. For example, if you
want to have additional sponsor logos on your launch screens but not your
icons you can add those on the artboards that correspond to the launch
5b. Adding the primary and secondary colors
In the Master_OTT_Template.psd file there is an artboard for you to
type out the primary and secondary colors of your app. These colors have a few
backup purposes within the app.
- The colors should be typed out using Hexidecimal values using a black font
so it’s readable for our developers.
- For example: “Primary: #000000” “Secondary: #333FFF”.
6. Exporting the Assets.
- To export the asset’s you’ll go to File > Export > Artboards to Files
- See image below on the proper settings. Be sure to unselect “Export Selected Artboards”. You want to export all the artboards in the project.
- The folder you received contains a folder for Exported Files. Use this to save the files when you export them.
7. Send the files to BlueFrame.
When sending the files please send the entire folder including the PSD files so
that BlueFrame can make any simple alterations if needed.