1. Buying a Domain

We use GoDaddy to buy all our .com domains as they offer the best service. If you are looking to buy a .co.uk domain we recommend UKreg.com for domains.

If you are struggling to come up with a good domain, we recommend using Instant Domain Search which will tell you if a domain is a available as quick as you can type the URL yourself. This tool has helped me find some great domains.

Buy a domain from GoDaddy.com

2. Buying Hosting and Setting it up with your domain.

So often bloggers decide to use FREE hosting such as Wordpress.com, Blogger and Blogspot. If you ever want to make real money online, you have to be willing to invest the $10 a month it takes to host your own website.

It is important you choose a hosting company which has a auto installer built in so you will be able to install your own blog without any knowledge of HTML or coding. Hosting companyies we recommend are HostGator and HostedFX, they both offer the software called Fantastico which allows you to automatically install a Wordpress blog onto your hosting. They also offer a variety of hosting packages which will suit any blogger.

To connect your domain and hosting together, log in to your domain host and find the settings for name servers, you will need to change them to something like this:

ns1.hostgator.com
ns2.hostgator.com

3. Installing your Wordpress Blog

Now you have your domain and hosting set up, installing the Wordpress Blog is simple, if you chose one of our recommended hosts, all you have to do is log into your hosting cpanel ( www.domain.com/cpanel ) and scroll to the bottom where you will see a smiley face icon called Fantastico, click this and you will get this screen:

On the left side click Wordpress and then click New Installation, if you do this you will be presented with this page:

Fill out the details like so:

Click Install Wordpress and you will now have a blog hosted on your domain. It should look like this:

4. Adding a theme to your Wordpress Blog

There are 1000’s of FREE wordpress themes you can download all over the internet. Find the theme you like and download it. If you would like to choose a premium wordpress theme, Premium News Themes and Revolution offer some very well designed themes.

For uploading our Wordpress Themes, we use FlashFXP, you can download a trial of this software here. You need to upload your theme to WP-Content >> Themes.

Once you have uploaded your theme, you need to login to your blog control panel ( www.domain.com/wp-login.php ) and click Design, you will now see a page like this:

Click on the theme you just uploaded and your blog will now be using that theme.

My blog now looks like this:

5. Monetizing Your Blog

Different monetization techniques work better for different types of blog. For example, a blog about home improvements would earn more money per click through Google Adsense than a website about Computer Games. Here is a example of how I monetize each of my blogs:

Private Advertising - Selling private advertising is one of the top ways to monetize your website. You want to have a good advertising page and have all advertisers sign up on a subscription payment system, so that they automatically get billed for their advert every month, this helped me to over double my advertising income because I didn’t have to keep finding new advertisers. If you are struggling to find advertisers, I would recommend offering your advertising for sale on SitePoint Marketplace and DigitalPoint.

To add your private advertising to your website, I recommend using OIOpublisher which allows you to add, edit and delete all your adverts from an admin control panel, you also can offer your advertisers an extra service by providing them with a login to track and edit their advert.

Affiliate Programs - I love affiliate links because you can earn by promoting the products and tools you love! If you ever lack blog post ideas, you can review a product or service you use often with your affiliate link and collect commissions. I also like to promote a product related to my blog at the bottom of each blog post, to find affiliate products join ClickBank.

Often readers won’t click affiliate links because they know you’re earning a commission from it, you can cloak your links so no one knows its an affiliate link. For example, a normal affiliate link may look like this "http://webdesignd.lpnow.hop.clickbank.net/" if you cloak it, it can look like this "http://www.webdesigndev.com/go/hosting". I found a really good piece of software to allow me to do this on my websites and also have a whole bunch of monetizing opportunities, its called WordPress Link Cloak.

Advertising Programs - Using programs like Google Adsense inside your blog posts can generate an extra decent revenue.

To make the most out of advertising programs like Google Adsense, I recommend either using a Adsense Ready Wordpress Theme or laying your Adsense out like I do on this website I run. To add advert code to your site, login to your wordpress account and go click on Design >> Theme Editor and you will see your code for your blog theme like so. To show Google Adsense inside a blog post edit your Single Post (single.php file) and paste your Google Adsense code in the location you want to show it.

Sponsored Reviews - Reviewing websites can also be a great way to boost earnings as you can decide how often you want to do a review. A lot of the time you can sell reviews directly through your advertising page but to boost sales, I recommend offering reviews on Pay Per Post, Review Me and Sponsored Reviews.

Typically private ad sales bring in the most revenue so presenting your advertising details is very important, don’t forget to get testimonials from your advertisers, include screen shots of stats and ad locations. Here is a couple of examples of great advertising pages.

6. Promoting and Marketing Your Blog

You are ready to launch your blog now and start promoting it:

Search Engine Optimization - When you get your blog the URL’s are by default "www.domain.com/?=1" as you can imagine, these are not so good for search engines, you want to change the blog post url’s to reflect on what the blog post title is. You can do this by going into your Wordpress Admin and clicking Settings >> Permalinks typing in the Custom Structure field "/%postname%".

Social Bookmarking - Asking your readers to bookmark your site to help others find it can be a great source of traffic. The effects of social bookmarking aren’t just extra traffic but can be used to increase search engine rankings. When you hit a homepage of social bookmarking sites such as Digg, you automatically get boosted up to rank very highly for that keyword your blog post is about. For example, on Retireat21.com I had a post about Young Entrepreneurs Rich List, because it hit the homepage of google I hit first page for terms in google such as "Young Entrepreneurs, Young Rich List and Making Money Online". On some of my blogs I use a Wordpress Plugin called Sociable, download it and add it to every blog post.

RSS Feeds - Keeping what traffic your blog gets is very important, an RSS feed notifies your readers every time there is a new post. Your rss feed is located at www.domain.com/feed - most webmasters opt for the popular service called feedburner which allows you to offer an email rss so readers can get their notifications through email. They also provide an RSS count which shows your readers how many readers you have. This is important when you have a higher amount of readers as it helps sell advertising and makes other people sign up to become an RSS reader.

Recap - 6 Steps to Getting Your First Profitable Blog Online

1. Buy Your Domain
2. Buy Your Hosting and Connect Them Together
3. Install Wordpress onto your Hosting
4. Download a Free Wordpress Theme or Buy One and Install.
5. Monetize Your Website
6. Start Promoting

Blogging Guides That Helped Me:

How Bloggers Make Money from Blogs
How To Market and Promote Your Blog
How To Make Money From Your Blog - He Makes Over $1000 a day from his blog!
Building a Niche Blog With Wordpress

Bloggers That Inspired Me:

Darren Rowse who is perhaps the most famous full time Blogger in the area of helping other bloggers add income streams to their blogs.

Collis Ta’eed, the founder of FreeLanceSwitch which has been running for only one year but has attracted over 20,000 Subscribers.

Pete Cashmore who runs one of the most visited blogs in the world called Mashable. Mashable offers news on social networking and social software and attracts millions of visitors every month.

Carl Ocab was just 13 when he started making money online blogger and quickly managed to earn more than his parents combined.

Yaro Starak runs a Blog Mastermind which has helpped 100’s of people earn a substantial income online.

Creating a flash website using actionscript 2.0

Download PSD

Download FLA

Result of the flash website tutorial, click to view in flash:

Step1 - Making a Flash Preloader

Open a new flash file.

And give it these settings.

First we are going to make the preloader.
Make a new movie clip. Insert —>> New Symbol (Ctrl+F8)

Now you are in the preloader movie clip.

And make 3 layers with 100 frames. Name the maskT, text and textW.

Make another symbol and call it loading_mc.

In that movie clip type in loading.

Once you have made that movie clip then duplicate it. And call it loading1_mc.

And in that movie clip make the text green.

Now open your preloader_mc and drag the movie clip loading_mc on to the stage.
Make sure that you are in the layer textW.

Don’t forget to center it on the stage.

And in the layer called text you drag the loading1_mc into it. And center
it.

Now in the first frame of the maskT layer we will draw a rectangle. Like
this.

Still in the maskT layer go to frame 100 and right click to convert to key
frame.

Now drag the rectangle on top of the text.

Place your cursor in between frame 1 and 100 from the maskT layer, right click
and add a motion tween.

Now move with the cursor on the layer, right click and select mask.
This will add the layer text under the mask.

Now go back to your scene1 and change the name of the first layer to preloader.

Now drag your preloader_mc onto the stage.

While in the first layer press F9 to open up the actions window. Click on the movie
clip in the stage and the paste this in the window.

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
perc1ent = int(loaded/total*100);
perc1 = ""+perc1ent+"%";
gotoAndStop(perc1ent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Now click on the layer and go to the actions window and give it this code

stop();

Now make a second layer and convert it to a key frame.(F6) and paste this code.

This code tells flash to check the bytes that are loaded .if it’s loaded then go
to frame3 if not stay in frame 1.

You may think what happened to frame2 . Well you are in it.

if(_root.getBytesLoaded() ==
_root.getBytesTotal()){
gotoAndPlay(3);
}
else{
gotoAndPlay(1);
}

Step 2 - Making the Smooth Page Transitions

Start by importing your PSD to flash, if you do not know how to do this, read our Importing Images in to Adobe Flash Tutorial.
href="http://www.webdesigndev.com/flash/importing-images-in-to-adobe-flash">
Now make a new movie clip and name it content_mc. And drag the square
on it.

Now make a second layer in scene1 and call it content.
Click on the third frame and press F6 to make it a key frame.

Now drag your content_mc to the stage and center it horizontal.

Select frame 15 and convert it to a key frame. Now right click between frame
3 and 15 and make a motion tween.

In frame 3 and change its brightness to -100%

lets make the pages first. the content to fill these is up to you. I will show
you how to do those page transitions that so many people want to know.

I will show you a very easy way to do this.

Lets me the pages first . make a new movie clip and call it homePage_mc.

Make a layer for each thing that you add. Will be allotting better if you
want to change some things later on.

I have 2 layers. a layer with bigger text and the some text to fill this page.

Now change some text for the other pages . Since I don’t use this site I will
only change the main text .

So you will see that the pages change. Once you made all the pages we will implant
them into scene1.

So go to scene1 and add 2 new layers , call it pages
and the other 1 actionsMain.
.
First insert frames on frame 140 for the layers content
, pages and actions.
Add a stop(); in the actionsmain on frame
35.

In the pages layer you need to add key frames . So when we link the buttons
that know where to go to.

Add key frame in the following frames : 35 , 45 , 54 , 59 , 69 , 78 , 82 , 92,
101 , 105 , 115 , 124

Now do the same for the actions layer.

It should look like this.

In the pages layer select frame 35 . Now drag your homePage_mc on the stage and
place it like this.

Copy frame 35 and paste in frames 45 and 54.

Now change the alpha of the movie clip homePage_mc to 0%.

Now right click between 35 and 45 and 45 –54 and add a motion tween.
Like this.

Add the other movie clips to the other key frames. After that you have this.

Select your actionsmain layer and in the key frames 45 , 69 , 92 and 115 add a
stop in your action script.
This is to make sure that it doesn’t loop all the time.
stop();
And now label the frames.
35 = home
59 = about
82 = port
105 = contact

Now comes the tricky part. All the AS . you need to get this right or we will
get allot of errors.
All of this will go in the actionsmain layer. . So when the page opens the
buttons are already in pause state.
Code for frame 36
home_mc.gotoAndStop("pause");//if you hit this frame then the button
will go to the pause state
over1_btn.enabled= false ; //here you say that when you go over that button
it can’t do anything

frame 60
about_mc.gotoAndStop("pause");
over2_btn.enabled= false ;

frame 83
port_mc.gotoAndStop("pause");
over3_btn.enabled= false ;

frame 106
contact_mc.gotoAndStop("pause");
over4_btn.enabled= false ;

Now we will tell flash were to go when a button is released. And we will give
it a little timeout. If you put in 1000 then that’s 1 second.
So we will give in 500 , that’s a half second.
Code for frame 54
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, "moveOn", 500);// this will delay the transition
by 1/2 second
over1_btn.enabled= true ; //this will make sure that the button works again

home_mc.gotoAndPlay("h2"); //and that the button play’s the rest
of the animation

Frame 78
stop();

function moveOn()
{
gotoAndPlay(target); //this is were the flash will go after you clicked a
button

}
setTimeout(this, "moveOn", 500);
over2_btn.enabled= true ;
about_mc.gotoAndPlay("h2");

Frame 101
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, "moveOn", 500);
over3_btn.enabled= true ;
port_mc.gotoAndPlay("h2");

Frame 124
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, "moveOn", 500);
over4_btn.enabled= true ;
contact_mc.gotoAndPlay("h2");

This is
what you should have now.

Step 3 - Enable and Disable Buttons

Again make a new symbol , and name it home_mc. Now make 4 layers. Call them left , right , text and actions.

In the text layer type in home and the select that text and press

F8 to convert it to a movie clip. name this homeText_mc

Now in your movie clip home_mc Add this image. to layers left and right in
the first frame.

Convert it to a movie clip called indi_mc.

And place them on the side of the text.

Add a key frame in frame 7 of the layers left and right.

Go back to the second frame and move the indi_mc away from the text by 15
pox each. 1 to the left the other to the right.

And give them in the first frame 0% alpha. Now copy these 2 frames and paste
them in to frame14.

And give it a between the key frames a motiontween.

Now give frame 8 a key frame in the layers left , right and actions.

In the actions layer give in stop(); in
the first frame , frame 7 and give frame 1 label h1
, frame7 pause and frame 8 style='color:#00CC00'>h2.

You should have this now.

Now you have to do the same with the other buttons.

When you have that then go to scene1 and add a folder. And call it buttons.

And add 8 layers and place them in that folder.

Now give them the names like below.

Make key frames in these 8 layers . In frame 23.

Now drag the buttons you just made in the right layer. homeB = style='color:#00CC00'>home_mc , aboutB = about_mc
, ….

And now drag the swirls into position. Select the each and give them these
names and put them in the right layer.

Give these movie clips instance names. So that flash knows that you mean them
in the action script.

Do this for the other movie clips too. Name them the same as the movie clips.

Now we are going to make a button. Like this.

Drag that button into the layer inviB in scene1.and place it right on top of
the home_mc. Now copy and paste the button 3 more times and place

Them on top of the other 3 movie clips. And name them like below.

Now with those 4 buttons selected put the alpha to 0%.

Make a new layer on top of the rest and call it buttonactions. And give it
this code.

I
n this code you will say what flash needs to do when you go over , or press ,
… a movie clip.

//button home_mc//
over1_btn.onRelease = function(){
play();
target="home";
}
over1_btn.onRollOver = function(){
home_mc.gotoAndPlay("h1");
}
over1_btn.onRollOut = function(){
home_mc.gotoAndPlay("h2");
}
over1_btn.onReleaseOutside = function(){
home_mc.gotoAndStop ("pause");
}
//button about_mc//
over2_btn.onRelease = function(){
play();
target="about";
}
over2_btn.onRollOver = function(){
about_mc.gotoAndPlay("h1");
}
over2_btn.onRollOut = function(){
about_mc.gotoAndPlay("h2");
}
over2_btn.onPress = function(){
about_mc.gotoAndStop ("pause");
}

//button port_mc//
over3_btn.onRelease = function(){
play();
target="port";
}
over3_btn.onRollOver = function(){
port_mc.gotoAndPlay("h1");
}
over3_btn.onRollOut = function(){
port_mc.gotoAndPlay("h2");
}
over3_btn.onReleaseOutside = function(){
port_mc.gotoAndStop ("pause");
}
//button contact_mc//
over4_btn.onRelease = function(){
play();
target="contact";
}
over4_btn.onRollOver = function(){
contact_mc.gotoAndPlay("h1");
}
over4_btn.onRollOut = function(){
contact_mc.gotoAndPlay("h2");
}
over4_btn.onReleaseOutside = function(){
contact_mc.gotoAndStop ("pause");
}

Let’s make the animation when the buttons enter the screen.

Select the topL_mc and place it right above your screen.And place the
buttomL_mc right under it.

Now add a key frame in frame 33 for those 2 layers .In frame 33 move them on
how they were from the beginning.

Click between frame 23 and 33 and a motiowtween.

Now for the mask. add a key frame in 23 and draw a rectangle that will cover
your buttons.

Make a key frame in 33 and go back to 23 and place it like this.

And add a motiontween.

Now for the last piece . The header/logo. You can use any logo or banner you
want . This is to show you how you can tween with AS.

So take the logo and make it a movie clip.

And call it logo_mc

Make a new layer in scene1. make a key frame in frame 10 and drag Logo_mc
into the stage and place it on the left side.

Take a look on the Y axis.

Select the logo and press F9 to open Up the actions window. And give this code.

The first part will tell the movie clip where to start. and the second 1 will
say where to stop.

onClipEvent (load) {
//here you say where to start
this._y = -170;
}
onClipEvent (enterFrame) {
//this will tell the As on were to stop the animation. the 25 is what speed
you want it to move.
if (this._y<100) {
this._y += 25;
}

}

SO , press Ctrl+enter and you are done.

You should have learned some new but very simple things that you can use to
make your own site.

Visit later for more tutorials.

Cute Text Effect Tutorial

You can see the result image here:

1.

First start by making a new document, now make a background that will suit the text.

I started by filling the background with #e98dd3 then adding in this scanline pattern twice.

After adding in the scanline, lower the opacity and change the layer mode to either Soft Light or Overlay.

I also added a few effects to the background layer. Firstly, merge the layers together then go and apply Filter > Noise > Add Noise, then Filter > Render > Lighting Effects with the light type set as Omni.

2.

Now you need to write out your text. First get the Horizontal Type Tool and write out your text in a dark purple color (#b5406f).

The font used in the above image is called VAGRounded BT, you can download it from here.

3.

So, after you’ve written out your text, right-click the text layer in the layer’s palette then go into the Blending Options, use the following options:

• Drop ShadowThe color used for this Drop Shadow is #ffffff.
• Inner ShadowThe color used for this Inner Shadow is #ffffff, also, pay attention to the Contour under Quality.
• Outer GlowThe color used for this Outer Glow is #fac1f3.
• Bevel and EmbossPay attention to these settings and you’ll get the effect shown.
• Bevel and Emboss — ContourDefault Contour settings.
• Gradient OverlayBlack to White gradient, Soft Light, 40%.

After applying all of those layer styles you should have text that looks like this:

4.

Unless you want to apply some post-effects (like I did), you’re finished with this tutorial!

To finish the image off, I merged all the layers together, applied Filter > Noise > Add Noise then Filter > Render > Lighting Effects.

If you couldn’t seem to get something right, you can of course download the PSD file from here.

Photoshop Photo Manipulation Tutorial

Lets start with changing the model’s eye colour to match her hat.

select a pen tool with the diameter that will match the radius of the eye. For this image, 28px was perfect.

Select the eyedropper tool and click somewhere over the bright side of her hat, make sure the selected colour was chosen for the primarily colour.

Incidentally, I have chosen #46b4a9

Select the brush again and create a new layer.

stamp the round brush over each eye, as shown on the picture.

Now select the eraser tool and remove the remaining from the eyelids, you can even set the layer opacity to “soft”, ir order to see better what you are doing.

Set the opacity of the layer to “Color”. this is what u got:

To make the eyes more cat-like, select the Burn tool, with a soft edge round of 3 px, select the layer with the woman’s face (and not the one where you coloured the eyes, and go over the outer edge of the eye…

Preferable work with a zoomed photo, to make sure your hand won’t move in you will create a good round shape. this is the result after 50% midtone burn:

Now lets add some gloss to her lips. create a new layer and approximately 10px round (hard round) brush, and create a layer over the lips as shown on the picture:

Now go to Filter >> Artistic >> Plastic Wrap and apply the following settings:

Highlight streignt 12

Detail 3

Smoothness 15

Click OK

Select the layers blend mode: Hue

Go to Layer Styles >> Bevel & Emboss >> Inner Bevel, size 1 px.

Highlight mode color: #4e1e1e

Shadow mode color: #ce8e8e

Your result so far is still casual. Let’s colour her hair. Select the layer with the woman’s face, and Magic Wand tool, select her hair (this will be done in a few steps as there are a several shades to pain in Photoshop here, and Press Ctrl + U. Colorize to #f37a05 colour.

Go to Filters >> Renders >> Lightening effect and apply these settings.

At last, add a bit of white glow, if you want, to add some professional touch to it. This is your final result, enjoy!

Designing a Retro Vinyl Effect in Photoshop

Step 1

Start off with a file 500×500.

Make a new layer. Get the Elliptical Marquee Tool (press M) and hold shift while dragging a Circle. Then fill that selection with black.

Now Duplicate that layer (Ctrl J), Load the Selection of the duplicated layer (Ctrl click on layer) and press Ctrl T to get in free transform. Now go into the percentages box Now go into the percentages box and set them to 40%, both, height and width.

Select the original layer and hit delete.

Delete the middle Circle (the small circle) layer. (layer 3 in my image)

Step 2

Select the Main Circle again and go to Filter>Noise>Add noise

Use these settings:

Load Selection(Ctrl click on layer) on the Main Circle. Then go Filter>Blur>Radial Blur And use these settings:

Step 3

Now use your Magic Wand Tool to select the middle of the circle.

One you have done that create a new layer and go Select>Modify>Expand and use 2pxNow fill the selection with any colour you like (I used #fa8100)

Use Blending options: Bevel And Emboss

Step 4

To get the light effect, we are going to make a Adjustment layer. Click the Adjustment layer icon

And select Levels. A window will popup, Use these settings:

You can play around with these settings later

Now fill the mask with black

Get the Gradient Tool (G). Set your Fore- and Background colour White and Black, select the Reflected Gradient box and select Foreground to Background

Then drag a Gradient like this:

Your done!

Now you should be creative and make some text and images in the middle circle!

Learn how to create a sticky tape effect in Adobe Photoshop

You will need to download this Grunge Brush Set for this tutorial.

- Step 1: Open a new document, and fill in these values.

- Create a new layer and name it ‘Tape 1′

- Step 2: Select the box-selection tool.

- Step 3: Select an area of around 30px high by 120px wide.

- Step 4: Fill the box with the colour below.

- Step 5: Select the brush tool and choose one of your new grunge brushes.

- Step 6: Select the following colour, and sparingly brush your tape selection to vary the texture.

- Step 7: Repeat this technique several times with different variations of a similar colour to create a texture.

- Step 8: Now select the eraser tool, and very sparingly use the eraser tool over the tape selection (set the opacity of the eraser to 60%), this will create a transparent effect when placed above the photo.

The first stage is now complete.

- Step 9: Use various brushes to create a fraying effect on the ends of the tape.

- Step 10: Select all (CTRL+A), copy (CTRL+C) and paste (CTRL+V) the original tape into the second layer. Now create a new layer and name it ‘Tape 2′.

Use the burn tool and run it over the edges of the pieces of tape to differentiate their looks.

- Step 11: Now open the image you wish to use in Photoshop. Copy and paste it into a new layer named ‘Photo’. I used a random sunset photo I found on the Internet.

Crop the photo to the right size using the resize tool (CTRL+T) and angle it.

Now drop this layer below the two tape layers. Your layer window should now look like this.

- Step 12: Place the pieces of tape above the top corners of the photo, use the resize tool (CTRL+T) to randmly angle the pieces of tape.

- Step 13: Now right click on the top tape layer and select ‘Blending Options’. Put in these values…

Apply this to both tape layers…

- Step 14: Right click on the photo layer and select ‘Blending Options’. Highlight the drop shadow option and leave the settings as default. Your picture should now be taking shape…

You can adjust the opacity of your tape layers if you think they aren’t transparent enough. Once again use the burn tool to vary the looks of each piece of tape.

Finally, open the canvas size window (’Image’ > ‘Canvas Size’) and trim your picture if there are any large white gaps.

You can add text to your picture or just leave it how it is. Try repeating this technique many times to create a collage-esque layered effect.

Congratulations, you’re done!

Learn how to create Cartoons in Adobe Photoshop

Ideally your target will be set against a clear background for easy manipulation.

Step 1 - Open up your chosen picture in Photoshop. Select the pen tool (see left of picture), and select ‘Paths’ mode (see top of picture). Preset your brush to a basic 3 pixel width ‘Hard Round’ (see second picture), as you will need to use this for your stroking. Create a new layer (Ctrl + Shift + N) - name this layer ‘Lines’.

Step 2 - Carefully start to trace the outline of your picture with the pen tool - use the anchor points to manipulate then pen selection to fit the target, you can do this in sections if it is not a complete loop. Remember that you don’t have to follow the outline to the finest detail as you are trying to simplify the image into cartoon form, so nice round edges work well.

Step 3 - Once you finish each section of tracing, right-click on the pen selection and choose ‘Stroke Path’. Select ‘Brush’ from the drop-down menu and click OK. Your first section should now be stroked. Your primary colour defines what colour the edges will become.

Step 4 - Now carry on with this until you have covered the edges and defining lines of your picture.

Step 5 - Now create a new layer and name it ‘Fill’. Set the opacity of this layer to 50%, so you can see the image you are tracing behind. Remember to keep checking back to 100% fill to ensure the colours you are selecting are appropriate for your image, as 50% opacity will dull your colours. Now it is down to you to decide which colours are most appropriate for different sections of your image. Remember to select darker colours for shaded areas as shading is vital to this cartoon style.

Step 6 - Increase the brush size, and very it depending on the area you are filling in. Make the ends of the fill fit under the previously drawn edges. Fill the areas with the colours that dominate that area of the original image, or whatever seems most appropriate.

Step 7 (Optional) - There are a few effects that can be added to make an image appear more cartoon-like. Check the scan lines tutorial for more information.

Learn how to design your very own glossy home icon in Photoshop

Heres what we will be making:

1.

Firstly start by creating a new document in Photoshop, or of course, opening up a template you’ve made previously. I simply used a new document size 400 x 300 pixels. I then added in a light blue/white gradient for the background.

2.

Create a new layer (Layer > New > Layer) then using the Elliptical Marquee Tool make a perfectly-rounded selection in the middle of the document somewhere.

You can fill this selection with any old color, just go with Black for now (#000000)

Going into the Blending Options for this orb layer, apply this Gradient Overlay.

And now you will have a gradient-filled orb like so:

3.

Again using the Elliptical Marquee Tool, make a smaller size selection near the left edges of your first orb.

On a new layer draw a light-blue gradient inside of your selection as shown below. Note that you can use either Color to Transparent or Color to Black.

With your selection still active, move your selection up to the left and upwards, to do this hold Shift and press the up/left keys.

Inverse your selection by right-clicking the selection and going to Select Inverse, then press delete to remove everything on the outside of the selection.

To make it look quite a bit nicer you can change the layer mode for the gradient layer to Screen, also lower the opacity if necesary.

Finish off by adding one more shine gradient in the bottom-right of your orb.

4.

Now let’s add in shape that defines the icon. Find and get out the Custom Shape Tool.

Go into the shapes and make sure you have all sets selected.

Scroll down to the bottom of your shapes and find the Home shape.

Now create a new layer underneath all of the shine layers you made, hold shift and draw your shape out. You might need to change the Custom Shape Tool settings for it to come out as a solid shape.

Note that I used #9bcae5 as the color for my home icon.

You will get a home icon that looks like this after applying the following layer styles:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

5.

Now you just have to merge the layers together and make a much smaller version. You can resize it down by pressing CTRL+T then dragging the corners inwards whilst holding shift.

Thanks for reading! If you want you can download the PSD file from here.

Creating a Splash Page for you website in Adobe Photoshop

Step 1. Background

Start by creating a new document, I’ll be using a size of 540 x 540 pixels. Now fill the background with #a48034.

Now go and apply Filter > Noise > Add Noise, use similar settings to these:

Duplicate the Background layer then apply Filter > Artistic > Underpainting, you can use the default settings.

Lower the opacity for this layer to 25% and change the layer mode to Overlay.

Step 2. Base

First of all, get the Rectangular Marquee Tool then make a set-sized selection of 366 x 220 pixels in the middle of the document.

After making the selection, make a new layer then fill the selection with a dark brown color, I used #56220c.

Right-click the layer you just created and go into the Blending Options, apply the following settings:

• Inner Shadow
• Outer Glow
• Gradient Overlay
• Pattern OverlayTo use this pattern, first download it from here, open it in Photoshop then define it as a pattern (Edit > Define Pattern)
• Stroke

Be sure you paid attention to all the settings, and you should have gotten a result like this:

Step 3. Making the chalk board

Create another new layer then with the Rectangular Marquee Tool make a selection of about 360 x 190 pixels inside of the other layer.

Fill this selection with a dark grey, I used #232323. After filling your selection, apply the following layer styles:

• Drop Shadow
• Inner Glow
• Gradient Overlay

You should now have a chalk board like this:

Create a new layer then do a little bit of soft brushing on the inside of the chalk board. You can either leave the brushing, or erase away a bit with a grunge brush like I did.

After finishing off, change the layer mode to Soft Light and lower the opacity if you think it needs it.

Lastly you should add in your text. You can download the font that I used from here.

After writing out my text in white I lowered the fill to 70% and apply the following layer styles:

• Drop Shadow
• Inner Shadow

Step 4. Logo

Get the Horizontal Type Tool out and write your text in white.

The font I used above is called Helvetica Neue, but you’ll have to make use of what you have, be creative.

After writing your text, apply the following layer styles:

• Drop Shadow
• Inner Shadow

Lastly for the logo I added in a ‘fresh’ stamp, I’ve written a similar tutorial on this effect before, you can view it here.

Step 5. Navigation text

Lastly for this tutorial you’ll want to add in some navigation text, I added mine at the bottom of the blackboard in the brown area. First get the text tool and write out your links, then change the font and such.

In the above image I used the font Tahoma, size: 11 pt, color #ffffff.

Lower the fill for your text layer to 70% then apply the following layer styles:

• Drop Shadow
• Gradient Overlay

That’s pretty much it for this tutorial, you can download the PSD file from here if you need any help.

Create a Unique Website Header Using Photoshop

You can see the result here:

1.

First start by making a new document, I’ll be using a document size of 900 x 140 pixels.

Now fill the backgrond layer with a nice, dark blue gradient, the colors I used were #476ba7 and #263d65. (darker at top)

2.

Now you’ll need some images to blend into the background, you can download the images that I used below.

• 3D Pacman
• Mario Wallpaper
• Mario Cutout

Start by getting the 3D Pacman Image and sticking it in the bottom left of your header.

With a large, soft brush, erase away the right side of the pacman image. Now change the layer mode to Soft Light and lower the opacity to about 55-65%.

Looks a lot nicer now doesn’t it?

3.

Now get out the Mario Wallpaper and stick it in the middle of the document.

Take note that I resized the wallpaper after putting it in the header, to resize it press CTRL T and change the percentages near the top.

Repeat what you did with the last image, use a large, soft brush to erase away the edges, change the layer mode then lower the opacity to about 15-25%.

Looking pretty nice so far.

4.

Lastly you need to blend in some sort of cutout render, I used the Mario Cutout.

Firstly put it in the document, then position it the way you want it.

Use a large, soft brush and erase away the edges slightly.

Now lower the opacity for mario to about 45-60%.

5.

Now let’s add in our text. Firstly, you need a font that suits the theme, I used a font called Arcade, typical, right? Download Arcade Font.

Now with this font, for it to be dotted I think you have to use 60 px as the font size.

After writing out your text, add in the following layer styles:

• Drop Shadow
• Gradient Overlay

Not much change, but still, nice details.

Lastly for the text, I added in some much smaller text underneath, using the same layer styles.

6.

To finish this off you can add some nice post-effects, or buttons if the buttons are going to be in the header.

I applied Filter > Noise > Add Noise with an amount of about 2.2 for a nice, last effect. And I also added in some simple, glossy buttons.

Thanks for reading, we hope you enjoyed this tutorial.