Newb Image question

Discussion in 'HTML' started by 7, Feb 19, 2004.

  1. 7

    7 Guest

    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!
    7, Feb 19, 2004
    #1
    1. Advertising

  2. 7

    Steve R. Guest

    <no thanks.com> wrote in message ...
    > I have Dreamwaver 3 at my disposal.

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

    You need a steady hand with that version :~)

    Sorry but I couldn't resist.
    Steve R., Feb 19, 2004
    #2
    1. Advertising

  3. 7

    Augustus Guest

    "7" <> wrote in message
    news:eek:G7Zb.3695$...
    > 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
    Augustus, Feb 19, 2004
    #3
  4. 7

    7 Guest

    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

    "Augustus" <> wrote in message
    news:c13885$1doqc4$-berlin.de...
    >
    > "7" <> wrote in message
    > news:eek:G7Zb.3695$...
    > > 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, Feb 19, 2004
    #4
  5. 7 <> wrote:
    > 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.
    --
    Michael Wilcox
    mjwilco at yahoo dot com
    Essential Tools for the Web Developer - http://mikewilcox.t35.com
    Michael Wilcox, Feb 19, 2004
    #5
  6. 7

    kchayka Guest

    7 wrote:
    >
    > 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.

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Feb 19, 2004
    #6
  7. 7

    7 Guest

    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


    "kchayka" <> wrote in message
    news:c13eto$1d4qfi$-berlin.de...
    > 7 wrote:
    > >
    > > 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.
    >
    > --
    > Reply address is a bottomless spam bucket.
    > Please reply to the group so everyone can share.
    7, Feb 20, 2004
    #7
  8. 7

    rf Guest

    "7" <> wrote in message
    news:wUgZb.3911$...
    > 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.
    rf, Feb 20, 2004
    #8
  9. 7

    kchayka Guest

    rf wrote:
    >
    > 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/>

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Feb 20, 2004
    #9
  10. 7

    7 Guest

    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



    > 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/>
    >
    > --
    > Reply address is a bottomless spam bucket.
    > Please reply to the group so everyone can share.
    7, Feb 20, 2004
    #10
  11. 7

    kchayka Guest

    7 wrote:
    >
    > 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/groups?safe=images&ie=UTF-8&oe=UTF-8&as_umsgid=&lr=&hl=en>

    --
    Reply address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
    kchayka, Feb 21, 2004
    #11
  12. 7

    7 Guest

    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
    7, Feb 21, 2004
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. :\\\\derian

    newb question

    :\\\\derian, Oct 17, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    349
    Marina
    Oct 17, 2003
  2. xerj
    Replies:
    4
    Views:
    350
  3. =?Utf-8?B?RXJpYw==?=

    Newb textbox question

    =?Utf-8?B?RXJpYw==?=, Jan 31, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    390
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Jan 31, 2006
  4. NewB Insert Question

    , Mar 6, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    381
  5. JavaNewb
    Replies:
    4
    Views:
    999
    Lasse Reichstein Nielsen
    Oct 28, 2004
Loading...

Share This Page