| <html lang="en"> |
| |
<head> |
| |
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
| |
<script> |
| |
(adsbygoogle = window.adsbygoogle || []).push({ |
| |
google_ad_client: "ca-pub-9577407496912049", |
| |
enable_page_level_ads: true |
| |
}); |
| |
</script> |
| |
<meta charset="UTF-8"> |
| |
<meta name="description" content="Piskel, free online sprite editor. A simple web-based tool for Spriting and Pixel art. Create pixel art, game sprites and animated GIFs. Free and open-source."> |
| |
<meta name="author" content="Julian Descottes"> |
| |
<meta name="keywords" content="pixel, pixel art, videogames, editor, online, free, sprite"> |
| |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
|
| |
<title>Piskel - Free online sprite editor</title> |
| |
<link rel="shortcut icon" type="image/png" href="/static/resources/favicon.png"/> |
| |
<link rel="stylesheet" type="text/css" href="/static/css/piskel-app.css?20190421"/> |
| |
|
| |
<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-48518312-1', 'piskelapp.com'); |
| |
ga('send', 'pageview'); |
| |
</script> |
| |
|
| |
<link rel="stylesheet" type="text/css" href="/static/css/piskel-app-home.css?20192104"/> |
| |
|
| |
|
| |
</head> |
| |
<body class="checkered-bg bg3" st> |
| |
<script type="text/javascript" src="/static/js/piskel-utils.js"></script> |
| |
<script type="text/javascript" src="/static/js/piskel-image-scale.js"></script> |
| |
<script type="text/javascript" src="/static/js/piskel-animated-preview.js?20181124"></script> |
| |
<script type="text/javascript" src="/static/js/piskel-nav.js"></script> |
| |
|
| |
<div class="navigation "> |
| |
|
| |
<a class="link anchor-left piskel-logo" href="/"> |
| |
<img src="/static/resources/logo_transparent_small_compact.png" /> |
| |
</a> |
| |
|
| |
<div class="nav-links"> |
| |
<a class="nav-link" href="/download">Downloads</a> |
| |
<a class="nav-link" href="/faq">FAQ</a> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</div> |
| |
|
| |
<div class="nav-buttons nav-buttons-default"> |
| |
<a class="piskel-button create-piskel-button" href="/p/create" target="_blank"> |
| |
Create<span class="editor-nav-longdesc"> Sprite</span> |
| |
</a> |
| |
|
| |
<a class="piskel-button login-button" href="/auth/google">Sign in</a> |
| |
|
| |
</div> |
| |
<div class="nav-buttons nav-buttons-tiny"> |
| |
<a class="piskel-button tiny-button" href="#"> |
| |
<span style="margin-right: 5px;">…</span> |
| |
<div class="nav-user-drop-arrow"></div> |
| |
</a> |
| |
</div> |
| |
|
| |
<div class="nav-popup" id="tiny-menu-popup"> |
| |
<ul> |
| |
|
| |
<li><a class="user-menu-popup-link user-menu-sprite" href="/p/create">Create Sprite</a></li> |
| |
<li><a class="user-menu-popup-link user-menu-login" href="/auth/google">Sign in</a></li> |
| |
|
| |
</ul> |
| |
</div> |
| |
|
| |
|
| |
|
| |
|
| |
</div> |
| |
<div style="display: flex; min-height:100%;"> |
| |
<div class="wrap"> |
| |
|
| |
<div class="home-main bg0 checkered-bg"> |
| |
<div class="home-tagline"> |
| |
<div class="home-tagline-title"> |
| |
Piskel is a <b>free online editor</b> for <b>animated sprites</b> & <b style="white-space:nowrap;">pixel art</b> |
| |
</div> |
| |
<div class="home-tagline-desc"> |
| |
|
| |
Create animations in your browser.<br/> |
| |
<a href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgIDvjNGKCAw/edit">Try an example</a>, use <a href="/auth/google">Google sign in</a> to access your gallery or simply <a href="/p/create">create a new sprite</a>. |
| |
|
| |
</div> |
| |
<div class="home-actions"> |
| |
|
| |
<a class="piskel-button home-main-button login-button" href="/auth/google" title="Sign in with Google"> |
| |
Sign in |
| |
</a> |
| |
|
| |
<a class="piskel-button home-main-button" href="/p/create"> |
| |
Create Sprite |
| |
</a> |
| |
</div> |
| |
</div> |
| |
<div class="home-screenshot"> |
| |
<div class="home-screenshot-wrapper"> |
| |
<div class="home-screenshot-main"></div> |
| |
<div class="home-screenshot-preview"> |
| |
<img |
| |
id="imagemegamanx" |
| |
style="display:block; width:264px; height:264px;" |
| |
width="264" |
| |
src="/static/resources/home/megamanx_preview.jpg" |
| |
onload="window.pskl.website.createSpritesheetPreview('megamanx', '/static/resources/home/megamanx_spritesheet.png', 16, event, true)"/> |
| |
|
| |
</div> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="bg2"> |
| |
|
| |
<div class="ad-container"> |
| |
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
| |
|
| |
<ins class="adsbygoogle" |
| |
style="display:inline-block;width:728px;height:90px" |
| |
data-ad-client="ca-pub-9577407496912049" |
| |
data-ad-slot="1639823819"></ins> |
| |
<script> |
| |
(adsbygoogle = window.adsbygoogle || []).push({}); |
| |
</script> |
| |
</div> |
| |
|
| |
</div> |
| |
|
| |
<div class="picked-piskels-container checkered-bg bg2"> |
| |
|
| |
|
| |
<div class="picked-piskels-wrapper"> |
| |
<h1 class="picked-piskels-title">Example sprites</h1> |
| |
<span class="picked-piskels-promo"> |
| |
Here are some examples of user submitted sprites. Click on a preview to open the sprite in the editor. |
| |
</span> |
| |
<div class="piskels-container"> |
| |
<a href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICAyJ2kCQw/edit" class="piskel-container"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagemegaman" |
| |
style="display:block; width:256px; height:256px;" |
| |
width="256" |
| |
src="/static/resources/home/featured/megaman_preview.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('megaman', '/static/resources/home/featured/megaman.png', 3, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Megaman</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Julian" src="/static/resources/home/featured/julian.jpg"> |
| |
</div> |
| |
</a> |
| |
<a class="piskel-container" href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICf1u3kCAw/edit"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagepanda" |
| |
style="display:block; width:256px; height:256px;" |
| |
width="256" |
| |
src="/static/resources/home/featured/panda_preview.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('panda', '/static/resources/home/featured/panda.png', 12, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Panda</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Joakim" src="/static/resources/home/featured/joakim.jpg"> |
| |
</div> |
| |
</a> |
| |
<a class="piskel-container" href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICA_eOjCgw/edit"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagepattern" |
| |
style="display:block; width:256px; height:256px;" |
| |
width="256" |
| |
src="/static/resources/home/featured/pattern_preview.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('pattern', '/static/resources/home/featured/pattern.png', 12, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Pattern</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Vincent" src="/static/resources/home/featured/vincent.jpg"> |
| |
</div> |
| |
</a> |
| |
<a href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICwuvn-Cgw/edit" class="piskel-container"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagestormtrooper" |
| |
style="display:block; width:256px; height:256px;" |
| |
width="256" |
| |
src="/static/resources/home/featured/stormtrooper.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('stormtrooper', '/static/resources/home/featured/stormtrooper.png', 1, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Stormtrooper</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Julian" src="/static/resources/home/featured/julian.jpg"> |
| |
</div> |
| |
</a> |
| |
<a class="piskel-container" href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgIDfmPWVCww/edit"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagesnakes" |
| |
style="display:block; width:156px; height:156px;" |
| |
width="156" |
| |
src="/static/resources/home/featured/snakes_preview.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('snakes', '/static/resources/home/featured/snakes.png', 18, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Snakes</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Patrick" src="/static/resources/home/featured/patrick.jpg"> |
| |
</div> |
| |
</a> |
| |
<a class="piskel-container" href="http://www.piskelapp.com/p/agxzfnBpc2tlbC1hcHByEwsSBlBpc2tlbBiAgICfx5ygCQw/edit"> |
| |
<div class="picked-preview-container"> |
| |
<img |
| |
id="imagellama" |
| |
style="display:block; width:156px; height:156px;" |
| |
width="156" |
| |
src="/static/resources/home/featured/llama_preview.png" |
| |
onload="window.pskl.website.createSpritesheetPreview('llama', '/static/resources/home/featured/llama.png', 12, event, true)"/> |
| |
|
| |
</div> |
| |
<div class="piskel-meta"> |
| |
<b>Llama</b> |
| |
<img class="piskel-author smaller-user-avatar" title="made by Patrick" src="/static/resources/home/featured/patrick.jpg"> |
| |
</div> |
| |
</a> |
| |
</div> |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
</div> |
| |
</div> |
| |
|
| |
|
| |
<div class="assets-container"> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img class="media-image" src="/static/resources/home/features/feature-live-preview.gif"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Live preview</h4> |
| |
<p class="asset-description"> |
| |
Check a preview of your animation in real time as you draw. Adjust the frame delay on the fly. |
| |
</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img class="media-image" src="/static/resources/home/features/feature-google-sign-in@2x.png"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Google Sign in</h4> |
| |
<p class="asset-description"> |
| |
No need to remember yet another password, just use your Google account to sign in. |
| |
</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img class="media-image" style="background-color: #333" src="/static/resources/home/features/feature-export-gold@2x.png"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Export to GIF, PNG...</h4> |
| |
<p class="asset-description"> |
| |
Several export modes supported. Animated GIFs for sharing, spritesheet PNG/ZIP for bigger projects etc… |
| |
</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img class="media-image" style="background-color: #aaa" src="/static/resources/home/features/feature-open-source@2x.gif"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Open Source</h4> |
| |
<p class="asset-description">All the code is open-source and available on GitHub.<br/> |
| |
<a href="http://github.com/piskelapp/piskel" target="_blank">http://github.com/piskelapp/piskel</a> |
| |
</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img class="media-image" style="background-color: #333" src="/static/resources/home/features/feature-private-gallery-gold@2x.png"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Private gallery</h4> |
| |
<p class="asset-description"> |
| |
You can chose to make any of your sprites public or private. |
| |
Private sprites are only visible to you. |
| |
</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="asset-item"> |
| |
<div class="media-container"> |
| |
<img |
| |
class="media-image" src="/static/resources/home/features/feature-offline-application.png"/> |
| |
<div class="media-body"> |
| |
<h4 class="asset-title">Offline versions</h4> |
| |
<p class="asset-description">Free desktop & offline applications for Windows, OSX and Linux. Checkout the <a href="/download">download page</a>.</p> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
|
| |
|
| |
</div> |
| |
<div class="ad-skyscraper-container bg2"> |
| |
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> |
| |
|
| |
<ins class="adsbygoogle" |
| |
style="display:inline-block;width:160px;height:600px" |
| |
data-ad-client="ca-pub-9577407496912049" |
| |
data-ad-slot="5220533053"></ins> |
| |
<script> |
| |
(adsbygoogle = window.adsbygoogle || []).push({}); |
| |
</script> |
| |
</div> |
| |
</div> |
| |
<div class="footer bg4"> |
| |
<div class="footer-items"> |
| |
<div class="footer-item footer-item-github"> |
| |
<img src="/static/resources/footer/footer-item-github-logo.png"> |
| |
<div> |
| |
<span class="footer-item-title"><a target="_blank" href="https://github.com/piskelapp/piskel">GitHub</a></span> |
| |
<span>Contribute to the development of <a target="_blank" href="https://github.com/piskelapp/piskel">piskel</a> or <a target="_blank" href="https://github.com/piskelapp/piskel-website">piskel-website</a>.</span> |
| |
</div> |
| |
</div> |
| |
<div class="footer-item footer-item-twitter"> |
| |
<img src="/static/resources/footer/footer-item-twitter-logo.png"> |
| |
<div> |
| |
<span class="footer-item-title"><a target="_blank" href="https://twitter.com/piskelapp">Twitter</a></span> |
| |
<span>Follow <a target="_blank" href="https://twitter.com/piskelapp">@piskelapp</a> on Twitter to get the latest news.</span> |
| |
</div> |
| |
</div> |
| |
<div class="footer-item footer-item-github"> |
| |
<img src="/static/resources/footer/footer-item-support.png"> |
| |
<div> |
| |
<span class="footer-item-title"><a href="/faq">Support</a></span> |
| |
<span> |
| |
Read the <a href="/faq">FAQ</a> or contact us on <a href="https://twitter.com/piskelapp">Twitter</a> or by <a href="mailto:julian@piskelapp.com">email</a>. |
| |
</span> |
| |
</div> |
| |
</div> |
| |
</div> |
| |
<div class="footer-logo"> |
| |
<img src="/static/resources/logo_transparent_small_compact.png"> |
| |
</div> |
| |
</div> |
| |
</body> |
| |
</html> |