How to Write a Graphics Tutorial

This tutorial will teach you how to format a tutorial for the Spoono Graphics section. This includes: Photoshop, Cinema 4D, and Fireworks. (Flash and 3D Studio Max following the Programming Tutorial format.

All right, there is pretty much a set template to follow to write a tutorial. The template is actually written in XML. Don't be worried, it's very easy to use. There are some default tags to learn and then you can just follow the template.

Start Off

  1. Setup: Put the XML template (an .xml file which this tutorial will demonstrate how to create) and the images all in one folder with nothing else.
  2. Right-click and Download This. It's the XML graphics template with a working example. Open up notepad to edit it.
  3. You need to fill out everything in the graphics template. You can add as many steps as you want. ALL TAGS MUST BE PRESENT before the <STEP> tag.
  4. Every tag that's opened in XML must be closed. That means, to have a <br>, you have to do <br></br>
  5. The top stuff must go in that order. Don't mess with the order of anything inside the template
  6. You can view a sample complete tutorial XML which we are currently using by clicking here.

Template Top

  1. <?xml version="1.0" encoding="utf-8"?> - This just specifies the fact that it's an XML file. Don't edit it
  2. <tutorial> - This starts the tutorial. No need to edit it either. This tag needs to be closed and should be the last thing at the end of the file (</tutorial>)
  3. <description> - Inside this tag, place a description of the tutorial. It will be used for the metatags.
  4. <keywords> - Inside this tag, place keywords for the tutorial. It will be used for the metatags.
  5. <title> - Inside this tag, place the title of this tutorial. Try to keep it short and to the point
  6. <slug> - Inside this tag, place a short slug or description of the tutorial. Very short and descriptive (like a sentence max).

Steps

  1. <step> - This starts off each new step. Everytime you have a new step, make sure the old one is closed and start a new one.
  2. <left> - On the Spoono Tutorial layout, there is a left column, and a right column. The images are placed in the left column. Inside this should be placed the image for that particular step. Even if the left side is to stay blank, you need to have a blank <left></left> tag.
  3. <stepnumber> - The step number. Just write the number and don't be smart like 1a or anything. Each one should go in numeric order :).
  4. <text> - This is the right side of the column. Inside here, put the text of the particular step. Even if you don't have to have any text, you need to have a blank <text></text> tag.

Links and Images

  1. <image> - As you saw in the <left> tag, you can put in an image using simple commands. Every one must be like this: <image><name>nameofimage.xxx</name><width>20</width><height>20<height><alt>Picture 1</alt></image>. In there, replace nameofimage.xxx to the image name, not the full URL of the image, but just the final image name. The width is the width, height is the height, alt is the popup alt. Every image tag needs all those attributes. Sorry, but it's XHTML standards :-/. Also, please make all images have a width no greater than 250 pixels. If you require a larger image, you may add a link to a thumbnail image as described below.
  2. <link> - You place a link, like we do in the first step by using this code: <link><url>http:///www.urltosite.com</url>Text to Link</link>. Pretty simple. You can combine the image and link tags by putting that entire image tag inside the link tag after the </url> like we do in the second step <left> tag.

All right, that should just about describe everything. I hope this tutorial helps you write the tutorial and that we recieve some great tutorials. Please send any tutorial submissions our way at webmaster@spoono.com.