Geometric Poster Art Tutorial

Posted on May 14, 2012 by irene.thompson80

Besides the usual pictures and text, many posters use custom made geometric poster art to create classy abstract, modern but highly memorable kinds of layouts. In this tutorial we will teach you how you can use Adobe Illustrator to create geometric lines easily, and then plug them into Adobe Photoshop to get a more edgy and creative poster effect. Do not worry as we will go step by step on this and even if you are a beginner in both applications, you should be able to follow. So let us get started.

1.     Open up adobe illustrator and select a fairly large art board. Do not worry about the specific dimensions as this will not be our main poster design. However, it is best to set something fairly large with a high resolution. Here we are using a letter sized document with a color mode of CMYK and a resolution of 300ppi.

2.     Now, with Illustrator open, draw out four blocks in different colors. Do this of course using the rectangle tool. Hold down the SHIFT key as you create the shapes to make them all perfect squares. Alternatively, you can create one square, and then just duplicate that shape three times by just copy and pasting unto the document (CTR+C then CTRL+V). Use a color palette of your choosing, but make sure all colors are distinct from one another.

3.     Then go to the Brush panel (F5) and click on “New Brush”. In the window that opens, select “New Art Brush”.


4.     Then, on the Art Brush options, click on the “Stroke from bottom to top” option that has the up arrow icon. Also name this art brush if you wish so that you can easily use it again for later.

5.     With the art brush created we can now paint some geometric lines. Use the pen tool to do this.  Just click first on one point of the art board. Then hold down the shift key (to constrain the angle of the line) and click on a point diagonal to the original one. Afterwards, just click on our new art brush in the brushes panel to use the brush as the stroke of the line.

6.     Take note also that when you select the line you created, you can scale the shape to any size you like. You can also adjust the thickness by adjusting the “Stroke” value of the line.

7.     Now, just create a few stripes of this line geometric shapes with varying lengths and stroke sizes as needed.

8.     Now, let us do some curved lines. To do this first, just use the pen tool to create two line segments that are perpendicular to one another like so. Just like before, hold down the shift key to make sure they turn at 45 degrees.

9.     Then go to Effect -> (illustrator effect) Stylize ->Rounded corners.

10.  One the round corners window appears, change the radius value to the appropriate level. This depends on how rounded you want your lines to be when they turn a corner, as well as the size of your design of course. To make sure you get all the color stripe lines though to curve or have rounded corners, increase the values as necessary. In this example, we used 140pt, but you can of course increase or decrease this depending on how your line looks. (click on the preview checkbox to see if the Radius is indeed okay.

11.  Now, with that, you should be able to create curved lines and straight lines smoothly with varying sizes. Just play around and get the geometric design that you want with these color stripes.

12.  Once you are done composing your geometric lines, press CTRL+A to select them all. Then open up your Adobe Photoshop so that we can paste them. You can flex your creativity in creating these geometric lines and the colors you use to suit your taste and your medium. You may have to adjust certain aspects of your main design element when designing for catalogs, flyers or business cards, for instance.

13.  Now, in your Photoshop document, (before you paste the lines) make sure that you setup your new document correctly. Use the actual poster dimensions that your poster printer needs. Also make sure that you sent the resolution to a high value of 300ppi.

14.  Once in Adobe Photoshop, just paste in your color stripes by pressing CTRL+V. Your stripes will be pasted as a vector smart object all together. Make sure you scale all the stripes accordingly by holding the SHIFT key and enlarging or reducing the size of the vector shape layer.

15.  Now we are ready to add accents to our lines and really build up our poster design. The first step is to change the background color from white to something that matches our poster theme. Here in this example, we used a lighter shade of the Light yellow color in our stripe to get an almost cream like hue.

16.  Now, create a new layer on top of our color stripes by pressing CTRL+SHIFT+N. Using a large and soft splatter/spray paint brush, paint out some spray brushes in your stripes and parts of your background. Then set the blend mode of this new layer to Multiply, and reduce its opacity to 40%.

17.  Next, create a new layer again. This time use the gradient tool to add a light to dark gradient on top of all other layers. Do not worry about it covering the design, this will change a bit later. It is best to use a lighter version of your lightest color stripe, and then to just darken that hue for the darker part of the gradient.

18.  Then change the blend mode of the gradient layer to “Color Burn” to bring out the colors once again with some nice accents from our gradient.

19.  Now, Select the stripes layer by holding down the CTRL key and then clicking on its thumbnail image in the layers panel. Then, Select the layer with the spray paint or splatter brushes. Duplicate this by pressing CTRL+J.

20.  Select the duplicate layer and create a layer mask. Then, using a black color of the brush you used for the spray paint, brush in the middle areas of the stripes. This effect gives us a tonal quality making the edges of the stripes have darker spray paints, while the middle ones of lighter spray paints.

21.  Great! Once now we should have a nice textured appearance to our lines with some dynamic coloring. The next step is to add shadows. For our design, the important areas to put shadows in are the areas where one of the stripes overlaps another. To add shadows, simply duplicate our stripes layer, and then use the polygonal lasso tool to select a part of the top overlapping layer. Then press CTRL+SHIFT+I to invert the selection. Use a soft black brush with reduced opacity to add the shadow.

22.  If you accidentally added some shadow brushes outside where the shadows are supposed to be do not worry. Just use the polygonal lasso tool again and select the area outside the overall. Then use the eraser of course to remove those extra shadows. Repeat this process for all the overlapping areas.

23.  Now, if the area that you want to put shadows on is in a part of the stripe that is curved, you cannot of course use the Polygonal lasso tool. When this happens, the tool for selection would be the Pen Tool. Just select it and click first on the curved area, use the handles to change the curve angle to get your whole path selection right for the curved area. Once done, right click on it and choose “Make selection”. Then afterwards, you can repeat the process above.

24.  If you do make a selection, make sure you set the feather pixel radius to 0px on the window that opens so that you select the exact area that your path defined.

25.  At this point, you should now have a good enough poster design with geometric lines.

26.  As a final background polish, we used heavier spray paint brushes on a new layer below the stripes layer and spray some more random splashes using each of the theme colors. Then we reduced the opacity of this level to 20% to add some extra solid graininess.

27.  Now, you can type in your poster text. Use a fairly thick, crisp sans serif font for this poster design so that it matches the straightforward look of the geometric lines.  Make sure that the text layer is behind the spray pain layers so that they also get some spray paint effects on them.

28.  Then, rotate your text as appropriate to align with the other geometric lines.

29.  Afterward, just add all the other text that you need for your poster design. Try to vary the angles for a more interesting typographic style.

FINAL IMAGE 
Great! Once the text is done, you should have finished your geometric styled color poster. Congratulations!

Hope you enjoy the tutorial! Swing by PrintPlace Tutorials to find more of this.

An introduction to Lab Color mode

Lab Color Mode (LAB) is an alternative colorspace that enables you to manipulate the luminosity and colour of your images more flexibly and powerfully than when working within RGB. In this, my first LAB tutorial, I hope to achieve three things. First, I will provide a brief explanation of the theory and numbers behind LAB (and how to work with these within Photoshop). Second, I will demonstrate the advantages of LAB over RGB – i.e. its ability to dramatically alter colour – both in terms of tone and saturation – more flexibly and with less degradation to your images than when using RGB. Third, using a range of real world examples, I will show you how to use LAB to:

• Dramatically alter the contrast of an image without affecting its colour balance or saturation.
• Increase the saturation of an image with less image noise and cleaner colour separation than when working in RGB.
• Alter the tone and colour balance of your images by adjusting the ‘a’ and ‘b’ channels within LAB.
• Invert specific colours and colour ranges using the Curves tool within LAB.

This tutorial contains 6566 words, 68 illustrative images and screen grabs, and has received 40 comments.

Photoshop files included with this tutorial

Each of our tutorials is based around a series of Photoshop files, at the resolution originally posted on chromasia, and each contains all the original adjustment layers I used to create the final image. The ones that are included in this tutorial, and a brief description of how each one will be used, are listed below – the ‘before’ version on the left, the ‘after’ version on the right. Each of these files can be downloaded after you subscribe.

How to get from this …	to this
			Image 1 In this example I will show you how to use LAB to dramatically increase i) the contrast of an image (using the Lightness channel), and ii) its saturation (by manipulating the ‘a’ and ‘b’ channels).
			Image 2 In this example I show you how to alter the ‘a’ and ‘b’ channels within LAB colour mode to add a unique tone to your images.
			Image 3 In this example I will show you how to use the ‘a’ and ‘b’ Curves to i) partially desaturate an image, and ii) alter its colour balance.
			Image 4 In this example I will show you how to manipulate the ‘a’ and ‘b’ Curves to invert a specific colour range within an image.

What our subscribers have said about this tutorial

"This is a very good tutorial. When compared to Dan Margulis' work on LAB, which is complex and lacks examples, this tutorial stands out on it's own due to it's assisting photoshop users in expanding their creative wings." Jason Hope		"I find this tutorial, and anything related to LAB to be very important. I too have the Dan Margulis book and several online tutorials on LAB, but this was by far the easiest to understand, and the most applicable to photographers. Thanx!"

Learn How To Create An IOS Fabric Style Icon

Still on the hot topic of mobile design, In todays tutorial I’ll be showing you how to create your very own 3D style fabric IOS icon.

What We’ll Be Creating

Resources Used In This Tutorial

Download The IOS Template

Lets get started. Download the IOS icon template from the resource list then open it up in photoshop.

• 
  

Once open in photoshop locate a layer called “EDIT THIIS SMART OBJECT”. Once the layer has been located simply double click it to start editing it.

Creating The Icon

Once you’ve opened the smart object you will be presented with a blue background. From within the layers palette hide the layer group “Blue” then create a new group and call it “Fabric”. At the very top of the layers palette there is a layer called “HIDE ME WHEN DONE” Hold down the “Ctrl” key on the keyboard and left click the thumbnail, doing this will load a selection. Once the selection has been loaded go to “Select > Inverse”, create a new layer inside of the “Fabric” folder then fill (G) the selection with any color.

Now download the fabric texture set and install them inside of photoshop.

• 
  

Once the patterns are installed add the following layer styles to your shape.


You should have something like this.

Turning The Icon 3D

Load a selection around the top layer again, inverse the selection like we did before then fill (G) the selection on a new layer inside of the fabric folder. Select the “Move Tool” (V) then move the shape up by 80 pixels.

Tip

Hold down the shift key whilst the “Move Tool” (V) is selected then push the up arrow key. The shape will move up by 10 pixels with every press.

We now need to make the top half of our icon rounded like it was before. To do this simply load a selection around the top layer then simply press delete.

To your top shape layer add the following layer styles, take note on which pattern I’ve used.


You should have something like this.

Create a new blank layer in between your two layers you currently have, then once again load a selection around the top layer, inverse the selection then fill (G) the selection with the color white #ffffff. Add a layer mask to the black shape then drag a reflected gradient from the middle of the canvas dragging outwards. Once you’ve added the gradient set the opacity to 9%, doing this will just add a bit of lightness to the edge of the icon.

Creating The Fabric Creases

Create a new document 1024 x 1024 with a transparent background. Reset your background and foreground colors to black and white then select the “Gradient Tool” (G) with the following settings.

Once you’ve applied the settings randomly drag numerous gradients over the canvas. You will have a completely different set of wrinkles every time you do this so don’t worry if your image looks nothing like mine.

Now go to “Filter > Stylize > Emboss”.


Select the whole canvas (Ctrl + A) then copy the contents to the clipboard (Ctrl + C). Head back to your original document then paste (Ctrl + V) contents onto your icon. Load a selection around the top layer then hit the delete key to remove the edges from the pasted content.

Set the new layers blend mode to “Linear Light” to blend in creases.

Adding The Logo

Using your desired logo add it to your icon.

Now add the following layer styles to your icon.


You should have something like this.

Select your creases layer then load a selection around your logo shape. Now press “Ctrl + C” then “Shift + Ctrl + V) move the pasted layer to the top of the stack above your logo then set the layer blend mode to “Linear Light”. Basically what we’ve done is added the creases to the logo, now add the following layer style to your logo creases layer.

You should have something like this.

Creating The Stitches

Open the brush window (F5) then select the brush tool (B). Now apply the following settings.


Load a selection around your logo then go to “Window > Paths”. Inside the paths window press the following button.

Now the path has been loaded head back to the layers palette and create a new layer then select the “Pen Tool” (P) with the color black #000000 as your foreground. Right click on your canvas and select “Stroke Path”.


Finally add the following layer styles to the stitches layer to complete the tutorial.



Once your done press “Ctrl + S” to save then close the smart object. You should be left with your icon.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results.

Download Source

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.