Social Avatar Studio

About this tool

Making an avatar for a new account is rarely about retouching. The trouble is that every service crops differently. WeChat and QQ cut the picture into a circle, Bilibili and Zhihu keep rounded corners, and X, LinkedIn and Instagram each display the result at their own size. The same portrait can lose half a face on one platform and turn small badge text into mush on another. Social Avatar Studio puts the canvas size, crop shape, background, typography, badges, pixel effects and motion on one canvas. Move a slider and the picture is redrawn immediately, while the result card on the right stays with you as the page scrolls. The built-in catalogue covers 52 Chinese and international platforms and records the upload size separately from the display size. These are recommended values collected from public documentation, not rules enforced by the platforms. Every image stays inside the browser on your own machine and is never sent to a server. When the page opens, the WeChat 640 by 640 circular preset is already applied and a sample picture is already drawn, so you can replace it with your own photo straight away. Nothing has to be uploaded before you can see a result, and reloading the page gives you the same starting point every time.

Features

• Platform-aware canvas. Switch between 52 platforms to change the upload size, display size, crop shape and safe area in one click. Width, height, aspect lock, zoom, rotation, horizontal and vertical flip, and fit modes such as cover, contain and tile are all adjustable. When the aspect ratio is locked, editing either dimension updates the other.
• Effects and render pipeline. 108 procedural effects are grouped into eight families: geometric reconstruction, light and colour science, simulated media, digital glitch, halftone printing, depth and blur, edge structure, and artistic styles. A six-stage pipeline adds 32 lighting, grading, texture, blending, masking and framing controls, and the processing order can be changed.
• Badges and typography. 128 built-in badge shapes plus a custom upload, two text lines with size, weight, typeface, outline, shadow, letter spacing and nine-position placement, nine outline shapes, two independent border rings and a drop shadow. Badge text, numbering, rotation, offset and background are separate controls.
• Motion and animated exports. 56 motion presets work with nine timeline controls covering frame count, frame rate, easing, direction, phase, seed, particle trails and blend. Choosing a motion starts a live frame-by-frame preview without pressing play. Exports include GIF, APNG, a ZIP of numbered PNG frames, animated SVG, a sprite sheet, Lottie and CSS keyframes; WebM recording is available when the browser exposes MediaRecorder.
• Styles and reuse. 24 finished styles, a random style generator and palette extraction from the current artwork. Favourites, recent items, share links, undo, redo and reset are stored locally. A share link that would grow too large drops the embedded artwork and tells you so instead of failing silently.
• Exports and batch work. 32 formats cover PNG, JPG, WebP, AVIF, SVG, ICO, BMP, TIFF, TGA, PDF, EPS, PSD, JSON, CSV, TXT, Markdown, HTML, Base64, a 3D LUT and ZIP. Batch export writes 52 platform images, a specification sheet, a size table and the configuration into one archive, and the all-format export packs every format into a single ZIP rather than firing dozens of concurrent downloads.

How to use

1. Click Choose file and pick a PNG, JPG, WebP, GIF, BMP, SVG, AVIF, APNG, ICO or TIFF. You can also drag a picture onto the page, paste one with Ctrl+V, or take a photo with the camera button. SVG files are scanned for scripts before they are loaded.
2. Pick the target platform from the platform wall or the platform dropdown. The canvas size, crop shape and safe area update at once. For a custom size, type your own width and height; with the 1:1 lock on, the two values move together.
3. Work through background, filters, effects, text, badges, borders and the render pipeline. Every slider shows its current value and every change redraws the preview immediately, so there is no Apply button to remember.
4. Choose a motion preset and the preview card begins playing frames. Use the scrub bar to jump to a frame, pause, or change the frame rate, then turn on the safe area and grid to check that faces and text stay inside the crop.
5. Click Export for a single image, the one-click GIF button for an animated file, or All formats for one ZIP. Keep an important design as JSON and restore it later with Import config.

Notes

• Sizes are recommendations. Platforms crop and compress on their own terms. Upload size and display size are stored in separate fields so the distinction stays visible, but the platform is the final authority. A circular crop discards the four corners, so keep faces and text inside the central safe area.
• Encoder support varies. AVIF falls back to PNG and renames the file when the encoder is missing, WebM needs MediaRecorder, and APNG plus animated SVG depend on the player. GIF uses 255 colours plus a transparent index, so smooth gradients may show banding.
• Pictures stay on your machine. Clearing browser data removes favourites, recent items and local designs. Share links that contain a large image drop the artwork and show a notice; use JSON export when you need the complete design including the picture layer.
• Print formats have limits. PDF and EPS embed the current canvas as a bitmap, and SVG is a snapshot with a vector crop path rather than editable layers. Use PSD, Lottie or CSS keyframes for layered work, and check physical dimensions and units in the specification sheet before sending anything to a printer.
• Use artwork you have rights to. Do not put other people’s portraits, trademarks or protected marks into an avatar. The output is a layout preview, and each platform applies its own avatar review and account rules.