Suport the Website

Powered By EXEIdeas

Beautiful Clean Online Store Layout. Part II.

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
This is supposed 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.





In the previous tutorial I have shown you how to create the header of this layout. You can find it here , if you haven’t read it yet.
Today I’m gonna show you how to create part B, which is:

If you haven’t read the previous part of this tutorial it means that you don’t have the old Photoshop file so you will need to create another one so:
Create a new 800px * 200px Photoshop document.
Fill it with white.
Open a couple of pics and place them into the canvas (try to find some pretty heavy coloured ones)
and place them as shown:

Create a new layer. Set the Foreground color to #a40e10.
Grab the Custom Shape Tool, pick the Seal Shape, and draw a small shape somewhere on your first pic as shown:

Now select the Text Tool, set it to:
Now write something inside of your seal.
I wrote 50% off shipping:

Now with the Text Tool still on, change the writing color to #fe6600.
Add more writing..

Next: select the Regtangle Tool and draw a small rectangle as shown in the picture:

Apply the following settings:

Now you should have a beautiful sleek glossy button.
Grab the Text Tool  and write Sign Up NOW:

Using same Text Tool, write some more text using the settings as follows:
Subscribe to our monthly Newsletter to win
THOUSANDS of prizes..
ARIAL->REGULAR->38px-># fe6600;
ARIAL->REGULAR->14px-># fe6600;
Next step:
*Create New Layer. Grab the Marquee Tool(M), and draw a little square. Fill it with #c9e9ef. Open the Blending Option Panel and apply a 1 px #b2b2b2 outside Stroke.
Repeat the step above, but instead of #c9e9ef, fill in the layer with #ffff.
Duplicate the layer 2 times and place them as shown in the pic below:

Now add some numbers and place them over the new created squares.
This is the result:

EnjoyJ! This is the second part of my tutorial. Hopefully I will be able to create the next one sooner than I did with this oneJ
Don’t forget to follow me on Twitter or/and Facebook to stay connectedJ!
Thx for reading my blog.

Post a Comment