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
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.
Layer > New Fill Layer > Solid Color and set the color to #f5f5f5. Name this layer “body_bg”.
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’
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.
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
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’.
then apply this blending option bellow
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
then apply this blending option bellow
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’.
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
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′.
Duplicate line that we have created before, by right click ‘line1′ layer, then click ‘duplicate layer’. name it ‘line2′.Change color to #ffffff
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’.
Next, duplicate this group once, then right click, choose ‘Merge groups’, we will get single layer by the name devider-nav.
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.
then delete layer mask, choose ‘apply’ in dialog box that appears. you will get result looks like bellow
next, once again adding layer mask to layer, select gradient tools, create gradient form middle to bottom
then delete layer mask, choose ‘apply’ in dialog box that appears. you will get result looks like bellow
next duplicate this devider 3 times, and arrange in back of each menu link. You will get result looks like bellow
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
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)
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
next, create clipping mask in this layer image by right click the layer, select create clipping mask. you will get result looks like bellow
Next, add gaussian blur by select Filter > Blur > Gaussian Blur. Set the setting looks like bellow
We will get result looks like bellow
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
you will get result looks like bellow
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.
next, select ‘iphone’ layer, then right click , select ‘create clipping mask’. you will get the result looks like bellow
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
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 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.
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 )
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
Next, create buy button , Select Rounded Rectangle tool (U), create shape width 183px, height 68px, set color to #a356a6
then apply blending setting looks like bellow
After that, add text “Purchase now”, by Select Horizontal type tool(T), choose Rockwell, set size to 22px, and set color to #ffffff
then apply blending option setting bellow
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
then apply this blending option setting bellow
we will get button looks like bellow
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
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
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′
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’
Step 16 – Adding text for testimonial
next, we are going to create text for testimonial, create text looks like bellow
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
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
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
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
Duplicate this line (Ctrl + j), change color to #f5f5f5, than adjust position looks like image bellow
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’
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’
Select ‘footer-bg’ layer, right click, and choose ‘Convert to smart object’
Add noise effect by select Filter > Noise > Add Noise. then apply setting like image bellow
you will get result looks like bellow
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
Final Image
Include a final image at the end of the tutorial.
No comments:
Post a Comment