Skip navigation
kielhanson
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

 
Replies
  • Currently Being Moderated
    Nov 18, 2012 9:04 AM   in reply to kielhanson

    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:
  • Currently Being Moderated
    Nov 18, 2012 9:54 AM   in reply to kielhanson

    You need to create that shadow without using "Multiply"

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

    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:
  • Currently Being Moderated
    Nov 18, 2012 10:48 AM   in reply to Wade_Zimmerman

    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:
  • Currently Being Moderated
    Nov 18, 2012 10:52 AM   in reply to kielhanson

    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:
  • Currently Being Moderated
    Nov 18, 2012 11:03 AM   in reply to MW Design

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

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

    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:
  • Currently Being Moderated
    Nov 18, 2012 11:08 AM   in reply to Monika Gause

    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:
  • Currently Being Moderated
    Nov 18, 2012 12:50 PM   in reply to MW Design

    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:
  • Currently Being Moderated
    Nov 18, 2012 1:21 PM   in reply to Monika Gause

    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:
  • Currently Being Moderated
    Nov 18, 2012 4:41 PM   in reply to kielhanson

    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:

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