There are many websites in which the design of the website is far more important than the functionality that it does. To create such website, you would have to first focus on the design. There are few software frameworks which are better than Photoshop. Hence, many a time you would have to start with the design in the Photoshop and then convert it to Joomla. So, first we shall discuss on how to build a website in website and then we can talk about transferring the HTML file to Joomla which is very routine task. Hence, this tutorial will consist of two steps. The first one would be to create a PSD mockup for the website step by step and the second one is to import these HTML files to Joomla. So, here is the detailed guide on how to create a website PSD mockup and set it on Joomla.
Building the PSD Mockup
Before you get on with the business of creating the PSD mockup, you should have a framework in mind. For any useful website, it is important that you have planned every stage of it. It shall be assumed that you have planned the front page, and the overall structure of the website. You should also know how to use some of the basic software. You should know how to do some basic coding stuff so as to manipulate the images properly. Your objective here is to create the PSD which would show the website very accurately only in terms of the design. The website would not be functional, because you won’t do any HTML stuff in the beginning. Once this part is complete, you would port these into the Joomla and make it active.
Have a file Structure Setup
Since, it is assumed that you have already planned the website; it is pretty obvious that you must have gathered the files and images which would be required to make the design of the website. Before you start with the project, it is advisable that you start with creating a proper folder structure. So, you should have a folder named after your project. This would be the hub for all of your working. This would contain the index file. Create a folder named ‘Images’, were we shall place all sorts of images that would go into the website. Also create an index.html, which would be our homepage. Also place a CSS file, with styles.css.
The first step is start the with the background image. Do whatever you want to. This is usually a plain background, usually a gradient or something in those lines. You can of course have a custom image in the back, but make sure that you will be able to write things on the image.
Next, create a logo. This is what’s very important. You should design it as well as you can. Most of the people who want to build a PSD mockup would already have a logo. Save this as logo.jpg. The next step would be to create backgrounds for the CSS. The menus would require some background which would make it look 3 dimensional. These images can be found on the web, and you shouldn’t have any difficulty whatsoever to find these.
Building the HTML and importing to Joomla
Once you have created the images for the website, the next step would be to include these in index.html. It is assumed that you know how to make HTML pages with CSS. Once you are done with it, you would have to create a module in Joomla and import the HTML file in the Joomla. That can be found in other tutorials.