How to design a wedding template in Photoshop

Oct 18th, 2010View Comments

Hello and welcome to another tutorial here on trendyTUTS.com For today I will show you how to create a wedding template in Photoshop. If you are a photographer don’t worry. You can use this template for your website as well.

Here is my final result:

Wedding Template | PSD Template

To create this template I have used:

Let’s start the tutorial. Open Photoshop and create a new document: 1020px by 1120.

Step1

I will select Ellipse Tool and I will create this 4 shapes.
For the first shape, I have used this color: #f49131, for the second one this color: #8d9a97, for the third one, this color: #f3f1e2 and for the four one, this color: #715d40

Step 2

With Move Tool (V) I will select the first shape (the orange one), I will go to Edit>Transform>Warp. From the top I will select Arc and for bend I will choose 5px.

Step3

With Ellipse Tool I will create this 2 shapes.

For both of them I will apply a Gaussian blur (Filter>Blur>Gaussian Blur ) of about 15px, than I will change the blending mode to Overlay.
My result:

With Move Tool (V) I will select the main shape (the orange one) and I will change for this one the Blending Mode to Overlay as well.

Step 4

I will select Type Tool and I will add the logo. With type Tool I will write: “My Wedding”. For “My” I will use white but for “Wedding” I will apply this layer styles:



Here’s my result:

Step 5

Next I will create the navigation. I will select Rounded Rectangle Tool with a radius of 10 px, I will create this shape and I will apply this layer styles.





And with Type Tool I will add the links for navigation. Here is my final result.

Step 6

Since we have finished the top area, next we will concentrate to create Featured Area. With Move Tool (V) I will select Shape 2, created on Step 1. Once you have it selected go to Filter>Texture>Grain and here set the Intensity to 5.

Step 7

I will add a nice photo created by Ryan Brenizer. To add it in Photoshop just go to File>Place.

Step 8

As you can see the photo added is having a red background so it’s not looking to well. Let’s make it looks better! On your layer palette select this image and then add a layer mask.

Step 9

Once you have added the Layer Mask, Select Gradient Tool, make sure that the default palette (black and white) is selected, than drag a similar line over the image (from the left to the right)

Here is my result:

In the same way I will continue for the top and for the right side.
Here is my result:

Next I will go to Image>Adjustments>Black & White, here I will leave the default values and I will press ok. Here is my result:

Step 10

I will select Type Tool and I will add some text on the right side:

Step 11

Next I will select Rectangular Marque Tool and from the Style (on the top) I will choose Fixed Size, I will add this dimensions 1020 by 14px and I will create this selection

Step 12

Now download this pattern and add it on Photoshop. To add a pattern in Photoshop, go to Paint Bucket Tool, then from the top select Pattern. Next click on the thumbnail from the top, then click on that small arrow and here choose Load Patterns.

Once you have added the pattern in Photoshop, press Ctrl+Alt+Shift+N (to create a new layer) click one time on selected area with Paint Bucket Tool then press Ctrl+D to unload the selection. Proceed in the same way for the bottom of the shape. You should have something like this:

Step 13

Next with Move Tool I will select the Shape 3 – Created on Step 1 and I will go to Filter>Texture>Textureizer, here I will choose for Scaling 58. My result – a really nice texture on the middle of the content area

Step 14

With Line Tool I will add this lines:

Then with Type Tool and using some images and some vector icons from our Wedding Vector Icons, available to our Premium Members I will add the content.

Here is my result

Here is my result for the entire layout:

Wedding Template | PSD Template

Want to Download the Source File? (including CSS/HTML version)

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

Stay tuned, because some new tutorials will be posted on trendyTUTS.com pretty soon. In the meanwhile you can follow us on twitter if you’d like to know when we post new tutorials on trendyTUTS.com.

  • Avioso

    Great Layout! Keep them coming! :)
    In terms of coding, how would you suggest it be done – the photoshop file is not particularly wide so when catering for larger viewing windows, what is your plan for this theme?
    Would you repeat-x each gradient section or would you end it to white around the edges?
    Again – Love the design :)

  • http://trendytuts.com admin

    Avioso,Thanks, this layout is my proffered too.Regarding the coding, some portions of the layout it will work with repeat-x, some of them not. (i.e – that gradient from the Featured Area).Anyway I think in approx a week I will code this layout :)
    Also if you have a suggestion about what kind of tutorials you would like to see on trendyTUTS, please let me know.

    Cheers!

  • http://allcoverletters.com/ Cover letters

    Fantastic template! Really professional and modern!

  • Anonymous

    Very nice template ! I’ve just done it in Photoshop and I’ve learned some new things :)

    It’s very easy to follow.
    I think I’ll spend some time on your site, doing others tutorials.

    Thanks for sharing !

blog comments powered by Disqus