Design a Web Template using the “960 Grid System”

Learn how to use the 960 Grid System to design a website template in Photoshop. You will be practicing layer styles to for effects and positioning elements based on the 960 Grid System.

Preview of Final Results

Design a Web Template using the “960 Grid System” Photoshop Tutorial

Step 1

Whenever I'm mocking up a web template in Photoshop I use a generic grid called the '960 Grid System'. This grid system has become very popular in web design, however I still believe that grid systems like this shouldn't be followed too strictly so the main reason I use this system is because the PSD files come with lots of guides set up already which saves a lot of time. So I'd advise downloading the grid system free from here. Once you've downloaded it open the 12 column PSD file in Photoshop and you should have something that looks like the image below.

Step 2

Try turning the guides on if they aren't already; do this by going View>Show>Guides and View>Snap_To>Guides. Below you'll see that I've drawn a rectangle showing the container where all the content will go, you don't need to draw this rectangle as the background will be whit anyway but if it helps then go for it.

Step 3

Create a new layer then select the gradient tool and choose a gradient going from white to black. Holding shift drag horizontally to get a gradient looking like the image below, you may have to try a few times to get it right.

Step 4

Select the rectangular marquee tool and drag from the top left corner down to the bottom and snapping to guide which was at the left side of the box shown in step 2. Now go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

Step 5

Repeat the last two step again for the other side and make sure its symmetrical.

Step 6

Create a new layer group by clicking the folder icon in the layers panel. Then drag both these gradient layers within the group then change the opacity of the group to 10%.

Step 7

Next I added some rectangles that look a bit like stitches, If you were doing this in CSS then you could use a dashed border so you don't really need to do this step too accurately. I've got a good tip for doing this; first create a new layer then make one small rectangle then duplicate this layer. Now hit Ctrl+T and move the rectangle down slightly then just hit Ctrl+Shift+Alt+T a few times. What this does is remembers the first transformation then the key combination mentioned duplicates the layer then applies the same transformation. If this seems a bit complicated then just create each one manually. Afterwards merge all the rectangle layers by selecting them then hitting Ctrl+E. You can now just duplicate this layer then move each layer to either side.

Step 8

Now add a title and a tagline, the one that I've used was created using only text and the font, 'Rockwell'. I used the same blue here as the stitches and if you are familiar with swatches then a good idea would be to set a blue and grey swatch that you can use again.

Step 9

Now create the menu by using a sans serif font like Helvetica or Tahoma. Now just type a few words in uppercase using the same blue color. Another thing that I tend to do especially when using all uppercase is to increase the tracking (horizontal letter spacing) of the letters, to do this go Window>Character then highlight the word and change the tracking. I did each of the menu items in a different layer.

Step 10

Now duplicate all these words and change the color of each of them to the grey color. So now you have a set of layers with the menu items in blue and a set of the same menu items in grey. This is just so that you can see what the words would look like if you were to hover over them in the real site. Only make one of each menu item visible at a time.

Step 11

Next I made a custom RSS feed icon which you only really need to add if you were planning to have RSS feeds available on the site. First I drew a rectangle using the blue color then I added the word 'RSS' using the font, 'Rockwell' in white. For the actual feed icon you can download it from here in the 'Developer Kit' and place it into your document. I then put the icon in a new layer group then duplicated the group then changed the blue rectangle to a grey rectangle, again to show what it would look like when hovered over.

Step 12

I thought that a kind of slideshow element would look good on the homepage so to figure out what it would look like I copied in a stock image which matched the color scheme, if you;re interested the image can be downloaded from SXC here. Paste the image into your document then scale it down and position it like so.

Step 13

Select the rectangular marquee tool and drag a selection box over the image (the part which you want to keep) then select the layer with your image in it then go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

Step 14

Using the font 'Rockwell' again type a wee caption with the text tool. Next create a new layer and drag the layer below the text then draw two white rectangles behind the words then change the text color to the same blue that we used before.

Step 15

To the right of the slideshow image I left a space for a small quote or maybe a 'welcome to our site' thing. I put in the quote by drawing a text box then typed a a few words in a sans serif font in the grey color. Next I added some oversized quote marks by doing each one in a separate text layer and boosting up the pt size and positioning them accordingly.

Step 16

In the middle of the page I wanted to display some news items in a sort of blog format. First I typed 'news' using the grey color and 'Rockwell' as the font. Next I created a new layer group called 'Item 1' where I would put in all the the elements that make up the first news item. Type the title of the first news item and place it within this group.

Step 17

Next I added some text which would make up the news item then a date at the top right. I put all this within the same news item group.

Step 18

Using a light grey color draw a rectangle around the first news item like shown in the image below.

Step 19

Now right click on the layer group and duplicate it then move it down and change the title. Now do this again so you have three news items then delete the rectangle layer from the second news item.

Step 20

I thought a good use of space in the sidebar would be a Flickr group display which is quite popular in design sites now and can be seen on sites such as PSDlearning and Fuel Your Creativity. Firstly put in a suitable title in the same style as the news title. Now add some images with dimensions; 75x75px, If you want you can copy the thumbnails from the sites I mentioned above then paste them in. Now just arrange them like I've shown below.

Step 21

Select all of the thumbnail image layers then hit Ctrl+E to merge them. Now right click on this layer then go to the blending options and add the styles shown below then with another line of text you should have something similar to the bottom image.

Step 22

I added an advertising space box using a simple rectangle with a stroke applied then some text within it. You can personalize this advertising box if you want so I've not gone into much details her.

Step 23

Next I added a footer area which gives some extra information like external links, clients etc. as well as a copyright notice. By know you should know exactly how to put this together so I've just shown a couple of images of it.

Step 24

The last thing I did was to add some thin lines that would act as dividers and make the page look more organized. Create a new layer. Select the line tool and set the weight at 1px and the foreground color to a medium grey. Now draw some lines in the same places that I have, using the image below as a reference, remember to hold shift to get horizontal and vertical lines.

source: photoshoptutorials.ws

Clean White Navigation Bar

Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop.

Preview of Final Results

Clean White Navigation Bar Photoshop Tutorial

Step 1

To start off with, create a new document, for the purpose of this tutorial I have chosen 500 by 200 pixels. Fill the background with a radial gradient from a medium-dark grey to a darker grey. You can do this by selecting the gradient tool from the tool box and setting it to radial. Set your foreground colour to #45443f and your background colour to #31302c. Left click in the middle of the document, drag to the right and release.

Step 2

Create a new layer (Layer > New > Layer) and select the rectangular marquee tool. Make a fixed size selection of 440 by 50 pixels in the middle of your document.

Step 3

Fill the selection with a linear gradient from #f4f4f4 at the top to #d9d9d9 at the bottom.

Step 4

We are now going to be applying a couple of layer styles to this layer.
Layer > Layer Styles > Drop Shadow

Layer > Layer Styles > Outer Glow

Result:

Step 5

Now using the text tool add in some text links. The font settings I've used are Verdana, Regular, 13 pt, Sharp, #686868 (and #ac0000 for a hover effect).

Step 6

Lastly, we are going to be adding some dividers between the links. Firstly, create a new layer and select the rectangular marquee tool again. Make a selection of 1 by 50 pixels between the first two links. Fill (Edit > Fill) the selection with the colour #b4b4b4.

Step 7

Now move the selection across to the right by one pixel (left arrow key on your keyboard). Fill this selection with the colour #d9d9d9.

Step 8

Duplicate this layer and move the duplicate layer along to the right so it is between the next two links (hold down the shift key while moving the divider to the right to keep it in-line. Repeat this process for the rest of the links and you are finished. I've also lowered the opacity of the layers by 50% so they don't stand out so much - but that's up to you ;-)

source: photoshoptutorials.ws

Web Photo Gallery

Photoshop makes it very easy to create customized galleries from scratch. The Photo Gallery wizard is a automated task and it does not require you to have any prior knowledge of HTML coding, in fact it does all the HTML coding for you & within the moment the required files are generated by Photoshop & readies it for you to upload on your websites!

 

 

 

 

 

Preview of Final Results

Web Photo Gallery Photoshop Tutorial

There are variety of settings that allows you to customize the style & looks of your photo gallery which includes colors, text, security features etc. It also allows you to add sound to your gallery to give it a more personalized feel.
In the following tutorial, I will guide you through the steps by which you can create a photo gallery for web.

Step 1

When you enter the Web Photo Gallery wizard you will be prompted to select the source folder from where your images will come from. So the first step obviously will be organizing all the photos that you want to include in your gallery in a folder & giving it a appropriate name. For this tutorial, I have placed all my images in a folder named “Flower photos”.
Alternatively, instead of making a folder you can select individual images from various locations in your computer to include in the gallery. To do that open up Adobe Bridge & choose the folder you want in the Folder window on the top left and then Ctrl/Cmd click to select the images you want.

Step 2

After you’ve selected & organized the images in a folder, you will decide whether you want the title & description of each of the images to be included in the photo gallery. Open your photo in Photoshop, go to File>File Info & enter the text in the Document Title, Author, Description etc. boxes.

Step 3

Alternatively, if you’re using Adobe Bridge, you can enter the file info as mentioned in Step 2, by opening up your Bridge, selecting a image & choosing File>File info, now you can enter the Document Title, Description etc. as mentioned in Step 2.

Step 4

Now that we are done with initial preparatory stages of selecting, storing, naming & adding description & stuffs to the images, it is time to open Photo Gallery wizard to automate the task for creating a web gallery. For this, go to File>Automate>Web Photo Gallery.

Alternatively, if you’re using Adobe Bridge, you can access it via Tools>Photoshop>Web Photo Gallery.

Step 5

Now with the Web Photo Gallery dialog box open click the Styles drop down menu for various gallery template styles. I select, Flash Gallery Style, you can select any of them you like.

Step 6

Now, if you wish, you can add your Email address, it will appear below the title of you web photo gallery to enable people to contact you. It will become a active link through which people can email you directly.

Step 7

As mentioned in Step 1, whether you’ve made folder or you’re using individual images via Adobe Bridge, choose the suitable option for your Source Images clicking the Browse button. Since, I have made a folder named, “Flower Photos”, I choose that. Also, if your folder contains subfolders, which you want to include in your gallery, click the checkmark ON for Include All Subfolders.

Step 8

Since, Web Photo Gallery is an automated task, you need to tell Photoshop where you want all the files generated by Photoshop to be stored on your computer, so click the Destination button & select the location.

Step 9

In this & in the next few steps, I will give you a brief explanation as to what various Options Menus (which are basically the coding options) stands for. Some of the options will be grayed out or unavailable depending on the style of gallery you have selected.
General: It gives you a option whether you want to save your files as .htm or as a .html coding extension. It also gives you a option whether you want to preserve all metadata (as determined in Step 2).

Step 10

Banner: In the Banner option menu, the information that you enter in the Site Name box will appear as the title of your gallery. You can also add more personalized information as you name in Photographer box, Contact Info, Date etc.

Step 11

Then, Large Images: This gives you the option to customize the appearance of your main image, when the user clicks on the thumbnail in your gallery. You can resize the images, constrain its proportions, determine the quality of image, give a border to images etc. Also, by checking the corresponding boxes, you can choose which parts of information are to be displayed from the metadata you added earlier in the File Info window as in Step 2 above.

Step 12

Next, option is for Thumbnails: Which is quite similar to Large Images as mentioned above.

Step 13

Now, the Custom Colors: Here you can customize the colors used for background, banner, text & links by clicking the color swatch to bring up the color picker, choose the colors that matches your gallery.

Step 14

Finally, Security: Here you can choose a custom text to be displayed on the main images on your gallery to guard against theft. You can also alter the size, color & position of the text. Choose None from the menu drop down list, if you don’t want this watermark feature.

Step 15

Once you’re happy with all the settings, press OK button, give a few seconds to Photoshop to create the gallery & then it appears on your web browser. Also, if after exiting the web browser, you want to open it again, you can do so by finding it in the location, you chose in the “Destination” area in Step 8, it will have a .index extension.

Step 16

Additionally, you can also include music with some gallery styles like Flash Gallery 1 & 2. To include the music, name the file “useraudio.mp3” and copy it to the folder for the gallery style you have chosen. Locate your program folder for PhotoshopCS3 (or the version that you use) and then enter the Presets folder. Within this, double-click on the Web Photo Gallery folder to open it. Now open the folder of whichever gallery style you chose and then copy your music file into it.
And, there you go, your Web Photo Gallery is ready!

Now all you need to do is to upload the gallery for all to see, of course you will need the space with your Internet Service Provider (if you don’t already have it).

source: photoshoptutorials.ws