Car Wallpaper Tutorial

Create a new document what ever size your wallpaper will be, for the purpose of this tutorial i shall be using a non wallpaper size of 600×440. Select the gradient tool and fill the background with the colors #8b9fa7 & #cee4e9.

Open up your picture of the car you want to use, i shall be using the picture below.

Once open drag your image over to your canvas and resize to the size you want to use.

Select your desired cutting tool and remove the background, ive also kept the shadow underneath the car to save time adding it later.

Once cut out duplicate your car layer then goto “filter > blur > guassian blur” blur by 3pixels then set the layer opacity to 35%. you should have something like this.

Now duplicate your car layer again and drag the layer underneath everything eles but above your background layer. Then goto “edit > transform > flip vertical” place your car under your origain like this.

Now add a layer mask and blend it in abit.

Add your desired text.

Now select the paint brush tool and goto your brush options, you should see a little black arrow click this to rollout another menu and select “assorted brushes” Then select the “crosshatch” brush and add a few sparkles to your image.

ALL DONE.

Knight Rider Wallpaper Tutorial

Open up your image of the car you want to transform into your knight rider wallpaper, i shall be using this picture of the audi rs8.

Firstly lets remove the number plate, select the polygonal lasso tool and make a selection like this.

Copy and paste the selection to a new layer and move it up over the number plate, you may need to duplicate it more than once to cover it. You should then have something like this.

Merge the new grill with the main image so you left with one layer. Duplicate your main image then goto “filter > stylize > glowing edges” use these settings,

EDGE WIDTH: 1
EDGE BRIGHTNESS: 20
SMOOTHNESS: 15

Also set the layer blending mode to “Linear Dodge” and press “ctrl + u” and colorize the image red. You should have something like this.

Duplicate your main image again but drag it to the top so its on top of everything in the layers window so far. Set layer blending mode to “Linear Burn” and opacity t0 30%, then goto “filter > blur > guassian blur” blur by 2 pixels. You should be left with this.

Now create a new layer above the rest, select the colors #e49d3e and #8b5521 and goto “filter > render > clouds”. Now select the rubber and remove the clouds from the main detail of the picture.

Now set the layer opacity to 60% and blending mode the “color dodge” you should have something like this.

Now zoom in on the grill and create a couple of red squares.

Add an outerglow using the settings below.

Create 3 cirlces using the color #f8f9d7 and place them in the middle of the grill. Also guassian blur them by 2pixels.

Now select the paint brush tool, then select the assorted brushes, then select the crosshatch brush.

Add 3 crosshatchs on your 3 circles. Your image should now look like this.

Now add some text to your image.

Now select the rectangular marquee tool and create some squares like this.

When your done merge all your squares as one then click your layer whilst hold the CTRL key on the keyboard to make a selection. Select a light red color and a dark red color as your background and forground and drag a gradient over your squares (Or just add a gradient overlay).

Now add a outerglow & stroke using these settings.

You should have something similar to this.

Add a layer mask to your squares and set opacity to 50% and your done.

Compass Tutorial

Create a new document 500×400 with any desired background. Select the elliptical marquee tool and draw a circle, fill the circle with a temporary color. In the layers window click on your layer whilst holding the “CTRL” key on the keyboard to load a selection, now goto “select > modify > contract”. when the box comes up enter a value of around 20-30 pixels. Now goto “select > modify > smooth” and enter a value of 20. You should now have a ring like this.

Now add these layer styles to your ring.

You should have something like this.

Now create a shape like this.

All done with the elliptical marquee tool using to shapes, merge both shapes together on one layer and place behind your ring.

Right-Click your ring layer and goto “copy layer styles” then right-click your shape you just made and goto “paste layer styles” you should have something like this.

Using the same concept as the 1st step create another ring, only this time make it smaller to fit inside the first one we made.

Now add these layer styles.

You should have something like this.

Now create another circle big enough to fill whats left inside. Add these layer styles.

You should have something like this.

Add your letters N, E, S and W.

Add your lines that go around the compass, to do this we create a circle from the custom shapes menu, then select the type tool and use type on a path. Ive already written a tutorial about type text along a path check that out for more detail.

Select the pen tool and create a shape like this.

Fill the shape with the color white and set opacity to 25%.

Now goto the custom shapes tool within photoshop and select a custom shape same as the image below. Stretch it out to fit the inside of the compass also set layer opacity to 50%.

Now add your little arrows which are also shapes from the custom shapes menu, just fill each side of the shape a darker shade of the main color.

Passport Photos Tutorial

In this tutorial im going to show you how to make your own passport photos, OR you could save time and spend £4-£10 getting one done in a naff photo booth.! Couple of advantaged of doing it yourself,

1) Cheaper
2) You can take unlimited amount of pictures of your self
3) You can see the result almost instantly

Firstly in this tutorial i shall not be using a picture of myself 😛 im going to be using an image of a celebrity 🙂

Let’s set about cropping and re-sizing. The required size for a UK passport is exactly W 35mm x H 45mm. (other countries maybe different). Select the crop tool and enter the correct sizes on the Options Bar and enter a resolution of 300 pixels/inch.

Place the crop tool on the image and drag out a cropping marquee to mark the required area. Your crop stays proportional, no matter how large or small your marquee is, the image will always be 35 x 45 mm at 300 dpi. Photoshop will resample the image via the crop tool, so you don’t need to go to Image > Image size to make any alterations. Double click or press Enter to make the crop.

Image after crop has been okayed.

Now for a passport photo to be valid were going to need a white background, so select your prefered cutting tool I.E pen tool or polygonal lasso tool & begin to cut around your shoulders/head & remove the background. (if your image is already on a white background skip this part)

You should be left with something like above. Create a new layer underneath your image and fill it with the color white, then press CTRL + E to merge the layers together.

Okay now goto “file > new” and create a new document with the following settings.

To make our pictures easier to cut out fill the background on your new document with a light grey color. Now drag your portrait from your old document to your new document.

Close your old document and maximize your new document. Now whilst holding the ALT key on the keyboard drag your image to the side. The alt key will duplicate it for you whilst your moving it, do this 4 times.

You only need to 2 pictures for a valid passport but you can use the other to for???…………..

Print your picture using a photo-realistic printer with premium quality gloss paper (no heavier than 180 gsm) – 6 x 4  Photo Paper is ideal. Most printers today (Canon & Epson) guarantee the image for at least 10 years but will last well past the passport’s expiry date. Finally, use a sharp scalpel and steel ruler to trim your pictures (or scissors)

Remember, don’t alter the image in any way, if there is a scar on your chin or lines under your eyes then they must be in the picture too. If you really do look awful in your picture (and don’t we all) then consider having holidays at home.

Important Notice: for UK passports only

The rules for submitting photographs are very strict.  Full details can be found in Information Leaflet IL/02/03 and read Note 12 – Photographs. This leaflet is available from your Post Office or Passport Office.

Simple Page Curl Tutorial

Open up the image you want to add a page curl to, im going to use my car blueprint from a tutorial i recently created.

Duplicate your image layer and add a 2 pixel stroke.

Now goto “layer > merge visable”, your layers should now have gone into one, duplicate your image layer again and goto “edit > transform > warp”, you should then be presented with this.

Take the very bottom right anchor point and drag towards the middle of your image.

Press the enter key on the keyboard once your done. (you might want to have a play with the warp tool as it is a pretty neat tool)

Now add a simple drop shadow to your image layer.

Blueprints Tutorial

1st before we start we need to create our grid pattern, create a new document with a transparent background with the size 45 x 45, select the pencil tool and a 1 pixel size brush and the color black. Now make a 2 pixel line then miss 1 pixel out then make another 2 pixel line
and so on.

Once you have something like above goto “edit > define pattern” and give it a name of your choice.

Right thats that out the way. Open up your image you want to turn into a blue print, im going to use a picture of a car for this example but houses and other objects work fine also.

Once you have your image loaded up goto “image > adjustments > desaturate” your image should then go grey, then goto “filter distort > find edges”, you should have something like this.

Now theres abit too much of detail for my likeing so press “ctrl + L” to adjust the levels. Move the “black”, “grey” & “white” markers/sliders to your liking have a good play about with them, once your happy press okay, heres mine.

Now goto “image > adjustments > invert” this will replace the colors to the opposite, (white will be black, black will be white.)

Create a new layer above your image and fill it with the color (#0054a5) then set the layer mode to “linear dodge” your image should now look like this.

Create a new layer and select the paint bucket tool, at the top of the menu switch from forground to pattern.

From the patterns menu select your pattern.

Fill the layer with your pattern, set opacity of the layer to about 30% and the blend mode to overlay.

Now useing the arrows from the customshapes menu and the type tool add some blueprint elements to the canvas.

You can be creative as much as you like, to adjust the perspective of your arrows and text goto “edit > transform > distort” use the lines on your image as a guide to how they look. Thats pretty much it, the more lines and numbers you add the more better it will look, you could even add a few other items.

Web Design Layout #3 Tutorial

Create a new document 800×800 pixels with a white background. Select the rectangle tool and draw a black rectangle at the the top of your canvas, then add these layer styles.

Your rectangle should now look like this.

Still with the rectangle tool create a 2nd rectangle underneath the one you just created, but this time make it a little bit bigger and add these layer styles.

You should have something like this.

Now duplicate your blue rectangle and place it at the bottom of your canvas, this will be our footer later.

Now with the color #88763d select the type tool and type out your navigation, also with the color white type your site slogan and title.

You will notice i have alligned my text and title on the right, you will see why in the next few steps. Select the rounded rectangle tool and draw out a rectangle as seen below.

Here are the layer styles to get it looking like mine, first thou set the opacity to 60%.

Now you have it looking like mine add the rest of your navigation, ive also used some icons from the custom shapes menu.

Now find a picture, this can be a picture of anything that reflects your site, but for this example im going to use some grass. Once you have your image, resize and allign it like so (see image below).

On my site i want to have a members section, so i have created an example form of how i want it too look. (which can all be done using CSS).

Now im going to split my site into 3 sections, this is how i want it too look.

Now i shall enter my example content, which is mainly text.

Once you have your example content etc… im going to add some buttons for other stuff. Select the rectangle tool and draw a small long button, the same size as the buttons shown above (not a member & register now buttons).Once you have your rectangles drawn add these layer styles.

GREEN BUTTON

BLUE BUTTON

Once you have added your buttons you should have something like this.

Now all thats left is to add some details on your footer.

Heres is the full size view. PSD is available below also.

Vista Folder Icon Tutorial

Create a new document 400×400 pixels with any background color, im using a dark grey color as my background, something easy on the eyes. (#383838). Select the rectangle tool and draw out a rectangle, apply these layer styles.

You should be left with something like this.

Now goto “edit > transform > distort”, distort the rectangle like this.

Duplicate the layer then move the original layer over 1 or 2 pixels.

Duplicate the layer once again, and goto “edit > transform > distort”, distort and move it into postion (see image below).

Duplicate the layer again and move the rectangle over 1 or 2 pixels.

You should have something like above. Dont worry about the jagged lines as we’l tidy them up later. Now you should have 4 layers what we need to do now is merge them into 2 layers, so hide ALL your layer apart from the 2 sides on the left.

Then goto “layer > merge visable” do the same with the other side but remember to hide all the other layers. you should now have 3 layers, background layer the left panel and the right panel. Zoom in on the corners of your box, select the pencil tool and the color white and begin to join the corners.

When your done you should have something like this.

Tidy up the rough edges with a 1 pixel rubber.

Now select the ellipticial tool and on a new layer above all the others creare a white circle, once you have your white circle click your left panel layer to make a selection but make sure your white cirlce layer is selected.

And goto “select > inverse” and hit the delete key on the keyboard. Set the opacity of the white cirlce to about 20-50%. Do the same to the other side of the panel, but this time set the opacity to 10%.

Now set the left panels opacity to 75% to allow the images beneath it to be seen throu. Now just add your icons here’s a quick few ive made.

Web Design Layout #2 Tutorial

Create a new document 800×800 with a black background, select the color #01afee and create a rectangle. Once you have your rectangle press “CTRL + T”, now rotate your rectangle like this.

Now for this part you need some “splatter brushes” EITHER search yahoo or goto a site like brusheasy and download a set, once you have them make some randam splatters over your canvas, using the colors blue and black.

Select the type tool and add your site title and slogan.

Now if you have used two colors like mine above for your title then select one of the colors and add a splatter. If you have used white then you can just use a white splatter, you should have something like this.

Select the type tool again and add your navigation, use free transform (CTRL + T) to rotate the text.

Now im going add 3 sections to my main page which will be “news & updates”, “tutorials” & “latest work”, by the side of each of these 3 sections im going have a different icon, ALL of which are chosen from adobes custom shapes menu.

Now under each section im going to add some content.

Once you have your content in place, select a different color, im going to use the same color green i used for my title and add a big splatter at the bottom of the page.

Here i shall add my footer information.

Now last but not least, add some more black splatters around your content.

When your finsihed you should have something like this.

Software Layout #3 Tutorial

Create a new document 800×800 pixels, fill the background with the color #c4c5c0. Select the color #374254 and the rectangular marquee tool, draw a small rectangle across the canvas at the top.

Now select the rounded rectangle tool and draw a small rectangle, fill with the color #374254. Place at the top of the canvas over your blue bar.

As you can see i have a rounded edge at the bottom of my rectangle, to do this make a curve with the pen tool and delete the selection. Alternatively leave it as it is. Add your website text and slogan in your blue rectangle.

Now select the rounded rectangle again and make a box next to your header, fill with same color.

This is going to be our search box, add the word search and a white rectangle to represent the search form.

Now head over to your custom shapes and select this shape.

Make it fairly bigish as its better to resize it down than up. Fill with any color then add these layer styles to it.

Now create a new layer above your shape and make a white circle.

Now with the pen tool, make a selection like this.

Goto “select > inverse” then hit delete key on the keyboard. Set the opacity of the white cirlce to about 40-50%. Merge the 2 layers then press “CTRL + T” and rotate it slightly, You should be left with this.

Stick this shape by the search box, also adding the word go!.

Under your search box add your navigation and small divider.

Now for this bit your going to need a softwarebox, i currently already have made 2 tutorials on how to make a software box. GO HERE

Once you have made your box place it on your canvas, then duplicate it 3 times. Then add this drop shadow to all 3 of them.

Move one of your software boxes slightly to the left away from the top one, Slightly resize it down and add a 1 pixel guassian blur to it. You should have something like this.

Do the same with the 3rd box only adding a 2 pixel guassian blur to it and resizing it down abit smaller.

Now duplicate your shape you created earlyier for your search box, duplicate it 3 times and place next to your software boxes. Also add the numbers 1-3.

Add your text giving 3 reasons why to buy your product. Also add your software title and version information.

Select the rectangular marquee tool and the color #b1bac3 and draw a box around your infortmation.

Do the same again only make a smaller rectangle under the one you just made, fill with the color #babfc2.

Now select the rounded rectangle tool and make a rectangle under your 3 reasons. Add these layer styles.

Once you have added the layer styles set the buttons opacity to 60%. Now add your download text. You should have something like this.

Select the color #cccccc and make a rectangle at the bottom of your canvas, this will be our footer.

Above our footer to the right add, some text, like testimonals, or client information.

Now create another rounded rectangle, with the same layer styles as your download button. Only this time change the colors to navy blue.

Duplicate your shape in the search box and place it over your blue rectangle.

Now add some text for your members.

Thats it all done, heres a full preview of the final product.