diff --git a/doc-src/assets/images/tutorials/sprites/layout/diagonal.png b/doc-src/assets/images/tutorials/sprites/layout/diagonal.png
new file mode 100644
index 00000000..a7b3f93d
Binary files /dev/null and b/doc-src/assets/images/tutorials/sprites/layout/diagonal.png differ
diff --git a/doc-src/assets/images/tutorials/sprites/layout/horizontal.png b/doc-src/assets/images/tutorials/sprites/layout/horizontal.png
new file mode 100644
index 00000000..057568e4
Binary files /dev/null and b/doc-src/assets/images/tutorials/sprites/layout/horizontal.png differ
diff --git a/doc-src/assets/images/tutorials/sprites/layout/smart.png b/doc-src/assets/images/tutorials/sprites/layout/smart.png
new file mode 100644
index 00000000..7fe102a6
Binary files /dev/null and b/doc-src/assets/images/tutorials/sprites/layout/smart.png differ
diff --git a/doc-src/assets/images/tutorials/sprites/layout/vert.png b/doc-src/assets/images/tutorials/sprites/layout/vert.png
new file mode 100644
index 00000000..dde31b03
Binary files /dev/null and b/doc-src/assets/images/tutorials/sprites/layout/vert.png differ
diff --git a/doc-src/content/help/tutorials/spriting/sprite-layouts.markdown b/doc-src/content/help/tutorials/spriting/sprite-layouts.markdown
new file mode 100644
index 00000000..998ce00e
--- /dev/null
+++ b/doc-src/content/help/tutorials/spriting/sprite-layouts.markdown
@@ -0,0 +1,58 @@
+---
+title: Sprite layouts
+layout: tutorial
+crumb: Sprite layouts
+classnames:
+  - tutorial
+---
+# Sprite layouts
+
+## Vertical
+
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Vertical Example](/images/tutorials/sprites/layout/vert.png)
+## Horizontal
+
+    $mysprite-layout:horizontal;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Horizontal Example](/images/tutorials/sprites/layout/horizontal.png)
+
+Notes:
+
+  * Responds to the same configuration options that vertical has.
+  
+## Diagonal
+
+    $mysprite-layout:diagonal;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Diagonal Example](/images/tutorials/sprites/layout/diagonal.png)
+
+Notes:
+
+  * Configuration options do not effect the layout
+  * This is incredibly resource intensive on the browser
+
+## Smart
+
+    $mysprite-layout:smart;
+    @import "mysprite/*.png";
+
+Example Output:
+
+![Smart Example](/images/tutorials/sprites/layout/smart.png)
+
+Notes:
+
+  * Configuration options do not effect the layout
+  * Most efficient use of browser memory
+
+Example icons from [Open Icon Library](http://openiconlibrary.sourceforge.net/) and are released under public domain
\ No newline at end of file