Topic awaiting preservation: Photoshop to design a website? (Page 1 of 1)

How is it possible to use Photoshop to design a web site from scratch? I have spent a bit of time learning HTML with Dreamweaver and Fireworks to make the graphics, but I have seen web designers use Photoshop to make some nice looking web sites.

Thanks.

_______________________________
Cards Printing | Booklet Printing | Brochures Printing

Well... er...

Really you'd use it the same way that you'd use Fireworks, it's a graphics package that you could design a layout with, then you can slice the images up as you would in Fireworks.

I do use Photoshop to mock my websites.
I'll start with a simple black&white / greyscale layout to give me an idea of how things will work. I use this technique to make sure I've got a good balance of "white space". Next I'll start to colorize the various parts, keeping things somewhat simple and clean (not always tho).
When I have things finalized, I'll code to fit the Photoshop layout.
I'm not one to use the slices option. I don't like how that turns out. For me slices are a little too inflexible.

YMMV

The most effective way to use Photoshop in web design is the F1 detailed. Make your mock up. From there, you need to figure out how to code it so it looks the way you want.
Then decide what needs to be done as graphics, and what will be handled purely via CSS.
Create the gaphics you need out of your mockup, and plug them in where needed.

As for "but I have seen web designers use Photoshop to make some nice looking web sites." - well, the quality of the work depends on the designer, not the program (if the qaulity is dependent on the program, it means the designer doesn't know what they're doing ).

^^ yes, i totally agree with F1 and DL-44. design with PS, realize with CSS! (oh what a rhyme )

quote:

---

digitech said:

I have seen web designers use Photoshop to make some nice looking web sites.

---

You mean there is another way of creating a website other than how F1 and DL-44 described? Creating the mockup in Photoshop and then figuring out how to code what I want is the only way I know how to create a website (not that I've always been succesful mind you).

_____________________

coeur de feu :: GamerGod.com
Qui sème le vent récolte la tempête!

Thanks guys! especially F1 and DL-44.. thanks for sharing your ideas and techniques. If you guys still know more, this forum is still open for you



________________________
On Demand Printing

A lot us here know a bit. If you are looking for specific information or ideas, it's better to ask specific questions.

Personally I'm one of those designers that drives others nuts, as I'm one to bend and break rules. And then adhere to them (like a bug to a windshield) in the next moment.

Personally, I think Photoshop is great design tool and it seems natural to want to make web sites with it. I guess that's why I wrote SiteGrinder in the first place.

SiteGrinder is a Photoshop plug-in for converting designs for web pages that have been created in Photoshop to actual web pages and sites. http://www.medialab.com/sitegrinder. There's no slicing involved, it can convert styled Photoshop text to styled HTML text, it supports menus, rollovers, popups, multiple-pages, hyperlinks galore, and a bunch of other stuff (. Also, the output is validating XHTML 1.1 and CSS, not tables or tag soup.

Chris

It was funny to read Fireheart's post as I was thinking the same thing!

"Wait a minute- You mean there's another way? Sketch to PS to Kate... I must be missing something..."

cperkins, Sitegrinder looks like a nifty program. But how well does it work with all the CMS things that are out there? I've been doing more work with CMS than scratch building these days.

quote:

---

But how well does it work with all the CMS things that are out there?

---

No worse than anything else, and maybe even a bit better. SiteGrinder produces very clean, easy to edit HTML. So no brittle tables, etc. But I'm not very familiar with the modern build-everything CMS systems. But I honestly don't know what it takes to convert a design, once done in HTML/CSS into something that a CMS system like xs4all could use.

There are different reasons for using those types of CMS systems. Certainly, ease and convenience is one of them. But some people use them for the easy application of templates. The upcoming Pro version of SiteGrinder has support for using Photoshop to 'skin' websites. It's not automatic and some preparation of the web content needs to take place, but once done it's pretty cool. Other people use CMS just for easy upkeep of content. SGPro also has some new PHP support, so plugging a SiteGrinder site into a PHP CMS (where the focus is user editing) should be straightforward, but I, myself, have not tried it yet.

Chris

cperkins:

Is the demo of grinder crippled in anyway? I hate downloading something only to find you can't do this that or the next thing and you have 15 minutes left to do all of it.

And I'm wondering about the 'pro' bit. Does this mean that there's a garden variety available or is that just the name of the product. Couldn't seem to find anything about that on your site or in the forums.

The demo leaves a WaterMark of SiteGrinder in what you are trying to make. I haven't downloaded it either, but I remember that from the site.

I feel so lazy. I had a class once where we had to use Dreamweaver. I hated that thing. I also could never fiugre out the whole slicing thing. I really need a new computer and a better internet(dial-up stinks).

"I was the kid next door's imaginary friend"

NoJive,

As mentioned, the SiteGrinder demo is not time limited in any way, but it does watermark its output with little SiteGrinder logos.

SiteGrinder Pro is under development and is currently in beta. The main SiteGrinder website is dedicated only to SiteGrinder Basic, as Pro is not yet released.

Pro brings a host of new features to SiteGrinder:

picture galleries
• external media (Flash, QuickTime, etc.)
• Flash slideshows
• forms and email forms (PHP or CGI)
• external HTML w/ CSS incorporation/application (ie 'skinning')
• large site creation
• CSS borders and backgrounds
• better CSS
• faster production

and a bunch more that I'm forgetting.

Chris