Beautiful Clean Online Store Layout. Part I.

You can read all the tutorial! Check out the parts A,B,C,D! ENJOY!

	Clean beautiful online store layout. Part D		Clean beautiful online store layout. Part C
	Clean beautiful online store layout. Part B		Clean beautiful online store layout. Part A

Hi.

This is suppose to be a tutorial about how to create an awesome online store layout using Photoshop.

But since I don’t have the time to write it entirely right now, I will split it into more tutorials.

This is the final result:

This layout will be splitted into 4 parts, each part will be widely explained and written, so you – guys - can understand better.

PART A

PART B

PART C

PART D

PART E

PART A.

Create a new 910px * 1000px Photoshop file with white background.

Set your foreground color to #d1ecf1.

Select your flower brush downloaded from Brusheezy.com named coy-dreamer.com (is the third brush in the package), set its size to 500px and click once on your canvas  in order to get the butterfly.

Grab the eraser, set it to a medium round soft brush and set the Opacity to 30%. Erase the right part of the butterfly until to get something like this:

Let’s draw now the foundation for our main menu, which is this:

Create New Layer.

Grab the Rectangle Tool (U), set the foreground color to #FFFFFF (white), and draw a rectangle having the same size as the one above.

Now open the Blending Option Window and add the next effects:

Lower its opacity to 71%.

Now grab the Text Tool, set it to Arial -> Regular - > 18px -> Strong - > Color: #FFFFFF.

Write down the text.

Add more text:

Settings used:  Arial - > Regular -> 24/11 px - > Strong -> Color: #67a028 ;

...and more text..:)

Settings used: 

  **Butterfly - Monotype Corsiva -> Regular -> 38px -> Strong -> Color: #368998 ;

  ** Shipping.com – Cambria -> Regular -> 28px -> Strong -> Color: #2a2a2a / #368998 ;

Now we’ll create the Search Box:

Set the Foreground Color to #e5f0f2.

Grab the Rounded Rectangle Tool, set the Radius to 10px, and draw a shape like the one below:

Grab the Marquee Tool now and select a rectangle inside our shape, and press delete:

Repeat the step as shown below:

Select and hit again Delete on your keyboard.

Next grab the Text Tool , and set it to:

  ** Arial -> Regular -> 14px -> Strong -> Color : #8fd0dc ;

Write the text:

Using  #0c529e as Foreground Color and Photoshop’s basic tools, draw this nice shopping cart:

You could use for instance the Line Tool, and the Elipse Tool.

Let’s proceed to the text:

Styles used:

  ** | : Arial -> Regular -> 14px -> Strong -> #c7e7ed ;

  ** Your Shopping Cart is empty!  : Arial -> Regular -> 9px -> Strong -> #c7e7ed ;

  ** Login....Register  : Arial -> Regular -> 9.5 px -> Strong -> # 90d1dc ;

  ** | New here? :  Arial -> Regular -> 9.5 px -> Strong -> # c7e7ed  ;

Here is the result :

If you have enjoyed this tutorial please share it using the social network icons below.

And don’t forget to FOLLOW ME on Twitter or become a FAN on Facebook to find out when the next part of this tutorial will be released.

Thanks for visiting my blog and take care guys!

ByeJ!

You can read all the tutorial! Check out the parts A,B,C,D! ENJOY!

	Clean beautiful online store layout. Part D		Clean beautiful online store layout. Part C
	Clean beautiful online store layout. Part B		Clean beautiful online store layout. Part A