Skip navigation
kielhanson
kielhanson Calculating status...
Currently Being Moderated

Need help with exporting graphic styles

Nov 18, 2012 8:57 AM

Hi all.


I'm designing a game for iPad and am using Illustrator CS3 to create the graphics. I created lots of card sized graphics and gave them all the 'RGB Parchment' graphic style which comes with Illustrator.


The document in the picture is (part of) an illustrator file that I created these cards in. If I take one out to another document to edit it and save it as a .png - it comes back different. As you can see in the picture, in the centre are two mock ups I made for a card. The left is an illustrator file 'placed' in the document and the right is the same file but exported as a .png and then placed in.


The .png keeps the transparencies but the shadow is completely different, it's a horrible brown as well as the shape being slightly different and the quality quite low.

I sent the whole mock up picture (which is much bigger) to my iPad and I can still see the lower quality in the right, .png card.


If I want to bring graphics into some software to build the app I can't bring in illustrator files so I cant to create them as .pngs but when they're so different / low quality I don't know what to do. I just want to be able to use that 'RGB Parchement' graphic style and not have it changed so much when I export it.


Can anyone suggest anything? Thanks!

 

http://s10.postimage.org/52gjwm4g9/image.jpg

755 Views   13 Replies   Latest reply: Wade_Zimmerman, Nov 18, 2012 4:41 PM
 
Replies
  • Monika Gause
    Currently Being Moderated
    1. Monika Gause,
    Nov 18, 2012 9:04 AM   in reply to kielhanson
    Report

    A PNG can contain alpha transparency, but it cannot contain blend modes. You have to create your shadow in the desired dark color and then just lower the opacity.

     
    |
    Mark as:
  • kielhanson
    Currently Being Moderated
    2. kielhanson,
    Nov 18, 2012 9:50 AM   in reply to Monika Gause
    Report

    But it already has a shadow on it, or at least what looks like a shadow as part of the graphic style. If I edit the vector smart object (in photoshop cs3) it add the 'drop shadow' underneath the shadow that is already part of it.

     
    |
    Mark as:
  • Monika Gause
    Currently Being Moderated
    3. Monika Gause,
    Nov 18, 2012 9:54 AM   in reply to kielhanson
    Report

    You need to create that shadow without using "Multiply"

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    4. Wade_Zimmerman,
    Nov 18, 2012 10:24 AM   in reply to kielhanson
    Report

    Hmm?  You have me stumped because one I only see on image of a group of cards on wha t looks like a wood textured background that gets slightly darker on the right side the cards remain the same color.

     

    Can you show us an actually comparison of what you want as opposed to what you get?

     

    I am not certain at all at what Monika sees that I do not see.

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    5. Wade_Zimmerman,
    Nov 18, 2012 10:48 AM   in reply to Wade_Zimmerman
    Report

    I really am baffled myself this was a drop shadow applied to a rectangel wit the parchment style applied to it on a brown background and the drop shadow was applied with the multiply as the mode.

     

    And then exported from AI as a png?

     

    Why is there an issue and exactly what that issue is I can't see can you explain it or show it better maybe other people have a better idea.

     

    Screen Shot 2012-11-18 at 1.32.03 PM.png

     

    Here it is after being saved without a background but with a dropped shadow created with a multiply blend and then placed on a brown background color? ( iagve it a feather and blur just to see what it looked like.

     

    Screen Shot 2012-11-18 at 1.44.37 PM.png

     
    |
    Mark as:
  • MikeWenzloff
    Currently Being Moderated
    6. MikeWenzloff,
    Nov 18, 2012 10:52 AM   in reply to kielhanson
    Report

    The screen shot, as Wade says, is too small and I also cannot determine what the issue is. If you are refering to the graphic styled parchment having the brown in the center, you can open the appearance panel and alter the inner glows, etc.

     

    If it is the outer drop shadow on the parchment, that is the lowest effect found in the appearance shadow.

     

    If it is on your inner objects sitting on the parchment style, I would all need a better screen shot to see the issue.

     

    But the blend mode shouldn't make a difference, other than their respective effects on objects.

     

    Take care, Mike

     
    |
    Mark as:
  • Monika Gause
    Currently Being Moderated
    7. Monika Gause,
    Nov 18, 2012 11:03 AM   in reply to MikeWenzloff
    Report

    The blend mode definitely is an issue, when you export the button without its background, but with the shadow.

     
    |
    Mark as:
  • MikeWenzloff
    Currently Being Moderated
    8. MikeWenzloff,
    Nov 18, 2012 11:04 AM   in reply to kielhanson
    Report

    My only other thought would be what the document rasterization settings be...and as regards the low quality, are these being resized larger than the AI file on the iPad?

     

    Mike

     
    |
    Mark as:
  • MikeWenzloff
    Currently Being Moderated
    9. MikeWenzloff,
    Nov 18, 2012 11:08 AM   in reply to Monika Gause
    Report

    In what way? I do it all the time. the link is to a PNG using the parchment style--I did replace my card back with the OP's parchment style so overall the design it looks really bad stylistically. But I wasn't going to create a new card...

     

    http://www.wenzloffandsons.com/temp/card2.png

     

    Mike

     
    |
    Mark as:
  • Monika Gause
    Currently Being Moderated
    10. Monika Gause,
    Nov 18, 2012 12:50 PM   in reply to MikeWenzloff
    Report

    When designing this in Illustrator you use e.g. the dropshadow with multiply and you rely on it being dark. When you export it to transparent PNG  and put the PNG on the same background, the shadow will be lighter, because multiply won't be in that PNG

     
    |
    Mark as:
  • kielhanson
    Currently Being Moderated
    11. kielhanson,
    Nov 18, 2012 1:00 PM   in reply to Monika Gause
    Report

    Thanks for all the help (sorry I couldn't remember my login!)

     

    I have created a new card and attached the RGD Parchment graphic style, then, in appearance settings I can see that there is a 'drop shadow' unde the Fill submenu. Is this the correct place for it to be? It seems to work fine but the shadow looks very pixelly, though I guess it would be like this as it's a gradient to negative.

     

    I then exported this a .png as have attached it below. This is how I want the card to look as it's actual size on iPad....

    It's difficult to get the settings right to keep the parchment colour when at such a small size. I think the image is sharp enough though I can't see to add or delete any parts of the graphic style (that I can edit in the appearance menu), is it possible to tweek them much?

     

    http://s16.postimage.org/ii1yqdi0x/Fireball_actualsize.png

     
    |
    Mark as:
  • MikeWenzloff
    Currently Being Moderated
    12. MikeWenzloff,
    Nov 18, 2012 1:21 PM   in reply to Monika Gause
    Report

    Hello Monika, I see what you are saying in relation to the OP's image if I really, really blow it up. I think.

     

    Here is my actual card, drop shadow set to multiply, exported as a PNG, brought back into AI and a gradient-filled rectangle placed behind the PNG, blown-up to 400% and a screen capture taken.

     

    card4.png

     

    So I am likely not understanding what is being said and will leave this alone now.

     

    Take care, Mike

     
    |
    Mark as:
  • Wade_Zimmerman
    Currently Being Moderated
    13. Wade_Zimmerman,
    Nov 18, 2012 4:41 PM   in reply to kielhanson
    Report

    Seelect the art for a card then go to the Appearance panel and select the bottom fill and shange the drop shadow to color from instead of darkness and shoose either black or a dark gray.

     

    Or simply add a new drap shadow as a separate effect. Also using color instead of darkness.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points