Hopefully someone can help me.....

 

I am currently in the process of designing a site for a band.

 

The background that I've designed in Photoshop CS5 is fairly detailed, it has a texture, a photo, some brushes and a radial gradient.

 

For the navigation I would like to create a CSS sprite as apparently it will help with load times?? And the text for the navigation buttons I would like to do in HTML as it will help with SEO??

 

So firstly......am I going in the right direction? Would you slice up the background that I designed in PS, if so how many images? 1? 2? 3? What file type would you save them as, gif? png? jpeg? Can I then put content, navigation buttons, footers, etc etc over the top of this when using HTML/CSS?

 

The reason I ask is that I've been reading that slicing up templates in photoshop is bad for SEO, is this true or am I looking too far ahead?

 

If you have any tips or advise it would be greatly appreciated as I am fairly new to this.

Hi James,

 

For the background I think a few different images will be needed. First of all have the gradient that will stretch the full width. Then have the photo centered in the middle and then the texture at the bottom. So it would be something like this.

 

<div id="gradient">
  <div id="photo">
  </div>
  <div id="texture">
  </div>
</div>

 

I think I would use jpeg for your background images and yes you can navigation, content etc over the top of the background with divs like in my example above ^^^

 

Slicing in Photoshop isn't bad for SEO, what is bad is when you use Photoshop built in function for slicing that will slice it all at once. But doing your own slicing is fine and what you're supposed to do.

 

For general tips just keep going and trying to learn and come back here whenever you have a problem, we are a friendly bunch and someone will be able to help with any problems you come across.

 

Good luck

Edited December 2, 201114 yr by j05hr

Thanks so much for the response j05hr, I have only been signed up since this morning and am finding it so helpful already

 

In regards to having 3 different images, 'gradient' 'texture' and 'photo' how would you place these on top of each other when coding? Would it be through z-indexing, as wouldn't normal div tags just place each image underneath the previous?

That's ok.

 

Well if you look at your image, you have the gradient which would be the size of the browser and then you would have the photo which would go over the top of the gradient and then you would have the texture in the bottom. So you would lay it out like this.

 

<div id="gradient">
  <div id="photo">
  </div>
  <div id="texture">
  </div>
</div>

 

What this means is that the gradient div is the like the container and photo and texture div is inside of the gradient(container) if that makes sense?

Okay, so far so good, here's what I have in my html...

 

<div id="gradient">

 

<div id="photo">

</div>

 

<div id="texture">

</div>

 

</div>

 

and here's what I have in my stylesheet...

 

#gradient {background-image:url(images/gradient.jpg);

width:1200px;

height:900px;

}

 

#photo {background-image:url(images/picture.png);

width:1200px;

height:900px;

}

 

Only problem is when I add the following...

 

#texture {background-image:url(images/texture.jpg);

width:1200px;

height:900px;

}

 

it sits below the rest instead of on top...if you get what I mean. Is this because the div id "texture" is in a different container?

do you basically want that image as the background of the page and then your nav, text and footer over the top of it? If thats what you want then you can't really do it how you are trying to do it I don't think.

 

Do you have a sketch how you want the page set out?

Ahh that may be my mistake. I thought the texture was only at the bottom of the image, looking at it again, it is throughout the design? What would probably be better is to save the gradient and texture in one layer on photoshop and scrap the texture div and just have.

 

<div id="gradientTexture">

<div id="photo">
</div>

</div>

 

The CSS looks good, but I would change the width of the gradient to 100% and then no matter the size of someones screen it will fill it with the gradient. After you got this sorted I will show you how to centre the photo.

Thanks so much j05hr, think I've finally done it, is the code okay for positioning? It looks okay in a browser...

 

my CSS now is...

 

#gradientTexture {background-image:url(images/gradient_texture.jpg);

width:100%;

height:900px;

background-position:top center;

}

 

#photo {background-image:url(images/photo.png);

width:100%;

height:900px;

background-repeat:no-repeat;

background-position:center;

}

If it looks ok to you then I'm sure it's fine. The only thing I would maybe change is the 100% width on the #photo as (I think) it would stretch and distort the image if people have larger screen resolutions. Use fixed width for this using pixels and whatever size the photo is.

 

Try shrinking your browser and moving it around to see how it looks and if it's fine ignore the above.