Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

pencil lines

I've tried:

  1. Using calligraphy pens, held down the shift key
  2. 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.

share|improve this question
    
1) What do you mean by "pixel perfect"? 2) Are we supposed to ignore the part of the image that is crossed out, or is that part of what you're trying to achieve? –  JohnB Jun 30 '13 at 1:45
    
image to the left is my goal. By pixel perfect, I mean figure out a way for the edges to match up with the overlapping if used over and over in a the CSS border defined as a image. It's a little tricky. –  Charles Jun 30 '13 at 1:56
    
Is there a reason for you wanting to create this in Photoshop instead of using tools that were developed for wireframing, like Balsamiq or Pencil project? –  Yisela Jun 30 '13 at 1:59
    
I'm comfortable in Photoshop regarding basic mockups and designs. I know there's 1000 different choices out there but this one works for me. I'll check out those tools, but I'm trying to mix pencil style with the flat style without these different trends interfering too much. –  Charles Jun 30 '13 at 2:43
    
Or you could buy Balsamiq, which has been specifically designed to do stuff like this. –  gcman105 Jul 14 '13 at 6:48
add comment

1 Answer

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.

Screenshot of step 1

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

FilterDistortWave...

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

Screenshot of Wave Distort menu

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

Screenshot of step 3

Finished Product:

Result:

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".

share|improve this answer
    
This is exactly what I was looking for. Thank you. –  Charles Jun 30 '13 at 2:43
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.