: How can I easily produce "Balsamiq style" wireframe mockups in Photoshop? What is the easiest way without vector? I would like to generate something very similar to the image below for CSS development,

What is the easiest way without vector? I would like to generate something very similar to the image below for CSS development, but I'm having a hard time figuring out the easiest way to turn shape lines into pencil or sketched look lines.

I've tried:

Using calligraphy pens, held down the shift key
Hand tracing a straight line but it came up too jagged

I feel like I'm making this unnecessarily hard. Any thoughts are generously and gratefully accepted.

10.01% popularity Vote Up Vote Down

: Photoshop plugin to export visual hints on spacing, margins, width & height Is it possible to produce such design hints (on elements padding, spacing, width, height) automatically in photoshop?

@Gonzalez368

Posted in: #AdobePhotoshop #Plugin

2 Comments

: Moving a shape with a gradient overlay means the color of the shape changes (moving across the overlay) I have quite a simple problem but after much searching I can find how to do it. Basically,

@Gonzalez368

Posted in: #AdobePhotoshop #Blending #Gradient

1 Comments

: How to represent a screenshot on multiple devices without using third-party branding The company I work for wants to release a brochure and they want to demonstrate that our app works on PC

@Gonzalez368

Posted in: #DesignPrinciples #Mockup

4 Comments

: Can you draw a constrained straight line with GIMP's paths tool? In GIMP, you can (in various modes) draw a constrained straight line which will "snap" the line you're drawing to the nearest

@Gonzalez368

Posted in: #Gimp #Path #Vector

2 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Ravi4787994

You could apply a Wave distort to the outline of a shape in order to systematically achieve a similar effect.

Step 1: Prepare your layers

Starting with the straight borders, I'd first convert the rasterized lines to smart objects so that this process can be reversed.

Step 2: Apply a Wave Distort to one of the layers

Filter → Distort → Wave...

You'll have to fiddle with the settings to achieve the desired appearance

Step 3: Repeat as necessary for each layer

You should click Randomize each time so that they don't all follow the same wave distort

Finished Product:

The Amplitude setting within the Wave dialog box will control how far the wave can be from the center of the original straight line. This will help you make it "pixel perfect".

10% popularity Vote Up Vote Down

Feed

: How can I easily produce "Balsamiq style" wireframe mockups in Photoshop? What is the easiest way without vector? I would like to generate something very similar to the image below for CSS development,

More posts by @Gonzalez368

: Photoshop plugin to export visual hints on spacing, margins, width & height Is it possible to produce such design hints (on elements padding, spacing, width, height) automatically in photoshop?

: Moving a shape with a gradient overlay means the color of the shape changes (moving across the overlay) I have quite a simple problem but after much searching I can find how to do it. Basically,

: How to represent a screenshot on multiple devices without using third-party branding The company I work for wants to release a brochure and they want to demonstrate that our app works on PC

: Can you draw a constrained straight line with GIMP's paths tool? In GIMP, you can (in various modes) draw a constrained straight line which will "snap" the line you're drawing to the nearest

Login to post a comment!

1 Comments

Back to top | Use Dark Theme