locked
Now that my artwork is done... how to cut it up? RRS feed

  • Question

  • Good afternoon everyone,

    I have completed a design for part of our UI and now I sit staring at the screen wondering what the best way is to cut up and pass it to my developer. 

    preview:  click here to see my screen grab

    Basically I have an interface contained in a circle;  portions of this circle are separated by grey lines;  when the mouse floats over on of these areas, it glows soft yellow (indicated in the graphic).  So you can see that there are 13 'buttons' on my interface.  I have my design on three layers...the background, the ball, and the mouse over "glows". 

    Now I'm ready to start putting this over to the development team...the way we used to do this is give a base jpg of the whole thing, then PNGs to overlay over the oddly shaped portions;  alpha areas allowing the bottom to show through.  I'm not sure of the best way to tag this in the design/blend universe...  is there even a way to 'flatten' and then chisel out each button so i have each button as an object, and each mouse over as one as well?

    Any help would be greatly appreciated.

    Cheers,
    Purkiss
    Purkiss
    • Edited by Purkiss Monday, April 14, 2008 7:31 PM link edit
    Monday, April 14, 2008 7:30 PM

Answers

  • What I would do is this: First, hide all the buttons and then make your first button visible, such as the one labeled V1 in your illustration.  Right click on the visible button and choose Create Slice from Selection. The reason you want to hide all of the other buttons is because a slice is rectangular and the slice will capture whatever is visible in the rectangular slice. If, say, the V2 button was also visible when you created the slice of the V1 button, the parts of the V2 button that was visible at the time would also be included in the rectangular slice. 

    Next, choose the slice you just created, which will appear in the slice layer in the Layers panel, and give it a discriptive name, such as V1.png. Now, if this button is to glow when you mouse over it in the final product, then hide the V1 button and make the object that represents the button in it's glow state visible and create a new slice. Name this slice something like V1glow.png. This will help the programmer know which image is to be used when the V1 button is in the mouseover state.

    Continue to hide buttons you've already created slices of and make visible the buttons you want to slice until all your buttons have been sliced and named. Then export the slices to the appropriate XAML, such as Silverlight or WPF Canvas, depending on the type of application you're creating.

    I hope I've explained it well. Let me know if further explanation is necessary. 
    Annie
    Monday, April 14, 2008 8:15 PM
    Moderator

All replies

  • What I would do is this: First, hide all the buttons and then make your first button visible, such as the one labeled V1 in your illustration.  Right click on the visible button and choose Create Slice from Selection. The reason you want to hide all of the other buttons is because a slice is rectangular and the slice will capture whatever is visible in the rectangular slice. If, say, the V2 button was also visible when you created the slice of the V1 button, the parts of the V2 button that was visible at the time would also be included in the rectangular slice. 

    Next, choose the slice you just created, which will appear in the slice layer in the Layers panel, and give it a discriptive name, such as V1.png. Now, if this button is to glow when you mouse over it in the final product, then hide the V1 button and make the object that represents the button in it's glow state visible and create a new slice. Name this slice something like V1glow.png. This will help the programmer know which image is to be used when the V1 button is in the mouseover state.

    Continue to hide buttons you've already created slices of and make visible the buttons you want to slice until all your buttons have been sliced and named. Then export the slices to the appropriate XAML, such as Silverlight or WPF Canvas, depending on the type of application you're creating.

    I hope I've explained it well. Let me know if further explanation is necessary. 
    Annie
    Monday, April 14, 2008 8:15 PM
    Moderator
  • Thanks Annie, I think I know what you're getting at.  I was worried at first I'd be forced to export the artwork as PNGs, but your latter statement indicates I can still export the visible slice as XAML.  Time to play!
    Purkiss
    Tuesday, April 15, 2008 5:28 PM
  • You couuld export the vector objects to XAML but it all depends on what you want to do. I think the .png slices will work for you though.
    Annie
    Tuesday, April 15, 2008 6:38 PM
    Moderator
  • Hi Annie,

    some more advice needed please, if you can spare.

    My UI is constructed of three layers..

    the top layer has the glowing mouse over elements;  a simple yellow shape with low opacity, and a stroke (so the colours below show through). I have one element for each shape, then an element for each letter or set of letters.

    the main layer is a ball with stroked lines forming the pieces; each stroked line is its own element on this layer.

    the last layer is the background, which I can easily hide.  No problem there.

    My question is...  what is the best method to "cut" up the main layer so i have button pieces instead of a big grey circle, a shine, and all the stroke layers?   Right now. i can hide those elements, but not the dispirate 'buttons'..  i've investigated several tools, but so far, not sure where to go.  In photoshop, iw ould just flatten the image with the elements visible, then cut away the portions i don't want, and save as a PNG with only the button i want visible, and the rest of the image as an alpha layer set to invisible. 

    So now that i have my design here with three layers, and various elements in the middle, i'm not sure the best way to hide portions and only expose one button...  is there a layer i can place over top that indicates everything below it must be hidden?  Then I could create a path around the button easily enough, and just turn that layer on to hide the other elements, and use the method you spoke of.  I'm thinking that's too easy...  what about grouping the elements in one layer together, and then somehow merging them as a single piece?

    I hope I'm not appearing too daft!

    edit: Note: I defniitely want to keep them as XAML.  Our application scales and works with the magnifying tool in VISTA.  PNGs would render the artwork at a single resolution--definitely not where I want to go with this.

    Thank you for any assistance,
    Purkiss
    Purkiss
    • Edited by Purkiss Tuesday, April 15, 2008 7:01 PM terminology fixero
    Tuesday, April 15, 2008 6:42 PM
  • I've been playing and playing, and I really don't nkow how to cut this up in design...i'm wondering if i should export it as a full png to photoshop, then cut away selections on a transparent background and then export the pieces as PNGs...  unfortunately, I lose my vector aspect, but I'm not sure of any other way to do it.
    Purkiss
    Tuesday, April 29, 2008 5:15 PM
  • Purkiss,

    I apologize for not seeing your post sooner!

    It would be possible to group your objects and then just export the objects to XAML and let the dev guys show and hide the elememts in Blend. The advantage to doing this, at least for a WPF application, is that you could zoom in and out of the elements without loosing quality like you would with .png files.

    Would it be possible for you to send me the .design file you're working with? Also, did you tell me which type of application you're making? WPF or Silverlight?


    If you can send me the file, please email it to me at design at studioe3 dot com. Thanks!
    Annie
    Tuesday, April 29, 2008 5:35 PM
    Moderator
  • Hi Annie,

    Ok, I emailed you the .design file...hopefully you can make some method out of my madness.  We are creating a WPF application, and definitely image quality is a goal of ours.  That's why I'm shying away from PNG (rasterization = bleh).

    Thank you so much for your help.
    Purkiss
    Tuesday, April 29, 2008 6:12 PM
  • Thank you, Purkiss. I have received your file and I'm looking at it now. I'll respond to you by private email when I have a solution.
    Annie
    Tuesday, April 29, 2008 7:00 PM
    Moderator
  • between Annie's email, and since then a lot of playing, there's a few ways to do this.

    One way (and this is the way annie helped me with) was to export each piece of my design as a separate xaml piece.  My developer then arranged this piece into a viewbox/grid container so it could be resized and all held in relative position, regardless of the size/aspect ratio.  Then those xaml objects can be copied/pasted as code, or even imported into a resource dictionary and placed into the software package that way.
    Purkiss
    Friday, September 19, 2008 5:46 PM
  • Deebs, forgive me for deleting your posts but I need you to use your own work in your posts. To the best of my knowledge we don't have the original author's permission to use his artwork here.
    Annie
    Monday, September 29, 2008 12:26 PM
    Moderator
  • Ah, of course Annie, forgive me.

    I will make sure that images I post are truly non-compromising.
    Monday, September 29, 2008 8:32 PM
  • Thanks, deebs. I appreciate your understanding!
    Annie
    Monday, September 29, 2008 9:00 PM
    Moderator
  • There is a (speculative) way to do what you seek and it is based on non-rectangular trigger areas (hotspots) with a vector based image that contains multiple effects (eg shading, light or reflection based effects, ... ) that do not make it easy to splice or cut up the image without degrading some of the effects.

    It may be particularly helpful also when trigger areas (hotspots) appear to intersect in the sense that lines are ambiguously associated with one hotspot or another.

    The method is to treat the source image as a background object with hotspots that are merely paths based on fills in the background image.

    These can be added to layer or layers above the background image with a simple solid fill and opacity reduced to something like 1%.

    Ideally the hotspot will not add too much distraction to the background image but to the user it will appear that the background image is "active" where in fact it is the solid filled areas at much reduced opacity that are active.

    One thing to experiment with is the mouseover event and whether intersections are catered for or not.

    For example, if a mouseover event at one hotspot can overlap a neighboring hotspot or not.

    (I'd supply images but I can't really be bothered :-) )
    Tuesday, September 30, 2008 9:34 PM
  • As a ps:

    It might be interesting to see if there is a form of logic that runs along lines of "only one hotspot can be active at any one time therefore mouseover events cannot possibly intersect with other neighboring mouseover events"?

    In other words a mouseover event can do whatever it wishes without difficulties associated with possible intersections as these are really mutually exclusive events (a mousover event cannot possibly trigger two or more results as only one mouseover event is permissible at any single time).
    Tuesday, September 30, 2008 9:53 PM
  • Annie Ford said:

    Deebs, forgive me for deleting your posts but I need you to use your own work in your posts. To the best of my knowledge we don't have the original author's permission to use his artwork here.


    Annie


    Annie, as a more considered response: is it not reasonable to accept any image posted to a forum with a request as fair game within context of the request?

    I ask for clarification as it seems plausible and reasonable that a request with image a priori means an answer must be within context of availability and request?

    I wholly support any view that suggests improper use of an image posted to a forum runs against the grain of image availability.

    EDIT:

    Perhaps one may view a request as a resource and also any associated image as a resource also?

    If so, excluding the image would also seem to exclude providing an answer as both are resources?
    • Edited by BBB Wednesday, October 1, 2008 10:59 PM subtle point appeared late in my perception.
    Wednesday, October 1, 2008 10:41 PM
  • Hi Deebs,

    The original artist didn't post his image on this forum. Rather, he linked to an image that he posted on his own web site. I think it's fair that the original artist determine where his artwork is to be used. Because he posted it on his own web site he is free to delete the image if he chooses to do so. But when someone else posts his work on their web site he loses control of what happens to it. So no, I don't think its fair game to deny Parkiss (sorry, not sure of spelling) the freedom to control over his artwork.

    I'm sure Parkiss appreciates all your help and comments. Just please get his permission before posting his images here.

    Thanks, deebs!

    Hugs!
    Annie
    Thursday, October 2, 2008 12:01 AM
    Moderator
  • As it is said, let it be done.

    I will observe and offer apologies to all and Purkiss in particular (soz mate - no harm intended)

    EDIT: hmmm an afterthought!

    We know that right click > Save image as > (os Save as ... ?) ... tends to work on images and I wonder if the above speculative approach might be extended to merely show the trigger regions?  It doesn't avoid screen capture but those would be mostly bitmap with no rollover effects.

    It might be interesting to see if a whole UI can be covered with a mixture of active and inactive trigger areas (hotspots) so any attempt to right click > Save as merely turns out a bitmap of a trigger area (hotspot) be it an active or inactive one?
    • Edited by BBB Thursday, October 2, 2008 9:57 AM an afterthought
    Thursday, October 2, 2008 9:45 AM
  • deebs,

    You can export areas of your artwork in Design 2 whether or not the area is a bitmap. For example, if you have a large number of vector objects, you can capture the output area with a slice, right click on the slice and choose Export. Only the area defined by the slice will be exported and the export with be a bitmap in a format chosen by the user.

    Is this what you're asking? Of course, as you know, Design doesn't support hot spots. Are you using Design 2?
    Annie
    Thursday, October 2, 2008 2:49 PM
    Moderator
  • ED2? Uh-huh I'm still on E3 :)

    I was thinking along lines of the designer to developer cycle in which a background image has apparently almost transparent trigger regions for mouse events.

    I was also speculating on AIR type apps or web-based apps in which not only are there images but code and stuff.  Maybe a user end Save as ... merely outputs trigger areas rather than code or image/code related stuff.

    EDIT: code obfuscation?

    And should my status be reviewed?  (244 reads at last count?)  [:-)
    • Edited by BBB Thursday, October 2, 2008 10:48 PM devilishness :-)
    Thursday, October 2, 2008 8:34 PM
  • In summary:

    I don't think you need to cut up artwork at all.

    All one may need to do is to create trigger areas in layer(s) above the artwork and these trigger areas probably better conform to "button" fill areas with a simple fill at much reduced opacity.

    It is speculative that null trigger areas (eg largish areas with no trigger events at all) might be helpful for diverse reasons.
    Tuesday, October 7, 2008 12:34 AM
  •  Hi Deebs,

    Perhaps you are thinking of Image Maps:

    http://en.wikipedia.org/wiki/Image_map

    Regards,
    ~Fred
    Thursday, October 9, 2008 3:08 PM
  • Hi Deebs & Annie,

    Thanks for protecting the original artwork--very sporting of you!  But no need, I give permission for the graphics to be used again on the forum.

    Deebs, you're right.  If you're using blend, you could just punt in a base graphic, and then use slice exports out of design into blend...illuminating the pieces using triggers as you described.  you can do all sorts of cool things with it once you get it into blend.  I used a grid control with a few stack panels to keep my artwork all lined up nice and fully resizable.

    Fred... image map, definitely the base concept, but I think we're getting more into applying directly to design/blend interaction and usage.
    Purkiss
    Wednesday, October 22, 2008 6:31 PM
  • The quality and tone of your reply brings a sentimental tear of integrity to my eye - it is very good of you Purkiss.  Very, very good.

    I hope the technique means that designers can design complex graphics that developers can now access very easily.

    In all of this I admit to being a bit of a numpty and wonder if mouseover events can now be removed from restriction of size of the 'declared' trigger area?
    Thursday, October 23, 2008 11:24 PM
  • <daydreaming?>


    This thread has me pondering and wondering about some ponderables and wonderables...


    I'll pop a graphic as soon as E3 settles down on the Mac (it's been a bit flaky today).


    Ponderables and wonderables


    The first of these is separation of a graphic from it's trigger areas.


    Could, for example, images be sent to GPGPU with a UI-map sent to CPU?  (Alternatively sub-threads to GPGPU and uber-threads to CPU) as a means to have static, animated, complex, complicated or simple graphics handled by a GPGPU with the UI-map handled (easily and directly) by CPU?


    Would a GPGPU handle streaming easily with equal ease and less strain for CPU to handle a UI-map?


    Application?

    web-based stuff or OS (Windows 7?)


    Complexifying?

    A UI-map of quite high resolution with background animated GIF or some vector based equivalent handled in the background by a GPGPU?


    </daydreaming?>


    EDIT: (afterthoughts) separation of varables, UI-map handled by CPU, UI-map content handled by GPGPU?

    • Edited by BBB Saturday, October 25, 2008 11:27 PM afterthoughts
    Saturday, October 25, 2008 10:28 PM