Tag: Mockup

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