Testing Environment

As you can imagine, there is a lot more stuff going on behind the scenes with PHP than there would be with just HTML,CSS, Javascript which is built into browser functionality. PHP is a server-side scripting language which requires a PHP server. This could be either on your web server (most paid hosting includes PHP) or you can set one up locally. For this tutorial I will show you how to set up your server on your own computer(locally). To do this we need to download some software.

Mac Users

For Mac users I will direct you to a great program called MAMP (Mac apache Mysql PHP) download and install that, the free version should be more than enough to start out, but if you find yourself needing more the paid version is great.

Windows Users

Windows users may have a little less pretty interface, but it still works! A program call WAMP (Windows Apache Mysql PHP) Just download and install.

I will be doing this tutorial on a Mac so everything will be in MAMP but everything is very similar in WAMP. For both, make sure that your server is up and running. To do this on MAMP click on the app (the one that looks like an elephant) it will ask for the admin password, then you will be connected a web page will open confirming it’s success. With WAMP click on the icon, it will place an icon in the bottom right bar by your time (the icon looks like a meter of some kind). Click on this icon and select start all services. For more information on how to use WAMP check this out WAMP Docs. Now that we have our servers running it’s time to get started with the fun stuff, Writing the PHP.

Bare Bones Basics

This section I will talk about the very basics needed to get your first PHP application going. If you have already seen php code before than you will recognize some things, but go ahead and read over the information because if you mess up these very essential pieces of the PHP picture than nothing you write in PHP will work. So pay attention and you will be fine.

<?php ?>

This is what you will use to start and end every bit of PHP you will ever write, Also you can use shorthand tag (sometimes it needs to be enabled on your server to be used):

Cliche Hello World

What kind of tutorial would this be without a Hello World statement. I will show you how to display hello world on your screen, Two ways!

This is the echo statement, you should get used to this on as you will use it a lot throughout your PHP developing career.

<?php
    echo "Hello World";
?>

The second is print, which basically does the same thing as echo but it can return an true or false boolean value, which you don’t have to worry about just yet. All that is important right now is that you can use either to display something on a webpage.

<?php
   print "Hello World";
?>

There you have it, your first PHP script! That wasn’t so hard was it? Let me take you through our tiny script and explain to you what is happening with it. first we opened the PHP tag

Commenting Your Code

One of the best Practices you can get into right from the start, is to comment out your code. You may know what you are saying when you are writing it, but what about when you have to edit it a few months later? You may not have any idea what was going through your head at the time. That is why it’s great to comment your code! There are a few ways to add comments in PHP, Let me show you how.

<?php
	echo "Hello World"; //This is a single line comment
?>

<?php
	echo "Hello World"; /* This is a multi-line comment
	print 'Comment'; I am still commenting
	*/
?>

Intro Into Variables

Variables are found in many different programming languages so if you have some experience in Javascript then this might not be a hard concept for you to catch on to. Basically a variable holds a value, it can be a string like “Hello World”;, integer like 4 or it could be another variable. In PHP variables are defined by the $ sign, and are case sensitive.

Some examples of valid variables.

* $variable
* $Variable
* $variable_name
* $varibaleName
* $_variable

Some Invalid variable Names

* $3variable
* $variable-name
* $variable@name

This leaves you with lots of choices to name your variables, here is an example of how to use them.

<?php
	$helloWorld = "Hello World";
	echo $helloWorld;
?>

I am not going to get into this to far until next time but you can do math using variables. Use this example to create you own mathematical equations

<?php
	$var1 = 20;
	$var2 = 15;
	$var3 = $var1*$var2;

echo "20x15 equals $var3";
?>

I will cover more math in the next tutorial but this will give you a nice example of what you can do with variables. Variables are one of the most important building blocks of PHP, and you will soon become very comfortable with them.

Conclusion

This has been a simple introduction into the world of PHP, and let me tell you we have just scratched the surface of what you can do with this very dynamic programming language. Next time we will get into more in depth examples and also some more core functionality of this great language.

Things You Need

• Airstream Font

Step 1

Create a new document 1000px x 72px. Background color:#0096ff.

Step 2

Select the blur brush tool color:#61beff and create a circle blur above our background layer. You should have glow look if done correctly.

Step 3

Select the type tool size:200px, Text:Airstream, color:#ffffff, and create the word Eclipse. Then go to Window>>Character and change to settings below.

Step 4

Duplicate the text layer and change the color to #000000. Then move text downward left to give it that eclipse look.

Step 5

Now this is where the neatness comes in or shall I say the great effect of out logo. Select the black text layer and change the color from black to #61beff. Text should now blend in with background.

Step 6

Select the type tool size:30px, Text:Airstream, color:#fff, and create the word Solar. Then add the word to the top upper left of the Eclipse text.

Step 7

Select the rounded rectangle tool color:#fffff and create a circle.

Duplicate the layer and change the circle color to #61beff. Move it down leftward. Click image below to enlarge!

You are now done! I know this tutorial was quite simple but you should have an basic understanding of how creating a logo.

Beyond This tutorial

If you would like there are many things you could do with this logo or any logo you create. I just change the backgrounds and dropped the shadow on some but there were a ton of other things I could of done with this. So be creative and don’t just settle for your first idea.

Materials you need!

• Image of yourself
• Photoshop/Illustrator
• Patients

Step 1

Open illustrator and Create new document 1000px x 1000px.

Then grab a image of YOURSELF and place it on the canvas.

Step 2

Ok so if you have seen others tutorials they have probably stated at this step that you should use the pen tool. Since the pen tool takes time to use and get used to we will use the brush tool with a stroke and no color throughout the entire tutorial. Select the brush tool(or press B). Then change the stroke to 0.75. Now trace your face. take your time also.

As you can see I have trace my face with the image turned on.

One you turn the image off you should have a trace like the one below.

Step 3

Now we’re going to trace the hair. I have a buzz hair cut so it might be easy for me to trace but if you have long hair or curly or Afro just trace the outline and we will add details later.

Step 4

Next we will draw the lips. I started with the bottom lip then added the top lip. Zoom in if you need to also. If it takes you multiple tries do not worry the face is one of the hardest things to do.

Note: I am tracing with the image on but looks as if I’m not from the images.

Step 5

I know the nose should be next but we’re going to do the eyes now. Trace your eyes now. When tracing the eyes if you have to change the stroke or the brush depending on what looks good. We will add details later.

Step 6

Next we’re going to draw the nose. Do not draw the entire nose.Draw it piece by piece. Your nose will be different from mines but just look at how I have outlined
it.

Now draw your nostrils. Try not to connect it to your nose. But do not leave to much space in between the nose and nostrils.

Step 7

Next we’re going to get back to the eyes section. Create a line above your eye. That will indicate the outer edge of your eyes. Hope that made sense

Step 8

Now lets create our eye brows. Trace your eye brows.

Now click on the eye brows and change the fill color to black(#000) or whatever color your eyebrows are.

Step 9

Now create two lines for your facial structure. It might make you look like you have wrinkle skins but that will change later. You might have to change the stroke to a thinner stroke. Depends on the person.

Step 10

Now just you should only have to trace your body and add details your ear. I decided to skip some parts to get to the painting. If you’re having trouble just look at how have traced my image.

Step 11

Now we’re going to bring it over into photoshop and start painting it. I guess this is the fun part, well aleast for me it is haha. Go to File>>Export and give your trace a name and save it as a Photoshop Document(PSD).

Step 12

Open photoshop and drag your vector trace into photoshop. The vector will be bigger in photoshop(Just a heads up).

Note: Painting takes a while. Select the Paint brush tool and paint slowly. I painted the inside first then zoomed in and painted the edges.

Step 13

Select the paint brush tool and go around and paint the shirt and hair of your vector. If you have long hair Just create a custom brush pattern with a bunch of lines or
just select the paint brush tool 1px and draw string by string. Yes it takes a while.

Step 14

Now select the best skin tone color for your skin. Since I am a dark brown I will use a dark brown color. If you have light tones and your face we’ll worry about that later. For now just create the basic tone.

Step 15

Now lets work on our eyes. With the brush tool slowly and carefully fill the background of the eye. I did not choose white as the color. Instead I used something a bit darker(#e8e8e8<--Light Grey/white).

Step 16

Select the color of your eyes. In my case my eyes are dark brown so I choose a dark brown color for my eyes. Then added two pupils.

Step 17

Depending on the lighting select the basic color of your lips. I choose a darker color for my bottom lip and lighter color for my top lip. We will add details later.

Now if you look at my original image you will see my lips you see i have lighter spots on some parts of them. So what you want to do to accomplish a great look is select the paint brush tool and whatever color your lips are lighter then select that color. In my case they were a pinkish color so I selected a pink type of color then added 4 dots. After you have the dots go to Filter>>Blur>>Gaussian blur then blur it til it looks good on you. Do that for the top and bottom lip then erase the extra blur around the lips.

Step 18

Ok so remember how we applied a basic tone to our skin. Well this is the part where you add the lighter or dark spots on your skin. I have darker spots on my skin so I selected a dark brown color with the paint brush tool and marked my dark spots(I didn’t really get too detail). Then I added a Gaussian blur to it.

Step 19

Next we’re going to do the exact same thing as step 18 but for our eye shadows. Select the paint brush tool and use the same color that you used for your dark/light spots then add two circles right under your eyebrows then apply a Gaussian blur.

Step 20

Finally add a background image then you’re done! Your vector should be completed. I know I did not use a image that we could of all use because that would make this
tutorial worthless. If you followed my steps then you should be good to go.

I know this tutorial was not very detailed but it should of helped you create a vector image of yourself using simple techniques. I hope you guys enjoyed this tutorial.

Create a New Document. It can be any size.

Step 1

Select the rounded rectangle tool, radius: 5px, color:#1f1f1f and draw a rectangle in the middle of your canvas.

Right click on button layer>>blending options>>gradient overlay. Blend mode:normal, Opacity:100%, Style:linear, Angle90, Scale:54%.

Now double click on the gradient bar. Left Color:#1f1f1f, Right Color:#343434.

Step 2

Now were going to give our button a little of pop out technique. Ok so you know the first rectangle layer we’ve created, we are going to take that layer and duplicate it 2 times. After you have duplicated it 2 times you should now have 3 buttons in total. First Rectangle will be the gradient we’ve created in the beginning of this tutorial and the second 2 buttons will be changed from gradients to a 1 solid color.

Note: To change a layer from a gradient to 1 solid color all you would have to do is right click on the layer>>blending options>>and unselect the gradient overlay box. Then select the
color check box and change the color without making a new button over again.

First rectangle: Gradient
Middle Rectangle: #3D3D3D
Last Rectangle: #343434

Now that you have all 3 buttons made with the proper colors we will now make them them close to one another. Zoom in and select the move tool. Now drag the two layers close to the gradient layer. You should now see a little pop out. If you can not then it might be because of the white canvas.

Step 3

Now we will add our little gloss inside of the button. Select the rounded rectangle tool, color:#ffffff. Now draw a rectangle at the top of the button and change the opacity to 1%, and fill to 10%.

Step 4

Select the type tool color: #4b4b4b, font size:30px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, distance 0, choke: 0 , size: 5

Now select the color overlay check box and change the color to #333333.

Step 5

Select the type tool color: #4b4b4b, font size:12px arial. Right click on the text layer>>blending options>>Inner shadow. blend mode: multiply, opacity: 75%, angle: 120, distance 5, choke: 0 , size: 5

Now select the color overlay check box and change the color to #ffffff. And you should now have a nice looking button.

Note: Click to Enlarge!

You can change the colors of these buttons very easy without creating new buttons. Just change the gradients and background colors and you will be good to go.

Note: Click to Enlarge!