Create a webdesign company layout in Photoshop

In this article, I’ll shown you how to create a modern looking Photoshop design for your web design company. If you have any questions, don’t hesitate to ask us in the comments.

Author:

Jean-Baptiste Jung

Category:

Photoshop

This will be our final result:

1 - Create a new document in Photoshop, with 1024px width and 1300px height. Fill the background with #669999.

2 - Create a new layer. Pick up the brush tool with 500px smooth, and make a point on the top on the layout. Change the layer opacity to 84% and change the blending mode to hard Light:

3 - Now, let’s create the following layer sets for our design:
-Content
-Slider
-Navigation
-Form

4 - Create a new layer named header in the Navigation layer set. With the rectangular marquee tool, draw a full-width rectangle of 40px height. Fill it with #333333.

5 - Pick up the text tool and select the Rockwell bold font, with a 10pt size. In the left corner of our design, write the site name (In our example, it is MisterDesign) and the site navigation menu on the right corner.

6 – Pick up the rounded rectangle tool and draw a rounded rectangle around the “Home” page of our navigation. Fill the background with #669999. This will indicate the active page. Don’t forget to replace the navigation menu text layer on top of this one. Right now, we already have a completed website header/navigation.

7 - Now, let’s populate the content layer set. The first thing to do is to create a slogan. I chose “Websites that rocks”, which is probably already used by dozens of sites. But, that’s just an example ;)
Pick up the text tool with the Rockwell bold font and set text size to 36px. Write your slogan in #eeeeee color, and then duplicate the slogan layer (Cmd + J)

8 - Select the copy of the slogan layer, place it below the slogan layer. Set its color to #555555 and its opacity to 50%. Then, select the Move tool and move the layer 1px right and 1px bottom using the arrows keys.
It should look like this:

9 - Now let’s showcase our most recent design. To do so, I used a 511*309px screenshot downloaded on Flickr. Place the screenshot on the right part of the design.

10 - Once you added the screenshot to the design, pick up the Polygonal lasso tool and draw a triangle in the top right corner of the screenshot. Then, delete the selection:

11 - Draw a new triangle as shown in the screenshot below. Fill the background with white (#FFFFFF)

12 - On the left part, pick up the Text tool and draw a square. Then type some text in it. Once don, select the text, open the Paragraph Window (PS menu -> Window -> Paragraph) and justify the text.
At this point here how the design should look:

13 - We’re now done with the main content area. The next part is to design a slider to showcase some of the company best designs. Create a new layer in the slider layer set and pick up the rounded rectangle tool. Draw a 875*238px white (#ffffff) rounded rectangle. Once done, right click on the layer, choose Rasterize layer and finally rename the layer slider.

14 - Pick up the Ellipse tool and draw a circle on the middle left side of the rounded rectangle. Do the same on the middle right side of the rectangle, then rasterize the two layers.

15 - On the Layers window, click on the first circle layer and press Cmd+E to merge it down with the rounded rectangle layer. Do the same with the other circle layer. At this point, you should have a shape like this one:

16 - Right click on the slider layer, and select Blending options. Add a 5px #CCCCCC stroke around the shape. The position used is outside.

17 - Now, let’s add navigation arrows to the slider: Pick up the text tool with the Rockwell font, 10pt and #333333 color. Use the < and > symbols to create navigations arrows. The result should look like this:

18 - Let’s populate the slider with items. To do it, I simply used thumbs from previous Photoshop tutorials. The size of the thumbs is 224*179px. each thumb have a #CCCCCC 5px stroke around it. The position used is inside.
Once you added the thumbs, our slider is finished.

19 - The last part of our design is the footer. Create a new layer (named footer in this example) in the form layer set, pick up the Reactangular marquee tool and draw a 354px height rectangle. Fill it with #333333.

20 - We definitely should add a nice border on the top of our footer. To do so, I have used the rectangular marquee tool to draw a 7px height rectangle. The background color is black (#000000).

21 - Time to add a “Request Quote” form in the footer. The first thing to do is to create a title, so clients will know what this form’s purpose. I have chosen the Rockwell font, bold, 10pt, and wrote the text “Request a quote now, get it in 30 minutes” in white (#FFFFFF), capital letters.

22 - Using the Rockwell font, write the form fields. I have used a 18pt line height.

23 - Pick up the Rectangular marquee tool to draw the first text field. Width is 347px and height is 32px, filled with white (#FFFFFF) background. Once done, select the text field layer in the Layers window, and select blending options. Add a stroke around the text field using the following parameters:

24 - Once one of the fields has been created, simply duplicate its layer to create the other text fields. Once done, the result should look like the following:

25 - Select the last text field, press Cmd+T and resize it. We need to display a bigger field as the client will add his project guidelines and requirements in that field.

26 - Our form is almost complete, but a very important thing is still missing: A submit button. To create one, I have used the Rockwell font, bold, 10pt in white (#FFFFFF) color, and simply wrote “Send!”.

27 - To create the button background, pick up the Rounded rectangle tool and draw a rounded rectangle around the “Send!” text. Background color used is #669999.

28 - Our completed form should look like this:

29 - In order to fill out the empty space on the right side of the footer, what about some clients testimonials? Title is Rockwell font, bold, 10pt. Text is Georgia, italic, 10pt. Client name is Rockwell, bold, 8pt.

30 - All right, the tutorial is finished. Look at what we created together:


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

45 Responses

  • jhoysi

    While we can always learn and advance on our skills, this tutorial seems a bit basic for the audience it is geared to. A web design company, by definition, should already have these skills down.

  • Jean-Baptiste Jung

    @jhoysi: The template can be used for many other things, as such as a personnal portfolio. “Webdesign company” is mostly an example.

  • Pratap.K

    This one looks nice but i think i have seen something like this before.

  • uberbrown

    Personnally, i dont like it.!

    Things that would make it better.

    * spacing.
    * adding a title with smaller text underneath in the featured area.
    * add some line height and lower the font size of the text.

    i think you’ve proberbly rushed to get this out just so people can see the site is updated. Your going to benifit more by doing detailed tutorials.

    take a look at PSDtuts, hv-designs, smashing magazine etc… there tutorials are well documented/detailed and look pretty decent.

    NO OFFENSE…. just want to help

  • Web Design Beach

    This tutorial rocks. Thanks for sharing. As you’ve said this just as an example and basic path that other should follow and add up some own ideas while working in PS. The outcome can be upgraded and personalized for company needs.

  • Jean-Baptiste Jung

    @uberbrown: Sorry to read that you haven’t enjoyed this tutorial.
    I take your input as consideration, but keep in mind that the main fact which does that you like or dislike a design is personal tastes. I love some designs that people usaually don’t, and vice-versa.

    And about the blogs you mentionned, they’re pretty good. I know Smashing Magazine very well, mainly because I am an author on that site ;)

  • sjdvda

    Thanks for this rocking tutorial JBJ. I’m creating a portfolio website soon so this is great input. :)

    uberbrown’s suggestion that you should take a look at Smashing Mag totally got me ROFL.

  • Paulie

    Thanks for tutorial. I appreciate the time you put into this.

  • Paulie

    One thing I just took note of. Isn’t it common to use a resolution of 72? I noticed when I downloaded your file that it was 150. This threw off some of the numbers you gave. I adjusted accordingly but I did confuse me for a second.

  • Jean-Baptiste Jung

    @sjdvda: Thanks! For SM, uberbrown can’t be aware of it.

    @Paulie: 150? I’ll check out the file but this is weird. Indeed 72 is the correct resolution for websites.

  • Jordan Foutz

    You definitely make it look simple. I wish I could be a fly on the wall when people try this at home. Probably good for people who have used Photoshop extensively.

  • uberbrown

    no i wasn’t aware of it. but like i said before im not being mean by my post, just abit of constructive critism.

  • Jean-Baptiste Jung

    @uberbrown: There’s no problem with criticism, free speech is always welcome on here. I hope you’ll enjoy the future tutorials more than this one :)

  • Chem

    Thank you so much for writing such an informative post. Its no doubt a useful one.

  • solar drift

    That’s a fantastic looking design, and you make it look so easy in photoshop! I’ve been playing around with photoshop recently, but I’ll def try this tutorial. Thanks for the post,!

  • Rodney

    Great tutorial. I have been designing sites for a long time, but have recently started doing it with PS.

    I do have one question though…most tutorials I have found on the web never take it to the next step and show how to slice the psd up to do a CSS tableless site. Do you know where I can find the CSS code to display the site?

    Thanks,
    Rod

  • Jean-Baptiste Jung

    @Rodney: This is not sure yet, but I plan to write some “psd to html” tutorials, so grab the rss feed and stay tuned :)

  • Dietmar Hartje

    Nice tutorial, but especially for business websites you must have both eyes on matters of search engine optimization. And for this purpose it’s crucial to avoid image-texts. Even if you are using the alt- and title-tags.
    Anyway, the Rockwell type is a beautiful one and you use them very wise (and also very often for your templates ;) ). But business sites need to be found within searchengines and this has to be considered by the desginer during the design process.

    Just a reminder… :)

    Cheers
    Dietmar

  • Scott

    I just have one little nitpick. “Websites That Rocks” is poor English. Maybe it was a typo for “Websites That Rock” which would be the proper way of phrasing that? Great job on the tutorial!

  • Jean-Baptiste Jung

    @Dietmar hartje: Great comment, you’re right on that point. Though, if you’re using a h1 tag with the CSS image replacement technique, you’ll not have any SEO problems with the image texts.

    @Scott: Sorry for that, English is not my primary language. happily there’s readers like you who provide some help correcting my mistakes ;)

  • Jarod Taylor

    Good tutorial for beginners. :)

  • AB Web Design, LLC

    Looks pretty nice. I’ll will def use some of the methods you have outlined here.

  • Paul Nathan

    No Paulie, 72dpi is average resolution, if you will keep resolution more than 72dpi then the size of template will gradually increase(in PSD and in JPEG) and that will take much more load even to open, so better to keep less resolution and concentrate more on design, I would suggest you to download more PSD brushes from Utorrent sites and paint your template with it, Gradient templates are always attractive.

    thanks for sharing such a beautiful article

  • jake

    Please….PLEASE do a tutorial on how to code this from start to finish. I think this is a wonderful tutorial and design, and would love to learn how to code such a thing from contact form to another page. Thanks in advance and do keep up the AMAZING tutorials.

  • lucy lee

    Thanks for the tutorial, it’s easy to follow and very nice looking design.

  • Sharon Sutherland

    I am going to try this later becuase it looks fantastic. Thanks so much for sharing, and look forward to reading more rocking tutorials in future!

  • Joseph Climber

    This look like Envato’s tutorials and sites. Everybody uses this gradient on the top, and we are tired of this.

  • Mr Hoang

    Thank for post. Can I post in my blog?

    Thank again.

  • ecards

    Thanks JBJ , this tutorial really help me to understand the structure of web. :) . I’ll be back later.

  • photoshop king

    added psdvibe to my css feed, great tutorials

  • Viral Jetani

    Interesting tutorial.. i have followed it fully and created a same layout from this tutorial..

    can you post a tutorial which demonstrates how tho slice this PSD to tableless XHTML file.. I will really like to code it to html file if you can help..

  • Web Design Warwick

    Great tutorial, very good for beginners and the layout rocks!

  • Shail

    Great Tutorial ! Its the best one I found for a beginner like …can ya help me out slice it and code it into xhtml .I think a new tutorial for converting this layout into xhtml would be great .

    Thanks

  • Susi

    Thanks! Great Tutorial!

  • David B.

    Interesting tutorial. Good for beginners. I’m curious though – If you were to continue to code this, would your main body text and form text be replaced with images or font replacement? Using images for the whole page would cause some bad load/bandwidth issues, but font replacement still isn’t ‘standard’. What is your take on this? Thanks :)

  • FunMumma

    this is a great thing for begginners.. I am learning to desing templates in photoshop these days and it helped me alot .. i followed the tutorial and designed the same.. it was a great experience .. Thanks For sharing this.. i will be waiting for other interesting tutorials from you..!!

  • RWH

    Hey Jean, thanks for sharing this useful guide, which is explained very well, and easy to follow. Personally I found it very helpful as it’s always interesting to learn new tips and ideas.

  • Eugen

    Great tutorial !!! Simple and efficient.

  • Del

    Nice clean design thanks for posting!

  • hmu111

    Thanks! Great Tutorial and best website design.

  • Torres

    Great tips indeed. I am a first time visitor to your blog. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.

  • lucy

    looks beautiful, I can’t wait to have a try, thanks for sharing….the style is visual friendly.

  • radz nguyen

    Thanks for the tutorial, it’s easy to follow and very nice looking design.

  • Theo

    Nice tutorial, i like simple and straight websites, you did a great job.

    Thanks !

  • Guitar Tabs

    Fantastico :)

    thank you.

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors