I'm a huge fan of Photoshop, it's a fantastic tool for pretty mucha anything, however when it comes to web design my favorite tool has to be Fireworks. I've been using Fireworks since I don't know when but I can say that its vector capabilities combined with pixel precision positioning make very easy to design websites.

Also I used this design firstly to review a service that gets your design and code it for you. Then I decided that it would be nice to explain a bit of how I designed that site. So in this tutorial I will show you how to create a single page site for your personal portfolio.

Step 1

The first thing to do when designing a website is structuring. You will need to set where the elements of the site will be, the navigation, main content, sidebars, footer, and etc.. There are usability rules that are always nice to follow, as Steve Krug says: "Don't do things that force people to think unnecessarily when they're using your site" Management Consulting News. That's why we follow some standards.

In my design the whole site will be in only one page so as you can see in the image below I have 6 areas very well defined: Navigation, Featured content, Main Content, Portfolio, Contact, and Footer.

Step 2 (Navigation and Logo)

Let's start with the Navigation and logo. In our wireframe we had set a 50px height area for the menu and where the logo will be placed. With the Rectangle Tool (U), create a rectangle with 50px height and 1200px width. Go to the Gradient Tool (G) and apply a vertical gradient on the rectangle. Change the colors to #989898 (bottom) and #e0e0e0(top). Then position the rectangle to 1pixel in Y, there will be a white line between the rectangle and the stage, it will create a very nice 3D effect in our site's menu.

Step 3

Place your logo, I used the abduzeedo logo with a very dark gradient for black to a dark gray. After that add a filter clicking on the (+) icon. Selec Drop Shadow. Use 2px for the distante, 100% for the opacity, 0 for the softness, and 315º.

Step 4

Let's add the menu links. My personal site will have only 3 links: About, that will be a text about carreer and on the sidebar a list with my last entries on Twitter. Portfolio, where I will show some of my works. And the Contact, where there will be a contact form and a hCard with my contact information.

I really like menus with the Link name and a short description right below it. In my menu I used Arial Black 18px, that is a font that pretty much every computer has and we don't use it that much, with the description in a regular Arial 12px. Also I applied on the texts the same shadow I used on the logo. It will give a nice touch. However via CSS it will only be visible on Safari and the new Opera. Both have the Text-shadow property.

Step 5

In order to make a clear division in our menu let's create a divider. If you pay attention to nice 3D effects, they are very subtle and it's kind of simple to create. In this case with 2 lines with 1px width and different colors, one light and other dark we can achieve a very nice effect.

Step 6 (Feature)

Let's do the graphics part of the site. I could use Flash to create an animation or a Javascript effect. The idea here is to show the importance of the creative process when designing a page.

Nowadays we can notice that more and more sites are using handwritten elements such as texts and skecthes, also different textures and vintage elements to give a more human feeling to the site. For this design I will use a texture I created in another tutorial I wrote, the "Super Cool Frilly Bits Typography". Just download the PSD and export the background, then place it on the center of our Featured area. You will have to resize it to in order to make it fit with the layout. Also you will have to create a black background behind the texture image. That will make our layout work no matter what the user's screen resolution is.

Step 7

Here I used a screenshot from one of the recent projects I worked on and placed it on the stage. Then I just adjusted it to fit to the Featured area using the Mask featured.

Step 8

Now let's add the hand-drawn elements. Firstly I chose a nice font from dafont.com, it's called "Return of RelayScript". Also I used another font, Helvetica Ultra Light, because I think that font gives an elegant and modern feeling to the design.

For the other elements some I used the bursh tool and others some vectors from iStockphoto.com. The whole idea of the design is to show the steps of the project with the suggestions and adjustments that are made throughout the process.

Step 9 (Main Area)

For the About area, where almost all the text of the site will be, I used the Divine Proportion to divide it in 2 columns. I recommend you to read a very nice article from Smashing Magazine called Applying Divine Proportion To Your Web Designs, they explain how and why it works so well.

So, my main area was divided in 2 columns, one with 605px and the other with 397pixels, with a padding left and right of 25 pixels in each column.

For the texts, the first paragraph of the main content I used Arial Black with 20px size and 140% line-height. And I used the same to create the title of the sidebar. The rest of the text on the main area I used Arial 14px and 140% line-height in Black. However for the sidebar I reduced the font size to 12px and changed the color to gray #666.

Also, I created another rectangle and filled it with a gradient. Again, I used the 1px space to create a subtle 3D effect.

Step 10 (Portfolio)

The portfolio area will basically have thumbnails of works, a title, a little description and a second navigation to choose from Print and Web works. I created a rectangle of 1200 pixels width by 290 pixels height. I used #999 for the color and a texture from the Styles Palette called Diagonal 30px width. Also I applied an Inner Shadow to the rectangle with 0 Distance, 65% Opacity, 4 for Softness, and Black for the color.

Step 11

The thumbnails have 200x125 pixels and I added the wet-floor effect. To create this effect is pretty simple, just duplicate the image, go to Modify>Transform>Flip Vertical. After that go to Modify>Mask>Reveal All. Then with the Gradient Tool (G), use a black and white gradient and fill the image with it. Where it's black it will become transparent and the white will appear. The grays will be midtones.

Step 12

Here I finished the Portfolio with 4 images. For the title I used Arial Black, 32 pixels and Uppercase. Also I applied a Drop Shadow to it. For the other texts I used the same handwriting typeface that will be saved as image when mounting the HTML.

The second navigation used the handwriting font, but I created a circle to show the selected item with the Vector Path Tool. All the images will be shown in a Carrousel list, so the 2 icons of arrows will be the buttons to move the images.

Step 13 (Contact us)

The last part is the Contact Us. It's just a form with Name, Email, and Message fields with a hCard icon on the sidebar where the user will be able to downlond my contact information. To create the form I used the Rectangle Tool, however if you want to create forms with real elements you can download form elements in PSD from the http://www.designerstoolbox.com/. They have images of all sorts of form elements from all major browsers and platforms.

Conclusion

In this tutorial I've shown you a bit of my design process and how I come up with some ideas. You can notice that I used some references for different sites such as Smashmagazine, iStockphoto, Steve Krung, and others. It's very important to keep updated with everything that is happening, that will give you lots of very useful resources to design better and more efficient.

I created this design to review a service that gets your design and code it for you, you can check it out at http://abduzeedo.com/psd2html-review. However if you want to code, I recommend you check out this video of the John Hicks on the Future of Web Design, it walks through his process of creating a website. It's definitely worth checking out.

Click on the image to see the HTML version of this design

Download the Fireworks File

Click here to download the Fireworks file used for this tutorial

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links: