Category Archives: Tutorials

27
Jan

Orb Logo

January 27th, 2008

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


Step 1

Create a new document and using the Elliptical Marquee Tool make a circle in the middle of the document. The size I have used here is 150 by 150 pixels.

viagra 100mg

step1.jpg” alt=”" />

Step 2

Now select the gradient tool and set it to reflected gradient (this will obviously reflect the two colours that you use instead of just a straight gradient). Set your foreground colour to #1d1e1e and your background colour to #605e62 and make sure that you are on a new layer. Left click in the center of your selection and drag to the top of it and release. This makes a gradient from the lighter grey at the top to the darker grey back to the lighter grey at the bottom.

Step 3

Our next task is to add some effects to this boring circle so apply the following layer styles.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow. The colour is #023f78.

Now your orb should be looking like this.

Step 4

Now to use the pen tool, select the “Pen Tool”.

And add some points like so…

Select the Convert Point Tool – this is another form of the pen tool.

Zoom in a bit with the (short cut is z and left clicking). Now click on the little boxes that you have made and drag them out a bit so that you make a curved shape.

Right click the area and select make selection (with a feather of 0 pixels). Make sure that you are on a new layer (if not, create one). Fill this selection with the colour #007eee, you can do this by going Edit > Fill.

Step 5

Add an inner glow to this new layer by going Layer > Layer Style > Inner Glow. The colour there is #023f78.

Step 6

Duplicate that recent layer and rotate it around by going Edit > Transform > Rotate and rotating it around. Move it to the bottom of the base of the orb.

Step 7

Now lets add some text to our logo, firstly just move the orb over to the left a bit so it’s out of the way.

Grab the text tool and add some text. The colour of my text is #007dee.

Step 8

Add some layer styles to the text layer so that it doesn’t look so boring ;)

Layer > Layer Style > Inner Glow. The colour is the same as before, #023f78.

Layer > Layer Styles > Gradient Overlay

Now your logo should be looking like this.

Step 9

Lastly we are going to be adding a sort of shadow to the text so create a new layer and make a selection like below with the rectangular marquee tool.

Fill that selection with a linear gradient from #d3d3d3 to #ffffff with the gradient tool.

Select the eraser tool and using a large soft brush erase around the sides and bottom of the gradient until you have something you like and you have finished your orb logo :)

Posted by PSFreak! at 19:01 on January 27th, 2008 in Web Graphics
27
Jan

3D Styled Text

January 27th, 2008

Step 1

First of all add some normal text into your document (works best on a white background), I have used a font called Delicious Heavy. Choose a font that is bold and clear.

viagra without prescription

torials/3d-text/step1a.jpg” alt=”" />

Step 2

Now because we want to adjust the text using the transform option we need to rasterize the text layer so go to the layers window and right click on the text layer and select Rasterize Type. Now we can go Edit > Transform > Perspective. Drag one of the bottom corner boxes outwards while holding the shift key (this does the other side too to keep the sides even).

Hit enter to set the transformation.

Step 3

Duplicate the text layer and move it up by one pixel. The short cut for duplicating a layer is Ctrl + J and the short cut for moving it up a pixel is Ctrl + Up arrow key (while keeping the text tool selected). Repeat this process 15-20 times until you have something like…

Step 4

Now we are going to be doing the top of the text – the colour. Select the top layer (the most recent duplication of the text layer) and add a gradient overlay (Layer > Layer Style > Gradient Overlay).

Step 5

On the bottom text layer (the original one) add an outer glow (Layer > Layer Style > Outer Glow).

Step 6

Now merge all of the text layers left (the ones without layer styles) and add a gradient overlay to the merged layer (Layer > Layer Style > Gradient Overlay).

Step 7

To finish with we are going to give it a shine, so using Elliptical Marquee Tool make a selection above the text on a new layer and fill it with white. Select the area of the top text layer (the coloured one) and invert the selection and hit delete. Lower the opacity of the shine layer to 33% and you are finished!

Posted by PSFreak! at 01:01 on January 27th, 2008 in Text Effects
26
Jan

Stylish Clean Avatar

January 26th, 2008

Step 1

First of all we have to make a new file, so go File > New and set the height to 100 pixels and the width to 100 pixels with a transparent background (or white, it doesn’t really matter because we’ll be adding another backgroun

viagra purchase online

d shortly).

Step 2

Now we are going to be adding a gradient for the background. Select the gradient tool from the tools window and set the foreground colour to #007dee and the background colour to #023f78. Select the radial gradient type of gradient and left click in the middle of the document, and drag to a corner and release. This has made a radial gradient in our document.

Step 3

Next up we are going to be adding a little strip along the bottom. We are going to do this by selecting the Rectangular Marquee Tool and setting the style to “Fixed Size”, the width to 100 px and the height to 5 px. Now click at the bottom of the document and this will create a box with “marching ants” around it.

Step 4

We are now going to be filling this selection with a dark grey. There are a number of ways we can do this, but the simplest is to go Edit > Fill, select colour and use the colour #252525.

Step 5

Now we are going to use the text tool to add some text in the middle of the document. Select the text tool and use the settings I have below (or a similiar font) and type in your initial.

Your avatar should now be looking something like:

Step 6

Last of all we are going to be exploring the layer styles, so go Layer> Layer Styles > Outer Glow.

Now your avatar is finished and should look like:

Posted by PSFreak! at 19:01 on January 26th, 2008 in Basics
15
Jan

Elegant Navigation Box

January 15th, 2008

Step 1

Open a new document; apply a Radial Gradient on the first layer. I have used two dark red colours for this tutorial. Create a new layer. Select the Rounded Rectangle Tool and make a selection in the center of the document. Fill it with #FFFFFF (white).

Step 2

Now we will apply blending options to the second layer, i.e. the layer with the white box. Apply Satin and a Stroke with the values shown in the following figures. Experiment with other blending options if you like to make your design stand out.

Satin:

Stroke:

This is what the navigation box looks like at this point.

Step 3

Add some text links. I have used Futura Md for the “Navigation” text and Futura Lt for all the other links.

Step 4

Now we will create the rollover effect. On a new layer, make a selection around one of the links. Fill this selection with a dark red colour of your choice.

Add a Layer Mask. (The layer mask/vector mask button can be found at the bottom of the Layers window to the right of the blending options button). Select the Soft Mechanical 100px brush. Set the foreground colour to black, and brush the outsides of the box, so that this layer appears to merge with the main box. If you think you have brushed it too far, simply set the foreground colour to white and rebrush the areas. This will restore the original layer. Set the Layer Opacity to 14%.

Step 5

Now we will add a shadow at the top of the box. Create a new layer- call it “shadow”. Select the original layer with the white box, (the layer created in Step 1). Now select the “shadow layer” and apply a gradient from black to colourless. Reduce opacity to 45%. You can delete the majority of the bottom half it you like. The gradient should look something like this:

Apply a layer mask (as in step 4) so that the bottom of the “shadow” layer merges with the rest of the navigation box.

Step 6

Finally, we will make a glassy effect on top, again using simple techniques. Create a new layer called “glass”. Select the Pen tool and make a selection that resembles the one in the figure:

Now select the Convert Point tool and modify the figure to get this:

Right click > Make selection. Fill the selection with #FFFFFF. Change the layer mode to Soft Light with 60% opacity. Delete the part of the selection that is outside the box borders. (Select the layer from Step 1, use the Magic Wand tool to pick the area outside the navigation box, reselect the “glass” layer and hit delete)

Posted by PSFreak! at 20:01 on January 15th, 2008 in Web Layouts
18
Dec

30 Cool Photoshop Effects

December 18th, 2007
Posted by PSFreak! at 19:12 on December 18th, 2007 in Tutorials
27
Nov
Comments Off

How to make a Good Tutorial

November 27th, 2007

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
  • Most Recent Tutorials

  • Tutorial Categories