Instructions

Roster Upload

One of Button Design Studio: Sports Pro's biggest time-savers is its ability to personalize buttons from a team roster. If you do not have a roster file, or if your CSV does not load correctly, you can still enter player names and jersey numbers manually in the roster panel. The guidance below explains what a CSV file is and how to format it so the studio can read it.

1. Open Roster (Add or Import Names).
2. Use the CSV import area to load your roster file.
3. Use the qty column to tell the app how many designs to create for each player. If the qty column is missing, quantity defaults to 2. You can import either one name column or separate first and last columns, and the app combines them into one player name.

Accepted column names include:

• name, player, playername
• first, firstname, givenname, fname
• last, lastname, surname, lname
• number, jersey, jerseynumber, playernumber
• qty, quantity

Key Terms

• CSV: a plain text spreadsheet format used to import a roster. Each row is a player and each column is a field such as name, first name, last name, number, or quantity.
• Add Player(s) Manually: if you do not have a CSV file with player names, you can type player names and jersey numbers directly into the Roster control panel and add them one at a time.
• Saved Setup: a saved collection of design settings you can reload later, such as text styling, image placement, colors, and export size.
• Outline: a border around text that helps the letters stand out from the background image.
• Border: an optional colored ring effect inside the button design that can add separation and emphasis around the center artwork.
• Quantity: the number of designs the app should create for a player during PDF export.
• Layout Preview: the page preview on the right side that shows how many button designs fit on the selected sheet size.
• Button Size: the finished button format you choose before export, such as 2-1/4", BAM 2-1/4", or 3".
• Feature Finder: a shortcut area that jumps you straight to commonly used controls instead of stepping through every panel in order.

Quick Start

1. Open Background Image and import the sports image you want to use. If your image is a transparent PNG, the studio can place it over a background color instead of a flat white canvas.
2. Adjust the background with Image Size, Stretch Left/Right, Stretch Top/Bottom, Left/Right, and Up/Down.
3. If a transparent PNG is loaded, use Background Color, saved hex colors, Opacity, and Radial Gradient to build the color behind it.
4. If desired, turn on Border.
5. Style Top Text and Bottom Text if you want extra wording above or below the design.
6. Open Players Name and Jersey Number to style the two roster-driven text fields that update for each player.
7. Use Tag Line Controls if you want back-curl text. The current tagline Color and Outline choices are black, white, and middle gray.
8. Use Feature Finder when you want to jump to a control instead of cycling through panels with Advance to Next Panel.
9. Add players manually or import a roster CSV in Roster (Add or Import Names), including quantity when you want more than one design per player.
10. Click a player row to preview that player.
11. Drag the players name, jersey number, or overall design on the preview canvas as needed.
12. Use the keyboard arrow keys to nudge the background image position. Hold Shift for larger moves.
13. Select a button size in the right panel and review the layout preview.
14. Click Finalize Design.
15. Open the exported PDF and print at 100% scale.

Control Panels

Background Image

• Import Background Image: load the background image for the button. The studio uses one image at a time.
• Image Size: scale the imported background without changing its proportions too much.
• Stretch Left/Right and Stretch Top/Bottom: reshape the background image when you need it wider, taller, or more cropped to fit the button.
• Left/Right and Up/Down: shift the imported image inside the button after it has been sized and stretched.
• Brightness, Contrast, Saturation, and Exposure: adjust the overall look of the background image.
• Background Color: appears when the imported PNG image has transparency. Use it to place a color behind your transparent PNG.
• Saved Hex Colors: click a saved swatch to reuse a background color you already added.
• Opacity: controls how solid the background color appears behind transparent areas of the PNG.
• Radial Gradient: makes the center of the background lighter and the outer edge darker for a softer fade effect.
• Border: optional inner ring effect for added separation around the design.

Transparent PNG Images

• Transparent PNGs are best when you want the studio to show a color behind parts of the image instead of a solid white box.
• After you upload a transparent PNG, the Background Color section appears automatically.
• Use the color picker or a saved swatch to choose the color behind the transparent parts of the image.
• Use Opacity to make that background color more solid or more see-through.
• Use Radial Gradient if you want the center to stay lighter while the outer edge gets darker.
• If the image is not transparent, those background color controls stay hidden.

Why Hex Colors Matter in Button Design

What Hex Colors Are

Hex colors are six-digit color codes used in digital design. They begin with a # followed by numbers and letters, and each pair controls red, green, and blue values. That makes them a precise way to pick the same color every time.

Why They Matter

Color is part of your brand and your team identity. Hex colors help you stay consistent, match colors more accurately, and keep the same shade looking the same from one design to the next.

The Advantage in Sports

Saving hex colors gives you speed and precision. Instead of recreating a color by eye, you can reuse a team color instantly and keep your button designs repeatable.

Players Name

• Adjust Size, Height, Width, Letter Spacing, and position.
• Choose the font, turn Bold Text or Italic Text on or off, and pick the text color.
• Set Outline Color and Outline Amount (%) when you want outlined name text.
• You can drag the players name directly on the preview canvas.

Jersey Number

• Adjust Size, Height, Width, Letter Spacing, and position.
• Choose the font, turn Bold Text or Italic Text on or off, and pick the jersey color.
• Set Jersey Outline Color and Outline Amount (%) when you want outlined jersey text.
• You can drag the jersey number directly on the preview canvas.

Tag Line Controls

• Use this section for back-curl text such as a website, phone number, sponsor line, or short message.
• Tag Line Outline is available when you need more contrast.
• The current Color and Outline rows in this section are intentionally limited to black, white, and middle gray.
• Adjust Outline (%), Size, Spacing, and Position to fit the line cleanly around the lower edge.

Feature Finder

• Use Feature Finder when you want to jump to a control instead of cycling through every panel.
• It is especially helpful when you want to move quickly between background, text, roster, export, and other commonly used areas.

Custom Fonts

• You can upload supported font files such as .ttf, .otf, .woff, and .woff2.
• After a custom font loads, it appears in the text font menus and can be reused across the studio.

Preview Behavior

• Drag the players name or jersey number to reposition just that text.
• Drag an open area inside the button to move the overall design placement.
• The dashed guide circles are for on-screen placement only and should not print in the exported PDF.

Roster

See Roster Upload above for CSV format details.

Add Players Manually

• Enter the player name, jersey number, and quantity. Quantity controls how many designs will be exported for that player.
• Click Add Player to add the row.
• You can also press Enter while focused in the manual entry fields.

Edit and Preview Players

• Roster rows can be edited directly in the list.
• Click a roster row to make that player the active preview.
• The exported PDF uses each player quantity to build the print queue.
• You can click Download Roster CSV to save the current roster for later use, including names and jersey numbers you added manually.

Saved Setups

• Use the saved setup controls to store the current design settings under a name you choose.
• Saved setups can help you reuse a team look across multiple rosters without rebuilding the design from scratch.
• You can load a saved setup later, replace an older setup with new settings, or delete a setup you no longer need.

Export

1. In the right panel, choose a size from Select Button Size.
2. Review the Layout Preview below the export button.
3. Click Finalize Design.
4. The app exports a PDF layout sized for the selected button option.

The file is generated from the active roster, including quantities, and laid out automatically on the selected sheet size. For best print accuracy, open the PDF in your preferred PDF viewer and print at 100% scale.

Tips

• Test one player first before exporting a large roster.
• For long names, increase Width or reduce Size.
• Use the layout preview to confirm the selected button size before exporting.
• If the text is close to the edge, drag it inward or reduce the size before export.
• If the background image needs fine adjustment, use the arrow keys after clicking outside text.
• Save a setup before experimenting with a major redesign so you can return to the earlier version quickly.