How to Create Business Template in Photoshop

Hey folks, in this massive tutorial you can watch and learn how full design process looks like. We will create a full designs set for ghost company and then we will fly thru the process of cutting and adapting scripts. All you really need is just Photoshop and some basic text editor.

---

---

Preview of Final Results

---

How to Create Business Template in Photoshop

---

Details

• Program: Adobe Photoshop CS4
• Difficulty: Hard
• Completion Time: more than 4 hours

---

Resources

• blank html template

Copyright notice

In my design, thanks to kindness of PPUCh Tarczyn LLC, I am using two images that I'm not the owner of. However PPUCh Tarczyn LLC allowed me to use them in my tutorial with a restriction that they will not be populated, so you won't see them in finished template nor in psd file. The one is CO₂ evaporator machine, and the second are lamellas in the header. I will use them as an example of importing client's images into design. You can not as well copy them from tutorial's images and using on your own. The rest of output of the tutorial (including html template with images and psd source) is under photoshoptutorials.ws license. The satellite image on the map in contact page is licensed to geoportal.gov.pl.

---

Download the Source File

JA Room.zip | 0.53 MB
Download from Website

---

Business Template Photoshop Tutorial

---

Step 1 - Starting a new document

All right, let's make some design. I will just admit that this design is based on a real order and was made with client's guidance. We have a lot to do so we want every step to be as fast as possible. We need some guides to help us determine designs borders, for we will make our design 980px in width, but we will work on wider document. Math won't hurt you, believe me. However the time would do so. We are going to make a document with guides the fastest way I know. I call it 0/100. The thing is that I play with canvas size and adding guides only on 0px position and on 100%. Did you ever notices that some of Photoshop inputs has absolute unit while some of them have units typed next to value? Like this:

And this:

On first image there is no chance to change the unit, because pixels is written on label rather than inside the input, so it is absolute. But try change the unit on second image from px to percent. See? It is possible and works! It should work every time when input has a value of it's parent element - in percent case.

Now you will se what's the trick is all about. We want our document to be 1200x1845 pixels. Now we want to have two guides that will center the area of 980 pixels. How to make it? Create a new document that is 1200px wide. Then divide this value by two so it will be 600px. Our design is 980px wide, we are dividing this value on two as well (490px) and then adding and subtracting it from documents center so we will have 600-490 and 600+490 which will give us 110px and 1090px. This could be problematic if someone can't count quickly in mind and have not round dimensions. Yet there is really easier way that I'm using everyday and it requires a minimum of math. We want 980px design with inside margins of 20px each side (for safety reasons). Thus we are making a document of 940x1845 px and adding guides on 0px and 100%.

Then we are going to Image > Canvas Size and typing 40px in width (with relative measuring checked) for we want 20px each side.

And again we're adding guides on 0 and 100%. Then we are going once again to Image > Canvas size, but this time we are leaving relative unchecked and typing 1200px in width. Quickly and with minimalized possibility of mistake. And we have our blank document done. It is 1200x1845px as we wanted and have centered area out bounded by guides.

---

Step 2 - Noisy background

It's going to be pretty easy step. Noisy backgrounds are quite popular these days (hmpf) and you probably have done more than one before this, but anyway I will show you how I am achieving them. Noisy backgrounds make design a bit grungy and they perfectly fit to solid colored shapes. Truly, they are overused. You can see them in most of modern designs. However, if they were bad, they wouldn't be used, right? Slight noise is really old trick, and it didn't came as design trend of 2008 or 2009. It is old as... it's just really old. Every digital painter knows the power of texturing which noise is really simple kind of. And texturing in web design existed for a long of time as well. I think noises gets massive because of it's ease of creation. Not only you get texture, it is also seamless, for sure. Alright, let's make some noisy pixels. First of all, create a new layer and fill the whole area (SHIFT+F5 / Edit > Fill) with some light color like #efefef. Then go to (surprisingly?) Filter > Noise > Add Noise and type into input box something like 2.5px, set distribution to uniform and check monochromatic. Then go to Filter > Blur > Gaussian Blur and use 0.5 pixels radius. And that's it.

You can eventually go to Filter > Brush strokes > Accented edges and again to Filter > noise > Add noise (same settings as before) so you will have more organic texture. But here I will use first one.

---

Step 3 - Header background

First off, start with a horizontal guide. Level it on a height you want your header to be. I didn't measured it really, just placed by eye. We will hold there nothing more but logo and search form. We need to be sure it will fit. Then make a shape, rasterize it later on (right click on layer in layers window and choose rasterize) and add a bit of noise as well to this shape (like 1.5-2.5 of percentage amount with monochromatic).

Then make a selection like this one...

...and fill it with gradient of some lighter color so you will get something like this.

Then go to Filter > Blur > Gaussian blur and blur it a little (radius on 6-10 pixels) so you will have smooth edge like here.

Use eraser tool and erase boundary parts so you will leave gradient only in the center. Use soft brush to do that. Here's a tip: Make first erases with 100% opacity to smooth the edges and then lower it to 30% and make even smoother, long transition.

Now create a selection of base header's shape, pick some dark gray color and add really small gradient on bottom. On the image below you can see gradient with 100% opacity. I lowered it later to 33% so it is really slightly visible.

And add another gradient on top. You don't have to make a selection here for it will won't extend the shapes boundaries for sure. Notice the start and end points of that linear gradient. Thanks to their places gradient will take a bit strong look.

I have added another- this time radial- gradient on the header background. Then deleted the part of top's shadow (CTRL+Click on layer in layer's window and hit delete). Oh, of course you are creating everything on separate layers. As you can see I have added some texture to the gradient, but actually don't bother to that. It will be mostly unnoticeable. It's just my habit to make gradients without pixel bounding. You can instead use Filter > Noise > Add noise so you will get similar (a bit weaker) effect.

Then change this gradient's opacity to 55% and blending mode to Overlay.

The header is finished. Now we're heading to add some logo and search form to it.

---

Step 4 - Header elements

First off, I have prepared some logo of ghost company. It really doesn't exist. Will not show you how to achieve it, you'll place your own logo so it is pointless, but I will show you how to add a bit of life to solid shapes. All right, start with logo. Place it next to the guide. I won't hide that I choose colors regardless to design. In fact, when you have a logo from your client it is important to fit it to the design. So you are creating whole design to fit the logo design (shape, colors, placement) or sometimes you are allowed to use grayscale logos so it is easier to fit them elsewhere.

I want to add some lights and shadows to logo, but it is semi gray on some parts, if I will add a shadow it will be slightly visible, so firstly I duplicated this layer and moved the one below 1px down. Then gone to Image > Adjustments > Brightness/Contrast and moved Brightness bar to -100. I also used a Gaussian Blur with really small radius so it is not so sharp on edges. We have easily done shadow underneath the logo.

For now all the layers in this step will be created as a clipping masks. I have written about benefits from using clipping mask layers so I will not duplicate my content. Remember also to make as many layers as possible in case if you will want to change something later. Here's a sample.

Use transparent gradient with darker color than the logo and apply it from bottom to top. That will stay for a shadow.

If there is need, set this layer's blending mode to multiply. As you can see you can make a gradient without any selection and we are 100% sure it will not outbound the shape. Let's make some lights now. I've used two radial gradients, one for gray part and one for all shape that is really big and white, but its blending mode is settled to Overlay.

For pop up the shape we can make some emboss. It's fast and simple task. Make a selection from logo (CTRL+Click on layer in layer's window) and fill it with white color.

Do not deselect the image. Also make sure that you have active some selection tool so you could move a selection around image. Hit the left arrow on the keyboard so the selection will move 1 pixel to the left. Then hit DELETE. You can lower this layer's opacity to something like 75%.

---

Step 5 - Search form

We will make a search form without a send button. Its action will be passed to a search icon that is (visually) inside the input box. Actually it is common to send the form with Enter/Return key but for some reasons it is also good to make a clickable sender. Okay, use Rounded Rectangle Tool to make a white shape like this, align it with guide.

Duplicate this shape and change the color to some light gray (like #9b9b9b) by clicking on the color indicator next to layer's name.

Now you can rasterize both layers. Let's make some naming system here for better clarity. The white layer will be 'base layer' and the gray layer will be 'shadow layer'. Okay, so head to the blending options of base layer and apply these settings:

Now blur a little with Filter > Blur > Gaussian blur our shadow layer, but really, a little, with radius like 0.5 to maximum 1 pixel. You should get the following:

Create a clipping mask layer clipped to a base layer and apply a bit of gray radial gradient.

Now you can add a sample text and a search icon. How to do one? It is a piece of cake. I will show it on separate document. Firstly, create a circle shape, pretty big and duplicate it.

Then go to Edit > Transform > Scale and scale down the copied layer. I've changed it's color for you to see, but it actually doesn't matter. After transformation rasterize both layers.

CTRL+Click on the thumbnail of copied layer (red one), select the base layer in layer's window and hit DELETE on keyboard. Then delete/hide copied layer and you will see a circle like this one.

Draw rectangular shape (could be rounded) somewhere under the circle. Then hit V to select the move tool.

Now select both layers in layer's window (use CTRL or SHIFT) and while you have move tool active, click this icon so the shapes will center theirs middle points.

While you have still both layers selected, go to Edit > Transform > rotate and add the rotation to the shape of about 35-45 degrees. That's it.

Merge the shape and paste it to the layout, then scale it down and add a bit of white shadow in blending options so it will get a bit of pressed effect.

---

---

---

---

Step 6 - Main menu

Our main menu will be very, very simple, but, we will add a call to action button next to it so actually the whole menu will pop. It's strongly vivid among grayscale colors so it will always grab attention. First off, let's make that call to action button. I will try to make its width the same as a search box, so you can add some guide there. I've created the shape with color #e55a21 and rasterize it right away.

Duplicate it and move copied layer (the one below) 1 pixel down (with arrow key on your keyboard), then go to Image > Adjustment > Brightness/Contrast and apply similar settings, so you will get simple shadow underneath the button. Also blur it with Filter > blur > Gaussian blur by 0.5 pixel.

Now we will create few clipping mask layers to bring some life into the button. Start with a gradient from bottom to top with color #ce4614. Change its opacity to 10-35% (adjust later) and blending mode to multiply.

It could be hardly visible for now, but we will make such color transformations that you will really consider its 10% opacity. From the top center make a small radial gradient with color #f9b242.

Make a selection from the main button's shape (CTRL+Click on the thumbnail in layers window) and fill it with #ffd47b. Then go to Select > Modify > Contract and apply 1px reduction. In the end hit DELETE on your keyboard so you will get 1px inside border around the button.

Reduce its opacity a bit, to about 80% and set blending mode to Overlay. It's a small detail, but actually gives a bit of contrast.

Also make a white rectangle with small opacity (10%) starting from below the center to the top.

Now we will apply a blending layer. You can set it as a clipping layer or with a mask. The matter is that you want to apply it only to the button, not to the whole layout. Click this icon to bring up the menu and choose Vibrance. Then slide the Vibrance value to the positive numbers until you'll get life, vivid colors.

Add some text to it (I used Arial font for letters and Georgia font for numbers for I love it's text numerals) and eventually apply some simple shadow with blending options. Here's finished Call To Action button.

Now we'll create simple shape for menu items. Add guide on top of our call to action button, to align shape with it.

Now create a rectangular shape (try to use same radius as for button) all long the layout so it will touch the border guide. The height of the shape does no matter, but try to make it longer than a button. Use white color.

Rasterize the shape. Then make a selection from it (CTRL+Click on thumbnail), go to Select > Modify > Contract and apply a contract of 1 pixel. Select some marquee tool (any, just press M) and move a selection 30 pixels down (with arrows on your keyboard, hold SHIFT to move by 10 pixels rather than by one).

In the end hit DELETE so you'll get the following:

Make a long rectangular selection and delete also the stripes (that are left after the contraction) if they are too long.

Now just add the menu items and it's finished. I also added small noise to the finished shape, but not so hard as a background so the shape is still noticeable.

---

Step 7 - Main menu hover effects

The menu is actually created, but we also want it to have hover (and for one item- active) effect. We will make a mock-up in Photoshop of some sample hover and then in future steps we'll port it to css. The active effect will be created for login panel. Create a background for this item the same way that we have made an orange button next to it. Just don't add shadow and make border only on top and bottom edges. The rest can be fully reproduced.

You can hide this layer now on. We just know that it exists. Alright, pick dark color, like #2c2c2c and make a shape along the guides. I made it for 'About' menu item, but it is best to choose the longest one (if they are declared). Also change the font color of part that is theoretically hovered to light gray: #ededed.

Add shadow:

Highlight:

And border, so it will look more attractive, yet will be pretty insensitive for scaling its width.

Oh, here's a tip. For small fonts I generally use no anti-aliasing. I apply Strong or Crisp when the font size is bigger than 20 pixels. Most of text will be altered with real one in html and this is only mock-up, but I think it presents itself better.

---

Step 8 - Sample slider mock-up

We want to display a products within a slider. Firstly, let's make some guides to determine the space for it. Mine is 278 pixels high which is, actually, pretty random value. I just thought that this area will be fair enough to hold that task, didn't thought about it in aspect of pixels.

Let's start now with navigation arrows. We want our slider to be infinite loop, so the states of an arrow will be: normal, hovered and clicked. We'll prepare different styles for all three states. Lets make a circled shape with color #858584.

Zoom in so it will be easier to work on that small area. Add some simple shadow underneath the shape.

Now we will try to make shape more attractive by adding some gradients to it. The best way for that task are clipping layers. So now add all gradients (and future color transformations) in a clipping layer masks. Start with a linear gradient with darker color than a shape itself but not as dark as a shadow.

And add some light radial gradient as well but on the top of shape. You can also make a small line to separate the shape from it's shadow.

Now create some arrow. You can use here a type tool and just define the font that has pretty '<' sign.

Then set its Fill to 0% (in layers window below opacity) and apply blending options to that layer as follow:

Create new adjustment layers- Color balance and vibrance- with masks or as a clipping mask layers and apply these settings:

Color balance layer will be the state of hover effect, and a vibrance will determine the click state. Alright, now put all of the layers we have create to a separate group and change it's blending mode to Linear Light so you will get something like this:

Duplicate the group, Flip horizontally (Edit > Transform > Flip horizontal) and place it on opposite side of layout. Now place some sample product's image and with type tool make some title and sample description. Use some dark, gray colors for the text.

Make a button the exactly same way that you have created a call to action button in our menu, but here instead of orange tones, use grayscale.

Now we'll add a separator from main content. With Single Row Marquee Tool create a selection that sticks to the guide and fill it with white.

Move your selection 1px to the top (with keyboard arrow) and fill it with black, but lower down the opacity to 16%.

As you still have a selection, move it once again 1px up and then go to Select > Transform Selection and drag its upper edge to the top.

Inside the selection create two gradients with dark color, one smooth and one sharp (both could be on one layer), following the red and white arrows.

Then change this layer's opacity down to about 15%.

---

Step 9 - Main content

On the very top of content area add some title and sample text. Again, for the title I used Georgia and for the text- Arial font.

Below make titles for a bullet list and a clients box.

Now I will show you tricky way to create a mock-up of bullet list quickly in Photoshop. As you know Photoshop is made for raster graphics and don't have a lot of options that touch the text formatting. However, got enough to fulfill our needs. With type tool select are where you will type text and add some sample that you want to bullet out.

Select all the text, go to the character options and set the leading to about 22pt so you will spread lines a bit.

Now place your cursor on the beginning of the text (in edit text mode of course), hold left ALT and type 7 on your Numeral keyboard and then press two or three spaces. If you don't have numeral keyboard, just copy and paste this bullet: •. It's look depends on font we use.

Now easy task, select, copy and paste our bullet with three spaces in every new line.

Select all the text and go to Paragraph options this time. Change indent first line to some negative value and be happy with our perfectly aligned mock-up of bullet list.

Now we'll create some hover state. Select on of the lines and make it white. Then select two lines (the white and one below) and change the leading to some bigger value, in my case- 30pt.

Now on, under the white line create a rounded rectangular shape so it should look like this. I used #f27600 color.

Add some simple shadow to it, but make it as a layer, not with blending options; thanks to this we will not have cutting issues while we will convert it to html/css.

And now apply the same effects when you were making a 'call to action' button, I mean dark linear gradient from bottom, light radial gradient from top and light divider- a shape that covers only a half of a main shape. Here are step by step images:

I also added some sample clients' logos, but it will be easier to work on their alignment in css, so it is pure, not measured in any way, mock-up.

---

---

---

---

Step 10 - Newsletter

This step will be based on copying previously created elements, however will build nicely looking end of the content that also has its function- newsletter form. Start with a 1 pixel height line that is spreader from beginning to the end of body of the layout. Make it dark, even black, but lower it's opacity- in my case it's 20% with dark gray color. It has to be visible, but subtle. Because of the low opacity it will inherit a bit of texture from the background. I know it's not a big deal in this example, but save this advice to the future.

Type in title with Georgia, additional info with arial and just copy the search form- replace an icon and delete the gradient.

Do you remember how did you made a shape for main menu? Well, try to reproduce it here, but make in flipped vertically and alsospread it on the width of whole content area. Here it is as a black shape for you to see. Ofcourse you should use white color with slight touch of noise.

---

Step 11 - Footer

Create a new group for footer, but make sure it is under the newsletter so the previously created shape will overlap every element from the footer (I mean- background).

Make a shape of color #333333 that covers whole bottom part of layout and add a bit of sharp gradient on the very bottom. If you don't have a space, or have it too much- use Crop Tool. You can use it both ways- to shrink the document's canvas as well as to extend it. Even if your space is okay- try it. It's a small tricky thing that not everyone knows about, however is pretty useful.

Add some additional navigation:

Next we will add some other elements that should be aligned with this one, but anyway we will recreate it in html/css. If you really want to, use a guide or move tool aligning options. Alright then, add a title for the partnership form and help info. Then add a simple form and the button we created previously for the slider.

Finish the footer with fast contact elements and we're done with main page.

The whole layout looks like this:

Save the document as index.psd or main_page.psd. Doesn't really matter, it's just for you to know what is what. Notice the content part that is outlined with red color. Delete all the layers that are inside (or eventually hide if you don't mind megabytes of RAM taken by mostly unneeded layers; in fact we could make use of some but it's better to just leave those we will need) and save document once again using SAVE AS option. Save it as blank.psd.

---

Step 12 - Single product's page

Okay, so for now we have something like this. It's our blank document- it's opened. Save it right away as single.psd so we will, after 'saving as', work on single.psd document and blank.psd will stay untouched.

We want to have here an image, description, some unordered lists of functions and a small gallery. I always try to make a draft, even with mouse and brush tool. It's essential to distribute everything so you will have a space for every element. You know- it should be simple but informative. Informative for you.

Here's a tip: If you are wondering how did I created so straight lines with brush tool, get this tool into your 'hands', click anywhere on the document, hold down SHIFT key and then click anywhere else. You see? The line was just created from first click to the second. This feature is very useful for me in planning part. Okay, as we planned, or actually- I planned- place a sample name for the product, create a line (or duplicate it from newsletter set) and use a button to make a hyperlink to the catalog. All the elements here were made previously.

Add a sample image and description. Remember, guides won't tell you how big elements should be. You will tell guides where they has to be. That's wy grid systems are... bad. I didn't wanted to use that word but can't name it other way. Anyhow- they tells you in some way how big your elements should be and where they must be placed. You can't create anything that is unique. Thankfully we are not using any grid system. If you are, unfortunately, using it... Well, maybe try to do something without them and inherit grid system to your projects when you will be ready for it That's mean- when you will know how to design for grid systems without strict grid system. Let's back to the topic: Add your content (that includes all text elements like description, titles and lists) but leave some space for the gallery.

Separate the content from the gallery (it's blank now) with the line copied from newsletter.

Truly I will say that I have made few measurements and make a thumbnails to perfectly fit the blank area. However we can make them bigger or smaller in html- it's just a mock-up above all. Create a white shape and add to it a slight border in blending options. The size of this shape is exactly 100x100 pixels.

Create another one inside it that will be 80x80 pixels. To make exact values use Rectangular marquee tool with style set to Fixed size. If you want to align them- use move tool options.

Copy any sample image to the clipboard. CTRL+Click on the thumbnail of the smaller shape so you will get a selection. Then go to Edit > Paste into and you will have a clipboard image placed iside a mask of selection, like this:

Dupliacte this layer six times and move them along the layout, but make sure that last box touches the last grid. Then pick move tool, select all the boxes' layers in layer window (you should make each box in each group, otherwise it wouldn't work, so actually you should select groups) and then click Distribute Horizontal Centers on the top bar so you will get perfectly aligned boxes:

As you can see I also made some hover state for a thumbnail. I had a bit of space so also copied three boxes one line below. And the layout for single product is done. Save it and close...

---

Step 13 - Contact page

Save it and close, then open blank.psd once again and use Save As to save it as contact.psd. And again- blank.psd will be untouched and we will work from now on contact.psd document. Contact form that you see below is builded on search form, but a main shape has lowered opacity , and also icon and gradient are deleted. Not a big deal so I won't show you how to make it. In the end we will need a single example to convert everything to html/css. The button is taken from previous steps. Nothing special here, but...

... I would like to describe in this step the map creation. If your client will accept some third-party maps like google-maps addon, then you would not have a lot of work here, but other way you will have to make it AND as a designer you want it to be attractive. In this step I'm going to use a satellite map, however it is best to use handdrawn elements. Above all the map is pretty simple because it is not a tutorial dedicated only for a map so I have limited space. However, with few simple tasks we will convert boring shape to nicely looking layout's element. It's good to start a map creation on the new document. Let's do so.I actually doesn't matter what dimensions you will use, but there should be at least 900 pixels in width. Map is panoramic, so height should be relatively smaller than a width. Let it be your intuition that will choose a correct dimensions. Don't worry if you will create too big map, for some reason there is Scale funcion in photoshop, right? And remember- it's always better to scale something down rather than stretching out. Always, unless you're working with vectors. When you will have a blank document- add vertical guides on 0%, 25%, 50%, 75% and 100% and horizontal on 0% and 100% like here:

Then go to Image > Canvas Size, check the relative box and type 40 in width and height so we will have canvas extended by 20 pixels each side.

Now fill the whole document with white. Then create a rectangular selection within a guides. Copy your map to clipboard and then go to Edit > Paste Into so you will have fastly map inside a mask. If it is needed, use Edit > Transform > Scale to make it fit.

We are going to make a map based on four layers so all the transformations will be super easy. Start with selection showed below, go to Edit > Copy Merged and paste the clipboard into our layout.

Another selection, again- copy merged and paste to the layout.

Yet another, I suppose you already know how the last gonna looks like, but I will show it anyway just in case.

Turn this messy stack of layers

Into an organized stripe:

Make a group of those four layers. Select them in layer's window and hit CTRL+G. After that, select background and then with CONTROL select our newly created group...

... pick up Move Tool (V) and choose Align horizontal centers.

From now on our map should be perfectly centered on the viewport. Now we will make some simple transformations. Select first layer and go to Edit > Transform > Skew. Change the anchor point location and then type negative value into Vertical Skew.

Make the same with second, third and last layer. The stripe should be continuous, so remember to change anchor point and vertical skew accordingly to the situation, like here for second layer:

As you can see anchor point is on a right edge now and a skew has positive value. I have zoomed in image in the corner when two layers met to choose the right value for vertical skew. If the layers has the same dimensions, the value would not change, but here inner layers are smaller than the first and last. Here how it looks like for third and fourth. I hope you would already do that without these reference images.

Now select all four layers (but don't merge them) and go to Edit > Transform > Perspective. Make something like this.

Then go to Edit > Transform > Scale and scale the map vertically so you will get the following:

I have changed colors a bit and used Burn and Dodge tools on the pieces of map to give it a bit of third dimension look. Legend: Red spots idicates burn tool and green- dodge tool. Remember to switch the layers.

Now on we will add even more shadows. You can place the all shadows on one layer. Chenge blending mode to Multiply, pick some dark color and make a selection from first layer, then place some gradients here and there. Replicate this effect with all four layers. Thanks to this we will nicely enchant the edges.

At this moment I have added a bit of smaller effects that you can find out in psd source file. Here's how to make a shadow under the map. Create a selection like this one and fill it with dark color. This layer should be under the map.

Deselect and use Blur tool to achieve something like that. Notice: closer to the corner- less blurred shape.

With Eraser tool smooth the inner edge of the shape.

Replicate this effect to achieve this:

Seems like we're done. Just add a map sign and that's it. Mine is a mix of three effects shown before. Colors and lights from the menu button, skew and blurred shadow. Give it a try before we will go to the cutting part.

---

---

---

---

Step 14 - Cutting to html

It's good to have some blank html and reset css files in your inventory. It's like an action in photoshop. You don't have to write/copy everything hundreds of times. Just copy reset css and blank html to your project folder and you have a fast start. Here, you can download my blank template as well. Right, let's start to reproduce our main page in html/css. Open up in photoshop our psd file with main page mock-up and hide all the layers except noisy background. Then make a selection, about 200x200 pixels. We don't have to worry too much here because this pattern will be seamless for sure.

Go to Edit > Copy merged, so everything that is under the selection will be copied (in case you have a background on more than one layer) and then go to File > New. As you can see width and height has automatically the values from our copied selection. In new document go to Edit > Paste and then to File > Save As. Save the file as a background.jpg (with maximum quality - 12) in 'graf' folder from my blank template (Or in any other folder, but later on remember to change the paths in my css codes). Don't worry about the images' weights too much for now. Save everything with maximum quality and later on I will show you how to shrink them. Alright, open up index.html in your browser. It's blank. Then open up index.html in some codes editor as well as style.css. Even notepad could be, but of course there are better choices. Update html's style in css by pasting this code into it:

Now refresh your page in a browser and see the first effect. By the way, you should have some basics about html because in this tutorial you won't see deep basics about webpage creation. However I will try to explain as much as possible.

---

Step 15 - Coding Header

Firstly, we will need some html to work on. So let's try to separate all the elements that we have on our mock-up. A repetitive background, a non repetitive background (gradient), logo (image) and a search form. Let's try to add them. Remember to delete the html comments that are inside "" tags.

Now let's cut some images. At first we will need a guide that will separate a header from menu (Select menu shape or whole group so guide should easily stick to).

Hide the layers with gradients so the header's background will be repetitive in x-axis (horizontally). Select few first pixels and like we did with first background image and all next images follow the standard actions: copy merged > New document > Paste > Save As (jpg or png). Save this one as a topbg.jpg.

Now select the whole top WITH gradients and save it as a topgradient.jpg

Here's css for the backgrounds:

The body's background may not be displayed correctly (fully) by now for the body is as long as the header. But when we will add another components like menu and content area- it will be ok. By the way: I actually cut all the images that I will need before I will write any html and css code but herenow we'll make it step by step. Alright, next thing that we will need is a logo. Mine has a dimensions of 296 by 76 pixels and is saved as a png so the background is transparent. There were days when png format has not been supported by web browsers ( I mean IE6 ) but that was ages ago and nowadays every modern browser supports it (even animated png which isn't really popular) so you shouldn't worry about it. By the way: do you know anyone who is using IE6 by now? Just wondering, because I don't. Okay, so we have a logo, here's css for it. Html was added earlier. It was named logo.png. You can use ruler tool so you will know how far it is from top.

Now we will need some background for search form. Hide all unneded layers and select a search form. Your selection don't have to be perfect. Notice that if you will create a new document it will apply dimensions not from the copied selection, but from the boundary of existing pixels. Name it searchbg.png. Remember, we are saving layers that has any transparency as a png. The rest is jpg.

Here, grab this code for the search form and search icon.

As you can see, the real input form is hidden.

---

Step 16 - Coding Main Menu

Let's start with some div-wrappers in html along with code for menu (unorganised list) and call to action button.

As you can see, in the a tag (whole button) there is a span tag which we will use to change the font of '2011' from Arial (inherited from html property in css) to Georgia. Ok, so let's go to cut some images out of psd file. We will need a whole menu shape, two backgrounds for menu items and a background for call to action button. I checked in psd that our menu is 49 pixels high- measure distance between two guides. Here are the elements that you have to cut out.

Remember that we wanted to have two states of call to action button? Alright, cut out the background to the new document, but don't save it yet.

Now make a Vibrance layer (or some other adjustment layer) visible, copy merged and paste it into the previously made document (not the new one, but those with button) so you will have two layers there. Now go to Image > Canvas size, check relative checkbox and into a height type the actual height so it will double.

Move one of the layers to the bottom (it should stick to the edge) and now save it as a calltoaction.png.

Thanks to this we will make a css hover effect without an image loading delay. Alright, so the last part is css code. I believe it is self-explained, but I made few comments here and there. I used 'background-size' property (to stretch background) that was introduced in css3, so older browsers wouldn't display our menu correctly. However, we are not supporting backward compatibility. If you wish to, you have to make some hacks (or rather tricks) with stretched images and z-index. Not too hard, but too messy for this tutorial. So I will just stay with background-size which is fully supported by Opera 10+, FireFox 4+, Internet Explorer 9+, Safari 4.1+ and Chrome 3+.

---

Step 17 - Coding Newsletter And Footer

Great, we are pretty far. We will leave a content area for now, because firstly we'll make a blank (well, not really blank, but without a main part) html document (like we did with psd) and then we will build the content for every page. Our newsletter are will have a fixed size. Start from placing the guides on top and bottom (select newsletter gropu in layer's window so they will stick) to cut out the backgrounds.

Now cut out the background for wrapper, save it as newsletterbg.jpg.

Check its height (or distance between guides) so you will know how big will be our newsletter area. In fact we could make it elasttic/fluid, but there is no need to do that. Now hide all the layers (with background) so you will have only an upper line (so called separator) and bottom shape. Cut it out as well. Name it newsletter.png.

Also take care about input background and newsletter icon. Here is a html code to apply.

And css for it. To fasten the work we will position everything with absolute values.

And the newsletter is complete. Let's head to the footer. We will need one image here for background and one for button (with its hover state). I resign at this moment from the contact form in the footer for we will create one in Contact page. However we will cut out the button now. Ok, cut the bottom part of gradient (name it footerbg.jpg) and create a button the same way that we have made call-to-action button (name it darkbutton.png).

Here is html for the footer:

And complete css with some comments. As you can see I made three main blocks that stands for the columns. It is simpliest way I know to create such columns, but what's most important- it works well. With this techniqe you can make two columns as well as ten. As you can see all are floated to the left with fixed width value, so they stands next to each other.

At this moment you should get something like this and that would stand for our blank html template. Or maybe not really...

---

Step 18 - Coding Client Zone

Instead of making new page for login panel, we will get advantage of jquery (that is already implemented into our code) and will create a fixed div that will be hidden by default. Let's make some design at first. The form will slide from the top. It's position will be fixed and it will be stretched on 100% width of page and shouldn't be longer that the header so the user will have possibility to hide it with menu item. I kept my design simple. It's just to show off above all. Check the sources for more informations. In psd file you will find mock-up of the form, in graf folder two background images that I used here. If you wish, you can prepare your very own, more complex backgrounds. Ok, this is the html. Place it anywhere in the body tag.

And here's css for that piece of html:

Don't forget about javascript. Place it inside head tag in your document:

And it's done. Now we can name it blank.html and make few copies of it for further pages. There won't be any additional cutting (well, maybe just a few elements actually), so the only part here is proper html and css. Download mine html sources to see it all. Hope you learned something with this tutorial and let me know if you wish to see more of that kind. See you around! Oh, I almost forgot to admit: To shrink the jpg files use IrfanView. Just open up a jpg file in this image browser and save it with 90% quality. Your image shouldn't loose a lot of quality, but it's weight could lower twice time or so. Alright, that would be all for now. Remember, when you learn html and css it is most important to analyze, analyze, analyze... Edit already created file, change some value, save, refresh and check out what's happened. It is the best way to learn.

---

Final Results

---

Download the Source File

JA Room.zip | 0.53 MB
Download from Website