1. Created a new folder on my desktop. This folder will be used to store to the 8 button images representing the steps of the feedback cycle, the background image, and the Feedback_Tutorial_Template HTML file (right-click to save the file).


2. Surfed the web and found a large image (1000 x 800) that I wanted as the background of my game.
   


3. Opened the image in Photoshop and began drawing rectangles to represent the steps in the feedback cycle. I made each rectangle on a new layer so I could move and re-size them if necessary. I also used the "snap to grid" feature to help line up the rectangles. The rectangles will serve as spaces to drag the buttons to.
   


4. Drew a red circle below the rectangles.
   


5. Drew one arrow and then copied and pasted it in different locations and orientations.
   


6. Added more text and graphics. This will be my final background image.
   


7. Started a new document and made a bright red rectangle a bit smaller than the dark red rectangles on the background. This will be the start of the buttons that you drag around.
   


8. Added a gradient to the button to improve it's appearance.
   


9. Added text to the button. I would add the text for "stimulus" and save a copy of the button named "stimulus.jpg". Then I deleted the original text, added the text for "receptor" and saved a copy as "receptor.jpg". Repeated this for all the buttons.
   


10. After creating the background image and buttons, it was time to modify the Feedback_Tutorial_Template HTML file.
    Opened the HTML file in NotePad (or an HTML editor) and changed the code where indicated.
    
    

11. Here's how it looks completed! Click here to play my new game.