Desizn Tech » Tutorial

How to Christmas Wreath in Illustrator in Five Minutes ?

Kawsar Ali — Thu, 15 Dec 2011 14:47:12 +0000

Christmas is approaching fast and the Christmas wreath is a staple design element for all kinds of projects. Instead of spending a lot of time, I thought it would be useful to have a base, simple design that I could tweak as needed later. In this tutorial we will create a base leaf pattern, convert it to a scatter brush, and paint a wreath.

You can customize this as much as you want with various leaf shapes, colors, and textures. But if you need a quick Christmas wreath in vector format, here’s how it’s done:

Step 1: Basic Leaf Shape

Use your favorite tool, but I used the Line Segment Tool to quickly make an ugly leaf shape. Just make sure the ends of each line touch so we can join the shape in the next step.

Step 2: Joining the Lines

Using the Selection Tool, select the entire shape, right-click and select Join:

Step 3: Create Some Curves

Now, grab the Convert Tool (in the Pen Tool menu). On each of the corners where the leaf points meet, click and drag to create a curve. This is optional, but it’s an easy way to give the leaf a little more realism.

Step 4: Fill Colors

With the shape selected, choose a lighter green than your stroke color for the fill:

Step 5: Veins

Grab a basic brush shape (F5) and use your darker green to paint veins:

Step 6: Create a Scatter Brush

With the entire leaf selected, open the Brushes menu (Windows -> Brushes), click the New Brush button and select "Scatter Brush":

Step 7: Scatter Brush Settings

Use these approximate settings:

Step 8: Make the Wreath

Using the Ellipse Tool, draw a circle on your Artboard and click the new Scatter Brush you created in the Brushes menu:

Step 9: Add Density

At this point it’s up to you to create the density and size of your wreath. Create a new layer and use the Paintbrush Tool to paint more leaves around the wreath:

You can create more leaf shapes/brushes, add embellishments such as berries and ribbons, and basically tweak away from here. Hopefully, though, this quick wreath design should just take a few minutes to set up and give you plenty of tools for continued playing room.

Download Ai File

Massive Freebies Password: d08YkM1

How to Create Repeating Stripe Patterns in Photoshop

dt_guest_author — Mon, 28 Nov 2011 14:30:39 +0000

Stripe patterns are an excellent way to add a little texture to your design elements, such as with fonts in greeting cards, or to set the tone as the background for a website. There are many resources for generating stripe pattern online, it’s easy to get great looking repeating stripe patterns. But sometimes you need a very customized patterns and online tools just do not cut it. If you find yourself in this dilemma, then look no further! The following tutorial will guide you through the exact steps needed for creating your very own customized stripe pattern.

Custom Horizontal Stripe Design

Let’s look at a simple way to create a completely custom stripe design. One caveat: you need to know the height of your design since this repeating stripe design will only work for fixed heights. This should not be a problem no matter what the height, whether it’s 5px or 5000px. You will still be able to create a small file that will repeat.

Step 1 – Set up your canvas

I like to start with twice the size that I will need. So if you are working with a navigation bar that has a height of 100px, then start with a canvas that is 200x200px.

Step 2 – Set up your grid

Go to Edit -> Preferences -> Guides, Grid & Slices…

Set up your grid to be at twice the dimensions you need with 4 subdivisions:

Step 3 – Set your boundaries

Hit CTRL/CMD+’ or go to View -> Show -> Grid to display the grid on your square canvas.

Step 4 – Start the stripe

Just to be over-the-top, I will design a stripe with four colors. Using the Rectangle Tool, draw a rectangle in the far left quarter and repeat for each quarter:

Step 5 – Add embellishments

Of course, you can add as much or as little at this point, but to demonstrate how much you can do, I added a drop shadow to each layer:

Step 6 – Organize your layers

I had to re-organize may layers to make the drop shadows work.

Step 7 – Merge Layers

Select all the layers, Right-click in the Layers panel and select Merge Layers

Step 8 – Downsize

With your layer selected, grab the Move Tool. While holding the Shift key, shrink the layer down to the bottom quarter of the canvas.

Step 9 – Select the Layer

Using the Rectangular Marquee Tool, select a section of the layer. It’s not as important to get the height right as it is to make sure you get the width perfect. Using the Snap to Grid feature helps.

Step 10 – Define Brush

Go to Edit -> Define Brush and give it a name of your choice

Step 11 – Fill layer with Pattern

Now, create a new layer, go to Edit -> Fill and select your pattern you just created.

Step 12 – Create the Angle

Go to Filter -> Distort -> Shear to create the desired angle.

Step 13 – Crop it!

With your grid in view, grab the Crop Tool and crop it at the top 1/4. Hit enter when ready.

Now you can add the little extras like the glossy overlays to give it that polish. To test the design, do the following:

Save the image in a new folder on your desktop – call it”bg.jpg” for now.
In the same folder, create a new text file and call it”test.html”
Open the test.html in Notepad or other simple text editor and paste the following code:





 Test Page

Save the file
Open it in your favorite browser.
Change the code above to suit your needs like div height and image name.

Download PSD

Massive Freebies Password: d08YkM1

Creating a Jquery Slideshow with Craftyslide

Kawsar Ali — Tue, 28 Jun 2011 15:27:41 +0000

Craftyslide is a tiny image slideshow script built on jQuery. It is only 2kb and really easy to implant. Craftyslide is created by CraftedPixelz, an UK design studio. In this post we will show you can how use Craftyslide on our website.

Demo | Download Files
First thing to do, is go to Craftyslide website and download the script. It actually come with a demo page. If you want you can just use that page. We will try to explain in detail how the script works. To begin make sure you have all your script and files organized in the folder.

Next we are going to open up the index.html and link the javascript files before the tag ends (why). I would suggest to use jQuery from Google SVN, which will make your website load faster.

Next the HTML markup . The images has to be nested inside a

tag . The script looks for the .next(“li”) – list item to go to next slide .

Y0u do not need changes anything in the CSS file unless you want to changes the caption font or border color. The shadow is created by CSS3 which also can be edited. Now we call the function to initiate the slideshow.

Crafytslide comes with a simple fade transition and few options. Width and height are self explanatory. Pagiantion controls if you want to show the number images/slides on the bottom, Fadetime controls the speed of fade and dealy controls the duration between each slide. You can visit Craftyslide page for more info. Here is how the slideshow looks like.

That’s all. The simplicity of Craftyslide makes it very useful. Since it does not have a lot of transitions and options, the script is small and faster. Try it out let us know if you have another slideshow script your prefer.

Tutorial images are from SXC.hu

Massive Freebies Password: d08YkM1

Advanced and Comprehensive HTML5 Resources

Kawsar Ali — Fri, 25 Mar 2011 14:35:46 +0000

HTML5 is one of the most talked about topics right now among the design community. HTML5 supports many new features such as : cleaner markup, new semantic elements such as

, new form objects, canvas element for drawing and much more. These features will make websites more interactive for the user and easier for the web designer to create. Rather than doing a round up post of HTML5 tutorial, we have gathered some very useful articles and resources about the HTML5 features and how it will benefit us.

W3Schools HTML5

Although this not really advanced but since HTML5 is new W3schools should be your first stop for learning about HTML5. W3Schools includes tutorials and example of the basic tags syntax you need to know.

HTML5 Features: What You Need to Know

Remy Sharp discusses about what HTML5 features we’ll all be using very soon.

HTML5 Quick Feature: Summary and Details

This article informs us what changes HTML5 will brings to the web and show examples of how it can be used.

The HTML5 CSS Starter Page Series

This a series of 4 article that thoroughly explains about HTML5 and show how to create a HTML5 index page, a form page, a video page that uses the video element and many more HTML5 features. Each of the article in the series are full with examples and details.

HTML 5 Canvas Element Tutorial

Couple of original tutorials that show how to do graphics, games and animation on your website using the HTML5 Canvas Element.

HTML5 Template for Beginners

This article includes a HTML5 template and some useful information on how to create your own template.

Using HTML5 canvas, Drag and Drop and File API to offer The Cure

This is a advanced tutorial how to create a drag and drop area using element and then start drawing on it.

The Current State of HTML5 Forms

Wufoo, the online form creation website illustrates which browser supports new HTML5 input types and input attributes.

Using HTML5 Local Storage

HTML5 local storage allows users data to saved on their machine inside their browser. It is like client-side database that makes the interaction between the website and browser easier. This tutorial shows how to use local storage.

HTMl5 Drag and Drop

This is yet another tutorial about creating HTML5 drag and drop zone.

Awesome HTML5 Dashboard

Awesome HTML5 dashboard is from Mozilla, which has extensive amount examples and information about cool new features of HTML5.

Information and samples for HTML5

This website is a guide to almost everything you need to understand about HTML5. The great thing about this site it includes example data and code.

HTML5 / IE9 Tutorials and Sample Code

Well better late than never. Dr. Doris Chen who is a developer evangelist at Microsoft, shows couple example of new HTML5 features working in IE9.

HTML5 and CSS3 Without Guilt

Since HTML5 is not widely supported, should we use it or not? This article discusses how to face this dilemma.

Websites to follow to keep yourself updated with HTML5 news :

Massive Freebies Password: d08YkM1

Creating Border and Drop Shadow using Pixelmator

Kawsar Ali — Sun, 13 Mar 2011 17:17:29 +0000

Pixelmator is a great alternative of Photoshop for image editing. However, some of the little enhancements such as drop shadow, or adding border to an image is not built in features like Photoshop. In this post, we will show you some easy techniques you can easily to add border and drop shadow to any image.

Pixelmator is truly great app but missing basic features like drop shadow, inner shadow, stroke is just makes it not a true competitor of Photoshop. Maybe in future updates we will see this ( Hint to the Pixelmator team).
Let’s get started with the tutorial.

Resource Needed:

Creating Border Of An Image or Anything Else

Step 1 : Open a 500×500 document and place the texture and the image. Size them however you want.

Step 2 : Now select the just the image. You can do that by holding Command(⌘) key and clicking on the image. Keep the selection as is and create a new layer under the image layer. It should look like the following image.

Step 3 : Make sure the border layer is now selected. Go to Edit > Refine Selection. You should see the following dialog pop up. What this step is doing is enlarging the selection. Drag the size options to 7px or whatever the size of the border you want. Do not do anything Smooth and Feather. They are used if you want rounded and blurry border.

You should see that the selection is extended by 7px .

Step 4 : Next step is adding border. Choose the Paint Bucket Tool or hit N on your keyboard. Choose the color you like using the Color Tool. I am using this #f3ece7.

Step 5 : Again make sure the the border layer is selected. Now apply the color.

Step 6 : There you go, the border is applied. The next thing to is too link the border and image layer. Linking the image will allow you to move the image with the applied border.

After you have achieved your border you can gett creative with it. How about a Polaroid?

Adding Drop Shadow To An Image or Anything Else.

Okay, so now we have got the border. However, we want to add some realistic feelings by adding drop shadow. You can apply this technique to anything you are designing on Pixelmator. We will be using the same resources.

Step 7 : Follow all the steps up to 6 . Make the selection is still on. Create a new layer under the border layer and select that layer for drop shadow. It should look like the following image.

Step 8 : For this step make sure you select the border layer, because the shadow has to be bigger than the border to show up. Again we are going to Refine the selection and extend by 5px. Go to Edit > Refine Selection. We will refine the selection by 5px. It should look like the following image.

Step 9 : Now go back to selecting the drop shadow layer and fill with solid color. I am using #454443 (dark grey) instead of black for the drop shadow. It will look like this :

Step 10 : The fun part, making the solid color appear like shadow. How ? If you guessed Gaussian Blur, you guess right. Go to Filter > Blur > Gaussian Blur. Keep the blue between 20-35.

Link the border, image and shadow layer. Let’s see how it looks.

Rounded Corner. Hint : Use the smooth options in the Refine window.

You can download the file below, which includes all the effects you see in this tutorial and more.

Pixelmator Border & Shadow

Massive Freebies Password: d08YkM1

WordPress Hacks for Members Only Website

Kawsar Ali — Mon, 21 Feb 2011 18:00:44 +0000

By default wordrepss is blogging tool. Nevertheless, you can truly customize to make it however you want. Many of people use wordpress to create members only website. You can only always use a plugin, but if you only needed a little modification, why install a plugin when you can do it with few lines of code. Here are some simple yet effective hacks for creating a member only site.

Content for Members only Without Plugin

If there are certain content on your site you wanted to show only to the registered member, you can do so by use the following code in your theme. Whatever goes between is_user_logged_in will be seen by only members.


				// Content for Logged in user
	
		// Content for everyone else

Show WordPress Login Form Anywhere and Customize It

If you want include wordpress login form anywhere in your theme, which is mentioned in this post you can do so by using following function:

However, it does not give you option to customize the login form, because it just directly pulls default wordpress login form. What if you want show something like this?

Here is code to do that. Paste the following code wherever you want the form to show up.

// WordPress Login Form

Member Login

 
     
       
         
         
           
        
          
          
        
       
      
      	
      	
      
      
		
         	
         
          
          
            
           
                
 



Logout

Welcome Back  user_login . " ");?>

Logout

Admin?

You can add a CSS div tag to style it. The advantage of using this login form you can almost create a mini dashboard for members by using get_currentuserinfo() function and show any information about the user.

Custom WordPress Menu for Members

Like content you can create custom wordpress (3.0 only) menu for members. Let’s register the menu first. Go to your theme function file (functions.php) . Use the following code to register the menus.

	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'twentyten' ),
		'visitor' => __( 'Visitor Navigation', 'twentyten' ),
		'footer' => __( 'Footer Navigation', 'twentyten' ),

	) );

Now, put following code where you want your menu to show up, most probably inside the header.php file.

 'menu-header', 'theme_location' => 'primary' ) );
	} else {
	    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'visitor' ) );
};?>

Now you need to actually create the menu on wordpress backhand . The “Menus” setting should be under Appearance tab. Create a menu with the name main and visitor. On both menu add whatever you want to show. For example: if you want a page to show up only when user looged, add it in the main menu . Look at the following image.

Here is live example of how this works.

You can also create a dynamic footer menu using the same method.

Function Reference/wp nav menu

That is it for now. We will be back with more wordpress hacks. Do not forget subscribe.

Massive Freebies Password: d08YkM1

Recreating YouTube Search Form and Other Buttons Using CSS3

Kawsar Ali — Thu, 05 Aug 2010 18:06:50 +0000

CSS3 could not get here any faster. Lately, there has been a lot of post about CSS3. It’s wonderful features are too good not to use. Only folks at Microsoft do not seem to have the grasp of that concept. They could have supported CSS3 for Internet Explorer 8. However, that is another discussion. In this post, we are using some CSS3 properties to create buttons and forms and show you how to enhance user experience.

Live Demo |CSS3 Buttons Download

Here is the HTML structure first.

We added a little javascript onfoucs and onblur to give user hint . The rest simple HTML. Now the CSS.

.searchfield{
border:1px solid #000;
 width:200px;
height:2.5em;
padding-bottom:3px;
}
input:focus.searchfield {border-color:#c8d9f2;}
 .searchbutton{
position:relative;
top:-1px;
font-size:14px;
height:2.5em;
vertical-align:top;
white-space:nowrap;
cursor:pointer;
overflow:visible;
border:1px solid #ccc;
background:#f6f6f6;
background-image:-moz-linear-gradient(top,#ffffff,#efefef); // CSS3  background property
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
// Internet Explorer Gradient Filter http://bit.ly/bVJJP1
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; // CSS3 rounded conrners
}

A little explanation about the CSS. For the background we are using CSS3 gradient property for both Gecko (Firefox) and Webkit (Safari, Chrome) browser. You have define your gradient a little differently for each browser.

So, what about Internet Explorer? By default it does not support rounded corner. However you can use gradient filter for IE. The gradient color rendering in IE7 or IE8 is very ugly. -ms-filter is for Microsoft vendor extension. Read more about here. The result should look like this

Create a Beautiful Vibrant Watercolor Web Layout

Kawsar Ali — Tue, 20 Apr 2010 00:16:32 +0000

Use of watercolor in website can really lighten up your design. In this tutorial we will show you how to combine textures in your layout to create a beautiful watercolor layout. You will see how integrating the element of painting in your webpage can make your layout very artistic and creative.

Let’s see the result first.

Preview

Click on the image for bigger version

1. Notebook and Paper Textures (From this post)

2. Watercolor texture

3. 8 Watercolor Texture Pack ( Used Texture #54)

4. Social Icons

Step 1:Using the Texture for Background

Open up a new document by 1200×800. Fill up the background with #eeb679 and Place the texture from the left side. Like following image.

Step 2: Fill up the Edge and Overlay Texture

Like most of my PSD layout tutorials, I fill up the edge of the texture with fill color so the layout won’t look awkward in a big screen. It will blend in.

Now we use the watercolor texture as overlay. You change the properties to overlay from the Layer Properties window. Put the watercolor texture over the paper texture.

Step 3: Creating the Navigation.

Type out the navigation. Use the the ruler if you have to. I am using the Designer notes font. Now we need to draw the menu background. Using the default photoshop brush like the following one brush shown in the picture. Choose #beaa95 for the brush color. Draw and stroke the brush so it covers each menu items background.

We are going to add Gradeint Overlay and Pattern Overlay properties to brighten up the menu background. Here are the settings :

Gradient Overlay Colors #13a4dd and #82d4e9

We are using one of the default patterns that comes with photoshop. Here is the setting or Pattern Overlay:

Here is the end result. You can play around with brush tool and draw as you want. Get Creative!

Step 4: Creating the Content Area.

I am using the notebook paper texture for the content, which is modified version of this one. Just use Photoshop’s Magic Eraser Tool to get rid of the white background. I won’t go into details for that. It is fairly simple. Now, place the notebook paper right below the menu. We need to change the color settings a little. Here are the settings:

Using the Rectangular Margeue Tool select the content area as much as you need and then go to Select > Inverse . It will the select the rest of the area beside the content area. Then you can hit delete or go to Edit > Clear . Now move the paper a little below and resize the paper as you want like the following image.

We are not done yet! The next thing we need to do is add the watercolor texture to the paper. From the Watercolor texture pack that we mentioned in the beginning of the post we are going to use the texture#45. Put it right on the top of the paper and set to overlay mode. Now make it clipping mask. You can do that by right clicking on the texture or by going on the Layer >Create Clipping Mask. Here is how it should look like.

Remember since it is a clipping mask you can pretty much move it around as you want to adjust the page.

Next is the featured works section.

I am using Georgia 14pt, italic for the font. For the featured image use any image you like. I just applied Stroke from Layer Style Properties

Step 6: Adding the Footer

For the footer title I am using Designer Notes font, 30pt. Type out text and using the Rectangular Marquee Tool draw a rectangle behind the text on a new layer. Fill it with Black and turn down the opacity to 11%. Here is how it should look like:

Do the same for rest of the footer titles.

Place the icons and type out the text. The icons are watercolored already. They will match with rest of the design.

For the flickr section use small image and apply Stroke again from the Layer Style.

The rest of title and text are easy. Just type out the text and place the icons for bullets. Use whatever icons you like best. For the copyright text I used Century Gothic , italic.

As you can see using the right texture and right setting you can turn any design into colorful, bright and pleasing to look at. Let’s see the whole layout again.

You can download the PSD file, it is organized in the folders. Feel free to use this layout for personal and commercial use.
Download Watercolor PSD

Massive Freebies Password: d08YkM1

Why You Should Create PHP Powered Websites and How?

Kawsar Ali — Fri, 02 Apr 2010 22:30:03 +0000

PHP :Hypertext Preprocessor is very useful, dynamic scripting language. You can create a simple website to powerful web application with PHP. If you are just beginning to get into web design and development you should consider learning it.

Let’s start with little introduction. PHP (originally stood for personal home page) is a server side scripting language, which means it resides on the server. You do not have to install PHP on your computer to view PHP scripts. Therefore, it is faster and better to work it. Whereas, if the javascript is disabled on the client computer, they will not be able to view the whatever script it is running on the web page. However, let’s not just assume one is better than the other, but both of them has their uses. You can embed PHP directly into the HTML page or create separate pages page with PHP extension. You do not even have to be a ninja coder to use the basic PHP functions. If you understand the basic, you can pretty much take it from there.

Why Create Webpage Using PHP?

The best thing I like about PHP is the ability to change webpage content dynamically. For example: let’s say your client wanted ten pages and you coded in the pages in HTML for using the usual header, content , footer layout. So, after you finsished coding all the page, you client says they want to change the logo or header content. You would have to go to individual page and change it. If you used PHP to create the page you would just change the header.php file and of course you would have to included the header in the all the pages. If you see the example below it will be more clear. You will need to install MAMP or WAMP to test PHP pages locally. If you do not how here is a guide for Mac and Windows.
You can take look at the demo of the two PHP pages created using the following method

View Demo | Download Files

We will start by creating an HTML page then just change it into PHP. So, here is the HTML layout







 
 PHP 

 




 This Header 
 

This is First Page


 This footer

Here is how the PHP files will be formatted

First, we will create header.php. Copy from to

to a new page and save it as a new page as header.php

Everything between content div will be inside index.php. We can later uses this PHP file to for more pages by duplicating it.

Next, is the footer. This is end of the page.

We need to to add all this three file into one. To combine this three file we will be using PHP include functions . This function includes one PHP file into another. Here is how we will both header and footer inside the index file:
On the beginning for index.php

At the end of the index.php file we add

That is it. We have created our web page with PHP. Now, let’s say you want to create another page, you can just copy paste the index.php file and change the just the content. If you wanted to change something in the header, content or footer , you will just make change in the individual files you will not need make changes to each file. This was just most basic use of PHP , if you are planning to extend you knowledge on PHP we will add some links at the end of the post, where you can learn more PHP.

PHP and CMS ( Content Management System)

Most of the famous and well known CMS such as WordPress, Drupal , Joomla are written in PHP. If you wanted to create your own theme for one for these CMS or edit a theme for customization knowing PHP is a must . If you know enough PHP you can familiarize yourself the codex of these CMS and take it form there.

PHP Tutorials and Resources

Now that we have showed you why you should learn and use PHP, here are some tutorials and resources to help you extend your PHP knowledge.

PHP basic Tutorials - Arrays, Loops, Switch statements and more.
PHP 101: PHP For the Absolute Beginner
Essential PHP Techniques for Web Designer and Developers : Some Advacned PHP tutorials.
PHP Tutorials : For the programmer/developer: Some Simple and Useful PHP tutorials.
Advance Level PHP Tutorials & Scripts
35 Really Useful PHP Tutorials And Development Techniques
Writing Your First PHP Script: Feedback Form Script
Really Useful PHP Tutorials: From Beginner to Advanced
PHP Tutorial for WordPress Users

Image Credit

Massive Freebies Password: d08YkM1

Desizn Tech » Tutorial

How to Christmas Wreath in Illustrator in Five Minutes ?

Step 1: Basic Leaf Shape

Step 2: Joining the Lines

Step 3: Create Some Curves

Step 4: Fill Colors

Step 5: Veins

Step 6: Create a Scatter Brush

Step 7: Scatter Brush Settings

Step 8: Make the Wreath

Step 9: Add Density

How to Create Repeating Stripe Patterns in Photoshop

Custom Horizontal Stripe Design

Step 1 – Set up your canvas

Step 2 – Set up your grid

Step 3 – Set your boundaries

Step 4 – Start the stripe

Step 5 – Add embellishments

Step 6 – Organize your layers

Step 7 – Merge Layers

Step 8 – Downsize

Step 9 – Select the Layer

Step 10 – Define Brush

Step 11 – Fill layer with Pattern

Step 12 – Create the Angle

Step 13 – Crop it!

Creating a Jquery Slideshow with Craftyslide

Popular Social Media Share Link Snippets

WordPress

HTML (For any website)

Advanced and Comprehensive HTML5 Resources

Creating Border and Drop Shadow using Pixelmator

Creating Border Of An Image or Anything Else

Adding Drop Shadow To An Image or Anything Else.

WordPress Hacks for Members Only Website

Content for Members only Without Plugin

Show WordPress Login Form Anywhere and Customize It

Member Login

Logout

Custom WordPress Menu for Members

Recreating YouTube Search Form and Other Buttons Using CSS3

Create a Beautiful Vibrant Watercolor Web Layout

Preview

Step 1:Using the Texture for Background

Step 2: Fill up the Edge and Overlay Texture

Step 3: Creating the Navigation.

Step 4: Creating the Content Area.

Step 6: Adding the Footer

Why You Should Create PHP Powered Websites and How?

Why Create Webpage Using PHP?

This Header

This is First Page

This footer

This Header

PHP and CMS ( Content Management System)

PHP Tutorials and Resources