Monthly Archives: November 2007

27
Nov

How to make a Good Tutorial

November 27th, 2007

If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!

Proper English

Make sure that you use proper english and do not use abbreviations, this is so that your readers can understand you easier and it looks a lot more professional too ;) Also it is a good idea to go through the tutorial once you have completed it so that you can check if there are any errors in it (typos, spelling errors etc).

Use Steps

Use clear, concise and logical steps in your tutorial. This is so that your reader can understand you easily.

Try to have a balance of text and images, try to have an example of what the reader’s image should be looking at at each step. Most tutorials have this covered which is good :)

Also make sure that you do not miss out any steps so that the reader does not get left behind you and confused which leads on to my next point…

Teach Not Tell

Teach the reader how to do something, do not just tell them how to. Make sure that your tutorial teaches the reader how to use the tools and techniques so they can create more stuff afterwards, rather than a specific thing.

A good example of a tutorial which teaches the reader is Using Light & Shade to Bring Text to Life by PSDTuts. This tutorial provides lengthy explanations of the techniques and explains about the tools that they use in the tutorial.

And an example of a tutorial which just tells the reader what to do is Technical Interface by MickM.

More…

If you would like to learn how to submit a tutorial check out my How to Submit a Photoshop Tutorial post.

To have a look at some more good tutorials check out Good Tutorials which has (mostly) good tutorials on it (most of the bad tutorials are filtered out through moderation).

Posted by PSFreak! at 21:11 on November 27th, 2007 in Basics
24
Nov

Clean (Web 2.0 Styled) Navigation

November 24th, 2007

Step 1

We are going to start off by making a background for our navigation. Using the Radient Gradient Tool make a gradient using #6b0100 and #3f0000. To do this you set the foreground and background colours to the ones we want our gradient to have, and then select the Radial Gradient Tool. Now left click somewhere at the top right and drag to the bottom right of the document and release.

2_step1

Step 2

Now on a new layer make a white box at the bottom (dimensions are 540 by 20 pixels) using the Rectangular Marquee Tool to make the selection and going Edit > Fill to fill the selection.

2_step2

Step 3

Next we are going to be making the active link background. Create a new layer and select the Rounded Rectangle Tool and make a selection of 100 by 50 pixels with a radius of 5 pixels, and fill this selection with white.

2_step3

Step 4

Now we are going to be making the other link backgrounds. On a new layer make three more selections of 100 by 50 pixels using the Rounded Rectangle Tool. Fill the selections with a Linear Gradient from #9c0303 at the top to #750202 at the bottom.

2_step4

Step 5

We are now going to be adding a Gradient Overlay layer style to this layer so go Layer > Layer Style > Gradient Overlay.

2_step5a

Your navigation should be looking something like below now :D

2_step5b

Step 6

Move your first white layer above all of the other layers.

2_step6

Step 7

Our last step is to add the text. The font type that I have used here is Tahoma, Bold and Regular, 14 pt, None, #3f0000 and #ffffff.

2_step7

Posted by PSFreak! at 22:11 on November 24th, 2007 in Web Layouts
24
Nov

Awesome Dark Orange Orb

November 24th, 2007

Step 1

The first thing we need to do for our orb is have a background. So using the Radial Gradient tool make a gradient from #333433 at the top left to #0b0b0b at the bottom right.

1_step1

Step 2

Now create a new layer and make a selection of 300 by 300 pixels using the Elliptical Marquee Tool in the middle of the document. Make another radial gradient from the top left of the selection with #dfbe0d to the bottom right in the colour #a01301.

1_step2

Step 3

Now we are going to be adding some effects to our orb’s layer. The first is an Outer Glow with the below settings.

1_step3a

The next layer style is the Stroke.

1_step3b

Your orb should now be looking something like:

1_step3c

Step 4

Create a new layer, and select the area of your orb and go Select > Modify > Contract by 3 pixels. Fill the selection with #ffffff.

1_step4

Step 5

Now we are going to be adjusting our white circle so that it is in a bit on the sides. Go Edit > Transform > Distort and bring in the two boxes on the left and right.

1_step5

Step 6

Adjust the blend mode to Soft Light and the Opacity of the layer to 70%.

1_step6

Step 7

Duplicate this layer and go Edit > Transform > Distort again and bring in the sides even more.

1_step7

Step 8

Now we are going to be applying a layer mask to this layer and using the Linear Gradient Tool make a gradient from the top in white to the bottom in black. This will make the layer fade out from top to bottom.

1_step8

Step 9

Last of all we are going to be adding some text. I am using the font Fertigo and set the colour to #e56821. I have also set the Blend Mode of the layer to Multiply and the Opacity to 40%.

1_step9

Posted by PSFreak! at 00:11 on November 24th, 2007 in Web Graphics
21
Nov

Preparation

Before we we start submitting our tutorial we need to prepare a couple of things. Firstly the title, think up something that will catch the readers attention (they will be scanning through about 20 tutorials listed on a page and you want them to read yours).

Secondly the description of your tutorial. Write out a short (about 20-30 words) description of your tutorial so readers know what is going to be in your tutorial, don’t include things like “in this photoshop tutorial” because they know what they are looking at is a list of photoshop tutorials ;) Be precise and to the point.

Lastly the thumbnail of the tutorial. This is often the trickiest part (well it can be for me) because you need to make a small 40 by 40 pixel image which represents your tutorial in the best way. Try and select a larger area, maybe 160 by 160 pixels and then shrink it so that you can see more of the tutorial. Your aim is to try and find the busiest part of the outcome for the thumbnail so it shows off what you get to make.

Submission Process

On the various different tutorial indexes out there, there is one main way to submit a tutorial – go to the “submit” page and follow the steps :) Some sites use RSS feeds for automatic submissions, but not any large indexes.

Most tutorial indexes will have you submit the tutorial and then your tutorial will go in a waiting queue where the site owner will review it (usually within a week or two) and decide whether or not it is good enough for his/her tutorial index.

Although Good Tutorials has tried a new method over the last few months where there is a select group of users who are moderators which go through the pending queue and rate which tutorials are good and which ones are bad. After 24 hours the tutorial will have either a high enough rating to reach the front page or will be denied and not shown on the site (except for your profile page).

Where to Submit

I have gathered a list of tutorial index sites, and have listed them below, with the larger indexes at the top. But also remember if you submit your tutorial(s) to a lot of sites you will get a lot of links coming into your site which is always good from a SEO point of view. If you find any more index sites, comment on this post and I will add it.

AnotherTutorialSite
Good-Tutorials
Pixel2Life
Tutorialized
PSLover

TotalTutorial
Tutorial Index
Tutorial Outpost
TutorialKit
Tutorial Center
FSTutorials
FreshTuts
Life2Pixel

Posted by PSFreak! at 05:11 on November 21st, 2007 in Basics