Websites in photoshop

[nickkrym]

Hi, I recently made a webpage with photoshop and slicing, etc. Now i know it doesnt look too profesional and i really want to make it look good. I vbeen making websites with photshop for awhile now, but when i asked a pro they said the slicing was bad. what exactly is bad with my site and does anyone have any good tips for building website with photoshop?

Thanks, Nick

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

[edited by: tedster at 1:42 pm (utc) on June 22, 2004]

[bufferzone]

I use Photoshop for a lot of things when I design web sites. Sometimes I use Photoshop to “draw/create” the general all-round design of the pages and then slice the design up with Imagesready, but I always do after processing of the resulting webpage in a web editor in order to sanitize and optimize the design.

I always start with a handmade drawing to get an overview of what I want to do.

Some of the things you need to consider:

Speed of download. If your page contains a lot of graphics it will be heavy and slow. Try to minimize the use of graphics if you can.

Don’t use graphical text. The SE’s cant “read” text if it is an image. Try to minimize the use of images as links if you can. Do ordinary html texts as links on top of an image if you must, but always use html text as links, The SE’s love them.

This is just some of it, I’m sure there is more when we think carefully

[nickkrym]

Thanks alot for the reply, it was very helpful. I havne another question, on alot of sites I see the "main" area (so where the main text, etc is) are obviously surrounded by images made in photoshop so the site design was made in photshop and sliced). Now the length of the content for each page differen obviously, but the design stays the same. What I noticed when making my webpage was that to fit alot of text into a set sized table makes ugly scrollers, etc and it becomes neccessary to use iframes.

Now all these other siotes somehow have adjusting table sizes (and the images around them) to fit the amount/length of text. any idea how this is done? For example on some sites you can see all the pages contain the same main table, but depending on the amount of content the table and images around it stretch up or down.

[edited by: tedster at 1:41 pm (utc) on June 22, 2004]

[Nutter]

I'll throw out a guess. Make three <div>'s; one top, one bottom, and one middle; all the same width. For the middle <div> use background-image: url(path to background files.xyz); and background-repeat: repeat-y; in the style tag. The image for the content <div> should be as small as you can make it. 1 pixel tall would be enough if you want something solid. Then, inside the middle <div> put another <div> with a margin-left: equal to a little more than the width of your repeated image.

This really did make sense to me as I was writing it, but looking back I think I may have confused myself. Let me know if it makes sense to you.

You might also just view source on the page you reference. Might be a easier way.

- Ryan

[smokeyb]

I do this using DW templates. I usually have a top table with graphics and nav buttons, and a left table with sub navigation buttons and maybe some images. Then I have a main table set to 100% and make this the editable region for the text pages, and then save the whole thing as a template. All the other pages are basic, and as the elements of the template are cached, you only have to wait for the images to load once.
HTH

[Jon_King]

nickkrym,

I think you would really enjoy building a site with Dreamweaver. Macromedia employs pretty much a different methodology from Adobe. Many of the issues of which you speak will become clear if you start to learn DW. IMHO