Using Illustrations in Web Design and Creating Them in Photoshop

Are you ready to take risks in web design? Most likely, not everyone will confidently say yes. However, there's a type of risk that has gradually become a standard — a trend in modern web design. We call it a “risk” only because it's important not just to experiment and combine elements, but also to understand whether such decisions are appropriate for your website project. We're talking about combining photos and illustrations in a single design.

Photography is commonly used today to give a project a sense of realism, helping to focus a visitor’s attention on topics that matter in everyday life. Illustrations, on the other hand, are typically associated with niche projects and often give off a playful, cartoonish, or even unserious feel.

But web design is the art of innovation and mastery in graphic software. That’s why combining both image types is absolutely possible. Today, we’ll look not only at how web designers are using such combinations, but also at some Photoshop techniques for creating them.

User Interface Accents

Incorporating illustrations into web design is fairly easy when they serve as UI elements. But they don't always have to be hand-drawn or limited to buttons and arrows. They can be high-quality, narrative vector graphics. The example below (www.wittycookie.com) shows how illustrations bring the design to life, with a character representing the company’s services.

Illustrated Logo Imagery

If you love illustration and want to highlight it in your project, consider using an illustrated logo. The first example, madebyfew.com, showcases this well. Illustrations are used throughout the design — as circles, confetti ribbons, smiley faces, and post thumbnails. Since the site promotes a conference and its attendees, such visuals can replace the usual group photos.

Another example, onehappycampernj.org, is more subtle — it uses a textured background with plant motifs. It’s only featured in one section of the homepage, which helps draw attention to that information. We’ve previously covered large collections of textures. You can easily adjust color and transparency in Photoshop.

The Belgian construction company konosair.be also added an illustration over a photo. While other hand-drawn graphics are absent from the site, this single instance on the homepage adds interest and style.

Illustrated Typography

One approach is to overlay handwritten or even animated typography over images or videos (archrival.com). This detail can create a unique, custom look.

A more restrained example is steptoandson.co.uk/about/, where typography is layered as text rather than illustration. But the chosen fonts still create the impression of hand-drawn lettering — almost like calligraphy or stenciling.

Tell a Story

The site mamyfactory.com/fr/ uses illustrations everywhere — and combines them with real photos. This is more complex to pull off. First, you’ll need real photos (e.g., hands knitting), then carefully outline the yarn and stitches in Photoshop with the magnetic lasso and convert the selection into illustration. You may need plugins, drawing skills, or at least a good method for converting photos into sketches.

A beautiful combination of photo and illustration can also be found in discoveryphototours.com/photo-tours/. The design features photo cutouts, illustrated brushstroke titles, stamps, and artistic typography.

A similar approach is used by gili-lankanfushi.com, where the Maldivian photos are decorated with illustrated icons, leaves, and text. The sidebar and footer reinforce this hand-drawn aesthetic.

Illustration Usage Guidelines

Combining illustrations and photographs in one project is a great way to add charm and intrigue. But some rules still apply. Yes, even for mixing pictures and illustrations, there are best practices.

Creating Illustrations in Photoshop

While the “risk” mentioned earlier may not be so scary after all, the question remains — how do you create illustrations easily? You could use royalty-free clipart, or make your own.

The final result can always be enhanced — brighten, darken, tweak contrast or colors. And there are countless illustration styles.

Here’s a quick example of how to create and use your own illustration. Remember, you can vectorize it or simplify it to just outlines. Say you need a handbag or shoe illustration, but can’t find one — just trace it in Photoshop, delete the background, strengthen the lines, and voilà!

Let’s use a kitten as an example.

Open Photoshop, copy the image to a new layer, and duplicate it so you have the background plus two image layers.

Select the top layer and apply Gaussian Blur. Adjust the blur by eye depending on the photo’s detail and contrast. After a few tries, you'll know what works.

Now apply the Blend Mode – Divide to this layer. You’ll get a pencil sketch effect.

Next, copy all visible layers to a new one (Ctrl+Shift+Alt+E) and Desaturate it (Image – Adjustments – Desaturate).

Duplicate this layer and change the blend mode to Linear Burn.

That’s it. You can now lighten dark areas with the Dodge tool. Add more layers for extra definition. Paint over gray spots if needed. It all depends on the image and your creativity.

What now? You can place this new illustration into a template. We used one with kittens and inserted our drawing into a category block. We also added more layers to sharpen the image. Add more kitten illustrations, each in a different pose and style, and you’ll embody the concept of this article. Source: templatemonster.com/ru/demo/47111.html.

You can move the text under the paw, decorate the kitten's background with a page break, refine edges, erase unwanted spots, apply sharpening, or even trace it in Illustrator for vector output. Architecture and faces are often easier to convert this way.

Conclusion

Using both illustrations and photos in a single web design is totally feasible. It can look amazing — but it’s not easy if you don’t already have the needed visuals and need to create them yourself. It's even harder if drawing isn't your strong suit. Still, you can do it — as long as you know what style you're after. For example, like mamyfactory.com/fr/, draw the building by hand, convert the dog photo into line art, and erase anything unnecessary.

Web design is a creative profession that demands time, imagination, love for art, inspiration — and knowledge.