Clean Header

Clean Header




In this tutorial, I will demonstrate one method of making a website
header which is clean, simple, and perfect for a professional looking
website or forum. Since a header is located at the top of a website, it
basically defines it, and for this reason, a header should look

Greetings, Today I am going to show you how to create a glossy indented
text that looks great on darker backgrounds or in headers to websites. I
assume you have some basic knowledge of Adobe Photoshop.

In this tutorial you will learn how to create a smooth gloss content
box. This effect can be found all over the internet these days, to make
a very stylish glass/plastic effect for your headers, buttons, and
content boxes. After following the steps in this tutorial you will be
able to create great looking content
boxes.老葡京娱乐网址 1

Remebmer, this is only one method of creating a header. The
possibilities are literally endless when it comes to making headers so
let this tutorial just be of inspiration to you.

Step 1)Create a new document, 500×200 with a dark blue background of
your choosing. I chose #061121.

老葡京娱乐网址 2 Open an
existing document in photoshop, or open a new one. I will be working
with a 300×415 canvas for this tutorial.Fill the background with white

The first step to make the header is to open Adobe Photoshop. This may
be challenging for some but I’m sure you’ll get it 😉

Step 2)Create a new layer and put some text on the page the best font
for this style in my opinion is Impact. I used font size 36 for this
size document. The color is completely up to you although I find it
looks better with lighter colors, for this tutorial we are going to use
a grey text, #919191. After creating your text on the page it should
look like thus:

老葡京娱乐网址 3 Get out
the Rounded Rectangle tool
(老葡京娱乐网址 4Make sure
the “Fill Pixels” is
selected老葡京娱乐网址 5Drag
out a rectangle just a little smaller than the canvas size such as l’ve
done here:
老葡京娱乐网址 6Double click
this layer, and apply the following blending options: Inner
Shadow:老葡京娱乐网址 7Stroke:老葡京娱乐网址 8Gradient
Overlay:老葡京娱乐网址 9老葡京娱乐网址 10Inner
Shadow:老葡京娱乐网址 11Result:
老葡京娱乐网址 12

Next, create a new document with a white background at whatever width
and height you would like the header to be. I chose 800px wide by 200px

老葡京娱乐网址 13

老葡京娱乐网址 14 Next we’ll
create a shine/gloss to our content box. Hold down the CTRL key on your
keyboard and click this layer (doing so should make a selection of
everything on this layer) Alternatively you can get out the magic wand
tool (老葡京娱乐网址 15Keeping
the selection still active, create a new layer.Get out the elliptical
marquee tool
(老葡京娱乐网址 16Now press
and hold the ALT key on your keyboard, and make a deselection as l’ve
done here:
老葡京娱乐网址 17Set your
foreground color to white (#FFFFFF). Get out the gradient fill tool
(老葡京娱乐网址 18老葡京娱乐网址 19Next
fill this selection with your gradient from top to bottom as l’ve done
here: 老葡京娱乐网址 20Clean Header。Drop
the opacity of this layer to 40 percent:
老葡京娱乐网址 21This should
lighten the gloss a little bit, and make it look more realistic.

老葡京娱乐网址 22

Step 3)Open up the blending properties of the text layer by right
clicking on the text layer and click on “Blending Options”. This should
bring up a new window, and I want you to add these settings to it.

老葡京娱乐网址 23 Next we
are going to cover our content area with some basic scan lines. Here is
how we create scan lines.Press CTRL+ N on your keyboard to create a new
document. set the size to 3×3, with a transparent background:
老葡京娱乐网址 24Next zoom in
as close as you can to this new 3×3 document. You can zoom quickly by
holding the CTRL key and rolling your mouse scroller downwardSet your
foreground color to black (#000000). Get out the pencil tool
(老葡京娱乐网址 25老葡京娱乐网址 26Using
the pencil tool, draw three dots onto the canvas exactly as l’ve done
here: 老葡京娱乐网址 27老葡京娱乐网址,Go
to “Edit->Define Pattern”, and name this pattern “Scanlines”:
老葡京娱乐网址 28We are
finished creating our pattern, so you can safely close this 3×3

Now, set your foreground and background colors to a color and a darker
shade of that color respectively. I chose a blue and a dark blue.

老葡京娱乐网址 29

老葡京娱乐网址 30 Now move
back to our original “glossy content box” document and create a new
layer.Hold down the CTRL key on your keyboard, and click on the glossy
content box layer. (just like we did in step #3. This will once again
make a selection of our entire content area:
老葡京娱乐网址 31Get out the
flood fill paint bucket
(老葡京娱乐网址 32老葡京娱乐网址 33Fill
in the selection with your pattern and press CTRL + D on your keyboard
to deselect the selection:
老葡京娱乐网址 34Press CTRL +
I (that’s an i) on your keyboard to invert the colors, this should
change the color of the scan lines to white instead of black:
老葡京娱乐网址 35Drop the
opacity of this layer down to around 50 percent:
老葡京娱乐网址 36Result:
老葡京娱乐网址 37This
concludes the glossy content box tutorial. I hope you’ve learned some
good tips and tricks used by the professionals while following along
with this tutorial澳门葡京赌场手机版app,!

Create a New Layer (Shift + Ctrl+ N) and select the Gradient Tool (G)

so now it should look like

Using Linear Gradient, simply fill the layer with a smooth gradient of
the two colors you chose earlier.

老葡京娱乐网址 38

老葡京娱乐网址 39

Step 4) Create a new layer and call it shine. Now this is where it gets
a little bit tricky, hold down your control key while clicking the small
“T” on the Text layer so it outlines the text which should look like

So far so easy, huh? Here, I created a new layer and made a skinny
selection at the bottom of the header.

老葡京娱乐网址 40


电子邮件地址不会被公开。 必填项已用*标注