The End Result

First let’s take a look at the final design that we’ll be putting together (Click the image for a larger version).

This design is the result of a mock request that I’ve been assigned to with the following requirements:

Your objective is to present any visitor who reaches your website with an eyeful of graphics, but presented in a very pleasant and easy to use / view manner. The purpose of the site is to showcase your portfolio, let them know who you are and how to contact you.

If you would look closely this is a really simple layout: large wood texture, simple logo and a straightforward menu and content.

Step 1

First, open up a 16-column Photoshop template from 960.gs. We’re going to adjust the document size by going to Image > Canvas Size. Enter 1600 for width and 1350 for height then press Ok. Just press Ctrl + ; (semicolon) to make the grids visible. Get your Paint Bucket Tool and fill the background with #f3f0e9. This is where everything is going to be lined up.

Step 2

We’re going to use a wood texture and place it at the top most part of our document.

Step 3

Let’s write a simple logo on the top left side. We’re going to use Georgia. 48px for the logo and 18px for the tagline.

Step 4

Create a simple menu, this time we’re going to position it on the right side just opposite the logo. For most of the text we are going to use Arial. Give each link proper spacing and you can use either the Rectangle Tool or the Rounded Rectangle Tool for the buttons. I then lowered the button’s opacity to 50%.

Step 5

Create a black rectangle using the Rectangle Tool, drop the opacity to 60% and place it just below the logo and the menu. Then write out a prominent message to your visitors.

Step 6

On to the featured work section. Grab your rectangle tool (doesn’t matter what fill color you use). We’re going to add a Gradient Overlay to add some depth to our background.

Step 7

Type in some text heading. Please notice how I align the elements within the grid.

Step 8

Create a 300×200 black rectangle and align the block to the grid. This will be the container for our thumbnails.

Step 9

I’m going to copy the thumbnails from my portfolio page (you can use whatever image you want) and paste it in our document. Make sure the thumbnail layer is above the black rectangle layer (the black rectangle from previous step).

Step 10

While pressing the Alt key, hover between the black rectangle and the thumbnail image. Left click when you see the mouse crosshair change. This will basically put the thumbnail inside the black rectangle. Then Ctrl + T on the thumbnail and resize to your heart’s content.

Step 11

Repeat Step 10 twice with two different images. After you’re finished with your thumbnails, your design will more or less look like this.

Step 12

Put in your content and do your best to align them on the grid.

Step 13

We’re almost finished. It’s time to create the footer. Create a new layer Ctrl + Shift + N. Outline a footer section using the Rectangular Marquee Tool and fill it with brown (492b16).

Step 14

Let’s put some effects on the footer background by applying a Gradient Overlay.

Step 15

Put content in your footer section.

Finished Layout

Here’s the finished layout (Click for a larger version).

As always please feel free to ask in the comment section for clarification on some steps. I hope you enjoyed my first layout tutorial in Photoshop. It’s not very detailed but I hope beginners can get something out of this. Thanks!

Step One: Pick Your Image

Let’s imagine that we’re designing a website for a beach resort. Just pick an image that is most appealing to you or an image that you would use on your website banner. In my case I used a stock image of a small ship in a beach from Stock.xchng. Take note not to pick an image with a watermark because it will affect the output of our palette.

Step Two: Pixelate Your Image

Open up your image in Photoshop, then go to the Filter menu, select Pixelate then Mosaic.

The Mosaic command will turn your image into huge pixels. The larger the cell size, the fewer colors you have to deal with but the colors become more muted. A cell size of 50 to 100 for a 72 dpi web image is enough. You might need to make your cell size larger for images with higher resolutions.

Step Three: Pick your colors!

Once you have applied the Mosaic filter, you can now select your favorite colors. You can do this is by double-clicking the foreground palette in the toolbar. This will open up the color picker dialog box in which you can get the hex number of a color.

Below is the color palette I’ve chosen. You can just list down the hex value of each color so you can use it in your CSS file.

I hope this little tip will be helpful in creating your color palettes. Do you have any other methods that you would like to share? I would love to hear them in the comments. Thank you.