PCandWEB » Tutorials

How To Embed Custom Font’s On Webpage

Subhadeep — Wed, 13 Jan 2010 10:57:16 +0000

In this tutorial i’ll show you different ways which you can use to embed custom font in your website. I’ll keep away from the old or rather obscure which is know as dynamic image replacement where graphics script used to do all the processing on the backend and convert the text to images. This method is somewhat obsolete as it is resource heavy and it doesn’t allow a many styling properties and moreover not suitable for basic servers without script support.

If you still want to know the process of dynamic image replacement you can check it here AlistaPart. FLIR is another great project on dynamic server side based image replacement. You can still use them if you need to, but in this article we’ll only concentrate on User Side Scripts with no backend processing and SEO friendly options.

What we’ll focus on instead on the 4 newer and better ways,

Typeface.js
Cufon
sIFR 3
CSS 3

The above mentioned ways have their own pros and cons which we’ll discuss as we go on, but most of the above listed ways are SEO friendly, with no server side processing and fast. But before we start i should mention most of the above mentioned methods are supported by recent browsers but older browsers will have rendering problem so depending on what you need you might want to check on the website as of the list of browsers supported.

Typeface.js

This works simply by using browsers capability to draw vectors in HTML documents. But before doing so the font must be converted to its internal format using the perl module.

1) Download Latest Typeface.js.

2) Convert the Font and download the js.

3) Link the js files in head.

4) Any HTML element you want to be rendered in typeface.js should have typeface-js in its class name and font-name in the CSS. If you are loading the style from external CSS make sure the CSS is linked on top of the js files. For my test i have used this.

  
    
      Test of Gentilis Selectable Font

5) Demo Of The Above Method. Also refer to Typeface Usage for more details on its usage.

Cufon

This works similarly to Typeface, but main difference being the texts are NOT selectable which i think is a drawback, as far as embedding is concerned its almost same and as typeface, but the size in case of Cufon is less by some 40% with better loading time.

1) Download Latest Cufon JS

2) Convert the font and download JS

3) Link the js files in head, and just add the elements to replace in Cufon.replace(); css styles will be added from the predetermined stylesheet.

4) Write the body as usual no need to stick to certain class.

	
		This text will be shown in Vegur.

5) Demo Of The Above Method. Also refer to Cufon Documentation for more details on its usage.

sIFR 3

sIFR use Javascript, Flash and CSS to implement the display of custom font. Good thing is the text are selectable and this method is perfectly SEO friendly. Bad thing is it requires users to have flash plug-in installed to display the font, and also the size of the final file is pretty large by 20-30% from Typeface method.

The implementation is not as straight forward as other methods mentioned above, many steps are required and you need to have Adobe Flash on your machine on 1st place, follow the Official Guide

Find here the Official Demo

CSS 3.0

As earlier as CSS 2.0 in 1998 it was implemented but discontinued in CSS 2.1, but again in CSS 3.0 it has been re-introduced. Compatible with all major latest browsers, this is really the best method unless again it is discontinued by W3C.

1) Declare each font-family you want to use using @font-face rule and styles all in CSS

@font-face {
	font-family: yourFont;
	src: url('yourFont.ttf');
}
h1 { font-family: yourFont, sans-serif; }

4) Write the body as usual !!

	
		This text will be shown in Vegur.

5) For more references on @font-family visit W3C

What To Use ??

I’m sure this is the question which have aroused in your mind, and i’m also sure the answers in your mind too !! Dynamic Image Replacement methods like FLIR can be used if you are too creepy about rendering in different browsers and other compatibility problems in old browsers. But unless that’s not your case and you are ready to do cross browser experiments i’m sure CSS 3 is clear winner, but if i was in your place i’d wait for CSS 3 to become more mature before jumping on it, instead for now i’d use Typeface.js though its larger than Cufon i like that users can select the texts as usual, but if you are looking for something fast loading and small size i’d recommend Cufon, with all these options i doesn’t really recommend sIFR on any situation unless you really want to try something flashy (pun intended)

How To Create A Page Peel Advertisement In WordPress !!

How to Create Cool Web 2.0 Logo For Black Background

How To Add Author Details With Gravatar In WordPress Posts

How To Create Old Grudge Style Print Ready Business Card

Subhadeep — Fri, 08 Jan 2010 11:58:37 +0000

PS. The fastest way to start a site just like this one is to get yourself a premium Magazine WordPress Theme. It will save you a lot of time.

—————————————————————————————————–

Today i will guide and help you to create a cool old grudged business card in photoshop which is fully print ready with full bleed. The size of the business card we’ll be creating is standard US size of 3.5 X 2 inch. I’ll show you some techniques for working swiftly for any design you do in future and i promise you’ll learn something new in the tutorial.

The Assets

Before we start i want you to download the following files unless you already have them in your computer. This will be needed in the design process.

Business Card (Bleed Ready) Template
Rough Natural Paper Texture
Calibri Font (If you use Windows Vista or Above its already there)
Black Oak Std Font

Final Business Card Preview

The Basics

Download the Business Card (Bleed Ready) Template. I have created this for your ease, you can use this in any future design you’ll be doing. Let me go through the template first.

Size 3.75×2.25 – The extra 0.25 inch are used for the bleed. While printing the full bleed process will trim away the extra bits. I have marked the bleed lines and cut lines and safety margin using guides, so please enable guides from View>Show>Guides.
The Template is print ready with 300dpi resolution and CMYK colour.

Creating The Layout

1) I’d recommend you switch off the guides for now so that we can check out the uncluttered design. We’ll be creating the bare background first. Create a new layer and add gradient as shown below.

2) Next we need to add slight noise using filters. Go to Filter>Noise>Add Noise, Amount: 2.45%, Distribution: Gaussian, Select Monochromatic.

3) Assuming that you know the basics of pen tool create 3 shapes top of each other following the image below. If you don’t know to use pen tool, just select pen tool and click on 4 corners, follow the images below. Create the shapes in 3 different layers one above other.

Adding The Text

1) Lets start with the name, using Black Oak Std font, you can also use any other font i had found this font on machine lying idle so i used it, but try to use old style fonts, type 18pt #db9628 text. You’ll notice the width of the font is very high, so what you need to do is Press CTRL+T (Transform) and lower the width. Also lower the line height to 18pt.

2) Right Click the text layer and select convert to smart object. If you are using lower versions of photoshop and don’t have this option please rasterize the layer by right clicking and selecting rastarize layer. We need to do this to give the text the flow of the shapes. After converting press CTRL+T again.

3) Now this part is somewhat difficult and may require retries. Press ALT key in the keyboard and drag the corners of the transform box to the edge of the shape. You might want to try lowering the height of the text before doing this. Now press both Shift+ALT and and select one corner and drag it towards inside to lower the text size.

4) Then drag the text little down and readjust the corners pressing ALT until you come up with something shown below.

5) Follow the same steps for the other texts too. Several retries will give you the wanted result. For the other texts i have use Calibri font. For the brown text the colour i have uses is #4b3613.

Adding The Flavour

In this part we’ll look on how we can give the card a old paper type feel. This part is not so tough, this is the chill out part.

1) I hope you have already downloaded the Rough Natural Paper Texture. Drag it over to our main business card PSD file, and use CTRL+T to lower its width and height to 58%. Make sure its on top of all layers.

2) Now Press CTRL+U (Hue Saturation) and select saturation to -100. Change the blending mode to Overlay, opacity 23%. Then select CTRL+L (Levels) And try experimenting until you get a good feeling of the paper texture.

3) Now we’ll add a burned edge effect. For that first create a new layer and place it above all layers. Fill it with black. Now select the Rectangular Marquee Tool, change feather to 20px on the top. Draw a box as shown on image below and press delete. Deselect it and change opacity 62% and blending to linear burn. Now press CTRL+U and follow settings shown below.

The Torned Edge

1) We need to create the brush for the torned edge, select 17px Chalk brush and increase its size to 20px. Then Go to Brush setting (Windows>Brushes) and follow the images below.

2) Now Insert a new layer above all layers, make brush colour black and draw something which resembles below.

3) Change Blending to softlight and opacity to 53% and congrats your Business card is ready. Go print it.

Download The Business Card

As always for your convenience i have provided the download link for the completed PSD file below for FREE. If you don’t want to go over this steps and just want to edit the text and print your card you can do so by selecting the text layer and clicking Edit Contents.

Get Your Card Printed For Free !!

Uprinting is offering 250 free business card to 1 lucky winner, to enter the contest Click Here

How To Create Cool Shattered Rainbow Text Effect In Photoshop

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

30+ Inspirational, Cool And Creative Business Card Designs Showcase (Part 2)

How To Design A Grey-Blue Blog Design In Photoshop – GreyFuture

Subhadeep — Sun, 03 Jan 2010 08:50:23 +0000

If you are looking for a nice way to display your photos you might want to check out WordPress Gallery Theme.

—————————————————————————————————–

This is my 2nd attempt of creating a attractive blog layout in photoshop, My previous attempt : How to Create Greenary WordPress Layout In Photoshop had a fair amount of response and had even been converted to working Blogger theme which is being used by more than 100′ds for blogspot blogs !!

This design which have grey and blue as their main base colours, PSD file have been attached at the end of the tutorial for your convenience, but please note i haven’t been able to get much time to arrange the layers and release, so you have to cope with un-arranged layers, and as always this theme is free and can be used on any commercial or personal purposes (i prefer the proper credit be given though). If anybody want to convert it into working theme don’t forget to let me know how you did

Final Layout

: Grey Future (Click To Enlarge)

Creating The Header & Menu

1) Create a New File (Width 1020, Height 1550)

2) Use the rectangle tool to draw a rectangle in the top.

3) Open Layer Style Palate and give it a gradient as shown in image below.

4) Create another rectangle just below the upper rectangle and add the following layerstyle.

It will look like below after your done.

5) I’ve created the top right menu using Myriad Pro (condensed) 16pt.

6) The main top menu text have been done using Myriad Pro (Bold Condensed) 24pt #444444. In the logo Myriad Pro (Black Condensed) 76pt have been used and layer style shown below have been added. Slogan is 18pt Myriad Pro (Black Condensed). If you dont have Myriad Pro, i’d recommend using Impact for the logo and Arial in other areas.

Creating Featured Section & Polishing Borders

7) Now similar to what you have done with menu, create a rectangle just below menu with approximately double height of the header, and add a light grey to medium grey, linear gradient using layer styles. This box will be used for the featured post section.

8 ) Now we’ll learn how to polish the edges to make them look more edged, this is a very easy trick, all you have to remember is that we need to 1px lines side by side, 1 will be of darker colour and another lighter colour. Check the image below.

If you are unsure about the colour, just add 1 black and one white line and play with the opacity slider in layers panel.

9) The featured post Heading text have been created using Myriad Pro (Semi Condensed) 36pt, and a gradient have been added (linear #7d7e7d to #oeoeoe). The paragraph text : Arial 14pt #434343.

10) For the button select Rounded Rectangle tool and select 20pc as radius, then draw a small rectangle. Give it a grey to white gradient and 1pc white stroke. The text is Arial Bold 18pt, with a inner shadow, the setting can be checked using the PSD file.

11) The image have to have the following style.

13) Now the last thing we need for the featured section is a shadow, which is very easy thing to add, create a new layer behind the featured post layer and create a elliptical circle, then give it a guassian blur of 25-35 px, and the readjust the position and lower the opacity to 33.

The final image uptil now for what we have done.

Creating The Posts

14) Creating the main body is easy as hell, 1st divide the width of document using the guides into two sections for your convenience. Then draw a white rectangle just below the menu rectangle. On the left section where the blogposts are visible, I have used Arial 24pt Bold, dark blue colour texts. Then i have used the line tool to draw a wide line below of two colours one light blue and one dark. Then on the right i have used Arial 12pt text. Check the image below.

For the paragraphs i have used Arial 14 pt, light grey color.

15) Next you again need to draw a rounded rectangle with 5px radius just below the paragraph, and add a 1 pc inner shadow of white colour, layer style to normak and choke to 1oo, and distance to 0, and also add a light grey gradient , and a stroke or 1 px light grey outside. Then using Arial font write comments on left and read more on right. Go to custom shape tool and select arrow shape and draw a small arrow beside read more, and change the colour to blue.

Same way do this for the 2nd post only changing the content and the positions.

Creating the Sidebar

16) Now the main thing that need to learn about the sidebar is the box style, create a rectangle with 5 px radius, and follow the styles given below.

17) For the heading i have used Myriad Pro (Semibold Condensed, and Condensed) 36pt, with a medium grey to dark gey gradient. For the search box draw a white rectangle with 1px grey border, The search butoon is self explanatory.

18) For the catagories text and popular article text refer to the image below.

19) The last thing that is left is the divider, which i have mentioned earlier, is a dark and light line, side by side, check the image below for explanation.

Creating The Footer

20) Now as before create another rectangle below the middle rectangle, and add a linear gradient, #2a2a2a to #373737. The big texts are created using 30pt Arial Bold white color, and Arial Bold 12pt color #747474. Now as always use the dark line and white line as the divider. And the last thing you need to do is add a shadow, by the process mentioned above using a an ellipse and then blurring it and changing opacity. And yes you theme is finished.

Epilogue

I’m very much interested to know if you like the theme and am also interested in seeing your own personalised versions which you come up with. If its good i will even add it in this tutorial with your name beside it Hope you enjoyed the tutorial as much as i did writing it. Below is the download link for the PSD file.

How To Create A Simple Greenary Layout For WordPress In Photoshop

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Create Simple Yet Attractive Eye Catchy Signature In Photoshop

Create 12 Web 2.0 Text Effects Using Layer Styles

Subhadeep — Fri, 01 Jan 2010 13:50:16 +0000

This is more a Freebie than a tutorial, i have created for you 12 text effects using only layer styles which can be freely used and distributed (don’t forget to mention source). The styles are top notch and can be used for any purpose from speeding up your designing process to using then as your logo.

Round Up

The following images shows the texts after applying the layer styles.

Web 2.0 Pink Text Style

Web 2.0 Green Text Style

Web 2.0 Blue Text Style

Metal Text Style

Green Lush Text Style

Gooby Text Style

Firefly Glow Text Style

Earthly Being Text Style

Cloudy Text Style

Blood Shine Text Style

Twitter Text Style

Web 2.0 Red Text Style

The Tutorial

To begin with you must 1st give the background an appropriate color or gradient, it is very necessary for the looks, i have used both radial as well as linear gradients for this purpose. You can experiment with different colors and also with the styles.

To learn the process how it was created just double click the “fx” icon next to the text you have used the style, layers style palate will open.

From there just click on the names which are ticked and check the settings, by the end of all the 12 layer styles i’m pretty sure you can make your own styles.

Please Note : The styles are more appropriate for large texts, mainly for logos or headers, but you can also use them on medium, or small texts provided you change the size of borders, shadows, gradients etc appropriately in the layer styles palate.

I haven’t wasted time and space just to write one by one, which you can see for yourself in layer style pallate.

I hope this styles will help you in your both learning and designing process.

Download

Download the layer styles above and Happy Designing !!

How To Create A Simple Greenary Layout For WordPress In Photoshop

How To Create Cool Shattered Rainbow Text Effect In Photoshop

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Add Author Details With Gravatar In WordPress Posts

Subhadeep — Mon, 04 May 2009 16:28:44 +0000

Many of you are having multi author blogs and may feel the need to show the author details on every posts published, some of you may have simple author but then also you’d like to add author details coz it looks kinda cool. Most of the premium professional themes comes with the added bonus but as i’m a free theme lover and hope you’re too, we can easily add it to our blog. I’ll show you how i added it in this blog and show you the different ways you can add it in your blog.

The Code

Author :

This will create a author info like i have in my every post. Lets analyse the code,

get_avatar(get_the_author_email(),’80′) , imports the avatar from gravatar, 80 is the size you can change it if you want to.

the_author_posts_link(), imports the link to which all the posts of author are shown, you can also change it to some other options like author sitename, IM etc, checkout the functions listed below.

the_author_description(), its self explanatory it imports the description added by the author in users option in admin panel.

Some other functions you can try can be found here : Template Tags ( Check Author Tags)

The CSS

Ofcourse everyone knows the output have to be styled, heres the default CSS i use for my site, you can change it to what ever suits your need.

#post_author {
border: 1px solid #E8E8E8;
background: #EBF6FB;
padding: 10px;
margin: 20px auto 20px auto;
}
#post_author img {
float: left;
border: 1px solid #E8E8E8;
}
#post_author h4 {
font-size: 1.4em;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
}
#post_author p {
margin: 0;
padding: 0;
}
.author_desc {
padding-left: 95px;
}

If you don’t understand the CSS and need any type of help with modification of style ask in comment, me or some other users will surely answer or you can also try some basic tutorials on internet on CSS.

How To Add

The biggest question aint it, if your a geek you already figured out if not heres the process,

Open style.css in your template and at the end of all CSS codes just paste the CSS lines in red above.
Open single.php and find now if you want the author description to appear at the start of every post just paste the PHP Code high above in red, just before the line , if you want it to appear at end of every post paste it below the line

Please Check The Following Images For Example :

CSS Example

PHP Example

And your professonal author description is ready, add more details in the php using the other functions and change it to suit your needs its all upto you.

How To Create A Page Peel Advertisement In WordPress !!

How To Create A Simple Greenary Layout For WordPress In Photoshop

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Create Man-Babies In Photoshop

Subhadeep — Thu, 30 Apr 2009 21:09:52 +0000

Few days ago one of my friend created a showcase of photoshopped man-baby images , i really liked the idea, moreover there was a comment asking for tutorials on it, so here am i posting a very simple tutorial on creating man-baby. Please note to follow the tutorial you must atleast know some basics because this tutorial only shows an approach of creating it, the rest you have to do on your own. So lets start.

Find Most Suitable Image

You need to have a suitable image to start with or you can find some on flickr, sxc.hu etc. I’ll use the following 2 images, both pictures have proper skin tones, background and faces to start with.

Please note example no1,2 and 3 in man-babies showcase uses a very different approach its based on photography, 2 different shots were taken with proper pose and merged on photoshop, i don’t have such photographs so can’t take that approach, but you can always try capturing on ur cam and editing them.

Basics

First step is rather easy using the rectangular, circular or any other marquee tool copy paste [CTRL+J] the faces and align them correctly (lawer opacity to see through it), if transformation like size, angle etc is needed do it using transform [CTRL+T].

In the 2nd image i have swapped the face horizontally using transform to make it flow with the original image. I have also made the size small and aligned it directly above the faces using opacity see through.

Clean Up

Cleanup is the most important of all, i have used layer mask and brushes to clean it up, 1st u need to select the head layer which you want to clean, and then click the “Add Layer Mask” Button in the layers panel, this will create a new mask in the currently selected layer, Press “D” to make your foreground colour black, now select a soft round brush and paint it over the extra pixels, it will be hidden by the mask, if you think u have mistaken just press “X” to swap foreground colour with white and brush and it will appear, try to precisely make the edges sharp and erase the extra pixels.

You can also use lasso, pentool etc to create a selection and fill it with black to remove extra pixels, its totally upto you and what you are most comfortable with, i needed speed so i used brush, make sure you change the diameter of brush when required. This step cannot be done in one step it needs practise and patience and number of trials.

Tips & Tricks

After you erase the extra parts i’m preety sure you’ll not get the desired effect, either your hair will look blurry or shadow will look awry, or maybe you also need to delete some parts of original to accomodate the new. In image 1 the hair was real difficult to sharpen what i did was real simple used some parts of the hair of the original image. Check the image below.

But in the 2nd image i had to erase some parts to accomodate new face, for that i used clone tool to duplicate the shrubs.

You may face many other problems like awry shadows which can also be solved by clone tool, sometimes to mix up both images smudge tool can be used, the main point is you need to know basics of photoshop and the basic idea before doing the edit.

Finally

After some real modifications i finally came up with both finished versions, though it may not be as good, i did it in hurry, if you give it time it will look more beautiful. And also don’t forget to capture custom photos and merge them to create real cool effects.

Source Files

The source files can be dowloaded here : MANBABY.RAR

Whether domain name registration or online marketing service providers, all are likely to accept credit card transactions nowadays.

How To Create Cool Shattered Rainbow Text Effect In Photoshop

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Create A Simple Greenary Layout For WordPress In Photoshop

How To Create Simple Yet Attractive Eye Catchy Signature In Photoshop

Subhadeep — Mon, 27 Apr 2009 20:03:18 +0000

I have been very slow going these days , due to my work, and today i’m back with a very simple photoshop tutorial, The aim of the tutorial is to create a very very simple signature for advertising yoursite in forums, portals etc and i guarantee it will be more noticable and attactive than other complicated masterpiece signatures. And as a matter of fact the tutorial is easy as hell !!

1) Create a New File in photoshop approximate 500*150px in size. Use rounded rectangle tool (10px radius) to draw a rectangle taking up the most of the space, as the image below.

2) Now we have to add some layer styles, click the fx button in layers panel and select gradient overlay.

Follow the image for the gradient settings.

Next we need to give it a stroke and shadow follow image below.

3) Next we need to add some text over it. USe the text tool to create text and align in the center, give it a gradient and stroke as shown below.

4) Its almost done except for giving it the prespective, create a new group and add all layers except the background layer in it and convert it into a smart object, if you are in older version and doesnt have the option just rasterize all layers except the background layer.

Now Transform the layer (CTRL+T) and pressing ALT and clicking on the nodes transform it to give it any shape yu like and which looks good.

5) This part is about saving the image, first hide the background layer clicking on the eye icon and then go to File > Save For Web And Devices, select PNG24 and makesure transparency is selected. Your Signature is ready !!

Thanks Hope you enjoyed the tutorial !!

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Create Cool Shattered Rainbow Text Effect In Photoshop

How To Create A Simple Greenary Layout For WordPress In Photoshop

How to Cut And Trim DVD,Divx,Asf etc Without Re-Encoding

Subhadeep — Sun, 19 Apr 2009 19:25:51 +0000

When it was the era of VCD cutting songs or triming certain parts of the videos were’nt really a problem with so many Free VCD cutters available, more over VCD’s used the Codec MPEG 1 which was a pretty standard so it used to work on any VCD cutter, but now is the era of high resolution DV, and truly saying there are so many codecs (including video and audio) that theres no standard for a particular file moreover there are vast list of formats like divx,asf,flv etc etc, and we all know no body wants to encode videos just to cut out some songs, it losses the quality as well as takes painfully huge time unless you have the latest rig. So what we’ll do in this tutorial is use a free software called Virtual Dub and cut the parts of videos we want without any re-encoding.

Download Virtual Dub & K-lite Codec

Before we proceed i need you to download Virtual Dub, which is completely free opensource software. It is recommended you download the stable version instead of the latest experimental ones.

Next thing we need to download is K-lite Codec, if you have already any other pack of codec’s installed then its not needed. Codec pank contains the required codecs for playing a particurar format of video.

Optional : Virtual dub does’nt support mov, flv, mp4 etc, If you need to import them please download this plugins : VideoHelp. And extract them in plugins32 folder.

Cutting and Trimming Video

1) Launch Virtual Dub by clicking Virtualdub.exe in the virtual dub folder. Click File > Open Video File and open the video file you want to cut. If any errors come while importing just click OK.

2) Now we need to set starting and ending points. Scroll through the video scroll bar and stop the the frame you want to start cutting and then go to Edit > Set Selection Start (Home), next scroll to the ending frame of the video you want and select Edit > Set Selection End (End)

Exporting The Video Without Re-Encoding

1) To export the video without any type or re encoding we need to make audio and video direct stream copy. Click Video > Direct Stream Copy and Audio > Direct Stream Copy. This will ensure none of the streams are encoded and are directly copied as it is.

2) Now you just need to click File > Save As Avi (F7) and export. It will instantly save it without any type of recompression.

Hope You enjoyed the Tutorial. Thanks!!

What Are The Best Things To Do With Your Old PC

How to Create A Favicon (3 Different Ways)

How To Create A Simple Greenary Layout For WordPress In Photoshop

Subhadeep — Tue, 14 Apr 2009 17:17:26 +0000

First thing first I’m not a graphic designer but I have a keen interest in graphics and I have done some basic courses too. So I thought why not make a simple wordpress layout in photoshop, and I guess if everybody likes it I’ll probably code it to make it a working template.

This tutorial is highly recommended for the beginners and learning the basics of photoshop, advanced users may have already understood the process by just seeing it. I’ll keep the tutorial short and give you full control over the creation. The following picture is what we’ll try to create.

Click For Large Size

Planning

First thing is planning. Before you jump into working on a layout it is highly advisable to plan out the basics such as locations of different elements in the template. As you can see in the template, I’ve positioned the sidebar on left and the content on right. The header has 3 elements the top header the middle header and the lower header containing the static pages. (figure 1)

Header

Create a New Photoshop File of 1000*990px, please note i have taken 1000 instead of 1024 which is the actual screen resolution because in actual world their will be the scroll bar on the right which will take up approximately 24 px
We’ll first work on header. Create 3 rectangles as shown in figure 2 using Rectangle Tool For your benefit I have provided a download link for the layer styles I have created and used in the template. Load the layer styles and apply Rectangle 1 style to rectangle 1, rectangle 2 style to rectangle 2 and rectangle 3 style to rectangle 3. Simple. (Figure 3)

Figure 2

Figure 3

We’ll now try to add a logo search bar and social networking icons. I have created a style and named it logo type your text in any font (I used Futura Md BT) and apply logo layer style. Now draw a rectangle on the upper right edge on rectangle 1 and apply the style named Search. For the social icons I have used the free icons from fasticon which can be found here : Icon Archive. I have resized them using transform tool and added them side by side. The search icon inside the search box is from famfamfam silk icons. Now using Myriad font I wrote a “Search Site” inside the box in light grey colour. And also the menu items on rectangle 3 are written using Myriad and spaced accordingly. The colour used is light green (eff5b9) Figure 4

Figure 4

Body

Now we’ll move on to the sidebar. Draw a rectangle using rounded rectangle tool on left and taking radius 10px. And apply the style named “body”. Similarly draw a rectangle on right and apply the same style. Figure 5

Figure 5

Now we’ll tweak the sidebar, draw 2 squares 125*125 px for adv add then in top of sidebar. Give them light grey 1px stroke (e7ecb8). Also write the texts for heading I have used (436c00) For subcatagories I have used (565656). And for highlight I have drawn a rectangle and put it below the text, colour (eff5b9). Sidebar is ready, you can further tweak it as per your needs. Figure 6

Figure 6

Now the post things is not tough but tricky, 1^st i draw a white rectangle with light green border. Then I wrote the headings with 32pt Myriad font. I drew anather box of light green for the details and wrote the details with deepgreen. Then using light grey colour I typed the summary text. Then using rounded rectangle tool I have drawn a rectangle and put it on back of the white rectangle for the readmore and comment thing, and added the text. Its hard to explain here better download the PSD and check it. Figure 7

Figure 7

Footer

Last thing is very easy, you have to draw a rounded rectangle for footer give it a dark green colour and add texts. Your template is ready !!

Download

Please download the GREENARY.RAR file for the layer styles and complete PSD needed for the template. Hope you enjoyed the basic tutorial. Thanks !!

The sparkling vps hosting is going to overlook the traditional dedicated server web hosting.

How To Design A Grey-Blue Blog Design In Photoshop – GreyFuture

How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop

How To Create Cool Shattered Rainbow Text Effect In Photoshop

How To Do A Complete Test Of Your Site

Subhadeep — Mon, 06 Apr 2009 23:10:46 +0000

Before taking part in any competition we test our abilities, our capabilities, our power. Similarly Web World is also a competition, you just cannot create a site an expect it will be able to handle itself in different circumstances. Take a simple example, you may have hand-coded it using full url’s in your computer, or by some WYSIWYG editor, maybe you tested the whole thing in Opera, do you expect it to act similarly in all other browsers? Do you know if all your links are valid and not giving 404 error. Even if your do standard W3C compatible coding you may get wrong somewhere and you may need to test its compatibility. So that’s what this post is for this will teach you different ways you can test your site fully before jumping into the real web and give all your users a similar taste. As a matter of fact my website was not tested and I implemented the theme in hurry and now I’m suffering, it works badly in IE6.

Standard Check

First thing you should do after you have finished coding you new site is validate it if your markups are XHTML, HTML, SMIL etc (depending of the one you selected) are valid and conform to that standards set by various organisation. For validation of single page you can use W3C’s own validation service. But I guess you are wanting to validate whole of your site in that case head on to Validator.ca.

Incase your feeling the options of both the above sites are not enough for you you should try a test at Uitest. It has all the standard………..

…….. Wait what happened???? Ok here’s the thing I have to stop the research right here, cause Uitest has everything I was going to tell you about, Accessibility, General, Legal, Links, Performance, SEO, Validation, Browsers, Colors, Fonts, Generators, Graphics, Network and Security, Optimizers, SEO … and loads of other, it has all types of test you need.

But I have to sum up this article, so mainly you should do 5 basic checks for you site which are absolutely necessary if you don’t want to suffer (like me)

1) Standards Validator (use Validator.ca its fast and straight forward)

2) Browser Test ( Use Browsershots )

3) Website Load Test ( Use Pingdom )

4) CSS Validator ( Use W3C )

5) Dead Links Validator ( Use W3C )

Other Validation’s which are optional but you can try them depending on the your site audience and content are :

1) Accessibility Test ( Check At Wave)

2) Feed Validator (Use W3C )

3) SEO Check ( It’s a complete subject in itself but you can start at Raven)

4) DNS Check ( Out of topic but wanted you to know, use IntoDNS )

There are many many and many other types of checks, which I personally don’t think you should do, the main thing is it depends on the site, for example if you are building a site for older people you should obviously do accessibility check, colour blind checks, etc. I’d also recommend all sites to do a Virus check at Norton Safeweb, to gain your users faith. If you know other specialised service please let me know so I can add it here. Thanks for visiting

How To Embed Custom Font’s On Webpage

5 Best Torrent Tracker Scripts To Start Your Own Torrent Site

How to Create A Favicon (3 Different Ways)