How to Create Images with URLs: A Complete Beginner's Guide

Creating images doesn't have to be complicated. With DrawByURL, you can generate beautiful images simply by typing a URL. This guide will walk you through everything you need to know to get started.

What is URL-Based Image Generation?

URL-based image generation is a method of creating images by describing them in a URL path. Instead of using design software like Photoshop or Figma, you type a descriptive URL, and the system generates the image for you.

For example, typing `/circle-color-blue-size-150` creates a blue circle that's 150 pixels in size.

Getting Started

Basic Shapes

The simplest way to create an image is with a basic shape:

- `/circle` - Creates a circle

- `/square` - Creates a square

- `/rectangle` - Creates a rectangle

- `/triangle` - Creates a triangle

- `/star` - Creates a star

Adding Colors

Add colors to your shapes using the `color` attribute:

- `/circle-color-blue` - Blue circle

- `/square-color-red` - Red square

- `/triangle-color-green` - Green triangle

Setting Sizes

Control the size of your shapes:

- `/circle-color-blue-size-150` - 150px circle

- `/square-color-red-size-200` - 200px square

Positioning Elements

Position elements using x and y coordinates:

- `/circle-color-blue-x-400-y-225` - Circle at position (400, 225)

Combining Elements

You can combine multiple elements by separating them with forward slashes:

/background-color-gray/circle-color-white-size-150

This creates a gray background with a white circle on top.

Adding Text

Add text overlays to your images:

/text-value-Hello-World-color-black-x-400-y-225-size-48

Note: Use hyphens in `text-value` to represent spaces.

Query Parameters

Control the canvas size and output format:

- `?width=1200&height=630` - Set canvas dimensions

- `?format=jpeg` - Change output format (png, jpeg, webp)

- `?quality=90` - Set quality for JPEG/WebP

Real-World Examples

Placeholder Image

/background-color-lightgray/circle-color-blue-size-100?width=400&height=400

Status Badge

/circle-color-green-size-80-x-400-y-225/text-value-ONLINE-color-white-x-400-y-225-size-24

Social Media Graphic

/background-gradient-sunset/text-value-Hello-World-color-white-x-400-y-225-size-56?width=1200&height=630

Next Steps

Now that you understand the basics, explore our [documentation](/docs) for more advanced features, or check out our [examples](/examples) to see what's possible.

Conclusion

URL-based image generation is a powerful way to create images programmatically. With DrawByURL, you can generate images for placeholders, badges, social media graphics, and more—all without design software.

Start experimenting with different shapes, colors, and combinations to see what you can create!