Wednesday, 29 February 2012
Good news for all you guys following along with tutocity for the last few years, we plan on doing up the site and getting things all running again. First step will include a complete revamp of the sites design, next step we will start to create more tutorials including stage 2 of our famous 'Web Design Journal' tutorial where we will teach you how to turn the design into a fully working xhtml website!
 
Author: Scott Webb
Type: Photoshop
Difficulty:Medium
Description: In this tutorial we will be going through a full photoshop design of a portfolio type website.

Click on the images to see them in full size!

NOTE: To be able to complete this tutorial your should have a basic knowledge of photoshop and where to find its tools.

Step 1: Open up a new photoshop document 1000 pixels wide and 700 pixels high. Fill the background layer with black.

Now select the image you would like to use for the design. Im going to use a free stock image which can be found here. Open up your image with photoshop and drag it into your doucument. Call your image layer "Photo" and resize the picture untill it is about 850 pixels wide. Move the image so that it is placed in the center of your doument and about 90 pixels from the top.



Step 2: Now we are going to place a 8 pixel border around the photo. Create a new layer and call it "Border". Now select the "Photo" layer in the layers palette and then go Select > Load Selection. Just use the default settings and then click OK. You should now have a selection around the edge of your photo.

With the selection still active go to Select > Modify > Expand. Expand the selection by 8 pixels then click OK. Switch back to the "Border" layer and fill the selection with white. Move the "Border" layer below your "Photo" layer and you should now have a 8 pixel border around you picture.

Now select the "Rectangular marquee tool" and square off the corners of the "Border" layer just by filling them with white.



Step 2: Now double click on the "Border" layer to bring up the layer style. Click on "Gradient Overlay" and copy the settings below.





Your image should now look something like below.




 
Name: Flash Website
Type: Flash
Description: In this tutorial we will show you the basics of creating a flash based website with minimal code.
Finished Preview: