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.
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.
This action will automatically created a new file in standard 960 grid system, complete with guides to help you design.
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.
Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%
Paste octopus picture onto the background.
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.
Ctrl-click octopus layer to create new selection based on its shape. Click Select > modify > Contract.
Use Contract By 1 px..
Click Add layer mask icon. This process will hide white pixel on the octopus edge.
Ctrl-click octopus layer. Create new layer underneath it. Fill selection with black.
Remove selection by pressing Ctrl + D. Soften the selection by adding Gaussian Blur (Filter > Blur > Gaussian Blur).
Use eraser tool to delete upper part of the layer. Now, we should have octopus shadow on the floor.
Ctrl-click octopus layer. Make sure marquee tool is still active, right click and choose Transform Selection.
Right click and choose Skew.
Pull top middle handle until the selection is skewed. See picture below for reference.
Fill selection with black.
Remove selection (Ctrl + D). Click Filter > Blur > Gaussian Blur.
Delete lower part of the layer.
Set layer Opacity to 20%.
Select top part of the site. Create new layer and fill it with #obobob.
Step 12: Logo
Draw an ellipse shape with color #333333.
Draw another ellipse and set its mode to Add to Shape.
Repeat this process a few times until we have clouds shape for the logo background.
Add following Layer Style.
Add site name on top of the clouds. Add following Layer Styles.
Step 14: Site Description
Add site description and give it this Layer Styles.
Step 15: Step 1 Interface
Draw a rounded rectangle with radius 10 px and color #ebebeb. Add Drop Shadow.
Add text. Draw a circle with same color as the background. Add Inner Shadow.
Add number 1 inside the circle and add following Layer Styles.
Draw a white rectangle. Add Stroke.
Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.
Activate polygon tool. From the Option Bar set Sides to 3 to get a triangle. Draw a black triangle on top of the rectangle.
Draw a rounded rectangle with radius 10 px.
Draw another roundd rectangle for continue button. Add following Layer Styles.
Add text “continue” on top of the button. Add Drop Shadow.
Draw a circle shape next to the continue text.
Draw a rounded rectangle. Hit Ctrl + T to perform transformation and rotate it 45 degree.
Repeat previous step but this time rotate -45 degree. Combine both shapes until we get an arrow symbol.
Create a rounded rectangle under the continue text.
Draw a rectangle covering half of the rectangle shape. This shape indicates that the process is only halfway and not yet finish.
Step 25: Step 2 Interface
Repeat the same process to create Step 2 interface. You can easily copy the first interface and modify it.
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%.
Step 27: Top Menu
Fill top part of the file with black and add some site menus.
We need to differentiate active menu from the others. Draw a rectangle and fill it with #333333 and put it behind active menu.
Draw a 2 px under the menu to add contrast with its background.
Step 30: Content
Draw a rounded rectangle for the page content.
Add post title, product image, and some description. Leave empty room on left side of the page to add price info.
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 new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).
Activate single row marquee and draw a 1 px selection on top of the ribbon.
Hit Delete key to delete 1 px highlight on the ribon.
Ctrl-click ribbon layer to create a new selection based on its shape. Click Select > Modify > Contract. Set parameter to 2 px.
Create new layer. Click Edit > Stroke. Set Width to 2 px and Location to Inside.
Change layer opacity to 30%.
Activate text tool and write item’s price. Add Drop Shadow and Outer Glow.
Step 37: Buy Button
Draw a big blue rounded rectangle. Add following Layer Styles.
Add text “Buy!” and Drop Shadow to keep it legible.
Draw a rectangle with color #9928b3. Put it under the ribbon. Select left lower corner and pull it up.
Add Gradient Overlay.
Step 40: More Content
Add another rounded rectangle to add more post content.
Draw a rectangle with color #fbc5ff on right side of the shape. Convert layer shape to Clipping Mask by pressing Ctrl + Alt + G.
The rectangle will goes inside the content shape.
Insert some text for the content.
Step 43: Button
Draw a rounded rectangle on end of the post with color #eb582c. Add following Layer Styles.
Add text on the button. Apply Drop Shadow to make the text legible.
Step 45: Sidebar
Add some content on the sidebar.
Using same method, add another sidebar on the top content.
Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.
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.