When I first started this blog I did not plan on writing tutorials. I hate tutorials. They are a pain. In fact, after writing my first one I gained a whole new level of respect for those who do write tutorials on a regular basis. Unfortunately, I discovered that people love tutorials, which kind of sucks, because that meant I would have to write more than one, lol. Oh well, I love you guys, so what's another tutorial, eh?
In writing these tuts I learned a great deal and I thought I would share this knowledge with you. Perhaps you already write your own tutorials and already know quite a bit about the process, but for those of you who don't or may be intimidated about writing them (as I was) I hope the following will be of some help.
Ok, so to begin ....
1. Preparation
Before you begin the daunting task of tutorial writing it would be a good idea to study ones already written by other people. PSDTuts would be a good place to start, although they're kind of rigid in their design regime - you don't have to be that anal about writing your own tutorials. I mean, it's not like you're submitting a Monet to the Louvre.
To write a good tutorial you will need to have three things at your disposal - a graphics program, a screen capture utility, and a text editor. It's also a good idea if you have a blog to make another one just for testing your article out. I have a test blog here on Blogger just for this purpose. With my test blog I can see how the content flows with the images I use and also determine what size and placement works best.
For making my images I use Photoshop, but you can use any graphics program you want. Gimp is a very popular one and it's also free. For screen captures I use FastStone Capture. I have found this utility to be a lot more flexible and user friendly than other capture programs. You can get the free portable version of FastStone here (download the ZIP package and extract to a folder of your choice). My preferred text editor is NoteTab Pro. You can also download the Light version for free.
2. Your Idea
The most important thing to start with is your tutorial idea - what are you going to write about? This depends on many factors, but since we are talking about my tutorials we'll stick with graphic design. If you are writing a tutorial for a different subject - say CSS or blog design - you will need to pick a subject that interests your audience in that field. The first thing I do is think about what it is I already know and then try to pick something from my experience that I believe will interest visitors to my blog.
For instance, I wrote a four part tutorial on how I tweaked my blog template for TBODC. I thought this would be good one because most of my visitors had their own blogs and would likely benefit from what I had learned. However, I didn't get many comments on these tutorials so it was kind of hard to judge whether they were well received or not. The tutorial I did before these was about how I customized my RSS subscribe box, which did very well.
Now what was the difference between these tutorials? None that I could see and yet (judging by the comments) one did immensely better than the other. I could ascertain from this that the four part tutorial was way too long and people lost interest, whereas the subscribe box tutorial was a hit simply because it was on one page. It could also be that one was more relevant to my readers than the other.
It's not always certain if one tutorial will do well or better than another, but you can narrow this factor down by focusing on what your site is about and writing tutorials that are relevant to that subject.
3. Writing the Tutorial
Once you have an idea what your tutorial is going to be about then you have to write it all down. I write my tutorials in NoteTab and then I also copy and paste what I've written into my test blog as I go along. I then publish it so I can see how it reads and if I need to make any changes. You don't have to do this yourself, but for me I find it helps to see it on the actual blog page.
As you write your tutorial keep yourself focused on the subject. I find sometimes I get a little wordy and so I'm often cutting and pasting chunks to make sentences tighter and to remove excess words. As a good example of this I like to quote something from one of my favorite short stories by Stephen King called "Trucks" - King is writing about a tense scene off waiting in at truck stop, describing the people, "He was a salesman and he kept his display bag close to him, like a pet dog that had gone to sleep."
Aside from being an artist I have also been a writer for mumbley-mumble years and learning to keep things short and to the point is something you will have to learn if you want to keep people interested in what you are saying.
Right now halfway through this I am wondering about how much I've already said. Is it too much? Have I gotten too wordy? Is it interesting? Is it helpful? You will probably wonder the same thing yourself if, that is, you care about what it is you are writing. And you should.
4. Building the Tutorial
Now comes the fun part. At least it is for me. The building of your tutorial. I have a process I like to follow and I'm going to share it with you here. As you make tuts yourself you'll likely develop your own method.
One of the biggest things I learned in the beginning was that in order for my tuts to be fully understood by everyone I needed to use images. I was advised of this in a very amicable manner by a couple lovely ladies - Audee Mirza of Graphic Identity and Lauren Krause of Creative Curio.
Thanks, ladies :)
It is important (as Audee and Lauren pointed out to me) to use images to convey what it is you are describing for the reader. I reiterate this because it may seem like an obvious point to some, but it wasn't for me. I was like Guillermo Del Toro - it's all in his head! he knows what he's talking about, but we don't! A tutorial is all about carefully explaining something in steps that the reader can understand and hopefully follow on their own to produce the end result.
When I begin to build my tutorials I always start by taking a full screen capture of my blog and pasting that into Photoshop as a new document. I have several of these each named "blog tuts". I do this for several reasons. One is that as I write my tutorial and decide what images I need to best convey what I'm saying I can take a quick screen grab and paste it into my "blog tuts" document. Secondly, because I want the images to fit within the confines of my content area on my blog I often need to crop them.
I have become a big fan of uniquely cropped images which I have seen in various tutorials around the Web. I always wanted to create my own and so I created several different sized masks which I've saved in the Channels palette for this purpose. I determined the size for these masks based on the width of my blog's content area. Then as I paste in each of the screen captured images I'm going to use I just choose one of my pre-sized Channel selections (depending on how much or how little of the image I want to show) and mask them off.
Sometimes the images don't need any cropping. For example, when I was writing Stroke That Puppy! I reached a paragraph where I was describing the best way to paste a path from Illustrator into Photoshop. It would have been easy to simply write, "In the file menu of Illustrator go to Edit > Preferences > File Handling & Clipboard and in the Clipboard on Quit section check both AICB and Preserve Paths."
I realized I didn't need to show the whole Preferences dialogue box, just the area I was referring to in my tutorial, so I merely cropped that with a rectangular selection. Of course, this was before I found FastStone Capture.
Depending on what kind of screen capture utility you are using you can often grab just a part of the image you want to use and you're good to go. With FastStone you have several options - Capture Active Window, Capture Window/Object, Capture Rectangle Region (shown below), Capture Freehand Region, and Capture Full Screen (to name just a few).
Don't be afraid to experiment in your tutorials. Get creative not only in your writing but with your images, too. You don't have to settle for bland squares sitting on a page - you can stylize them if you want and add your own unique flair. Also, you should always remember to add links to things you mention in your tutorials that your visitors may need or want more information on. This will show that you care and are interested in providing as much insight as possible for your readers.
5. Proofreading
Before you hit "publish" make sure you've checked your tutorial for any spelling errors. There's nothing worse than reading a tutorial with grammatical spelling errors. It's like someone running their fingernails down a chalkboard. This is where using a text editor comes in handy - the majority of them have a spellchecker feature of some kind and it only takes a second to use it and make sure your written tutorial doesn't come across like an educated-deprived child wrote it.
And that's about it. So to highlight ...
So have you written any tutorials of your own? What are your methods for tutorial writing? Share them with us in the comments section.
In writing these tuts I learned a great deal and I thought I would share this knowledge with you. Perhaps you already write your own tutorials and already know quite a bit about the process, but for those of you who don't or may be intimidated about writing them (as I was) I hope the following will be of some help.
Ok, so to begin ....
1. Preparation
Before you begin the daunting task of tutorial writing it would be a good idea to study ones already written by other people. PSDTuts would be a good place to start, although they're kind of rigid in their design regime - you don't have to be that anal about writing your own tutorials. I mean, it's not like you're submitting a Monet to the Louvre.
To write a good tutorial you will need to have three things at your disposal - a graphics program, a screen capture utility, and a text editor. It's also a good idea if you have a blog to make another one just for testing your article out. I have a test blog here on Blogger just for this purpose. With my test blog I can see how the content flows with the images I use and also determine what size and placement works best.
For making my images I use Photoshop, but you can use any graphics program you want. Gimp is a very popular one and it's also free. For screen captures I use FastStone Capture. I have found this utility to be a lot more flexible and user friendly than other capture programs. You can get the free portable version of FastStone here (download the ZIP package and extract to a folder of your choice). My preferred text editor is NoteTab Pro. You can also download the Light version for free.
2. Your Idea
The most important thing to start with is your tutorial idea - what are you going to write about? This depends on many factors, but since we are talking about my tutorials we'll stick with graphic design. If you are writing a tutorial for a different subject - say CSS or blog design - you will need to pick a subject that interests your audience in that field. The first thing I do is think about what it is I already know and then try to pick something from my experience that I believe will interest visitors to my blog.
For instance, I wrote a four part tutorial on how I tweaked my blog template for TBODC. I thought this would be good one because most of my visitors had their own blogs and would likely benefit from what I had learned. However, I didn't get many comments on these tutorials so it was kind of hard to judge whether they were well received or not. The tutorial I did before these was about how I customized my RSS subscribe box, which did very well.
Now what was the difference between these tutorials? None that I could see and yet (judging by the comments) one did immensely better than the other. I could ascertain from this that the four part tutorial was way too long and people lost interest, whereas the subscribe box tutorial was a hit simply because it was on one page. It could also be that one was more relevant to my readers than the other.
It's not always certain if one tutorial will do well or better than another, but you can narrow this factor down by focusing on what your site is about and writing tutorials that are relevant to that subject.
3. Writing the Tutorial
Once you have an idea what your tutorial is going to be about then you have to write it all down. I write my tutorials in NoteTab and then I also copy and paste what I've written into my test blog as I go along. I then publish it so I can see how it reads and if I need to make any changes. You don't have to do this yourself, but for me I find it helps to see it on the actual blog page.
As you write your tutorial keep yourself focused on the subject. I find sometimes I get a little wordy and so I'm often cutting and pasting chunks to make sentences tighter and to remove excess words. As a good example of this I like to quote something from one of my favorite short stories by Stephen King called "Trucks" - King is writing about a tense scene off waiting in at truck stop, describing the people, "He was a salesman and he kept his display bag close to him, like a pet dog that had gone to sleep."
Aside from being an artist I have also been a writer for mumbley-mumble years and learning to keep things short and to the point is something you will have to learn if you want to keep people interested in what you are saying.
Right now halfway through this I am wondering about how much I've already said. Is it too much? Have I gotten too wordy? Is it interesting? Is it helpful? You will probably wonder the same thing yourself if, that is, you care about what it is you are writing. And you should.
4. Building the Tutorial
Now comes the fun part. At least it is for me. The building of your tutorial. I have a process I like to follow and I'm going to share it with you here. As you make tuts yourself you'll likely develop your own method.
One of the biggest things I learned in the beginning was that in order for my tuts to be fully understood by everyone I needed to use images. I was advised of this in a very amicable manner by a couple lovely ladies - Audee Mirza of Graphic Identity and Lauren Krause of Creative Curio.
Thanks, ladies :)
It is important (as Audee and Lauren pointed out to me) to use images to convey what it is you are describing for the reader. I reiterate this because it may seem like an obvious point to some, but it wasn't for me. I was like Guillermo Del Toro - it's all in his head! he knows what he's talking about, but we don't! A tutorial is all about carefully explaining something in steps that the reader can understand and hopefully follow on their own to produce the end result.
When I begin to build my tutorials I always start by taking a full screen capture of my blog and pasting that into Photoshop as a new document. I have several of these each named "blog tuts". I do this for several reasons. One is that as I write my tutorial and decide what images I need to best convey what I'm saying I can take a quick screen grab and paste it into my "blog tuts" document. Secondly, because I want the images to fit within the confines of my content area on my blog I often need to crop them.
I have become a big fan of uniquely cropped images which I have seen in various tutorials around the Web. I always wanted to create my own and so I created several different sized masks which I've saved in the Channels palette for this purpose. I determined the size for these masks based on the width of my blog's content area. Then as I paste in each of the screen captured images I'm going to use I just choose one of my pre-sized Channel selections (depending on how much or how little of the image I want to show) and mask them off.
Sometimes the images don't need any cropping. For example, when I was writing Stroke That Puppy! I reached a paragraph where I was describing the best way to paste a path from Illustrator into Photoshop. It would have been easy to simply write, "In the file menu of Illustrator go to Edit > Preferences > File Handling & Clipboard and in the Clipboard on Quit section check both AICB and Preserve Paths."
I realized I didn't need to show the whole Preferences dialogue box, just the area I was referring to in my tutorial, so I merely cropped that with a rectangular selection. Of course, this was before I found FastStone Capture.
Depending on what kind of screen capture utility you are using you can often grab just a part of the image you want to use and you're good to go. With FastStone you have several options - Capture Active Window, Capture Window/Object, Capture Rectangle Region (shown below), Capture Freehand Region, and Capture Full Screen (to name just a few).
Don't be afraid to experiment in your tutorials. Get creative not only in your writing but with your images, too. You don't have to settle for bland squares sitting on a page - you can stylize them if you want and add your own unique flair. Also, you should always remember to add links to things you mention in your tutorials that your visitors may need or want more information on. This will show that you care and are interested in providing as much insight as possible for your readers.
5. Proofreading
Before you hit "publish" make sure you've checked your tutorial for any spelling errors. There's nothing worse than reading a tutorial with grammatical spelling errors. It's like someone running their fingernails down a chalkboard. This is where using a text editor comes in handy - the majority of them have a spellchecker feature of some kind and it only takes a second to use it and make sure your written tutorial doesn't come across like an educated-deprived child wrote it.
And that's about it. So to highlight ...
1. Make sure you are prepared with the necessary tools at your disposal.
2. Make sure you have a good idea for your tutorial and that it is relevant to what your site is about.
3. Write your tutorial with a constant focus on wording, sentence structure, and interest.
4. Build your tutorial carefully and give it some depth with interesting images and informative links.
5. Proofread your tutorial by checking for spelling mistakes.
So have you written any tutorials of your own? What are your methods for tutorial writing? Share them with us in the comments section.
I've never heard of FastStone for screen captures,; I usually use either Print Screen and paste it into Photoshop or Vista has a new Snipping Tool that you can use to capture just a portion of the screen. I'll have to check out that FastStone program you mentioned, Doug. I've also used SnagIt, but you have to pay for it.
And thanks for the mention :) Glad my advice was helpful!
I agree with the part of having your idea as one of important basic aspect to write a tutorial.
Sometimes an idea can be found on things you've learn and in the end you decide to share it to the viewers. They could be simple stuffs which are helpful or some time-savers handy tips, and of course not to forget that your tutorials should be relevant to your blog's main topic.
It's nice to see you have more regular published posts Doug, and I really appreciate for the mention ;)
Informative post for anyone writing tutorials --- a chance to step back and check our process and results! I use the Firefox add-on called Fireshot where you can annotate and upload the screenshots to an online file. This helps if you need to show a thumbnail with a click for larger image. Also MS Image Composer is great for cropping/adding text to snapshots. My tutorials often use html code so a good text converter is a necessary tool.
Your design has always been attractive and the newer birds just add to that. I'm also glad 'you're back.'
Lauren - You should try FastStone. It's pretty amazing, and you can't beat free.
Audee - Thanks. So what would be regularly - once a day, once a week? I'm still not sure.
SBA - Thanks for the compliment. Was I away?
You and I go back many months (MyBlogLog, BC) and I was referring to the lull last year when your blogging slowed down and applauding the fact that you're publishing so often now. I'm BPWebNews on BlogCatalog.
SBA: Yeah, I was suffering from blog burnout. Actually, I was trying to asses what the blog was really about, which is what inspired this article. Lately I've been trying to define not only what my site is about, but also what I'm about. What do I do? Am I a graphic designer? An artist? An illustrator? What?
So recently I've been working with someone to figure out my personal and professional goals and learning to separate the two. I'm currently reorganizing TBODC and making a new site for my design services. In the weeks to come I hope to have more clarity on both.
I realized that I needed to start writing more posts on a regular basis and making those posts more specific to TBODC. I didn't post for a long time and when I came back to the blog I was kind of shocked to see it had grown in my absence, like a plant that blooms whether you water it or not. Funny how these things take on a life of their own.
Anyway, enough rambling from me. Thanks for visiting and commenting :)
Sorry you hate writing tutorials, but that was a good one. I agree on the proofreading (so important, and so easy to overlook).
Hello and welcome to TBODC! If you like the article you just read you can subscribe here to get updates via RSS or opt to have them sent directly to your inbox. I appreciate your feedback so please feel free to ...
Post a Comment