How to create an attractive website design for a pizza shop
Beginning with the 20 th century, pizzas have become the most favorite dish for many people. Due to the great variety of this food and diverse choice of ingredients in accordance with local tastes, pizzas became perfect to the most exquisite taste. And now pizza shops and restaurants are the most visited places. But the matter concerns another thing. This tutorial will be interested above all for those who own pizza shops and want to make an attractive and effective website for it in order to present it online and increase the number of customers.
This tutorial will teach you how to make a website for a pizza shop. Step by step you will learn how to do the necessary customization changes to meet your project requirements. So, let’s go!
Choosing a template design
As always I recommend you to review our website templates. Here you will find a wide range of premium quality café and restaurant web templates designed for different kinds of activity. All of them meet the high quality standards and concentrate on your core requirements. This time my choice is template # 20881. It is a well-crafted web design, both in terms of usability and attractiveness.

After purchase you will find HTML-version and source PSD file of the main page, fonts which are used in the template and some screenshots in the archive. In case of a low-budget project, you may take advantage of free web templates that will help you solve both problems: time and money. FreeTemplatesOnline.com offers quality free web page designs that can be easily customized and used as a basis for your website.
Template customization
Now, it’s time for the template customization. If you have no knowledge of HTML and don’t want to spend time and efforts to learn it – you can easily contact templatetuning.com where you can order the template customization at an affordable price. And along with the rest of the way we will go full customization of your template.
For the full-fledged website we need only design of the home page, we will make other pages on its basis. To get started you need to install necessary fonts (usually they are placed in “sources/fonts” folder- in this tutorial you’ll find more detailed description). After that open .psd file in Photoshop and let’s learn step by step how to customize the web template to meet your project requirements and needs.
Don’t have time and desire to perform the customization by yourself? You may any time take advantage of TemplateTuning customization services. Their web developers will easily and skillfully do all the necessary changes for you. But if you are not afraid of difficulties, then let’s go on!
The first thing we should do is to change the site title, tag line and the phone number at the top right corner. Enter your pizza shop name instead of the default one.

By default all our web templates are saved without texts. That’s why after making all these changes we need to save all customized elements separately and then replace existing images.
I should admit that the main peculiarity of the selected web template is that it mostly consists of images (even a text area is saved as a picture). That means you should modify all these images using Photoshop and then re-save them.
The next step is to change the text. With the help of the Type Tool write the text describing your services in the most precise and brief words.

Then replace the existing images with your best photos. Pay attention to the size of the photos – they need to fit the dedicated section accurately to prevent harming your layout. That’s all for the first page.

And now here is the most important part of the customization process!
Before cutting the images out, you need to flatten the whole image that is your design. For this you go to “Layers” and choose “Flatten Image”.
Then cut the customized images, copy and paste them to the new document. After that go to File and choose Save for Web & Devices command. Leave the settings as they are because everything has already been done by a coder. Press the Save button to save files to the Image directory replacing the existing ones.
Let’s look at what we have:

Let’s customize the other pages. But before going further, you should define first what parts of the website design you need for your project.
Company
Write a few paragraphs about your pizza shop or restaurant letting your customers know more about the services you provide. Note: all modifications should be performed using Photoshop.

Then save the modified design elements and replace the existing images by them as we did for the Home page.
Our Menu
Customize the menu page for your pizza shop. Add the menu items, prices and descriptions for them.

Here is what we got:

Order Online
Let your customers order the food online. Make it convenient by adding a contact form. For its implementation you need to have some PHP programming skills and while I don’t have them I recommend to order it from TemplateTuning website. They said that it will cost you about $60 – for any type you choose.

The same should be done the Locations page:

That’s it! Your website design is ready to use.
Choosing a hosting provider
When choosing the hosting services you should be guided first of all by other people reviews, prices and quality. On this basis I recommend you webhostingbuzz.com
If you experience any troubles with registering a domain name or hosting you can always contact TemplateTuning.com professionals.
Website Promotion
You may find a lot of website promotion services all over the Internet. But probably, one of the most reliable among them is website promotion services from Web Design Library. It offers:
- Search Engines Inclusion
- Website Analysis Report
- Keyword Research Report
- Link Building Campaign
- Link Analysis Report
- Search Engine Optimization Report
- Search Engine Rankings Report.
* * *
Congratulations! Now you know how to create an attractive web design for a pizza shop or restaurant. Feel free to ask me any questions. Your comments are always welcome.
Good luck in your future achievements!
This entry was posted on Wednesday, April 22nd, 2009 at 6:46 AM and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.




April 27th, 2009 at 5:20 AM
the design looks great.
April 27th, 2009 at 8:38 AM
Wew..
What an info?
It’s great for me..
Becouse I’m newbie..
I hope I can learn from your site..
Thank you, sir..
April 27th, 2009 at 9:54 AM
Nice Template.
Good tutorial for slicing.
Thanks.
April 27th, 2009 at 10:49 AM
Good design for a pizza website… good work man
April 27th, 2009 at 11:22 AM
nice website tutorial thanks for the resource..
April 27th, 2009 at 5:39 PM
I have several issues with this ‘tutorial’.
To begin, you steal free resources, spend too much time in Photoshop, and still have no distinct call-to-action.
Other dilemmas:
1. Text as a graphic? So much for SEO! This _is_ the web!
2. Re-selling a Template? Lazy designer!
3. When your client finds the same (free) template being used for a competitor, you screw him first, then yourself out of future work.
You spend too much effort to make it _pretty_, not making it _work_. A poorly designed (all-graphic) website is sure to do nothing for getting new business.
As far as I’m concerned, all restaurant sites should be basic: menu, address, contacting us. Everything else is marketing garbage that most web visitors simply ignore.
Try, try again!
May 2nd, 2009 at 3:02 AM
A really good tutorial. I mainly focus on photo retouching but this tutorial offers a good insight into web design using photoshop.
May 4th, 2009 at 2:11 PM
thank you
June 2nd, 2009 at 9:03 AM
Thank you so much!
July 1st, 2009 at 9:32 AM
Thanks for this information..
This information is very nice for designing a website.
July 19th, 2009 at 10:26 AM
I have to agree with ‘Under’. It really depends on what you are trying to achieve, but I think the title of this tutorial is a little misleading. Perhaps ‘how to modify a template’ rather than ‘how to create a design’?