Suport the Website

Powered By EXEIdeas

Beautiful Clean Online Store Layout. Part IV.

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

Hello my friends. In this tutorial I will show you how to finish that beautiful clean online store layout, started a few weeks ago. I apologise for the delay but I’ve been working on some other..stuffJ
So,..this is the final version :

So far we have created

And now..the final partJ
Let s get started!
So open your Photoshop file.
First part to be created will be the upper part:

Pick up the Text Tool.
Set the foreground color to # a31313, and the Text Tool to Arial, Regular, 18px, Strong
and write Prom Fashion.
Next raw of text : Arial / Regular / 14px / Strong / # 9f9f9f.
Open a picture and place it right below the text : the Text Tool againJ and add the following, right below your picture:
10$ ONLY using the following settings:
ARIAL / BLACK/38px/Strong/# fe6600.
Below this text create a # 6da92c rectangle, and over it place “Shop Now > > ” using the next settings for the Text Tool:
Arial/Regular/18px/Strong/# 9e0d0f.
Repeat the steps above until you achieve something like this:

To create the right upper part which is :

follow the same steps, and add on top of the text&picture a ##ff600 rectangular, and place over it a suggestive title – as WOW DEALS – using ARIAL/BLACK/38px/Strong/# 6da92c as settings for the Text Tool.
To create the bottom part which is :

you will need a nice butterfly brush. You can get them for free at – there are plenty of them - .
So create a white rectangle, and add a 3 px # Outside Stroke, in the Blending Option Panel.
Next thing to do is to grab your butterfly brush, set the foreground color to # 3698a9, and gently aply it on your new created rectangle as shown:

Tip If you want to obtain that nice fading effect too, then grab a soft rounded brush for your eraser, set the opacity to 12%, and gently start erasing areas of your butterfly!
Grab the Text Tool again and write down some suggestive title using the following settings:
Arial/Regular/24px/Strong/# 67a028.

Now grab the Rectangle Tool(U), and draw a nice little rectangle.
The color doesn’t matter because we will apply immediately some settings to it:

And a 3px inside Stroke using # 538a19.
The result:

Now over this lastly created glossy button, place a “SHOP NOW” text, using ARIAL/BLACK.
Insert a picture on the right side of your glossy button.
Set the Foreground Color to #ff600, and pick up the Seal Custom Shape Tool (U).
Draw a seal over the  bottom-left corner of your picture, and add some text over it too.
The result:

Again, if you haven’t read the previous tutorials yet, you can find them HERE (Part A), HERE (Part B) and HERE (Part C ), or of course on the main vertical menu in left top corner of my blog.
Don’t forget to follow on Twitter or/and Facebook to stay connectedJ!
Ok guys that is all...Thx for reading my blog.

Post a Comment