Journal » Tutorials

FREE Illustrator Blend Tool Tutorial

Attitude Design — Thu, 08 Dec 2011 17:06:49 +0000

Welcome to this free Blend Tool tutorial for Adobe Illustrator.

The blend tool is a fantastic tool which is incredibly simple to use but with endless creative possibilities! In a nutshell, the blend tool allows you to blend any shape into another, creating 3D effects and patterns. This tutorial will show you the basic functions of the Blend Tool (W) for you to take away and get creative!

Step One

We have started with a new document and made a locked (cmd + 2) grey background box. Using the Pen Tool (P) we draw two wavy, overlapping lines and give each a different colour. If you like, you can give them different stroke weights and styles and bring your preferred line to the front (shift + cmd + ]).

Step Two

Making sure the two lines are unselected, select the Blend Tool (W) from the tools panel. Then click on the first line and then the second. They will then blend and look something like this:

Step Three

Now you can change the blend by going to Object » Blend » Blend Options…

Here you can select either Specified Steps which allows you to enter the number of times the shape is repeated in the blend of Specified Distance which allows you to enter the desired space between each repetition. In this example we have specified 20 repetitions to create this pattern. Notice how the two colours have blended smoothly. You can now use your Selection Tool (A) to select anchor points and edit the form of the two primary lines.

Other Techniques

Ribbon Effect

The above blend is between two different shapes, but you can blend two of the same shapes to create a ribbon-like effect. Below we used the Pen Tool (P) to create a line, and then duplicated it (shift + alt + drag) then repeated (cmd + D). This allows us to select three colours to blend together. We then can use the Selection Tool (A) to select grouped anchor points to change the ribbon shaped blend.

Curved Blend

Using the Selection Tool (A) and the Pen Tool (P) (Add/Delete/Convert Anchor Tool), you can bend the form of the blend direction. Below we made a blend of a square and a star. We then could use the above tools to ‘bend the blend’:

Align to Path or Page

Finally, when blending shapes, you can choose whether to align to path or align to page. This can be selected in Blend Options:

So there you have it, the basics of the Blend Tool covered! Play around and see what 3D effects you can make. How about blending outlined text to create jazzy, retro typography or adding an outer glow effect to create dazzling neon light designs.

Seven top tips to improve your website navigation

Attitude Design — Tue, 30 Aug 2011 13:30:27 +0000

Hello fellow internet traveler. In years gone by, in the real world, travellers used to use maps, compasses and even the stars in order to navigate from one place to the other. Today, in cyberspace, we use menu-bars.

If you are about to set up a new website, or if you currently own one, you’ll want people to easily be able to browse around the valuable content you have spent hours creating. Below the Attitude Design team, have put their heads together to give you our top seven tips for creating an easy to use navigation menu to help your users get from A to B. Enjoy!

1. Keep it consistent

One of the most important things is not to move your navigation menu bar around. Imagine you are a ships captain being guided to your location using the northern star. Then upon reaching that destination that star moves position in the sky making it impossible for you to easily find your way back. Take that offline example into the online world and you’ll see our point!

Keep a simple “universal” navigation consistently available to the user at all times. Usually the best navigations have very simple grand parent pages in them. These form the top level universal navigation. When a user goes into, or rolls over, these grand parent items then parent pages and child pages will be shown – but the top navigation will always be the same and appear in the same place.

2. Use text links not images

Icons are a very good accompaniment to any navigation system as they help to further explain to the user what each area of the site does. Note we said accompaniment – NOT icons on their own. Why do we say this? Because icons are representative symbols and what might represent one thing to one person might not mean the same thing to another person. Often icons do not work well on their own – they need accompanying text. So if you must use images make them sit alongside your menu links and ensure they are not the menu links themselves.

3. Keep your page menu titles short

Nobody wants to read a long navigational name. Ensure each navigation item only uses one or two words to describe what is within it otherwise users will not bother glancing through them all.

4. Ensure titles are easy to understand

There is nothing worse than standing at a cross roads not knowing quite what road you need to go down and looking at a sign post which does not label what is at the end of each road. You wouldn’t go down each road to find out what’s down there. Likewise with website navigation why would you expect a user to go to a poorly labelled link?

People don’t have time to find out what your amazingly branded “techscope”, “bytes” or “snazz” links do. So – keep it simple – the most common top tier navigational items are: Home, Products, Services, About and Contact. Each item is very descriptive and is one word. Easy Peasy.

5. Only have up to 8 items

When you present too many options to a user they find it hard to make a decision. This is called “Hicks law” (see this wikipedia article for more information). Therefore when it comes to site navigation it’s important to give the user few (but clear) options to get them to make a decision as to what information they want. This helps them filter down to what they want rather than pushing everything at them. This normally allows sites to run the navigation bar horizontally under the header which is far better – as this follows the natural way people read.

6. List items by order of importance

You might not get this one right first time around because without testing it, it is sometimes difficult to know which pages of the site will be most important to users before they do what we want them to do. For example, if we want them to purchase a service, they might want to see examples of that service before they will buy. Therefore they will need to see “case studies” as a priority. But what if our users need to understand what each service is and does before they can understand the case studies? If they do, then a “services” section might be more of a priority to hook people in before we show them the case studies.

By asking yourself the following questions you can help to sort through your navigational items and order them in a user friendly way. If you mark each item out of 10 (10 being “ABSOLUTELY” and 1 being “NOPE”) then the highest scoring items should be placed at the front.

Does the user need to see this item in order to fulfil our site’s objectives?
Will this page help the user to make a decision?
Does this section of the site give our website credibility?
Does this page educate the user to specifically understand what is on offer?

7. Always place ‘Home’ at the front and ‘Contact’ at the end

For most websites it is very important to have a prominent “contact” item in the menu. For most businesses getting interested users to contact them is the number 1 objective of their website. Only when a brand is well known and a site is getting too many contacts to manage would the “contact us” page be dropped in favour of filtering users through to a “support / customer services” area of the website. It is usual practice to put the contact us page at the end of a navigational list and so if a user expects it to be sat there at the end – why remove it?

A link to the home page should also be prominent because this marks the beginning of a normal user journey and helps the user to feel “safe” – that they can always get back to the home page of the site. Home page links are usually placed at the start of menu lists or alternatively the site’s logo will normally link to the home page.

Because both of these things are done by the majority of sites, users have become used to navigating in this way. If people are used to something then it is easy for them and on the internet making things easy for a user is always beneficial!

Conclusion

So – we hope the above tips might help you to make your website a place where sightseers find it easy to get from A to B. Feel free to leave a comment below!

If you need a hand with your next website design why not drop us a line.

How to create real wood effect – Photoshop Tutorial

Attitude Design — Wed, 01 Dec 2010 12:41:09 +0000

Wood is a beautiful thing. Organic, warm and natural. Using it in a design to reflect these qualities can be done to great effect if done well. However in the interests of climate change we do not recommend cutting down real trees. Ohhh no. In this tutorial we give you the basics so that you can create your very own ‘real wood effect’ virtualy, using Adobe Photoshop – completely harmless to real trees! So – grab a coffee, pull up a chair and lets get cracking…

Step 1 / Prep for work

Ok first of all we are going to open a New Document. Open Photoshop and hit ‘Cmd N’ and add in your dimensions – for the sake of this tutorial we are going to use 2560px x 1140px in the RGB colour mode. Hit Ok!

Now we have a nice canvas to work from! The next stage is to prepare the canvas for our planks of wood. To do this we are going to set some guides down which will be really handy later on. To do this we are going to first use the ‘Markquee’ tool to create a template. Select the Markquee tool from the tool pallet (hot key ‘M’). In the top bar select ‘fixed size’ and a width and height of 190px (this is one sixth of the height of our document which means we will end up with 6 planks).

NOTE: be sure you add “px” at the end of the digits instead of the default “mm” else your measurements will be off!

Now we should have a sleeted area of 190px by 190px. All we do now is turn on the rulers (hot key ‘cmd R’), ensure our selected area is placed at the top of the document and then click and drag a ruler our from the top ruler bar. Now move your selected area down so the top sits on the ruler and drag a new ruler down to the bottom of the selection.

Do this until you have reached the bottom of the document. We should now have a document with evenly spaced rules which looks like this:

STEP 2 / Add some background

We are now going to get a base colour for the wooden planks. First double click on the primary colour on the tools palette. You should then see a screen allowing you to select a colour. We have chosen a pale warm brown (hex ref: #bb8d47).

Hit ok. Ensure that “background” is selected as a layer and then hit shift and backspace. This will allow you to see a window which you can now fill the whole of your canvas in with this colour. Incidentally this is a great hotkey to tuck away in your brain as it works with any selection you wish to fill and can save you loads of time.

Your canvas should now be a nice warm brown colour. Now we want to add some highlights to give the canvas a natural look. Create a new layer called “highlights” (you can do this by selecting the “new layer” icon in the bottom right hand corner for the layers window). Select a new colour (we’ve chosen #eac690). Hit hot key “B” for brushes and add a few highlights to the canvas. If necessary change the brush size and hardness by right clicking (if you are on a mac like us then hold down control and click for the same thing!) Also change the colour to white and add a few random white areas. Your canvus should now look like this:

We now go to the top menu and select ‘Filter > Blur > Motion Blur’ and blue this layour in the direction we want the grain to go in. We’ve set our setting to angle: 0 Distance 800px.

You should now have a background which looks something like this:

This is basically now the background for our wood effect.

STEP 3 / Add the grain

Now comes the fun part. We are going to add some grain. To do this create another new layer (call it ‘grain’). Now we are going to user our trusty Marquee tool again. Select it and draw a thin box across the whole canvus like this:

Now select a new colour – this is going to be a darker brown, we’ve selected #79430d. Now press the hot keys shift and backspace to flood fill that area with the dark brown. Then go and draw another think line of a different size and fill that brown. Keep doing this randomly so that you get a variety of horizontal lines.

After you’ve done about 8 you can then use the selection tool (hot key V) to select these and if you click and hold alt the lines will be duplicated in a new layer. You can then quickly pad out the canvus Be sure to merge all the “grain” layers into one. Also if your lines are too thick you can use the Marquee tool to set and area and then hit the hotkeys ‘cmd + T’. This will enable you to “transform” your selections and easily compress the lines.

At the end of this process you should end up with a canvus which looks like this:

STEP 4 / Add some swirl

We are now going to add an organic feel to the grain lines by “liquifying” the grain layer. Ensure that your grain layer is selected and then go to the top menu bar and select ‘Filter > Liquify’ (or hot key SHIFT +CMD + X). This will bring up the ‘liquify’ window.

Use the liquify tools to add some interesting shapes into your grain. Use a large brush to create slight adjustments and then add detail with a smaller brush. Don;t go mad at this stage but try to image the grain of wood and keep things as natural as possible. This is how our liquify looked:

It gave us the following:

STEP 5 / Plank up

Now we are going to add a plank effect suing the guides we set up in step 1. Using the MArquee tool (Hot key M) select the top area between the rulers. Then by holding down shift select a new area leaving the gap between the following ruler space. Do this again until you have 3 areas selected like this:

We are now going to use the Transform function again. Hit hot keys Cmd and T. If you hover over the corners of the selection you’ll see that your curser changes into a rotate icon. Click and rotate these areas like this:

And you should end up with planks like this:

Now we are going to add some ‘noise’ to this layer to give it an authentic feel. Simply go to the top menu and ‘Filter > Noise’. We added 5% of Gaussian. Hit ok.

Now go to your layers palette and make the grain layer have the “darken” effect and change the opacity to 50%. This allows the grain to more naturally blend into the background we created earlier.

This should give you the following:

STEP 6 / Final bits

To finish things off we have added two further layers. One which had a dark brown around the edges of the canvus which gives a lighting effect. For this we used a normal brush with the colour #5d330a. This gave us the following:

We then added another layer called ‘warmth’ which we draw a few areas of colour in the center of the canvas using a bright yellow colour: #eac040. We set this layer to have the “colour burn” effect. This adds some warmth to the piece and gave us the following effect:

So – that should give you the basis of how to create a real wood effect using Photoshop! We hope you have enjoyed this tutorial – be sure to leave a comment and let us know how you get on. If you have any examples of where you have used this tutorial feel free to post a link! Happy crafting!

5 CSS3/HTML5 tricks to make your website run smoother

Attitude Design — Thu, 02 Sep 2010 10:00:53 +0000

Ladies and Gents – a geeky post for all those who like to dabble in a bit of code now and again! In this post we give 5 cutting edge CSS3/HTML5 tips that really help to speed up your websites but still enable them to look great!

When you create a site one of the major things which help to make it look modern and give a good user experience is Javascript or jQuery. These languages allow design elements to do things like glow, fade and move. While these languages do make your site look amazing, it does mean that there is one hefty file for each viewer to download. Google now looks at site loading speeds so we should try to find alternative ways in which to make our sites load quicker – but still look as slick.

Below are 5 CSS tricks that cut down loading time, as there is no need for images or javascript libraries-just CSS. These techniques use HTML5/CSS3 which is currently supported only by the most recent releases of most browsers (IE 8, Firefox 3.6, Safari 5 and Chrome 5) the latest versions of these will used by the majority of internet users within a year. Earlier browsers which don’t support these techniques will simply not display them and this code degrades gracefully not effecting the user experience. So – lets be forward thinking folks – this is a taste of the future…

Tip 1 / Text Shadow

Some of you may have noticed that the links on Attitude have a faint shadow on them, yet no javascript is needed for this, just a little bit of CSS:

a { text-shadow: 1px 1px 1px #FFF; }

What the above code does is apply some text shadow to the text, here is how it works:

Tip 2 / Box Shadows

If you attempted to add a text shadow effect to a box in the way in which we added a shadow to the text in Tip 1, you will find it does not work. But thanks to ‘box-shadow’ it is possible – meaning no more PNG image shadows, just pure and simple CSS! This is how it works:

.shadow {
	-webkit-box-shadow: 2px 2px 3px rgb(255,0,0);
	-moz-box-shadow: 2px 2px 3px rgb(255,0,0);
	box-shadow: 2px 2px 3px rgb(255,0,0);
}

What the above code would do, is add a shadow on an element with the class shadow. This shadow would be red and 2px by 2px:

Tip 3 / Transitions

It is possible using CSS to create transitions of effects, for example when you hover over a link it changes from blue to red. Wouldn’t it be awesome if it faded into red? Well with CSS, that is possible!

a { transition: all 0.15s linear; -webkit-transition: all 0.15s linear; }
a:hover { color: rgb(255,0,0); }

What the above code would do is make the text change to red over a period of 0.15 of a second:

That last bit, the linear, could confuse you. Have a look at the W3 specifications page about it. You’ll see how you can choose how the element loads in – for example one option is ease-in which means it would start of slow, then get faster until it gets to the end. I have chosen linear meaning it will not change speed throughout, just take the specified period of time.
This would also work for things rotating (see below).

Tip 4 / Rotating

You all know the scenario, you build a website and then you want the images to be slightly be rotated. You also want the images to be in a CMS and give an administrator the ability to be able to change the image. This can be easy for the hardened coder with some ImageMagick/GD skills, but what if you could do it in CSS? Well you can:

.rotated {
	transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	-webkit-transform: rotate(9deg);
}

What the above code would do, is on any element with the class rotated would be rotated clockwise by 9 degrees:

It is a pretty simple syntax, but this, coupled with the transition effect and shadow could be an amazing website, for example see this Demo by the tutorial website 24 Ways. It blows us away!

Tip 5 / Word-Wrap

So you design a perfectly working website, then you find a reallylongwordinyourcontentwhichbreaksyourlayout. Wouldn’t it be brilliant if you could somehow separate the words, without some complicated PHP scripting, allowing for font-sizes and types etc. Well thanks to CSS3, it is now possible:

.smallbox { word-wrap: break-word; }

In CSS3 there is a new property, word-wrap which is normally set to normal but can be set to break-word which would make a box separate long words:

We hope this list of 5 CSS tricks will help you develop your websites more effectively. Leave a comment or share your own tips below!

Adding bleed in Adobe InDesign

Attitude Design — Fri, 27 Aug 2010 13:46:20 +0000

This short tutorial is a handy tip for all those InDesign users out there.

What is “Bleed”?

“Bleed” is basically an area of print which is cropped off when a document it trimmed. It provides a safety area to the sides of a document that allows for small variations in guillotining or positioning. It stops white gaps appearing around the edge on your final print.

Setting up your document

Create a new document in Adobe InDesign (“Command N”). Add your ‘Page Size’, ‘Columns’, ‘Margins’. Don’t hit ‘Ok’ yet! (Note: If you do you can always go back to these options by going to ‘File > Document Setup’)

To the right hand side of this panel hit the “More Options” button:

In this panel you can set the bleed. In most cases you need 3mm. Once this is placed in you will get a handy red border around your document which really helps with positioning and sizing your design elements on your document.

Be sure to place any element which flows right up to the edge of the page into this area so that it will be trimmed.

Exporting for Professional Printing

When you export your document as a high resolution PDF for professional printing, be sure to have included bleed.

To do this go to “File > Export”. Ensure the Format is set to PDF and select the location on your computer you’d like it to be saved to. Select the standard preset of “High Quality Print”. Go to “Marks and Bleeds” and ensure you tick any marks you may need (most printers require crop marks). Also in “Bleed and Slug” area ensure the “Use Document Bleed Settings” is set.

This will then export a PDF with bleed which can be printed by professional printers! We hope you’ve found this Tutorial useful!

For beginners: How to crop an image in Adobe Photoshop

Attitude Design — Wed, 28 Jul 2010 10:52:34 +0000

This tutorial explains how to crop an image to a certain size without the image distorting. This has many different uses – one of which is inserting an image into a specific space on your website. You can have scripts which will automatically crop an image to a certain size. However this does have its problems – the script will generally crop the image so that the centre of the image remains – but this can chop off essential parts of the image around the edge. This tutorial will show you how to manually crop the image so you have control over how the end image looks.

Example: we need an image to fit into a space which is 320 x 235 pixels.

Step 1 / Open her up

Open your image in Photoshop. Here you can find out how large the current image is by selecting ‘Image’ from the menu. In my example, the image is 850 pixels wide and 565 pixels high.

Step 2 / Create new document

Create a new document in Photoshop and set the size of this to the exact size you wish the cropped image to be. In this case 320 pixels wide x 235 pixels high. (For images on the web, sizes are always in pixels and the colour mode should always be RGB – as opposed to CMYK.)

Step 3 / Drag her in

Click back onto your image and select the Move Tool (hot key V). Click and drag your image onto your new Photoshop document. As the image will be much larger than your new document, only a portion of it will be visible.

Step 4 / Transformer

Select Free Transform from Edit on the menu (hot key cmd T). This shows the outline of the image.

You can now adjust the size of the image. Simply hold down the Shift key (at all times), click on a corner of the black outline and drag to the size you require. Keep the Shift key down whilst resizing as this prevents the image from distorting. When the image is closer to the document size you can release the Shift key and move the image around within the document to ensure the right parts of the image are showing. Move the image around by clicking and dragging with your mouse, or by using the arrow keys on your keyboard. Resize and move around until you are happy with the cropped image.

Please note: Once you’ve resized an image to be smaller, you can’t make it larger again as this will cause the image to be blurred/bitty.

Step 6 / Save for web

If your image is to be placed onto the web, save it as follows.

You now have a brilliantly cropped image!

Please note: this image has been purchased from istockphoto. If you wish to use it please purchase it from their website.

Related posts:
7 Things You Didn’t Know About Adobe Photoshop

How to create real wood effect – Photoshop Tutorial

Adding bleed in Adobe InDesign

Adobe Illustrator Tutorial: Envelope Distort

Attitude Design — Thu, 22 Apr 2010 12:13:03 +0000

People have been crying out for more tutorials from us. The truth is we have been so busy working for our clients that finding time for members of the team to write tutorials is tough. However this time we’ve made the effort and hope our budding designers like this one…

Intro

Ever wanted to wrap some text inside a shape? The way you do it is with Illustrators handy “Envelope Distort” which can produce some very creative and exciting shapes to make your designs that extra bit special! “Tell me more” we hear you say – ok we will…

Step 1 / Shape up

Create the shape you want to eventually fill with text. For this example we produced a shape by using pen tool (Hot Key P). Make sure you join the edges of the shape together so its one continuous path. You can also use standard shapes like rectangles (Hot Key M) or ovals (Hot Key O).

Step 2 / Set the type

Next – create the text you wish to fill the shape. You do this selecting the Type Tool (Hot Key T) and then clicking and draging on your artboard to create a text box. Tap in your text and then formate it using the “Character” Pallet (Hot Keys OPTION +T).

Step 3 / Outline

Now “Outline” your text by selecting it (using the “Selection tool” – Hot key V) and then go to Type > Create Outlines (or hot keys Shift + Command + O).

Step 4 / Reorder & Shape

Make Sure your text is ‘behind’ the shape you want it to fill – Select the object and go to Object > Arrange > Send to back (Hot keys Shift + Command [ ). Also select different colors for your text and main object

Step 5 / Enveloping

Now we should be ready for Envelope Distorting! So simply select the text and the shape you wish for it to be fitted into. Go to Object > Evvelope Distort > Make with top object (or hot keys: alt + command + C) and wham – you have yourself a very cool piece of typography!

Step 6 / Finish it off

To finish off go to Object > Flatten Transparency and hit “ok” – you’ll now find that you can see the bezier curves which will allow you to edit or position the object further if you need to.

Conclusion

So – another cracking effect brought to us via Adobe Illustrator! Leave a comments or example of this effect in action! Enjoy enveloping!

3D prototype mock up in Adobe Illustrator

Attitude Design — Fri, 08 May 2009 12:52:22 +0000

When producing packaging design, how can you tell how your design will look on a product unless you test it?

One way of seeing whether packaging design is effective or not is to create a prototype. This would normally consist of printing the design out and mocking it up – this is costly and expensive to do, and normally only one prototype would be produced. What if prototypes could be mocked up in a fraction of time, be less expensive and messy, and be more environmentally friendly? What if multiple prototypes could be produced to show a client what their products would eventually look like in mass on a shelf?

Welcome to this tutorial which will show you how to use Adobe Illustrators 3D feature to mock up prototypes. For this example we will be mocking up a label for a pill container but the techniques used can work for many things including box packaging.

Step 1 / The Label

Firstly you need to produce your label design. Here is ours below:

To prepare this artwork to be able to be wrapped around a 3D object we need to make it a Symbol. First select the label and outline all the text (hot keys command + shift + O). Then select the artwork using the selection tool (hot key V). Get the Symbols pallet up (Window > Symbols). Drag the artwork into the pallet. A dialog box will appear allowing you to save the artwork as a symbol.

The artwork is now ready to be mapped onto a 3D object.

Step 2 / Preparing your 3D object

Now we need to create the packaging object upon which the label will sit. Use the “Rounded rectangle tool” from the tools pallet (note: by default the rectangle tool will be highlighted – click and hold on this and a menu will expand which will allow you to select the rounded rectangle tool). If you click (don’t click and drag) on your art-board with this tool selected you will find a window will appear giving you the option to define the radius of the rounded corners. You can also select the dimensions you wish to use. Alternatively click and drag on the art-board to create your shapes.

Using this tool create your pill container by drawing the relevant shapes. One you have them use the tools in the “Align” pallet (hotkeys shift + F7) to center, or ‘horizontally align’ them.

We are now going to group these separate shapes and make them one single shape. You do this by using the tools in the “Pathfinder” palette (hotkeys Shift + Command + F9). Select the shapes using the selection tool (hot key V) and then in the “Pathfinder Palette” select the first icon on the left “add to shape area” then click “expand”.

Now we have our basic shape but we need to get this ready for being made “3D”. To do this we need half of this shape. To create this draw a rectangle using the rectangle tool which can be found in the main tool pallet (hot key M). Click and drag on your artboard to produce a shape and position it over half of the pill container shape we have just created. Then select both shapes using the selection tool (hot key V), go back to the “Pathfinder Palette” and select the 2nd option on the left (Subtract from shape area).

We now have a shape, ready to be made “3D”. But before we go onto that step there is one last task to do – we now need to divide our shape to allow us to colour the lid, the label and the main body of the pill box. To do this use the pen tool (hot key P) and draw horizontal lines across the pill container where the label and lid will sit. To use the pen tool click to the left of your shape, on the artboard where you wish to make your first segment – this will create your first “node” – then hold shift and click on the right hand side, this will create your second node. Now hold command and click onto the artboard to deselect the line you have just drawn and repeat the process. By holding down shift you will keep the line exactly at 90 degrees. See the example below:

Now select the lines and the shape using using the selection tool (hot key V) and hit the “divide” option on the “Pathfinder Pallet”. This will divide the shape into sections.

Use the “Direct selection tool” (hot key A) and click and drag over the inner vertical lines. Press the delete or backspace key on your keyboard. You can then go in an colour the different segments as you desire (it is also possible to make them partly transparent if you want – so as to create the illusion of glass). This tidies up the shape and makes it ready to be taken into the third dimension!

3. Bringing it all together into your 3D prototype

Select your shapes using the selection tool (hot key V) and group them (hot keys Command + G). Now go to “Effect > 3D > Revolve”. This will open a window giving you options to make your object 3d. If you press “Preview” you will be able to see what your object looks like in 3D. (If the revolve seems to be inside out ensure that that you select “Right edge”).

When you have obtained the angle of the shape you desire click on the “Map Art” button. This will bring up another window. You will need to find the relevant surface you want your label artwork to be mapped onto. Once you find it select the label symbol from the drop down and position into place (ensure you select the “Shade Artwork” option for a realistic effect). Press ok., then make any rotation amends as may be required and then press ok again.

And there you have it – your own prototype. If you can master this technique you will be able to do it in around 15 minuets – something which might have taken an hour if you were to have printed it, cropped it and stuck onto a real pill container. You can also duplicate the shape and develop examples of how multiple pieces would look together! Enjoy!

7 More Things You Didn’t Know Adobe Illustrator Could Do

Attitude Design — Fri, 30 Jan 2009 11:02:21 +0000

Introduction

After the success of the article we wrote back in 2007 entitled “7 Things You Didn’t Know Adobe Illustrator Could Do” we have now written the sequel – enjoy!

1. Polar Grid

In your tool pallet, click and hold the “line segment tool” and then scroll down and select the “Polar Grid Tool”. This is a very handy tool for creating a variety of shapes and getting to grips with it can save you a lot of time in the long run – so have a play!

Click and drag on your artboard and you’ll see a circular shape appear with concentric and radial lines. If you hold down shift whilst dragging you’ll notice the circle will grow in perfect proportions. If you hold down alt , you’ll also see that the circle will grow from the centre of where you initially clicked.

To get extra options simply click once on the artboard – a window will open allowing you to change the size, the number of concentric dividers and radial dividers. You can also skew the dividers which can achieve some very interesting shapes!

2. Flare Tool

To add that extra sparkle to any illustration the flare tool is invaluable! From the tool pallet, click and hold the “Rectangle Tool” and then scroll down and select the “Flare Tool”. Click and drag on your artboard and you’ll see the complex flare shape appear.

To add an angle to the lens flare, while the flare is selected and ensuring that you still have the flare tool on, hold down alt and click and drag the curser – you can then manually control the flare.

Additional options can be found by clicking once whilst having the Flare Tool selected.

3. Roughen

Have you ever needed to create a shape which doesn’t have smooth edges? To draw one with the pen tool takes alot of time and patience which us designers don’t have alot of!

First of all draw a rectangle (Hot key M). While it is selected go up to the top menu, select Filter > Distort > Roughen. A window will open which will allow you to select how much “roughness” you require on your shape – be sure to select “preview” so you can see the effects of your selections.

4. Shear Tool

It may be a simple tool on its own but you can use this tool to create stunning effects. Let’s start by drawing a star – select the star tool by clicking and holding the rectangle tool on the Tools menu. Draw your star holding down shift to ensure it is drawn as an equilateral shape.

Now on the Tools pallet – click and hold the over the “Scale Tool”, this will show a drop down – select the “Shear Tool”.

With the star shape selected click and drag to “shear” it. Only do it subtly as we are now going to use another technique to create a complicated set of shapes. Illustrator will remember the shear equation we have used – if you now copy the star (Hot Keys Command + C), paste it back in place (Hot Keys Command + F) and then duplicate the shear effect (Command + D) you will get the same shear effect on the newly pasted star. If you do this a few times a very complex set of shapes appear.

To get more options from the Shear tool you can also press return whilst it is selected on the Tool Pallet.

When you have multiple shapes crossing over one another, the ability to play with transparency effects can have some rewarding results. Select the shapes you wish to change and then open the Transparency Pallet (Hot Keys Shift + Option + F10). From here you can obviously change the standard level of the opacity of an object – you can also select different blending options. Have a play to discover different effects. It’s worth noting that different colours respond differently to some of these effects.

5. The Gradient Tool

Create a circle (Hot Key O) holding down shift to make it proportional. Whilst the circle is selected open the Gradient Pallet (Hot Keys Command + F9). Drag into the gradient pallet two colours of your choice from your swatches pallet. The two colours will be blended together within the circle shape.

For flexibility you can also select the Gradient Tool from the Tool Pallet. Once selected click and drag across the circle shape – you will see that the gradient will follow the line drawn by the gradient tool – very handy for getting the gradient you need. Alternatively you can enter a gradients angle into the Gradient Pallet manually.

You can also select between a linear gradient (a straight blend from one side to another) to a radial gradient (a gradient which starts from a point and grows like a radio signal).

You can also add other colours to the gradient as well as defining the middle of the gradient with a percentage.

When using these techniques with a few shapes, stunning effects can be achieved!

6. Expanding Gradients

Another very cool thing you can do with illustrator is expand your gradients so that each colour within the gradient becomes a shape. You can use this technique to create some amazing graphics!

Draw a circle (Hot Key O) and apply a radial gradient to it. Then, simply go to the top menu “Object > Expand” – select the “fill” option (or experiment with the others as they are well worth getting to grips with) and hit ok.

Each area of the gradient will now appear as a separate shape – masked within the original circle. To take off the mask, select the shape and hold down “Command + Option + 7″ – this will expand the mask and its contents and show them as a group – ungroup them (Hot Key Command + Shift + G) and you can then delete the mask.

We now have lots of circles getting smaller and smaller – each containing a gradient – to be able to define each “ring” as a shape select them all, then pull up the Pathfinder Pallet (Hot Keys Shift + Command + F9) and select the “Divide” option. Ungroup the shapes again. This will split the shape up allowing you to then go in and delete and change each “ring” as desired.

7. Live Trace

Ever needed an image cut out in a hurry or wanted to produce a photograph as a vector image? Then check out this nifty tool!

First of all go to the top menu “File > Place” and select an image file to place into your illustrator file. With the image selected go to “Object > Live Trace > Tracing Options”.

This will bring up a window allowing you to play with the tracing settings. To see the effect your changes are having on the image select “preview”. Note: this can take up a lot of processor speed so be sure to save any files you have opened before attempting this! Once you have the look you are after click “Trace”.

Your image will have the appearance of being traced but we are not quite through yet! Now go to the top menu “Object > Expand” – this will outline the image as vector shapes.

Un-group the shapes (Hot Keys shift + Command + G) – You can now go in and edit and change the colours of the image or delete areas accordingly…

A Time To Shine / Illustrator Tutorial

Attitude Design — Tue, 12 Aug 2008 13:14:35 +0000

We haven’t done any tutorials for a while – to be honest, we’ve just been soooo busy with work that we haven’t had a chance. However we do like to give a bit back to the community from time to time and so we hope this tutorial, although a long time coming, may help our fellow designers both professional and amateur. We are going to look at a popular trend of making design elements “shiny” – and in particular, the ‘Opacity Mask’ options in Adobe Illustrator.

1. Shape up / Define Your Area

First of all we need to get some shapes. We will be working with 2 for this tutorial. The first shape is going to be an oval so we will need to select the Ellipse tool from the tools menu (hot key “L”). Click and drag on your art-board until you get the oval you desire.

Tip: If you hold down shift whilst dragging you will get a perfectly proportioned circle, hold down alt and you get the circle growing from the centre of where you initial clicked.

2. Give it some depth / gradients and drop shadows

Lets give it some colour in a gradient. Hit “V” (the hotkey for the selection tool) and select the oval. We will need to make sure that the correct windows are available. Hit F6 for the colour pallet and option F9 for the gradient toolbox. Now a colour from the colour pallet and simply drag it onto the gradient window on-top of an existing colour. For the purposes of achieving a shiny effect in this tutorial you will need these colours to be subtle in their tones.

Now we are going to put our gradient at an angle. We could do this manually via the gradient tool box, but being visual people we normally like to select the gradient tool (hot key “G”), and click and drag the angle of our desired gradient. This gives us complete control over how the gradient looks.

This oval, will form the basis of the object we are going to make ‘shiney’. To give a further depth to it we are going to add a subtle drop shadow. Hit “V” (the hotkey for the selection tool) and select the oval. Now go up to the top menu – select Effect > Stylize > Drop Shadow, and give the object a subtle drop shadow as demonstrated below:

3. Shape up / create your shine shape

Ok, now for our shine shape – this shape gives a “glint”. Select the Ellipse tool again from the tools menu (hot key “L”). Click and drag on your art-board until you get the oval you desire – this one wants to be slightly different from the previous oval we have drawn, it needs to be smaller and less wide in proportions. For example see below:

We now need to duplicate the oval shape we have just drawn. Use the selection tool (Hot key “V”). If you select the oval and while your mouse click is still down hold down the “alt key” and drag – then release the click and “voilà”, you have a duplicate shape. We are now going to increase the size of the new oval slightly. Whilst it is selected, move your cursor over one of the corner nodes and stretch if you hold down shift this will happen proportionally.

We are now going to knock out the larger oval shape from the smaller one. To do this the shape which we want to be deleted needs to be on top. To make sure the shape to be selected is on top, select it using the selection tool (hot key V), and then bring it to the front (option found in top menu, Object > Arrange > Bring to front or by using the hot key, “option ]”. Select both shapes (make sure you have the selection tool selected, click one oval, hold down shift and select the next one.) Go to the pathfinder window (Hotkeys: “shift, option F9″). Select Shape modes > Subtract form shape area (second option along). Now select “Expand”.

This is going to become the “shine” on our original oval. Lets put it in position – select it (yes hot key “V” again!) and drag it into its desired position – also make it white.

4. Behind the mask / Making an opacity mask

Now we have a problem to solve. We want the shine to gradient from white to nothing. Currently, Illustrator doesn’t allow us to add a gradient from white to nothing – so we have to use another technique using whats called an ‘Opacity Mask’. Before we get on to that though we need to add a gradient to the shape. Select the rectangle tool (Hot key M) and draw a rectangle. Give it a gradient of white to black.

Place the gradient rectangle over the “shine” shape we created earlier. We now need to select the area we want to mask out the gradient. Go to outline view (Menu > View > Outline – hot key “Y”) and with the selection tool select the shine shape and the gradient rectangle as below:

After they are selected go back to Preview view (Menu > View > Preview – hot key “Y”) and open up your transparently pallet (shift option F10). At the top on the right hand side there is a little “further options” icopn. When you click it another window will open and you will be able to select “Create Opacity Mask” from a drop down list. This will create your opacity mask.

You may want to “invert” it to get a better effect as below:

5. Conclusion / a time to shine

So thats it basically! You should now have a nice shiny oval. This technique obviously has many applications and can be adapted and used to create some stunning graphics. We have an example of this below:

For more information on how to use Illustrator masks read this article from Adobe.

You should experiment and master these techniques. If you do you will find there is always a time to shine, even if you have a tight deadline! So there we are, if anybody has anything to add – or any questions – please leave a comment below. Remember – there is always time to shine… Enjoy!

How to create a graphic design portfolio

Attitude Design — Fri, 01 Aug 2008 01:28:45 +0000

We often get young designers asking us what we look for in a potential employee and what we would advise them to do to help them get into the design industry. Apart from attitude (obviously!) there is another major factor – their graphic design portfolio. This is essential for both experienced and new designers. The portfolio is a showcase of what an individual can do. It is evidence of what they have to offer. What about qualifications? Well they can be useful – but unless there are examples of the skills of the individual, qualifications are about as useful as the paper they are printed on. The portfolio allows people to see what a designer is all about – and seeing, in most cases, is believing.

So – to all you people wanting to break into the design world, or even to move on up the ladder – this is for you. A few tips on what we would look for from a graphic design portfolio perspective. Firstly we believe that you need to have at least 2 versions of your graphic design portfolio – an online version and an off-line one. We’ve split the following tips into 3 sections – each with 5 tips each. First up, is general tips which apply to both print and web. Next, is tip on an online graphic design portfolio and last, is tips on how to create a print portoflio. Enjoy…

General graphic design portfolio tips

01. Display

How you display your work is almost as important as the work itself. It needs to have space and impact so don’t clutter it or cram it in. Let it breathe!

02. Be selective.

Less is more. Quality not quantity. The better quality the work is, the more likely you will catch somebody’s attention.

03. Does it flow?

The order you place the work in need to be thought about. It needs to flow from one piece to the other – especially if you are going to be presenting it. A natural flow of pieces, contrasting one another, or even complimenting one another helps to keep people interested.

04. Be diverse.

A diverse graphic design portfolio, in our view, is better than a one trick pony. Where possible show that you can work across different industries as well as using different styles to communicate messages.

05. Keep it up to date

There is no good having a portfolio which is ancient. It has a negative effect. Keep things current and upload peices of work just after you have finished them. That way you don’t get a large back-log of work.

Online Portfolio Tips

01. Get on the web

We will always look at somebody’s online portfolio before we even see their printed one. Don’t have an online portfolio? Where have you been? We are in the 21st century! If you are not a coder, then get somebody who is to give you a hand or get a piece of software to help you. For inspiration head over to: http://www.onepagefolios.com/

02. Let the work speak

All you need is something simple. Let the work do the talking. Let it breath and ensure it is large enough for a viewer to see the detail. If you can allow the user to select a piece of work to zoom into it so they can see the fine detail.

03. Clean code

If you are applying for a job related to HTML and CSS make sure the site validates and the code and is clean. Potential employers will always look at the coding of your own site as a reflection of your coding ability! So – do make sure you use the highest standard of coding and best practice techniques.

04. Offer information

We don’t have time to read loads, but a short 200 word description of how the project was produced is always handy – what was the brief? who was the client? Be careful not to let the words distract from the image though. Also maybe add a brief “about me” page – and even a CV in PDF format. You will also need some way for people to get in touch with you.

05. Keep your file sizes down

We have no issue with flash websites but would advise that they are not too heavy. Nobody has time to sit around and wait for half an hour for something that should load in seconds. If you want to show off some heavy animation – make a DVD or put it in an area of your site, rather than making it your site.

Print Graphic Design Portfolio

01. The packaging

Get yourself down to an art shop and pick up a professional looking wallet folder or case. For practice reasons we suggest it should be robust and water proof – nothing like soggy work for making a good impression!

02. Mounting

Mount your work on selected paper. Black is normally a good choice as it sets off the colours in a piece and gives it impact. As well as black paper you could get creative and use coloured paper or tracing paper. However, make sure the paper the work is mounted on doesn’t detract from the work itself. Also ensure work is fixed securely – you don’t wanting it falling out when you open it.

03. The real deal

Although most portfolios look nicer when the work is printed onto single sheets and mounted, it is also important to include actual samples – especially of larger documents that you have had professionally printed. Sometimes its good to keep a small selection inside your portfolio to take out and show people.

04. Tailor your portfolio

With print portfolio’s you normally know who you are going to see before presenting it to them. Therefore it is important to ensure that the work is tailored to that person or company. For example, if you are going to meet somebody interested in brand identity design, make sure your work is focused around this area.

05. Keep it short

Don’t have too much in your print portfolio. On the web, potential clients or employers have the choice to view as many times of your work as they want, as they normally do it at their own pace. Printed portfolios are often presented and so if there is a lot of work, there is a lot of time spent which may not be necessary. Normally 10-15 pieces of work will more than adequately show the person being presented with the work your skill level.

Conclusion

Remember, design is all about audience. When creating your portfolio think about who is going to view it. Any further tips or advise for other designers? Do you have an opinion? Please feel free to leave a comment…

7 Things You Didn’t Know About Adobe Photoshop

Attitude Design — Wed, 22 Aug 2007 12:51:51 +0000

1. Magnetic Lasso / The Quick Way To Cut Out

To get a perfect cut out I would normally use the pen tool (Hot Key: “P”), and manually draw around the subject matter (“subject matter” I sound like a pro… ahem) but today we are going to look at those little bits of Photoshop that don’t really see the light of day and we are going to use the magical and mysterious “Magnetic Lasso Tool”. Simply click and hold your curser over the lasso tool icon and a few lasso options will appear. Select Magnetic lasso, third along.

Now we’re set. Start by selecting the edge of the subject matter (there I go again), and move the curser around its edge, guess what â€“ it does all the tracing for you! As if by magic… It’s not perfect but we’ll deal with the little bits which escape the selection later. Continue around the contour of your desired cut-out and finish up back where you started. The area will automatically be “selected”. This technique is superb for very swift cut outs which may not need to be 100% perfect. For example your cutout might be for a concept or for the web, the only limitation is that the image and the desired cut-out need to have a little contrast.

By the way, in case I forget, the image we are using here is from the free stock library people over at stock.xchange. If you want free stock images, go and check them out. Be sure to read all of their terms and conditions. This picture is no. #840073 taken by Dirk Herrmann.

Ok, so what about those areas which haven’t come out exactly as desired? For example in the image below you will see the shoulder has an area which has been trespassed upon. Well, make sure your subject matter is still selected (the dashed line) go to your paths palette (Window > Paths). Click the little arrow on the top right hand side, this will pull down the “Paths” menu. Now select “Make Work Path”. We now have a vector “path” of the cut out which will appear in the paths palette. We would have a similar looking palette if we had used the pen tool but this way, using the Magnetic Lasso Tool, it means we can do things much swifter.

Ok, now we use the “Direct Selection Tool” (Hot Key: “A”) to select the vector nodes which are reproaching upon the shoulder. Click and drag over them and then hit backspace and they will disappear into oblivion. Now use the pen tool (Hot Key: “P”) to join the shape up again, this time following he contour of the shoulder. You may need to use this technique in a couple of places where the trace has not gone as well as anticipated.

You should now be left with a path which goes all the way around the subject matter and which should have taken you much less time than if you had used the pen tool. Whoopee.

2. Layer Masks / Enable Future Editing

In your “Paths” palette move your cursor over the “Work Path”. Press your “Option” key on your keyboard and click with you mouse. You will find that the path area is now “selected”. Have a look at your layer palette. To make a “Layer Mask” on a layer it cannot be locked so you might need to double click the layer and press ok on the menu to unlock it. Now go to go and create a “Layer Mask” on that layer (Layer > Layer Mask > Reveal Selection). And boom, you should have yourself a layer mask! Below is a before and after:

The benefits of a Layer Mask are quite simple, you can edit the original layer separately from the mask and visa versa. This gives you great flexibility and can save an awful lot of time. But what happens when you are done with all your editing and wish to continue without a mask? Well all you have to do is go to the little arrow on the top right of your layers palette and select “Apply Layer Mask”. This will dispose of the mask leaving you with a very respectable cut-out – see below!

3. Liquify / Smooth Those Edges

The “Liquify” filter tool is a photo-retouchers most prized possession. By mastering this tool you can make subtle but effective tweaks which can make all the difference to an image. Go to the following menu to use it: Filter > Liquify (Hot Key Combination: “Shift Option X”).

We have used the liquify tool to smarten out the clothing and hat a little. Incidentally have you ever had a look at the Filter Gallery in the “Filter” menu dropdown? Check it out as it can be quite handy in helping you find a desired filter quickly.

4. History Snapshot / Go Back In Time

Have you ever found that you go to your history palette only to find that you can’t go back as far as you wanted to? Well you need to start using the “History Snapshot” tool. The basic idea is that at any time you can make a snapshot of your document and jump back there at any time. Be warned though, if you close your document all your snapshots will be lost. This tool is very useful if you are working on an image which requires a lot of manipulation but you’re not too sure how it will turn out. If it turns out badly you can always go back a few stages if you’ve used the snapshoot tool.

So how do you use this snapshot thingy? Go to the “History” palette (Window > History). You will see what looks like a camera icon placed along the bottom of the palette. If you press this you will find that a second area will appear under the depiction of the start of your file. You can name this by double clicking on it.

So make sure you start using this as it can save your skin when you least expect it to! Donations welcome

5. Smudge / Good Hair Day

You may have wondered about the area of hair which we seem to have neglected. The smudge tool can really help in getting a cut-out of a person to look as though they have really stood in front of the backdrop. Hair tends to have an element of transparency and minuet detail which a standard cut out cannot give you. The smudge tool can help in this. For advanced users, we are aware of the “Extract” filter but have found the smudge tool is far swifter and more effective to use.

So how do we use it? Go to the “Tool” palette and click and hold over what is set to default as the blur tool. You will find a set of three options pop out of the side, the last of which is the smudge tool (Hot Key: “R”). Adjust your brush size and click and flick on the hair areas to give the effect of stands of hair. This may take a while to master but its very useful.

You can see how effective this is below:

Whilst you have the smudge tool selected you can also use the “Option” and “Space” key combination to zoom in and the “Alt” and “Space” key combination to zoom out.

6. Distort / into 3D effect

This is a tasty way of adding some zip into a design. We start of with a rectangle. We created this by adding a new layer (turning the others off) and, using the Marquee tool (Hot Key: “M”), to draw a rectangle. Fill this by hitting “Option” and “Return” together.

Now press “Option T”. You will see that some handles appear around the layer. Right click on the layer and a “transform” menu will appear. Select distort. If you put your curser over a handle you will find that you will be able to click and drag it along which “distorts” the object (now there’s a surprise!). See below for our results:

You will be able to do this on the original image as well which we have done to create the 3D Polaroid effect above.

7. Grayscale / with Hue & Saturation

I have known some people to copy a coloured image, open a new file, paste in the coulored image, then go to image > mode > greyscale, then they copy the black and white image back into the original document. That’s an awful lot of work just to make something black and white and this can be achieved very easily by using the “Hue and Saturation” settings.

Make sure the layer you want to be “greyscaled” is selected in your layer palette (or make a selection using the lasso or marquee tool) then go to Image > Adjustment > Hue/Saturation (Hot keys: option U). You will now be faced with the Hue and Saturation settings window. Move the middle “saturation” slider down to -100. Hit ok. Bing bang bong. Black and white area should now appear.

Also have a play with the hue and “colorize” options and get creative with some colour tinting!

Conclusion

So there we are. Chances are there must be something in that lot which could help you out! If anybody has any comments or questions, please be sure to make a comment below…

7 Things You Didn’t Know Adobe Illustrator Could Do

Attitude Design — Mon, 23 Jul 2007 14:32:40 +0000

01. The Blend Tool / Adding Lines Between Lines…

We’ve all seen those fancy cool looking vectors where lots of evenly spaced lines curve around some complicated graphics. It can really help to add movement and interest to a design and its really easy to do. This tool is how you do it.

Draw two lines with the pen tool (Hot key =”P”). Now select the blend tool (Hot key=”W”). If you would like to set some options up (eg. how many lines will appear between the two you have drawn) then press “return”. On nearly all the tools this will bring up an option window where you can play about with settings. When you are ready simply select one of the lines you have drawn with the blend tool and then select the other line.

And… Bing, you should have a blend between the two lines. Enjoy…

02. The Mesh Tool / Adding Shading To A Shape…

Ok this one can get very complicated. Some have been able to create photo realistic images using this technique. However we will just use it on a simple circle. So press “L” for the circle tools and draw yourself a circle, using the shift key to keep it from distorting into an oval shape.

Make sure the circle has a fill in it and that it is selected, then press the “U” key for the mesh tool.

Now make a selection anywhere within the circle and select a different colour. The point which you made the selection will evenly gradient into the outer colours.

You can also use the direct selection tool (Hot key “a”) to select the nodes and change their colours and positions as well. Using these techniques you can create very complex meshes which can add depth and shadow to illustrations or shapes.

03. 3D / Entering The Next Dimension…

Did you think that Illustrator was limited to 2D flat vector shapes? Will it isn’t. Adobe have recently (CS1) introduced a piece of the future into Illustrator which I’m sure will become more and more advanced as time goes on. Ladies and Gents… The 3D effect.

So press “M” and draw yourself a box. When it is selected go to Effect > 3D > Extrude and Bevel. You will now be faced with a configuration window. I’d suggest you select the “preview” option so you can see whats going on.

Have a play with the options and you can easily create simple and effective 3D objects.

If you wanted to flatten this all you have to do is go to Object > Expand Appearance and boom, you will have yourself a flattened 3D object which you can do what you want with…

04. Patterns / Making Fills Interesting…

Ok, create your desired pattern using normal illustrator tools and effects and simply drag it into the swatches pallet.

Next time you draw a shape select your pattern as its fill and bobs your uncle, you have a tiled pattern fill. You can also turn your pattern by using the selection tool (Hot key “v”) to select your object and then by pressing return. This will bring up the “move” options pallet where you can set the angle of a pattern.

05. Symbol Sprayer / Splatter some vector…

Fed up with recreating tiny details with copy and paste? The symbol tool makes little details like this easy as pie.

Make a graphic and select it. Drag it into the symbols pallet.

Now select the symbol sprayer tool (hot key shift s). You will see that it sprayers your symbol onto the artboard. If you wish to add a little interest you can click and hold the symbol sprayer icon on the tool pallet and then select the symbol sizer tool and other symbol related tools.

Tip: Symbols can be made using transparency as well.

06. Blur / Smooth Out The Vector…

What was that? illustrator is too straight edged for you? Well have you seen the “blur” effect?

Make a shape, select it and then simply go to Effect > Blur > Gaussian Blur. You will have a few options relating to the harshness of the blur. Select OK and your vector shape will be blurred. It will retain its blur and vector edit ability, so if you wish to change its shape it will continue to have that effect applied to it. Very handy for adding quick drop shadows or atmosphere.

07. Transparency / Bringing Depth To Overlaying Shapes…

This one has saved me many times. Create a vector shape and duplicate it so that some areas are overlapping (you can do this by using the selection tool â€“ hot key v) and whilst a shape is being moved press the alt key, this will duplicate it. If you want to duplicate the shape in exactly the same way again press option D).

Now to add some interest. Go to the transparency palette. There will be a dropdown menu currently selected at “normal”. Click it and select “multiply”. Notice the difference? Try some of the other transparency options.

If you enjoyed this post, why not have a look at the following:

7 More Things You Didn’t Know Adobe Illustrator Could Do

A Blast From The Past – The Return Of The Favicon

Attitude Design — Mon, 04 Dec 2006 14:05:28 +0000

Favicons, you remember them, the little icons seen next to he URL on browsers such as Safari and Firefox. If you use Internet Explorer then you may have noticed them in your favourites folder. In short, they are tiny icons which help you to identify websites. Heres an example of the Attitude Design favicon:

So why are we drawing your attention to Favicons – well, it was a huge fad about 5 years ago to add a Favicon to any website that came along. Designers loved them and they became the norm. However, over recent years, it seems to us, that this trend has dampened down a little. People are no longer adding them to their websites – even experienced web designers.

“Why”? You may ask “we’re not sure” we reply, “maybe we are just getting lazy, maybe the knowledge of how to add Favicons is being lost in the mists of time – or maybe we are choosing not to spend time on a small and almost insignificant icon but are rather concentrating on other, more important issues”.

If you have the mindset of the first of these reasons – laziness is not a good business reason for not including a favicon! If the second – read on below to find out how to add a Favicon (it really isn’t that hard), if the third, let us say a few words in the Favicons defence – because someone’s got to stick up for them – they’re only small after all (16px x 16px poor things)…

As graphic designers, we see Favicons as very important – especially when considering a brand. The more you can get your logo or colours in front of somebody, the more chance you will have of that person remembering your company. Favicons help to do this. Favicons also help to distinguish a company over their competitors – lets assume we are designing a site for an office suppliers. Our consumers may have a favourites folder containing 3-4 called “Office Supplies” links. When they select this folder – if our website has a Favicon and the competition does not, their eyes will be drawn to our link and therefore we have more of a chance of getting some sales. Also they may recognise the brand colour over the competitors colours and select yours – there is less chance of confusion and a competitor getting a visit their site accidentally. Lastly we would like to add that Favicons are a mark of well thought out design. “The devils in the detail” they say – and so it is.

So ladies and gents, lets put a Favicon in our next website design – you never know, it may increase your chances of success…

How do I add a Favicon?

Its easy, really it is. All you do is open Photoshop – create a new file, about 50px by 50px, then drag in your clients logo and colour it up. Save for web as a gif to your desktop. Now go to chami.com and use their very helpful and free online Favicon service. You choose your picture from your desktop and this website resizes it and – it so you can download it.

Next download the Favicon and then upload it to the root file of your website.

On the pages you wish it to appear add the following code in thesection of the page:

That’s it! Simple – you have no excuses now.

So keep an eye for the return of the Favicon… Any comments most welcome…

The 3 C’s Tutorial – Control, Create & Cutout with the Bezier Curve

Attitude Design — Fri, 12 May 2006 16:30:35 +0000

In design there are 2 ways that we normally store files. One is the bitmap way, where the computer records the colour of pixels and creates a huge grid system. These bitmaps are normally used for photos and realistic images. They need to be at a set resolution otherwise the pixels become noticeable – I’m sure we have all seen and are familiar with this way of storing image data. The other way of course, is the Bezier Curve way. This is stored by mathematical and equations which are calculated between anchor points. The benefits of using this type of image storage is so that an image can be blown up to what ever size and will not become “bitty”. The down side is that it is not a great way to store detailed image data and is therefore normally used for simple graphics such as logos.

In this tutorial we will be looking at how we can use these Bezier Curves to create a simple vector illustration. I am going to take you through a simple “cutout” technique in Adobe Illustrator and show you some of the hot keys and tips that I have picked up. We will be working in Adobe illustrator however any vector software package will do. This is really an introduction to using Bezier Curves but I hope there will be odd bits that even advanced users may find interesting. My aim is to introduce this style to newbies, to develop existing skills and to help design a great piece of artwork that could be used for a logo, or piece of artwork at the end of it.

01. Introduction to Bezier curves – Create and Control

Mr Bezier developed a simple equation in the 1970 which enabled graphics to be stored mathematically. We won’t go into the technicalities (because to be honest I don’t know alot about them but I will point out a simple fact which is that these shapes are created from anchor points. To get a rough outline head down to Sketchpad. My aim is not to give a lesson on maths but to get you using, creating and controlling these curves. Before we go on to the main tutorial I want you to have a play with the “Pen tool” in illustrator. This is the tool we will be using to create vector graphics and I use this on an everyday basis in the design industry.

Open Adobe Illustrator and start a new document. Hit the “P” key which will bring you straight to the pen tool. Have a play. You will soon find that if you click once or twice a shape will start to form. If you click and hold your mouse button down a curve will be made. At this point I just want to make you aware of how illustrator works.

You will see at the bottom of the tools pallet what looks like 2 squares. If you double click on them you will be able to select a colour. The square on the to left indicates the colour which fills the middle of your shape. See below:

The next one indicates the keyline or stoke of your shape. See below:

If you do not want any colour (we will be using in this in a little later), then you can select the white square with a red line through it as below:

So select a colour and have a play. See how you can “close” a shape by joining up the points. This is one I did earlier:

TIP: If you want to move your shape at any time whilst in the pen tool mode select the option key.

As you get used to using it you will need to develop your skills. See if you can create a circle by hand using the pen tool. You will not get it perfect but even to get it close requires skill. I did this in a few moments but I’m used to using illustrator:

TIP: If you need to move one of your anchor points simply hit the “A” key and move it. Remember to go back to the pen tool to continue.

02. Placing an image

Ok so you’ve got a taste of Bezier curves. Now we are going to put your knowledge to use. First find an image that you can cut out. It really doesn’t matter what it is of as long as it is at a decent resolution and you can clearly see the subject. I have chosen my favorite subject – a picture of me (he he!). See below:

Now go to Illustrator and select File> Place. Locate your desired image and place it into illustrator.

03. Layers

Go to your layers palette and add a new layer (third icon along the bottom). Double click each layer and rename them as bellow. Then lock the bottom layer where the image is located.

04. Cutout

The image layer is locked so we will not disturb it. Now go and make the shape have no fill or outline colour (see 01). Stokes and fills can get in the way when doing this kind of thing. Zoom into the subject by hitting “V” for the selection tool and then by pressing both “option” and “space” together. To zoom out again I always hit “option” and “0″. You have to be in the selection tool to use these hot-keys though. I am always going from the pen tool (“P”) and the selection tool (“V”) for this purpose.

This is where we put our skills to the test. Start to draw around the subject using the Bezier curves. I always find it best put a curve on its peak and then another one on its lowest part. Make sure that you are always drawing slightly inside your subject, this helps to create a clean cutout. See examples below:

When you come back to the start join up your path. You should end up with something that looks like this:

05. Practical Application

Well done – the hard work is over! You can now use your new shape in a number of ways. Although I would normally do compete cutouts in Adobe Photoshop you could unlock the layer below with the image on it, select both image and shape, and press “option” and “7″ together. This will create a clipping mask like below. This is great for scamps or quick cut outs.

However you could also delete the original image and fill your vector shape with a colour:

This could make a fantastic logo!:

Also have a play around – try duplicating your shape but holding down “alt” whilst in the selection tool (“V”). There are many possibilities once you have mastered vector to go on and do great creative things. Thus ends this very loose but I hope interesting tutorial. Experiment, get familiar and master vector and soon you will be creating some fantastic graphics. The image below took no time at all once I created the cutout shape.

Please leave any comments and let me know how you have found it.