Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 1)

Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 1)
  • 30 March 2011
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (19)»

In this two part tutorial, we will create an eCommerce site inspired from Groupon complete with its simple jQuery slider. This design is my collaboration with an Indonesian web designer and developer, Aris FM. Today, we will learn to create its design in Photoshop.

Step 1: First Page — Setup Document

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click it to load into Photoshop.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 2

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click to load it into Photoshop. Return to Photoshop, inside Actions panel you will find new group named 960 GRIDS. Select 12 Column Grid and click play button.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

This action will automatically created a new file in standard 960 grid system, complete with guides to help you design.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 3: Set Up Background

Create new group and name it Background. We will put all background element here. Create new layer and fill it with color #be58d5.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 4

Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 5

Paste octopus picture onto the background.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 6

There is a problem with this octopus. If you zoom closer, you will find that there is a 1 px white line along its edge. No need to worry, there is a nice tip to fix this.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 7

Ctrl-click octopus layer to create new selection based on its shape. Click Select > modify > Contract.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Use Contract By 1 px..

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Click Add layer mask icon. This process will hide white pixel on the octopus edge.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 8

Ctrl-click octopus layer. Create new layer underneath it. Fill selection with black.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Remove selection by pressing Ctrl + D. Soften the selection by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Use eraser tool to delete upper part of the layer. Now, we should have octopus shadow on the floor.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 9

Ctrl-click octopus layer. Make sure marquee tool is still active, right click and choose Transform Selection.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Right click and choose Skew.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Pull top middle handle until the selection is skewed. See picture below for reference.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 10

Fill selection with black.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Remove selection (Ctrl + D). Click Filter > Blur > Gaussian Blur.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Delete lower part of the layer.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Set layer Opacity to 20%.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 11

Select top part of the site. Create new layer and fill it with #obobob.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 12: Logo

Draw an ellipse shape with color #333333.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Draw another ellipse and set its mode to Add to Shape.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Repeat this process a few times until we have clouds shape for the logo background.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Add following Layer Style.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 13

Add site name on top of the clouds. Add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 14: Site Description

Add site description and give it this Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 15: Step 1 Interface

Draw a rounded rectangle with radius 10 px and color #ebebeb. Add Drop Shadow.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 16

Add text. Draw a circle with same color as the background. Add Inner Shadow.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 17

Add number 1 inside the circle and add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 18

Draw a white rectangle. Add Stroke.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 19

Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 19

Activate polygon tool. From the Option Bar set Sides to 3 to get a triangle. Draw a black triangle on top of the rectangle.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 20

Draw a rounded rectangle with radius 10 px.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 21

Draw another roundd rectangle for continue button. Add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 22

Add text “continue” on top of the button. Add Drop Shadow.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 23

Draw a circle shape next to the continue text.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Draw a rounded rectangle. Hit Ctrl + T to perform transformation and rotate it 45 degree.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Repeat previous step but this time rotate -45 degree. Combine both shapes until we get an arrow symbol.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 24

Create a rounded rectangle under the continue text.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Draw a rectangle covering half of the rectangle shape. This shape indicates that the process is only halfway and not yet finish.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 25: Step 2 Interface

Repeat the same process to create Step 2 interface. You can easily copy the first interface and modify it.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 26: Landing Page — Set Up Background

Next, we need to create landing page. User will go to this page after finishing Step 2. Use 960 grids actions to create new 12 column file. Fill background with #be58d5. Add sun ornament on background with Opacity 46%.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 27: Top Menu

Fill top part of the file with black and add some site menus.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 28

We need to differentiate active menu from the others. Draw a rectangle and fill it with #333333 and put it behind active menu.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 29

Draw a 2 px under the menu to add contrast with its background.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 30: Content

Draw a rounded rectangle for the page content.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 31

Add post title, product image, and some description. Leave empty room on left side of the page to add price info.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 32: Buy Ribbon

Draw a tall rectangle on left side of the content page with color #fbc5ff. On top of it, draw another rectangle with color #9928b3 to be used as a price ribbon.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 33

Create new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 34

Activate single row marquee and draw a 1 px selection on top of the ribbon.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Hit Delete key to delete 1 px highlight on the ribon.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 35

Ctrl-click ribbon layer to create a new selection based on its shape. Click Select > Modify > Contract. Set parameter to 2 px.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create new layer. Click Edit > Stroke. Set Width to 2 px and Location to Inside.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Change layer opacity to 30%.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 36

Activate text tool and write item’s price. Add Drop Shadow and Outer Glow.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 37: Buy Button

Draw a big blue rounded rectangle. Add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 38

Add text “Buy!” and Drop Shadow to keep it legible.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 39

Draw a rectangle with color #9928b3. Put it under the ribbon. Select left lower corner and pull it up.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Add Gradient Overlay.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 40: More Content

Add another rounded rectangle to add more post content.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 41

Draw a rectangle with color #fbc5ff on right side of the shape. Convert layer shape to Clipping Mask by pressing Ctrl + Alt + G.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

The rectangle will goes inside the content shape.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 42

Insert some text for the content.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 43: Button

Draw a rounded rectangle on end of the post with color #eb582c. Add following Layer Styles.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 44

Add text on the button. Apply Drop Shadow to make the text legible.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 45: Sidebar

Add some content on the sidebar.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 46

Using same method, add another sidebar on the top content.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Step 47

Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Final Result

Below is the final result of all three designs we have created. Click on the image to see it in full screen. Don’t miss the second part of this tutorial. We will code this design and turn it into a functional HTML/CSS complete with its sliding jQuery.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 1)

Download Source File

Download PSD File

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

19 Comments

  1. Lee Bandoni

    This is the first time I have came across a decent design tutorial using the 360 grid system. Most of the stuff on the web right now is pretty pathetic so its good to see a complete guide

  2. TheShadow

    Awesome tutorial.Thanks for sharing.It would be also nice if you give a tutorial on how to code them

    • admin

      Sure. Part 2 will be published soon and have the code that goes along with this design.

  3. Joe

    Nice tutorial, keep up the good work!

  4. Locusto

    Absolutely brilliant. I have no problem with coding but recently I started to tackle PhotoShop and it has been a pain. Clear step by step guides like these really help out as I have problems whiole trying to make myself read the documentation. :)

  5. sunglasses

    My friend told me that she bought Tiffany and sunglasses last week,they are very beautiful.I am also want to buy Tiffany and sunglasses,but my mother disagree,she said they are not to fit me.

  6. Marcus

    Verry nice. Keep up the good work!

  7. Soccer Jerseys

    Thanks in advance for your help

  8. Ravi laptop

    Lots of very usefull information in this post.
    I hadn’t heard of half of these sites.
    I will have to check out these in a bit more detail.

  9. fortruereligionjeans.com

    Thank you for sharing this article… This is a very good post
    If you can enter our website for a minute let you have unexpected harvest

  10. Cheap Beats By Dre

    Huiguo Shen, had to be on the train, bus bad results on the road, near to the school the evening before. Cups a

  11. no xplode igniter shot

    Keep functioning ,terrific job!

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US