How to Create Business Template in Photoshop

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

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.

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:

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21