Gonna Be A While

Hey

I'm afraid that for the next fortnight I'm going on holiday so I won't be able to post till I get back. So in the mean time have fun.

Creating a Dotted Line In Photoshop

Hey There

Creating a dotted line in Photoshop is quite hard, but it can be done, and it is really easy to do. All you will need is Photoshop and 5 minutes. You can click any of the images to see the full size.

Step 1) Open up the brushes and select the advance options pallet.


Step 2) Select brush tip shape and select a small brush. 5 pixels is a good size.


Step 3) Untick everything, smoothing is usually the only one enabled.


Step 4) But spacing up, the more you space it the bigger the distance between the dots.


Step 5) Apply to what you want, you now have a dotted line. You can resize it and blur it just like a normal brush.

Creating an Adobe Application Icon (Photoshop Tutorial)

This tutorial is designed to create an icon that is similar to the Icons you see on all the new applications by Adobe. Although it is no perfect, it still looks good. You will for this Photoshop. Click any of the image for full size.


Step 1) The first step is to create your canvas. Use the standard size of 120 x 120 px.




Step 2) Set the layer to a new layer and not the background. This is needed for the effects to be applied.


Step 3) Add your desired colour. I've used a style from a Web 2.0 Styles pack. You will need to do subtle adjustments.


Step 4) Some adjustments that you will need to do is add a bevel and emboss. This needs to be very light and added over the top of the style effect.


Step 5) You now need to add text. Although there is an official font that is used, I can't find it for free. Although I have used Tahoma. Any sans-serif substitute can suffice.


Step 6) Center the text and enlarge to fit. Make sure it isn't to tight around the edges.


Step 7) At this point you may need to lock the layers so you can transform both layers with out the need to do each layer in turn.


Step 8) Transform the layer so there is a small gap on the bottom and right edge.


Step 9) One thing that you can do that I forgot is add a very subtle colour overlay to the text. This again is in the style pallet of the Web 2.0 pack.


Step 10) Export and you are done. Looks Ok.

Wallpaper Wednesday - Cartoon Man

Hey

Here is a really cool wallpaper. Its a cartoon of some man that seems to be in deep thought . Click for Full version.

Creating A Grunge Photoshop Brush

Hey There

This is a quick tutorial detailing how to create a Grunge Photoshop Brush. Its pretty simple. All you need it Photoshop, some time and a source image to work from. You can use the one provided.

Step 1)

Find an image that you want to turn grungy. It needs to have a lot of texture and interest. Like the one below (Click for full size) I am going to use for this tutorial.


Step 2)

Open in Photoshop


Step 3)

The next step is to desaturate the image. This is done through Image > Adjustment > Desaturate


Step 4)

The next step is to remove some of the image though the levels box. Move the sliders towards the middle and adjust accordingly.


Step 5)

Looks a bit better and has all the elements to great the grunge effect.


Step 6)

Use the lasso tool and create a shape around your selected area. Go Select > Inverse and then press delete. This leaves the bit you have selected with the lasso tool and removed the parts of the image. The background is white because that is the arrangement of my palette (black foreground, white background) change your palette to the default is your image appears anything different.


Step 7)

Here i've readjusted the level again. Just to get a good effect of black and white.


Step 8)

Add a selected box around the outside of your grudge area. This is going to be used for your brush.

Go Edit > Define Brush Set

Step 9)

Name appropriately.


Step 10)

One set up need to do is save the brush out. This is done in the preset manager. If you don't save it out, you can lose it of you reset your brushes.


If you find this difficult I have found a good product on GraphicXtras which you can buy. This brush set of 188 Ink and Distressed brushes is great is you use them for these types of applications. You can find the check out page here. The product page can be found at the bottom if you scroll down.

A Source of Free Brushes

Hey

I've found a really cool resource on the web which lets you download lots of Photoshop brushes for free. Now these may no be the best in the world but they are very cool if you need a brush style to work with. If you want to find out more go to Brusheezy, and download some now.

Wallpaper Wednesday - Heavy Load

Hey

This is a really cool and different wallpaper which you can use as your background. Don't you just love it when the perspective of things come together.

Click for full size.
Must be a heavy load.

A Video Of A Photoshop Drawing Being Coloured In.

Hey

This may or may not be a regular update, I don't no, but what I have for you is another video of me colouring in the latest cartoon. Again this was done on Photoshop this took slightly longer than the previous video, the original was 45 minutes in length.
If you want you can download the source files to use at your own devices. They are located here.

Video of My Latest Cartoon Being Coloured

If you take a look over at my main blog you will usually find a couple of cartoons that I irregularly draw, from time to time, my latest one at time of posting is here.
Quite a while ago I did a quick tutorial explaining how to colour one of these cartoons in. This post is conveniently located here.

This time I decided that I should try a go at a bit of video editing and post production to show you how to do a sped up video of me colouring it in. You can find the video below.

Creating a Star Rating System - Photoshop

Hey

This is going to only be a quick tutorial teaching you how to make effective looking stars for use with a star rating system. For this tutorial you will need a couple of things:

Photoshop, or similar,
Web 2.0 Layer and Styles Pack

With any of the image you can click them so they are there full size.

Step 1) Create Your Canvas

The first step is to make a canvas big enough for the size of starts you want to use. The stars shown at the bottom of the page are 30 pixels high. Although I wouldn't make them to big. At this step make the canvas size big enough for 2 stars only.



Step 2) The Blank Star

The stars rating system that will be used will have to types of stars. Blank and Coloured. The first step is to create the bank star. Use the outline tool that comes with Photoshop to create a suitable shape. Colour it a nice shade of grey.


One thing that you will have to do is set the white that was on the previous image to blank. Make sure it is on an individual layer. Use the magic wand to help you achieve this.


Step 3) Adding Effects

The next step is to add effects to the blank star. Although they are minimal they are noticed. Use the Web 2.0 pack which you can download from above. Add a grey style.


Step 4) Add a Background Colour

The next part is to add a background colour to the blank star. Create a new layer underneath the previous layer and colour it a light grey colour.


Step 5) The Star

This part of the step is very similar to the previous steps. Again create a coloured star. It really doesn't matter what colour it is at this stage.


Step 6) Adding Effects

Similar to the previous layer effect add a gold coloured layer effect to the star.


One problem with the layer styles that is included is that the strokes are to big for the size of image we are working on. You may need to reduce this.


Step 7) Admire

You now have two really cool looking stars which you can put to good use.


Step 8) Slice and Splice

This is one of the final steps. Slice the image using the slice tool. Export them on the full quality settings. File > Save for Web Devices


Step 9) Compile

You can now compile the two image into a star rating system. You will have 6 images in total (including blank). Save these as .jpgs. or you can save the ones below.



















Not bad for 10 minutes work.

Wallpaper Wednesday - Retro Shells

Hey

Its Wednesday again, doesn't time fly? This weeks wallpaper is quite a wired one. It involves a composite of shapes and brushes on a cool red background. Click the image for the full version.

Cool Favicons

Hey

You see favicons all over the web. These are the small 16 x 16 pixel images that appear in you browser address bar or your tabs. But which are the coolest on the internet.
I think these are some of the best.

Candy Stand, The Black bits don't appear on the final make up. Simple yet effective.

ClickBank, A very stylish favicon.


Digg, Appears through out there site. Simple design.


ExtraLife, One of my favourite Cartoons, the favicon is a relation to this.


Radiotimes, This icon glares out at you, simply showing the cut down version of the sites logo.

Reddit, Again using the logo for the favicon, this scales well and it instantly recognizable.

Tv Links, Again simplicity at its best another great piece of design.

World of Warcraft Guides, So much detail in such as small space. Another good icon.

Creating a Website Badge - Photoshop

Hey

This is another tutorial which uses Photoshop and it shows you how to make a cool retro style badge for you website. With a lot of time and effort you can make this look amazing.
For this tutorial you will need:

Photoshop or Similar
Time
Optionally the source pack located here.

If you are read lets begin.

Step 1) Create a good sized canvas, I picked 500 x 500 pixels. You can pick any size you want just don't make it to small.


Step 2) Create a red (or any other colour) circle in the center of the canvas don't let it touch the edges, leave a little room. Its best if you set the background to a new layer and set the background to zero transparency. I think it helps you work with the layers better.


Step 3) Add a 2 pixel Stroke to the circle you just drawn. If you have a bigger canvas use a larger stroke, small canvas your stuck at 1. A bigger canvas lets you fiddle around with the layers more.


Step 4) Duplicate, shrink and position the layer so you have a double boarder. There is probably an easier way to do this, I just can't find it.


Step 5) One hand tip is to create a cross with the ruler guides so you can align the center of the circles.


Step 6) Add a green circle on a new layer, and again add a Stroke.


Step 7) Finally add a white inner circle on a new layer. A stroke will be used as a boarder image.


Step 8) Add an interesting image in the white area. Apply a white stroke if the shape calls for it.

Step 9) Add your website name in the style and colour of what you want to use.


Step 10) Warp, bend and transform the font until it lines up with the curve of the circle.


Step 11) One final touch is to add a layer effect to the text. This is optional, but it adds and extra level of detail.


Step 12) If you want to use the image again you can put all the layers into folders, it keeps them all organized. If you are happy to use the image, flatten or directly export the image.


You have a cool looking website button created in Photoshop. You can find the The Powell Blog here.

With a lot more time you can make some amazing effects. Please leave a comment to you creations.

Creating a Cartoon In Photoshop

Hey

Recently on my other blog I posted a funny Pac Man account with the ghosts. Being the design type that I am, I thought I would show how I did it and hopefully you can do it to.
For this tutorial you will need:

Photoshop or similar (MS paint if you have to)
Optionally the source pack with the swatches. Located here.

For any of the image if you click them you will get the full glorious size of 1440 x 900. Which you can ponder over. If you are ready lets begin.

Step 1)

First you need a hand drawn cartoon. This is best done in pencil then penned over. One note rub out all the pencil lines it helps in the later stage. Scan in the image at a high quality.


Step 2)

Flip the image as necessary and remove the white background. It is best to put this on a new layer.

Step 3)

Go over the lines of draw drawing if they are all grainy. The next step is to create a layer underneath and colour it white. This would be used later.


Step 4)

Create a new layer again. Add in a folder. On this layer colour in the image with a bold colour. If you go over the line, erase.


Step 5)

This time darken the colour and go over the image again. Use this as a shadow. Again remove anything that is over the lines.


You should have a nice well colored image. On other tip is to create a new layer and apply white to the eyes.

Step 6)

Apply again to the other characters in your piece. You can add the white of the eyes to the same layers.
The colour of the tongue is again on another layer.


Step 7)

Adding the shadow is again done in the same way as before. Keep the shadow direction in the same side.

Step 8)

As you can see if the pencil isn't removed you have small white areas that need to be removed.


Step 9)

Use the white layer and change it to a random colour, this can be used to see if you have missed any spots.


Step 10)

Apply a lighter layer to the background in Photoshop.


Step 11)

Apply a darker layer for the background and the image is complete.


Step 12)

The next step is to add speech bubbles. Add the shape and add a wide black stoke.


Step 13)

Add the font which is included in the pack and your cartoon is done.


If you want to download the cartoon source files please go here.

Well Designed and Funny Website Error Messages

Hey

You will probably have noticed by now that hen you miss type a URL or go on a website that doesn't exist you usually get a 404 page or similar. Some website leave it as a boring default, but some get creative and change the style and text.
Although many of these don't have that much useful information they are well designed and some are down right funny.
If you click on the image you will get a full size version. In no particular order:

1) TV Links

A great website where you can get links to TV shows, this is a really good error message because it continues in the style of the website.

2) Google

A bit boring and not as interesting as some, but the cool retro look is great.

3) Orkut
The popular myspace type site from Google, I just laughed at the first line.

4) Reddit

The only reason this is in the list is because of the sad space man thing (can't remember what it is called).

5) Torrentz
Dam hamster powered servers they just can't keep up. This is one of the funniest error messages around.

6) Apple
Probably the best 404 error message here. The only one that contains links to other parts of the site. A well designed error which you can navigate from.

7) Blogger

Again like Apple's this does give some sort of access to other parts of the site after the screw up, although not as much.

8) Digg

The big question mark definitely makes the point that you screwed up.

9) eBay
This again has a lot of navigational links for you to use. With a little descriptive error.

10) Fark

The only reason this is here is because of the chipmunk thing. Very funny.

Website Friday - Tube Photos

Hey

Its website Friday. This is a really cool website with some amazing images of the London Underground. Some of the pictures are so outstanding. You can find the website here.

Another cool website on the internet. There great.

Post-it Note Doodles

Hey

I get a bit bored some times. Ok well all of the time, and I end up drawing and Post-its. Theses are some of the best I've come up with as most end up in the bin. Click any of the images to enlarge.

Math Symbols

Dam Missing Post-it

Lots of curls

More Curls

Pipe City

Weird Men

Wallpaper Wednesday - Radioactive.

Hey

Its time for Wallpaper Wednesday. This weeks picture is of a cool radioactive sign. The depth of colours for the yellows and browns, I think are amazing.
Click the image for the full size. Dimensions are 1440 x 900 pixels.

Japanese and Wire Brushes

Hey

I'm all into creating photoshop master pieces at the moment. A good set of brushes can really help. I've found a couple that are of great use while searching the internet. These are mostly Japanese style foliage with a couple of wire styles thrown in.
The image is an example of what is included.

You can download it here.

Creating an Orb - Photoshop

Hey

This is only going to be a quick tutorial on creating a cool looking orb. The orb doesn't serve much of a purpose other than looking cool. It could be used for parts of a website or interface. Click any of the images to see the full version.
For this tutorial you will need Photoshop or similar, and a Web 2.0 Layers and Gradients Pack. If you are ready then lets begin.

Step 1)

The first step is to get your canvas ready. Mine is size 500px x 500px. Position you canvas by a window for the best possible natural light.


Step 2)

Now you have your canvas ready you need to begin drawing your orb shape.


Use the circle shape tool to draw on the canvas, use the shift key to keep the ratio of the sides correct.


It really doesn't matter what colour the shape is as the effects will be applied later.


Step 3)

This is an optional step but you may need to remove the background. Click on the white with a magic wand and delete it.


As well as this set the background layer to a new layer, this is vital for the effects to be applied.


Step 4)

The next step is to add the layer effects. I suggest using the Web 2.0 pack. Pick a good gradient and style, although it doesn't matter to much.


Step 5)

The next step is to apply a bevel. Put the size to maximum and reduce the opacity of the shadow. Play around with the settings.


Step 6)

The next step is add an inner glow. Change the colour to white and size to around twenty.


You have a good looking shape, we now need to refine the highlights.


Step 7)

Create a new layer and add a white gradient to transparent in an oval shape.


Step 8)

Rotate the layer

Step 9)

Reduce the opacity so it blends into the colour more.



You can at this point add a black shadow in the same. But it didn't work that well on mine.

Step 11)

The next step is to copy the layer (after flattening) and flip vertically. Position underneath. This will be used for the transparent shadow.


Step 12)

To create the shadow apply a layer mask. Set to reveal all.


Step 13)

Using the black gradient on the layer mask you can remove parts of the shadow.


Add a black background and flatten and you have a cool looking orb.


Using the hue saturation tool you can change the colour of the orb.


Quite cool. Leave a comment to tell me what you think.