Once again, we return to the theme of sketches, drawings, and drafts. In November of last year, we thoroughly explored the specifics of architectural themes in web design. At that time, we also looked at the option of creating a blueprint (blue graph paper) , which can be used in design layouts. Let us remind you that the higher the quality of the original image (photograph), the better the final result will be. However, web designers often also use sketch styles.

In appearance, these resemble a pencil drawing, a watercolor, and a hand-drawn blueprint all at once. They're not hard to create in Photoshop, though time-consuming. Sketches are commonly used in web design. These could be individual illustrations or a general style used for various topics—from cartoons to confectionery factories, websites for interior design studios, and so on. Generally speaking, they’re suitable for everything unrelated to technology, as hand-drawn images stylistically don't fit the “hi-tech” vibe. But for all other directions, sketches work great.

For example, smooth transitions from the original image to a sketch with a gradual loss of color.

Or a combination of a colored center and a black-and-white sketch.

We’ll be creating all of this.

Realistic photos and sharp vector graphics have been trending lately, with countless sites using full-screen photos and videos. Yet, among them are some very interesting, bold, and simply stunning sketch-style websites .

Expostroy

A collaborative project between RBC and Expostroy, this website presents interior designs for both women and men. The loading screen initially shows a sketch-style blueprint (similar to our first example), and then the female section is gradually colored in. On the inner pages—only in the male section—you can see a white sketch of a small house on a black background. The entire design is based on a simple two-story country house, the image of which repeats throughout the layout.

Bonifacio

This interior design studio also features a large sketch-style watercolor drawing in the background. The bigger your browser window, the more detail gets loaded in. While it’s not a blueprint in the traditional sense, nor a pure watercolor illustration, it’s definitely a sketch.

Portion

Unusual animated linear sketches were used in the auction house project Portion. Here, you’ll see simplified contour drawings of objects like vases, smartphones, icons, paintings, clocks, and more. While not sketches in the classic sense, these high-quality contour drawings still effectively convey the essence of the object and its key elements.

Tram-house

A familiar design to our blog readers, Tram-house mostly uses photos with various toning effects. Occasionally, you’ll also find individual elements that are neither pure photos nor vector graphics. These include highly filtered sketch-drawings of trams, clocks, and buildings.

WNC

This real estate company created a site for investors and builders using sketch and blueprint elements in the design. As you scroll, you first see a contour drawing, which gradually fills in with color. The rendering has a watercolor effect, which gives the impression of a hand-drawn sketch rather than a photo.

Europejski

The website for the Europejski Hotel in Warsaw is also impressive for its drawn-style design. There's a lot of animation, blending various artistic styles and illustrations. It’s best to experience its beauty firsthand.

Other notable projects include twenty-twenty , Walters Homes , Facade Lab , alexandraelisa , Dom na Khlebnom , Ernest and Celestine , lapierrequitourne , Daydream Designs

Sketches and Draft Blueprints in Photoshop

Creating a sketch or a draft drawing is not particularly difficult. We've already covered in our blog how to work with hand-drawn illustrations, how to highlight contours, and even explored street art , where strong black outlines play a key role. But none of those were sketches in the traditional, commonly accepted sense.

Additionally, when it comes to building drafts, street layouts, or interior planning, a real sketch isn't appropriate, even though the visual effects may be similar. That’s why, in this article, we’ll explore how to practically create a draft or a sketch—you can call it whatever suits you best—since the final style can be edited and transformed from one look to another.

Important: usually in sketches and drafts, only the object itself is present—rarely anything else. So if you want just the house, just the sofa, etc., first cut out the object to a new layer, then apply edits to it.

You'll need a photo of a house, interior, or composition with well-lit objects—ideally not taken in the evening or twilight. However, if the object is to be cut out, even evening photos may work. We chose a daytime image and didn’t cut out the house.

Part 1

Create a new layer and fill it with the background color of your choice. In our case, we chose an almost white shade.

Apply color and lighting correction. After creating and selecting the background color, double-click the layer and in the styles window, add a radial gradient from white at the center to black at the edges. Set the blend mode to Soft Light, which will make the gradient practically invisible. That’s exactly what we want.

Create a duplicate (Ctrl+J) of our house layer (Layer 1) and move it to the top of the layer stack. To desaturate it, go to Image → Adjustments → Desaturate and then adjust the blacks and whites in Levels (Ctrl+L) . We want to brighten the image, so slide the far right marker to the left and watch the clouds fade and the composition brighten. We picked what felt best to us.

Important: the details of the building and objects should not be lost, nor should there be overexposure.

Now create a copy of this layer. Invert the colors using Image → Adjustments → Invert . Set the blend mode to Color Dodge , and the image will turn white. Don't worry—now go to Filter → Other → Minimum , and you’ll immediately see the object’s outlines appear. Choose a radius of 1px and set Preserve to Squareness . The higher the pixel value, the darker and rougher the image will be—not what we need here. While this method alone can often suffice for sketchy looks, we’ll refine it further.

Now merge Layer 1 and Layer 1 Copy . Since they’re consecutive, right-click the top one and select Merge Down . Or select both with Ctrl and choose Merge Layers from the right-click menu. You’ll now have just one Layer 1—set its blend mode to Multiply .

The sketch is mostly done, but let’s refine it. Blueprints typically have vertical and horizontal guides.

Part 2

Vertical Lines

Duplicate the original photo again and place the copy above Layer 1. Rename it to Sketch-1.

Extract the edges using Filter → Stylize → Find Edges , then desaturate it using Desaturate . The dirtiness of the image comes from the saturated colors in the original photo.

Now apply Motion Blur from Filter → Blur . Set the angle to 90 degrees and distance to 1200 pixels. You’ll see sharp vertical lines appear—just like in actual blueprints. You can adjust the value depending on your needs later.

We now have lots of vertical lines, but we need to highlight the guides. Go to Filter → Sharpen → Smart Sharpen to simulate a transition from sharp to soft lines—like a pencil stroke that fades out. Set Effect and Radius to max, and Noise Reduction to around 20%. If it looks too blurry, adjust accordingly.

Now to make the guides more airy: go to Filter Gallery → Sketch → Photocopy and tweak the Detail and Darkness values. We set them low since the main drawing is already dark. Adjust to your preference.

Click OK and change the blending mode to Multiply . The drawings will merge, but the lines might look too intense. Lower the opacity of the line layer —we used 26%. Just enough to make them noticeable without overpowering the sketch.

But lines shouldn’t appear everywhere. Add a black layer mask via Layer → Layer Mask → Hide All to make all lines disappear. Use a soft white brush to paint them back only where needed—like on the house, not on the grass or trees. If the lines appear too faint, just increase the layer opacity .

If there are vertical guides, there should be horizontal ones too.

Duplicate the photo again and place it under Sketch-1. Name the layer Sketch-2. Again, Find Edges → Desaturate , apply Motion Blur , but this time set the angle to 0° to get horizontal lines.

Use the same Smart Sharpen settings and Photocopy filter as before. Keep the Detail and Darkness values the same.

Again, set the blending mode to Multiply and adjust the opacity slider. Add a black layer mask and reveal the horizontal lines only where needed using a soft white brush.

We're almost done, but let's clean up the color noise a bit. At the bottom of the Layers panel, add a new Gradient Map adjustment layer .

It won’t look any different yet. Change its blending mode to Soft Light , and the drawing will appear even brighter. Then adjust the opacity to a medium-low level . As you move the slider, you’ll notice subtle shadow adjustments—just pick what feels right.

Now add a Levels adjustment layer to slightly brighten the drawing by moving the right marker leftward.

Let's clarify something:

Gradient Maps helped emphasize the edges, lines, and boundaries. Levels cleaned up the noise and artifacts caused by desaturation and filter use. It may seem excessive, but the real before-and-after difference is huge.

Merge all layers using Ctrl+Shift+Alt+E and apply Filter → Other → High Pass . This will make the edges pop out. Then set the blend mode to Hard Light .

If you duplicate the top layer and reduce opacity, you’ll get a lightly colored sketch. We also painted over it a bit with a brush to turn it into a hand-drawn sketch-blueprint.

This is the same technique, but with added color. And in the beginning of the article, we showed interior and house examples too.

Final Thoughts

With this simple but meticulous technique, you can turn almost any photo into a sketch illustration. Sure, there are Photoshop Actions online that do this for you—but they’re either pricey or don’t give the flexibility needed for real web design tasks. Sketches for art are one thing, but sketches for websites are another. Doing it manually gives you far more control—especially if you convert each layer into a Smart Object. This way, filters remain editable.

No matter how you choose to create your sketch, with or without color, it will find its place in web design—enhancing the composition, adding character, and giving the theme a vivid, lively touch.