Photoshop to make transparent style Web navigation bar

Put on a group of people to enjoy first (first time do not spray Oh!)

First of all, this transparent navigation is not invented by me, I am learning from and learn from

Secondly, I encountered a lot of problems in the course of doing, which were not spoken by our predecessors. Is through my little research out of the results, so the problem is to solve the original

Finally, want to share things to more people, so that everyone less detours, more progress

In the end, come on!

So let's get started!

1.

Create a new canvas (mine is 1000*1000px, Novice can follow)

Background color (personal preferences, my background is blurred image processing, I will send a special article on the background, this time add color first)

Create a new navigation that you think is appropriate, I have rounded rectangles with rounded corners for 17px/600*80px.

2.

First of all

padding for (0), Inner glow (color: #ffffff-effect: overlay-opacity 90%-size 12px) rest without setting

It feels so good to have wood.

Inner Shadow (color: #e5e5e5-effect: overlay-opacity 45%-distance 1px remaining 0 global light full 90 degrees)

Next is the projection

Color: #4c4c4c Effect: Overlay opacity: 50% Distance: 2px size: 3px expansion: 0

That's half the success. Have wood? Just hang in there and ok!.

Okay, so here's the problem.

Draw an ellipse here (for high light)

Mask Feather 16.8px

Effects: Overlay Opacity 35% clipping mask look at the effect

The ellipse is not displayed because this:

We have to cut the ellipse into the rounded rectangle (is the cut rounded rectangle Oh!)

Mix internal effects into group hooks

Mix clip layers into groups cancel tick

Look at the effect.

Okay, here's the problem!

The ellipse has the effect, but the inner glow of the rounded rectangle itself is gone.

Oh,no

So, this is not the right thing to do! (Welcome suggestions and methods!)

Don't worry, actually very simple, just don't want everyone to go into the wrong, so make this out.

We are back to this step:

After the feather of the ellipse is tuned,

Right-grid layer

Then click on the rounded rectangle to bring up the selection (adjust the selection do not have to teach it !) Ctrl + Click on the left mouse button

Then ctrl+shift+i the reverse.

Click on the ellipse layer

Press DELETE

Look at the effect.

Then ctrl+d cancel the selection

Effects: Overlay opacity: 35%

The effect is as follows:

Do not give yourself a little applause, solve a problem that other people do not know!

Don't worry, there are two layers on OK. Persistence is victory!

Draw an Ellipse again

Procedure same as previous ellipse

Think of yourself.

Mask Feather: 3px-grid-Adjust Selection-reverse-delete-effect: overlay-opacity 15%

And then what

Add a mask to this ellipse

The effect is this

Alas, the last floor finally arrived!

or an oval?

This time, it's underneath.

Mask Feather around 18px

Effect or overlay opacity 15%

The effect is as follows:

OK, one navigation is done.

Look at the results, Meimei has a wood

First time sharing

I hope we can learn and progress together.

Come on!

Category:

• PS Getting Started Tutorial