Vexel graphics is an art form, and many artists create their work exclusively in this style. Moreover, web designers often try to create vexel images for website decoration. But what exactly is vexel graphics, vexel art, and why is it so popular among web designers? How is it created and where can it be used? We'll try to answer these questions and show examples of vexel graphics in web design.
Some believe that vexel graphics are simply raster images (like photographs) converted to vector. This is a crude and incorrect assumption. Vexel art began evolving in the early 2000s, and only in 2003 did people start calling these works “vexel.” Before that, artists would draw vector shapes over pixel images, though they understood it was something different from pure vector work. At the time, such artworks were rarely used in web design and were mostly appreciated by those who were genuinely interested in digital art.
What is Vexel Graphics
The vexel style (and yes, it's more of a style than a type of file) is a blend of pixel and vector graphics. It’s important to understand that these are the two fundamental types of graphics on a computer. Vexel art combines them—not replacing one with the other, but merging them. It usually involves drawing vector shapes and contours over a raster background to enhance the original or create a new, stylized image. For everyday use, “vexel graphics” is a convenient term, but remember—it’s a drawing style.
Most people know that vector images retain sharpness and clean color boundaries when scaled. We won’t dive too deep into the technical side—just look at the example below.
Raster or pixel-based images, on the other hand, become blurry and pixelated when enlarged. The squares become visible (since all monitors display pixels as squares—even system windows in Windows and macOS). It doesn’t look great, to say the least, but raster graphics are still widely used—for example, in pixel-style design or small icons that won’t need scaling.
Keep in mind: when you save a vector image as PNG, GIF, or JPG, it becomes raster. Its vector properties are lost. Vectors are usually saved in formats like AI or EPS and edited in Illustrator, not Photoshop. Vector files are also quite large, making them impractical for use directly on websites.
Now look at modern websites—many of them are responsive. This means even background images scale when resizing the browser window. Infographics, illustrations, UI elements like ribbons and lines, icons, or buttons—all of these can be (and often are) created in vexel style. Below are examples of how vexel graphics are used in landing page design and sites like nokia.com/en_int/phones/nokia-3310, KIA Academy (after registration), gogoro.com/smartscooter/faster/, and others.
Vexel illustrations involve layering shapes and lines over a pixel-based image. People often confuse them with vectors because of the high quality—but if you zoom in, you’ll see the image degrade like any raster file.
So, to clarify: vexel images look like vectors but are actually raster graphics. They feature gradients, smooth edges, and crisp lines. You create them by drawing overlapping shapes of different colors and tones using the Pen Tool and stacking them in layers. You can also use brushes, airbrushes, pens, pencils, and more. Because raster images lose quality when scaled, vexel graphics are typically created in very high resolution.
Below are some original images. Beautiful, aren’t they? You can use them for e-commerce designs, landing pages, page backgrounds, or info blocks. Try zooming in and see what happens.
Creating a Vexel Image
Let’s look at two ways to create vexel graphics using simple examples in Photoshop.
Say you have a photo you'd like to use on a site—as a design element or background. But it turns out to be a personal photo someone posted online. What can you do? You could trace it into vector format—but that’s time-consuming, even with Illustrator or auto-trace tools. You’d still have to manually adjust paths, outlines, etc. Plus, the resulting file would be large, slowing down your website. And if the image is small, converting it may lower quality even more.
It’s much easier to use the Pen Tool to manually outline every detail of the photo and recreate the image by placing each part on its own layer. Then, by playing with blending modes and layer effects, you can achieve realistic results. Yes, it may take time and many layers, but it depends on your goal. Maybe you want to improve the image of the phone shown above? In that case, auto-tracing likely won’t do the job.
In the example of the girl’s photo, let’s turn her into a vexel illustration. Use the Pen Tool to outline each part of the image, close the path to form a shape, and then fill it with color.
To make it look more realistic, add shapes that represent shadows on the body—under the chin, on the neck, between fingers, and so on.
If you look more closely at the photo, you’ll see shadows from folds on the clothes, many wavy lines. These can be recreated using blending effects and layer distortion. You can also add highlights on glasses, light gradients on the clothing and skin.
Another way to create vexel graphics is by using Posterization. Select the image or a part of it, then go to Image > Adjustments > Posterize. Choose a level that produces simplified color areas that won’t hurt the image's appearance. This makes it easier to work on a raster base while drawing vector-like shapes with the Pen Tool or cleaning up pixel imperfections.
Examples of Vexel Art
A basic example may not look much like a photo, but skilled artists can recreate stunning images. You can save the final work in JPG or PNG format and impress with its quality and relatively small file size.
In some cases, raster photos are enhanced with vector elements—like hair. Since photos are widely used, partial “vexelization” works well to improve image quality.
And here are more examples of vexel graphics. It’s not hard to imagine how this can be used in web design.
Why Use Vexel Graphics at All?
Sometimes, you need to convert vector shapes into raster while keeping the highest quality possible. Also, despite Photoshop’s capabilities, some web designers still use other tools that automatically rasterize vectors when opening files. Why? Because designers use different tools based on their needs and habits—but often to achieve a unique visual style.
Creating vexel images takes effort, depending on your goal. A seemingly small eye image might involve more than 30 Photoshop layers. Still, it’s worth it when you want something visually rich and optimized—especially since landing pages and logos must be high quality yet not resource-heavy and shouldn’t slow the site down.
The key is recognizing when vexel graphics enhance a raster image, making it look vector-like. Partial vexelization can add charm and uniqueness, helping your site’s design stand out. The possible uses for vexel graphics are nearly endless.
Conclusion
Vexel graphics are uncommon and not easy to create for beginners in Photoshop, but they are powerful and give websites a unique appearance. Importantly, you don’t need to create 100% vexel images. You can improve parts of photos, icons, or simple design elements. We’re not saying every web designer should turn a photo of Angelina Jolie or a sofa catalog into a fully traced illustration. On the contrary, adding shapes and contours can enhance the original.
Just take another look at the screenshot from art4web.sk/en/. There, you’ll find a mix of vexel and vector art with various tools at play.
And think about it—if you’re building a landing page or a graphic-heavy site, or you need infographic elements but your source images are flawed, draw vector shapes over raster backgrounds. Use layer effects and blending. The result can be stunning pseudo-vector graphics.
Not every web designer can create pure vector art from scratch. But if you have a raster base, it’s easier and more practical. Web design is art and innovation—a search for ideas that catch the visitor’s eye and lead them to your product, service, or message.