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.

Great art parodies: 25 iconic paintings recreated by funny and clever contemporary artists

Sarcasm at its best! 25 modern masterpieces for your inspiration

25 useful and high-quality PSD freebies from Dribbble

Photoshop Tutorial: How to Create Vinatge Funky 70’s Poster

In this tutorial I will show you how to create Vinatge Funky 70’s Poster in Photoshop only. We will mix blend modes, brushes and a disco looking font to achieve the effect.