Tag: Template

World’s Famous Fast Food Restaurant Chains Websites for your Inspiration

It may be a mouth watering after hearing Fast Food Restaurant, but here we have added World’s Famous Fast Food Restaurant Chains websites for your inspiration, these Famous Fast Food Chains include, KFC, McDonald’s, SubWay, Roy Rogers, Red Rooster, Popeyes, Hardees, Dunkin Donuts, Chicken Cottage, Pizza Hut and a lot more. So you will be having a lot of Inspiration and creativity after watching these sites. These restaurants are placed in Alphabetical order. For your convenience we have uploaded a ZIP file having all Screenshots in Actual Large size. [Download All Large Screenshots Total File Size=34.47MB] A&W Restaurants: Arby’s: Arby’s Restaurants are known for freshly sliced roast beef and premium Angus beef sandwiches, all made with fresh, wholesome ingredients. Menu items include our classic Arby’s® Roast Beef, Ultimate Angus sandwiches, Prime-Cut™ Chicken, Market Fresh sandwiches, Jamocha shakes, and value menu favorites like turnovers and curly fries. Arbys. It’s Good Mood Food. Arctic Circle Restaurants: Au Bon Pain: At Au Bon Pain, we take our service – and menu – beyond the expected. From our authentic artisan breads and scrumptious pastries to inspired menus filled with savory sandwiches, soups, salads and entrees, no recipe is less than perfect, no request beyond our reach. Blimpie: Blimpie sub sandwich franchises have been a part of the American landscape for over 40 years. The tradition of serving the best sub sandwiches anywhere continues...

Read More

How to design an Interface in Photoshop

This is very important tutorial for those who wanted to make their First ever website project. In this tutorial I’ll teach you how you can make your First ever Interface (Mockup) for your project. You will also learn some basic things to keep in mind before starting the project. So lets start. Note: As we are making a proper interface and it is having large size so it will not fit here, so I’m going to reduce the size of every file to fit here. If you want to see the final large image then click on the bottom image to see actual large view. 1. First of all we have to see that for which Screen Resolution we are going to make the Interface? Mostly interfaces are being made for 1280 x 1024 resolution. So you have to give some extra space for Vertical Scroll bar for all browsers. Height should not be a matter but width should be. I mean to say Horizontal Scroll bar for any project looks Odd. So we are going to make an interface for 1280 x 1024 resolution. Let us take a new file in Photoshop having width 1200 px and height 800 px. I’m intentionally taking smaller height file, so that I’ll let you know how you can increase the height after making some part of interface. So take the new...

Read More

Slice your Mock up to make Website – Part III

This is the third and final part. In this part I would be telling you how to make Link having Mouse over behaviour, how to give Bullets in CSS, how to put Flash while it will be Validated through W3C Validator, also how you can Float Pictures on DIV. So this is also very important tutorial, hope like the two tutorials before, you have practiced a lot. [Goto Part I] [Goto Part II] 1. First of all I’m going to tell you how you can apply Fonts to titles. I’m making a DIV in CSS but not giving it size, just giving the Font color only, as: .Golden-Title{ color:#c6b182; font-weight:bold; } 2. Now I’m going to apply this settings for the Titles in Golden, like in the body at News area, so I’m going to select the text and from the Property Panel in Class list box, just select Golden-Title and it will apply the settings to that text, so code will be: <span class=”Golden-Title”>06/03/2010</span> Note: I’ve not called class=”Golden-Title” in the <p> tag because I just wanted to change the font of date and as date is included in the paragraph with other text, so If we apply this DIV in <p> then it will change the whole text. 3. Now I’m going to make some links and then changing its normal and mouse over colors. I’m selecting...

Read More

Slice your Mock up to make Website – Part II

Here is the second part, hopefully you have done and learn Part I. Because if you have not done Part I, then this part would be useless for you. [Goto Part I] [Goto Part III] 11. I’m going to slice my Logo, Slogan and Top navigation bar where Home | Info | Contact is written. I’ve sliced the header as: 12. As I must be needing two horizontal DIVs for header, so I’m going to make a Common DIV for header. I’ve taken .Header-Common-Div and call it twice under Header-Main as: <div class=”Header-Main”> <div class=”Header-Common-Div”></div> <div class=”Header-Common-Div”></div> </div> 13. I’m going to take a DIV for Slogan, then for Logo and then for Top Navigation Bar. First of all in Photoshop, select Marquee Selection tool and select the Slogan area: Press Ctrl+Shift+C (Copy merged layers), then taken new file, don’t change the size  (i.e. 177 x 63px as of image size) and then Press Ctrl+V to paste the slogan, save this file in img folder, then come back to HTML again and take a new DIV (of 177 x 63 px size), having the same size of image file and call it in first COMMON div of Header. <div class=”Header-Common-Div”> <div class=”Slogan”><img src=”styles/slogan.jpg” width=”177″ height=”63″ alt=”” title=”” border=”0″></div> </div> Note: To validate this site from W3C Validator, it is essential to use Alt tag alongwith all images. Now I’m...

Read More

Slice your Mock up to make Website – Part I

Here I’m going to tell you some secrets. I hope these would be very rare and by using these technique anybody can become Web Designer. I’m going to tell you how you can convert your Template into Website by using Slice and Dice technique in CSS. It will be very long tutorial, because I’m going to convert a whole project into Website. So get ready for that. Here is the part 1. [Goto Part II] [Goto Part III] Note: This Tutorial would be telling you: – What thing should you do to validate it from W3C Validator? – It would be having Browsers Compatibility, it will be giving same look in major browsers. – It would be telling you how to Convert PSD Template into Website (HTML/CSS). – A lot of things to learn for Beginners and perhaps experts too. 1. First of all we have to prepare for all this. You must be needing a Template in Photoshop. I’ve chosen this complicated Template, so that you must be having a lot of things to learn: Then you have to prepare a Folder in which you will be putting your HTML files, Images, Styles Sheets and if Flash Animation then a place for that. Suppose We are going to make the following Sub-Folders in a Folder. Suppose our main Folder has the name, Stunning-Mesh then the following sub-folders must...

Read More