How do I make a design like this?

I seen this website, with a cool header that looks like its flat on top… like a ledge. How can I make something similar to that in Photoshop?

It looks like the design is flat, but they just put a lighting effect over it to make it look flat.

It takes a bit of skill to do that in Photoshop. Do you know Ps at all? You can Google just about every Photoshop trick. It’s amazing how many tutorials there are out there, but knowing what to Google is the hard bit. There’s no effect ‘over it’ though, as far as I can tell. They’ve just used a lot of techniques to create that image.

I’ve made websites in Photoshop but I’m not an expert with it. I watch the videos all the time on the internet. I have found many website with tutorials (the website I’m talking about on that link has MANY photoshop tutorials), that’s how I found the website.

But I don’t know what to search for to get an effect like that. I don’t even know who would know how to do that. I guess I could ask Adobe… but it’s probably pointless to contact them.

The main aim is to create an optical illusion that looks like its on a ledge, it’s not easy to get the perspective right but I have written a brief tut for you to follow.
It’s by no means an all encompassing tutorial but it should give you some ideas to be going on with.

Shelf/Ledge Tutorial

Set the background colour (in this case I am recreating webdesign.com’s header so will use their colour scheme)

Set up your grid to 10px x 10px and make sure that you are snapping to the grid.

Using the Rectangle Shape tool (not the marquee tool), draw out your first main rectangle.

Now draw out the shelf. I have done it 20px high but this can be changed later.

Next count 20px in and do the top most rectangle

Grab the direct selection tool and select the top left point of the ledge layer

Drag the point in to meet the bottom of the other rectangle above it. Do the same on the other side!

This gives you the basic shape so now we need to make it look 3D.

Using the marquee tool, drag out a shape 10px high and the width of your canvas. Create a new layer and fill the shape with white.

Again using the marquee tool, create a rectangle from the top of your canvas down to where the shelf rectangle starts.

Grab the Gradient Fill tool, create a new layer and set the background to black and foreground to transparent

Click and drag so that the gradient fills the bottom half of the marquee rectangle

Deselect that layer and drop the opacity down to around 30%
Go to Filter > Blur > Gaussian Blur and set it to 2

Back to the highlight layer. Go to Filter > Blur > Gaussian Blur and set it to 3.
change the Layer Blending mode to Overlay and drop the opacity down to around 30%

Finally nudge the highlight layer down so it sits below the ledge and you should have something like:

PSD file attached.

HTH

Spike

Thanks for tut spikeZ. I am going to try some now and post my examples at a later date. I’m getting to like this.

Nice tute, Mike. I found it hard to get some bits working at first, being unfamiliar with a lot of Ps. At first I couldn’t even draw the blue boxes. Then I discovered the options top left. So much to learn with Ps.

You’re both welcome.

Ralph~ if you click and hold the button down on a tool with a little tiny black triangle, it will give you an options flyout for the various tool options available.

Thanks Mike. I wasn’t very clear in what I said. My problem was that I kept drawing rectangles and nothing would appear on screen. After a bit of Googling I found that there are three options way up in the top left horizontal bar. I don’t know what the option that was selected is for, but I had to click the icon with the little boxes on the corner for the rectangle box to draw anything.