Product’s Web Design
Posted in Photoshop Tutorials on 08.4.09
In this tutorial I’ll show you how to make a web design for your product or software.
Final Result
This is what we are going to make.
Step 1
Let’s start with a 1100×1400 px document. Select Rectangular Marquee Tool, at the top menu set it’s Style to “Fixed Size” and set Width – 950px, Height – 35px. Create new layer, call it “Top Navigation”, make a selection at the very top and fill it with #1584d4. We will add navigation a bit later. Now we will add place for Product’s preview, features and other stuff you need. Now set Renctangular Marquee Tool’s “Fixed Size” to Width – 950px, Height – 270px, make a selection under the “Top Navigation layer”. Create a new layer, call it “Product Preview”, fill it with any color and add these settings.
Now take Rectangular Marquee Tool and make another selection under the “Product Preview” layer, Create a new layer, call it “Product’s Info” and fill it with #e5e2d0. Create a new layer, call it “Product Features” and make the same as for “Products Info”, just change fill color to #cde5f6. Create the last layer, call it “Footer”, select the white space and fill it with #d7d7d3. Now after Layer’s “Product preview”, “Product’s Info” and “Footer” add 1px #ffffff line. That’s what we got so far.
Step 2
Now when we got place for tect, let’s begin with a “Product’s Preview”. Find a shiny picture with any device or software box and add it at the left of “Product’s Preview” layer. Then Just add your product’s heading like “Brand new iPod is here!” and under him with a smaller shrift add a short text to preview your product. For the heading add these settings.
Now select Rectangular Marquee Tool, make a small Rectangular’s selection under the short text(it will be a button), go to Select->Modify->Smooth and set 10px parameter. Create a new layer, call it “Button” and fill it with #00477a. Add a #ffffff text something like “Try It Now” or “Read More”. That’s what we got so far.
Step 3
For the “Product’s Info” add two columns with a #000000 text, use bigger font for the headings.
For the “Product’s Features” add one heading with text like “Why you should use iTunes” or “Features of iTunes”, under it add two colums of features, at the left of each feature add a small icon, it can bee an arrow or a tick.
Step 4
For the navigation menu use #ffffff and a font like Arial or Verdana. Make sure the first menu’s item is at the same line with Heading of product.
Step 5
At the footer add a copyright, make font’s color #929272 and at the rght side add a smaller menu’s copy, make font’s color #5b5b45.
