Best way to start

[Liquidsword]

Hi guys.
Okay heres my problem, I've designed my site in photoshop (layout etc).
What i want to know is, whats the best next step to take it into html/css??

Do i use Photoshop to slice the page up or is there a better way of doing it?


many thanks!

Ollie

[JustinStudios]

Slice away. Get that image all nice and sliced up then publish it for web. Make sure you rename each slice with the slice editing tool so as to get the proper names for your images... Now when you publish it photoshop will produce a pre-made HTML page for ya, take this page and throw it in the trash. Don't edit it, try to use it as a guide, don't even look at its name too long!

Then after you do that i suggest you check out our beginners resources because it has some wonderful information in it. I have been using it myself to teach myself CSS and while I am struggling at this point, people are always here to help you.

[Ryan Fait]

Yes, hand coding an XHTML and CSS website is the best route to take. Unfortunately, there are no programs out there that will code a good website for you.

[Lchad]

Noobsmith I have never heard it said so well!

Depending on what your design looks like you may:
1)Slice a header
2)Slice a content area background
3)Slice a footer

Usually that's the minimum when I make a site.

Post up your design, and we can verbally slice it for you!

[karinne]

Yep ... STAY AWAY FROM PS's SLICE TOOL!

You'll thank me for that later

Slice it by hand. Figure out what can be set as background-color instead of an image and so on ...

Like Lchad said tho, post your design and we can help you out.

[JustinStudios]

I always use Photoshop's slice tool and then mark the coded parts that can be solid colors (or CSS buttons) as Trash. Then if I need to know the size to make them I can simply find the Trash-Nav and see what size it is I need to code the CSS Roll-overs to be .

[moojoo]

Do it by hand, save each thingy as a file, place with css. Woot! Using imagemaps/slices in ps is just a bad approach, oh and use layers for each thing i.e. masthead, nav, etc.. That will save you loads of time and trouble later.

[Liquidsword]

Okay, this is the site i'm doing for my friend.

the first image is the splash page. whats the best way to make the enter button?

Okay the second image is still a semi-mock up at the moment, but this is the gist of how it'll look. what she/i wants to do is have the main navigation down the left. Then in the middle have a scroll bar which will contain her work in small thumbnails, then when clicked a larger version will appear above in the white box.

hope this makes sense.

enter.jpg inner.jpg

[JustinStudios]

You can make the enter button text (preferred method) or an image with a link. Although, I dispize splash screens because they make me click again! And unless your site is going to be flash, I'd dump the splash screen. Becuase they pretty much only serve a purpose for "Please download Flash Player" or "Flash or HTML?".

[Liquidsword]

out of curiousity will it be easy enough to make the scroll bar for the work on the main page?

[pa007]

Splash pages are bad for seo as well. I'd dump the splash page altogether.

Pete.

[Liquidsword]

heh wow major negativity against the splash page!

ok splash page is gonna be removed

[JustinStudios]

Yeah, with the new CSS you can assign Overflow properties which will make it have the scroll bar if your content is too large for the defined space. Very nice stuff.