mirror of
https://github.com/zhigang1992/GitHawk.git
synced 2026-06-16 02:24:31 +08:00
307 lines
15 KiB
HTML
Executable File
307 lines
15 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||
<!--[if (gte IE 9)|!(IE)]><!-->
|
||
<html lang="en"> <!--<![endif]-->
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Sketch to App Store - Generate App Store images for all iPhone sizes from Sketch</title>
|
||
<meta name="author" content="Brenden Mulligan">
|
||
<meta name="keywords" content="sketch,appstore,app store, assets, screenshots, iphone screenshots, app store screenshot builder">
|
||
<meta name="description" content="Sketch to App Store is a template that makes it very simple to generate App Store images for all iPhone sizes from Sketch.">
|
||
<link rel="shortcut icon" href="img/favicon.ico">
|
||
|
||
<meta property="og:title" content="Sketch to App Store - Generate App Store images for all iPhone sizes from Sketch">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="http://sketchtoappstore.com">
|
||
<meta property="og:image" content="http://sketchtoappstore.com/img/billboard.png">
|
||
<meta property="og:site_name" content="Sketch to App Store">
|
||
<meta property="og:description" content="Sketch to App Store is a template that makes it very simple to generate App Store images for all iPhone sizes from Sketch">
|
||
<meta property="fb:admins" content="">
|
||
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="mulligan">
|
||
<meta name="twitter:title" content="Sketch to App Store - Generate App Store images for all iPhone sizes from Sketch">
|
||
<meta name="twitter:description" content="Sketch to App Store is a template that makes it very simple to generate App Store images for all iPhone sizes from Sketch">
|
||
<meta name="twitter:image:src" content="http://sketchtoappstore.com/img/billboard.png">
|
||
<meta name="twitter:domain" content="sketchtoappstore.com">
|
||
|
||
<!-- Mobile Specific Metas -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
||
<!-- Libs CSS -->
|
||
<link href="css/bootstrap.css" rel="stylesheet">
|
||
<link href="css/simple-line-icons.css" rel="stylesheet">
|
||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" media="all" />
|
||
|
||
<!-- Template CSS -->
|
||
<link href="css/style.css" rel="stylesheet">
|
||
|
||
<!-- Custom CSS -->
|
||
<link href="css/custom.css" rel="stylesheet">
|
||
|
||
<!-- Google Fonts -->
|
||
<link href='http://fonts.googleapis.com/css?family=Raleway:300,400,700,800&subsetting=all' rel='stylesheet' type='text/css'>
|
||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:200,300,400italic,400,800,700' rel='stylesheet' type='text/css'>
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="./js/html5shiv.js"></script>
|
||
<script src="./js/respond.js"></script>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<![endif]-->
|
||
|
||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||
|
||
|
||
</head>
|
||
|
||
<script src="https://cdn.optimizely.com/js/5016490019.js"></script>
|
||
|
||
<body data-spy="scroll" data-target=".navigation">
|
||
|
||
<!-- Banner -->
|
||
<div id="banner" class="bg-blur">
|
||
<!-- Start Header -->
|
||
<div id="header">
|
||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<!-- Start Logo / Text -->
|
||
<a class="navbar-brand" target="_blank" href="/">
|
||
Sketch → AppStore
|
||
</a>
|
||
<!-- End Logo / Text -->
|
||
</div>
|
||
<!-- Start Navigation -->
|
||
<div class="navigation navbar-collapse collapse">
|
||
<ul class="nav navbar-nav menu-right">
|
||
<li><a class="inverse" href="https://github.com/bmull/SketchToAppStore" target="_blank">Download</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- End Navigation -->
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<!-- End Header -->
|
||
|
||
<div class="banner-content">
|
||
<div class="container">
|
||
<div class="row">
|
||
<!-- Start Video-->
|
||
<div class="col-sm-6 pull-right">
|
||
<img src="img/billboard.png" class="billboard">
|
||
</div>
|
||
<!-- End Video -->
|
||
<!-- Start Header Text -->
|
||
<div class="col-sm-6">
|
||
<h1>Generate App Store images for all iPhone sizes from Sketch</h1>
|
||
<p>With the new iPhones, it's now a huge pain to create screenshots for iTunes Connect. This tool was created to save you a ton of time. (<a href="https://itunes.apple.com/us/app/sketch-3/id852320343?mt=12&uo=4" target="itunes_store">Sketch 3.1</a> Required.)</p>
|
||
<div class="btn-container">
|
||
<a class="btn" href="https://github.com/bmull/SketchToAppStore" target="_blank">Download Sketch File</a>
|
||
</div>
|
||
</div>
|
||
<!-- End Header Text -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Banner -->
|
||
|
||
<!-- Intro -->
|
||
<section id="intro" class="section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-22 headline">
|
||
<h2>Create <span class="blue">45 App Store images</span> in minutes!</h2>
|
||
<p>This Sketch file is designed so you make a few changes to the setup page, and over 40 other artboards will be updated with your custom info. Within minutes, you'll be able to export 45 screenshot images.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<i class="line-font blue icon-iphone"></i>
|
||
<h2>Setup</h2>
|
||
<div class="features">
|
||
<i class="line-font blue icon-settings"></i>
|
||
<h3>Sketch Required</h3>
|
||
<p>Using Sketch symbols and text styles, this tool makes creating all the required screenshots for your iPhone app incredibly simple. Just make a few adjustments, add your own content, and export.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<img src="img/feature-image-0.jpg" class="img-responsive" alt="" title="">
|
||
</div>
|
||
</div>
|
||
<hr class="separator60"><!-- Separator -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<i class="line-font blue icon-iphone"></i>
|
||
<h2>Styles</h2>
|
||
<div class="features">
|
||
<i class="line-font blue icon-screen-smartphone"></i>
|
||
<h3>Device with Text</h3>
|
||
<p>This tool setting your screenshots on devices with explanatory text above it. You can set whether the iPhone is white or black.</p>
|
||
</div>
|
||
<div class="features last">
|
||
<i class="line-font blue icon-frame"></i>
|
||
<h3>Screenshot Only</h3>
|
||
<p>Just want the screenshot resized to all the iPhone resolutions? This tool will export 4 sets of your screenshots at the correct resolutions.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<img src="img/feature-image-1.jpg" class="img-responsive" alt="" title="">
|
||
</div>
|
||
</div>
|
||
<hr class="separator60"><!-- Separator -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h2>Sizes</h2>
|
||
<div class="features last">
|
||
<i class="line-font blue icon-cursor-move"></i>
|
||
<h3>Screenshots for every iPhone</h3>
|
||
<p>This tool will quickly export several styles of screenshots for you to choose from, in <strong>every resolution Apple requires</strong> (5.5", 4.7", 4.0", 3.5").</p>
|
||
<ul class="green-arrow"><!--Green arrow list -->
|
||
<li>iPhone 4/4s</li>
|
||
<li>iPhone 5/5s</li>
|
||
<li>iPhone 6</li>
|
||
<li>iPhone 6+</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<img src="img/feature-image-2.jpg" class="img-responsive" alt="" title="">
|
||
</div>
|
||
</div>
|
||
<hr class="separator60"><!-- Separator -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h2>Exports</h2>
|
||
<div class="features">
|
||
<i class="line-font blue fa fa-files-o"></i>
|
||
<h3>Files</h3>
|
||
<p>Just choose a folder and the files will be exported like this. They are exported in JPG format because iTunes connect currently requires that.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<img src="img/feature-image-4.jpg" class="img-responsive" alt="" title="">
|
||
</div>
|
||
</div>
|
||
<hr class="separator60"><!-- Separator -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h2>Android <span class="blue">*Bonus*</span></h2>
|
||
<div class="features">
|
||
<i class="line-font blue fa fa-android"></i>
|
||
<h3>Nexus 5 Bonus Set</h3>
|
||
<p>These are included in the off-chance your screenshots are the same for Android devices. Screenshots are laid on a Nexus 5 and are set in a way where the nav bar is clipped, so they aren’t blantently iOS screenshots.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 col-md-offset-1">
|
||
<img src="img/feature-image-3.jpg" class="img-responsive" alt="" title="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Intro -->
|
||
|
||
<!--Testimonials -->
|
||
<section id="testimonials" class="section bg-testimonial cover border-bottom">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8 col-md-offset-2">
|
||
<!-- Start Testimonial Slider -->
|
||
<div class="carousel slide carousel-mod" data-ride="carousel" id="testimonial">
|
||
<div class="carousel-inner">
|
||
<!-- Testimonial #1 -->
|
||
<div class="item active">
|
||
<div class="testimonial-inner">
|
||
<img src="img/person-david-mck.jpg" alt="" title="" /><!-- Testimonial Image -->
|
||
<p>Essential part of your app design workflow. From Sketch to the App Store, this makes generating the mazillion screenshots you need in a few clicks.</p><!-- Tesimonial -->
|
||
<small><a href="http://davidmckinney.com/" target="_blank">David McKinney</a> - iOS Engineer (Emoji Type, Product Hunt)</small><!-- Testimonial Author -->
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="testimonial-inner">
|
||
<img src="img/person-hemeon.png" alt="" title="" /><!-- Testimonial Image -->
|
||
<p>Incredible time saver! If you use sketch for designing apps, then this tool will make prepping and submitting artwork to iTunes a breeze.</p><!-- Tesimonial -->
|
||
<small><a href="https://twitter.com/hemeon" target="_blank">Marc Hemeon</a> - Co-Founder / Designer at Tiiny </small><!-- Testimonial Author -->
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="testimonial-inner">
|
||
<img src="img/person-matt-hunter.jpg" alt="" title="" /><!-- Testimonial Image -->
|
||
<p>This is great, super simple... These assets typically takes a few hours to get right. This should save a massive amount of time.</p><!-- Tesimonial -->
|
||
<small><a href="https://twitter.com/mh" target="_blank">Matt Hunter</a> - Sr. Product Designer at Jawbone </small><!-- Testimonial Author -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Testimonial Navigation -->
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#testimonial" data-slide-to="0" class="active"></li>
|
||
<li data-target="#testimonial" data-slide-to="1"></li>
|
||
<li data-target="#testimonial" data-slide-to="2"></li>
|
||
</ol>
|
||
<!-- End Testimonial Navigation -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Testimonials -->
|
||
|
||
<!-- Call To Action -->
|
||
<section id="subscribe" class="section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<div class="headline">
|
||
<h2 class="blue">Try for Your Own App</h2>
|
||
</div>
|
||
<a class="btn btn-big" href="https://github.com/bmull/SketchToAppStore" target="_blank">Download Sketch File</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Call To Action -->
|
||
|
||
<!-- Clients Logo -->
|
||
<div id="clients" class="padding40 bg-grey hidden-xs">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<p>© 2017 <a href="https://twitter.com/mulligan" target="_blank">Brenden Mulligan</a>. All Right Reserved</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Clients Logo -->
|
||
|
||
<!-- Start Js Files -->
|
||
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script><!--jQuery is a Javascript library that greatly reduces the amount of code that you must write.-->
|
||
<script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-2.1.0.min.js"><\/script>')</script>
|
||
<script src="js/bootstrap.min.js" type="text/javascript"></script><!--Packed with many functionalies such as carousel slider, responsivity, tabs, drop downs, buttons, and many other features-->
|
||
<script src="js/modernizr.min.js" type="text/javascript"></script><!--Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.-->
|
||
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script><!-- Script for Lightbox Image -->
|
||
<script src="js/custom.js" type="text/javascript"></script><!-- Script File containing all customizations -->
|
||
<!-- End Js Files -->
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
||
ga('create', 'UA-52521932-2', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</body>
|
||
</html> |