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

background design

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

Content.

  • 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

image assets.


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.


| Download Template Below |