Create Simple New Years Gift Landing Page – Photoshop Tutorial

Author: | Posted in Photoshop, Website Design No comments

Create Simple New Years Gift Landing Page - Photoshop Tutorial

Hello All, nice to see you again. In this special festive occasion when everyone searching something amazing deals online stores to celebrate Happy New Years 2013, we create an inspiring web layout tutorial where a deal placing to give helping idea to web designers, how to design a website layout with leading deal of iPhone5, i will teach you create simple landing page for new years eve gift. Ahh!, … i dont want miss to say “Happy New Year 2013” to you all. Ok guys, lets begin

Final Image Preview

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS 6
  • Difficulty: Beginner, Intermediate
  • Estimated Completion Time: 2 Hours

Tutorial Assets

The following assets were used during the production of this tutorial

  • 960 gs PSD template download here
  • 10 dark subtle patterns by premiumpixel
  • man putting money into a piggy bank photo by stockvault
  • businessman photo by stockvault
  • Free icon set from brankic1979 icon
  • Firework wallpaper from wallsave.com
  • iPhone image from arawinda.com

960 Grid System

In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then go to the “Photoshop” folder (inside “templates”). There you will find all the .PSD files. For this web design we will use the 12 columns grid.

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

Step 1 – Setting up the document and creating the background

Open the “960_grid_16_col .psd” file in Photoshop. We need more space to work with, so we will have to increase the canvas size. Go to Image > Canvas Size (Ctrl/Cmd + Alt/Option + C). Set the heigh to 800px. Then click on the top middle anchor point. That is the point the image will expand from.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Layer > New Fill Layer > Solid Color and set the color to #f5f5f5. Name this layer “body_bg”.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 2 – Organizing Document

to make easy , you can create 4 new group first, these are ‘header’,’body’,’footer’,and ‘background’. to create group, select Layer > New > Group. Name it ‘group’. Next, repeat that step until 3 times, name it each layer remaining ‘body’,’footer’, and ‘background’

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 3 – Creating header background

In header area, we are going to create 4 groups,these are ‘logo’,’top-nav’, ‘devider’ and ‘background’. To create new group, you can select Layer > New > Group. Name it with name that we have set above.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Inside ‘background’ group, create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1020px , height 94px, set the color to #f5f5f5.Change this layer name to ‘bg-top nav'(double click to this layer to change layer name)

then apply this blending option setting bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 4 – Creating Logo

Select Horizontal type tool(T), choose lobster font, set size to 36px, and set color to #3f2140, then type ‘Suggest deal’.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then apply this blending option bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 5 – Creating website slogan

Select Horizontal type tool(T), choose Rockwell font, set size to 12px, and set color to #3f2140, then type ‘Trusted Deal Merchant’. adjust the position like image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then apply this blending option bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 6 – Creating top navigation

Inside ‘top-nav’ group, write menu for navigation by Select Horizontal type tool(T), choose Droid Sans, set size to 12px, and set color to #68676a, then type ‘Home’.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Select ‘Home’ layer, right click, select duplicate layer (Ctrl + j), duplicate it 3 times. then change the words each duplicate to be ‘about’, ‘FAQ’, and ‘Contact’. Then adjust it to be horizontal menu likes image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 7 – Creating top navigation devider

For navigation devider, we are going to use 2 vertical lines. Select line tool , draw a line , width 1px height 28px, double click layer name in layer window, set layer name to ‘line1′.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Duplicate line that we have created before, by right click ‘line1′ layer, then click ‘duplicate layer’. name it ‘line2′.Change color to #ffffff

Create Simple New Years Gift Landing Page – Photoshop Tutorial

For easy organizing , we group this 2 lines, by click ‘line1′ layer, then hold Ctrl button,then click ‘line2′ layer. Next, press (Ctrl + G), and name it this group ‘devider-nav’. its automaticaly insert these 2 layers inside ‘devider-nav’.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Next, duplicate this group once, then right click, choose ‘Merge groups’, we will get single layer by the name devider-nav.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then, add layer mask for this layer, select gradient tool (G), set color to #000000 for foreground and #ffffff for background. then create gradient from middle to top.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then delete layer mask, choose ‘apply’ in dialog box that appears. you will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

next, once again adding layer mask to layer, select gradient tools, create gradient form middle to bottom

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then delete layer mask, choose ‘apply’ in dialog box that appears. you will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

next duplicate this devider 3 times, and arrange in back of each menu link. You will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 8 – Creating slider box

before we work in slider box, we are create 2 groups inside ‘body’ group, these are ‘slider’ and ‘testimonial’ groups

Create Simple New Years Gift Landing Page – Photoshop Tutorial

inside ‘slider’ group, create ‘background’ group. Inside ‘background’ group, create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1020px , height 375px, set the color to #000000.Change this layer name to bg_slider(double click to this layer to change layer name)

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 9 – Creating slider area background

next, we are going to add background for slider. First donwnload image here image fireworks. Next, Place this image by select File > Place.Name this layer image ‘fireworks’. Select ‘fireworks’ layer that we have downloaded before, adjust the size and position looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

next, create clipping mask in this layer image by right click the layer, select create clipping mask. you will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Next, add gaussian blur by select Filter > Blur > Gaussian Blur. Set the setting looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

We will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

After that, we add pattern effect. we will use pattern from 10 dark subtle patterns from premiumpixel. Right click ‘fireworks’ layer, select Blending option, then apply this setting bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

you will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 10 – Adding item gift to slider area

Next, adding item for gift, in here we are going to use Iphone 5 photo. Download iphone picture from here. After that, select file > Place. select file that we have download before. after that place and adjust the position, then press ‘Enter’. Change layer name to be ‘Iphone’. place it in the top of ‘fireworks’ layer.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

next, select ‘iphone’ layer, then right click , select ‘create clipping mask’. you will get the result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 11 – creating promotional text

Create new group inside ‘slider’ group by select Layer > New > Group. Name it ‘text-promo’. Inside ‘text-promo’, write some text for title for promotional, and style it looks like image bellow.

For “Best Offer For 2013 New Years Eve Gift” sentece, we are going to use Rockwell font, size 24px, color #ffffff

For “Iphone 5 Only $654″ sentece, we are going to use Rockwell font, size 48px, color #ffffff

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 12 – Creating deal time text

Inside ‘text-promo’, write again some text for title for ‘time deal title’, and style it looks like image bellow.

For “Grab it fast! your time only” sentence, we are going to use Droid-Sans font, size 24px, color #ffffff

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Create new group inside ‘text-promo’ group, by select Layer > New > Group. Name it ‘deal-time’.Next , add clock icon from brankic1979 icon. Place and adjust it, then change color overlay setting to #ffffff.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Inside ‘deal-time’, write some text looks like image bellow ( For number letter, we are going to use Droid-Sans font, size 36px, color #ffffff )( For letter [in hours, mins, second], we are going to use Droid-Sans font, size 14px, color #ffffff )

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 13 – Creating buy button

Next we are going to create buy button cover, Select Rounded Rectangle tool (U), create shape width 199px, height 81px, set color to #000000, then set opacity to 46%. we are going to get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Next, create buy button , Select Rounded Rectangle tool (U), create shape width 183px, height 68px, set color to #a356a6

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then apply blending setting looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Create Simple New Years Gift Landing Page – Photoshop Tutorial

After that, add text “Purchase now”, by Select Horizontal type tool(T), choose Rockwell, set size to 22px, and set color to #ffffff

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then apply blending option setting bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

After that, add text “only at SuggestDeal”, by Select Horizontal type tool(T), choose Droid Sans, set size to 12px, and set color to #3f2140

Create Simple New Years Gift Landing Page – Photoshop Tutorial

then apply this blending option setting bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

we will get button looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 14 – creating separated line for slider area

Inside ‘slider’ group, create new groups select Layer > New > Group. Name it ‘slider-devider’Inside ‘slider-devider’ group, create new line by select Line tool (U), write new line, width 1020px, height 1px, set color to #713c73.

then duplicate this line, change color to #ffffff. After that, place this two lines looks like image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Duplicate 2 lines that we have made before, select two layers of that line, then press Ctrl + j, adjust the position to bottom of slider, looks like image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 15 – Creating testimonial background

Next, create new group inside ‘body’ group, name it ‘testimonial’. Inside ‘testimonial’ group, create 3 groups, these are ‘devider’,’list1′, and ‘list2′

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Inside ‘list1′, Create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 458px , height 167px, set the color to #ededed.Change this layer name to ‘bg-testi’

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 16 – Adding text for testimonial

next, we are going to create text for testimonial, create text looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 17 – Adding image for testimonial

next, adding image for testimonial. for this step, we are going to use man putting money into a piggy bank photo by stockvault. After download the image, open this file by select File > Place, select the image, adjust this size and position, then press enter

Create Simple New Years Gift Landing Page – Photoshop Tutorial

After that, right click on image that we have placed before, right click on layer, select ‘Create clipping mask’. You will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 18 – Creating second testimonial

For second tutorial, you just repeat Step 15 – Step 17. Note : For background , set width to 482px, for height , color is similar like step 15. after that put it in right area

For Picture , we are going to use businessman photo by stockvault

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 19 – Adding devider line for each testimonial

Create new group inside ‘testimonial’ group, name it ‘devider’

Create new vertical line by select Line tool (U), set width to 167px, width 1px, set color to #cccccc. Adjust the position looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Duplicate this line (Ctrl + j), change color to #f5f5f5, than adjust position looks like image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 20 – Creating footer background

Inside ‘footer’ group, create new group , name it ‘background’ group. Inside ‘background’ group create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1020px , height 5px, set the color to #4e4e4e.Change this layer name to ‘footer-top’

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Next create shape again , by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1020px , height 123px, set the color to #4e4e4e.Change this layer name to ‘footer-bg’

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Select ‘footer-bg’ layer, right click, and choose ‘Convert to smart object’

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Add noise effect by select Filter > Noise > Add Noise. then apply setting like image bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

you will get result looks like bellow

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Step 21 – Adding text for footer

For the last, We are going to add text for footer. Write text look like bellow

for footer , we are going to use Droid-Sans, size 10px, color #ffffff

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Final Image

Include a final image at the end of the tutorial.

Create Simple New Years Gift Landing Page – Photoshop Tutorial

Add Your Comment