VectorPaint product cards: expand one reusable layout into a series

English translation of the Chinese original, translated on 2026-10-23. The article body uses automated translation; app descriptions, historical reading notes and video subtitles receive separate editorial checks. Original publication dates, attribution, code and version notes are retained.

When making product information cards, it is easy to leave the previous card's price or specifications in a copy. This article uses VectorPaint for three fictional stationery products, establishing one clear base layout before replacing content and checking every field. Names and prices are examples for practice only.

Prepare a content list for all three cards first

Prepare three rows of information: product name, short description, specifications, and example price. Deliberately make one name longer, such as Everyday Carry Sketchbook, and the other two shorter. Testing the longest content first reveals space shortages earlier.

Create a 720×960 px portrait canvas with the product image above and text below. Establish stable margins on all sides and distinct regions for name, description, and price. Do not decorate a border first and then squeeze specifications into leftover space. Information structure comes before decoration.

Build the first base card

Draw a fictional notebook from simple geometric shapes or insert a product image you have permission to use. Keep it in the upper region with space around it. Separate the image and background so later asset replacement does not move the text.

Create four text objects below for name, description, specifications, and price, using two or three size levels. Make the price prominent if desired, but keep units and currency symbols clear. Descriptions must not require zooming. Finish one card and check whether it accommodates the longest set of information on your list.

Give repeated elements a clear structure

Keep background, product image, name, description, specifications, and price in easily located layers or groups named by purpose. Group visual units that move together, such as a price and its unit, rather than prematurely locking the entire card into one difficult-to-enter group.

Save the base original, then create the other two as independent copies or by reimporting an editable original. Confirm that they remain editable works rather than PNGs imported as templates. The base helps add a fourth product later and restores a shared reference if one layout is accidentally changed.

Replace content in a fixed order

Replace the name first, then description and specifications, and finally price and product image. Check every field against the information list as you finish it rather than working from memory. Copied old wording can remain perfectly plausible, so 'looks fine' easily misses it.

After changing the product image, check its visible size and position. A slender pencil and a square notebook need not have identical bounding widths, but should balance within the same image region. Do not stretch photos to a fixed ratio. Preserve the product's form, even if that leaves different amounts of space in different directions.

Handle long names without disrupting the set's rhythm

Break long names at natural phrase boundaries, increase the name region's height as needed, and move lower fields down together. Decide whether the change should apply to every card to preserve common baselines. Do not simply make the long-name card's text tiny, which makes the rules look inconsistent across the set.

If two lines are still too long, edit the wording while preserving the identifying name and move supplementary information into the description. Keep price and specification regions stable so readers can locate comparable information quickly. Reusing a layout means predictable information positions, not mechanically identical content widths.

Compare the three cards side by side

Export separate previews and compare them at the same displayed size. Inspect subject size, name starting positions, price placement, and bottom margins. If one card feels much heavier, determine whether image area, color, or text length causes it and adjust only the relevant part.

Hide the product images temporarily and inspect the text structure to spot a missing specification or extra description line. Restore the images and check the full cards. A series review must assess both consistency and accuracy. Neatly aligned cards can still contain a wrong number.

Check example information and output versions before publishing

For real products, replace and verify names, specifications, prices, conditions, and images individually. Do not leave practice numbers in a finished card. When prices change, update the original first and reexport every relevant file, avoiding one corrected preview while other formats retain old values.

Include a product abbreviation, dimensions, and version in filenames, such as Sketchbook_Portrait_v02. Keep a separate content list identifying the product on each card. Before sharing, open the actual file you will send and confirm that it is not the base template or an earlier export.

Frequently asked questions

Must every product image be the same size? Containers can match while images preserve natural proportions and adjust for visual weight. Forcing a slender object to the same width as a square one may make it enormous. Thumbnail comparisons are more helpful.

Can I outline the price and update it later? Outlines preserve appearance but make direct number changes inconvenient. Keep an editable-text original and create a separate delivery copy only when stable glyph shapes are needed. Frequently updated prices and specifications should be particularly easy to locate and edit. Reading all three cards against the checklist catches missed replacements better than inspecting the overall layout alone.

Perform a numbers-only check

Put the three previews together, ignore their graphics temporarily, and read each name, specification, and price against the original list. Watch similar digits, units, and decimal points: copy errors often preserve the layout while changing the information. Check again in reverse order, from the third card to the first, to reduce memory-based skimming. Only then review color and space. Content accuracy always needs its own check.