Member Avatar for Labby77

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.

  • 3 Contributors
  • 2 Replies
  • 81 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by innovativeatul
Member Avatar for MidiMagic

You are asking for trouble. Consider the following:

- Browsers have different-sized windows, depending on the user's preferences and the screen resolution used.

- Some people can't read text superimposed on a textured or photographic background.

- map or ismap tags must be used to define clickable areas. This makes it difficult to make pages that work independently of the browser window size.

Member Avatar for innovativeatul

Yes, first we design the layout in softwares like photoshop. I personally use photoshop.

I prefer to design at 800x600 width because its fits to any resolution size. I will suggest the same to you. And if you want a fixed size of your layout on all resolution then its totally optional.

Using Images as foreground or background totally depends on the object in which we want to use the image. Say if we have a glossy button with the same pattern, then we will just use a 1 pixel of its width and then apply in cell background. In this way the size will be less and page will load more fast. ......So there is mix use of images in foreground and background.

You have to prepare the images for the rollover in graphics program and then implement the rollover dhtml effect or javascript to run it on site.

- When slicing the text are left blank and don't use the white space just provide the width to cell where to want to put the text relative to the image(take size of the white space where you want to put text).

I hope you will surely go great in web design and wishing you a very best of luck

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.