Category: Slice Mockups

Excellent Web Layout Design Tutorials in Photoshop

For those who wanted to be a Web Designer, if they are new and they don’t know what points to keep in mind before making any Template or Interface, what color scheme to choose before starting any project, what kind of things they should keep in mind before starting any project, then here we have collected a lot of Tutorials about Web Layout Designs in Photoshop. They can be a professional after following these awesome Tutorials. More than 40 Tutorials included in this post so anybody can make an Interface or Template after following these. Enjoy visiting and learning...

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