18 replies to this topic

[throese]

I use it because I'm a visual person. I like to do the website layout in Photoshop, make the images the way they need to be etc. etc. and then code it.

Who else uses this method?

[WingedPanther]

I don't. Most of what I do is more web programming that web design. Given that I tend to have heavily dynamic content, with few images and dynamic behavior, I can't imagine trying to do what you describe and making it work.

[throese]

I know it sounds hard, but I've done it before. I'll give you an example once I do it again. =)

[Alexander]

On some occasions a site is made from essentially a PSD file, with all the graphics plugged in to basically absolute positions. I don't really like that method, becuase if you listen to WingedPanther it just isn't a viable solution if you're developing a site with dynamic content.

[throese]

Then, how would I go about making graphics and other dynamic content with just code? I don't get how people do that.

[WingedPanther]

The graphics have to be designed to be modular. It's NOT a trivial thing, but it really comes down to having sections of the dynamic design built to work with the graphics. For example, on this post there are certain graphics that are designed to fit into each person's post, but the posts are all stored in the database and the number of posts on the page is dependent on both the number of posts in the thread and the number of posts you have selected to display per page.

[throese]

That makes sense.

Example of what I use Photoshop for Web Layouts:

throese on deviantART

Websites can't be done like the above one?

I still have a lot to learn and even more to understand.

[Alexander]

You can surely make a website like so, if you're really lazy (wishing for the design to be applied directly in-tact) you can use image maps for each of the buttons, but ideally you'd splice up each part of the image and place them with CSS. The center can be fixed-width inside a div without too much trouble, etc.

[throese]

Um, I'm not all that good with image mapping and how it works.

And how does splicing work?

[WingedPanther]

One thing to be aware of, as well, what happens if the number of the buttons displayed is supposed to be dynamic? Different security levels of users may have different options.

[zeroradius]

What i do is create a PSD file and print it out on paper. I then write down the deminsions (in px) all the way down to the smallest spacer (this includes div containers and the like). I also write down any and all hex codes or image paths (for tiled bg's,banner) I then set down and write some psuado markup/style .I then save out any images i need from the mock up into individual files (banners, tilable BGs, button backgrounnds if applicable), Finaly I write the actual markup and css for my view and then begin codeing. You could use the slice tool and make a web site from that but i found it tends to break and be a mess to maintain.

It may take a bit longer but for a couple of hours worth of work you can generate a exact clone of your PSD that is complytly Dynamic.

[throese]

WingedPanther: I'm not sure. I'm still learning stuff. =)

zerioradius: Thank you, but this brings up one question with the PSD web design/development tactic. When it comes to aligning the images (as it use just the images to set up the site), I'd have to position everything with the "position:absolute;" CSS properties, wouldn't I?