Create AdaptD.com Paper style Lines.

This is a guest post by designer Ryan Downie.

I am going to show you how to use illustrator and Photoshop to create something similar to the retro paper strips as seen on http://adaptd.com .

I noticed that this site had been popping on few design galleries and was featured on Nick La’s http://www.webdesignerwall.com in the post the trends of 2008 (mine is on there too http://www.ryandownie.com). And I really liked the design so I decided to see if I could make something similar.

Please note that this article is not aimed at beginners but towards intermediate/advanced users as I am not going to baby walk you through step by step.

Here is the final image that we will be creating.

1. So open up Adobe illustrator and open a new document. It can be any size that you like. I was going to do 1100px width but I have been told the images can only be 450px wide on here and i didn’t want to take you a new window.

2. Draw six squares all the same size but in different colours. The colours will be the colours that we want the strips to be. We will use these to create art brushes to use.

3. We are going to create an art brush for the red colour. Select the red square and with the brush panel open click on the drop down on the left side of the palette and select new brush, and then select new art brush.

4. Now we have the art brush grab your pen tool and draw where you want your red line to go. Click on the brush that we have just created and turn off the foreground colour. You might have to change the stroke settings to something smaller depending on how big your square was.

5. Repeat the same methods for all the other colours until you have all of them done. Play around with the pen tool to create the lines and also change the arrangement of the lines so that they overlap on themselves.

6. Now we have them all done we need to add some texture to them as they look a little flat. Luck for us that the great people over at http://bittbox.com have some there for us to use freely. Download the Grungy paper 4 version from http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures.

7. Now we need to head over to Photoshop as illustrator is not the correct tool for this job. Copy your lines over in to a new document in Photoshop by anyway that you feel at home with. Also open up the paper texture and add it to the document. We don’t need to resize it because it wont be staying.

8. Ctrl/Command click on the lines layer so that we get some marching ants up and inverse the selection. Ctrl/Command +shift+I and hit the delete key. This will just leave us the paper with the outline of the lines now.

I hope that you have enjoyed my article and that you learnt something new. Please check out my site and blog for more upcoming tutorials and posts.