1

I wonder how to achieve this look (website) -- the uneven shapes, edges, strokes and shadows -- or is it even possible in Photoshop?

I couldn't find any similar tutorials or PSDs to learn from probably because I don't know the right keywords search for what I'm looking.

enter image description here enter image description here enter image description here

Improve this question

4 Answers 4

Reset to default
3

A simple way to achieve a rough/torn edge look is to use an actual torn piece of paper as your mask. You can probably find a usable picture easily enough. Alternatively, you can tear a sheet of white paper in half, lay it on a dark or black surface and take a picture yourself.

Open the picture and tweak it as necessary using levels or brushes to make sure the paper is mostly white and the background is mostly black (or a non-white color). Use the magic wand selector on the paper. Tweak tolerance as necessary, but it doesn't need to be perfect - you're going for a rough look anyway - and use that selection as a mask.

To get a more subtly uneven look like the website you're referring to you'll probably want to shrink the mask in the direction perpendicular to the tear.

Here's a result of this method with the mask shrunk to 10% in one direction, and then applied to all 4 edges of a black box:

enter image description here

Keep in mind that you can do something like this with any edge you can find. A piece of paper may be the most obvious choice, but anything from landscape horizons to tolerance cut-offs from natural gradients in the color of the sky will work.

Improve this answer
1
  • This. Using real-world elements will give you much better results than most brush/texture packs as well, as it'll be something wholly original. I'd recommend creating the drawn elements by hand as well. If you have a specific shape in mind and you're not great at doodling from scratch, I'd create the shape in Illustrator, trace it with some markers, and repeat the process above.
    – Chris Langford
    Commented May 28, 2014 at 12:34
2

You answered the question! You achieve this look by: the uneven shapes, edges, strokes and shadows ... and I would add textures, paper cuts, noise, angles etc.

Everything is possible in Photoshop.

Search for: Grunge websites

Improve this answer
1

The 'look' of that site is 'hand drawn'.

The easiest way to achieve that affect is to...draw it. By hand.

Grab some felt tip markers, start drawing. Scan them in and use them in PhotoShop.

Improve this answer
0

The website looks like they used hand-drawed fonts, icons and UI components. You can get a lot of handdrawn fonts & icons online. Select which ones you like and by using some filters and noisy textures within photoshop you can make your design look similar.

Some useful links:

http://devmd.com/r/free-hand-drawn-icon-set-from-wdt

http://handdrawngoods.com/store/jolly-ui-hand-drawn-ui-kit/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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