Newb Image question

[7]

Hello all

I was wondering how to 'cut' a larger image into smaller chunks and arrange
them on the page so that the image has no visible artifacts from the
process... and later possible imbed text into a page with said images
surrounding the text.

I see it done on pages a lot, and I am wondering if there is a specific
program or programs that automate the process, because it looks like an
insane amount of code to do by hand... I figured the experts would be able
to tell me the most efficient way to do so.

Here is an example...

I am interested in doing something like this: http://www.sesautomotive.com
(text surrounded by images, yet flexible design)

Here is another, more simplistic example :
http://www.feeltherevolution.com/banner.htm

While this particular example is extremely simplistic, I want to be able to
expand on the idea and get as elaborate as the situation calls for. (More
sections, possible imagemapping, etc)

Can anyone point me in the right direction (advice, point me towards an
online tutorial, etc)?

As of right this minute, I have Photoshop 6.0 and Dreamwaver 3 at my
disposal. Thanks in advance for the help!

 

[Steve R.]

I have Dreamwaver 3 at my disposal.

.. . . . . . . . . . . . . ^^^^^^^

You need a steady hand with that version :~)

Sorry but I couldn't resist.

 

[Augustus]

Hello all

I was wondering how to 'cut' a larger image into smaller chunks and arrange
them on the page so that the image has no visible artifacts from the
process... and later possible imbed text into a page with said images
surrounding the text.

I see it done on pages a lot, and I am wondering if there is a specific
program or programs that automate the process, because it looks like an
insane amount of code to do by hand... I figured the experts would be able
to tell me the most efficient way to do so.

Photoshop has the "slice" tool you can use to, as you can guess by the name,
slice an image up into smaller portions

I would presume all high end graphic utilities have this functionality...
hard to say if any of the more basic (and alot cheaper) programs would

 

[7]

How is it then implemented into the website, after slicing is it made into a
table? Forgive the newb questions, as I have not done any of this before....

Thanks again,

7

 

[Michael Wilcox]

How is it then implemented into the website, after slicing is it made
into a table? Forgive the newb questions, as I have not done any of
this before....

Unfortunately, this is how it's normally done. However, be warned that
tables for layout are a very bad idea. Consider some alternative solutions,
like CSS.

 

[kchayka]

I was wondering how to 'cut' a larger image into smaller chunks and arrange
them on the page so that the image has no visible artifacts from the
process... and later possible imbed text into a page with said images
surrounding the text.

This is a very poor way to construct a web page. The resulting page
will have some or all of the following problems:
- non-optimized images that are slow loading
- excessive number of images that add to the load time
- bloated code that adds to the load time
- complicated (nested?) table layout that is difficult to maintain
- layout that does not adjust well to changes in text or window size

I see it done on pages a lot,

So do I, and I cringe just about every time I see one. They often look
dreadful in my particular browsing environment.

There are other ways to get the effect(s) you want. Don't slice up your
graphics. Some you can/should position with CSS, others are probably
more suitable as background images.

 

[7]

Thanks very much for the input. Do you know of any good resources that could
help out a first-time CSS user, especially related to graphics?

Any other opinions from other users?

Thanks again,

7

 

[rf]

Thanks very much for the input. Do you know of any good resources that could
help out a first-time CSS user, especially related to graphics?

Any other opinions from other users?

I am *not* a user, I am a professional and don't you forget it

Somebody asked a very similar question yesterday. He wanted to slice up a
background image and put it in a set of divs etc that looked exactly like a
table. Search for the subject CSS problems, about six threads away from
here. In any case here is what I spend 5 minutes knocking up for him:
http://users.bigpond.net.au/rf/test/x/index.html

Note, it is very simple, on purpose. No slicing, no putting back together.
Just judiciously placed background and elements.

Keep in mind that if you try to go complex and attempt to fit text exactly
within boxes in a background you will fail. All a user has to do is to
change her font size and the text escapes from the boxes. If you feel you
really need to do such things then you are not in the web arena, you are in
desktop publishing, a totally different thing. DTP can be rigid and static,
the web is, by definition, fluid and dynamic.

Cheers
Richard.

 

[kchayka]

Somebody asked a very similar question yesterday. He wanted to slice up a
background image and put it in a set of divs etc that looked exactly like a
table. Search for the subject CSS problems, about six threads away from
here. In any case here is what I spend 5 minutes knocking up for him:
http://users.bigpond.net.au/rf/test/x/index.html

Fine and dandy, but I'd like to make a suggestion. With one big
background image, you're stuck with a pixel-based width for the sidebar,
which won't adapt well to an enlarged text size.

Instead of one big image, just use background colors along with one
image just for the rounded corner on div.content. Then you can size the
sidebar width in ems or % so it will better adjust to various text
and/or window sizes.

<URL:http://www.albin.net/CSS/roundedCorners/>
<URL:http://www.guyfisher.com/builder/workshop/css/corners/>

 

[7]

Kchayka;

Thank you very much for the links, and thanks to all who responded. The
Albin.Net link was especially helpful. Am I correct in assuming this was the
same technique used in the www.sesautomotive.com site?

Anyone else have any favorite links that deal with this subject? I could use
as much help as I can get =P

Thanks again everyone..

7

 

[kchayka]

Anyone else have any favorite links that deal with this subject? I could use
as much help as I can get =P

Here's the first link you should check out:
<URL:http://web.presby.edu/~nnqadmin/nnq/nquote.html>

For other stuff, some time ago I saved off a copy of brucie's
big-list-o-links that I refer to now and again. Unfortunately, brucie
doesn't let his posts archive, so the list isn't necessarily easy to
find. Here's one that's not too old:
<URL:http://groups.google.com/[email protected]&lr=&hl=en>

 

[7]

Thanks again K.

My bad on the quote.

The big list is very cool. As it says at the bottom... I think it will keep
me busy for a while =)

A thousand thanks....

7