Fundamental design question

[Belgiumdude]

I know HTML but I have a problem.I often see these great websites where they have all different layers of images running perfectly in each other,shapes who fit in great making it one complete design.I don't see how you can accomplish that in HTML.

Links to tutorials are welcome

Greetz

JM

[Loon]

can you link to an example? as i have no clue what you're talking about. :classic2:

[Belgiumdude]

I can't directly think of an exemple my question is hard to further explain.Next time I find a website with this kind of perfection I'll just try to study the source very good.

[Decker]

Sounds like your talking about sites that use sliced PSD's (Adobe Photoshop images).

It's quite an art and something you'd have to play with a lot.

[ConfusedSoul20C]

You are probally talking about a website with intricate graphical layout. In english, it has alot of pretty pictures and designs to make it looks spiffy. Graphical layouts can be done alot of different ways, use flash to make a whole flash graphic site, use photoshop to make the images and use CSS (or HTML tables as a last resort) to poisition the images to run in the background.

Or it's always possible somebody got a template and built after that. Also they could be using a(program or a website builder off of a server.

Or they could be using something like PHP Nuke that comes with some layouts and whatnot.


Theres many different ways. The best way is trial and error. See what you can piece together.

I'm working on a graphic layout right now for my comic's website. You should probally learn photoshop and dreamweaver because they are very good tools to use as resources to spice up your website.

[Belgiumdude]

use photoshop to make the images and use CSS (or HTML tables as a last resort) to poisition the images to run in the background.

Very intresting.Do you happen to know good tutorials that handle this?Do you have to know photoshop or would Paint Shop Pro be good to?

Thanks for your response.

[Decker]

To slice you'd need either PS or Fireworks - PSP is good but won't handle that

[ConfusedSoul20C]

Actually I don't. I have not done any web tutorials in a while, I'm rather focused on getting my server up and running right now.

Tomorrow while I'm at work I will check to see if I can find any for you, try searching for some CSS scripting tutorials, and learn some of that first. Then if you have photoshop I believe it comes with some for of tutorials or help files.

But I will check to see if I can find anything.

[Belgiumdude]

okay I've got Adobe PhotoShop 7.0

[Belgiumdude]

Yep photoshop has some tutorials included.I found what I needed.Thanks!

Create compelling Web designs

--------------------------------------------------------------------------------

Produce exceptional imagery for the Web and wireless devices with Photoshop and ImageReady, which ships with Photoshop.

Slicing

Use the slice tool to create slices by hand, or generate layer-based slices automatically. Apply slice-by-slice formatting and optimization to keep file size small and image quality high. See Creating and viewing slices.

Optimization tools

The Photoshop Save for Web dialog box and the ImageReady Optimization palette display a side-by-side comparison of format and compression options and let you apply weighted optimization to keep vector edges--type and logos, for example--crisp and clean. See Optimizing images and Using weighted optimization.

Rollovers palette

Use one convenient palette to view the entire set of rollovers, slices, image maps, and animations in a document, making authoring and navigation easier. See Using the Rollovers palette.

Transparency

Apply instant transparency to Web page elements by knocking out one or more colors. Or apply dithered transparency to create edges that blend into any Web background. See About optimization.

Quick GIF animations

Start with a layered Photoshop file, and use the Animation palette in ImageReady to convert individual layers into frames. Then apply the Tween command to generate additional frames and smooth out the action. See Creating and editing animations.

Link generation

To create a URL link, simply select an Image slice--a slice with image data or a rollover state--and enter a URL in the Photoshop Slice Options dialog box or the ImageReady Slice palette. See Assigning a URL to an Image slice.

[Decker]

Glad you got sorted out :applaudin