Prestashop is a French CMS similar to oScommerce which offer the solution to create an online shop in few hours. It is possible with this CMS to use Temples (like Wordpress), then it's very easy to customise its shop with his own graphical interface.
In this Photoshop tutorial, you are going to learn how to create a
template especially for the Prestashop CMS. After the creation, you will
integrate it in a file type compatible with Prestashop.
The Template of this Photoshop tutorial is adapted to shops regarding audio items, computers or all high-techs items
Before to start this tutorial, please check the final result bellow:
You are now ready to begin.
SETP 1 Create a document
Open Photoshop software then go to menu File>New and enter the document size (in my example 1500x1000px). Press the Ok Key to display the picture.
Use now the Rectangular Marquee Tool (M) to create a selection with a size of 1000x50px (use guides to get help). Create a new group and name it top, create a new layer too and name it backround. Fill the selection with black colour (use the PaintBucketTool (G)).
Go to menu Layer> Layer Style> Gradient overlay and use the settings below.
Use now de the Horizontal Type Tool (T) to add a welcome message (using the Arial font 12px). Select the text layerand go to menu Layer> Layer Style> Drop shadow. Set the options as show here:
At the right of your page, add a scroll menu for the currencies. To create the scrolling list, use a rounded rectangle.
Import now several flags to access the shop in different languages. Reduce the layers opacity to 60% for the inactive flags.
See below the result of the top side of your page
STEP 2 Create the header of the page
Regarding the header, create a new group and name it " the header". Create now a new layer and name it background, then create a selection with a size of 1000x50 pixels and fill it with the grey #d8d8e8.
Use the Horizontal Type Tool to create your logo. Two fonts are needed: TitilliumText14L Bold, TizaNegra. Add an internal shwadow on the text.
A search engine on the right side of the header will be useful to look for an item from the shop. To create the search engine, use the RectangularMarqueeTool (U) and add three layer styles : Drop shadow, Innershadow& Stroke.
To create the zoom, use the Custom Shape Tool (U) and select the shape "Search" in the picker.
Add the links using the Horizontal Type Tool (T), then add a shadow onto the text.
See now the top and header results.
STEP 3 Create the carousel
Create a new document, name it carousel, then use the Rounded RectangularTool (U) to create a rectangle defined with size 960x460px. Illustrate with pictures, in my example I used pictures from the website Apple.com
Regarding the page numbering, create a group and name it " pagenumbering", then create 6 circles. To do it, use the EllispeTool (U) and the grey colour #4c4f5e and purple #9842d4.
STEP 4 Create the first column
The pages includes two vertical menus (one on the left, one n the right), as well as a column of contents located in the centre. This step is regarding the creation of the first column.
Create a new group and name it the column1, then with the Rounded Rectangle Tool (U) create a rectangle defined with a size of 180x33px. Add three layer styles: Innershadow, Gradient Overlay & Stroke.
Use again the Rectangular Type Tool (T) to add the title of the menu: Sections. Add a drop shadow.
Create now a shadow under the title. To do it, create frist a new layer and place it under the grey rounded rectangle. Use the Gradient Tool (G) (avec le gradient Foreground -> transparent black) to create a gradient from the top to the bottom. Then go to menu Layer> Layer Mask>Reveal All and use same gradient on the left (from the left to the centre) and on the right (from the right to the centre). This method is needed to shadow and attenuate the external parts of the shadow.
Use the Rectangular Type Tool (T) to create a list of links. Use the colour grey #9b9ba3.
STEP 5 Offers
The column 1 finishes by a blog which promote an item of the shop with a special offer. To create this blog, create first a new group and name it box2. Use the Rounded Rectangle (U) to create a rectangle defined with a size of 180x300px. Go to menu Layer> Layer Style> Drop shadow to add two layer styles : Drop shadow & Stroke.
Use one more time the Rounded Rectangle (U) to create a rectangle (174x30px size). Then go to menu Layer> Layer Style> Gradient overlay and set up it as show below. Then add the title with a shadow (1px depth)
Regarding the gradient
Regarding the shadow on the text
Add a product picture. (in my example, I used a picture of an Ipad found on Apple Store).
Use now the Rectangular Type Tool (T) to add the product. To create the button, use the Rounded Rectangle Tool (U) with a radius of 60px. The title is the same as the one use for the box.
To finish, we need to create a grey gradient on the bottom box. To do it, create a new layer just over the rectangle and name it gradient. Then create an active selection around the rectangle (to do it, press Ctrl/Cmd and click on the VectormaskThumbnail). Go now to the menu Select>Modify>Contract and enter value 2px. To close the subject, use the Gradient Tool (G) with the gradient Foreground -> Transparent (foreground colour grey #bbbbbb) from the bottom to the top.
Do not forget to correctly order your layers.
See now the result of column1
STEP 6 Contents of the centre
It is time now to create the contents on the website centre. This part, i.e. put under the light, the last items added onto the shop or the most popular... For this part,, you will use the styles already used for the column, that example why I will not take long time on next steps.
Create first a group and name it the content. Create a title (like on the column of the left).
Put in a new group, the layers regarding a product offer (on the left, with the picture, the title, the description, the price and the button). Duplicate this group to put 6 products on the central area. You can update description of each product.
To create the page numbering, duplicate the rectangle and the shadow used for the title. Put this copy under the products.
Use now the Rectangular Type Tool (T) to add the numbers : 1 2 3 4 5... and to activate the page, create an ellipse using the Ellipse Tool (U) under the number "1". Add the layer styles: Innershadow & Stroke.
See result of the 2 first columns.
STEP 7 Last column
And now, the last column which includes three blocks: the basket, a products selection by brand and an automatic offer (in our case, free deliveries).
Regarding the basket, create frist a new group and name it basket. Create now with the Rounded Rectangle Tool (U), a rectangle with a size of 180x170px. Then add the purple gradient previously used for the buttons. To finish, duplicate the shadow of the titles (column of the left) and put it under the purple block.
Then add the basket content using the Rectangular Type Tool (T).
Use again the Rounded RectangularTool (U) with a radius of 60px to create two rectangles. Add on these rectangles, two layer styles: Drop shadow & Gradient overlay.
Add now the text into the buttons. Use the colour #595959. Add a shadow on the texts (menu Layer> Layer style> Drop shadow).
In the column of the left, duplicate the title of the box regarding the brands, and put it on the right side.
Create a new scrolling list using the Rounded Rectangle Tool (U), use the grey #e5e5e5. Add a shadow on this rectangle.
Regarding the last block, create a new group and name it the free shipping. Create a new rounded rectangle (same style as the one used for the column 1), add the text and the button. Regarding the picture of the box, use Google picture or buy a picture on Fotolia.com.
See here the final result with the three columns.
STEP 8 Create the footer
The footer includes three parts : one part for offers or reduce codes (tickets), one part with the most important links and the newsletter from and one part with the Copyright.
Create for the first part, a new group and name it the footer. Create a new group into this group and name it part1. Duplicate the grey band used on the top of your template and put it into the group part1.
Use the Rectangular Type Tool (T) to add your slogan. Add a drop shadow on this text.
On the right, place a purple button to read more details about this offer. The purple button has been created previously, use same styles.
STEP 9 The seconde part of the footer
Create a new group and name it the Part2. Then with the RectangularMarqueeTool (M), create a selection under the grey bar, on the rest of your picture. Create a new layer, name it background and fill your selection with this colour #343844 and the PaintBucketTool (G).
Create a rounded rectangle (radius 60px) using this grey #202326. Add an Innershadow to this rectangle. To finish, use the Rectangular Type Tool (T) to simulate a title and a list of links.
Use same method to create three lists of links.
One the last column, use same title, but instead to create a list of links, add a text to invite your visitors to subscribe to the newsletter.
Create now the input of the form using same styles same the styles used for the titles.
Create a purple button to validate the form. Use the button use previously on the website, but add a stronger shadow.
The second part of the footer is now finished.
STEP 10 Last part of the footer
Create a new group and name it the part3. Use the RectangularMarqueeTool (M) to create a selection on the bottom of your picture (1000x50px). Create a new layer and name it background and fill your selection with the colour #060708. Add an innershadow to this layer.
Use the Rectangular Type Tool (T) to add the Copyright. Use this colour #3d4151.
Add on the right the different accepted modes of payment, it is very important for an online shop. Use again the Rectangular Type Tool (T) but this time, using this colour #d8d8e8 and add the logos regarding the differents modes of payment. (you can get them from inconfinder.com).
Before to close this tutorial, do not forget to order correctly all your layers.
And now, see the final result of your layout.
You now use to integrate this design into an HTML/CSS document, and it it after in the hands of a developer to create a template adapted to Prestashop. On our website, we teach you to become a designer and not a
