Category Archives: Tutorials

Design a Grungy Minimalistic Poster in Photoshop

In this tutorial we will be making use of simple but very powerful Photoshop tools to create a grungy minimalistic poster, which is so good you might even consider contacting a poster printing company to get a bunch printed! We will be combining triangle shapes, textures and lots of blending modes to create what you see below. Let’s not waste any more time and get started!

Tutorial Outcome

This is what we will be designing – the full poster followed by two close-ups.

Step 1: Setting Up The Document

As with all tutorials, the first thing we need to do is open a new document. Open Photoshop and create a new document (File > New). I’m using a preset size ‘A6′ under ‘International Paper’. I’m using the RGB Color Mode as I don’t plan on printing the poster, however if you are planning on sending the file to press I recommend designing the poster in CMYK.

Step 2: Changing The Background Color

Select a light coffee color (I used #f1f0e4) and fill your background in using the Paint Bucket Tool.

Step 3: Creating Your First Triangle

Make a New Layer and call it ‘Big Triangle’. Pick the Polygon Tool. Change the amount of sides the tool has to three.

Select white as your foreground color and drag out a selection with the tool; it should make a perfect white triangle.

This should have create a new shape layer, right-click on it and select Rasterize Layer. This makes it easier to work with.

Step 4: Rescaling Your Triangle

To scale your triangle up and down, go to Edit > Free Transform or hit the shortcut combination Cmd+E. Whilst holding the shift-key, drag one of the outer corners to the center of the document to make it smaller, vice versa to make it bigger.

Make your triangle smaller, and place it somewhere in the middle of your design.

Step 5: Duplicating Your Triangle

Our poster design is going to be made up of triangles, and therefore we’re going to need a lot of them. The triangle we have just placed is going to be our biggest triangle, so we will only need to scale it down. Select your triangles layer and either go to Layer > Duplicate or drag the layer onto the New Layer icon in your Layers Palette (this also duplicates the later). You should now have two triangles – rename the second triangles layer to ‘T2′; all other triangle layers from now on will be called ‘T3′, ‘T4′ and so on.

Scale your new triangle down, making it overlay your big triangle as seen below.

Step 6: Repeat, Repeat, Repeat

We now need to create lots more triangles. Duplicate the layers, rescale your new triangle, and move its position. Keep at this until you are happy with your composition.

Keep adding…

Try to include some really small triangles to add depth to the final piece…

When you have a document full of triangles of all different sizes, it’s time to move on.

Step 7: Adding Color

It’s time to add some color. Choose a color scheme for your poster – I’m going for a scheme based on this image – in other words, a vintage-style blue. You can paste an image of your choice into Photoshop, select colors from it using the Eyedropper Tool and create a new custom swatch specifically for this poster. If you’re too lazy to do this, check out Color Lovers for some awesome pre-made swatches.

When you have a color scheme sorted, it’s time to start applying different colors to your triangles. The easiest way for you to do this is by selecting a color and clicking on a triangle whilst the Paint Bucket Tool is selected.

Repeat the step over and over until all of your triangles have some form of color. I’ve decided to add a little hint of bright pink in with the blues and greens to spice things up.

After what feels like hours worth of coloring triangles I have finally finished. This is what I ended up with…

Step 7: Playing With Blending Modes

To add much more interest to our design we’re going to make the triangles interact with each other by changing the Blending Modes of each one. Select a triangle (what one you select doesn’t matter) and experiment with the different modes. You can also change the Opacity of some triangles if they’re too vivid.

My pink triangle, for example, is set to Linear Burn.

Carry on applying different Blending Modes to your triangles.

Our poster is beginning to look pretty abstract, yet still fall under the minimalism style because of the very limited amount of shapes.

Step 8: Adding 2-3 More Triangles

Reselect the Polygon Tool and drag out 2 to 3 more triangles on your canvas – make sure they’re all on new layers. Color the triangles with colors that we have already used in our poster.

Right-click on the three new layers and click on Rasterize Layer. Change the Blending Mode of all three layers – use what works best with your poster. From top to bottom, I used: Color Burn with 30% Opacity, Hard Light with 5% Opacity and Normal at 20% Opacity.

Step 9: Blurring

Our poster is quite sharp, so we’re going to add some blur. Put all of our layers (apart from our background layer) into a folder named ‘Triangles’. Duplicate the whole folder by dragging it onto the new layer icon in the layers palette. Select all of the contents within our original folder, right-click and click Merge Layers. With the new combined layer selected, go to Filter > Blur > Gaussian Blur and enter a radius of 20px – hit OK.

Lower the opacity of the blurred layer to 5%. This’ll make the poster a little more dreamy than what it previously was.

Step 10: Applying A Photo Filter

Go to Layer > New Adjustment Layer > Photo Filter. Select a Warming Filter (85) with a density of 30%.

Step 11: Adding Some More Color

Make a new layer and fill it with white, go to Filter > Render > Lighting Effects. Select RGB Lights from the drop-down menu and hit OK.

Go to Filter > Blur > Gaussian Blur and enter a radius of 250px. Set the layers blending mode to Vivid Light with an opacity of 20%.

This just adds a little more color the design, making it more interesting.

Step 12: Adding The Ever-So-Important Texture

Pick one of these textures and insert it at the top of your layers palette. Change the blending mode to Multiply and lower the opacity to 25%.

Repeat the step again with a differente texture.

Step 13: Adding A Border

Make a new layer and hit the Cmd+A combination to select the entire canvas. Go to Edit > Stroke and enter a stroke width of 40px, pick pure white as your color and hit OK. Select the Rectangular Marquee Tool and make a selection at the bottom of your poster – fill it with white on the same layer.

Change the layers blending mode to Soft Light. Make another new layer and select the whole canvas again. Go to Edit > Stroke and enter a stroke width of 15px, once again with white selected. Hit OK.


All done! We now have a pretty awesome abstract poster, made entirely out of triangles and simple blending techniques. Take a look at the final piece below, a long with close-ups and different colored versions.

If you liked this tutorial, please subscribe to the RSS Feed or Email Feed to keep up to date with the latest tutorials and design news. Also, please help promote the post by using the bookmarking buttons below!

Find cool posters or design a poster featuring your own artwork.

Like This Tutorial? Read These!

Go through the testking HH0-120 tutorials and testking 1z0-042 videos to learn how to design a web page using testking 000-101 Photoshop resources.

How to Design the Apple iPad in Photoshop

With the release of the Apple iPad, we all knew it wouldn’t take long for the first tutorial on how to recreate it would appear on the net. In this tutorial, you’ll be learning how to design the Apple iPad in Adobe Photoshop.

We’ll be using various different tools, such as shape tools, gradient tools, different blending mode tools and loads of great techniques. Let’s get started!

Tutorial Outcome

At the end of this tutorial, you should have something that looks like the image at the top of this post.

Step 1

As in any tutorial, we firstly need to create a new document. Open up Photoshop and create a new document by going to File > New. I’m using a Web preset, set to 1280×1024 pixels.

Step 2

Change your Background Layers background color to a dark grey – as we’ll be working with a light grey color to begin with, this just makes it easier. Create a New Layer in your Layers Palette, rename it to ‘iPad Bevel’.

Grab the Rounded Rectangle Tool and change the corner radius to 25px.

Drag a new rectangle out about the same size as the iPad, if you’re going for a realistic look I’d recommend grabbing an image of the iPad from the Apple iPad page, pasting it into the document and drawing the rectangle over it. In fact, you’ll probably find this tutorial a whole lot easier if you have a reference photo of the iPad whilst following each step. Make sure you use either white or a light grey for your rectangle. Hit Cmd+E on your Shape Layer so it merges down into your iPad Bevel layer.

Make another New Layer and call it ‘iPad Screen Border’. Repeat this same step again, this time making the the rectangle a little smaller, be sure to use a dark grey colour (I used #2E3035) so you can see what you’re doing. Place the new rectangle in the middle of the first rectangle you made, making sure each side has an equal gap. Once again, hit Cmd+E to merge the new shape layer down to our iPad Screen Border layer.

Make yet another New Layer and call it ‘iPad Screen’. Repeat the last step again, this time using the regular Rectangle Tool – you can use any colour you wish for this, we’ll be placing it with an image later on. Again, make sure the gaps around the edges are equal. Once done, hit the Cmd+E combination shortcut to merge the shape layer down to our iPad Screen layer.

Step 3

So far we have a very simple shape of the Apple iPad. It’s time to start adding some shadows and realistic effects. Select your iPad Bevel layer, right-click and select Blending Options. Add a Gradient Overlay and an Inner Shadow. The settings I used can be seen below in the screenshots.

Open up the Blending Options for your iPad Screen Border layer. Apply a Gradient Overlay and an Inner Shadow – my settings can be seen below.

Head back to the Apple iPad page and crop the main screen of one of the iPad screenshots out. Paste it into your document and place it in the exact same place as our blue screen.

Right click on the iPad Screen layer and open up the Blending Options menu. Add an Inner Shadow, use the settings in the screenshot below. This doesn’t make too much difference, but all adds to the realistic-ness of the final piece.

Step 4

Our iPad is now starting to look like an actual iPad! It’s time to add some more highlights and shadows. With your bevel layer selected, zoom right into a certain area – I’m starting with the top.

Make a new layer (it should automatically go above your bevel layer) and call it Bevel Highlights. With the new layer selected, select the Brush Tool. Use a small, soft white brush and start brushing around the inner part of the bevel.

Carry on using the white brush all round the iPad’s bevel. This is what I ended up with…

You might be thinking it looks a little, uh.. white? Well, it does! It’s time to add some shadows. Make another new layer above our highlights layer, and call it Bevel Shadows. Select a medium grey (I used #8E8F93) before doing anything else. Whilst holding the Cmd key, click on the thumbnail image of the iPad Bevel layer – this should make a selection of the main shape of our iPad. Start brushing around the outside of the iPad, making sure it is a VERY fine line. You might find this easier using a graphics tablet if you have one!

When you get to the corners of your iPad, make sure you brush over a few times – if you refer to a source photo of the iPad, you’ll see that the corners tend to be darker than the rest of the bevel.

Because we did this using our bare hands, some areas might be a little off. Try neating up any areas that can be, and then apply a very light Guassian Blur – go to Filter > Blur > Gaussian Blur and blur your layer by a radius of 1 pixel. This is my outcome…

Step 5

We’re almost there! It’s time to add the buttons to our iPad. This includes: the center home button, a stand-by button (on top), a lock button (on the right side) and the volume buttons (on the right side).

Create a new layer below our iPad Bevel layer and call it ‘Side Buttons’. Select the Rectangular Marquee Tool and make a small rectangular selection. Line it up with the edge of your iPads screen, and fill it with black. Feather down the top corners of the button using a very small, soft eraser.

Use the same techniques to create the other side buttons (the lock and volume buttons).

Create another new layer above our iPad Screen Border layer and call it ‘Home Button’. Select the Elleptical Marquee Tool – whilst holding the Shift Key, drag out a small circle. Fill it with white and position it in the correct place – you can line the circle up using guides or by placing it directly in between the two bottom icons of our screen and then shifting it down using the cursor keys – because the border is quite small, it’s relatively easy to go by eye.

Right click on your new layer and select Blending Options – add a Gradient Overlay using the settings in the screenshot below.

Select the Rounded Rectangle tool (the one we used at the beginning of the tutorial) and change the radius to 2px. Drag out a small rectangle in the middle of our circle button.

Right click on our new shape layer and click Rasterize Layer. With the Cmd Key held, click on the thumbnail of the new layer – this should, once again, select our new shape. Hit the delete key, and then go to Edit > Stroke. Change the size of your stroke to 1px, and select ‘inside’. Click OK. You should be left with something looking like this…

Step 6

We’ve finished our iPad, but we still have a little more to do. First of all, change the background of your image to white.

Select all of your layers but the background, and place them into a new folder in your layers palette – call the folder ‘iPad’. Duplicate the (full) folder, and rename it to ‘Reflection’. Go to Edit > Transform > Flip Vertical. Move the iPad down to underneath our original.

Unselect all of your layers and folders apart from our reflection folder – right click and select Merge Visible. Check all of our other layers back on. Select the Rectangular Marquee tool and make a selection over the bottom of our reflection iPad. Right-Click and select Feather – insert the value of 30 and hit OK. Hit delete three to five times, and lower the opacity of the layer to 35%.

Make another new layer beneath your iPad folder, and select the Elleptical Marquee tool. Fill it with black.

Go to Filter > Blue > Gaussian Blur and insert the value 4. Hit OK. You should be left with something like this after lowering the opacity to 10%.

Last step..! Make one more layer, and call it ‘White Reflection’. Select the Polygonal Lasso tool and make a triangle shape over one corner of your iPad, fill the selection with white and lower the opacity to 10%. Use the eraser to remove some of the reflection; you should end up with something like this…


All done! Easy, huh? You can use these techniques to make almost any Apple product, so get going! ;) If you liked this tutorial, please leave a comment and help promote it by stumbling, digging and retweeting it.. Thanks! :D

Like this tutorial? You may also like…

Pass your 646-363 exam fast with help of latest 642-524 dumps and 642-373 sample questions prepared by testking.

InDesign Workflow Tips: Improving your Workspace and Working with Master Pages

Covered in this InDesign article/tutorial are some superb tips on how to set-up your Workspace for the fastest possible workflow, and how to work with Master Pages.

Setting up InDesign

So this is your first time using InDesign? Not to worry, I am going to include some bonus tips and tricks in this tutorial. These tips will all be based around Preferences and Workspaces and will allow you to streamline your workflow in InDesign as well as teach you new skills.

When I first used InDesign around twelve months ago I didn’t really know where the tools were located, this was because of the standard workspace called essentials. The title of the workspace “essentials” is also included in all the other Adobe Apps – of course they all have different tools.

Looking at the “Essentials” workspace it has all the tools that you could call the essentials; but for me personally there was a large selection of tools missing. For months I struggled to get the tools I wanted to use and got ever more frustrated with InDesign and even got to the point of using MS Publisher (bad mistake but won’t go into that). Then one day, I noticed Workspaces!

Finally I could find tools I needed in the other workspaces however I often found myself switching in-between workspaces. I accidentally created my first workspace one day even though it was a rename of the workspace Typography. You know how they say “Google is your best friend when you want to know things”? Well it is true for times like those.

Above you will see my InDesign workspace which is very much like one of the workspaces that I have already mentioned called “Typography.” I found that the workspace had most of the tools that I needed so I decided to mod it and added the Preflight Panel and took away the Gradient Panel and the Paragraph Panel (both tools I rarely use).

Step 1 – Setting up a workspace.

To add a panel to the workspace all you need to do is select the Tools/Panels you require. For example I need the Preflight Panel, so I go to Window > Output > Preflight (Option, Shift, Cmd + F) or (Alt, Shift, Ctrl + F). The panel will now appear in your InDesign window. Click the top of the panel and drag to the right of the screen until it appears in the sidebar.

To delete a panel drag it from the right to the centre and click the left hand corner of the panel and poof, it’s gone in a flash! You can now repeat the first step to add or delete tools/panels from the sidebar in InDesign. Once you are happy you can now save the workspace. To do this click the Workspace Title > New Workspace and you will have a box to enter the name of the workspace, then press OK. You have created your very first workspace. This concept works the same in most Adobe applications so try it out in any other applications that you may use.

Step 2 – Setting up a default document.

Setting up a default document will save you plenty of time. All you need to do is open InDesign and go to the Document Setup which is located under File > Document Setup (Option, Cmd + P or Alt, Ctrl + P).

Change the paper to the size that you use the most, for me this would be A4. You can also define the orientation of the page, add a custom size, add bleed and slug to the page (I wouldn’t worry about these at the moment).

Bonus Tip

As long as you don’t have a document open, any changes you make to any of the tools, for example you don’t like the default font, you can change it by switching to the Type Tool and changing the size and font if you wish too.

Step 3 – The Preference Panel

I am not going to go into much detail about this panel because it is very much self explanatory and the only things that I am going to change, which is a personal preference, would be the units that InDesign uses. InDesign uses pica’s as a default which I am not really familiar with whereas millimetres is my chosen increment in InDesign (pixels in Photoshop). To open the preference menu simply press Cmd + K or Ctrl + K on a Windows based PC.

Have a look through the preference panel and change the units and increments. To do this click it in the side bar as so and change the preference.

Now you have a set of custom preferences that should increase your workflow in InDesign. Remember these tips can be used to the same sort of effect in all the other Adobe Applications such as Photoshop and Illustrator.

The Nitty Gritty of Master Pages

What is a Master Page?

A Master Page holds and displays elements that you want to appear on every single page of the document, it’s kind of like a template within a document. Master Pages are extremely helpful when creating a multipage document such as brochures, magazines or newspapers. You can have as many master pages within a document so effectively you could have a master page for a contents page and a standard page which may contain different elements. This allows you to keep things organised in InDesign.

Why Would You Use a Master Page?

I have already mentioned the purpose of Master Pages but I haven’t really explained why they are used. Think of it like this; you have a 100 page brochure for a client to finish up and they want 86 of these pages to have pure content, one for the cover, one for the back of the brochure and eleven advertisement pages. The advertisement pages will contain no specific styling and will display just the advert, so straight away these pages don’t require a master page (unless you want to number the advertisement pages).

The front cover and back cover also don’t have to have a Master Page but the remaining 86 do. The brief may state that these 86 pages need to have the company logo, section name and page number. The other 1 is to be the content page which also needs to include the company logo and section name, but doesn’t need to have page number. If you have a recurring client, keeping master pages stored can save a lot of time for future projects, ultimately earning the designer the same amount of money in a shorter period of time (in other words, a higher hourly wage) – no one can complain at this!

The point that I am trying to get across is that no matter how many times a logo or any other element needs to appear on several pages you don’t have to create extra work by placing the element in the same place as it is in other pages. This could take a lot of time which could be better spent refining the design or even getting the job done on time rather than later than expected.

Bonus Tip

Never send a project off early to a client. It sounds awesome and feels awesome to get a project done earlier than expected but hold fire, soldier! Check through the files again to make sure everything is top-notch and when the deadline looms send it and be on time with the deadline, rather than early. The reason for this is if you get it done early the first time they may expect the next project to be early, too. This happened to me within the first month of my freelancing.

It’s time to create the Master Page

The Brief

I have made up a brief for this project just to make things a little easier for you to follow.

  • 4 pages
  • All pages must include logo
  • Pages must be numbered (except cover)
  • Have a well presented footer with email/web addresses.

This is a very limited brief. The brief doesn’t have to be complex because its a very small brochure to complete.

Step 1 – Create the document

I have created a document ready for an A5 brochure (see the settings in screenshot below).

Click OK and you should now have the document set up and ready to go ahead and start dropping some elements in to place.

Step 2 – Placing Elements into the Document

To place an element into the document either go to File > Place or CMD + D (or Ctrl + D on a Windows based PC). This then brings out a window allowing you to insert a logo. For this tutorial I have created a company name called “InTut Design” and have produced a simple text-based logo purely for this article.

Now we have a logo in place, we need to make it a master element.

Go to the pages panel which is located on the right hand side of InDesign. If you can’t locate it you’ll need to go to Window > Pages. Now you will see this:

As you can see on the pages panel, I have four pages set up and they have the letter “A” in the right hand top corner, this letter corresponds to the master page that it is set up on. At the moment there isn’t a master page but it always defaults to “A”. Now double click on “A-Master”, this brings up two pages, and all you have to do is set up the elements you want to appear.

Now let’s import the company logo into the document on a master page. With “A-Master” double clicked go to File > Place or Cmd + D (Ctrl + D on a Windows based PC) and select the image.

Step 3 – Adding more elements to the document

So you now have your logo in the master page. If you click out of the master page by clicking one of the spreads/pages in the panel you should notice that the logo is on all 4 pages! Now go back into the master page by double clicking “A-Master”. Grab the Type Tool (T) and insert some text for the footer. Don’t worry about numbering the page we will cover that in the following step.

Bonus Tip

You will notice that the logo’s appear differently on different pages. This is because I have facing pages on therefore the right hand side page controls the right hand pages such as the cover and the centre right and the left hand of the screenshot covers the left hand pages and the back cover.

Step 4 – Page Numbering

Our master pages are almost complete, meaning it is almost time to get on with your project and start adding non-master content such as text and images. Before getting on with that however, we need to number our pages and to do so we need to make a new master page called “B-Master”. To create a new master page simply right click on the pages panel and select New Master. Give it a prefix of B – this should be the default anyway, and then click OK. Now you will see an A-Master and a B-Master. So far we have set up the A-Master which is currently set up to all 4 pages. Drag the B-Master from the master page panel to the first page. The reason for this is our brief states that the cover is not to be numbered and the easiest way to do it is make another master page. You should now have something like this. (I have re-placed the logo into the B-Master using Cmd + D (Ctrl + D on Windows based PC).

Next we need to open up the A-Master and insert all the text that is required by the brief. If you look back at the brief it tells us that the Web and Email addresses need to be put on there along with the number of the page. Simply grab the Type Tool and type ‘ /’. Now make another text box, this time with the word ‘page’. To number the pages stay in the text box and go to Type > Insert Special Character > Markers > Current Page Number.


It should insert the letter A. Copy and paste the text and take it to the other page. If you now come out of the master pages you will see that the pages are numbered and start from page two and finish at page four.

Now we have the document set up, what next?

So you should have everything set up and have a blank template to work with. All I have done is added some text to the Front cover and a stock image from Computer Arts Issue 170. On the centre pages I have added some lorem ipsum dummy text to add a back bone to the brochure, and then added a large stock image once again from Computer Arts Issue 170. On the back of the brochure I have just put some basic contact details to add some content to the back.

Now you should have a completed document – if you have a question to ask about this tutorial or about me please feel free to leave a comment, email me at or drop me a line on Twitter.

Thank you for taking the time to read this post and hopefully there will be more from me to come!

Download the free resources including ccna questions to successfully pass sas certification as well as mcsa certification exam.

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Designing your own custom theme for your favorite blogging platform can work wonders. It’ll be unique, admired and something you can be proud of. In this tutorial, Ionut Ciursa will show you how to create a blog layout with subtle gradients, thin lines and good typography.

Step 1 – Setting up the document

Create a new document in Photoshop (Ctrl/Cmd + N) with the dimensions 1920px by 1100px. Then fill the background with the color #dbdbdb using the Paint Bucket Tool (G).

Step 2 – Creating the background of the content

Select the Rectangle Tool (U) and create a rectangle in the middle of your canvas with the width 940px and the color #f8f8f8. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "layout bg."

Step 3 – Creating the header

Create a new group and name it "header." Then select the Rectangle Tool (U) and create a rectangle with the height 15px that goes from the left edge of the canvas to the right edge. Use the color #90999b. Name this layer "top bar."

Step 4

Select the Line Tool (U) and create a line with the weight 1px and the color #848d8f. Put this line at the bottom of the rectangle which you have created at the previous step. Name this layer "1px dark line."

Duplicate this line (Ctrl/Cmd + J), change the color of the new one to #acb7ba and move it one pixel up. Name this layer "1px light line."

Step 5

Select the Rectangle Tool (U) to create a rectangle with the dimensions 940px by 100px using the color #f2f5f5. Double-click on this layer and use the settings from the following image. Name this layer "header bg."

Step 6

Use the Type Tool (T) to write a name for your layout in the header. I have used the font Adobe Garamond Pro and the color #9da6a7. Double-click on your text layer to open the layer style window and use the settings from the following image.

Step 7

Create a new group and name it "subscribe." Download these social media icons and move the rss, email and twitter icons into your document. Put them in the right side of the header and write the name of each icon beneath it using the font Georgia and the color #909b9c.

Step 8 – Creating the navigation bar

Create a new group and name it "navigation bar." Then select the Rectangle Tool (U) and create a rectangle with the height 40px beneath the header using the color #afbbbc. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer "navigation bar."

Step 9

Use the Line Tool (U) to create four lines with the weight 1px – two at the top of the navigation bar and two at the bottom. Use the color #9aa4a6 for the dark lines and #bdcccd for the light ones. Take a look at the following image for reference.

Step 10

Select the Type Tool (T) and write the name for your navigation menu items. Use the font Georgia and the color #ebf3f4.

Step 11 – Creating the featured area

Create a new group and name it "featured." Then select the Rectangle Tool (U) and create a rectangle with the height 180px beneath the navigation bar using the color #ddeaeb.

Step 12

Create two lines with the weight 1px and put them at the bottom of the rectangle which you have created at the previous step. Use the color #becacb for the dark line and #e0f0f1for the light one.

Step 13

Select the Rectangle Tool (U) and create a rectangle with the size 240px by 140px. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Duplicate this rectangle two times (Ctrl/Cmd + J) and arrange them as you see in the image below.

Step 14

Select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a small circle in the right side of the featured area using the color #c3d4d5. Name this layer "right circle", double-click on it and use the settings from the following image.

Step 15

Use the Custom Shape Tool (U) to create an arrow inside the circle with the color #edf6f7. Name this layer "right arrow."

Step 16

Select the "right circle" and "right arrow" layers and drag them over the ‘Create a new layer’ button from the bottom of the Layers palette to duplicate them. With the two new layers selected go to Edit > Transform > Flip Horizontal. Then move them in the left side of the featured area using the Move Tool (V). Change the name of these layers to "left circle" and "left arrow."

Step 17 – Creating the content

Create a new group and name it "content." Then use the Rectangle Tool (U) to create a rectangle with the dimensions 600px by 160px. Then copy the layer style of one of the rectangles from the featured area and paste it to this layer to get the same double stroke effect.

Use the Type Tool (T) to add some text beneath the rectangle. I have used the font Georgia Bold Italic for the headline (#555858) and Helvetica for the block of text (#525757).

Step 18

Create a new rectangle with the dimensions 290px by 100px. Right-click on this layer and select Paste Layer Style to add the double stroke effect. Then select the Type Tool (T) and add some text beneath this rectangle.

Select the two layers and duplicate them three times by dragging them over the ‘Create a new layer’ button from the bottom of the Layers palette. Then arrange the rectangles and the text layers to have four blog posts. Take a look at the following image for reference.

Step 19

Select the Line Tool (U) and create a horizontal line and a vertical one using the color #cccccc, to separate the blog posts.

Step 20

Create a new group and name it "sidebar." Then select the Rectangle Tool (U) and create a rectangle with the width 300px using the color #e7eded. Name this layer "sidebar bg."

Step 21

Use the Line Tool (U) to create two vertical lines in the left side of the sidebar. Use the color #c9cfcf for the dark line and #f3f9f9 for the light one.

Step 22 – Creating a search bar

Select the Rectangle Tool (U) and create a rectangle using the color #f4f7f7. Name this layer "search bar", double-click on it and use the settings from the following image for Stroke. Then use the Type Tool (T) to write something inside your search bar.

Step 23

Use the Type Tool (T) to add some text in your sidebar.

Step 24 – Creating the footer

Create a new group and name it "footer." Then select the Rectangle Tool (U) and create a rectangle with the height 40px using the color #b6bfc0. Name this layer "footer bg", double-click on it and use the settings from the following image for Gradient Overlay.

Step 25

Select the Line Tool (U) and create two horizontal lines at the top of the footer. Use the color #9da5a6 for the dark line and #c5cfd0 for the light one.

Then select the Type Tool (T) and write a copyright statement in your footer using the color #858e8f and the font Georgia.

Final Result

Here is the final result of this tutorial. I hope you enjoyed it. Click on the following image to see the full size layout.

Create a Vector Clip-Art Style Snowman in Illustrator

Create A Vector Clip-Art Style Snowman In Illustrator

With Christmas just around the corner and the days getting colder and colder, we’ll soon be out building snowmen. But before that, lets build our very own vector version!

We’ll be using simple shape tools, the pen tool, the brush tool, the drop-shadow effect and various pathfinder tools in this tutorial, making it great for those in the festive mood and learning their way around the UI of Illustrator.

Step 1

Open up Illustrator and create a new Basic RGB Document. The default settings for this tutorial are fine – I’m using an A4 sized document.

Grab the Ellipse Tool and drag out a circle whilst holding the Shift key down to keep it round. Select the Direct Selection Tool. This tool allows you to select each individual anchor point and move it around to change the shape of the object. Click and drag the anchor point on the left of your circle outwards and downwards a little until you have something that looks like below.

Repeat the process with the bottom, right side and top anchor points. We don’t want to lose the main shape of our circle too much, but everybody knows real snowmen aren’t perfect, so we don’t want our illustrated one to be perfect, either!

Step 2

Repeat the step again but this time making sure the circle is smaller and a little longer.

Once again, repeat the step again, this time even smaller for the head of our snowman.

Step 3

We’ve got the main body shape of our snowman complete. Easy, huh? Now it’s time to add a scarf shape. Select the Pen Tool and draw a shape similar to as you see below.

With the shape still selected, go to Object > Arrange > Send Backward to hide the unwanted area of the scarf shape behind the snowmans head.

Reselect the Pen Tool if you don’t already have it selected and draw a couple of scarf ends as seen in the image below.

With the two shapes still selected, send them back two layers. You can do this by hitting Cmd+[ (or Ctrl+[) twice.

If they don’t look right at first, use the Direct Selection Tool to change the shape of your scarf, and try rotate the scarf. This is what I ended up with:


Step 4

Select the Paint Brush Tool and select the 5pt Angled Brush. Paint a couple of blobs on the snowmans face – these are to be his eyes. Stones are NEVER circle, so I went for a jagged and messy look!

Reselect the Ellipse Tool and drag out a small circle whilst holding the Shift key to keep it round. Remove its stroke if it had one, and changes the foregroud color to Orange.

Using the Direct Selection Tool, drag one anchor point out to the side.

With the orange shape (it’s a carrot incase you hadn’t guessed!) still selected, go to Object > Transform > Shear and enter the settings you see below. This alters the shape of the carrot for us, making it look more three-dimensional with very minimal work!

Step 5

Select all three of your main body shapes (lower, middle and head) by holding the Shift key and clicking. Add a Light Grey (1.5% Black) to White Gradient to the body shapes.

Select the Pen Tool and draw a big black shape as seen below.

Reselect the three main body shapes. Once you have them all selected, go to Edit > Copy and then Edit > Paste in Front. This will duplicate the three body shapes directly in front of our originals. Go to Window > Pathfinder and with the three body shapes still selected hit the Unite icon to merge the shapes together. Go to Object > Arrange > Bring to Front. Remove the fill color and stroke, and with the shape still selected hold the Shift key and select the big black shape. With the Pathfinder window still open, click on the Intersect Icon. You should be left with a cut out of our black shape – you may need to turn it black again!

We want the black shape to be above our main body shapes but below our scarf. Select your three scarf shapes and go to Object > Arrange > Bring to Front. Change the Blending Mode of our black shape to Soft Light.

Step 6

Select the Rectangle Tool and click somewhere on your canvas. Change the measurements to 5mm wide and 150mm long.

With you long rectangle still selected, press Cmd+C and then Cmd+F to duplicate it. Press the enter key and move it horizontally by 5mm.

Repeat this process until you have a long line of black rectangles.

Select the remaining black rectangles and change the foreground color to green.

Select all of your rectangles and group them together by going to Object > Group. Rotate the rectangles so they look something like below:

Select one of the dangly shapes from the scarf. Copy and paste it and move the selection on top of our stripy pattern. Select the scarf shape and the pattern at the same time, and in the Pathfinder window click on Crop. Move the scarf shape back into position.

Repeat the step again to fill the other areas of the scarf with our stripy pattern.

Select the floaty part of the scarf on the right hand side. Go to Effect > Stylize > Drop Shadow and enter the settings seen below.

Zoom right into our scarf and using the Brush Tool paint a small black area as seen below.

Change the Opacity of the shape we just drew to 10%.

Select the main area of our scarf and in the same way as earlier add a drop shadow using the settings seen below.

Select the Brush Tool again and add a few more scriggly lines as we did earlier to other areas of the scarf.

Select all of our new scriggly lines and lower the opacity to 10%.


Step 7

We’re getting ourselves quite a handsome looking Snowman now! Zoom into the Snowmans carrot nose and add a 1px stroke in a slightly darker orange.

With the same orange still in your palette, choose the Pen Tool and start adding some detail to the carrot as see below. Use a 1px stroke with no foreground/fill color.

Select the Ellipse Tool and drag out a black circle whilst holding the Shift key to keep it round. Drag out another circle, this time about a one third of the size and in white, place it on top of the black circle, lower the opacity to about 30% and then group the two shapes together by going to Object > Group.

Open the Brushes Palette by going to Window > Brushes. With you circle shapes still selected, click on the New Brush symbol, and select Pattern Brush. Make sure your brush settings are the same as below.

Select the new brush from the palette, and with the brush tool draw a straight line down the center of our snowman. This should leave you with a nice row of buttons – you may need to position them underneath other objects!

Step 8

Grab the Pen Tool and draw a stick-like shape similar to below for one of his arms.

Repeat the step again for the arm on the other side.

Zoom right in to the end of our arms where they meet with the snowman. Grab the Brush Tool and in a light grey draw a shape similar to below. Position it beneath the arm by going to Object > Arrange > Send Backward.

Repeat the same step on the other side of the Snowman. Lower the Opacity of both of the new shapes to 35%.

Select the two stick arms and add a dark to light brown gradient.

Select the three main shapes of our Snowmans body and change the stroke color to a light grey.

Step 9

Zoom into the scarf and resize it so the top two corners match with the edge of the snowmans head.

Add some stringy bits to the scarf using the pen tool, and we’re done! That’s one Mr.Frosty the Snowman finished! Very simple, but snowmen are!

Vector Snowman Illustration Tutorial


If you liked this tutorial, please help promote it using the buttons below and by adding it to your StumbleUpon account! You can also subscribe to the RSS feed!