• A computer
• WAMP
• A Sample Database

What is the command line client?

The command line client is a program that allows you to work with your operating system via the use of scripts. You can use it to do practically anything in the operating environment including creating files and folders, executing programs and running MySQL scripts .

Why use it?

The client liberates you from your dependence on a graphical user interface (such as PHPMyAdmin) and gives you much more flexibility to work. Also, in a production environment you might not always have access to PHPMyAdmin so it’s very useful when you need to work with the SQL

Setup the Server

I use windows as my primary production environment, therefore I’m not going to show you how to setup a server on Mac or Linux. Fortunately, the concept applies to all three operating systems with small variations in the syntax and procedure. Please do a search in google for more information about those platforms.

Download and Install WAMP

There are two great prepackaged builds for implementing your own development server, WAMP and XXAMP. I’ve tried them both over the years and prefer WAMP. Feel free to use what you like though.

1. Download the WAMP Server Here

2. Double click the downloaded file and install the server. It should be pretty straightforward.

Configure the environment variables

Now with your server installed we’re going to configure the environment variables so it’s easy to access your MySQL server in the client.

If we didn’t do this we would have to go through these two steps before we can start using the server.

• We would first have to use the cd command to change to the server location of my mysql install.
• Then we could finally start using the mysql to start using the server.

Here’s what it would look like in the client.

I don’t know about you but I’m not going to be able to remember that path every time I log in.

So let’s make it a little easier. . .

1. In Windows go to Control Panel > System and Security > System > Advanced System Settings

2. On the Advanced tab, click the Environment Variables button.

3. Select Path from the list of System Variables

4. Click Edit… you will see the following pop up.

5. At the end of the string in Variable Value add the path to the mysql bin where you installed your MySQL server.

For example, I would add:

C:\Server\bin\mysql\mysql5.1.36\bin

note: Be sure and separate each entry with a semicolon (;). And don’t add a space between them!

If done correctly that variable should look similar to this:

%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;C:\Server\bin\mysql\mysql5.1.36\bin

6. Press Ok until you exit out of all the windows.

Your environment variables are set up!

Create a shortcut on your desktop

Next we’re going to create a convenient way to start the client and begin using MySQL right away!

1. Create a shortcut to the client by searching for cms in the Start Menu, and right clicking it.

2. With the shortcut created on your desktop, right click it and choose Properties

3. From the Shortcut tab change the Start in: string to the directory where you serve your web files.

The Start In variable makes it much easier to work with files on your web server. All files that you access are in relation to that directory.

4. Next go to the layout tab and apply the following settings. It makes it easier to work with the client from this size.

5. Press OK

The client is configured and ready to go!

Now lets do some SQL . .

Demos

• Home Page
• About Page
• CSS Styles Page

What you will need

• Adobe Photoshop
• Adobe Dreamweaver or another similar software package

Source Files

• Download the PSD Files
• Download the HTML, CSS and image files

What we will make

I will show you how to make a generic business template from the Photoshop file that is included with this tutorial.

We aren’t making a website

There is no one “right way” to make a website. You can build it using basic html, CGI scripts or server scripting languages such as PHP or ASP. In turn, each of these technologies can implemented in an almost infinite number of ways.
Therefore, I decided to just teach you how to make a web template and leave it up to you to develop a working website. The good news though, is that as soon as you’re done this tutorial, you’ll be able to build your website anyway you want!

Screen Shots

Let me know if anything is confusing

Converting a Photoshop design to HTML is usually a very organic process, ie. I don’t follow a particular order of steps. For the sake of this tutorial however, I’m going to keep everything very organized so that it’s easier to follow along. If you’re ever confused, please let me know in the comments and I’ll do what I can to make it more clear.

We will not be using the design view

This might disappoint a few people but I’m never going to use the design view. I’m only going to use the code view in Dreamweaver. Don’t worry though, it’s not as hard as you might think.

Ok now let’s get started!

What you will need

• A server with php installed.
• A pure text editor. I like Notepad++.

The Source

Download the PHP Template Source Code

Part One: What is a template system?.

So exactly what is a template? Well according to the American Heritage dictionary, a template is . . .
“A document or file having a preset format, used as a starting point for a particular application so that the format does not have to be recreated each time it is used.”

You know what? They’re just about right!

So basically, a template system separates your HTML from your PHP. Let me say that again. A TEMPLATE SYSTEM SEPARATES YOUR HTML FROM YOUR PHP!

Imagine the implications of this. You no longer have to use includes to add content to your website. You can
create different skins and let the visitor choose what they want. You can generate lists and never
have to write HTML like this . . .

$html = "
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>";

The possibilities are endless!

There is no better way to learn about template systems then to create your own so let’s get started!

Part Two: Building your own template system.

If you’ve read my other php tutorials, you probably have seen the code can be rather complex. Well I’ve got
good news for you. . . this code is EXTREMELY easy.

Here is the concept behind how it works.

• Open a file and save the contents into a string.
• Replace a string pattern (such as {VAR}) with a value.
• Output it.

There are only 81 lines of code for this script (and half of that is comments so get ready ).

Create a new file and name it template.php

Copy and paste the following code into template.php please refer to the comments for explanation.

Note: If you have never used Object Oriented Programming before I encourage you to read up on it
and then come back. You can find a good tutorial here

class template
{
/*********************************************************************
VARIABLES
Setting our variables
*********************************************************************/
var $template; 			//The template name
var $template_string;    	//The template string will be stored here
var $prefix    = "{"; 		//The variable prefix character.
var $suffix    = "}"; 		//The variable suffix character.
var $var_array = array(); 	//The values of your variables will be stored here

/*********************************************************************
SET TEMPLATE
This function sets the file that we are going to be grabbing our
html from
*********************************************************************/
function set_template($filename)
{
$this->template = $filename;
}
/*********************************************************************
SET VARS
This function sets a value for a variable
*********************************************************************/
function set_var($name, $value)
{
//storing our variable and its value into an array
$this->var_array[$name] = $value;
}
/*********************************************************************
LOAD FILE
This function loads the contents of the template
file into a string.
*********************************************************************/
function load_file()
{
//saving its contents into a string
$this->template_string = file_get_contents($this->template);
}
/*********************************************************************
REPLACE VARS
This function replaces the variables with
it's corresponding values
*********************************************************************/
function replace_vars()
{
//The foreach loop is very useful when we want to loop through
//associative arrays.
foreach($this->var_array as $assoc => $value)
{
//appending the variable prefixes to match. ex: {VAR_NAME}
$var_name = $this->prefix.$assoc.$this->suffix;

//replacing every instance of the variable with it's corresponding value.
//so {VAR_NAME} becomes "this is my variable"
$this->template_string = str_replace($var_name, $value, $this->template_string);
}
}
/*********************************************************************
PARSE
This function calls the actions and outputs the
final result.
*********************************************************************/
function parse()
{
//loading the file
$this->load_file();

//setting the variables
$this->replace_vars();

//outputting the newly parsed template 
return $this->template_string;
}
}//end of class

And that’s our whole template class!

Part Three: Using your new template class.

Ok. . . your new template class is done and ready to go. . . but how do you use it? By itself the class doesn’t seem all that remarkable. But trust me, it is.

To demonstrate we’re going to create a basic personal profile page.

Create a new file and name it interface.htm copy and paste the following code into interface.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>{PAGE_TITLE}</title>
</head>
<body>
<div style = "margin:auto; width:800px; height:600px; border:solid 1px #808080">
<div style = "height:70px; background:#c6c6c6; padding:5px">
{PAGE_TITLE}
</div>
<div style = "padding:5px">{CONTENT}</div>

</body>
</html>

Do you notice {PAGE_TITLE} and {CONTENT}? Guess what. . . .those are variables! That’s right! With a template systemyou can embed variables right into HTML! Are you starting see what I’m getting at?

Open up interface.htm in a browser, it should look something like this.

Create a new php file and name it index.php, save it in the same directory astemplate.php.

Take a look at the code below.

//This loads template.php into memory
//(you can also use include, they both do the same thing)
require_once("template.php");

/*******************************************
INTERFACE
*******************************************/
//creating a new instance of our template class
$interface = new template;

//setting the template file that I want to grab html from
$interface->set_template("interface.htm");

//outputting the interface
print $interface->parse(); 

Open up index.php in your browser. See any difference? You shouldn’t. Take a look at the source code, it’s
exactly the same as template.htm You’re grabbing the content inside template.htm, saving it as a string
and then printing it.

Ok let’s make one more template.

Make a new file and name it profile.htm Copy and paste the following code into your new file.

<div style = "margin-bottom:10px">
This is the profile for {NAME}
</div>

<table width = "100%">
<tr>
<td>
<img src = "{PROFILE_PIC}" />
</td>
<td>
Name:{NAME}
<br />Birthday: {BIRTHDAY}
<br />Phone: {PHONE}
<br />E-Email:{EMAIL}
<br />Bio: {BIO}
</td>
</table>

Notice the omission of the html, head and body tags.

Open up profile.htm in your browser, it should look something like this.

Grab any image you like and name it pic.jpg save it in the same directory.

Your directory should look like this.

Note: Given the nature of operating systems your icons may not resemble mine.

All right, let’s put these two templates together.

Open up index.php again and right above where you created a new instance of your interface class write this code.

/*******************************************
PROFILE
*******************************************/
$profile = new template;
$profile->set_template("profile.htm");

//setting the variable values
$profile->set_var('PROFILE_PIC', "pic.jpg");
$profile->set_var('NAME',        "Josh");
$profile->set_var('BIRTHDAY',    "08/03/1985");
$profile->set_var('EMAIL',       "joshua.bolduc@gmail.com");
$profile->set_var('PHONE',       "555-555-3452");
$profile->set_var('BIO', 	 "This is some kind of dynamically generated bio");

//compiling the information and saving the string into a variable
$content    = $profile->parse();

//setting the page title
$page_title = "Personal Profile";

index.php should look like this.

//This loads template.php into memory (you can also use include, they both do the same thing)
require_once("template.php");

/*******************************************
PROFILE
*******************************************/
$profile = new template;
$profile->set_template("profile.htm");

//setting the variable values
$profile->set_var('PROFILE_PIC', "pic.jpg");
$profile->set_var('NAME',        "Josh");
$profile->set_var('BIRTHDAY',    "08/03/1985");
$profile->set_var('EMAIL',       "joshua.bolduc@gmail.com");
$profile->set_var('PHONE',       "555-555-3452");
$profile->set_var('BIO', 	 "This is some kind of dynamically generated bio");

//compiling the information and saving the string into a variable
//see where this variable goes in the $interface template?
$content    = $profile->parse();

//setting the page title
//see where this variable goes in the $interface template?
$page_title = "Personal Profile";

/*******************************************
INTERFACE
*******************************************/
//creating a new instance of our template class
$interface = new template;

//setting the template file that I want to grab html from
$interface->set_template("interface.htm");

//setting the variables for the interface
$interface->set_var('CONTENT',    $content);
$interface->set_var('PAGE_TITLE', $page_title);

//outputting the interface
print $interface->parse();

Do you notice above I’m not actually doing a lot of “coding?”. I’m just setting values and then outputting. Nothing

could be easier!

Open up index.php in your browser, it should look like something like this.

So do you see the advantages of this technique? By keeping the interface separate from the content (such as the profile) we can make one change to the interface and it will change for everything! no need to touch any other files. That’s what makes skinning possible!

Conclusion

Templates open up a whole new world of possibilities in php. Learn it well!

I hope this was helpful, if you have any questions or suggestions feel free post in my comments.

Introduction

In this tutorial I’m going to show you how to create customizable avatar icons with php. This is a great feature that isn’t seen that
often around the internet and I think should be used more. So let’s get started.

What you will need

• Adobe Photoshop.
• A pure text editor. I like Notepad++.

The Source Files

Download the PHP and Photoshop Files

Part One: Creating the images.

Before we begin coding let’s open up Photoshop and play around with our image for a bit. There are few things you need
to remember when you’re creating images for this project.

• Every image MUST have the same dimensions.
• The background MUST be transparent.
• Each image MUST be saved in 24 bit .png format.

Open up your image in photoshop, (for the sake of this tutorial I’m going to assume you used the picture
of Brian from Family Guy. It’s called original.jpg and it’s included in the zip file.).

This step is all about creativity. As I was looking at this image I was thinking to myself. “Ok what
can I do to change this picture up a little bit? I can give him some pants, some shoes, a hat, I can change
his martini. . . ” There were many things I could do with it.

I will quickly show you my workflow for creating accessories.

I grabbed the original image and used the magic wand tool to select and delete the background. I also removed Seth McFarlane’s (a genius by the way) signature.

I created a new layer above the base layer and named it hat.

Using my Wacom Tablet, I drew a baseball cap on his head. I could hide and show it using the layers palette. (Make sure that you draw your accessories on separate layers, this is what makes customization possible.)

Once I was happy with the hat I hid it and saved the image of brian as Base.png.

It’s crucial that you save the image as 24 bit png image. If you don’t the image won’t look right. Make sure that transparency is selected as well..

Then I saved the hat image as hat.png keeping the same settings as before.

That’s the basic process that I went through. Pretty straight forward. I repeated this process for additional accessories. If you like, add some of your own unique ideas, perhaps a scarf or a tie. You may also use the images that I’ve included.

Now let’s start playing with some code. . .

What we will make

In this tutorial I’m going to show you how to take the design created for my
Fundamentals of Interface Design tutorial and turn that into a usable web interface.

What you will need

• Adobe Photoshop.
• The PSD File which can be downloaded below
• A pure text editor. I like Notepad++.

The Source

Download the PSD and HTML files

A Note about WYSIWYG Editors

I don’t use WYSIWG editors like Adobe Dreamweaver. Therefore don’t be surprised if you find yourself doing a bit of coding. Don’t worry though, it won’t hurt too much

Part One: Visualizing the CSS and HTML.

Before I begin anything I take an objective look at my interface. What can I create using CSS/HTML? What do I need to slice? This saves me time and often gets me the cleanest results.

What sections do you see?

This is what I’m thinking to myself as I do this.

The following can be achieved with CSS

• The interface size and placement.
• The text and link colors, size, etc.
• The panel placement, size, border and background color.
• The borders on the icons.
• The Horizontel line between sections in the body.

The following will need to be sliced up.

• The header icons (including the active page icon).
• The header graphics, including logo and “Part Digital Designs” text.
• the header background color.
• The Background gradient.
• The gradient color of the panel headers.
• The footer.
• One of the navigation triangles.

Part Two: Slicing the interface.

I work simultaneously between slicing and CSS/HTML. This is fastest method I’ve found when working on a personal project. However if you are working in a group it’s best to keep each step separate.

Note: For the sake of this tutorial I’m going to stick with Photoshop. However, if you have it, I highly recommend Adobe Image Ready or Adobe Fireworks for slicing up your images.

Ok let’s get started.

Open the file that I’ve included for this tutorial.

Your First Slice

Press K to select the slice tool and draw a box around the logo and title as shown.

Right click this slice and click Edit Slice Options. Name it header_title and click OK.

Remember these two steps as we slice up the interface because from now on I’m not going to be as detailed
in my explanations.

Create another slice near the one you just made that is 1 pixel wide and name it header_bg. It should look like the image below.

Create a slice around the home icon (including the selcted graphic) and name it icon_home. Make sure it has a width of 60 pixels and a height of 54 pixels.

Repeat the process for the remaining icons.

Create a slice at the home panel header that is 1 pixel wide and 19 pixels high. Name it panel_bg

Create a slice around one of the triangles and name it triangle-idle. Give it a width and height of 13 pixels.
Quick Tip: Hold down Shift as you draw the slice and it will make a perfect square.

Create a slice around the entire footer and name it footer

Go to File > Save for web or devices.

Click for a larger view

Make sure that the image type is set to GIF

Click Save and make sure your settings match these.

Click Save

OK, we haven’t sliced up everything yet, but we have enough to get started. So minimize Photoshop for now and open up your favorite pure text editor.

Now let’s start to build the interface in HTMl. . .

In this tutorial I’m going to show you how to design a portfolio website and also introduce you to some of the
major issues that every web designer has to consider.

note: I’m not going to cover every detail bit by bit. It’s assumed that you have at least a basic understanding
of photoshop.

What you will need

• A paper and pencil.
• Adobe Photoshop.

Part One: Conceptualization.

What kind of website is it?

Ok so you want to make a website. . .but what is it going to be about? If you don’t know then making a website is impossible. Take out a piece of paper and a pencil and jot down a few ideas. Also think about what additional sections might be needed. For instance if you do a portfolio website, you’ll also need a contact page, and maybe even a news section.

Will your website grow?

Will this be a big website? If so, you need to consider the implications of growth. You’ll need to design it so that many people can access a wealth of information quickly and easily. You’ll also want to make it easy to add sections (while not affecting the content).

Branding

What about theme and branding? What impression do you want people to get from this? Do you want your website to be immediatly recognizable just from the look alone? Branding is a widely used stragegy in business, for instance the Apple computer company is recognizable in all their products by their elegant use of glossy white and smooth edges.

Also notice that they both share a similar name “iMac and iPod.” So not only are they branded through appearence but by name as well. Through this ingenius strategy they’re one of the most recognizable companies on the planet.

Who will be my audience?

What kind of people are going to be using your website? If you make a tutorial website like
pixel2life.com then it’s a fair chance that the majority of users will have larger monitors with modern browsers. In this case you could design your website to be larger and have some more advanced features (such as AJAX).

Take all these into consideration as you write down ideas for your website, it will make design and development much easier.

Part Two: What will your layout be?

In the web development world there a select few layout designs that have been considered the standard

One Column Layout

Advantages:

This is good at putting a lot of emphasis on one particular article or image. As a result this is best suited for galleries of images.

Disadvantages

This isn’t necessarily the best layout for a lot of information. If you have just a few pages in your website
then it’s fine but if it starts to grow and you get more sections then the limitations quickly become apparent.

Two Column Layout

Advantages:

This layout is frequently seen throughout the internet, and rightly so, it’s an elegant solution for small to medium sized websites. With the navigation on the top and side it offers more opportunity for growth.

Disadvantages

There are still a few limitations however. Especially when you get into subsections. This layout only allows a maximum of 2 levels of depth. You also sacrifice real estate for your navigation.

Three Column Layout

Advantages:

This is the most frequently seen layout in the web. With three different places for navigation, growth is almost
seamless. You can easily have up to three levels of navigation (which is the most you want anyway) and your eye easily drifts from one section to another.

Disadvantages

The biggest disadvantage of this however is things can get very cramped, very fast (depending on the size of your website).

Other Layouts

Obviously these aren’t the only layouts, try playing with four column layouts or something wild and crazy in flash.

Fluid or Fixed?

What kind of layout will this be? Fluid or Fixed? A fluid layout can adjust its size for any screen but has certain graphic limitations. A fixed layout is stuck at a certain resolution and my not be viewable on certain screens, but is much easier to design for. Think of your audience when you’re deciding this.

Part Three: Visualizing the Layout

Before I begin any work on a computer I sketch out some ideas on paper. This step is extremely important as it’s all about creativity. By sketching things out you don’t have to worry about any technical challenges beyond using a pencil. (If a pencil is a challege for you, you may want to try another tutorial first :p).

Sketch #1

This is my first sketch for the interface. I know I wanted a three column layout so I immediatly started with that. I liked the number of panels that I had but it still felt a bit off.

Sketch #2

I kept working with that sketch to see if it developed into something I liked. The more I worked with it the more I liked the placement of the panels but the less I liked the rounded edges. I also felt that the portfolio section could be improved.

Sketch #3

I started over on my sketch and finally came up with something I felt had potential. The portfolio section was greatly simplified and I sharpened the edges of the panels.

Sketch #4

Then I started to play with color composition. I hadn’t done much with light blue for a while so I decided to use that as my base.

Notice that these sketches are very loose and there isn’t that much detail at all. All these are is a tool to get ideas flowing in my head. As I was doing this I was already making final decisions about how I wanted the final website to look.

OK, now let’s open Photoshop. . .

Part Four: The Body

Open up photoshop and make a new document. Set its size to the standard 800 x 600 pixels.

Press U to select the rectangle tool, make sure that the Rounded Rectangle Tool is selected. Set the radius to 10px.

Draw a rectangle from the top left hand corner of the canvas to the bottom right of the canvas. Don’t worry about the color, we’ll adjust that later.

Change the Rounded Rectangle Tool to the Rectangle Tool. Click + on the keyboard (or click Add to Shape Area).Draw a rectangle at the top to remove the round corner. Note that the change of color is for demonstration purposes and yours will not look like that.

You should have a shape with round corners at the bottom and sharp corners at the top.

With the shape layer selected click the little F at the bottom of the layers palette to bring up the layer effects dialog. Click Gradient Overlay and apply these settings.

Click Stroke in the layer effect dialog and apply these settings.

It should look something like this.

Ok now lets add a footer.

Part Five: The Footer

Create a new Group in the layers palette, name it Footer.

Create a new layer in that group, name it Base.

With Base selected, Ctrl-Left Click the shape mask in the layers pallette to make a selection. Hold down Alt and drag a box to deselect to top portion of the shape. Fill that selection with 3c4549.

Draw a thin white rectangle shape over Base.

It should look something like this.

Part Six: The Header

For the header I wanted to make a slightly futuristic feel but also keep the feel of my current website.

Draw a rectangle at the top of the canvas and apply these layer effects.

Then draw a thin white rectangle and set its opacity to 28% It should look something like this

The Icons

I’m not going to cover how I made every single icon, instead I’ll show you my technique I used for one and then you can use that to make your own .

I started with a sketch first.

Then I added paths in photoshop.

I pasted the image onto the header bar and added an outer glow filter.

With all the icons and text, it should look something like this.

The selected icon graphic was very simple, I just made a rectangle shape and applied these settings.

Then I drew a white shape on top of that rectangle and set its opacity to 14%

And this is what it looks like.

For the logo I already had the one that I made for my first website so I just grabbed that and resized it.

The font for the text was Arial. I also applied a light gradient to it. I’m going to leave this up to you. Have fun! .

Your interface should look something like this now.

Part Seven: The Portfolio Menu

The portfolio menu is pretty straight forward. I wanted to differentiate the portfolio navigation from the rest of the site. I wanted the visitor to get the impression that this was a special navigation, separate from the rest of the site. I also wanted to keep it simple so that the user already knew how it worked.

With the portfolio menu it should look like this.

Part Eight: The Content.

Create a new rectangle in the middle of your interface. Fill it with effaff and name it Panel Base.

Give it a 1 pixel stroke with a color 869ca4 Set its position to Inside.

Create another rectangle.

Give it these settings.

Add the text for this panel and then duplicate and resize it to match the picture below.

The content is what really needs to stand out from the rest. So in this case I made the natural decision to make the content the largest portion of the layout. I also put the largest and most colorful images in this section. Notice that the icon images for my projects are not only bigger but also have a slightly different design from my tutorial icons. This says discreetly “hey. . my tutorials are cool but what I really want you to do is check out my portfolio.”

I really wanted the welcome section to stand out and I felt that text just wouldn’t do it by itself. So I made a globe surrounded by a wireframe to give it that “internet” feel.

A note about color

A good rule of thumb is to keep the color palette very limited. 4 or 5 colors maximum. I tend to pick a color theme (in this case blue) and use different saturations and brightnesses (is that a word?) of that color. If you’re lost as to what color scheme you’re going to use check out www.colorschemer.com he has great color schemes for you to play with.

Part Nine: The News Panel.

The News panel is very simple as you can tell. Just make sure that the date and the description are easily distinguishable. If you have any links in there, separate them out with a different color. I used orange. Isn’t it pretty?

Part Ten: The Tutorials Panel.

Another simple panel. I merely grabbed the tutorial icons that I made for my website and placed them inside the panel with their corresponding descriptions. When you have stock images like this it’s a good idea to create an icon template with all the styles saved so that you can simply apply it to the new image.

Icon Template

I created a PSD file with all my styles and graphics that I wanted applied to my icons. Then is was just a matter of applying it to my icons.

Part Eleven: The Result

Put all these parts together and you get this!

Click for a larger view

Conclusion.

I hope this tutorial was helpful, feel free to post any comments or questions. (Or contact me directly).

Also I’m accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email. Make sure that you put “request” in the subject.

Note: This tutorial is meant as a supplement to my digital painting tutorial.

What you will need

• Adobe Photoshop.
• A reference photograph.

Why not use the grid tool?

Photoshop can’t currently create proportional grids with the grid tool, it’s a global setting that gets applied to every document. So while it might be great for guides it’s not good for creating reference grids.

Here is an example:

In the grid below I created a 2×2 inch square and created a gridline every 1 inches, note the four squares

I want to create an image that is twice the size of this while also having four squares (a gridline every 2 inches). If I simply create a 4×4 inch square canvas I will get the following.

Notice that this has 16 squares whereas the other one only has 4!

At the moment there is no way to set a different grid for each document. So until Adobe changes that you will need to use the technique illustrated below to create your proportional grids.

Part One: Preparing a grid for your reference photo.

Find the width of your reference image

First thing you need to do is find the width of your reference image. In my case it’s 1024px.

Find the width of each square in your grid

Because I wanted 10 squares in my grid I divided that number by 10. Find the number of squares that’s appropriate for you. Generally a good range is between 8 and 12.

1024px/10 = 102.4px

Because you can’t have .4 pixels I rounded this down to 102.

Create the square pattern.

Open a new document and set the width and height to 102 pixels.

Unlock the background layer by double clicking it. Click the little Fx at the bottom of the layers palette to open the layer style window. Apply these settings.

Next go to Edit > Define Pattern. Give it the name Grid and click OK

Create the grid channel.

Go to your reference image.

Click Window > Channels To bring up the channels tab. Create a new channel and name it Grid.

Type Shift – F5 to bring up the fill dialog.

Select Pattern from the drop down menu and then select Grid (the one you just created).

Click Ok

It should look something like this.

Fill the grid lines with black

Go back to the layers palette and create a new layer on top of your reference photo, name this layer Grid.

Go to Select > Load Selection. Select Grid from the drop down menu and click ok.

You should see a selection mask.

Go to Select > Inverse to invert the selection.

Press Shift – F5 and select Black From the drop down list.

Presto! You have a grid!

Part Two: Preparing a grid for your canvas.

Create a new canvas the same size as your reference photo. In my case it was 1024 x 768 pixels.

Create a new layer above the background layer, name this Grid

Like before, go to the channels palette and create a new channel and name it Grid, with the
new channel selected, press Shift – F5 and select your pattern.

Go back to the layers palette select the grid layer and go to Select > Load Selection. Select
Grid from the drop down menu and click Ok.

Invert the selection mask and fill it with black.

It should look like this.

Make the canvas larger than the reference

If you’re making this grid for the portrait, it’s a good idea to make the canvas larger than the image source.

Go to Image > Image Size and apply these settings.

Final Result:

What you will need

• Adobe Photoshop.
• A reference photograph.

A Few things first. . .

A note about using grids:

I really recommend using a grid for beginning artists. You’ll find that your work will improve dramatically, and that’s always encouraging . I also encourage you to try drawing without a grid. I used the grid in the beginning (to check proportions, placement etc) and then later hid the grid while I was working with color.

You can read my tutorial: How to create a grid quickly and easily with Photoshop

A note about brushes:

Until the last part of the portrait I only used basic photoshop brushes with their hardness normally set to 0%. I tended to alternate between either 100% or 30% opacity.

Part One: Blocking out the shapes

Believe it or not the hardest part of drawing isn’t the details. It’s blocking out the shape. I can’t stress how important this step is, as it sets the foundation for your entire image. I don’t care how good your details are if your foundation isn’t solid your piece will suffer.

It’s important to stay loose while drawing so go ahead and scribble in shapes, keep an eye on the grid as you do this but don’t be overly concerned about getting it perfect, this will come later.

This is about 45 minutes of work, notice that I don’t have that many details, I was primarily concerned about the placement of forms. I used the basic brush with an opacity around 30%.

Then I started working on the face. In portraits the face and hands are CRUCIAL. This is what sells the piece. Keep that in mind as you are working. In order to achieve a believable likeness you must keep facial proportions in consideration.

Use facial proportions:

Even though every face is different, they all follow the same facial proportions. Don’t forget these.

Here are some of the most useful.

Looking at this picture face-on all these lines would be straight, I had to compensate for the slight angle.

Don’t obsess about them yet though, notice that the details aren’t perfect, I just put in some nose, mouth and eye shapes to get the general proportions right.

As I started to gain confidence in my strokes I started to zoom in and refine them. I also added more detail to the face.

Periodically flip the canvas

While drawing, it’s a good idea to constantly flip the canvas. It helps you get a fresh perspective. I frequently notice things that I wouldn’t have otherwise.

Take a minute and look the image below, are some details easier to see than others?

Don’t be concerned at this point if the portrait doesn’t look like the person. That comes next .

Part Two: Adding depth through chiaroscuro (shading)

Lines can only give a piece so much depth so let’s add some shading to make it pop out.

Generally it’s a good idea to apply shading evenly across the picture but sometimes you can just get lost in a particular spot (especially if you’re working on a face.)

In the next step I continued to block out the tones. Getting my darkest darks and my lightest lights. I also hid the grid.

Part Three: Adding color

This was my first attempt at color. I made a new layer above my figure layer and set its blending style to Multiply. This preserves the black lines and lets you paint over it (like a coloring book). This technique is great for graphic novels but I wasn’t satisfied with it for this piece.

One thing that I want to point out is I rarely use the eraser tool. Instead I tend to favor the brush. If I have a black spot that I want to make white I don’t erase it, I replace it with white.

With that said, in the following instance I did remove the color and start over again. This time I played with the Curves panel. This actually changed the colors of my lines which was much more realistic.

At this point the base figure is done, now comes the fun part. . .

Part Three: Tweaking!

Art is 10% construction and 90% tweaking. (At least it is for me). The thing about tweaking though is that it won’t work if you don’t have a solid foundation. So make sure that you have the right proportions and balance otherwise it’s a lot more work to fix it afterward.

As you can see below I refined the face, breast region and arms. I also added a black dress layer.

Next I started to work on the background.

I felt that the skin wasn’t warm enough so I played with curves some more to give it a more soft golden color.

I also put in highlights on her dress and worked with the background more too.

The Result

Here is the final result, I used natural brushes in Photoshop to give the wood it’s texture.

Conclusion

The process in theory is very simple but it takes a long time. I spent close to 20 hours on this project and there is more I can do with it (such as fix her left eye and thumb).

I also asked fellow artists for critiques. (I don’t recommended asking friends and family because generally they only thing they will say is “it doesn’t look like her” or “it looks like her.”) A great place for advice is the forums at 3dTotal.com or cgSociety.org

I hope this was helpful, if you have any questions or suggestions feel free to contact me.

I’m accepting requests. If any of you have a question about Photoshop or PHP and would like to see a tutorial, send me an email here. Make sure that you put “request” in the subject.

Note: This tutorial is a supplement to my other tutorials. If you are interested in manipulating images with gdLibrary please try any of these first.

• Drop Shadows with gdLibrary
• Create cropped thumbnails with gdLibrary
• gdLibrary Bar Chart
• Line Chart Class with gdLibrary

What you will need

• A server with php installed and gdLibrary enabled.
• An image script generated with gdLibrary.
• A pure text editor, I like Eclipse.

Introduction

In PHP there are two ways to output an image. Each of these has their advantages and disadvantages. These will be discussed later in the tutorial.

1. Output to an image file.
2. Output to the header.

Part One: Output to an image file.

At the end of every gdLibrary script there is the following code.

ImageJpeg($canvas);
ImageDestroy($canvas);

To output the image to a file simply add the file path to the ImageJpeg function.

ImageJpeg($canvas, "some_path/my_image.jpg");
ImageDestroy($canvas);

A good way to use this technique is to package your code into a function and add this bit of code at the end.

function myFunction()
{
/*

Your code goes here

*/

ImageJpeg($canvas, "some_path/my_image.jpg");
ImageDestroy($canvas);
}

This function will run and then save the image to the folder of your choice. Nothing could be better .

Advantages

You only have to generate the image once.

You can reference the image like any other.
(<img src = “somepath/my_generated_image.jpg” />)

Speed! Because you’re not generating the image every time, this is by far the fastest option.

Disadvantages

There is the potential of having thousands (or even tens of thousands) of different images. (such as generating thumbnails)
Managing that many thumbnails can prove daunting (if not impossible).

Part Two: Output to the header.

In order to output to the header you have to tell the server to output this file as an image.

header("content-type: image/jpeg"); //<- telling the server that this is an image
ImageJpeg($canvas);
ImageDestroy($canvas);

The server won’t save a copy of the image so in order to see it you have to preview it in the browser.
This brings up the question, how do I pass data to my image? Simple, through the browser!

Passing data

Take a look at this code.

$myImage = "<img src="/image_file.php?var=some_image.jpg" alt="" />"; 

Does this look familiar? It should! I just pass data to the file like I would any other PHP file and then set that php file as the source in an image tag. Ahhh the beauty of PHP .

Ok now what if I want to pass a lot of data through the header? Such as an array? Is this possible? You bet it is!

The Serialize Function

PHP comes with a function called serialize. It converts any data into a byte-stream representation that can be interpreted by the server. In this way we can send all kinds of data.

This function is also helpful as it stores the datatype and structure. So you can actually send an array or an object!

The serialize function can be used like this.

This code does NOT go into your php image file. Instead this goes into the file that is referencing your php image file.

$myArray          = array(1,3,5,11,21,31,5,3,1,3,4);
$serialized_array = serialize($myArray);
$myImage          = "<img src="/image_file.php?array=$serialized_array" alt="" />"; 

Inside your php image file type the following code.

//you retrieve your array from the header by using the unserialize function.
$myArray = unserialize($_GET['array']);

/*

Your gd code here

*/
header("content-type: image/jpeg");
ImageJpeg($canvas);
ImageDestroy($canvas);

Note: The serialize function isn’t limited to just this, you can use it to pass data whenever you want.

Advantages

You don’t have to store any images to the server, it generates them on the fly.

You can change the look for all your generated images quickly and easily.

Disadvantages

It can be quite slow as it has to generate a new image everytime. It can be especially slow when dealing with a lot of data. (such as statistics for a chart.)

Conclusion

I hope you found this tutorial useful. If you have any questions or suggestions please feel free to post in my comments.

Note: This is a rather advanced tutorial so if you have never encountered classes and OOP
(Object Oriented Programming) before I encourage you to read up on it a bit and then come back.

What you will need

• A server with php installed and gdLibrary enabled.
• A pure text editor, I like Eclipse

The Source

Download the commented source code to this tutorial.

Part One: Initializing your new class and setting variables.

Open up your favorite script editor

Create a new file and name it line_chart.php

Copy the following code and paste it into your new php document.

class line_chart
{
//--------------------------------------------
// variables
//--------------------------------------------

// The chart labels
var $chart_title    = "Web Site Hits";
var $x_label	    = "Date";
var $y_label 	    = "Hits";

//The dimensions of your chart
var $chart_width     = 500;
var $chart_height    = 300;

//The perimeter of  your chart
var $chart_perimeter = 50;

//The data that you want to be plotted
var $data_array      = array();

//Your color array
var $color 			= array();
}//end of class

Part Two: The “Set” Methods

While working in OOP it is good practice to create set methods that will (as you might expect) set your variables.

Copy the following code and paste it into your document under the variables that you just created.

//--------------------------------------------
// set chart dimensions
// This function sets the dimensions of your chart. Right now they are set to default 500x300 but later
// you'll be able to use this function to change the dimensions to whatever you want.
//--------------------------------------------
public function set_chart_dimensions($width, $height)
{
$this->chart_width  = $width;
$this->chart_height = $height;
}
//--------------------------------------------
// set chart perimeter
// This function sets the width of the perimeter, you can make the perimeter larger or smaller by passing
// a higher or lower integer.
//--------------------------------------------
public function set_chart_perimeter($perimeter)
{
$this->perimeter = $perimeter;
}
//--------------------------------------------
// set labels
// This function sets the labels for your graph. You can also remove your labels by setting each value to an
// empty string ( "" )
//--------------------------------------------
public function set_labels($title, $xLabel, $yLabel)
{
$this->graphTitle = $title;
$this->xLabel     = $xLabel;
$this->yLabel     = $yLabel;
}
//--------------------------------------------
// add line
// This function passes an array of information to your data_array. This data will be plotted
// note that I'm using brackets [], this will let me have multiple lines on a graph. (great for making comparisons)
//--------------------------------------------
public function add_line($new_data)
{
$this->data_array[] = $new_data;
}

Part Three: Preparing the canvas

All the setup is done, now its time to actually start programming! The first step is creating your canvas so let’s get to it.

Go back into your class, copy and paste the following code below your add_line() function.

//--------------------------------------------
// prepare canvas
//--------------------------------------------
private function prepare_canvas()
{
//this->chart is the variable that will store your image. It is the canvas for all of your work.
$this->chart = imagecreatetruecolor($this->chart_width, $this->chart_height);

//By default the canvas only comes with one color. . black (which really isn't a color at all, it's the absence of color  ) anyway
//it would be memory intensive for php to automatically allocate every color into memory (as there are millions of colors)
//so we must do each manually.

$this->color['white']     = imagecolorallocate($this->chart, 255, 255, 255);
$this->color['black']     = imagecolorallocate($this->chart, 0,0,0);
$this->color['yellow']    = imagecolorallocate($this->chart, 248, 255, 190);
$this->color['blue']      = imagecolorallocate($this->chart, 3,12,94);
$this->color['gray']      = imagecolorallocate($this->chart, 102, 102, 102);
$this->color['lightGray'] = imagecolorallocate($this->chart, 216, 216, 216);

//later when we want to adjust the position of our fonts we'll need to know the width and height.
//I'm setting my font size to 2.
$this->font_width  = imagefontwidth(2);
$this->font_height = imagefontheight(2);

//This function as you might expect, fills the canvas with a color. In this case, I'm filling it with light gray
imagefill($this->chart, 0,0, $this->color['lightGray']);
}

Part Four: Calculating the maximum and minimum Y values.

In this next part we need to find a maximum and minimum value for the Y-Axis. We could just take the maximum and minimum value in our array (608 and 108) but then the line would go right to the edge and not look very good.

So let’s create a buffer.

Copy and paste the following code into your document below the previous function.

//--------------------------------------------
// get min and max y values
//--------------------------------------------
private function calculate_min_and_max_y_values()
{

//because we might have multiple lines of data (multiple arrays),
//we'll need to search through all of them in order to find the
//highest and lowest value.

for($i=0; $idata_array); $i++)
{
$current_line = $this->data_array[$i];
if( min($current_line)>$y_min ) $y_min = min($current_line);
if( max($current_line)>$y_max ) $y_max = max($current_line);
}

//min
$places   = strlen($y_min);				//string length of minimum value. 		  		  so strlen(1) = 1;
$mod      = pow(10, $places-1); 	    //raising that number minus 1 to the power of 10. so pow(10, 0) = 1;
$y_min    = $mod - $y_min; 				//subtracting that from the minimum. 			  so 1 - 1 = 0; <-your y-axis minimum

//We can't have negative hits so if $y_min is less than 0 we
//just set that to 0.
if($y_min<0) $y_min = 0;

//max
$places = strlen($y_max);
$mod    = pow(10, $places-1);
$y_max 	= $mod + $y_max;

//Saving this mod value to a class variable
//(it will be useful later)
$this->mod = $mod;

//Saving the $y_min and $y_max values so that they can be
//accessed by a different method in the class.

$this->y_axis_values['min'] = $y_min;
$this->y_axis_values['max'] = $y_max;
}

Part Five: Preparing the Grid

Ok prepare yourself, this is going to be the hardest part of the tutorial. But don’t be afraid, it’s not too hard. What we need to do next is create a grid on which we can draw our chart.

Remember the perimeter that you assigned earlier? Well that’s where this comes in. The perimeter acts as a buffer between the edge of your canvas and the grid its self. The perimeter will also be the place where you put your chart labels.

I’m going to break up the next function into chunks and explain what they do as we go along.

Copy and paste the following code in to your document.

private function prepare_grid()
{

//The grid width. We don't want the grid to be the same size as the chart otherwise the entire
//document will be just one grid with no place for labels. Therefore, subtract the perimeter width from all sides.
$gridWidth  = $this->chart_width  - ($this->chart_perimeter*2);
$gridHeight = $this->chart_height - ($this->chart_perimeter*2);

//I prefer to work with coordinates, it makes it easy to visualize the process. If you observe below you'll see
//That I've made four corners.
$this->c1 = array("x"=>$this->chart_perimeter,             "y"=>$this->chart_perimeter);
$this->c2 = array("x"=>$this->chart_perimeter+$gridWidth,  "y"=>$this->chart_perimeter);
$this->c3 = array("x"=>$this->chart_perimeter+$gridWidth,  "y"=>$this->chart_perimeter+$gridHeight);
$this->c4 = array("x"=>$this->chart_perimeter,             "y"=>$this->chart_perimeter+$gridHeight);

Go ahead and copy and paste the following code below your previous.

//now that I've made the grid coordinates its time to connect the dots and create a grid plane.
//In this function I'm creating a solid white rectangle
imagefilledrectangle($this->chart, $this->c1['x'], $this->c1['y'], $this->c3['x'], $this->c3['y'], $this->color['white']);

More copying and pasting.

//getting the biggest array
//now I need to find the highest x-value but unlike the y-value that I found earlier, I'm not trying to find
//the highest data value but rather the highest count value.
//To put it simply, which array has the most entries?

$biggest_array = array();
for($i=0; $idata_array); $i++)
{
if(count($biggest_array) < count($this->data_array[$i])) $biggest_array = $this->data_array[$i];
}

I’m going to increment by grid units so I need to find what the width and height of that grid unit is (in pixels)

and again. . .

$this->square['w'] = $gridWidth/count($biggest_array);
$this->square['h'] = $gridHeight/$this->y_axis_values['max'];

I also want some padding between the first line and the left side of the graph, otherwise the chart won’t
look that great.

$this->vertical_padding = $this->square['w']/2;

Copy and paste the following code

//------------------------------------------------
//drawing the vertical lines and axis labels
//------------------------------------------------
foreach($biggest_array as $assoc=>$value)
{
//drawing the line
imageline($this->chart,  $this->vertical_padding+$this->c4['x']+$increment,   $this->c4['y'], $this->vertical_padding+$this->c1['x']+$increment, $this->c1['y'], $this->color['black']);

//axis values
//finding the width of the word so that we can accuratly position it
$wordWidth = strlen($assoc)*$this->font_width;

//the x-position of the line, this will be incremented on every loop
$xPos = $this->c4['x']+$increment+$this->vertical_padding-($wordWidth/2);

//creating the axis value label
ImageString($this->chart, 2, $xPos, $this->c4['y'], $assoc, $this->color['black']);

$increment += $this->square['w'];
}

Next we need to create the horizontel lines to finish up our grid. Copy and paste the following code.

//------------------------------------------------
//drawing the horizontel lines and axis labels
//------------------------------------------------
//resetting the increment back to 0
$increment = 0;
for($i=$this->y_axis_values['min']; $i<$this->y_axis_values['max']; $i++)
{
//main lines
//often the y-values can be in the thousands, if this is the case then we don't want to draw every single
//line so we need to make sure that a line is only drawn every 50 or 100 units.
if($i%$this->mod==0){
//drawing the line
imageline($this->chart, $this->c4['x'], $this->c4['y']+$increment, $this->c3['x'], $this->c3['y']+$increment, $this->color['grey']);

//axis values
$xPos = $this->c1['x']-($this->font_width*strlen($i))-5;
ImageString($this->chart, 2, $xPos, $this->c4['y']+$increment-($this->font_height/2), $i, $this->color['black']);

}
//tics
//these are the smaller lines between the longer, main lines.
elseif(($this->mod/5)>1 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; $i%($this->mod/5)==0)
{
imageline($this->chart, $this->c4['x'], $this->c4['y']+$increment, $this->c4['x']+10, $this->c4['y']+$increment, $this->color['grey']);
}
$increment-=$this->square['h'];
}

//------------------------------------------------
//creating the left line
//------------------------------------------------
imageline($this->chart, $this->c1['x'], $this->c1['y'], $this->c4['x'], $this->c4['y'], $this->color['black']);

}//end of prepare_grid function

I also added a left line to make it look better.

Part Six: Drawing the axis labels

Every chart needs to have some chart labels so let’s add some!

Copy and paste the following code.

private function draw_chart_labels()
{
//------------------------------------------------
// Making the chart labels
//------------------------------------------------

//Graph Title
ImageString(
$this->chart, 2,
($this->chart_width/2)-(strlen($this->chart_title)*$this->font_width)/2, $this->c1['y']-($this->chart_perimeter/2),
$this->chart_title,
$this->color['green']);

//X-Axis
ImageString(
$this->chart, 2,
($this->chart_width/2)-(strlen($this->x_label)*$this->font_width)/2,  $this->c4['y']+($this->chart_perimeter/2),
$this->x_label,
$this->color['green']);

//Y-Axis
ImageStringUp(
$this->chart, 2,
$this->c1['x']-$this->font_height*3, $this->chart_height/2+(strlen($this->y_label)*$this->font_width)/2,
$this->y_label,
$this->color['green']);
}

Here is the chart with the labels.

Part Seven: Plotting the lines.

You’ve come a long way! Congratulations! There are only a few steps left before you’ll be frolicking in graph goodness!

Lets do what you’ve been waiting for, plotting the lines on your new chart.

Copy and paste as always.

//--------------------------------------------
// plot lines
//--------------------------------------------
private function plot_lines()
{
//------------------------------------------------
// Making chart lines
//------------------------------------------------
$increment = 0; 		//resetting the increment value

//looping through each array of data
//(in this case there is only one set of data
//but later you'll be able to add more)
for($i=0; $idata_array); $i++)
{

$line = $this->data_array[$i];
//getting the first value
$firstVal = end(array_reverse($line));

$increment = 0;
//getting the first point for your line
$point1 = array($this->c4['x']+$increment+$this->vertical_padding,$this->c4['y']-($firstVal*$this->square['h']));

//looping through your current array of data
foreach($line as $assoc=>$value)
{
//getting the second point for your line
$yPos 	= $this->c4['y']-($value*$this->square['h']);
$xPos 	= $this->c4['x']+$increment+$this->vertical_padding;
$point2 = array($xPos, $yPos);

//drawing your line
imageline($this->chart, $point1[0], $point1[1], $point2[0], $point2[1], $this->color['blue']);

//point1 becomes point2
$point1 = $point2;

//increment to the next x position
$increment += $this->square['w'];
}
}
}

Part Eight: The output function

Guess what . . you’re almost done!

Copy and paste this simple function

//--------------------------------------------
// output
//--------------------------------------------
private function output()
{
//sets the type of output (in this case a jpg image)
header("content-type: image/jpg");
imagejpeg($this->chart);

//after output it removes the image from the buffer to free up memory
imagedestroy($this->chart);
}

Part Nine: The plot function.

All right time for the last function. Thankfully this one is REALLY easy. Just copy and paste as usual. (make sure that
they are in this exact order).

//--------------------------------------------
// plot
//--------------------------------------------
public function plot()
{
$this->prepare_canvas();
$this->calculate_min_and_max_y_values();
$this->prepare_grid();
$this->plot_lines();
$this->draw_chart_labels();
$this->output();
}

Notice that these are all the functions that you just made? Pretty much in order too. This is the essence of modular and the power of classes. Now it is very easy to debug for if we have a problem we can just go through and comment out those functions in order to isolate it.

Part Ten: Creating an instance of your new class.

Ok all the hard work is done, now for the fun part.

Copy and paste the following code after the closing curly-bracket of your class (where it says //end of class)

//Your Chart Data (this is what will be plotted)
$data['May 10'] = 108;
$data['May 11'] = 419;
$data['May 12'] = 305;
$data['May 13'] = 433;
$data['May 14'] = 608;
$data['May 15'] = 702;
$data['May 16'] = 498;
$data['May 17'] = 500;
$data['May 18'] = 208;

//creates a new instance of your line_chart class
$myChart = new line_chart;

//set the dimensions of your chart
$myChart->set_chart_dimensions(500,300);

//set the perimeter of your chart
$myChart->set_chart_perimeter(50);

//set the different chart labels
$myChart->set_labels("My Title", "My X-Label", "My Y-Label");

//this references your add_line function and sets your data
$myChart->add_line($data);

//outputs your chart;
$myChart->plot();

See how easy and compact that is? With just six lines of code you created a line chart! Amazing! You can also just do it with three, simply remove the set_chart_dimensions, set_labels and set_chart_perimeter functions and it will grab the default values.

This is the final result of all our hard work!

And look what happens when I pass it another array of data!

Conclusion:

Go ahead and add some more features. Perhaps write a function that will set the color of the line or the background. The sky is the limit!

I hope this tutorial was helpful, feel free to post any comments or questions you may have.