29 Replies Latest reply on Aug 6, 2009 8:25 PM by pixlor

    Which tool?

    quality11 Level 1

      What tool would I use to extend the bottom of the tree in this image: http://wwwdotcharlotteswebservicesdotcom/temp/http-vertigrow/images/tree-km.png (replace "dot" with ".").

       

      I'm trying to extend it down like this image: http://www.pmob.co.uk/vertigrow/images/tree.png

        • 1. Re: Which tool?
          pixlor Level 4

          You could add a rectangle below it. That might be the easiest thing. Then select both shapes and combine them (Modify > Combine Paths > Union).

           

          As an alternative...

          If you look under Window > Others > Path, there are some basic vector node editing tools. You could use the pen tool to add a point on your triangle just above each bottom point. Then, use the edit point tool from the vector editing panel and pull each of the lowest points downward.

           

          In either case, if you want the trunk of the tree to be a little random, instead of straight, add points along the trunk with the pen tool, then move them a bit with one of the point editing tools.

          • 2. Re: Which tool?
            quality11 Level 1

            Thanks!

             

            I tried the rectangle tool b/c edit points seemed overwhelming -- not sure how to use them or which to use.

             

            The problems I'm having:

             

            1. The new shape lines up perfectly in FW/PNG file (and even when I upload it and view it in a browser) but not when I add it to my html/css file and then view it in any browser, the new section is wider on left side). Here's the image Here it is added to a web page.
            2. Same thing is happening with the color.  I copied the tree from an Illustrator file and pasted each section (trunk and leaves) into FW.  It worked fine. Then, I checked the fill color from the pasted tree and used the same color for the new section, but it's totally off.

             

            Thanks much in advance!

            • 3. Re: Which tool?
              quality11 Level 1

              Also....forgot to mention....the whole file I created doesn't line up with the top of the tree in the top right of the header on web page. I can see the tree on his file is thicker at the top (but too thick): http://www.pmob.co.uk/vertigrow/images/tree.png (he created it from scratch -- didn't copy from .ai file).I tried to move it over to the left in the png file but that didn't work.  Not sure how to line it up...

              • 4. Re: Which tool?
                quality11 Level 1

                Woops.....I figured most of these things out....

                 

                I took care of the positioning in the CSS.

                I realized the color and shape issues weren't lining up on the web page b/c it's coming from the base.jpg. Dah.

                 

                Now the problem....I am TERRIBLE at slicing up files.  How do I get the base.jpg image to match up to the design -- color-wise and shape-wise.

                 

                I don't get why if I upload an image and then check the color using the FF color picker, it doesn't come out the same.  Same with .ai files, etc, I'm terrible at slicing and color matching.

                • 5. Re: Which tool?
                  Jim_Babbage Level 4

                  Don't use a jpeg file.   Jpegs do not have a color palette you can 

                  match to. Use PNG 8 or Gif and then you  should gain more control over 

                  the color matching.

                   

                  Jim Babbage

                  • 6. Re: Which tool?
                    quality11 Level 1

                    Thanks!

                     

                    So......if I'm starting with an Illustrator file (.ai), what is your

                    suggestion.....Open it in FW and then save it as a PNG 8 (not 24?)?

                    • 7. Re: Which tool?
                      quality11 Level 1

                      Thanks!

                       

                      So......if I'm starting with an Illustrator file (.ai), what is your suggestion.....Open it in FW and then save it as a PNG 8 (not 24?)?

                      • 8. Re: Which tool?
                        Jim_Babbage Level 4

                        Optimize, then EXPORT as PNG 8 in FW. There is a difference between 

                        Saving and Exporting In Fireworks.

                         

                        HTH

                         

                         

                        Jim Babbage

                        • 9. Re: Which tool?
                          quality11 Level 1

                          Sorry.....so the steps are:

                           

                                 Open the .ai file in Fireworks

                           

                                 What do you mean by Optimize????

                           

                                Go to File > Export Wizard and export as PNG 8 (why not 24 -- isn't it

                          more color/higher quality?)

                           

                          Sorry, I'm still learning a lot with graphics programs....

                           

                          Thanks!

                          • 10. Re: Which tool?
                            Jim_Babbage Level 4

                            You can't match colors in PNG 24 or JPEG because there is no indexed 

                            palette to go with the file. You mentioned your concern was in getting 

                            an exact match between the two graphics.

                             

                            You have a graphic which is really only 1 color (the tree), so a 

                            higher number of colors isn't going to help.

                             

                            Optimizing your graphics (format, file size and quality) is a core 

                            skill when creating web graphics and this is something you should read 

                            up on if you plan to build more sites. It will make your life much 

                            easier.

                             

                            The Export Wizard is one way to do this if you are dealing with 

                            individual graphics. ANd it's a nice way to ease yourself into the 

                            process. If you have multiple slices in the same design, you're better 

                            off working with the Optimize panel and the Preview views in the main 

                            FW interface.

                             

                             

                            Jim Babbage

                            NewMedia Services

                            http://www.newmediaservices.ca

                            Community MX Partner -

                            http://www.communitymx.com/author.cfm?cid=1036

                            Adobe Community Expert

                            http://www.adobe.com/communities/experts/members/206.html

                            Author - Lynda.com

                            http://movielibrary.lynda.com/authors/author/?aid=188

                            Author: Peachpit Press

                            http://www.peachpit.com/store/product.aspx?isbn=0321562879

                            • 11. Re: Which tool?
                              pixlor Level 4

                              I took your file, and moved your rectangle down a bit. (I also removed the stroke.) Using the pen tool, I added two points to the bottom of the triangle. Using the point selection tool (that's the arrow with the white point), I moved each point down along the rectangle side (left point to left side, right point to right side). I then joined the shapes (Union). Finally, since this gave me one extra point on each side, I zoomed way in, used the point selection tool to select an extra point and pressed the delete key. (Results below.)

                               

                              As far as your design goes, there's a better way than putting a huge graphic as a background image. Make two non-transparent images using the background color you want to have and with the appropriate width. Crop the triangular tree for one image and a slice of the vertical trunk for the other. Layer two divs. Put the slice of trunk as a vertically repeating background for the outer div and put the triangular tree top as a non-repeating image as the background of the inner div. Using an opaque image, the triangular tree-top will hide the vertical trunk and give you the effect you want.

                               

                              As for the color being off, it might be because Illustrator uses color profiles and Fireworks doesn't. Copy the shape from Illustrator, but get the color from some other method. Perhaps take a screen capture of the Web page you're trying to match and put that into Fireworks. Then, sample the colors from there.

                               

                              tree-km2.png

                              • 12. Re: Which tool?
                                quality11 Level 1

                                Thanks....was there something wrong with the one I did?

                                 

                                I am not following you with layering the tree image.  If the image is a small enough size, I don't see why it would cause a problem, however, you would know better than I :-).

                                 

                                For the footer base.jpg to match, I have tried colorzilla from the jpg link I gave earlier and it didn't work. I think what I need to is take the base.jpg, color over the trunk that's there with the bg green and then redraw a new trunk using the green I used to make the tree.png.  Any thoughts?


                                Here's what I have so far.  I know the headshots are pixalated...I'll be getting new ones.

                                 

                                Thanks so much!

                                • 13. Re: Which tool?
                                  quality11 Level 1

                                  Thanks Jim,

                                   

                                  Right...I know what Optimize means.  Thought you meant a tool in FW.

                                   

                                  I use the Export Wizard to reduce the size of graphics.

                                   

                                  Thanks so much!

                                  • 14. Re: Which tool?
                                    pixlor Level 4

                                    In detail, your image has a "knee" on the tree because the rectangle meets the triangle above the base of the triangle:

                                    tree-km-z.gif

                                     

                                    What I did smooths that out:

                                    tree-km2-z.gif

                                     

                                    The problem isn't so much the file size for bandwidth. Any time someone tries to make a really wide or really long image, though, something ends up happening to break the design. It's just Murphy's Law! What happens to your page if the content is made so long that the page is longer than your image? You'll reach the bottom of your tree before the bottom of your page. Your tree won't be rooted, it'll be hanging in mid-air. If you put your sidebar in two nested divs, you won't need to worry about that at all. You start with a div that has the vertical trunk (made with a short, tiling image). Inside that div, so that it is "over," you put another div with the triangular top. Then, no matter how much content is added to that page, or how big someone makes their text (which also will expand the length of the page), your design will look like you expect. Tiling backrounds are good things.

                                     

                                    If you still want to go the way you've started, you don't need a transparent .png, you can do what you want with an opaque image that incorporates the background color. If you use a PNG8 with its transparency, you'll be sort of okay, but PNG32 won't work on Internet Explorer 6 without some special coding. And why go to the trouble when it isn't at all necessary for your design? You don't have anything behind the tree except a solid color. Read this:

                                    http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

                                     

                                    Besides using PNG8 to get the color you want (transparent or opaque), the PNG8 file is smaller than the PNG32. It's less than half the size.

                                    • 15. Re: Which tool?
                                      quality11 Level 1

                                      Thanks so much for the explanation.  My computer is on it's last legs so I haven't been able to use it longer than 10 minutes at a time.  Just ordered a
                                      new one.

                                      Once I have a computer again, I will try fixing the "leg". Thanks for pointing that out.

                                      Do you have a suggestion for the footer base.jpg issue that I asked about above?  It's different than the tree image.  I'm not sure how to do that to match the color of the tree.

                                      Thanks!

                                      • 16. Re: Which tool?
                                        pixlor Level 4

                                        Sorry about your computer! I needed a new video card last week. It's no fun when your machine won't work!

                                         

                                        For the color mis-match problem...

                                         

                                        As Jim suggested, don't use a .jpg, as they are not color-faithful. Go back to your original footer document in Fireworks and export as a PNG24.

                                         

                                        To match the colors, make a little rectangle in your footer image, and use the eyedropper to sample the base of the tree for its color. Copy the rectangle to your tree image. Select your tree, then sample the color from the rectangle with the eyedropper tool. Actually, make two rectangles, one for the tree color and one for the background. In your tree image, set the canvas color to match the background. Then, export your tree image as a PNG24, so it matches your footer image.

                                         

                                        I also note that the base of the tree in the footer is wider than what you have in your tree image. You should probably change one or the other.

                                         

                                         

                                        Finally, you shouldn't need to go back and fix the knee on your tree image. The one I posted should be an editable FW .png file.

                                        • 17. Re: Which tool?
                                          JoeDaSilva Level 4

                                          Edit: N/M, wrong thread...

                                          • 18. Re: Which tool?
                                            quality11 Level 1

                                            I'm sorry...I'm so confused.  Let me start from the beginning.  I received an Illutrator file.  Someone else coded it b/c the way I did it wasn't the best way so he was showing me how.  He sliced it and that is what's up there now.  Originally, he had a messy, quick tree that he created as a png to describe what he was talking about.  He matched the footer to it.  That's what's still up there -- his footer that matched his tree.

                                             

                                            I stink at slicing up images so they'll match up.  So, I'm not sure how to take it from here to make the base.png from his original, messy tree and make it work for this tree. You said don't use a jpg but to go back to the original document, but I'm not sure what that is.  If it's Illustrator, I'll have to slice up everthing again to make it match, won't I?  B/c he took his slices from the original jpg I uploaded to show him the design.  Does that make sense?  I'm not sure whether I have to start all over to make the header and footer match or how to create a base.jpg at this point.  So, I'm not sure what the rest of your directions mean with eye dropper, etc. until I figure out what to do next.

                                             

                                            What I've done in the past is open the .ai file in FW and slice it from there (not well).  Sometimes the colors change, etc, sometimes it transfers into FW perfectly.  So, not sure what to do.....I'm in the middle but not really sure how to begin....

                                            • 19. Re: Which tool?
                                              pixlor Level 4

                                              Ohhhh. Okay. I think I understand.

                                               

                                              Yes, sometimes the colors will shift from Illustrator because Illustrator uses color profiles and Fireworks does not (because browsers do not). Programs that use color profiles change the way colors appear on the screen. It's useful for print work, but not so useful for Web work.

                                               

                                              So, first of all, is there a list of the hex colors for the site? Has someone made that style decision about the color scheme? Because, if so, those are the colors the elements should be. The part of the tree in the footer is #BDE0CA; your .png tree is #C0E7C4. If the color should be  #BDE0CA, then just change the color of your tree and re-export. If the color should be  #C0E7C4, then you'll need to recreate the footer image in FW so the color is correct.

                                               

                                              Your colleague who sliced up the Illustrator layout didn't take in to consideration how to handle a lengthing tree trunk very well. That tree needs a top, a middle, and a bottom. The middle needs to have vertical sides so that it can contract or expand. The top needs to gracefully merge from a triangle to matching the vertical. The bottom also needs to gracefully merge from its current shape to the vertical. Right now, it looks like the tree is on green table, or something.

                                               

                                              I also see where the design as presented needs a transparent PNG so that the leaf can overlap the white main content area. You need to understand how to make transparent PNGs work IE6, unless you know your visitors won't be using that browser. (This is not an easy layout, you have here.)

                                               

                                               

                                              The trick with the rectangles is just a way of getting a color from one image to another. If I make a rectangle in one image and color it to match something in that image (using the eyedropper tool), I can see that it matches the object I want. Then, I just copy that rectangle to a second image and I now have a source in the second image for the color I want. It's more visual than copying and pasting hex codes and easier for me.

                                              • 20. Re: Which tool?
                                                quality11 Level 1

                                                The correct color is the one I used to create the tree.png that's up there now.  I replaced it with the tree he had.  So that is the problem.  Are you recommending that I use the rectangle tool to measure the size of the tree.png and color it the same color as the tree and then creating a second rectangle with bg color and then copying the rectangle to the base.png?  Then, somehow make the base go out on the ends?

                                                 

                                                Are there certain things to tell the designer to do and not to do?  This happens every time she sends me sites. They are extremely complicated but I don't know what specifically to tell her.

                                                 

                                                Also, I'm so confused.  I'm taking a CSS course and what he says vs. the guy who did the design is different
                                                and now what you're saying is different.  How do I learn this stuff?  How do I know who's "correct" and
                                                where do I learn the "right" way?
                                                • 21. Re: Which tool?
                                                  quality11 Level 1
                                                  The correct color is the one I used to create the tree.png that's up there now.  
                                                  I replaced it with the tree he had.  So that is the problem.  Are you
                                                  recommending that I use the rectangle tool to measure the size of the tree.png
                                                  and color it the same color as the tree and then creating a second rectangle
                                                  with bg color and then copying the rectangle to the base.png?  Then, somehow
                                                  make the base go out on the ends?

                                                  Are there certain things to tell the designer to do and not to do?  This happens
                                                  every time she sends me sites. They are extremely complicated but I don't know
                                                  what specifically to tell her.

                                                  Also, I'm so confused.  I'm taking a CSS course and what he says vs. the guy who did the design is different
                                                  and now what you're saying is different.  How do I learn this stuff?  How do I know who's "correct" and
                                                  where do I learn the "right" way?

                                                   

                                                  Don't ask me how this scroll bar got here or why my sentences are not wrapping?

                                                  • 22. Re: Which tool?
                                                    pixlor Level 4

                                                    quality11 wrote:

                                                     

                                                    The correct color is the one I used to create the tree.png that's up there now.  I replaced it with the tree he had.  So that is the problem.  Are you recommending that I use the rectangle tool to measure the size of the tree.png and color it the same color as the tree and then creating a second rectangle with bg color and then copying the rectangle to the base.png?  Then, somehow make the base go out on the ends?

                                                     

                                                    Are there certain things to tell the designer to do and not to do?  This happens every time she sends me sites. They are extremely complicated but I don't know what specifically to tell her.

                                                     

                                                    Also, I'm so confused.  I'm taking a CSS course and what he says vs. the guy who did the design is different
                                                    and now what you're saying is different.  How do I learn this stuff?  How do I know who's "correct" and
                                                    where do I learn the "right" way?

                                                     

                                                    My rectangle trick is just a way to get a color from one image to another. I don't mean you to measure and get anything exact with it.

                                                     

                                                    Now...if the color in the footer is wrong, then you'll have to recreate the footer. You can also change the size of the tree base. Make a screen capture of your page for a positioning reference and add your current footer image for a size reference.Add a new layer and start adding the elements you need as vector shapes.

                                                     

                                                    Hmm. Start with a standard white rectangle, then put down a standard green rectangle for your sidebar. Then, add a white rounded rectangle above them to match the shape of the page. Select the three rectangles then Modify>Mask>Group as Mask. Add your drop shadow. Um...to get you started (it's full sized, just resized in the post):

                                                    page.png

                                                    You can remove the drop shadow and release the mask so you can add other elements as needed. Anything that extends beyond the white rounded rectangle (such as your tree) will be hidden once you apply the rounded white rectangle as a mask again. If you recreate the page graphics and export new images, you'll know you have the right colors and you can get everything to line up.

                                                     

                                                    But you still have the transparent .png in IE6 problem. Here's what your page looks like in IE6 (note how the transparent areas of your image are grey):

                                                    vertigro.png

                                                    Your designer appears to be designing as she would for print. HTML is not capable of the kinds of layout that can be done with Illustrator and InDesign, at least not without significant coding convolultions and advanced HTML and CSS knowledge. Show her this image, and tell her that some large fraction of your audience will see her design that way. See if she reacts with horror. If so, then tell her she needs to design with a grid and not allow any object to break out of one grid cell into another. She also needs to understand that visitors can change their font sizes, so she can't set a page height. Her designs need to encompass that flexibility.

                                                     

                                                     

                                                    There are always multiple ways of doing something, so there are usually a number of "right" ways...it's just some are more right than others for particular situations!

                                                    Resources...

                                                    http://www.sitepoint.com/article/html-css-beginners-guide/ and there's a book, too http://www.sitepoint.com/books/html2/

                                                    SitePoint in general is just full of good stuff.

                                                    Smashing Magazine has lots of good articles http://www.smashingmagazine.com/ but they're usually topic-specific.

                                                     

                                                    I searched around for slicing tutorials. This one looks useful, as the author discusses the rationale behind the slicing decisions: http://www.csslicingguide.com/guide/stage_1.html

                                                    • 23. Re: Which tool?
                                                      quality11 Level 1

                                                      Pixlor,

                                                       

                                                      Are you available for a short phone call?  If you don't feel comfortable giving your number here or would prefer calling me, we can use Twitter to exchange.

                                                       

                                                      I'm on EST.

                                                       

                                                      Thanks!  In the meantime, I'll take a look at the links you sent.

                                                      • 24. Re: Which tool?
                                                        pixlor Level 4

                                                        This forum has a private message capability. I've sent you one. Click on your name to access your messages.

                                                        • 25. Re: Which tool?
                                                          quality11 Level 1

                                                          Hi Pixlor,

                                                           

                                                          Just got a chance to work on this...my new computer is up and running enough to work .

                                                           

                                                          I saved the tree.png that you created as tree-lor1.png and changed the css to test it:

                                                           

                                                          background:url(../images/tree-lor1.png) no-repeat 645px 138px;

                                                           

                                                          It won't show.  Just blank. Mine was showing fine......???????

                                                           

                                                          I have uploaded it yet.  Just testing it in my browser first.

                                                          • 26. Re: Which tool?
                                                            pixlor Level 4

                                                            Okay...well...upload something and I can take a look!

                                                             

                                                            But first, try putting the HTML, CSS, and image files in the same folder.

                                                            • 27. Re: Which tool?
                                                              quality11 Level 1

                                                              I figured it out -- why yours wasn't showing.  Okay....here's what I'd like to do.  How can I take your tree and widen it to fit the base.jpg?  When I try to pull out the sides, it just moves the placement. Here it is.  I haven't recreated anything yet. Would like to try this.

                                                              • 28. Re: Which tool?
                                                                quality11 Level 1

                                                                I fixed the base.jpg.  Let me know what you think.  I didn't know about that eyedropper tool.  Thanks!  I don't have IE6.  How do you get that on your machine by the way?  Do you have one of the programs that allows more than one version of IE?

                                                                • 29. Re: Which tool?
                                                                  pixlor Level 4

                                                                  The new base image looks fine to me! In your shoes, I'd make your designer squirm and just leave it straight.

                                                                   

                                                                  If you really want to have a tapered base, then you'll need to change the image again. Instead of a rectangle, you need a trapezoid. One way is to make a rectangle, then use the distort tool to pull out one of the lower edges. (The distort tool is one of the tools in the group under the selection tool in FW.) Then, copy that shape and flip it horizontally, so your left and right edges match. Something like :

                                                                  trapezoid_.png

                                                                  Here, the copied shape is a different color and they're at 75% transparency so you can see how to change the width by moving them relative to each other.

                                                                   

                                                                  Or...use the path editing tools and make a curved edge out of the trapezoid:

                                                                  curve.png

                                                                   

                                                                  I have IE6 on an older computer. You might try http://browsershots.org/ Just remember that transparent PNGs (32 bit) do not work on IE6 unless you use some kind of special coding to make it work. (And even then, you can run into problems.) If you put a transparent PNG32 into a Web page, the transparent pixels will show as grey. If you put a transparent PNG8 in to a Web page, any transparent or partially transparent pixels are rendered fully transparent. For some uses, that's okay for the IE6 visitor base.