<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <p class="lead">The lock screen is a canvas. Here are some tips to help with the design process.</p> <div class="row"> <div class="col-md-12"> <h3>The lock screen</h3> <p>The Skiptu™ lock screen is meant to improve upon the design and layout of the stock Android lock screen so that users don't waste time adjusting to new unlock gestures.</p> <div class="row" style="padding:10px"> <div class="col-md-4"> <img src="http://ec2-54-209-220-253.compute-1.amazonaws.com/sites/default/files/nexus-5-lock-screen-framed.png" class="img-responsive" alt="Nexus 5 Lock Screen"> <h5><span class="text-muted">Nexus 5 lock screen (Android 4.4.2)</span></h5> </div> <div class="col-md-4"> <img src="http://ec2-54-209-220-253.compute-1.amazonaws.com/sites/default/files/nexus-5-skiptu-drone-framed.png" class="img-responsive" alt="Nexus 5 Skiptu Lock Screen Bieber Example"> <h5><span class="text-muted">Nexus 5 Skiptu™ lock screen (Android 4.4.2) linked to RSS.</span></h5> </div> </div> <h3>Colors, safe zones, and image selection</h3> <p>Like the stock Android lock screen, the elements on the Skiptu™ lock screen are white. The time and date have a small drop shadows to enhance readability. However, be cautious when using images with light colors or multiple colors/patterns near the top and middle-bottom. Our server will accept images of almost any aspect ratio and attempt to crop and resize it for each device. However, we suggest you use the PSD template as a guide.</p> <div class="alert-message alert-message-info"> <h4>Optimal image size</h4> <p>While the best smartphones have screens 1080x1920, we suggest using images 1/2 that size--540x960. This results in a beautiful image and only uses 1/4 the memory, which improves performance and saves battery.</p> </div> <h3>Download the PSD template</h3> <p>Download the Adobe Photoshop template to help design your lock screen assets. Once downloaded, unzip the file. Open the SkiptuTemplate.psd file and get started. Use the guide to make sure your core content doesn't end up behind any lock screen elements. Once you're done with your design, save it as .png or .jpg file.</p> <a href="http://ec2-54-209-220-253.compute-1.amazonaws.com/sites/default/files/skiptu-template-0.3.zip" class="btn btn-lg btn-primary btn-outlined"><span class="glyphicon glyphicon-cloud-download"></span> PSD Template</a> <h3>Our vision</h3> <p>Skiptu™'s lock screen content is a new asset class. It should not be treated like a pure mobile advertisement. Lock screen assets should be as aesthetically pleasing as possible, but also informative. We are excited to see how lock screen-additive storytelling will evolve. </div> </div> <div class="row" style="margin-top:10px;"> <div class="col-lg-12 pull-right"> <a href="/docs/install" class="btn btn-md btn-default" style="margin-right:10px;">Back</a><a href="/docs/upload" class="btn btn-md btn-outlined btn-primary">Next</a> </div> </div> </div>