Layouts

How to Create Business Template in Photoshop

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

step-012f[5]

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 100×100 pixels.

step-012g[5]

Create another one inside it that will be 80×80 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.

step-012h[5]

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:

step-012i[5]

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:

step-012j[5]

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-012k[5]


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…

step-013[5]

… 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:

step-013b[5]

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.

step-013c[5]

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.

step-013d[5]

step-013e[5]

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.

step-013f[5]

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

step-013g[5]

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

step-013h[5]

step-013i[5]

Turn this messy stack of layers

step-013j[5]

Into an organized stripe:

step-013k[5]

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…

step-013l[5]

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

step-013m[5]

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.

step-013n[5]

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:

step-013o[5]

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.

step-013p[5]

step-013q[5]

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

step-013r[5]

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

step-013s[5]

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.

step-013t[5]

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.

step-013u[5]

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.

step-013v[5]

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

step-013w[5]

With Eraser tool smooth the inner edge of the shape.

step-013x[5]

Replicate this effect to achieve this:

step-013y[5]

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-013z[5]

Related posts
LayoutsPhotoshop TutorialsUpdated

How to Create a Beautiful Audio App User Interface

LayoutsPhotoshop TutorialsUpdated

Create a Vintage Style Poster in Photoshop

LayoutsPhotoshop TutorialsUpdated

How to Create a Professional Web Layout in Photoshop

LayoutsPhotoshop TutorialsUpdated

Create a Captivating Street Dance Competition Poster with Photoshop

6 Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get 57 Photoshop Actions Free from Our Awesome Newsletter!

Subscribe and get the latest Photoshop tutorials, tips, and more via email. As a way of saying thanks, you'll also receive a free copy of Lomocam Photoshop Actions by SparkleStock ($7 retail value).