freeyourdesign » tutorials

CSS Tip – Using Link Anchor Pseudo Classes

fyd — Mon, 28 Apr 2008 13:32:35 +0000

Let's take a look at styling anchor tags, or links, using CSS. We will be going over the CSS pseudo-classes that are used with links – link, visited, hover, and active. First, let's take a look at the link pseudo-class in CSS.

:link – this pseudo-class is used to style a normal unvisited link. When you are styling links you should put this pseudo-class first.

a:link
{
color: #339966;
}

Notice that we use the HTML tag, or selector, a because that is how a link is represented in HTML. The :link represents the pseudo-class. Then you set your properties between the curly braces. This CSS will change all the unvisited links to a green color.

:visited – this pseudo-class is used to style a visited link. When you are styling links you should put this pseudo-class second.

a:visited
{
color: #00ffff;
}

You will see that most sites will set the visited link color to the same color as the normal a:link color.

:hover – this pseudo-class is used to style the mouse over effect of a link. When you are styling links you MUST put this after a:link and a:visited.

a:hover
{
color: #FF0000;
}

:active – this pseudo-class is used to style an activated link element. When you are styling links you MUST put this after a:hover.

a:active
{
color: #FF00FF;
}

This effect is seen while clicking the link. You will find the a lot of sites will style a:hover and a:active the same.

Putting it together in the HTML.




<span class="text">Link and pseudo-classes</span>

<!-- Embedded Styles -->






A Link Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can see how the styles effect the links. You can also combine these anchor CSS pseudo-classes with regular CSS classes. This can help you style links differently throughout the page.

a.className:link, a.className:visited
{
color: #ff0000;
text-decoration: none;
}

a.className:hover, a.className:active
{
color: #00ff00;
text-decoration: underline;
}

The above CSS shows you how to add a class name to the pseudo-classes and how to style multiple elements at the same time. className can be whatever you want to name your class. You can put the :link and :visited pseudo-classes together by adding a comma between declarations. The HTML would look like this:

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

All you need to do is add class="className" to the anchor tag.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Styling links using CSS is easy – just remember to put the pseudo-classes in the correct order – :link, :visited, :hover, :active.

The HTML

CSS Tip – Different Color Borders

fyd — Fri, 25 Apr 2008 11:50:45 +0000

A quick CSS tip. Don't want your css border to have the same color for every side. Well, you can make each side have a different color – it's easy.

.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}

Some text in the box

Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT – or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence – or it 'overwrites' the border's color.

Need the HTML – I used an embedded stylesheet here, but this will work the same in an external stylesheet.



<span class="text">CSS Different Colored Border</span>








Some text in the the box

CSS Custom Search Field or Textfield

fyd — Thu, 10 Apr 2008 11:47:42 +0000

Tired of those normal old text field boxes? Well, we are going to create our own custom text field. You can use it on a form or for your search field on your blog. We will start out by simply using CSS to customize the color of the text field's background and border. It's simple, but it can make a big difference and help your search field or form fit in with the design of your site.

Simple Text Field Styling with CSS

We will start with the HTML. Setup you basic shell for a HTML file and add the form and input tags in between the body tags.




<span class="text">CSS Custom Text Field</span>

style.css" type="text/css" rel="stylesheet" />





text" name="field" class="textInput" />

Notice that in the input tag we are using a type of field – which creates a text field. The name can be whatever you would like. Then we add class="textInput". This connects us to the class .textInput in our CSS file. The name of the class can be whatever you want.

Now for the CSS.

/* CSS Document */
.textInput
{
border: 1px solid #ff0000;
background: #555555;
color: #ffffff;
font-size: 1.1em;
}

border – used to change the style of the border around the text field. Here I changed it to a red color. You can use border to change the thickness, border style (like dashed or dotted), and the color.

background – changes the background color of the text field (we will use an image later). The default background is white.

color – changes the color of the font. The default is black. I changed it to white.

font-size – changes the size of the font which will increase/decrease the size of the text field.

Obviously, you can use other properties to customize the text field. These are some of the more commonly used.

The HTML
The CSS

CSS with Image Text Field Customization

For even more customization you can add a background image behind the text field. We need to add a div and class around the input tag in the HTML.


fieldHolder">
text" name="field" class="textInput" />

This new class fieldHolder will hold the text field and the background image we want to use. We will also be changing up textInput.

.fieldHolder
{
	width: 182px;
	height: 27px;
	background: url(tfbg2.gif) no-repeat;
	float: left;
}

.textInput2
{
	width: 170px;
	height: 22px;
	background: none;
	border: none;
	color: #000000;
	margin-top: 5px;
	margin-left: 5px;
}

First off, here is the image I am using – it needs to be saved to the same folder as you HTML and CSS file.

(right-click save as/save image as)

Back to the CSS.
.fieldHolder
width – this is the width of the image we are using.
height – this is the height of the image we are using.
background – linking to the background image and no-repeat.
float – left, this is optional. It is needed if you want to line up forms side by side (if you do this you might need to add margin-right to space out the fields).

.textInput – styles for the text field
width – width of our text field.
height – height of our text field.
background – no background – we want to use the .fileHolder background.
border – no border.
color – color of our font/text.
margin-top – this is important and deals with getting the cursor to show up inside the 'text field' area in our background image. Because we just made an image we need to tell the cursor were to go. This could be different depending on the image you use.
margin-left – same as above – only position the cursor left or right.

The HTML
The CSS

The good thing about encasing the text field inside of fieldHolder is that you can adjust the position of the text field by changing the margins inside of fieldHolder and not have to worry about the cursor position. Once it is set within .textInput you shouldn't have to mess with it.

You can pretty much use whatever background image you can come up with. You will just have to adjust the margin-top and margin-left inside of the .textInput class to position the cursor correctly.

CSS Gradient Background Fade

fyd — Wed, 02 Apr 2008 11:41:22 +0000

A quick and simple way to use a gradient background for you web site. Make the gradient look like it is fading out with no weird lines – just smoothness. It's really quite easy to do using CSS to edit the body property of the HTML document.

We will start off with the HTML. So, open a new document – I'll be saving mine as fade.html. Get the basic HTML shell written out and go ahead and add a link to a stylesheet – style.css. Now here is how we will layout the page for presentation purposes.



<span class="text">Gradient Background Fade</span>
link to stylesheet




 main container
Place holder text

left demonstration 


  right demonstration 
Right Section

Note: if you copy and paste this you need to take out the 'main container', 'left demonstration', 'right demonstration' text – they are not to be in the code they are just comments I made.

Just a quick layout to show a couple uses of the gradient fade. Before we get to the CSS we need to make(or get) an image for the background. You can use Photoshop to create a simple gradient

In Photoshop create a new file – I'll make mine 10px wide by 400px high.
Pick the colors you want to use for your gradient – Take note of whatever the bottom color of the gradient is – we will need it later. If you double click on the color in the Tools pallet you can copy the hexadecimal number (# followed by six digits). Fill your file with the gradient and save it. Or right-click and save the images I used.

Now to the CSS

body
{
/*the color here #2c2721 was the bottom color
of my gradient image - a seamless fade*/
background: #2c2721 url(img/bg3.gif) repeat-x;
}

/*just a container to hold things*/
#main
{
	margin: auto;
	width: 700px;
	height: 600px;
	background: #ffffff;
}

#main p
{
	padding: 10px;
}

/*the area to the right with a gradient fade*/
#rightSide
{
	float: right;
	margin-right: 10px;
	height: 500px;
	width: 200px;
        /*#ffffff is the bottom color in gradient*/
	background: #ffffff url(img/rightbg.gif) repeat-x;
}

#rightSide h1
{
	color: #fff;
	margin-left: 5px;
}

/*left area with fade example*/
#leftSide
{
	float: left;
	height: 500px;
	width: 200px;
        /*#ffffff is bottom color in gradient*/
	background: #ffffff url(img/bg.gif) repeat-x;
	margin-left: 10px;
}

All the extra CSS is just formatting to show the examples. The background: is the property we need to worry about to make the gradient fade work. Use repeat-x to make it show up all the way across the page, but not repeat down the page.

The HTML
The CSS

Download HTML, CSS, and Images

Not the prettiest example, but you get the idea – pick the colors you want and make it look good.

Photoshop Tutorial – Web 2.0 Button

fyd — Wed, 19 Mar 2008 11:32:04 +0000

We are going to create a snazzy web 2.0 glossy button. I am using Photoshop CS2, but I'm sure these techniques will work in most versions. The size you make the button is up to you and should be customized to fit the site you are building. In this Photoshop tutorial we are going to be using tools like the gradient tool, marquee tool, pen tool, text tool, a pattern, and more.

We will be using a stripe pattern in the background of the button, so if you didn't complete the pattern in the web 2.0 header tutorial you can download it here.

Download Stripes Pattern

Let's get started.

File Setup

Open up Photoshop and create a new file. Like I said, the size is up to you – I will be making mine 200px X 50px.

Create a new layer and name it bg.

Rounded Corners or Not

First, grab the gradient tool.

Set the Foreground color to black.

Set the Background color to 50% gray.

Using the gradient tool click and drag from the bottom to the top – so that the black is at the bottom of the button.

If you want the button to be rectangular then skip to adding a stroke.

If you want the button to have rounded corners follow these steps.

Grab the Rounded Rectangle Tool

At the top set the Radius: to 10px and make sure Paths is selected.

Start in the upper left corner and pull out the shape to the lower right corner.

Right click and select Make selection… Feather Radius: 0 and click OK

Next hit ctrl+shift+i to invert the selection and hit delete on your keyboard and now the corners are rounded.

Add A Stroke

Whether you rounded your corners or not, let's add a stroke to the bg layer.

Double click on the bg layer to open the Layer Style window.

Click on stroke and set size to 1px, Postion: to Inside, and the Color: to black.

Add the Stripes

Create a new layer and name it stripes.

ctrl+left-click on the bg layer's Layer Thumbnail to create our selection.

Go to Edit->Fill… make sure Use: is set to Pattern

Now to load the stripes pattern you downloaded. Follow the directions on the image below then browse to the place you saved the stripes pattern and load it in – it will show up at the end of the list of patterns. Click it and hit OK.

Set the Opacity of the stripes layer to about 20%.

Add the Text

Grab the Text Tool (keyboard shortcut 't').

Set the options to Myriad Pro for the font Bold and 24pt – I used a light gray for the color.

Select the text and change the Vertical and Horizontal scale to match the image below.

Add the Highlight

Create a new layer and name it highlight.

Using the Pen Tool create a path similar to the image below.
Then right-click and pick Make Selection…
Click OK and fill it with white.

Once again ctrl+click on the bg layer's Layer Thumbnail to make it our selection.

With the highlight layer still active hit ctrl+shift+i to invert the selection and hit delete on your keyboard.

Change the opacity of the layer to about 15%.

Text Reflection

shew… text reflection anyone.
Right-click on the text layer Home and select Duplicate Layer… and click OK.

Go to Edit->Transform->Flip Vertically

Hold down shift and drag the reflection down below the text.

Adjust the Opacityof the reflection to 40% or so or add a layer mask which ever you like. And there you have it – were are done with our Web 2.0 style button.

Download the psd file for this Web 2.0 style button and get an extra stripes layer so you can have to colored stripes. To change the color just ctrl+click on the Layer Thumbnail to create the selection and fill it with the color you want.

Grab the Photoshop file and the image file

Download Files

CSS – Make Text Wrap Around Image Using Float

fyd — Wed, 05 Mar 2008 12:39:09 +0000

Using CSS we will add a class to the img tag so that our text will wrap nicely around our image. This can be done fairly quickly and can really make your content look better. I recommend adding these classes to every CSS file – or if you have a base CSS file that you always use put these in it.

The HTML

First, we are going to set up our HTML – I'm just using placeholder text and a random image. You can copy my text or search Google for placeholder text.

<span class="text">CSS Image Wrap</span>

Lorem "ipsum" dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Notice the class="left" inside the img tag. That's what we will create in our CSS file.

The CSS File

Make a new .css file – you can just use Notepad and save as .css instead of .txt

Name it style.css

/*float left*/
.left
{
        float: left; /*left in our text*/
        margin: 3px; /*space around the image*/
}

/*float right*/
.right
{
         float: right; /*right in our text*/
         margin: 3px; /*space around the image*/
}

That's all we need for our css file. If you use class="left" in the img tag the image will be aligned to the left within the text and using class="right" will align the image to the right. Pretty easy and you'll use it all the time.

Download: (right-click save as)
The HTML
The CSS

No Float Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Float Left Example

Float Right Example

Illustrator CS2 Add Highlight to Text

fyd — Wed, 27 Feb 2008 12:47:47 +0000

Here is a quick way to add a highlight to your text in Adobe Illustrator using the Intersect shape areas tool.

Start off by opening a new document in Adobe Illustrator(I'm using Illustrator CS2).

Type Out The Text

Grab the Text tool and type out your text. It's better to use a font with wider letters – the font I used was Arial Black.
Go ahead and give the text a stroke color.

Duplicate The Text

Select your text.

Go to Edit->Copy.

Then go to Edit->Paste in Back

Hit ctrl+2 to lock the copy of the text. You shouldn't see any kind of change.

Draw Out The Highlight

How you draw the highlight is up to you. I took the rectangle tool and drew a rectangle that covered the top half of my text. You can use the circle tool or the pen to draw out the highlight area.
Make the shape white with no stroke.

The Intersect Shape Area Tool

Now to get the highlight on the text only.

Go to Window->Pathfinder to open up the Pathfinder pallet.

Select the highlight area and the text

Next click Intersect shape areas in the Pathfinder pallet. It's the third from left under Shape Modes:

After you click Intersect shape areas click Expand (it's in the Pathfinder pallet)

Finally, go take the Opacity: down to 20 or 30 percent. And hit ctrl+alt+2 to unlock your text layer.

This same process will work with shapes, not just text. Try it out.

CSS Horizontal Menu

fyd — Thu, 21 Feb 2008 12:51:56 +0000

Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line – so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css – You can use notepad and save the file as .css instead of .txt

Main Container

We start off with our main styling container. In it we will setup styles like the width of our menu – the background color – font size – and tell it we don't want any bullets next to our list items.

/* main container - ul id="menu" */
#menu
{
	margin: 0; /* reset the margins */
	padding: 0; /* reset the padding */
	width: auto; /* this size depends on your menu */
	float: left; /* line things up */
	font-size: 1.4em; /* increase the font size a bit */
	background: #656565; /* any background color you want */
	list-style: none; /* no bullets on our list items */
}

The List Items

Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.

/* list elements */
#menu li
{
	display: inline; /* make it horizontal */
}

Our Links

Let's style our links. This is where we put in formatting like the color of our links – text decorations – and anything else you want. The padding here is important and is used to give extra space around the words – without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.

/* style our links */
#menu li a:link, #menu li a:visited
{
	float: left; /* line things up */
	color: #ffffff; /* the color of our linked items */
	padding: 10px 10px; /* spread it out */
	text-decoration: none; /* no underline *//* white border to the right of link
	*/
	border-right: 1px solid #ffffff;
}

Link Hover

Now we format how the link will look when our mouse hovers over it.

/* style link hover */
/* .active_link class - optional -
styles the current pages link */
#menu li a:hover, #menu li a:active, #menu .active_link
{
	text-decoration: none; /* no underline */
	/* color to change to when we hover over link */
	background: #009900;
}

Clear The Left Margin

We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.

/* optional - but a good class to have in every stylesheet */
/* we had float:left; above so in order to clear out the
left margin and allow elements on our page to start under
our menu we should clear the left margin after we creat the menu
*/
.clearLeft
{
	clear: left;
}

The HTML

Open a new HTML file and add a link to our style sheet somewhere within the tags.

Within the tags we will setup our menu. Remember we are using an unordered list for our menu.



	
	
	
	Home
	About Us
	Link 3
	Link 4

<-- clear out left margin -
       see stylesheet for more info -->

There you have it – customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS

Resources – Photoshop Tips, Tricks, and Tutorials

fyd — Sat, 09 Feb 2008 15:16:25 +0000

16 Photoshop resources including tips, tricks, and tutorials – for the beginner all the way up to the advanced Phothshop user.

New To Photoshop

Just learning Photoshop? Opening the program and seeing all the different options can be very daunting to a beginner. Here are a few resources I found that should be very useful to anyone new to Photoshop, upgrading to a newer version, or someone who just wants to better understand the basics.

Photoshop: An Introduction
This tutorial goes into the user interface of Photoshop CS2 in great detail. It is laid out very nicely. They breakdown pretty much every aspect and there are multiple screenshots – some are even color-coded to match with a description below the image. If you are new to Photoshop this one is a must.

Creating a New Document
Creating a new document might sound like a no-brainer, but there are many options when creating a new file in Phothshop. This video tutorial will help you learn all about it.

Photoshop Crash Course
Long tutorial – claims it will take just under 4 hours to get through – lots of images and good information. "The hope of this tutorial is to get you up and running in photoshop in less then four hour's time. It assumes no prior photoshop knowledge but an eagerness to learn." Definitely worth a look.

Photoshop Tips and Tricks for Beginners
Good list of tips and tricks for people who are new to Photoshop.

Photoshop Layers Essential Power Shortcuts
Learn how to work with layers in Phothshop CS2. Plenty of tips and tricks for the beginner or any level of user.

Tool Specific Tips and Tutorials

Extracting with the Pen Tool
Video tutorial showing how to accurately extract images from a background.

Overview on the Gradient Tool
In depth look at the gradient tool and how it is used.

Mastering Layer Mask
Learn the power of layer masks in Photoshop.

Type Tool: Tips and Tricks
Learn about the Type tool in Photoshop.

Custom Shapes and Layer Styles
Get more out of your custom shapes with these tips.

Other Tips, Tricks, and Tutorials

How to Imporve your Photoshop Skill
10 Tips to help you get better at Photoshop.

Photoshop CS2 Keyboard Shortcuts – PC
A list of keyboard shortcuts to help you work quicker.

Add Stock Textures to Images for extra Oomph
Nice tutorial showing you how to setup a scene in Photoshop and add a texture to make it pop.

A Slick Supernatural Text Effect
"In this tutorial we'll be creating a smokey night effect on text to give it an eerie supernatural sort of feel. It's a good exercise in using the Wave distortion filter…"

Bling Effect in Photoshop
Sweet gold bling effect in Photoshop.

Puzzle Effect
Apply a cool puzzle looking effect to a photograph or image.

Photoshop Tutorial – Valentines Day Header

fyd — Wed, 06 Feb 2008 12:35:36 +0000

Valentine's Day is just around the corner – why not dress your Web site up with a new header. So, let's go through how to make a pretty new Valentine's Day header.

A Quick Pattern For Later

Open a new document – 5px X 5px

Zoom all the way in.

Make a new layer.

Grab the Pencil Tool and make it 1px in size and color to black.

Go diagonal from the upper left corner to the lower right corner – you should have five brush marks.

Click the eye next to the Background layer to turn it off.

Go to Edit->Define Pattern… Name it lines and click OK.

Getting Started

First off, open a new document in Photoshop. I made mine 768px X 150px.

Once it opens go ahead and make a new layer and name it bg.

The Background

First, we will setup our colors. For the Foreground color use light red and for the Background color use dark red.

Grab the Rounded Rectangle Tool (it might be under the Rectangle Tool) and draw out a rounded rectangle that fits inside our document. Make it come pretty close to each edge – if you don't get it exact we can adjust it in a minute.

Now, right-click and pick Make Selection… make sure Feather Radius is 0 and click OK.

If you need to adjust your selection go to Select->Transform Selection and you will be able to move and resize it. Once you have it where you need it press enter.

Grab the Gradient Tool (shortcut 'g') and with our rounded rectangle still selected start at the top of our document and click and pull to the bottom of our document. The lighter red should be at the top of our rectangle.

Now, double-click on the bg layer to add a Layer Style.

Add a Stroke – change the color to black and the size to 2.

Add The Lines Pattern

Duplicate the bg layer and name the new layer lines.

Double click on the lines layer and turn off the stroke by unchecking it.

Left-click on the little image beside the lines layer to make it our selection.

Go to Edit->Fill… change Use: to Pattern and for Custom Pattern: pick our lines pattern we made earlier. Click OK.

Set the Opacity to 30%.

Now, we are going to add a layer mask. Click on the Layer Mask icon at the bottom of the Layers Pallet.

Grab the Gradient tool – set the Foreground Color to black and the Background Color to 35% gray. Start in the bottom left corner and drag up to the upper right corner. And we are done with that part.

Note: If you still have the rounded rectangle area selected you can ctrl+d to deselect it.

Let's Add Some Text

Grab the Text Tool (shortcut 't') – Change the Options to Monotype Corsiva at 48pt (or whatever text style you want)

Type out Happy and exit the Text Tool.

Then type out Valentine's Day below it.

I tilted mine up a little ctrl+t to transform the text.

Add a stroke to each layer by double-clicking on it and selecting stroke – change the color to black and the size to 1.

Duplicate the Happy and Valentine's Day text layers.

Select both of the layers by holding down the shift key and clicking on the one that is not highlighted.

Right-click on either layer and select Rasterize Type.

Right-click again and select Merge Layers – rename the merged layer to reflection.

Now, we need to flip the reflection layer over. Go to Edit->Transform->Flip Vertically.

With the Move Tool (shortcut 'v') hold down shift and move the reflection text down.

Ctrl+t and move and rotate the text to line up correctly.

Add a Layer Mask to the reflection layer. Use the Gradient Tool (the colors should be the same as the last layer mask we made) and use the image as a guide to make the gradient.

A Heart

Create a new layer and name it heart.

Use the Custom Shape Tool (under the rounded rectangle we used earlier).

Change Shape: to one of the Hearts.

Drag out a heart shape to your liking.

Click on the Paths tab in the Layers Pallet.

Right-click on Work Path and select Make Selection… click OK.

Fill it with a red color or a gradient – it's up to you.

Double-click on the heart layer and add a stroke - color black size 1.

While we are in the Layer Style options. Give the heart a Bevel and Emboss – change the Style: to Inner Bevel the Technique: to Smooth and change Soften: to 10 now click OK.

There you have a nice header for Valentine's Day.

Extra

Add a ribbon look to the header.

Make a new layer above the lines layer – name it ribbonLong.

Take the Rectangle Marque (shortcut 'm') and drag out a rectangle the width of the image in the center make it about 50px or so tall.

Fill it with a dark red and give it a stroke color black size 2.

Make a new layer name it ribbonTall. Do the same thing only make this rectangle go up and down at the center of the image. Give it a fill of dark red and the same stroke.

Now, ctrl+click on the little image beside the bg layer.

ctrl+shift+i to invert the selection.

Click on the ribbonLong and hit the delete key then click on ribbonTall and do the same.

Grab the Burn Tool – make the brush size about 50px and the Exposure: 35%.

Burn along all the edges of each rectangle – a little extra at the ends.