Design A Clean And Fresh Company Website In Photoshop

Design A Clean And Fresh Company Website In Photoshop
  • 13 September 2009
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Piervincenzo Madeo
  • Comments (116)»

I often think at the actual economic crisis, I am a man in a constant precariousness and I look for some good solutions to improve my daily connection with the world. Well, I have a only solution: create things, make unique stuff. I apologize. I don’t know the secrets to save the world (I’m not Batman!), but I can make good stuff in Web Design, so with the today post I will explain how to create a clean and almost serious (hard thing for me) web design for a company.

Starting the Work

First of all it could be useful to take a look at the final result (click here to see the full-scale preview). If you think this is a passable work, continue the reading for learning how to realize the layout using Photoshop.

Final Result – makingSeo

Design A Clean And Fresh Company Website In Photoshop

Step 1 – Set up the document

Cup of coffee ready. Open a new document in Photoshop 1200×1520 px, resolution of 72 pixels/inchs, and a RGB Color Mode of 8 bit.
Design A Clean And Fresh Company Website In Photoshop

Activate the rules (Ctrl+R). Setup two guides as shown in the following image to limit the the wide of layout to 960 pixels. To create the guides go to View->New Guide. Set (1) Vertical and 120 px, (2) Vertical and 1080 px.
Design A Clean And Fresh Company Website In Photoshop

The space between the guides should be 960 px, we will create all elements of the layout whitin the Photoshop guides. You could also use the 960 Grid Template for Photoshop.

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. Check it out because it can help your design process.

The Background

Our goal is to create a clean and fresh layout for a new SEO company that is not scared by the economic crisis (maybe they are Superheroes).

Step 2 – The Header Background

Choosing an height of 1520 pixels we’ve decided to develope the complete layout following a precise wireframe which is in our mind or on a page in our block-note. In this case I made a pen sketch evaluating the height (header 150 px + down-header 300 px + main container 750 px + footer 320 px).
Design A Clean And Fresh Company Website In Photoshop

Once made this preamble we can start to design the complete background for the website.
Use Horizontal guides to separate the sections (you can also drag the guides directly from the rules).
Design A Clean And Fresh Company Website In Photoshop

Create a new layer (Ctrl+Shift+N), use Rectangular Marquee Tool (M) to draw a selection in top and add #0e4968 color at the selection (right click->Fill). Go to Filter->Noise and Add Noise (Amount 1%, monocromatic).
Design A Clean And Fresh Company Website In Photoshop

Set the following style for the layer: Drop Shadow (Multiuply, Opacity 60%, Angle 103°, distance 1px, Size 7px), Gradient Overlay (from white to transparent white, Blend Mode Soft Light, Opacity 79%, Linear, Angle 90°, Scale 69%).
Design A Clean And Fresh Company Website In Photoshop

Add a second layer with a green color (#c3dd6c) using the same technique. You can use a clipping mask (right-click on the layer in the Layers Panel, Create Clipping Mask), name the layer “green bck”.
Design A Clean And Fresh Company Website In Photoshop

Add a new layer and fill it with #d4e9ff color, add noise and apply the following style: Gradient Overlay (from transparent to white, linear) and Stroke (6px, #bddafd color).
Design A Clean And Fresh Company Website In Photoshop

A new simple gray level for the main container.
Design A Clean And Fresh Company Website In Photoshop

Duplicate the header layers for the footer. Below you can see the final background.
Design A Clean And Fresh Company Website In Photoshop

Header and Down Header

We want to create a nice header with the logo of the company and a nice menu. We use the down-header section to describe, through a promotional message, the mission of makingSEO.

Step 3 – The Logo

Use the Gradient Tool (G) to draw a light as shown. Apply a Soft Light Blend Mode and set at 70% the Opacity. This layer must be added at the same level of “green bck”.
Design A Clean And Fresh Company Website In Photoshop

Below you can see the result.
Design A Clean And Fresh Company Website In Photoshop

Now use Horizontal Type Tool (T) and the font Mentone to add a string as shown in the picture (#fffff for “making” and #c4de6d for “SEO”).
Design A Clean And Fresh Company Website In Photoshop

Apply the style at the layer. Use Drop Shadow (Multiply, Opacity 20%, #000000, 120°, Distance 1px and Size 3px), Inner Glow (Screen, Opacity 39%, #ffffff, Choke 0% and Soze 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0%, Soften 2px and a custom opacity for Highlight Mode and Shadow Mode), Gradient Overlay (from #000000 to #ffffff using Soft Light, Opacity 90%, 90° and Scale 94%).
Design A Clean And Fresh Company Website In Photoshop

Use Rounded Rectangle Tool (U) to add a shape, set the fill at 0% and add the style. Inner Glow (Screen, #ffffff, Opacity 39%, Noise 0%, Choke 0%, Size 1px), Bevel and Emboss (Inner Bevel, Smooth, Depth 154%, Size 0px, Soften 2pz, angle 90°, Altitude 26°, Highlight Screen with an Opacity of 100% and Shadow Mode Multiply with an Opacity of 34%), Gradient Overlay (from white to black, Soft Light, Opacity 90%, Linear, Angle 90° and Scale 94%).
Add a simple slogan.
Design A Clean And Fresh Company Website In Photoshop

Step 4 – The Menu

Create a new text string using Verdana (12px) for the menu.
Draw a dashed grid. Use Horizontal Type Tool (T) and create a string of “- – - -”, then rasterize it (right-click on the layer name in Layers Panel and select Resterize Type). This is the baseline for the grid that you can duplicate and positionate each single line to build a nice grid. Apply the style at the grid using a Fill of 0% and Gradient Overlay. It’s clear that horizontal and vertical lines have different Angle and Style in Overlay Gradient.
Design A Clean And Fresh Company Website In Photoshop

Down Header

In this section we would comunicate to the visitors what makingSEO do. The company works!

Step 5 – Big Typography in Down Header

Add a text in the right side of this section. Use Mentone and create three layers as shown in the following image. Draw two shape using Rounded Rectangle Tool (Radius 10px) to highlights the #ffffff type.
Design A Clean And Fresh Company Website In Photoshop

Apply Drop Shadow setting Opacity 100%, Angle 120%, Distance 3px, Size 0px and color #bddafd for the blue text, #a76a1b (orange) and #8db311 (green) for the white.
Design A Clean And Fresh Company Website In Photoshop

Step 6 – Call to Action Button

Add a new rectangular shape using Rectangle Tool (U) and set the fill of the layer at 0% (name the layer “button”). Add the following style: Gradient Overlay (Normal, Opacity 47%, Linear, Scale 84%).
Design A Clean And Fresh Company Website In Photoshop

Create a new layer, set your foreground color to #000000, choose the Paint Brush Tool (B), select a Hard Brush with the Diameter of 10px, create a circle at the bottom of your rectangle.
Design A Clean And Fresh Company Website In Photoshop

Edit->Free Transform (Ctrl+T) and stretch the circle as shown in the figure.
Design A Clean And Fresh Company Website In Photoshop

Go to Filter->Blur->Gaussian Blur and use a radius of 3-5 pixels and drink your coffee.
Design A Clean And Fresh Company Website In Photoshop

Right-click on the Vector Mask Thumbnail of the rectangular shape “button”, this is a way to create a selection. Now Shift+Ctrl+I for inverting the selection and Add a Vector mask at th shadow layer as in the image. Set Multiply Blend mode with an Opacity of 10%.
Design A Clean And Fresh Company Website In Photoshop

Create a second shadow using the same technique.
Design A Clean And Fresh Company Website In Photoshop

Add a new text string and apply the style. Inner Shadow (Multiply, Opacity 20%, Distance 1px, Size 1px), Outer Glow (Screen, Opacity 75%, Nois 0%, #ffffff, Softer, Spread 0%, Size 16 pixels).
Design A Clean And Fresh Company Website In Photoshop

Step 7 – Screenshot

Add a website scrrenshot on the left side an apply Drop Shadow (Multiply, Opacity 83%, Ange 90°, Distance 2px, Size 21px) and Stroke (8px, Outside, Normal, 100%, #ffffff).
Design A Clean And Fresh Company Website In Photoshop

Step 8 – Badge

Use Rounded Rectangle Tool (Radius 10px) to insert a first shape (name this shape layer “badge-1″). Drag some guides to delimit the figure.
Design A Clean And Fresh Company Website In Photoshop

Add a second shape (name this layer “badge-2″).
Design A Clean And Fresh Company Website In Photoshop

Click on the vector mask of the rounded rectangle you’ve just created (“badge-2″) to make it active, then select the Rounded Rectangle Tool (U), choose on the the option bar Substract from the Shape Area (-), and create a rounded rectangle as shown in the following image.
Design A Clean And Fresh Company Website In Photoshop

Add the last rounded rectangle and drag the layer just below the screenshot layer as shown. Add a Gradient Overlay (from white to black with Color Midpoint at 75%, Multiply, Opacity 76%, Linear, Angle 180°, Scale 12%).
Design A Clean And Fresh Company Website In Photoshop

Select “badge-1″ and using Direct Selection Tool (A) create a cut at the tail of the badge as shown.
Design A Clean And Fresh Company Website In Photoshop

Now select “badge-1″ and “badge-2″ (Ctrl+click on the name) from Layers Panel. Right-click and Duplicate Layers. Right-click and Duplicate Layers. Right click and Merge Layers.
Apply the style at this new layer. Drop Shadow (Multiply, Opacity 30%, Angle 120°, Distance 2px, Size 4 px), Inner Glow (Screen, Opacity 46%, Noise 0%, #ffffbe, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Screen and Opacity at 39% for Highlight Mode, Opacity of 0% for Shadow Mode), Gradient Overlay (from Normal, Opacity 39%, Linear, Angle 90°, Scale 61%).
Design A Clean And Fresh Company Website In Photoshop

Add a text and apply a hard drop shadow.
Design A Clean And Fresh Company Website In Photoshop

Main Content and Sidebar

It’s time to add contents and more information.

Step 9 – Contents

Choose the Horizontal Type Tool (T) and add some text (using Verdana). You can also use some icons. Consider the icon set designed by “Navdeep Raj” for Smashing Magazine. Use the same technique (drashed lines) used in header menu to split the headings and the paragraphs.
Design A Clean And Fresh Company Website In Photoshop

Below a complete view.
Design A Clean And Fresh Company Website In Photoshop

Step 10 – Buttons

Use the Pen Tool (P) with the help of some guides to draw a button for the bottom of some paragraphs. Apply style at the layer using Drop Shadow (Multiply, opacity 30%, Angle 120°, Distance 2px, Size 4px), Inner Glow (Screen, Opacity 46%, #ffffbe, Sifter, Choke 0%, Size 5px), Bevel and Emboss (Inner Bevel, Smooth, Depth 100%, Size 5px, Soften 0px, Angle 166°, Altitude 48°, Highlight Mode Screen with an Opacity of 39%, Opacity 0% for Shadow Mode).
At the end add a text using a hard drop shadow for the style of layer.
Design A Clean And Fresh Company Website In Photoshop

You can add a second button with an orange color.
Design A Clean And Fresh Company Website In Photoshop

Step 11 – Sidebar

Design another rounded rectangle (#fbfbfb, stroke 1px dcdcdc) and add some text as shown in the following image.
Design A Clean And Fresh Company Website In Photoshop

Footer

Here we’ll insert some other useful information for visitors.

Step 12 – Designing Footer

Add three columns using the previous techniques. Use an icon in Twitter section.
Design A Clean And Fresh Company Website In Photoshop

At the end add the credits.
Design A Clean And Fresh Company Website In Photoshop

Conclusion and Download

Congrats, we’ve designed a decent frash layout for a great Seo Company. I really love this clean style. Click on the following link to download the complete layered PSD Template.
Dont’ Forget. The template is released under Creative Common License (CC 3.0 Attribution) also for commercial use.

Bye Batman!

Download Source

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

116 Comments

  1. Keith

    That’s an awesome website, and tutorial!

    Thanks!

  2. Michael Hubbard

    I must say I prefer justified text for the content area, makes it look neater I think. Very nice layout though! I like the color choices

  3. Ivan

    Excelent tutorial, txh

  4. cjdsie

    Awesome tutorial! I love the use of the wrapping banner and the overflow of images into the different sections. Well Done!

  5. Louis Gubitosi

    great tutorial! Very nice and clean layout. Also, I love seeing TheWebBlend in the “Our Great Clients” section… niiiice!

  6. mR

    cool bro..good tutorial

  7. doron

    Hey!

    I like the hole thing but! i have a question.

    Lets say you sell the webpage to someone who doesn’t have photoshop?

    Then he/she can’t edit the text on the website. So after a few weeks the information gets old. Can you make a tutorial where you explain how we can make a website made from and where we can change the text in the html code when we want to? while the website keeps looking good?

    Hope you can.

    Doron

  8. Tirath

    Awesome tutorial with amazing web layout
    thanks so much for posting it
    keep up good work
    God bless you :-)

  9. Laura

    Thanks a lot, very helpful

  10. piervix

    Thanks guys… soon the html version!

  11. mojtaba

    thanx man.
    you are the best.

  12. Soh Tanaka

    Great tutorial Pier, looks good and each step is well documented :-) great job~

  13. piervix

    Thanks for comment dear Soh, much appreciated!

  14. Improviser

    Impressive tutorial. Great job ! Very Creative ;)

  15. doron

    when is the html version coming?!

  16. Jason

    You make it look so easy. great tutorial!

    My favorite part is turning it into an html page.

  17. adnan

    great tutorial!

  18. J

    Awesome tutorial, awesome design. Just one quick question: Which creative commons is it licensed under?

  19. Asma

    MAN!!! That was awesome i really loved how you’ve organized everything. I loved your choice of color and font!

    Honestly the design is more than WOW, well done and keep it up! XD

  20. piervix

    Thanks, guys!

    @J: here you can read more about the License, but I don’t have a good relationship with law stuff, if you have suggestions, please say me more.

    http://creativecommons.org/licenses/by/3.0/

    Cheers!

  21. Sneh Roy | LBOI Blog

    Woah Pievincenzo! That is a great tut. Now I know how to make those ribbon badge thingies thanks to you :)

  22. doron

    html version?? soon?? aah cant wait!! =D

  23. piervix

    @Sneh Roy | LBOI Blog: thanks to you for comment, dear… you’re welcome!

    @doron: html version is on-line… check the home page! Thanks!

  24. J

    Thanks for the link to the license. What I’m used to seeing is “Creative Commons 3.0 Attribution”. But hey, that’s just me.

  25. piervix

    @J: ok, updated. I hope now it is correct…

  26. Tomou

    This is an awesome website and tutorial. Very nice work

  27. Irfan

    wow!, i like it…
    thanksssssssssss…

  28. jhon

    Hello,i haven’t understand nothing about “Step 8

  29. piervix

    @jhon: there are three rounded rectangular shapes and at the second we subtract a part… badge1 and badge2 are in front, the third shape (shape3) is behind the twitter screenshot.

    Download the psd file and check the layers to understand better

  30. jeedoo

    ??~~ ??~~

  31. Nimodeo

    Thank you!!!!!!!

  32. tanjila jesmeen

    very nice tuts.thanks for sharing.

  33. Steve PC Repair

    Hi
    Thanks for the great tutorial but whats next to put it into the code for a theme – i mean it must now have to be sliced up and mixed somehow into wordpress code??

    thanks

  34. Color Experts

    Very few design i found like this!!

    Thanks…

  35. Samson Delila

    Nice tuts! Its easy to follow and understand, even for newbie like me.
    Thanks so much …

  36. Asikur Rhaman Reko

    This is nice and impressive posting .
    thanks

  37. Татьяна

    Регистрация рекламы в Москве, регистрация средств наружной рекламы. Реклама на световых коробах. Согласование перепланировки квартир по эскизу: разборка ненесущих перегородок (кроме межквартирные); устройство проемов в ненесущих перегородках.

  38. free apple iphone

    now and then and I’m content to report this latest write-up is in reality more or less good quality and drastically better than 50 % the various other rubbish I read today

  39. esbmfloao

    QglVmI kkwapfgspokb, [url=http://apwoedmyzyqx.com/]apwoedmyzyqx[/url], [link=http://ooyrzxoksctv.com/]ooyrzxoksctv[/link], http://wuizitmvnypq.com/

  40. http://www.feedmecoolshit.com/2007/03/deitch-projects-rvca-limited-edition-hoodie/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  41. http://simontalks.com/2010/10/21/the-curious-case-of-the-expanding-t-shirt/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  42. http://www.lifeofmagick.com/?showb=kohler+wisconsin+room

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  43. sprinkler

    I together with my friends were actually looking at the good ideas located on your web page and so suddenly I got a terrible suspicion I never expressed respect to the website owner for those techniques. These men became consequently stimulated to see them and have in actuality been using those things. Thank you for being really kind and then for using certain beneficial resources millions of individuals are really desirous to learn about. Our own sincere apologies for not expressing appreciation to sooner.

  44. penis enlargement pills

    Thanks for the benefit of charming the at all times to talk throughout this, I respects strongly involving it and find worthwhile erudition more on this topic.
    [url=http://teethwhiteningdentistry.tv/freenaturamax/]penis enlargement pills[/url]

  45. Devin Endries

    Brilliant thanks! been loooking for this for ages

  46. EzineArticles

    In search for sites related to web hosting and comparison hosting plans, your site came up.

  47. ArticleDirectory

    Ver good site! I am loving it!! Will come back again – taking your feeds also. Thanks.

  48. Bella Bands Maternity Bands

    lazy boy, lazy lady, lazy girls, lazy men

  49. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  50. dofollow links

    Thank you taking the time to write this!

  51. how to lose weight after giving birth

    clear list or reset lists?

  52. Theodore Cholakyan

    woh I like your blog posts, saved to my bookmarks ! .

  53. Ciara Brown

    howdy blogger, first of all thanks for putting up a nice blog like %BLOGINTITLE%. i genuinely hate the fact that blog writers today focus much more on making cash and fill up their blogs with irritating ads.. i liked the way in which you’ve arranged all the content here. are you on twitter or any social networking website. i would really like to connect with you and know you properly. cheers

  54. Sandie Kingsley

    Do you mind if I quote a few of your posts as long as I provide credit and sources back to your weblog? My blog is in the exact same niche as yours and my users would really benefit from some of the information you provide here. Please let me know if this okay with you. Cheers!

  55. georgetown youth baseball

    this is really great stuff overall, love this

  56. Ricardo Luggage

    Attractive section of content. I just stumbled upon your website and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I’ll be subscribing to your feeds and even I achievement you access consistently fast.

  57. Gifts For Moms

    It’s perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Maybe you can write next articles referring to this article. I desire to read even more things about it!

  58. Giuseppe

    This guide is too difficult! in some parts does not tell you where you need to continue the item to say but for those who do not know so much about photoshop as I FTT remains blocked me!
    so why this guide is not for me! This guide is most suited to those who are attending a course for photoshop! hello!

  59. Yesenia Laurie

    Good article once again. I am looking forward for more updates=)

  60. Nerd

    very nice, its seam to be so easy ;)

  61. whiteboard calendar

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate?

  62. Get Rid Of Wasps

    Very nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!

  63. Calories To Lose Weight

    Hey There. I found your blog using msn. This is an extremely well written article. I’ll make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I will certainly comeback.

  64. Drug Rehab in california

    addiction has taken over the country like the plague, learn more here http://abttc.net/addiction-treatment

  65. creative agencies london

    I do not even know how I ended up here, but I thought this post was great. I do not know who you are but certainly you’re going to a famous blogger if you aren’t already ;) Cheers!

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US