How to use the button designer!

click here to open the button designer in a new window
you need to have Flash 6 installed to run it! If you are having trouble getting the designer to load,
try clearing your browser's cache. If you still have problems, email me and let me know.

NOTE: The email you get when you submit your design code may show your text out of order or may show text that you didn't end up using. Your design is fine! The designer just lists things in its own internal order.

Introducktion (quack quack)

The mushycat button designer is a little Flash app that lets you design simple text buttons and bumperstickers (though right now I'm not taking bumpersticker orders. Maybe later it'll do shirts and other things too). It's for people who want to design buttons but don't have Photoshop or Photoshop skills. It can't do fancypants stuff though, so if what you want goes beyond the simple, you're going to need Photoshop or another good image editing program, or I can help you out.

It's the first (and only) thing I've written in Flash so, um, it'll get better.

IMPORTANT: To get the most out of it you are going to need to find yourself some neat fonts and learn how to install them. I'll leave that up to you, but if enough people ask I'll write something about how to do it. Just use google to search for "free fonts" and you'll find tons.

Okay, say you want to make a button that says "I love kittens". First, open up the button designer and you'll get:

It's pretty simple really, there's the button template to the left and the draggable objects to the right. Basically all you have to do is drag things to where you want them and then adjust how they look once they are there.

Moving Things Around

The first thing you'll want to do is to click and drag one of the text objects. There are six of them and you can move them anywhere on the screen, though of course it's best to put them inside of the circle that makes up the button template, duh. You don't have to use all of them of course.

Note: If your text has jagged-looking edges don't worry, it's just your computer. Your buttons will look perfect.

Changing Text Properties

When you select a text object, the interface updates itself to show you the properties of that object:

You can then change how that object looks by typing in new text, or changing its font, or its color or size. Try typing in 'kittens', then pick a font you like. The font list will show all the currently installed fonts on your computer, so it's up to you to make sure there are some good ones there!

Tip: If you installed fonts *after* you started the button designer, you can get them to show up on the font list by clicking on the 'font' label. That will reload the font list.

Sizing Text

To size an object you can either type in a number directly or you can use the size widget (the purple rectangle with the triangles). The widget can make an object larger or smaller depending on where you click on it. If you click to the left of the center (where the triangles come to a point) the object will get smaller, if you click to the right of the center the object will get bigger. How *much* it gets bigger depends on how far away from the center you click, if you click very close to the center the object changes size in small steps, and if you you click near the edge it changes in big steps, and everywhere in between. Try it out and make 'kittens' a nice size. Oops I forgot the 's'! ^__^

Tip: You can also change an object's size via the keyboard by using the [ and ] keys. Just make sure you select the object first by clicking on it once.

A Resizeable Heart, Don't I Wish...

The heart is also a draggable, re-sizeable object (though you can only resize it via the size widget), so drag it out and put it in the middle of the button template. Then drag out another text object and change it so it reads "I".

Tip: If you click on 'all' next to the font or color lists you will apply the current font or color to all the text objects. That makes it easy to set everything to a certain font or color.

Colors (or Colours if you're all fancypants)

Colors are selected by name from the color list. Once you select the color list you can scroll through it by using the up and down arrow keys.

Tip: If you close the list by selecting a color, the list will still selected and the arrow keys can be used to scroll through each color while also updating the object color.

The Background Color list does what it sounds like it should, but the Color Scheme list needs some explaination. What I've done is listed a whole bunch of colors that go well with each other, and by selecting combinations you can quickly change both the background color and the all text colors at once. If you select the Color Scheme list and then close it you can use the arrow keys to quickly scroll through all the schemes until you find something you like. After you set a scheme you can still change the colors of individual objects to whatever you like.

Update: I added a new 'random' button that isn't shown here. It's next to the Color Scheme list - rnd. By clicking on it a foreground and background color will be selected randomly from all the possible colors. Just keep clicking on it until you find something you like. Fun.

Don't Be Cross With Me Please

The two crossout icons can be clicked (not dragged) to put a crossout over the button template. One puts the crossout over the text, the other under.

There's also a crosshair icon that will put up a centered crosshair over the template, that makes it easier to center things visually.

Saving Your Design

To save your design you click on "click here to generate a save code". That will open up a new browser window to mushycat.com that will present you with your code and a form to submit it. You must submit your code with that form so that I can make it when you order.

To edit a design you can paste a code into the text box at the bottom of the button designer and click 'enter code'. The button designer will then read the code and recreate the design. Once you make changes you have to generate a new code!

To get your design actually made I have to take your code and load it here to generate a design image. To do that I need to have the same fonts that you used. I have alot of fonts, but it's best if you just email me the actual font files right off. Oh, and don't forget that you need to place a custom button order first!

Why You Can See A kenkitty In Your Design

He's just there so that stinkyloserheads can't simply take a screenshot to make their own button image. If they do, they'll have to photoshop out the kenkitty, and if they can do that, they probably don't need my button designer in the first place. Your actual button will surely not have him in it! So don't worry. ^__^

Tip: If the kenkitty is distracting you, try blurring your vision a little. That's also a good way to get a handle on composition, because you'll see in broader strokes and the details won't grab your eyes as much.

Limitations

• Text is not rotatable. Flash can rotate text, but seemingly only if the actual font is embedded into the movie.
• You can't change the z-order of the text objects (moving one in 'front' or 'behind' the other, but it's pretty simple, text1 is the lowest and text6 is the highest.
• There aren't any special effect type things.
• You can't specify exact colors, you have to use the named colors I give you. Initially I wanted to have two color wheels on either side of the button template, it was going to look like a little bear or something, but I couldn't figure out how to 'pick' a color from an object in Flash. Oh well. If the color you want isn't there, you can always send me the color, like this: superduperdarkred #FF9999 or any other numerical format. I'll add it to the designer and update it.
• For some reason dingbat-type fonts don't seem to work UNLESS they are Postscript fonts.
• It won't make you banana bread or sushi. But I will! ^__^

stuff that's coming... (maybe)

At the moment the only thing I'm looking to add is bitmap import, so that you can bring in any image and place and compose it as you like, putting text over it as needed.