How to Prepare a Dribbble Shot Before Upload
A strong Dribbble shot starts with the design story, not the export button. Define what the shot should communicate, create a thumbnail-safe composition, export a clean delivery copy, compress carefully, and preview the shot as a viewer before publishing.
When a student designer prepares a portfolio shot for a UI component, the goal is not to show every variation. The goal is to show one clear design idea, keep the key details readable, and describe the work with accurate context.
Step 1: Define what the shot should communicate
Write one sentence about the design idea. Is the shot showing a mobile onboarding screen, landing page hero, logo exploration, icon set, illustration style, motion state, or process crop? This keeps the composition focused.
Step 2: Confirm the work is yours or you have permission to share it
Use work and assets you have rights to publish. If the design includes client material, team work, or licensed assets, confirm what can be shown before turning it into a public portfolio shot.
Step 3: Choose the shot role
Decide whether the shot is UI, brand, illustration, icon, motion, or process. The role determines crop, format, description, and tags. A process shot can show exploration, while a UI shot should keep the interface itself readable.
Step 4: Create a thumbnail-safe composition
Compose the shot so the main design detail stays clear when small. Use a 4:3 planning canvas when it fits the work, keep the focal point away from risky edges, and avoid burying the design under decorative mockup space.
Step 5: Keep key details large enough to read
Enlarge important UI text, icons, product cards, logos, or line work. If the design depends on a tiny caption, move that explanation to the shot description and let the image show the visual decision.
Step 6: Choose PNG, JPG, GIF, or supported motion format based on the content
Use PNG for UI screens, icons, typography, line work, and sharp edges. Use JPG for illustration, photo-style mockups, and rich backgrounds. Use GIF or supported motion formats only when motion improves the explanation and the current uploader accepts the file.
Step 7: Export a clean delivery copy
Keep the source design file unchanged and export a separate delivery copy. A practical 4:3 export such as 1600x1200 can work well when accepted by the current uploader, but always check Dribbble's upload preview.
Step 8: Compress carefully without damaging UI text, gradients, icons, or line work
Compress only after the shot composition is approved. Compare the delivery copy with the source export. If gradients band, shadows flatten, icons soften, or UI borders blur, use gentler compression or a different format.
Step 9: Add a useful description and accurate tags
Describe what the shot shows, what problem the design explores, and which design area it belongs to. Use accurate tags only. A concise description helps viewers understand the design beyond the thumbnail.
Step 10: Preview crop, thumbnail, full shot, and profile context before publishing
Use the upload preview like a viewer. Check the thumbnail crop, full shot detail, profile grid, and description. If the shot only works at full size, revise the crop before publishing.
Pre-upload review table
| Workflow checkpoint | What good looks like | What to fix before upload |
|---|---|---|
| Shot purpose | One clear design idea is visible at small size. | Remove extra screens or decorative elements that hide the idea. |
| Rights check | The work and assets are safe to publish. | Replace material you do not have permission to share. |
| Shot role | UI, brand, illustration, icon, motion, or process role is clear. | Rewrite the description and crop around the actual role. |
| Thumbnail crop | The focal point survives the small preview. | Move key elements inward and enlarge the main detail. |
| Format | PNG, JPG, GIF, or supported motion format matches the content. | Switch format if edges, gradients, or file weight suffer. |
| Compression | Delivery copy is lighter but still crisp. | Re-export if UI text, icons, gradients, or line work degrade. |
| Description and tags | Context and tags describe the work accurately. | Remove broad tags that do not match the shot. |
| Upload preview | Thumbnail, full shot, and profile context all read clearly. | Revise crop and export before publishing. |
When your Dribbble shot export is ready, create a lighter PNG or JPG delivery copy with ConvertiImage, then check the Dribbble shot troubleshooting guide if the preview looks soft or cropped.
Continue through the cluster
Sources checked
This workflow was written from Dribbble and Google quality guidance, then turned into a practical pre-upload checklist. Sources reviewed: Dribbble Community Guidelines, Dribbble API shot image references, Dribbble 800x600 historical update, Google people-first content guidance, and AdSense page readiness guidance.
