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.
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.
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.
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.
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.
Step 4
Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%
Step 5
Paste octopus picture onto the background.
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.
Step 7
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.
Step 8
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.
Step 9
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.
Step 10
Fill selection with black.
Remove selection (Ctrl + D). Click Filter - Blur - Gaussian Blur.
Delete lower part of the layer.
Set layer Opacity to 20%.
Step 11
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.
Step 13
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.
Step 16
Add text. Draw a circle with same color as the background. Add Inner Shadow.
Step 17
Add number 1 inside the circle and add following Layer Styles.
Step 18
Draw a white rectangle. Add Stroke.
Step 19
Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.
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.
Step 20
Draw a rounded rectangle with radius 10 px.
Step 21
Draw another roundd rectangle for continue button. Add following Layer Styles.
Step 22
Add text "continue" on top of the button. Add Drop Shadow.
Step 23
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.
Step 24
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.
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.
Step 29
Draw a 2 px under the menu to add contrast with its background.
Step 30: Content
Draw a rounded rectangle for the page content.
Step 31
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.
Step 33
Create new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).
Step 34
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.
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 new layer. Click Edit - Stroke. Set Width to 2 px and Location to Inside.
Change layer opacity to 30%.
Step 36
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.
Step 38
Add text "Buy!" and Drop Shadow to keep it legible.
Step 39
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.
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.
The rectangle will goes inside the content shape.
Step 42
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.
Step 44
Add text on the button. Apply Drop Shadow to make the text legible.
Step 45: Sidebar
Add some content on the sidebar.
Step 46
Using same method, add another sidebar on the top content.
Step 47
Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.
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.
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.
Step 4
Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%
Step 5
Paste octopus picture onto the background.
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.
Step 7
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.
Step 8
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.
Step 9
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.
Step 10
Fill selection with black.
Remove selection (Ctrl + D). Click Filter - Blur - Gaussian Blur.
Delete lower part of the layer.
Set layer Opacity to 20%.
Step 11
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.
Step 13
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.
Step 16
Add text. Draw a circle with same color as the background. Add Inner Shadow.
Step 17
Add number 1 inside the circle and add following Layer Styles.
Step 18
Draw a white rectangle. Add Stroke.
Step 19
Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.
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.
Step 20
Draw a rounded rectangle with radius 10 px.
Step 21
Draw another roundd rectangle for continue button. Add following Layer Styles.
Step 22
Add text "continue" on top of the button. Add Drop Shadow.
Step 23
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.
Step 24
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.
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.
Step 29
Draw a 2 px under the menu to add contrast with its background.
Step 30: Content
Draw a rounded rectangle for the page content.
Step 31
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.
Step 33
Create new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).
Step 34
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.
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 new layer. Click Edit - Stroke. Set Width to 2 px and Location to Inside.
Change layer opacity to 30%.
Step 36
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.
Step 38
Add text "Buy!" and Drop Shadow to keep it legible.
Step 39
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.
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.
The rectangle will goes inside the content shape.
Step 42
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.
Step 44
Add text on the button. Apply Drop Shadow to make the text legible.
Step 45: Sidebar
Add some content on the sidebar.
Step 46
Using same method, add another sidebar on the top content.
Step 47
Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.
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.
