Fabrique Ecommerce website template. Created: by RobbyDesigns
Introduction
Thank you for downloading this template, please read this Help file in full before requesting any more help as answers given within will not be repeated.
About 'Fabrique Ecommerce Template'
A beautiful clean design for an online store, Fabrique Ecommerce Website Template features 8 fully layered and arranged PSD files plus full Help file. Uses only freely available Google Web Fonts (detailed in the Help file).
Sources
The following were used in the creation of this template:
Fonts
'Raleway (Ot1)' (used in the logo and headings) - free from Fontsquirrel.com
'Gudea' (slogan and body text): Fontsquirrel.com Note: In designing this template I wanted developers to find it easy to code thus I used Raleway and Gudea fonts which can be imported from Google Web Fonts; in this way you're guaranteed the visitors see the site as it's intended to look with the benefit of NOT using slow and clunky 'Cufon'.
This is a template for an online store thus you are most likely to use your own images, however, I have listed the images used in case you're interested:
'Claire Aitch Bath Sheets'123RF.com
'Sale On towels' 123RF.com
'Chocolate cushion set' 123RF.com
'Kay Lea modern bed set' 123RF.com
'Ali Baba rug and cushion' 123RF.com
'Royale curtains' 123RF.com
'Claire Aitch Zebra rug' 123RF.com
'Real pine wood flooring' 123RF.com
'Modern flowers bed set' 123RF.com
Contact page office block 123RF.com
PSD
In your pack you will find the following PSD files:
Home.psd - The Home page design.
Product.psd - A design for a product information page.
Cart.psd - This design details what's in the Basket ('Cart').
Log in.psd - A design for the client log in page, includes a paragraph on registering for any dummy who clicks log in when they're not yet a member.
Register.psd - Design for the registration of a new customer.
Contact.psd - A design for the Contact details and form.
PrivacyPolicy.psd - A nice simple layout useful for the Privacy Policy page amongst other uses.
404 Error.psd - A 404 error page design.
Editing these files is simple enough for anyone with even a basic grasp of Photoshop, however, special mention must be made for:
Navigation bar (all files) - Open 'Nav' folder and activate 'sub-nav' folder to view the design for the nav child-items.
Editing Tips - There is one PSD for each of the pages and should be easy for an experienced Developer to code mainly in CSS. Only simple effects were used in this design so I feel there is little point in explaining each and every layer of the PSD's here; if you are new to Photoshop I would recommend you visit this website.
Editing the text:
Once you have downloaded and installed the fonts detailed in the Sources section you're ready to edit.
Either click the 'T' in your layers palette or choose the 'Type Tool' from the Photoshop 'Tools' and type the text you desire. Text which uses effects can be edited thus - double click where it says 'fx' and you can edit the special effects which are in use on that layer (such as Drop Shadow, Color Overlay, etc).
Editing the images:
As explained, this design was created to be coded with CSS in mind thus the effects on the images are achievable with CSS only, however, if you'd like to change the images in the PSD's you can do so by matching their size with your new image and placing them on top of the original image, duplicate the 'fx' and you're done.
Opacity is used in this design! You'll find I have used opacity for the content backgrounds in this template. This is something you'll need to keep in mind when editing/coding this design.
Other
All topics have been covered.
More Help
I'd be glad to help you and am available at the set rate of £15 per hour. www.robbydesigns.com
For the latest news, templates, freebies and more follow me on Twitter:@robbydesigns and my Blog.