Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

The Use of Brushes In Illustrator

Nov 30, 2007

Hey

There are three main types of drawing tools withing Illustrator. The pen (and subsequently shapes), and pencil and finally the brush. I've commonly used the pen and pencil for drawing shapes. Both have there advantages. But what about the third option the Brush. The brush is a little different as you have to make or install a brush shape. You can then use this brush for more complex effects. This will be a quick demo and information about the brush. Its not a tutorial in its self but still very useful.

Step 1) The first step in creating a brush is to have what you want for a brush drawn on your art board. This is a super simple example but it can be applied to nearly anything.

Below i've drawn a couple of illustrator paths using the pen tool.


Step 2) The next step is to pick the type of brush you want to make. Open up the brush palette Window > Brushes press the new brush at the bottom of the palette, select new art brush. You can of course experiment with these values.


Step 3) (Image missing because i'm a forgetful noob). Name your brush, and press ok. You now have your brush.

Step 4) Use your brush, drag along the art board to make your design. Its as easy as that.


You can of course be very complicated (or simple) with your brush.



Things to consider. Not all of the sources you use to create your brush (step 1) will work. You need to experiment. Change the settings about try different types of brushes and different sources.
As well as this if you want to save your brush out you need to select the brush libraries menu (most left button in the brushes palette) and save it out. If you don't do this your brush will only be availble with that piece of work if you don't.

If you want to check out a cool use of brush within Illustrator check out this post by Blog Spoon Graphics. It is a simple design to create a map, but shows you the principles (this post was going to be longer but i'm short on time. I'm going to be using brushes more and more in my designs that I will share with you. One of my favorites is going to be this sites redesign. It is coming a long and it is going to be sweet. I've got plenty of cool ideas.

Stay Tuned.

Feed Troubles

Nov 29, 2007

Hey

This is just quick update about the RSS feed. At the moment i've changed it over to Feedburner so I can have all the advance statistics. Currently blogger doesn't let me have this opportunity so I decided to change. As a result its screwed a couple of things over and its not updating fully at the moment and a couple of other problems that need to be worked out.

Currently i've changed the post feed to short for the time being so a couple of things might look a little screwed up. I'm sorry, I will be changing it back in the next couple of days when it gets sorted. In the mean time you can always check back at the home page. http://great-design.blogspot.com for the latests posts.

I will give another update when i've sorted the feed business out. Hopefully in the next couple of days I will have a site design away from the default scheme. I've got all of the layout planned i'm in the process of implementing it on my test blog. Stay tuned because it will be awesome.

Creating A Grungy RSS Icon - Photoshop

Nov 28, 2007

Hey

This is a very simple tutorial that is going to turn an RSS icon into a grungy version that can ideally be used on a website. You can apply this technique to any image. Its really easy to complete. Click any of the images for the full versions.

For this tutorial you will need:

Photoshop
A grunge Black and White Image (provided below)
A good grunge brush (here)
The RSS icon

Step 1) Pretty Simple this step, download the RSS icon and save it to your hard disk. You can click on it for the full version.

Step 2) Open the RSS icon in Photoshop or similar. Since it is a png it should have some transparent edges. This should be on a seperate layer. If it is placed on the background layer double click it and select ok when prompted.


Step 3) To make the icon look more grungy you need to change the colours to suit. I've change the hue to +16, lowered the saturation and lightness to -63 and -39 respectively. Change these values to any you want.


Step 4) To enable some of the layer blending styles later on remove the white bits within the icon. Select the magic wand tool click the white areas and press delete.


Step 5) The next step is to add the first layer of grunge. Download the black and white image below (click for full size) and place in into your document. Go File > Place. Right click on the file and select rasterize.



Step 6) Select the magic want again. One the new black and white grunge layer select the white and delete it. Change the blending option to Soft Light. The blending option blends the layers together.


Step 7) This is step involves removing some of the black and white of the image. On the original RSS icon select the areas that are transparent. De-select Contiguous from the tool bar at the top of the screen to select all of the areas that have no pixels.

Select the black and white layer with the areas still selected and press delete.


Step 8) The worn out look is achieve very simply. Download and load in the grunge brush (Edit > Preset Manager > Brushes > Load).

Go Layer > Layer Mask > Reveal All. Set the grunge brush to black and in the layer mask apply some grunge brush strokes. Set the opactiy of the brush down so you don't delete a lot at a time. Use the Brush Options (Window > Brushes > Brush Tip Shape) to change the angle of the brush to best suit your needs.

A layer mask is used instead of the eraser because you still preserve the image data and this can be recovered easily by removing the layer mask.


Step 9) Apply some of step 8 and 9 to your image. The result you get looks something like the image below. I'm pleased about it and would look brilliant on a grungy type website.

Click for the full image.


Please leave a comment with links to your creations and if you applied it to your site please drop a comment so I can see what it looks like.

How To Use Bought or Downloaded Vector Files

Nov 26, 2007

Hey

A couple of days ago I mentioned how you use downloaded vector files. For a new user into buying and user vector files this can be an "interesting" experience. I am going to show you what you get and how to effectively use them.

I am going to use an example from Go Media. They are great vectors and from my stats I can see that many of you have bought them. I hope you enjoy your purchases. Anyway if you head over to the free section you can download a sample file. This is the one I will be using for the mini tutorial.

What you get when you download the file is a .eps file. This is a file that can be read and wrote to from all vector packages (even photoshop can do it). Its not application specific so you shouldn't be tied down, unless you have a really old software. Each of the sets you buy will have a seperate file named appropriately.


When you open the file you get all of your vectors. My version of illustrator comes up with a text warning, usually you can skip the warnings because what you want is the vectors and not the fancy text.

The vectors you buy will come a bit like this. Each one is placed on the sheet read for you to use.


Using the vectors is quite simple. You simply select the one you want with the selection tool (Black arrow (V)) and copy to the clipboard. There is no need to place the file in a special folder or configure you software to read the file in any way. You just get the vector you want and you can be on your way. Super simple.


Some general tips.

Save a back up of the file. Always do this. Some sites only let you download the vector file once, may be twice. If you don't have a backup and you delete the vector off the file you are screwed.

If possible set the file to read only. This can usually be done by right clicking. Enabling read only is similar to having a backup, you are less likely to change it.

All in all vector files which you download are very simple to use. They are read to be used and can be applied straight away.

If you have any comments, problems, tips or tricks please leave a comment below.

Creating A B & W Image With Coloured Areas

Nov 23, 2007

Hey

This is a rather simple tutorial that can turn any coloured image into a black and white image with a strip of highlighted colour. It doesn't take long to complete and you will wonder why you haven't thought of this before. For this tutorial you will need Photoshop (or similar) and a colour image with a highlighted area.

Step 1) The basic idea behind this technique is to use the history brush to reverse the black and white state that we will apply. Depending on you settings you will need to change the history states within the preferences. Open up the preferences menu Cmd/Ctrl + K and selection the performance tab.

On the right you should see history states. Depending you your skill with the mouse you will need to change the amount of states. I recommend 20-40. To many and your memory will be filled up very quickly. To little and you will run into the chance of running out of states.


Step 2) Load up the History Palette. This can be accessed from Window > History.

Step 3) Load your image. I'm using a train i've found on Wikipedia. Ideally I wanted to use a image of a person in a busy street standing on there own. I couldn't find one so you are going to have to stick with a train instead. Click the image below for the full sized version.


Step 4) Go to Image > Adjustments > Black and White. You can fiddle around with the values but I just press ok. This will turn your image black and white.


Step 5) This is where the history brush comes in. Using the history palette select the original image from the left hand side. As shown below.


Step 6) Then using the history brush from the palette (Y) brush over the areas you want to be re-coloured. If you go out of the lines it doesn't matter. This is resolved in the next step. Make sure the mode is set to normal.


Step 7) If you have gone over the areas you want to stay black and white it is very easy to correct. All you have to do is change where the history brush is being used from. At the moment it is taking the data from the original image. But if you set the little icon to the Black and White option has appeared you colour over black and white back into the image. Really simple.


Step 8) Save out your image and you are done. I have included some extras examples. Click the images for the full sizes.




Its a really simple and cool effect. I like it. Post your links to your image and lets see what you have come up with.

Go Media's Arsenal Of Amazing Vectors

Nov 22, 2007

Hey

I like to use Vectors a lot. They offer superb quality. You don't, like with many stock images, get rough lines or pixelated edges. As a result they can be scaled and used for virtually anything. This post today is going to be about a vector site which offers fantastic quality vectors for extremely cheap prices. Call Go Media's Aresnal they hold some of the best vectors around. I'm going to go through some of the packs today in this post, and show you what you can get. You will be amazed.

The Sets

Go Media has divided the vector arsenal they hold into 8 outstanding sets. Each set contains 7 or 8 smaller packs (these can be downloaded individually). The prices range from $15 for the individual sets and $50 for a complete set. You can pay over $350 for every single vector they own. There is a couple of thousand for every single one.

Whats In The Sets?

Each big set is split into small subsections which contain a vector file with all of the individual shapes and vectors contained on it. I will take set 6 as an example of what is included.

If you decided to buy vector pack 6 you get a downloaded zip file of 16mb. In this file there are 7 eps files. Eps files are a standard export of Vector files, they contain all of the information which can be used in Illustrator or any other vector program. Even Photoshop can handle them.

Each of the 7 files contain all of the individual vectors which you can copy and paste to your your work. Each of the 7 .eps files is on a different theme. You can buy each of these theme packs separately but you don't get the multi buy discount.

Contents

As I am focusing in on set 6 I will show you the specific contents of the vector set. All of the other sets are similar, they just contain different vectors. Set 6 contains:

Line Work

If you have every tried to make very detailed lines within Illustrator you may find that it becomes difficult. Problems usually arise trying to get all the lines perfectly lines up. Save your self some work.


Radial

Very similar once again to the lines these are fantastically detailed spirals and circles. They make great backgrounds.


Heraldry

Anyone wanting to do something medieval or wants to simply use dragons, lions, eagles, crowns, feathers, etc. This is an amazing pack that has a lot of detail. The only down side is they do lack in number. You only get 22 compared to the other packs which contain a lot more.

Destroy 2

As the packs are designed to follow on from previous installments this is the second type of pack with the in a similar nature. I would personally have named this grunge, as it is very grungy, dirty and distressed. Used best for overlaying on art work. They add cool texture. A very versatile pack.

Skylines

Ever need a skyline to set off that city background? This pack is probably what you need. Based on New York City, Cleveland, San Diego, Atlanta, Boston, Philadelphia, Houston, Dallas, Detroit, Chicago, Los Angeles, Minneapolis, and Miami (although I can tell the difference) they add a fantastic skyline feel to any piece of work.

Scribbles

Surprising difficult to make. The scribbles pack is just that, scribbles. The .eps packed with over 50 different scribbles can be used for nearly anything. Although they may not seem useful they can be used for nearly anything. They contain a nix of grunge and illustration you can find many uses for them.

Anatomy

Probably the most detailed of any set this set is all about the anatomy of a human. It contains vectors on spines, bones, hands, feet, heads. All sorts. If you need a piece of human to set of a piece of work. This vector pack is definitely the one you want.

How They Come

So you have download the vector pack and you have parted with your money but how to they come? Each and very one of the vectors will be on a vector file. You can then pick the one you want copy it to your clipboard and use it as you please. I will be doing a more detailed post on how to use vector packs in the future.


Want Some Free?

No site would be anything if you couldn't sample there offerings. If you want to download a sample vector file, similar to the one above head over to the Freebies section. They have a free vector pack which contains a small sample from every single pack. Really useful as you can see the level of detail they contain.

Conclusion

Go Media's Vector packs are definitely the best ones around. They offer a superb quality for a very cheap price. I would urge you drop buy and check out there products before even considering looking anywhere else.

A Good Place For Design Tutorials

Nov 20, 2007

Hey There

One thing that I like to do in my spare time on the internet is find and do Photoshop tutorials by other people on the internet. One of the best places i've found is Good Tutorials.


This site is a collection of user submitted tutorials, that are some of the best around. Each tutorial which is submitted goes through a moderation stage of 5-7 members. As a result each tutorial is top quality and you don't get the spam ones falling through. I really like it. Many of my tutorials can be found on the site. So check it out.

How To Perfectly Remove A Colour From A Black and White Image

Nov 18, 2007

Hey There

This is a rather simple trick which you can use to remove a colour quickly and easily from a layer within Photoshop. The idea behind this is that you have a black and white (or grey scale) image, where you want to remove either the black or white from an image.

For example say you have an image similar to the one below and you want to remove the white areas.


Normally you would use the magic wand to select the white areas and press delete. You end up with a slight white/grey boarder. You could spend edges fiddling around with the tolerance. But there is a very simple way.


If instead of using the magic want you change the blending options look at the results.


What I have done is change the layer blending option to Multiply. Simply put this removes all of the white from the image but it keeps nice smooth edges. As a result you get very clean edges quickly and simply.

On the other hand if you want to remove the black from an image set the blending option to Screen. This removes the black but keeps the white.

This is a simple but easy to do technique that helps remove anything from an image. I hope it helps.

The General Stuff - Re-Design ?

Nov 16, 2007

Hey There

This post is more of an update than anything else. Currently we are growing in visitor numbers. This is great, I always like more visitors, although usually more visitors are harder to please. If anybody does have a comment please leave a post, I usually always respond to them.

Re-Design?

I've been thinking. I've had this blog now for a couple of months and its turned out to be a success in my mind. But I am currently a bit bored of the graphic layout. At the moment it is one of the default styles for blogger. When I chose the design I didn't have much experience in blogger or website design. This has changed. As a result I want to make a better and more professional looking site. As a result slowly over the next coming weeks I am going to redesign the site to look better. It shouldn't be to major. I will still keep posting every other day (I have a good rhythm now).

If you have any design ideas, please leave a comment.

Creating A Colourful Movie Style Poster In Photoshop

Nov 14, 2007

Hey There

I wanted to create a very colourful and different poster in Photoshop (I want to say 60's era but i'm not quite sure). I've tried to make this as easy as possible to do and doesn't require much skill. Through out this tutorial I have used two shape packs that I have purchased off the internet. I'll offer an alternative when I get to the required stage.

The aim of this tutorial was to create something that is colourful, simple and vibrant. I'm advertising The Powell Blog in the poster but it can be used for nearly anything. It takes about 20 minutes to complete . For this tutorial you will need:

Photoshop
Lines Pack (Optional)
Star Pack (Optional)
Vintage Font (Optional)

All the images are clickable for there full sized versions, and remember subtly is the key the colours don't want to be in your face, they want to blend in nicely. Use pastel colour values and not the extremes (expect Black). If yours doesn't come out perfect it doesn't matter its all practice. If you are stuck please leave a comment and I will try and help. You can download the .PSD at the end.

Step 1) The first step is to create your canvas size. This in reality can be any size. I've chose for International Paper > A4. If you are only doing this for practice keep the size small or Photoshop will slow down.


Step 2) Once the canvas loads, select the gradient tool and create a new gradient. The colour values are #000000 for black, #0d5a76 for light blue and #3e9abb for dark blue. Notice the position there is more black and dark blue on the right, this will become the bottom.


Step 3) Drag the gradient from top to bottom to create the gradient background.


Step 4) The next step is to create some stars. Use the default star shape within the Shapes option (U). Use the colour value of #2e8eb8 for the stars. Add some small and big stars and at different angles. Place appropriately. When you have finished adding the shapes and if you have more than one star layer select all of the layers (minus the background) and merge them together (Layer > Merge Down Ctrl/Cmd + E). When you have done reduce the fill down to 35-40%.


Step 5) The next step involves a shape from the GraphicXtra's shapes page. I've used a star option, its available here for $10 / £7. If you don't want to spend you money then you can use the default one supplied this Photoshop, i'm sure if you searched the web you would be able to find one in a similar style.

The idea of the next steps is to add a star/flare background to the poster. The first step is to apply your shape. The colour value I have used is #022b4a.


Step 6) Use the marquee tool cut off the bottom of the shape. We don't need to have the bottom half. If the background is white on your layer, use the magic wand tool to select the white and press delete to get rid of it.


Step 7) Use the Move tool (V) and press Cmd/Ctrl + T to transform the layer. Stretch and position the layer so it covers the whole of the page. Line it up to the bottom


Step 8) Change the blending mode to Soft Light and reduce the fill to 65%. The below image is shown with what me have so far.


Step 9) This is where the Lines pack from GraphicXtras comes into play. There is one option which has loads of very small thin lines placed closely together apply this to the page (or more than one instance to the page). Use the colour value #0b5f8b.
If you don't want to purchase anything, you can use the rectangle tool to create a very thin rectangles down the page. Duplicate this as many times as you need to create an effect similar to the one below, it may take a while.
Merge the lines layers together into one layer before moving on.


Step 10) One the lines layer change the blending option to Multiply and the Fill all the way down to 15-17%. I like fill over opactiy, because it seems to create a more solid effect, compared to opacity which seems to wash everything out.


Step 11) Add your text. I've used Vintage from DaFonts. I've made all the text black, the styling will be done in the next step. Notice the main text in the middle isn't centered vertically, the off centre text just makes it look a bit different.


Step 12) Add the styling to the text. For the main text i've changed the colour overlay to a deep red, a thick dark blue stroke used previously, and an inner glow with no range. Change these value amounts to suit the amount and size of your text.
The small text is an off white/beige colour with a small dark blue stroke. These values have been changed depending on the size of the text.

The final poster doesn't look half bad, I enjoyed making it and I hope you did to. Click for full size.


Please leave links in the comments with creations and thoughts. If you are interested you can find visit The Powell Blog any time. You can download the final .psd here.