TutorialFriend.com

Eye catching glossy orange button.

Mon, 11 Sep 2006 09:54:24 +0000

In this tutorial I will be teaching you how to make an eye-catching glossy button that could be used for alot of things, primarily forum signatures, as the standard user-bars are getting old and un-noticible. Yours will look similar to this:

STEP 1

Create a new document, make it 250*70.
Choose the Rounded Rectangle tool and set the radius to 30px, draw a, orange (#ffae00) rectangle taking up the majority of the document.

STEP 2

Go into the Blending options of your rounded shape (Left Click Layer > Blending Options). Do a default black and white gradient overlay, set the Blend Mode to overlay, and the Opacity to 40%. Next do a Drop Shadow, use these settings:
Blend Mode: Multiply (Black Rectangle)
Opacity: 55%
Angle: 90
Distance: 0
Spread: 0
Size: 5

STEP 3

Now draw a white rectangle covering the top half of the Rounded Rectangle, it doesn’t matter if you go over the edges, as you set the blending mode to Overlay, then set the Opacity to 15%.

STEP 4

Draw a text box on the top half of the Rounded Rectangle, use the font ‘verdana’ and make the size around 20pt, use the color that is on the bottom of your Rounded Rectangle, in my case its ff9200. Write your text.. Now go into the Blending Options and add a 1px white stroke, and a gradient overlay, for the gradient use the same settings as before, but 32 % Opacity.

STEP 5

Time to do the sub-heading, draw a text box in the bottom half and use a pixel font (im using Visitor (You can find it at http://www.DaFont.com/en), size 14pt, and white. Put it in the middle, and your finished!

Need help? Just leave a comment here!

I’d really appreciate seeing your outcomes, please post them here!

Unique Abstract Effect - Plasma-like, shiny.

Mon, 11 Sep 2006 04:18:40 +0000

In this tutorial you will learn how to make a unique abstract plasma-like effect like this:

To be totally honest, I don’t know what the heck you could use this for, but it does look cool!

CLICK HERE TO GET A ~~CHEAP~~ FREE CAMERA

STEP 1

Create a new document, make it large 300*300+, make the background black, then make a new layer, get a soft brush out (one of the default ones) if you have other brushes out, go to ‘Reset Brushes’ give it a radius of around 80px, and hardness 0%.
Draw a white dot in the middle.

STEP 2

Get the smudge tool out, it is located directly under the eraser, and it is a pointed finger. Set the brush to 30px Diameter and 100% hardness, set the Smudge Strength to around 75%.

Ok, now when you smudge this start in the center, and drag it out, do this once, and then start at the black and drag it through the white, occasionally you will need to do 2 or 3 of the same strokes to keep it even, do this until you get somthing like this:

STEP 3

Now we’re gunna add some color, do a Hue / Saturation (CTR+U).. tick Colorize, and use settings similar to these..
Hue: 79
Saturation: 84
Lightness: -54

CLICK HERE TO GET A ~~CHEAP~~ FREE CAMERA

STEP 4

Duplicate the layer (Right Click Layer > Duplicate) set the Blending Mode to Color Dodge or Linear dodge, depending on which looks better. Finished now!

I’m going to try and put a bit more effort into my smudging to see if I can get it to look a little bit better:

I also make a new layer, set it to overlay, and put some black grunge brushes over it. I think it looks pretty good, it doesn’t look too flash on its own, but it could be a nice edition to a piece of artwork or a forum signature.

If you need help just leave a comment here!

I’d appreciate it if you posted some of your outcomes!!

Click here to download .PSD

CLICK HERE TO GET A ~~CHEAP~~ FREE CAMERA

Stylish Orange 3D Text.

Sun, 10 Sep 2006 07:52:07 +0000

Here you are going to learn how to make some stylish 3D Text like this:

STEP 1

Create your layer, you must select the background color as white (NOT TRANSPERENT)

Create a text box and type in your desired text in a bold font like Impact, use a nice orange, I used #ff9c00, make it pretty big. Now you need to Rasterize your layer (Layer > Rasterize > Type).

STEP 2

We are going to change the perspective. (Edit > Transform > Perspective).
Drag either of the top corners out until you have somthing like this:

STEP 3

Now duplicate the layer (Right Click Layer > Duplicate Layer) and move the layer under the previous layer. Change the Fill to around 50% and move the text slightly up so it’s like this.

STEP 4

Small step this one; draw a small rectangle or thick line underneath the text (to underline it) Make it the same color as the text.

STEP 5

Time to add a gradient, first we need to merge all the layers, click the little eye icon next to the ‘background’ Layer to make it dissappear. Then right click another layer and select ‘merge visible’. Now click the (now empty) eye box next to the background layer to bring it back.

You should now have 2 layers.
Go into the Blending Options of the layer with all the text on it, and select Gradient Overlay. Use the default black and white gradient. But set the blend mode to overlay, and the opacity to around 50%.

You should now have some nice-looking 3d text with a nice perspective

STEP 6 (Optional)

This is an optional step, I personally like it. Go into the Blending Options of the text layer and make a black stroke, fairly large (I used 6px).

If you need any help or have questions please leave a comment here!
I’d like to see your outcomes! Please post them here if possible

Pretty orange navigation box.

Sat, 09 Sep 2006 11:14:01 +0000

In this tutorial I will be teaching you how to make a nice navigation box like this one:

STEP 1

Create a new document, I suggest using 300*300, might need some room if somthing unexpected arrives!
Give it a white background.

STEP 2

We are now going to create the outline of the navigation box. I suggest doing it around this size, you can always change it later if needed.

STEP 3

Lets make the heading of the navigation box, we’ll call this one… Navigation!!
So create a rectangle inside the big rectangle, like this:

Time to add some color! Go into Blending Options of the rectangle you just drew. (Right Click Layer > Blending Options).
Select Gradient Overlay and apply the following gradient.

Now we need to change the color of the small rectangle to orange, you can do this by clicking the color next to the name (inside the layers palete), use a nice light orange, i suggest #ffcc00.

Remember how in Step 2 we made the outline of the rectangle? Well now we are going to change the color of that, open rectangles blending options, and change the color to the bottom color of what the little rectangle is.
Yours should now look similar to this

STEP 4

Now we have the colors pretty much sorted, it’s time to do the text. In step 3 i told you we will call this one Navigation, so we will.. select your text tool and draw a text box in the middle of the small rectangle, make the text white, size around 21, and the font Verdana. type ‘navigation’, move it into the center, and now we’ll add a small 1px stroke to it. Use the color of the bottom color of your small rectangle like you done for the stroke of the small rectangle. it should now look somthing like this:

STEP 5

Now it’s time to do the body text, amongst all this orange, we’re going to put black text for the main part, because it’s good design principle - black on white is very easy to read.
It is strange doing regular size text in PhotoShop, as it appears blurred and bulky, if you are going to code this with XHTML and CSS, don’t worry, verdana will look alright!
But if you are going to keep it as an image, I suggest using a pixel font, these are meant for small text. My favourite is Visitor (Click here to get it).

Create a text box covering most of the left over rectangle. use Visitor (or w/ever you want to use) size 14 and black.

Put down some headings, I will put

Home
About
Contact
heading
- sub heading 1
- Sub heading 2
Header
Services

Here is my finished product!

But I always want to make some changes once I’ve finished and I think theres too much room between the navigation box and the outline box, so I’ll just make it bigger.

So theres my finished product, I’m pretty happy with it, make some alterations until your happy with yours!

Click here to download .PSD
PLEASE POST YOUR OUTCOMES! I’D LIKE TO SEE THEM!

NEED HELP? JUST LEAVE A COMMENT HERE AND ME OR SOMBODY ELSE CAN ANSWER YOU!

Pretty orange navigation box. PSD!

Sat, 09 Sep 2006 11:13:01 +0000

Click here to download

Simple Black and Yellow logo/header/banner.

Sat, 09 Sep 2006 04:20:50 +0000

Here I will tell you how to make a simple yet effective logo in PhotoShop, just like this one:

NOTE: Basic PhotoShop skills required.

First off, make a document. Make it big (500*500) so it is easy to work with.

Select the Rounded Rectangle tool. Set the radius to around 30px; make it around this size:

Now we will set a gradient background on the rectangle (Right click on Layer > Blending Options > Gradient Overlay). Have the settings like this:

Now set a 3px stroke with a nice yellow, I will use #ffe71c .

Yours should now look somthing like this:

Now we are going to do the main text. Select a nice font like Verdana, and use a medium-high font size, i will use 36, use white for color. and place the text just above the middle.

Now we are going to add a simple drop shadow to the text. (Right Click Layer > Blending Options > Drop Shadow) Use similar settings to mine.

So far, mine is looking like this

Now on to adding the sub-text, or slogan, whatever you want to call it. Use a nice font or the same font you used for the main text. and do it a bit smaller, choose the color you used for the stroke/border (the yellow) and do the text a bit below the main font.

Mine now looks like this:

You’ve pretty much finished the main part now, but you can always make some modifications.

Here I changed the text colors around

Here I added a simple text effect that you can learn how to do here (coming soon).

Theres heaps of stuff you can do with this so start changing it around and get something you like!