Instructions for Button Design Studio: Pro

Fast path from blank page to finished design

1. Choose whether your design will begin with imported artwork or with a color background only.
2. If you already have a saved text layout, you can open it instead of starting from scratch.
3. Build the background and image placement first, then style text, outlines, gradients, and the enhancement ring.
4. Use the live preview to click text directly, drag straight text, and drag imported images into place.
5. Select the final button size before exporting so the print layout and preview sheet match the button you will make.

Start Your Design

The opening question asks whether you want to begin with a photo or image-based design, or build the design with text and colors only. This is now a single yes-or-no decision.

• Choose Yes when you want to use a photo, logo, premade artwork, or background image.
• Choose No when you want to build with colors, text, gradients, outlines, and other controls only.

Photo start path

If you choose a photo or image start, Pro now opens directly into Image Controls so you can upload the file and begin adjusting it right away. You can still add text later through the normal text controls.

Saved text layouts

Saved text layouts are a great way to save time by quickly reusing layouts you use often. However, only the text content is saved. Any images from the original design will need to be added again.

Background Color Selector

The background controls currently support three layout modes:

• Single Color for one full background color.
• Split Top/Bottom for two stacked color areas.
• Three Colors Top/Middle/Bottom for three stacked color areas.

Color workflow

Use the horizontal picker line first to explore and select colors. Click the rainbow-colored color picker to access the full color spectrum for more precise selection. When you want to reuse a color elsewhere in your design, use the Saved Hex Colors shown below. If there's a color you plan to use regularly, add it using the Hex Color control. This places it in the second line of swatches, making it easy to reuse throughout the studio.

When to use gradients

Background Gradient Controls are part of Advanced Features and are useful when you want a softer transition instead of solid stacked bands.

What hex colors are

Hex colors are six-digit codes used in digital design to represent a specific color. They begin with a hashtag (#) followed by a combination of numbers and letters. For example, #FF0000 represents bright red, while #0000FF represents blue. Each pair of digits controls the intensity of red, green, and blue (RGB), giving you access to millions of exact color variations.

Why they matter

Color is not just about aesthetics. Hex colors help you stay consistent, protect branding, and keep exact color choices repeatable from one button to the next. That matters when you want the same company logo, campaign color, or design shade every time.

The advantage in Pro

Saving hex colors gives you speed and precision. Instead of guessing or recreating a color by eye, you can reuse brand colors instantly, maintain consistency across projects, build a personal or company color library, and save time on repeated adjustments.

Import Image

Use Image Controls to import photos, logos, artwork, or full image backgrounds.

Image adjustments

• Size changes the overall scale.
• Stretch Left/Right and Stretch Up/Down adjust proportions.
• Rotation helps straighten or stylize the image.
• Brightness, Contrast, Saturation, and Exposure help refine imported artwork.

Drag directly on the preview

Imported images can be dragged directly on the canvas, which is often the quickest way to center a face, logo, or subject inside the dashed guide.

Enhancement Ring

Enhancement Ring Controls let you add a colored ring around the design edge using the same color-picker and Saved Hex Colors used elsewhere in Pro.

Main text fields

Pro includes Top Text, Center Text, and Bottom Text. You can add additional text fields whenever a layout needs extra wording.

Text controls

Each field can have its own Font, content, size, spacing, position, Style, text color, Outline Color, and outline amount. Top, Center, Bottom and Extra Text fields can be dragged directly on the preview.

Use the small CS and CA pills next to text labels when you want a quick horizontal center. CS centers the selected text field left to right, while CA centers all text fields left to right. Neither button changes the vertical position.

Fonts and hex colors

Use Fonts (Add/Delete) to upload fonts, manage imported fonts, and make those fonts available in your text fields. There are many websites where you can download free fonts to use in your designs. Simply Google "Free Fonts" and take your pick.

This is the place to add custom fonts for campaign work, school designs, business branding, church events, or any other repeat style you want to keep consistent.

Tagline Setup

Tagline Setup controls the optional back-curl information such as contact details, a website, a business name, or a short message. It is a simple way to advertise your button-making business.

Current Advanced Features list

The current Advanced Features section contains:

• Background Gradient Controls
• Dashed Line Controls
• Enhancement Ring Controls
• Fonts (Add/Delete)
• Hex Colors (Add/Delete)
• Reset All Settings
• Save Your Text Layouts
• Tagline Setup

What they are for

Use Advanced Features when you need finer visual control, reusable text layout storage, exact color management, font management, or a fast reset path.

Save and reset

Save Your Text Layouts stores reusable text layouts for later, while Reset All Settings opens a confirmation dialog before clearing the current setup back to defaults.

What it does

Feature Finder helps you quickly find a feature you want to use without having to navigate through multiple panels to get to it.

Click the left side of the Feature Finder button to open Basic Features. Click the right side of the same button to open Advanced Features.

Current shortcut groups

The current basic and advanced shortcut sets use the same labels you see in the main Pro interface, including Dashed Line Controls, Fonts (Add/Delete), Hex Colors (Add/Delete), Tagline Setup, and Reset All Settings.

Select Button Size

The button-size selector determines the printable layout. Choose the final size before exporting so the preview sheet and PDF match the button you are making.

PDF and PNG

• PDF is best for printing because it creates the full page layout for the selected button size.
• PNG is best when you want one exported image file for another graphics program or digital use.

Printing advice

• Open exported PDFs in Preview, Adobe Acrobat Reader, Edge, or Chrome.
• Print at actual size or 100% unless you intentionally need a different scale.
• Avoid printer auto-scaling when you need accurate button layouts.