Photoshop Tutorials

Archive for the ‘Photoshop Graphics’ Category

There are some great effects you can achieve using photoshop and one I really like is to make an inlay over a photo tohighlight certain parts, for example:

This is a really nice effect and you can see how to do it right here.

Enjoy

This tutorial shows a quick way to take your normal, boring product shot and make it look more professional and elegant. This isn’t a new trick, but it’s a really quick process with Photoshop.

Open your image. I started with this photo of a banana. I masked out the banana and slightly rotated it.

Behind my banana layer, I added a Gradient Adjustment Layer. Adjust the colors to something yellowish, or whatever color you want, and fading to black.

Set the Gradient Adjustment Layer to Style: Radial. I increased the scale to fit my banana better.

Make a rectangular selection on the lower 1/3 of your image. Add a new Solid Color Adjustment Layer under the banana layer and above the Gradient layer. Fill it with black.

Select your banana layer and press [Ctrl + J] to duplicate it. Select your lower, original banana layer and press [Ctrl + T] to bring up the free-transform. Right-click on your bounding box, and choose “Flip Vertical”.

Drag your new, flipped layer down, so that the bottom of the top layer, matches the top of the bottom layer. Confused? Picture:

Click on the Add Layer Mask button on your Layers Palette or go [Layer > Add Layer Mask > Reveal All]. Select the Gradient Fill Tool [G] and select your default colors [D]. With your Layer Mask selected, drag your Gradient from top to bottom until you get a nice reflective effect.

And that’s pretty much it. I explained it out in this tutorial, but it’s a few quick steps for a nice effect.

Creating great icons is a real skill and Kearone of http://www.websiteicons.net/ has a great range of fantastic icons as you can see from the above example.

Here are a couple more:

You can get hundreds more here

Yep free icons from Ian Main

Go on, download em. I dare you!

Here’s the deal, they have been sitting here on my desktop for quite some time which is no good to anyone is it. Originally they were designed to make a quick buck and see if I was up to the job. They were inspired from Dan’s awesome set, Overcast and after learning from his The Anatomy of an Icon tutorial I had to give it a go. I suggest if you want a top quality set of greyscale icons head over to Simplebits and buy yourself a set from a pro.

What do you get?

Greyscale is a set of 40 greyscale icons which each fit into a 34 x 34 pixel area.

* 1 flat file gif containing all 40 icons
* 1 flat file png containing all 40 icons (All colours intact)
* 40 individual gif files
* The right to do what you like with them – Licensed under Creative Commons Attribution 2.0 Australia

enjoy

With this tutorial I am going to show you how you can add reflections to your text, shapes or isolated objects. This is a very common (and easy) technique and is used a lot, especially in web design.

As an example for this tutorial I will add a reflection to text, however as I said before you can also use the same technique to add reflections to shapes or isolated objects.

Let’s start our little Photoshop training session

I have created a new document and just type PS Reflection as you can see in the screenshot below.

The first step is to duplicate our text layer. You can do that by simply pressing Ctrl+J or by going to Layer -> Duplicate Layer.

Now, select the Move Tool (V) and drag the duplicate layer below the original one like in the screenshot below.

(You can also add a bit of perspective to the reflection layer by transforming it (Edit->Transform->Perspective) if you want.

The next step is to add a layer mask to the duplicate layer. To do this simply click on the add layer mask button in the layers palette.
add layer mask button

Now pick the Gradient Tool and draw a gradient (black to white) in the direction that the arrow is showing in the screenshot below. (Hold Shift while you draw the gradient)

You should now have something like this.

Finally just reduce the opacity of the duplicate layer and you are all done. I reduced the opacity to 35% and here is my final result.
Final result of photoshop training session

There is no golden rule about the opacity % , just play with the opacity setting until you get your desired result.

When you’re working on a .psd, you’re likely going to want to eventually to have your file saved as a gif or jpg.

In the file menu, you can select “Save for Web,” located under save, to do so. When you select it, a new window will open allowing you to make choices about how you want to save and optimize your image.

You can select transparency options, matte colors, and file types to apply. This way, you don’t need to flatten your .psd just to get a jpg or gif image.

Ok so this one is not so much just photoshop but a way of incorporating some online tools with photoshop.

Go to http://logomaker.com/ and click on design it for free. It will open a great flash logo design window for you. Use the graphics and text to design your logo. I then use Snagit to capture the image or you could just use print screen and then paste into photoshop and crop.

Now the only problem is that we have the light blue grid so use the magic wand and select the grid and delete.

You now have a nice logo wit6h a white background that you can do anything you like with.

Enjoy.

This tutorial will show you a few simple techniques to design a nice smooth gradient header and nav bar that you can use in your web designs.

This finished design will look like this :

To start off, create a 770px wide x 200px high document. Select the rounded rectangle tool, set the radius to 10px and draw out a shape for the header :

Right click on the shape you just drew’s layer and select blending options. Click ‘Outer Glow’ and give it these settings :

Next, click ‘Gradient overlay’ and give it these settings :

Finally, click ‘Stroke’ and give it these settings :

Your header shape should now look like this :

Next, using the rounded rectangle tool again draw out the shape of your nav bar below the header bar, then right click the header shapes layer and select ‘copy layer style’ , then right click the nav bars layer and ‘paste layer style’. You should have something like this :

Now right click the nav bar layer, go into blending option and click the gradient overlay. Change the gray/white gradient for and orange one using these values : F0B259 > F87811

Click ok and your nav bar should now look like this :

Now we’ll add some text, choose your typeface and type the required links in :

For this tutorial we used univers condensed. We’ll now add a dropshadow to the text, right click the layer > blending options > drop shadow Use these settings :

Your text should now look like this :

We’ll now add some dividers between the nav bar links, create a new layer and zoom in. Using the pencil tool on 1 px, draw two lines like so :

Right click the layer and ‘duplicate’, move this layer along between the next set of nav links, repeat this for all the links.

Your nav is now complete :

Now all that is needed, is your website name / logo to be added and anything else like extra header links or banner adverts etc :

Download the .psd here

I could show you how to do this but it would take to long and pages of samples so just download the finished PSD and play around with it. To get the original tutorial and great PSD and tutorials visit http://www.photoshopstar.com/