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
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.
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.
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).
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).
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).
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%).
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”.
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).
A new simple gray level for the main container.
Duplicate the header layers for the footer. Below you can see the final background.
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”.
Below you can see the result.
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”).
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%).
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.
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.
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.
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.
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%).
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.
Edit->Free Transform (Ctrl+T) and stretch the circle as shown in the figure.
Go to Filter->Blur->Gaussian Blur and use a radius of 3-5 pixels and drink your coffee.
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%.
Create a second shadow using the same technique.
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).
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).
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.
Add a second shape (name this layer “badge-2″).
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.
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%).
Select “badge-1″ and using Direct Selection Tool (A) create a cut at the tail of the badge as shown.
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%).
Add a text and apply a hard drop shadow.
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.
Below a complete view.
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.
You can add a second button with an orange color.
Step 11 – Sidebar
Design another rounded rectangle (#fbfbfb, stroke 1px dcdcdc) and add some text as shown in the following image.
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.
At the end add the credits.
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!
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
That’s an awesome website, and tutorial!
Thanks!
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
Excelent tutorial, txh
Awesome tutorial! I love the use of the wrapping banner and the overflow of images into the different sections. Well Done!
great tutorial! Very nice and clean layout. Also, I love seeing TheWebBlend in the “Our Great Clients” section… niiiice!
cool bro..good tutorial
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
Awesome tutorial with amazing web layout
thanks so much for posting it
keep up good work
God bless you :-)
Thanks a lot, very helpful
Thanks guys… soon the html version!
thanx man.
you are the best.
Great tutorial Pier, looks good and each step is well documented :-) great job~
Thanks for comment dear Soh, much appreciated!
Impressive tutorial. Great job ! Very Creative ;)
when is the html version coming?!
You make it look so easy. great tutorial!
My favorite part is turning it into an html page.
great tutorial!
Awesome tutorial, awesome design. Just one quick question: Which creative commons is it licensed under?
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
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!
Woah Pievincenzo! That is a great tut. Now I know how to make those ribbon badge thingies thanks to you :)
html version?? soon?? aah cant wait!! =D
@Sneh Roy | LBOI Blog: thanks to you for comment, dear… you’re welcome!
@doron: html version is on-line… check the home page! Thanks!
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.
@J: ok, updated. I hope now it is correct…
This is an awesome website and tutorial. Very nice work
wow!, i like it…
thanksssssssssss…
Hello,i haven’t understand nothing about “Step 8
@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
??~~ ??~~
Thank you!!!!!!!
very nice tuts.thanks for sharing.
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
Very few design i found like this!!
Thanks…
Nice tuts! Its easy to follow and understand, even for newbie like me.
Thanks so much …
This is nice and impressive posting .
thanks
Регистрация рекламы в Москве, регистрация средств наружной рекламы. Реклама на световых коробах. Согласование перепланировки квартир по эскизу: разборка ненесущих перегородок (кроме межквартирные); устройство проемов в ненесущих перегородках.
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
QglVmI kkwapfgspokb, [url=http://apwoedmyzyqx.com/]apwoedmyzyqx[/url], [link=http://ooyrzxoksctv.com/]ooyrzxoksctv[/link], http://wuizitmvnypq.com/
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
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.
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]
Brilliant thanks! been loooking for this for ages
2 purchase clomiphene paypal without prescription azulfidine purchase norvasc online from mexico cod pharmacy norvasc buy cok n pay pal without rx purchase cilostazol online without rx ciprofloxacin precose no rx needed ethinyl estradiol order aripiprazole no visa without prescription purchase eltroxin over the counter
2 purchase disulfiram cod cash delivery amoxicillin venlafaxine where to buy lansoprazole no rx no fees glipizide cefixime purchase no prescription phenergan buying cardizem online no membership overnight delivery citalopram no prior rx atorvastatin
5 order pantoprazole cod shipping keflex order cod bromocriptine cheap no prescription required canada where to order generic levitra super active online without a prescription fluticasone without a prescription online with overnight delivery overnight order brand amoxil purchase clonidine without a prescription online where to buy azulfidine no prescription no fees order vermox (mebendazole) online with overnight delivery order meds cod fedex
comment3 purchase flonase no visa online without prescription
1 order propecia mail order glucotrol nizoral non prescription fedex overnight free levothyroxine buy doxepin/sinequan on line without a rx medications purchase naltrexone no prescription viagrx online purchase saturday delivery where can i order zelnorm without a prescription buy viagra/sildenafil offshore no prescription fedex
5 buy strattera online by fedex purchase acetazolamide online discount cheap cash on delivery combivent no prescription order letrozole over the counter online indocin clarinex where to buy generic cialis online without a rx fexofenadine order trazodone online from mexico cod pharmacy trazodone depakote
In search for sites related to web hosting and comparison hosting plans, your site came up.
6 how to order medicine online without a prescription vardenafil order cheap discounted flagyl er pain meds cheap wellbutrin sr next day medications buy ceftin cod fedex levitra super active female viagra cheap sucralfate by fedex cod
comment6 ephedra
5 captopril order amoxil cod overnight delivery no prescription needed for purchasing citalopram buy prescription phenergan without order online rx biocef without where to purchase cefuroxime no prescription no fees seroquel online fed ex clonazepam purchase cheapest hydrocodone online purchase mesalamine with no prescription
1 order topiramate online uk effexor xr buy cheap online nizoral buy free overnight pharmacy benicar (olmesartan) levitra super active buy amoxil from online pharmacy with saturday delivery olanzapine shipped by cash on delivery simvastatin no script needed cod overnight buy captopril/capoten no visa online without rx ampicillin
2 itraconazole cheap overnight premarin accutane ceftin online order saturday delivery meds no doctors rx purchase cheap tamsulosin free fedex shipping no prescriptions needed for citalopram diazepam glucotrol xl fioricet ordered online without rx
comment1 online ordering revia
Ver good site! I am loving it!! Will come back again – taking your feeds also. Thanks.
lazy boy, lazy lady, lazy girls, lazy men
There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM
Thank you taking the time to write this!
clear list or reset lists?
woh I like your blog posts, saved to my bookmarks ! .
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
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!
this is really great stuff overall, love this
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.
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!
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!
Good article once again. I am looking forward for more updates=)
very nice, its seam to be so easy ;)
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?
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!
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.
addiction has taken over the country like the plague, learn more here http://abttc.net/addiction-treatment
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!