-
1. Re: Which tool?
pixlor Jul 25, 2009 12:33 PM (in response to quality11)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 Jul 26, 2009 4:57 AM (in response to pixlor)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:
- 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.
- 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 Jul 26, 2009 5:13 AM (in response to pixlor)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 Jul 26, 2009 6:53 AM (in response to quality11)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 Jul 26, 2009 1:57 PM (in response to quality11)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 Jul 26, 2009 2:05 PM (in response to Jim_Babbage)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 Jul 26, 2009 2:08 PM (in response to quality11)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 Jul 26, 2009 2:11 PM (in response to quality11)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 Jul 26, 2009 2:19 PM (in response to Jim_Babbage)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 Jul 26, 2009 2:45 PM (in response to quality11)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
-
11. Re: Which tool?
pixlor Jul 26, 2009 9:44 PM (in response to quality11)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.
-
12. Re: Which tool?
quality11 Jul 27, 2009 6:17 AM (in response to pixlor)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 Jul 27, 2009 4:57 AM (in response to Jim_Babbage)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 Jul 27, 2009 10:24 AM (in response to quality11)In detail, your image has a "knee" on the tree because the rectangle meets the triangle above the base of the triangle:
What I did smooths that out:
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 Jul 29, 2009 3:38 PM (in response to pixlor)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 Jul 30, 2009 9:23 AM (in response to quality11)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?
JoeyD1978 Jul 30, 2009 10:40 AM (in response to quality11)Edit: N/M, wrong thread...
-
18. Re: Which tool?
quality11 Jul 30, 2009 11:48 AM (in response to pixlor)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 Jul 30, 2009 1:05 PM (in response to quality11)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 Jul 31, 2009 8:00 AM (in response to pixlor)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 Jul 30, 2009 7:41 PM (in response to pixlor)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 Jul 31, 2009 10:10 AM (in response to quality11)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):
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):
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 Aug 1, 2009 4:49 AM (in response to pixlor)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 Aug 1, 2009 12:37 PM (in response to quality11)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 Aug 6, 2009 8:57 AM (in response to pixlor)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 Aug 6, 2009 11:07 AM (in response to quality11)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 Aug 6, 2009 12:36 PM (in response to pixlor)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 Aug 6, 2009 2:39 PM (in response to pixlor)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 Aug 6, 2009 8:25 PM (in response to quality11)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 :
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:
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.










