Photoshop design to a page

blindmist · Apr 22nd, 2008, 05:05

ok, so i have finally made something that i am actually content with. although, i have designed it entirely in photoshop. how do i make it all into a functional site that i can throw content into while having the patterns line up.

http://www.blindmist.net/justin.slay/

saltedm8 · Apr 22nd, 2008, 11:15

moving to css forum

Bocaj · Apr 22nd, 2008, 19:55

You have to slice it up

Think carefully... You don't need everything sliced, and you may need to re-slice when you realise somethings wrong....

Only Slice the key elements...

Repeating backgrounds, set graphics etc.

Say you have a vertical gradient spanning the entire width of a page, you only need a slice 1px wide and spanning the height of the gradient no more...

Can you post an example of the design?

I will try to look for a decent tutorial for it, but i've yet to find one, and some people do things slightly differently.

1databyte · Apr 22nd, 2008, 21:27

Although i have read a few threads in which some members are not in favour of using the photoshop slicing tool. Having looked at your graphic design, i don't think there is any other option.

As Bocaj already said think carefully about what you want to do. Your navigation menu with its dark grey/black background and white print will be a bit tricky, you can either simulate this affect with ordinary html and css styling or simply attempt to use it as a background with a super imposed html table on top (with hyperlinks)

Lastly, create your home page first slice it up then by using the "SAVE AS" feature make this the slicing template for all the other pages (design, photography, ....) as this will help with all pages having a consistent alignment. Also don't forget to use the "Save For Web" option in photoshop

cheers 1databyte

blindmist · Apr 23rd, 2008, 07:57

I have sliced it up and all and i save it for web, but now all i have is a lot of images embeded into tables that looks great.

although i am still having problems with the background pattern and i cannot seem to figure out how to put my content over these images.

I have tried using dreamweaver and it has been 2-3 years since i have actually written any code. I just wanted to get back into it because of a spur of inspiration in my head.

am i making sense?

crackafaza · Apr 23rd, 2008, 10:09

Ok,

Please don't use the Photoshop slice function, barely anyone in this business uses that function, for the main fact you suggested above, it creates so many images, most are useless and you don't even need them, so please don't use the slice option.

I will tell you my technique (which may differ from other people) but when in photoshop, I use the crop function, and crop the individual image, and once cropped I then save this as whatever format is needed, and save it into my directory.

Then I CTRL & Z (Undo) and then I go back to the original again, and on this I do the same again, crop another piece of the website, and do the same saving as above.

Then you can begin the joys of coding

crackafaza · Apr 23rd, 2008, 10:10

Hi again,

I forgot to mention, please show us your code, or your website URL so we can have a look at your code, and then tell you where to go from then

Bocaj · Apr 23rd, 2008, 19:09

You don't use all the images generated by photoshop, you select the relevant ones.

In an entire layout you may only need 5 or 6 images because you know the rest can be done with css.

But it is a pain to rewrite what photoshop churns out.

My latest design i sliced up into a about two dozen or so slices, only needed about 7 images...

5 hotizontally repeating images and the logo...

It's coded in valid html strict and css... didn't take too long either and now i'm just fitting it to a cms and doing the finishing touches.

Quote:

I will tell you my technique (which may differ from other people) but when in photoshop, I use the crop function, and crop the individual image, and once cropped I then save this as whatever format is needed, and save it into my directory.

That's what the slice tool does, only you save them all in one go.... You don't even have to generate the html with the images.... but i find it useful for reference as apposed to constantly referring to my layout outside of the browser.

Emzi · Apr 24th, 2008, 12:43

I've never used the sliced tool simply because I like knowing exactly what I'm doing. I do exactly what cracka does, it's simple and easy to do.

When you code your site make sure it's centered for all screen resolutions as on the example image the site is a bit too much on the right (and I'm using 1280x1024).

Bocaj · Apr 26th, 2008, 23:30

This might be of use ...

Tutorial