Designing website as a graphic - any hints?

A couple of months ago I learned that many web designers lay out an entire web page in an image editing program first , then slice it up, insert in tables, etc.

My understanding of how to do this is quite limited but I am getting a few website jobs and think I really need to learn and get an handle on this. Can any one offer a few tips, hints or references?

Some of my initial questions would be:

- is there a standard size to make the overall graphic (pixel width and heigth)?

- do you insert individual slices as a foreground or background objects, or a combination of both?

- do you make rollovers right in the graphics program using layers?

- how do you add text? Do you allow for the text area (using white space) in the image, then slice it, delete it and add text in Normal view of FrontPage?

If there are other basic questions I should have asked but failed to do so, please address them if possible. thanks in advance for any tips,

gail

btw, I use Photoshop.
_________________
austin tx apartments halwa recipes  

here's a tip you should remember: don't use FrontPage, ever...

have a look at this .psd to html tutorial: http://www.partdigital.com/tutorials/convert-web/

[Join us @ facebook]

Yeah frontpage really sucks and it is too hard to create a valid site with it, or even a site that will work on any browser.

If you don't have the time to learn XHTML then use Dreamweaver.

Now regarding the design process I personally create most of the elements in the design program but I actually use both design and html while I am creating a template. Of course this is not the correct way to do this, but who cares?

Regarding the size that really depends on the site's audience. For instance webdigity is a community for developers and webmasters, so there is no need to make this site work for 800x600 resolution. In general if the site works on a 1024x768 resolution is fine.

[Just Visit...]

Nik is right overall, let me add up to that... You can actually learn css and do much of everything with limited amount of graphic skills... Although you need to learn the Fundamentals of everything. Also remember the first rule of design. KISS (Keep it Simple Stupid)... Also, don't forget about cross-browser compatibility.

In my case I draw up basic drafts on paper, then try to simplify the bits by using a grid layout pattern then coding it in Html and css.. After that I put in the basic colors and look without the graphics so it still looks good if the graphics fails to load. Then after that I get a screen capture and design the look based on my draft on a graphics program.

My minimum dpi for Graphics is at 300dpi for higher resolution, I save high color and detail images in png and middle graphics in jpeg and low color requirement graphics in optimized gif... basically you can design cut-offs so you can make the page a lot faster with compressed images and css...

I personally design everything in Photoshop first.  When I first started I had a really crappy version of Photoshop so I did the design on paper then made the individual graphics.  My sites looked more archaic then, I find it much easier to lay out in Photoshop, then code from there. 

I don't place actual content in photoshop, I just use lipsum, I don't place content until after the site is working online.  But that's just me.  I design my sites at 72dpi (300 dpi is standardly considered print standard, so I do upload my pictures at 300dpi so friends & family can print them) at 800 x 600 or 1024x768 depending on the site. 

To save pieces of the site I duplicate the layer into a new file then save it as whatever it is, background, header, button, etc.  I use different file formats for different things, .jpg, .png, & .gif.

I agree with everyone else, front page sucks.  Dreamweaver makes coding easier, b/c it keeps you from having to type so much since it finishes commands for you.  I use to use notepad, but I can't with PHP & it took FOREVER.

Hope this helps.

I start with Macromedia Dreamweaver 8:
http://www.photoshopsupport.com/dreamweaver/dw-8/new-features.html
You can get trial for 30 days. Also just in case, this trial version is perfectly full version, so with small googling and some luck ...

I thought for beginner is perfect, couse many things MD doing for yourself, at least for me was very good. After i start using PSPad editor (freeware)
http://www.pspad.com/

Im just beginner as well, but i thought easy way is to start just with the simple pages without any graphics for getting understand how all works (xhtml, css etc etc) i like this source:
http://www.w3schools.com/
but there is planty of them, just open some samples, do like there and keep going.

Also i think its not good way using only graphics and tables. Simple css and html can give a lot of effects..

hi everyone......
i m a multimedia designer n working in a web site design company.i thinks over your questions that u ask n here is their solutions.

- the size of the graphic will be 800*600 pixels.
- u should put the foreground n bckground color combined in a png or gif(never use jpegs as they r heavy to load)
- ya u have to make rollover in a graphic program but their is the option also in dreamweaver to roll over so it upon u wht u use.
- u can normally put or u can say type text in the dreamweaver or frontpage itself in tables for better n symmetric view using different fonts n styles.

Edit: don't spam this thread with your commercial links

[Free WordPress Themes]

hi everyone......
i m a multimedia designer n working in a web site design company.i thinks over your questions that u ask n here is their solutions.

- the size of the graphic will be 800*600 pixels.
- u should put the foreground n bckground color combined in a png or gif(never use jpegs as they r heavy to load)
- ya u have to make rollover in a graphic program but their is the option also in dreamweaver to roll over so it upon u wht u use.
- u can normally put or u can say type text in the dreamweaver or frontpage itself in tables for better n symmetric view using different fonts n styles.

Actually your advise is not from this time...

I agree with Olaf!
800x600? why? If you think about users who use small screen then put 790px for width, becouse of IE but.. How many ppl have small screens. If you thinking about PDA then there is different solution...
why not jpg? is it much bigger file size? in our days?
.....

[Join us @ facebook]

Hehe, someone stuck in 1998

i would start with desigining the layout in photoshop then slice it up and learn to code in css and html.

[Guest]

[44.173]

Yahoo crawler, Googlebot, Msnbot, Baidu Spider