How To Create A Modern Purple Web Layout In Photoshop

Hi and welcome to a new photoshop tutorial. In this tutorial I will show You how to create a modern purple web layout.

purple-tut-420

To enlarge click on the image.

Setting Background

Create new document in photoshop: 960x1200px, resolution 72 pixels/inch. Add 2 Vertical Guides at 0px and 960px.

web20-1

Go to Image -> Canvas Size and expand canvas to 1460x1400px. Fill the background with #2a0924. Go to Filter -> Noise -> Add Noise.

web20-3

Header Background

Create new layer, choose Rectangular Marquee Tool (M) and make selection that is 140px high. Fill the selection with #ffffff color, lower the opacity to 40% and change Blending Mode to Overlay.

web20-4

Add a black 1px line on the bottom of header, using Line Tool (U), then duplicate this line, move it 1px down by pressing down arrow key once, and change color of duplicated line to #3e0231.

web20-5

Website Title

Select the Text Tool (T) with the font Century Gothic, set the font size to 60px, tracking to -25, then set the color to #ffffff. Add your website title at the top of the canvas. (Don’t ask me why i choose designCube for website title).

web20-6

Apply following Layer Styles to website title.

web20-7

web20-8

web20-9

Navigation

Select Type Tool (T), for font choose Century Gothic, set the font size to 24px, font style to bold, color is #7a7a7a and type navigation links.

web20-10

Add Inner Shadow to links.

web20-11

Now, with Rounded Rectangle Tool (U) and radius set to 10px, create rectangle below Home link and add following layer styles.

web20-12

web20-13

web20-14

web20-15

For active link change font color to #ffffff.

web20-16

Welcome Box

Pick up Rounded Rectangle Tool (U) set radius to 15px, and draw big rounded rectangle 925x325px. Fill rectangle with #41164b.

web20-17

Add Stroke from Layer Style Panel.

web20-18

Change the Blend Mode to Screen and lower the Opacity to 15%.

web20-19

With Type Tool (T) add welcome text inside the box.

web20-20

Apply Drop Shadow to welcome text.

web20-21

Again, pick up Rounded Rectangle Tool (U), set radius to 10px, draw nice rounded button and apply following Layer Styles.

web20-22

web20-23

web20-24

web20-25

Button should look like this.

web20-26

Add some text to the button with Type Tool (T) and apply next Layer Styles.

web20-27

web20-28

web20-29

web20-30

web20-31

web20-32

Take two images of your choice, I used Safari screenshots, scale one down and place it behind the bigger one. Add Perspective using Free Transform Tool.

web20-33

Copy both layers, and with the Free Transform Tool, flip the first image and then the other one. Shift both images a few pixels down. Now make a selection from outside the bottom part to middle of the first flipped image with the Rectangular Marquee Tool.

web20-34

Go to Select -> Modify -> Feather and type 30px or more. You should have a selection similar to the shown in the image. Press the delete key a few times and you will create a nice faded reflection from the original image. Repeat this step for the second image.
Let’s light welcome box a bit. Create new layer, Cmd + Click on Welcome Box Vector Mask Thumbnail to make a selection.

web20-35

Choose big soft round brush (size is around 800px), make sure that foreground color is #ffffff, and paint like shown on the picture.

web20-36

Change the Blend Mode to Overlay. Duplicate this layer and lower Opacity of duplicate layer to 70%.

web20-37

Add a black 1px line at the bottom, then duplicate this line, move it 1px down by pressing down arrow key once, and change color of duplicated line to #3e0231.

Creating Content Area

Make selection with Rectangle Marquee Tool (M), just below the 1px line.

web20-38

Again, pick up Brush Tool (B), choose soft round brush (460px), foreground color should be #ffffff, and paint with this brush once. Change the Blending Mode to Screen and set Fill to 20%.

web20-39

Duplicate this layer. Clear the selection (Cmd + D).

web20-40

Download beautiful iMac icon, import, resize and palce it. Create reflection using Feather Tool as described above.

web20-41

Add some text.

web20-42

Download Life Saver icon, import, resize, place and create reflection. Also add text as described above.

web20-43

Let’s add testemonials block.
Download Two Comment Bubbles icon, import, resize, create reflection and add testemonial text.

web20-44

With Rounded Rectangle Tool (U) create button. Add next Layer Styles.

web20-45

web20-46

web20-47

web20-48

With Type Tool (T) add text to the button.

web20-49

Add two 1px lines as already described above.

web20-50

Add Get A Quote Area

web20-51

To create Get A Quote Area use the methods explained in earlier steps.

web20-52

web20-53

web20-54

web20-55

web20-56

web20-57

Footer

In the footer we will create two sections: about us and contact.

web20-58

web20-59

At the bottom add legal information.

web20-60

Thanks for reading!

Stay tuned! More cool stuff to come.

Leave a Reply

11 Comments on "How To Create A Modern Purple Web Layout In Photoshop"

Notify of
Sort by:   newest | oldest | most voted
zeemiDesign
Guest

I like the design, but the grain you chose is way too strong (I think 1% would have been more than enough) as well as I wouldn’t have applied it too all the elements on the page.

Good work anyhow!

Pieter
Guest
Just curious how does a font like Century Gothic translate to a websafe font and how do you apply a dropshadow to you webpages when they are no longer a photoshop design but a real life CMS where you have to rely on good old CSS and HTML. Yes I… Read more »
Francesco Mugnai
Admin
Ciao Pieter, well i’m not the author of this post, but i can reply to you: 1) the Century Gothic font is considered a web-safe font (in any case, if you have the correct web license, you can insert custom-fonts using services like typekit or the css-face rule). 2) to… Read more »
Pieter
Guest

Thanks Francesco for the insight, experimenting with your tips as I write this.

Julia Altermann
Guest
Like the tut a lot and the result is very beautiful. The only thing that made me stumble when following along: At the very beginning, Nikola writes to add horizontal guides at 0 and 960px, then expand the canvas. Could it be that he meant _vertical_ guides? That would make… Read more »
MuriImWeb
Guest

Thx for this post.

Really nice inspiration.

Bong Hufton
Guest
Just want to say your article is astounding. The clarity in your post is simply spectacular and i can take for granted you are an expert on this subject. Well with your permission allow me to grab your rss feed to keep up to date with succeeding post. Thanks a… Read more »
Laura
Guest

Hey, nice tut! But i’ve an other question.. how did you make the background of this page? The one with the blue-violet caskets?

Saludos
Laura

Mayur
Guest

This post is amazing. The design is wonderful and i am trying to do the steps right now. Its very time consuming to look at the steps here do the same on Photoshop, but it is never time consuming when we are doing the new design by ourselves.

Williamrichard611
Guest

000-978
SK0-003
650-393
70-648
642-642
642-467
1z0-052
JN0-360
1Y0-A15
HP0-J40

wpDiscuz