How to Create Business Template in Photoshop

How to Create Business Template in Photoshop
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]


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.
step-014[5]
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:

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

90% Off Cyberpunk Preset Bundle
Sponsored

Make your artwork look like they're from an alternate universe. These Cyberpunk presets work with Photoshop (via the Camera Raw filter) and Lightroom. Download all 788 presets for 90% off.

6 comments on “How to Create Business Template in Photoshop”

  1. I have been trying so hard to make my own templates. There are so many tutorials out there, but it always seems like one or two things are missing from the final product. Either that, or I am missing something within the instructions.

Leave a Reply

Your email address will not be published.

cross