Expression >
Página Inicial dos Fóruns
>
Expression Design
>
Space outside of Design 2 exported jpg images
Space outside of Design 2 exported jpg images
- Greetings,
I'm in the process of making a new menu for a client. It's a typical one color when viewed and then another with mouseover. Each menu element is 130px * 40px. I created the base elements in one layer in Design 2 and made certain that the crop markers were set about 2px just inside the outside boundary. The only effect added to the design is a bevel. The design is then exported as a jpg image with a matte color of #FFFFCC, a quality of 100%, and anti-alias is checked. Fairly typical stuff.
When I check the image in my Vista file explorer, there appears to be a space of 3-5px around the perimeter of the exported design jpg. When I put the jp design into my menu markup/code, there is about 3-5 px of blank space between each image. This is true for Firefox 3, 3.5 - IE 7 & 8 - Opera 9 - Chrome (whatever version) This should not be.
This is a vertical flyout menu. When one hovers the mouse over a main menu topic, the full sub-menu opens up in a vertical column. If a menu item in this level has a sub-menu, once one hovers over that, the sub-menu expands. The CSS markup is set so that there is 0px space between each image and block element. (The menu image resides within a block.) I've scoured my markup and code. The kind folks over at the Expression Web forum have confirmed that my markup is valid - there are no spaces set around the image or the block in which the image resides. So the problem might be in the exported design image.
I have brought some of the completed images into Photoshop Elements 6.0 and cropped the design images right next to the visible boundary. Even after that and saving the image for web, I still get the 'ghost' space between my menu elements. I'm befuddled. Has anyone run into a problem such as this? What might that 'ghost' space be and what's causing it?
The menu is not live or posted anywhere. I have to fix this problem before I complete the 120 different menu items.
Thanks in advance for any suggestions you might have. I appreciate the help.
Peace,
Phroneo
Respostas
- Hi Phroneo,
Sorry to take so long to get back to you. I looked at your Design file and noticed that you have a drop shadow attached. This would explain why you have a space on the bottom side of the exported image. What I did was to select the text object in the layers panel and, holding down the Shift key, selected the button image with the bevel and drop shadow and exported the selected objects and an image. I only get a space on the bottom side of the button because of the drop shadow. If you remove the drop shadow this should eliminate the problem.
Let me know if this helps.
Annie- Marcado como RespostaPhroneo terça-feira, 27 de outubro de 2009 20:20
Todas as Respostas
- phroneo
greetings
not sure this can help you I still work in design 1
I don t know if slicing can help but in design 1 you can a bit control how the jpg is exported when importing the jpg file after saving on a colored background with a big contrast
here I did it on the original design file but you can see the differences in this particular case
set the extra border width to -1 was the best in some other cases there were left over of the green background like setting to 0 pixels wasn t good
how I set the crop marks
select the object set crop marks from bounding box and the extra border width I reduced by -1 the problem is the size changes a bit
- Editadogermaine1 sexta-feira, 9 de outubro de 2009 12:41resized the image
- Greetings Germain,
It's great to get a reply from you and see that you're still active in this forum. I hope all is well.
Thanks for going to all of that effort to make a suggestion. Unfortunately, it doesn't seem to make a difference. I have also done about the same thing as you in Photoshop when I cropped the images directly next to the last visible outside pixel. I'm still getting vertical space between my images.
This is really a mystery. The problem is not within my markup - either the CSS or HTML - that's been triple checked multiple times. I just can't figure out why I keep getting the spaces. It really causes a problem.
What happens is if one drags one's cursor too slow, when the space comes into the range of the cursor icon, it loses connection with the menu and everything flies back in - just as it is designed - because thee is nothing to keep the menu open. This has become rather frustrating and more so because I might have to live with it. No one else except for you has offered any suggestions so it just may be 'one of those problems.'
Be well, Germaine.
Peace,
Phroneo - Hi Phroneo,
When you exported the image did you check the box that says Export Crop Region Only?
You might also try the Slice feature instead of the Crop feature. Right click on the object and choose Create Slice from Object and then export the slice.
Let me know if either of these solve the problem.
I'm a little confused about setting the Matte color. It sounds like you're trying to mask areas around the object. Aren't you trying to export the exact size of the object, leaving no space? What are you setting the Matte color for?
Annie - Hello Annie,
I'm using Expression Design 2 for this project. As I looked at the export properties, I have three options: Export the Whole project, Export Selected Objects, and Slice. I was Exporting the Whole Project, which had been brought down to one layer with the crop marks just inside the boundaries of the object. There were only 3 elements in the object: a rectangle background with a bevel fx, a text block centered inside and, just because I'm lazy, two intersecting lines with 0% opacity that were used to align the text. The size of each rectangle element is 130px by 41px. (I'd put in a diagram like Germaine's but I don't know how. Will you please tell me?) I then cropped each resulting jpeg in Photoshop Elements. There are 120 of these.
The menu structure is a vertical fly-out on mouseover that can be up to three layers deep. I'm using CSS to control the flyout of what is basically an HTML unordered list I just tried your suggestion for exporting the elements as a slice with the slice cut down just as I had with Photoshop and still got the same results.
I'm beginning to think that the vertical separation I'm getting is a result of the list <li></li> elements in the HTML markup. I can't figure out why because all of my CSS controlling the list and <ul> elements are set to zero for all three layers. It may be that there is a built in separation inherit in unordered lists. I just can't find a reference that makes that statement.
The funny thing about this is that the test menu actually looks good with the elements set apart. It's just that there are 60 menu elements and at a separation of 5px each it begins to take up a lot of space.
My use of the Matte color was just a belts and suspenders thing just in case there was an blank space around the exported element. It's really not needed - there isn't any space around the elements.
Thank you for your time to respond, Annie. I appreciate your input.
Peace,
Phroneo Hi Phroneo,
I'd be happy to take a look at your Design file and your HTML file if you'd like. (v-anford at microsoft dot com) I'ts been years since I worked with HTML but I still dabble in it from time to time. A second pair of eyes never hurts.
I asked about the Matte color because I'm curious if that might somehow add pixels to an exported object. I don't know how much testing has been done on that feature - maybe it needs looking into.
The Slice feature is nifty and worth looking into if you'll be doing a lot of HTML export. I did a tutorial on it: http://blogs.msdn.com/expression/archive/2008/03/02/test-draft.aspx
Annie- Hello Annie,
Wow! I read and worked through your slice tutorial. It was very well written and easy to follow. Not only did I learn how to use the slice tool, but I got all sorts of web site ideas that in the past would have been impossible for me to do. Even though I'm more than a year behind the curve, thanks for a great learning tool.
Peace,
Phroneo - Hi Phroneo,
Sorry to take so long to get back to you. I looked at your Design file and noticed that you have a drop shadow attached. This would explain why you have a space on the bottom side of the exported image. What I did was to select the text object in the layers panel and, holding down the Shift key, selected the button image with the bevel and drop shadow and exported the selected objects and an image. I only get a space on the bottom side of the button because of the drop shadow. If you remove the drop shadow this should eliminate the problem.
Let me know if this helps.
Annie- Marcado como RespostaPhroneo terça-feira, 27 de outubro de 2009 20:20
- Hello Annie,
Thank you for taking the time to look at this project. You found the answer to my problem. Now that you've pointed it out to me it's really a very obvious fix. I should have opened my eyes to see it but sometimes when one is in the middle of a project it takes another pair of eyes to find the problem.
Thanks again. I appreciate your help.
Peace,
PS: Is that slide tool ever helpful! I'm using it on a custom design web site and it is super helpful. It saves a lot of time trying to place custom elements.
Phroneo - Great! Problem solved.
Yep, I love the Slice tool too. I's surprised it hasn't made the crop tool obsolete.
It's nice having you in our forums, Phroneo!
Annie
