Photo Blog Layout Tutorial

Create a new document 900×800 with a drak gray color (#131313), select the rectangular marquee tool and draw out a rectangle in the middle of your canvas.

CLICK HERE TO SEE THE LAYOUT SO FAR.

Now add these layer styles to your rectangle.

Your layout should now look like this. (see link below)

CLICK HERE TO SEE THE LAYOUT SO FAR.

Now search google images or your favourite stock photo site and find yourself a picture of a camera, copy & paste your camera image onto your canvas. Resize your camera image to site on top of your rectangle.

If you notice in the image above i have also added a drop shadow and a reflection. If you dont no how to do reflections then thats ok because i have already written a tutorial on how to do reflections. Reflection Tutorial

Now select your text type tool and type your site title/slogan etc.. at the top left of the rectangle, add these layer styles.

Your text should now look like this.

Now all thats left to do is convert it to your favourite blog software, a free blog is available from wordpress.com

Here is how it could look once converted.

Animated Magnify Effect

Open up the image you want to magnify in photoshop, im going to use a screenshot of my website for this example. Once your image is loaded into photoshop goto “image > image size”, in the box that loads up de-crease the size by 100-200pixels make sure you tick the following options (see image below).

My orginal size is 650×474, with the constrain proportions option ticked i set my width at 550pixels, then the height should automatically change. Save your newly sized image in a seperate file, save it as image_small.gif. You should have 2 images in total “the orginal” and “image_small”.

Fire up flash and create a new document,
change the dimentions of your flash project to that of your small image, im my case mine is 550×401.

Label your 1st and only layer as “orginal”.

Then goto “file > import > import to stage” and select your small image. Create a new layer above your orginal layer an name it “big image” then import it to the stage.

Select your “bigger image” layer then center the image horizontally and vertically.

Now create a new layer above your “bigger image” layer and name it glass or magnify, what ever your think is best. Now for this bit you can either search google for a magnifying glass or make your own, for the purpose of this tutorial ive found one on google images. Import your magnifying glass to the stage.

Right click your magnifying glass and goto “break apart”.
Now you need to select the lasso tool and then in the options at the bottom select the polygon mode . Now go round the whole of the magnifying glass deleteing all the white bits including the glass in the middle, so all’s your left with is the magnifying glass frame work, might be easier locking and hiding the other two layers. The polygon mode and lasso tool works the same as photoshop. Once your done you should have something like this.

Once your done resize your magnifying glass to a reasonable size and stick it to the left of the canvas in the empty workspace.

Create a new layer “UNDER” your magnifying glass layer name it mask and create a black circle the same size as the magnifying glass glass.

Now select keyframe “70” on all layers and insert a keyframe.

Now on the magnifying glass layer and the mask layer select keyframe 20 and insert a keyframe.

Do the same for frame 35 & 50.

Now at each frame 20, 35, 50 & 70 move the magnifying glass and mask to a different position on the canvas. Be sure to select the keyframe 1st. Once you’ve done that right click inbetween each frame and click “create motion tween. Your time line should now look like this.

If you press “enter” on the keyboard you can watch the animation play. Now right click the “MASK” layer and goto mask. Then in the menu bar at the top goto “control > test movie” and watch your creation.

Heres how mine turned out.

Fun With Lines Tutorial

Create a new document in flash what ever size your image is, im using 640×480 pixles with a white background. Once you have set your background up lets import our image, goto “file > import > import to stage”.

Your image should now be infront of you. At the top of your screen you should see “layer1” rename this layer to “MAIN IMAGE“, if theres one thing ive learned and thats keep orgainised then later down the line you wont get lost 😉

Now click your image once so you get a grey rectangle round it (meaning you’ve selected the image.) press F8, this will open a window called “convert to symbol” here we will convert our image to a “movie clip”. We dont need to change any settings in this window just stick a name in for your image at the top.

Once we’ve press okay “double click” our image, this will take us within the movie clip. You will notice when we double click that our timeline at the top changes.

It should say “scene 1” and then the name we specified as our movie clip, in my case “vwgolf”

Create a new layer above “layer1” label it “lines” then stick a padlock onto layer1 to lock it.

Select the “line tool” HOTKEY (n) and draw round part of your image im going to start with my alloys. (see animation below)

RIGHT-CLICK TO REWIND / RE-PLAY

When you have traced over most or all of the object(s) in your image you’ll have something like this. (MAIN IMAGE HIDDEN FROM VIEW)
You can go into as much detail as possilble, for this tutorial il stick with the image above. Create a new layer above the lines layer and label it mask, select the brush tool HOTKEY (B) and the color red and a small to medium size brush.
Now with our brush tool draw over abit of the lines, then press F6, draw over abit more of the lines and press F6. Everytime we press F6 we create a new keyframe. (see animation below)

RIGHT-CLICK TO REWIND / RE-PLAY
 
 
 
 
 

 

 

 

 

You will notice at the top of the timeline on the animation above
the keyframes being created thats me pressing F6. Also to turn the background white like mine just hide layer1. Once you have finished doing part of your image right click the “mask” layer and goto “mask”.

Nearly done. Create a new layer above the mask layer label it “lines 2”, click on the lines layer and take the little padlock to unlock it, select the 1st keyframe on the lines layer then press “ctrl + c” to copy it, then click on the 1st keyframe on your lines 2 layer that you just created and press “shift + ctrl + v” to paste in place. Create yet again another layer and label it “mask2”. Your layers should look like this.

Select the brush tool again and brush red over another part of your image that you havent already done remember to press F6 after every little line you make and dont forget to right-click the mask2 layer and click mask. Heres my timeline after the 2nd part of painting in red.
 
 
 
 
 
 

 

 

 

 

Ignore the purple bit on layer 1, il explain what that is in abit.

This is how your Layer1 looks.
Select the 1st keyframe on layer 1 and drag to about half way throu your animation.

 

 

Once you’ve entered the settings above right-click the grey area on layer 1 and goto “create motion tween”
 
 
 
 
 

 

 

 

 

 

Now highlight all the layers apart from layer 1, select the keyframes about 5 keyframes from the end, right click on the high lighted areas and goto insert frame, doing this will make sure the lines disappear just before the whole image loads up.

Thats it all done, hope you enjoyed the tutorial, sorry its so long. you end result should look like this.

CLICK HERE TO SEE END RESULT

Now select any number past your animation, im going to select the 60th keyframe, press F6.
Click back on the begining of layer 1 which is keyframe 25 in my case. (the point you dragged it to) Select the “selection tool” HOTKEY (V) and click on your main image. In the properties box at the bottom under color select advanced then click the settings button. When you click the settings button another window will open, use these settings below.

 

 

 

 

Site To WordPress Tutorial

Okay so you have your website built and coded into css/xhtml and you want to convert it over to a wordpress theme. Firstly let me explain a few things.

WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. If you view my code to my site you will notice i use php to call some aspects of my page. Once you get started its pretty easy althou understanding of css/php/xhtml is essential and will guide you throu the setup of a full working wordpress theme.

Now you should already have your site designed and coded into css/xhtml before attempting this tutorial, firstly create a new folder on your desktop, name this folder what ever you want (e.g my theme). Now open up notepad dont type anything just goto “file > save as” and save it has style.css then goto “file > save as” again and save it as index.php. Now believe it or not but these are the only 2 files you actually need for a wordpress theme.

Open up your style sheet to your website, highlight it all then copy/paste into the blank “style.css” file you just created.

Now copy/paste this bit of code into the top of your style.css file.

/*
Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

Change the lines of code in red to suit your needs. These few lines of code are what wordpress uses to define it as a wordpress theme/template.

Thats the style sheet sorted. Now we need to chop up our website code. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. Imagine your current XHTML code chopped up into 4 (or more) different sections. The header, sidebar, main content and footer. Instead of keeping these 4 parts of the XHTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

Open up notepad and create a further 3 files the same way we did with the style.css and index.php this time use the filenames “header.php , sidebar.php , footer.php” (make sure all these files are in the same directory). Load up your ftp program and go into your wordpress folder, save the classic theme folder your computer as we need to use bits of code out of the orginal files.

(/wp-content/themes/classic/)

Locate the classic themes header.php file. Notice all the PHP that is used in between the <head> tags. You will want to keep most of this code, so just copy the whole <head> section into your new header.php file. Now open up your original XHTML/CSS file and copy only the header elements or the code you have used to create the header. Paste into your new header.php file (underneath the <head> section). Save and close.

Now open up the blank index.php you created at the start, open up your website and copy only the main content code (NOT the sidebar or footer). Paste this code into your new index.php file. Save and close.

Open up the blank sidebar.php and footer.php. Copy and paste your sidebar code from your website into the blank sidebar.php file Do the same for the footer.php file.

If your original code contains any images i suggest you copy/paste them into a folder in your theme folder called “images” . Now lets put it back together using a few lines of PHP, open up index.php copy/paste these lines of code into the top of the file above everything eles,

<?php get_header(); ?>

Now goto the bottom of that file and paste these lines of code below everything eles.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is officially put back together. Now if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

Your index.php is nearly complete, the final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Look in your /wp-content/themes/classic/ directory and open the file index.php file. Copy everything in between <?php get_header(); ?> and <?php get_footer(); ?>to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. You just inserted a basic version of the loop into your code. WordPress will use the loop to display your posts and comments on your website.Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme.

 

This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possiblities for customizing your new WordPress blog.

Coding Your 1st PSD Tutorial

Load my car sales layout into photoshop (if you haven’t got the layout already made, go here to make it). Once opened in photoshop we will need to assess what were going to need. The layout im using is pretty easy and most of it can be done in css. We will start with the header, select your desired cutting tool and cut out your header, paste it to a new document. Now when i pasted it to a new document i noticed the size 850×151. To make things easyier for ourselfs goto “image > image size” and resize your image.

Pleae note that the height maybe different depending on where you cut it from, but the width should be the same. Save your header image to a folder called images on your desktop. Now for some coding, open up notepad, then open up dreamweaver. When dreamweaver has loaded select “new HTML”.

Now click the “code tab” at the top right corner of dremweaver you will be presented with this.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

In the body tag type,

<div id=”container”>
<div id=”header”></div>

</div>

Note the words container & header, “container” is a box if you will that contains the content, and the” header” being the header. Now step into notepad and type this.

#container {
width: 900px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

The code above basically means the container has a width of 900 pixels, no margin at the top, no margin at the bottom and left and right are set as auto meaning that the margin either side will be the same as each other making the container appear in the center of the page. Now goto “file > save as” and save as styles.css (make sure you include the .css). save to your desktop.

Back in dreamweaver under the <title> tag write,

<link rel=”stylesheet” href=”styles.css” mce_href=”styles.css” type=”text/css” />

This means that the HTML file will link to an external style sheet. Your html code should look like this

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<link rel=”stylesheet” href=”test.css” mce_href=”test.css” type=”text/css” />
</head>

<body>

<div id=”container”>
<div id=”header”> </div>

</div>

</body>
</html>

Now head back over to notepad where your CSS style sheet is and type,

#container #header {
background-image: url(images/header.gif);
height: 143px;
width: 900px;
background-repeat: no-repeat;
background-position: center;
}

This means the header within the container has a background image pointing too images/header.gif, with a height of 143pixels and a width of 900pixels. The background wont repeat itself and will be centered on the page. As you can see most of the css is self explanatory.

Now if you save your css file again “ctrl + s” and save your HTML file as index.html (save to desktop). Open the index.html file into your browser it should look like this.


Revert back to dreamweaver and under your header id type,

<div id=”nav”>
<ul>
<li><a href=”http://www.yoursite.com/contact.html” mce_href=”http://www.yoursite.com/contact.html”>Contact</a></li>
<li><a href=”http://www.yoursite.com/about.html” mce_href=”http://www.yoursite.com/about.html”>About</a></li>
<li><a href=”http://www.yoursite.com/services.html” mce_href=”http://www.yoursite.com/services.html”>Services</a></li>
<li><a href=”http://www.yoursite.com/news.html” mce_href=”http://www.yoursite.com/news.html”>News</a></li>
<li><a href=”http://www.yoursite.com/home.html” mce_href=”http://www.yoursite.com/home.html”>Home</a></li>
</ul>
</div>

We have created a id called nav which will be our navigation and the text that will be displayed will be contact, about, services, news and home and they will point to the relative destinations. If we view our site in our browser it is displayed like this.

Notice the blue links, now if we head back over to notepad to our css file and type,

#nav {
width:50em;
}

This mean the navigation will have a width of 50em (em: a relative value that refers to the height of the capital “m”)

#nav ul {
list-style: none;
padding: 0;
margin: 0;
width: 700px;
}

This means that the list element will have a list-style of none which basically means the text will be displayed inline with each other opposed to in a list, the elements have no padding, no margin and the width is 700px.

Now underneath that type,

#nav li {
float: right;
margin-top: 0;
margin-right: 0.15em;
margin-bottom: 10px;
margin-left: 0.15em;
}

This means the nav list items are floated to the right (float: forces the element to “float” outside of its natural position in the containing box), the rest should be self explantory. Now type,

#nav li a {
height: 3em;
line-height: 3em;
float: left;
width: 9em;
display: block;
border: 1px solid #000000;
color: #fff;
text-decoration: none;
text-align: center;
background-image: url(images/nav.gif);
background-repeat: repeat-x;
background-position: left center;
background-color: #FFFFFF;
}

Ok the height is self explantory, the line height controls the total distance from the top of the tallest element in one line to the top of the tallest element in the line immediately above or below the line, the border will have a 1 pixel solid border in the color 000000 which is black, color means the text color which is set at white. Now “background-image: url(images/nav.gif);” Is important, this will be the background on our button which we have to make in a second. also note background-reapeat, this means the background will be repeated along the X axis. Now to make our button background open up your PSD layout, zoom in on the navigation and make a selection like this.

Copy and paste the selection to a new document, the goto “file > save for the web” save it into your images folder. Once you have saved the image save your .css file and html file. Open your html file in your browser it should lool like this.

The navigation doesnt quite look right due to the fact we havent set our default font and size. Go back to your HTML code and between the <head> </head> tages type,

<style type=”text/css”>
<!–
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
–>
</style>

This means we are settin a rule for the actual html file so that all our text will be fontsize 12 in the color black in arial, helvetica or sans-serif. The margins mean that the start of our document will be right at the top of the screen or right at the side of our screen etc… Save your html file and view it in your browser, it should now look like this.

Thats our navigation sorted now we can concentrate on our content and footer. If we look at our PSD there are a few things to note. 1. The dotted dividers 2. Amount of colums needed 3. The position of our foooter. The dotted dividers will be easy to do, we have 3 coloums to do so we’ll do them 1st. Goto into the code of your html file, under our navigation code type,

<div id=”leftbar”>leftbar</div>
<div id=”content”>content</div>
<div id=”rightbar”>rightbar</div>

This will be our 3 colum layout. Head over to your .css file and under your nav elements type,

#content {
float: left;
width: 444px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000000;
margin: 10px;
}

This means we have made a box 444pixels wide with a 1 pixel black dotted border to the left and right. It also has padding to the top, bottom, left and right. The box will also be floated to the left of our site. Now type this for our left colum,

#leftbar {
float: left;
width: 200px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}

Now for the left colum, we set the float to left, the box will be 200pixels wide with a dotted black border to the right only. Padding is the same as our content box. Now for our last colum,

#rightbar {
float: right;
width: 200px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #000000;
padding-top: 5px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
}

Now we want our right colum on the right so we float it to the right, the width, padding and margins are all the same as the other 2 colums, only thing to change is our dotted border which is now on our left. If we view our site in our browser now we should have this (dont forget to save).

Last but not least its time to do our footer. First thing to do is create our ID in our html file so head over to our html code and type,

<div id=”footer”><div id=”footer-content”>footer</div>

Now goto your .css file and type,

#footer {
clear: both;
margin: 0;
padding: 0;
font: normal .95em/1.5em ‘Trebuchet MS’, Tahoma, Arial, sans-serif;
text-align: right;
}
#footer-content {
margin: 0 auto;
padding-left: 15px;
}
#footer-content a {
text-decoration: none;
color: #000000;
}
#footer-content a:hover {
text-decoration: underline;
color: #333;
}

Right now let me explain, the clear property controls the flow of text improving text wrap, the rest should be pretty easy to understand.

Now here is how the site looks in my browser.

All’s you have to do now is input your content. Here is a live working version (see link below)

CLICK HERE TO LAUNCH LIVE VERSION

Vista Themed Layout #2 Tutorial

Create a new document 800×900 pixels with the color #1e1e1e, select the rectangular marquee tool and draw a rectangle at the top of your canvas about 20 or so pixels high. Add these layer styles.

Your rectangle should now be transformed into a windows vista style taskbar. Using the custom shapes provided by photoshop add a home button and sitemap button at the top left corner of your rectangle. You should have something like this.

Open up your desired image for your header, im going to use vistagrass which is a vista wallpaper and can be found HERE. Copy & paste your wallpaper into your canvas resize/cut to fit under your rectangle.

Select the pentool and make a selection like this (see image below).

Fill with the color white. Now add a layer mask and drag the gradient diagnally towards the top left of the screen, you should end up with this.

Now add your site title & slogan.

Duplicate your rectangle you created in step one, drag down above your vista grass. This will be our navigation. In the layers window click the little arrow by the side of the layer and hide the “inner shadow”. Add your navigation text to the navbar.

You should have something like this. (see link below)

CLICK HERE TO SEE RESULT SO FAR.

Now select the rounded rectangle tool and draw out a small rectangle big enough to fit a label in there for our content box. Add these layer styles.

Still with the rounded rectangle tool draw out an area for your content. Add a 1 pixel grey stroke to the rectangle. You should have something like this.

Follow these steps untill you have created all of your content boxes. Heres a quick layout ive throw together.

Rockband Layout #1 Tutorial

Create a new document 800×700 pixels, fill the background in the color #1e1414. Now your going to need a picture of an amp of some sort, i just searched google for guitar amps, or you can use my picture.

When you have your picture open it up in photoshop and copy/paste it onto your layout canvas, your going to need to resize it to fit, remove the white background and shave it a little bit. Firstly press “ctrl + T” to resize it, select your desired cutting tool and cut away the background. Once you have done that you will need to cut off the handle. Here how my amp looks.

You will notice that i have removed the wording above the buttons and nobs (see image below).

To do this use either the smudge tool or the clone stamp tool, ive already written a tutorial on smoothing, its basically the same and will explain the tools listed above in more detail. The smooting tutorial can be found HERE.

Once you have done all that your layout should look like this. (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Duplicate your amp layer and goto “edit > transform > flip vertical” use this layer to make a reflection, ive already written a tutorial on how to do reflections. My reflections tutorial can be found here.

Once you have your reflection in place add your footer information.

Next place your band title and web address at the top using a nice grundge type font. The font i used is “base 02” and the colors i used are #cd9385 & #fbcf87.

Using the same font but with the color #402b26 add your navigation titles where you smoothed out the amp words.

CLICK HERE TO SEE RESULT SO FAR.

Now lets start to build out content area. Select the rectangular marquee tool and draw a box across your amp fill with the color #fbcf87.

Set your “background color” as #46312c and goto “filter > brush strokes > spatter” when the options load up set “spray radius” to about 20 and set “smoothness” to about 5, click ok, you should be left with this.

Do the same again adding 2 lines at the bottom.

You will notice on the image above i have more than one color on my rectangles. To ahcieve this effect brush some grundge brushes over the yellow box before applying the spatter filter. Label your area’s.

CLICK HERE TO SEE RESULT SO FAR.

Thats it all done, now with some content added it could be made to look like this.

Vista Themed Layout #1 Tutorial

Create a new document 900×800 with a background color of #cccccc, create a new layer labeled “header” select the round rectangle tool and draw out a rectangle like so.

Once you have your rectangle right click and goto make selection. Now select the rectangular marquee tool and whilst holding the ALT key on the keyboard make a small selection at the bottom. You will notice the cursor change, it shud turn to a cross with a little minus (-) sign by it.

Your shape should now have square corners at the bottom and rounded corners at the top. Double click your header layer and apply the following layer styles.

Now add your site title and logo.

If you dont no how to do reflections….. my “reflections tutorial” can be found here. If you dont no how to do orbs….. my “simple orb” tutorial can be found here.

Your site should look like this. (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Now your going to need a busyish background, im going to use a windows vista wallpaper known as vista grass feel free to use your own, the vista grass image can be found HERE. Open up your image your going to use in my case the vista grass image. Copy/paste onto your layout canvas you will need to resize it so press “ctrl + t” select one of the corner anchor points and drag down also whilst holding the shift key. (the shift key keeps the original shape). You want the image to be the same width as your header and to cover most of the canvas at the bottom but leaving sufficent space for a footer.

CLICK HERE TO SEE RESULT SO FAR.

Add this layer style to your image. (vista background).

Duplicate your header, rename duplicated layer to “footer” goto “edit > transform > flip vertical” now press “ctrl + t” and make the height abit smaller. place at the bottom of your image making sure it aligns up with the rest of the layout.

Duplicate your footer and flip it vertical again. Use this to make a reflection. If you dont no how to do reflections….. my “reflections tutorial” can be found here. Also add your footer text/info. You should have something like this.

CLICK HERE TO SEE RESULT SO FAR.

Select the rounded rectangle and draw out a little rectangle (button size). Add these layer styles.

Your button should look like this.

Set your buttons opacity to 70%, duplicate as many times as needed and place under your header.

Hide all your layers except your button layers, select one of your button layers and goto “layer > merge visable”. Unhide everything, you buttons should now all be on one layer. Create a new layer above your buttons layer and select the elliptical marquee tool.

Draw out a big “white” circle over the top of your buttons.

Click your buttons layer whilst holding the ctrl key on the keyboard to make a selection, make sure your white circle layer is selected and goto “select > inverse” then hit the delete key. Set the opacity of the white cirlce to about 30%. Label your navigation you should have something like this, (see link below).

CLICK HERE TO SEE RESULT SO FAR.

Create two shapes similar to your header and footer (these were made exactly the same way just on a much smaller scale).

You will notice the light blue bit at the top, this was also made the same as the white circle shine on the navigation, i just used the the rectangular marquee tool instead of the elliptical marquee tool just follow the steps in step 4. Select the rectangular marquee tool and draw a rectangle inbetween the to shapes making sure the align up in the corners just like the header and footer, fill with any color. Add these layer styles.

Set the rectangles opacity to 60%. You should have something like this.

Hold the ctrl key on the keyboard and click your rectangle to make a selection. Select your vista background layer and goto “filter > blur > guassian blur” blur by 3.0 pixels.

Follow the above steps for all your content boxes and dont forget to blur the background as shown above.

Cutaway Illustration Tutorial

Firstly your going to need two images, one of the car and one of the engine, i shall be using these two pictures.


Open your images up in photoshop, copy/paste your engine picture on to your car picture.
If your car picture is overly big re-size it using “ctrl + T”. Resize it to fit the engine bay, you also might need to change the perspective/angle, if that is the case goto “edit > transform > perspective”.

Once you have your engine picture at the right angle and is in postion duplicate your actual car image and drag the layer over your engine picture. Your layers pallete should look like this.

Now add a layer mask to your top car image.

Select your paint brush tool, then goto the top left corner and click the little arrow next to the brush. (see image below).

Click the “transparent red spray paint” brush, now because we have added a mask to our layer the brush wont actually be red. Start to brush on the bonnet (make sure your top layer is selected), You will notice the bonnet starts to disapear and the image underneath comes throu.

Carefully go around the bonnet making sure you dont go too far over. Finished.

You can also use this effect on other types of images EXAMPLE.

Vista Themed Software Box Tutorial

In this tutorial il show you how to create the windows vista software box as seen below.

Firstly create a new layer above your background layer, select the pen tool and create a shape like this.

Might take you a few attempts to get the shape right. Color the shape black.

Double click your new layer with your black shape on and add a gradient overlay using the settings below.

Your shape should now look like this.

Duplicate your shape layer, then right click your new layer and goto “clear layer style” you should be left with your black shape again, ive done it this way as you dont have to create another shape with the pen tool, alternativly you could define a custom shape. Press “ctrl + T” to enter into free transform mode, just drag the top of the shape down abit making it abit smaller.

Double click your new shape layer and add this gradient overlay and stroke.

You should be left with this.

Create a new layer above your background layer but under everything eles, make a selection (see image below).

Fill with the color black, and you should be left with this.

Duplicate one of your shapes then right click your new layer and goto “clear layer style” make sure this layer is above everything eles, press “ctrl + T” to enter free transform mode, make this shape abit bigger than the others and color this shape with the color #777777 and set opacity to about 15%-20%.

Duplicate the layer you created above this time drag the layer down above your background layer, press “ctrl + T” to enter free transform mode, make this shape abit smaller than the others color this shape with the color #777777 and set opacity to about 15%-20%.

Thats it all done, all thats left to do now is add your content, once you have added your content goto “edit > transform > persepective” and adjust the perspective to suit.