There’s a lot of things going on in here. You will learn how to add depth into text and other small shapes, create a 3D shape the easy way and apply gradients to get a realistic lightning.
The techniques learned throughout this tutorial can be applied in many more ways and are definitely worth learning.
So let’s get started right away.
Result Preview:
Step1
Create a new file of 1000px wide and 400px wide
Step2
Select the ellipse tool
And draw a flat ellipse like so:
If you’re unsure about what size you’re going with, try making it about 22.5 wide and 3.7 high. You can see this by opening the Info menu located under Window>Info or by pressing F8
Step3
Double click this layer with the shape in order to get the Layer Style window.Add a Drop Shadow:
Blend mode: Normal
Color: White
Opacity 75%
Angle 90° – Deselect “Use Global Light”
Distance: 0px
Spread: 0px
Size: 5px
Add an Inner Shadow:
Blend mode: multiply
Color: black
Opacity: 100%
Angle: 90° – Deselect “Use Global Light”
Distance: 0px
Spread: 0px
Size 61px
And finally add an Inner glow:
Blend mode: normal
Opacity: 75%
Noise: 0%
Color: White
Choke: 9%
Size: 90px
Step4
To prevent ourselves from any clutter, we’re going to rename the layer we just edited. Double click on the name and rename it to “Top”.Step5
Make sure the layer is selected and press ctrl+J (Windows) or cmd+J if you’re on a Mac.This will duplicate the layer, now make sure the new layer is selected and press V to access the resize tool.
Hold Alt+Shift and drag one of the corners until you get something like this:
You might want to make the height a little bit smaller by holding Alt and dragging the upper or lower nod up or down, just a few pixels.
Step6
Rename this new layer to “Dark Center”Step7
Double click the Dark Center layer and add the following styles:Drop Shadow:
Blend mode: Normal
Color: white
Opacity: 75%
Angle: 90° – Deselect “Use Global Light”
Distance: 1px
Spread: 0%
Size: 2px
Inner Shadow:
Blend Mode: Multiply
Color: Black
Opacity: 75%
Angle: 90% – deselect “Use Global Light”
Distance: 1px
Choke: 0%
Size: 2px
Gradient Overlay:
Select “Reverse”
Style: Reflected
Angle 96°
Color: from #3d3d3d to #5b5b5a
Step8
Now we’re going to create the bottom part of the navigation, you could do it with the pen tool, that’s the hard way. But let’s just duplicate the Top layer so often that it becomes the same shape.So select the Top layer, hold Alt and press the down arrow about 25 to 30 times. (I prefer 26)
Select all these layers that you just produced by clicking the one at the top, scrolling down in the layer menu and hold down shift and then click the first copied one (NOT the original). Then press ctrl+E to merge all those newly created layers.
Now you should have 2 layers, drag the “Top” layer above the copied one.
Step9
Now for our own ease, we need to remove the part we don’t see.To make things less confusing, name the new layer to “Nav Bar”.
Then click Ctrl+click (cmd+click on Mac) the grey image of the “Top” shape layer.
It looks like this:
The ellipse will be selected, now go to the “Nav Bar” layer and hit Delete or Backspace to erase that area on just this layer. You can double check if it worked by hidding the “Top” layer (just click the little eye icon next to it).
Step10
On the “Nav Bar” layer we’re going to add a layer style.Gradient Overlay:
Color: From #414141 (at Location 0%) to
#737474 (at Location 15%) to
#adadad (at Location 50%) to
#737474 (at Location 85%) to
#414141 (at Location 0%) to
Step11
Now duplicate the “Top” layer once again, but just 1 time by pressing Ctrl(or cmd for Mac)+J.Move this layer all the way down, just above your background layer.
Move it down by pressing V for the right tool and then holding Shift and pressing the down arrow 8 to 9 times (I prefer 8).
Step12
Remove all the Layer Styles of the copied layer and only add a Color Overlay that’s totally black.
Rename the layer to “Shadow”.
Step13
Make sure your Shadow layer is still selected and go to the Filter menu>Blur>Motion Blur.
A window will pop up asking you if you want to rasterize the layer, press OK.
A new window with the settings will come up, change the Distance to 123 pixels.
You should have something close to this now:
As you might have noticed, the shadow is till a bit hard, especially at the bottom.
We start making it better by turning the Opacity of the Shadow layer to 75%
Step14
Pick the Blur Tool
and use the following Brush Settings (right click):
Make sure the “Shadow” layer is still selected and wipe over the bottom area about 5 times up to 10. The edge should look slightly softer now.
Step15
Create a new layer above all the other ones and select the Text Tool (T)Type in the name you want and place it in the center of the black ellipse.
Avoid lowercase typing, because letters like g p and so on will break the effect.
Step16
We’re going to add a few layer styles to the text.Gradient Overlay:
Angle: 90°
Color: From #afb0ad to #e2e4dd
Stroke:
Size: 1px
Opacity: 82%
Color: White
It should look something like this:
Step17
Select the text layer, duplicate it by pressing Ctrl+J (or cmd+J) and drag the new layer below the original one.Remove all the effects and make sure the text is black.
Step18
Move the text down 1 time with Shift+Down Arrow.Add Filters>Blur>Gaussian Blur with 4pixels radius.
Make the layer’s opacity 75% for a smoother look.
Step19
Nobs will show up and you can now position the rectangle to the center. Now hold Alt and drag at the left or right nob to get a selection about twice as big as we just started with.Hit Enter and make sure the “Selection” layer is selected. Now press Ctrl+Shift+I to invert the selection and press Delete or Backspace to remove it.
It will look weird and confusing for a second, but just go on and let’s restyle the layer:
Gradient Overlay:
From #87c540 to #c9da2b
Apply Stroke
Stroke: 1px
Opacity: 16%
Color: Black
Step20
Create a new layer above the “Selection” layer.Pick the Rectangle Tool (U)
And draw a tiny rectangle like this:
Step21
Now let’s add some Layers Styles again:Drop Shadow:
Blend mode: Multiply
Color: Black
Opacity: 55%
Angle: 90° – deselect “Use Global Light”
Distance: 0px
Spread: 0%
Size: 5px
Gradient Overlay:
From #2f2f2f to #868686
Step22
Create a new layer on top of the rectangle one and pick the Text tool.Search a bit what font size you need, many fonts require a different size to fit the “Selection” box.
To this text we’ll add some effects once again.
Drop Shadow:
Blend mode: Normal
Color: White
Opacity: 75%
Angle: 90° – deselect “Use Global Light”
Distance: 1px
Spread 0%
Size: 1px
Color Overlay:
Color: Black
Now the finishing touches.
That is it!
Result:
No comments:
Post a Comment