5 Replies Latest reply on Mar 2, 2008 11:01 AM by Travis_D

    How do I create a web mock-up using Full Width Photo's

    Travis_D Level 1
      Greetings & Help!

      I'm trying to create a full width photo layout using Fireworks CS3 & Dreamwaver CS3 without the photo's being tall.

      Exactly as the following websites - which all seem to be using the same size of photo or very close to it.

      This site is static with full width photos that are not tall.

      http://www.jenniferhandyproperties.com/selling

      This site is static for the most part and full width photos that are not tall

      http://www.gnvpartners.com/web/

      This site is Flash with full width photos that are not tall.

      expodesigncenter

      I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.

      Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.

      The problem...

      I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are

      425 x 282 px (5.9" x 3.9")
      849 x 565 px (11.8" x 7.8")
      1698 x 1131 px (5.7" x 3.8")

      I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.

      If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.

      I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.

      I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.

      So if you can offer a solution in "Non-Tech Terms" I would appreciate it.

      Thank you in advance for your time.
        • 1. How do I create a web mock-up using Full Width Photo's
          pixlor Level 4
          quote:

          Originally posted by: Travis D
          If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.


          Yes, that is, indeed, the problem. You need to decide what size images you want in for your design. Then, you need to get photos that are big enough for that and crop away the excess. That means that you'll need photos that have interesting stuff where you want it. It's a matter of composition. It's something every designer faces, but there's really no way around it.

          • 2. Re: How do I create a web mock-up using Full Width Photo's
            JoeDaSilva Level 4
            Yes, as Pixlor expressed, you need to crop the height of each of your photos. Size them to the width you want (say 900px for example) then cut off the top and bottom of the photo so they're all 200px tall.

            If you have Photoshop, theres a tool built specifically for the this (the crop tool!). Select the crop tool, then enter the numeric size you want in the upper left (for instance, 900px by 200px) and then simply draw a box on top of the photo you have open. Photoshop will then remove the excess parts of the image and leave you with what you want at the pixel perfect size you specified.

            You'll notice that none of the examples your site are "fluid width" with the exception of the photographic masthead area in http://www.gnvpartners.com/web/. That effect is achieved by tilling the photo (so it repeats). The body copy is fixed width, which makes it much easier to control the text, and makes it easier for the end user to read.

            • 3. Re: How do I create a web mock-up using Full Width Photo's
              Travis_D Level 1
              Joey thanks for the info!

              I'm about to check out your Fireworks demo at your website -

              Before I do I was just wondering if I have to crop the photo for the masthead to match the full width of my web page, when I import the photo into dreamweaver - and into a liquid layout - will the photo be distorted when the browser window resizes?

              Also when I create the mock up in Fireworks should I make the width of the mock-up 1004 (and photo masthead) which I was told the 1004 would be converted automaticly to 1024 including a vertical scroll bar?

              Or since I'm planning a liquid layout - does the mock-up size really matter?

              Thanks for your help.
              • 4. Re: How do I create a web mock-up using Full Width Photo's
                pixlor Level 4
                quote:

                Originally posted by: Travis D
                Before I do I was just wondering if I have to crop the photo for the masthead to match the full width of my web page, when I import the photo into dreamweaver - and into a liquid layout - will the photo be distorted when the browser window resizes?

                When you place an image in a Web page, you set the height and width. "Liquid layout" means that the space around images expands and contracts or that elements can flow and adjust to changing browser widths.

                The Jennifer Handy site is a fixed width layout. When you expand your browser width the content does not expand to fit the margins, it stays centered in the browser window, but does not re-flow to fit the browser window. If you use the browser View>Source (or View>Page Source), you'll see that the content is in a div named "content" and the css (css/all.css) defines that to have a width of 959px.

                The GNV & Partners site is liquid. The navigation at the top expands and contracts as you resize your browser window, the images under the Portfolio section will re-arrange from two per line to one per line if the browser window is made narrow enough. As JoeyD points out, the large images below the navigation tile. They have been carefully crafted to repeat horizontally, and do so if the browser is wider than the image. If the browser is narrower than the image, then the design retains its integrity since the center of the image is where the company has placed the focus of the composition.

                quote:

                Also when I create the mock up in Fireworks should I make the width of the mock-up 1004 (and photo masthead) which I was told the 1004 would be converted automaticly to 1024 including a vertical scroll bar?

                Or since I'm planning a liquid layout - does the mock-up size really matter?

                The conversion you mention isn't a conversion. It's only allowing for the scroll bar on the right hand side. Firefox only puts one on if the page needs to scroll, though.

                How are you planning to make your design lliquid? Are you going to make large images tile? How do you envision your site will behave when a user resizes his or her browser window to, say, 800 pixels? For example, I have a 1600-pixel monitor, but I often run my browser window at less than half that width. At work, however, I have a 1920-pixel monitor. How do you want your site to look if someone views it at full-screen under those conditions?

                Fireworks can make your graphics, and it can mock-up your pages. To see your design fully, however, you're going to need to build the HTML and view it in a Web browser. In order to do that, you're going to have to think about how you want your liquid layout to behave.

                Given that you seem so intent on having a 1004-width layout...are you sure you don't really want a fixed-width one?
                • 5. Re: How do I create a web mock-up using Full Width Photo's
                  Travis_D Level 1
                  Hi Pixlor -

                  I'll do my best to answer your questions - within my ability - which isn't much.

                  As far as "Tile" the photo - I've checked out the responces I've received from other's on this post - and other posts - and on each page for the "masthead" I just want one photo to be the same size of the page width wize - and the height of the photo should not be tall from the top of the masthead to the bottom of the masthead. As far as what I mean by "not being Tall" - see next comment...

                  I'm just attempting to duplicate exactly (or very close to it) the same appearence and dimensions - "Width = side-to-side, Tall = Height - as the websites I mentioned in my first post here.

                  Also if you check out Joey's website (who responded to my post as well) basicly he has created the same thing that I'm shooting for except he is using graphics. I have to use photos in my masthead which will be of kitchen cabinetry or construction photo's and must highlight every detail down to the shine of the kitchen cabinets knobs - or close to it.

                  Due to this I can not have the photos of the masthead "tile" from "width-to-width or top-to-bottom because the deatils in the photo can not repeat or multiply to completely fill the masthead head. Otherwize if I choose a photo of kitchen cabinetry which highlights a kitchen sink - and if I tile this photo - from what I'm learning from everyones responce thus far - I'll end up with several of the same kitchen sinks and cabinets in the same photo.

                  I must stress I could be wrong in what I described directly above due to my lack of tech knowledge! If this post was about a 2x4 or 2x6 or Green Building or what have you, It would be heck of alot easier for me to completely understand what you pro's are trying to help me with - which I completely appreaciate. Expecially someone like you who owns a monitor the size of one of my work trucks!

                  Which brings me to your next question...

                  Liquid layout -

                  Yes I am trying to end up with a liquid layout for my website using Dreamweaver CS3. Hopefully using one of the pre-built liquid layouts in Dreamweaver and modify it within my ability.

                  The main reason why I would like to create a liquid layout is because most others construction firms in my industry - and in my target market - have websites that completely consume a viewers monitor - viewport - screen real estate - (i'm trying to learn your tech terms) no matter what size viewport a viewer has, or how the viewer resizes theirs.

                  I've also heard that a "Min & Max" code can be included in a liquid layout so that it would limit the "liquidness" of the layout so "Text Lines" won't stretch too long making it difficult to read when a viewport size extends - and when the viewport shinks - all the elements (or Div's) will reflow an maintain order and visability.


                  1004 -

                  The only reason why I mentioned designing the Fireworks CS3 mock-up at a 1004 is because someone else mentioned they design their mock-ups at a "Canvas Size" of 1004. Then most browsers automaticly inlclude a scroll bar if the vertical content exceeds below "The Fold". Thus with the addition of the automatic scroll bar the page now becomes 1024 - according to this person.

                  She went on to mention according to "recent studies" - 56% of viewers have 1024 x 768 and most computer manufacturs shipp them this way. Then the following stats... 22% at 800 x 600, then 13% at 1280 x 1024, then 3% at 1152 x 864, then 1% at 1580 x 1129. She also mentions most avearge viewers (every day Dick & Jane, Bob & Besty) (excluding computer tech folks like yourself) - do not resize - bother with - or know how to resize their viewport.

                  My personal note on this is most of my target market - clients - just turn on their computer and surfs the net from website to website without changing their viewport and when also asked they "Feel" that a website looks much better - or more profeshional - when the content completely fills up an entire viewport.

                  "Feel - not - Think" -

                  Keep in mind I choose the word "Feel" & not "Think". In my target market - Residential Construction - 95% of home improvement decisions are made my the Woman of the houshold - not the Man. That being in mind it is a proven stat (and not a sexest comment) that women base most of their choices or decsions on how something makes them "Feel". Where as most men make their choice or decision on how they "Think".

                  Also most men attempt to keep their women happy and knowing that if they don't then they will end up in the doghouse - ( not a fun place to be trust me on this) and in addition most men do not have much of a clue when it comes to the interior design layout of a home, matching of paint colors, appliance choices or what have you.

                  Wow that was a major side track I took -

                  Back to 1004 -

                  It's not that I'm intend in designing the mock-up in Fireworks at 1004 - I just want to end up wth a liquid layout so when my site is viewed by "most people" then my site will completely consume a viewers viewport - or very close to it.

                  If I need to design the mock-up less then 1004 - or more then - and still be able to end up with the same end result in a liquid form - so be it.

                  I don't know the best way to proceed -

                  I'm just attempting to learn from others who respond and for the most part those who have been kind enough and taken the time to respond seem to be very knowlegeable about my issue at hand.

                  You might find this hard to believe but I am learning quite a bit from all of you and I really do appreaciate it.

                  Well now that this responce is as long as the novel "War & Peace" - I'll close here.

                  Travis