Tutorial Materials

Top 27 Fish Tank Wallpaper

Soudip Paul — Tue, 21 Feb 2012 09:33:36 +0000

Set beautiful fish tank wallpapers on your home screen and let the piscine world come alive. Have tropical fishes swim through your desktop and rejuvenate your mind as you work on your terminal.

Download Best Looking Fish Tank Wallpaper

Turn your desktop screen into a marine aquarium. You are free to use and share these attractive fish tank wallpapers.

Basic HTML

Fri, 06 Jan 2012 00:00:26 +0000

In this tutorial you will be learning about the

HTML Basics 2

Mon, 14 Jan 2008 04:20:06 +0000

In the last tutorial you learned about the , , , and <body> tags. Now you will learn about the , <pre>, , , , and <h#> tags. These tags will help to add some style to your webpage and make it easier to show important phrases or terms in your web page. So you have the start to your code from the last tutorial which looks something like Code: <blockquote> <pre><html> <head> <title>tutorial 2 hello world

First we will learn about the tag (replace # with a number from 1 to 6). This tag is a header tag it is normally used for basic titles and it has 6 different sizes 1 being the largest 6 being the smallest. So lets add a

tag to hello world. It should look something like this

Code:

 

tutorial 2





hello world

Click the link to see an example
example

Remember you can make the heading smaller by using a number that is larger than 1.

Next we will add another line of text saying something else but we will use the

tag this time. The

tag basically says that it is a paragraph but it will not indent any lines unless you use the special character or use CSS but, that is for a later lesson. So lets add the

tag. The

tag will allow you to put one space between words and if you hit the enter key to move to the next line to make another paragraph or for any other reason, all it will do is continue on the same line when you display it on a webpage (I insist that you try this so that you can see it for yourself). Your code should look something like this

Code:

tutorial 2

hello world

it is nice to be here

Click the link to see the example
example

Lets add some style to the text inside the

tag by using the and/or tag. The tag makes the text bold and the tag makes the text in italics. Make sure you put your tags inside of each other. For example make sure if you use the

, , and tag with the same sentence or word that it looks like.

Code:

This is the proper way of using tags

This will prevent some browsers from becoming screwy to say the least.

So lets add those tags to our code now and see what happens. your code should look like this with the and
tag

Code:

tutorial 2
hello world

it is nice to be here

Click below for a visual example

example

With the
and tags

Code:

tutorial 2
hello world

it is nice to be here

Click below for a visual example
example

With the , , and
tags

Code:

tutorial 2
hello world

it is nice to be here

Click below for a visual example
example

Lastly we will learn about the
tag. This tag allows you to input data without any spacing trouble, it will continue along the same line until you hit the enter key to move down to the next line. This is not usually a great tool because of the resolutions other people may use. It may look perfect on your screen but on someone else’s it may go outside a boundary you set (this is just an example there could be other problems). So lets see the the
tag in action shall we. Your code should look like

Code:

tutorial 2
hello world

it is nice to be here

This is what the pre tag is capable of

It has its uses but I find it does not come in handy as much as I wish.

Click below for an example of using the
tag
example

This is the end of the tutorial in the next tutorial we will learn about using images, font color, font decoration, and centering using html.
Thank you for reading this tutorial.

Understanding basic PHP IF/Else statements

Wed, 19 Dec 2007 17:06:48 +0000

Understanding IF’s is important in PHP for many reasons. They’re mainly used when submitting a HTML form, you can see them being uses in nearly every contact script. When you accidentally submit the wrong text you’ll get an error back, this is using PHP IF’s.

However, they’re also used for tons of other stuff but you’ll figure that out later, so let’s make you understand!

$answer = right;

if ( $answer == right ) {
echo “Correct, Tutorial Materials does rock!”;
} else {
echo “You’re wrong, Tutorial Materials does not suck”;
}

Here’s what a fully completed IF + Else if statement looks. Here’s how it works, anything with a $ in front it means it’s a variable, which means it stores information. We stored ‘right’ in the variable called ‘$answer’.

Then the IF starts, it’s basically saying this: If the variable $answer equals exactly to right then display this, if it’s wrong.. then display this.Ehco means display, so if it’s right we want to echo ‘Correct, Tutorial Materials does rock!‘, then the ‘else‘ kicks in and this also echo’s something if the answer is not equal to right.

Correct, Tutorial Materials does rock!

Because ‘$answer’ equals to right, the correct message has been display(and is true, we do rock).

$answer = right;

if ( $answer == wrong ) {
echo “Correct, Tutorial Materials does rock!”;
} else {
echo “You’re wrong, Tutorial Materials does not suck”;
}

On this peice of code, I’ve changed the IF. It’s the same code but this time $answer does not equal to right, therefor it’s wrong and will display the else if.

You’re wrong, Tutorial Materials does not suck

This is the error message returned, which is false.

That’s it! The basics of IF’s and Else If’s.

Creating Vector Circle Brushes with Photoshop

Fri, 23 Nov 2007 22:45:38 +0000

In order to make a brush similar to the one featured above, the tutorial will be split into three categories. The circles, the drips and then making it into a brush. Let?s start off with the circles.

Step 1 -
Create a new document around 500 x 500 with the background as white.

Now select the eclipse tool from the tool panel and make sure the settings at the top are the same as follows:

Now you can start creating the circles. So click and hold anywhere roughly in the centre of your canvas, and then hold down the shift key so your circle stays in proportion, drag the mouse to make the circle then let go when you are happy with it. The circle below is a guide to how big you want the circle to be:

We now have our first circle, this is the basic circle that is used in these brushes. So now we can start making some slightly more complicated ones.

These are the common variants of the slightly more complex circles, and I?ll give a guide on how to create each:

In order to make the circle on the left, duplicate your original circle and then move the new circle into it?s own spot on the canvas. like so:

It?s best to create a new group at this point so you can organise your circles and it makes it much more easier when you piece your circles together. so create a new group, call it what ever you want and then move this new shape into that group.

Duplicate this shape, then go to edit > transform > scale, click the chain at the top and then reduce your circle size by changing it in the box and not on the canvas, this is important as we want to keep it centralized with the circle behind:

As you can see in the image above, I?ve reduced it to 80%, 80% is a good number to begin with, so I recommend you do the same. When you?ve entered this, apply the transformation.

Now your circle should be slightly smaller than the one behind it, and in the very centre of it.

Go to your layer box and double click the black box on your selected shape and change this colour to white. Your circle should look something like this now:

And this is the first of the slightly more complex circles that we will be using for our brush.

To make the other variant shown earlier above, we can use this group of shapes and then add to it a little more using the same method above.So now duplicate the group in the layers panel, and again, move it to a new location on the canvas like so:Now duplicate the white shape in the new group. Again, go to edit > transform > scale and decrease the circle by the same percentage as you did last time, so in this instance, as I used 80% before, I will use it again.Apply the transformation, and now double click on the white box on your selected shape and change this to black.You should now have 3 variants of the circle all together on your canvas similar to the three below:

So now we have the circles done, we can start piecing together our first brush by grouping these circles up into one pile etc.

For the brush featured at the start of this tutorial, it is comprised of 2 of the circles on the left in the image above, 2 middle ones and 1 of the circles on the right.

So duplicate your basic circle shape once, and your semi complicated circle group once. Then move them all into a big pile of circles. Experiment with the layer ordering so the different types of circles are overlapping one and other until you get an arrangement you are happy with, like the image below:

You may have noticed that the brush at the start of this tutorial has different sized circles.

So now change the sizes of the circles by selecting a group in the layer panel and go to edit > transform > scale, you should make sure to press the chain to keep the proportions correct and then change the size of the shape, this time you can change the size of the shape using the surrounding box inside the canvas if you want to, as the shapes will all change at once this time.

After manipulating the sizes of the circles, re-arrange them slightly until you?re happy with the layout like so:

Yes, it does look very different than the image before, but I kept playing with the shapes after resizing them to make a better arrangement =p

That?s it for the circles section. Now we will move onto drips!

Step 2 -
In the same document as your circles, change the tool in the shapes section to the rounded rectangle tool, and then change the radius to 5 pixels, also have the foreground colour set to black.

Create the shape anywhere in the canvas, make it a reasonable length, and make it thin so the top and bottom ends of the shape are rounded and not flat. i.e:

We?ve now created our first drip, and the rest aren?t much different, but there?s 2 different kinds of variations that we will use:

As you may have noticed, ?v1? is a proportional scaled down version of the original. ?v2? is a smaller drip than the original in length, but retains it?s width. It?s very important that each drip keeps the same rounded edge, which is why ?v2? is not using the scale down method similar to ?v1? but a slightly more complexed method.

Below is an example of ?v2? compared to a drip that is scaled down in length only using the scale method.

Here you can see ?v2? keeps the same rounded edge as the original drip, and the other one dulls the edge off.

So here is how to make the ?v2? version:

First duplicate your original drip, then move the new drip to a new location.Now take the pen tool, hold ctrl and click inside the shape and now release the ctrl key. You should now see the points of the shape, 3 at the top and 3 at the bottom. We are going to select the bottom 3 points only, so hold ctrl again, click and hold the left mouse button outside of the shape and drag the selection box over the 3 points, then release the mouse button, then release the ctrl key.The bottom 3 points of the shape should now be filled in grey like so:Now hold ctrl again and click and hold the left mouse button on any of the 3 grey points, then hold the shift key down as well, so now you should be holding down ctrl key, the left mouse button and the shift key all at the same time. Now drag the points upwards until you get around half way, then let go of the mouse button, and then let go of shift and ctrl.And that?s how you make different size drips with them all having the same rounded edge.

Now you can duplicate these drips and position them under neath the circles. Make sure that no drips are poking out of the top of the circles, and none of the drips are over lapping any of the white parts of the circles. See the example below:

After all of that, you can now make it into a brush.

Step 3- Save your work first, then go to layer > flatten image, all of your shapes should now be in one layer called “background”. Change the layer box to channels by clicking the channels tab, now you should see the different channels, and they should all be selected. Click and hold the left mouse button on the RGB channel and drag the pointer down into the dashed circle button located at the bottom of the channel panel.

You will now see the marching ants going around you shape in the canvas. Now go to select > inverse and click back from the channels tab to the layer tab. Now create a new layer layer > new layer, change your foreground colour to black, then go to edit > fill select the foreground colour in the drop down box and click “ok”. Now click the eye on the background layer to hide it, and then you should have your black shape on a transparent background like so:

Finally, go to edit > define brush preset then name it something, click “ok” and you?re done! Remember to save your brush set. But do not save changes to your work, as you can then re-open it, move the drips and circles around and create many new brushes quickly.

Using the methods in this tutorial, you can also make some of the circles and drips semi-transparent by changing the opacity of the layer to 50% before you flatten the image.

Turning your photos into a fantasy

Thu, 22 Nov 2007 21:02:12 +0000

Photoshop is an Extremely powerful graphics creator AND editor, it’s also used by a lot of Photographers to edit there images. In this tutorial I’ll show you how to turn a simple scenery photograph into something which looks like it’s out of Lord Of The Rings. Let’s begin.

Step 1 – Go get the photo!
Go and find your scenery photo you wish to use from Google’s image or some stock site you like(perhaps you’re a photographer and have your own). Place your image into Photo shop and then duplicate the layer, this is what we’ll be working on.

Go to: Filter > Blur > Gaussian Blur. Set the radius too 4.0 pixels.

Step 2 – Add the Effect
Go to: Edit > Fade Gaussian Blur . You can change the blending mode to what you want. It may look a little different depending on the blending option & the image you chose, I used Linear Light.

Step 3 – Admire your fantasy as it comes to life!
That’s all, it’s done! As you can see with the most basic options in photo shop you can completely change an images look and this is why it’s a photographers best friend.

Creating sleek glossy text

Thu, 22 Nov 2007 20:03:18 +0000

In web graphics and normal art work text can be very important for the finishing touches. It can either improve the overall quality of the site/graphic or completely ruin it. So here’s a small tutorial on creating some sleek and glossy web 2.0 style text.

First Step – Creating a text layer
First let’s create your document size and create a layer for the first text layer. Here I’ve used Trebuchet MS and I’ve made the text bold as well as italic(It’s also black if you’re color blind).

Second Step – Styling the text layer
Next we are going to apply some styling to the text, so now change the font color to something like a dark red. Next think we need to do is select the layers blending options. Do do this right click on the layer and go down the list until you find ‘Blending Options’ and click. Proceed down the blending options using these settings given below;

Drop Shadow: Click here
Gradient Overlay: Click here
Text Stroke: Click here

Third Step – Finishing it off
There’s a step here you probably wouldn’t of noticed, but duplicate the text layer and remove it below the first one. Now on the duplicated layer remove all it’s blending options and then change the color of this text to black. Then with the new text layer selected tap down and right on your keyboard arrow keys, this will move the text 1px down and to the right creating a very slight 3d effect.

Forth Step – Who stole the forth step!?
After applying these settings your text should be appearing something like the above. That’s it! You now know the very basics of creating and styling some text. Check back for more advanced text tutorials as well as others.

The basics of CSS

Wed, 21 Nov 2007 10:49:59 +0000

If you’re pretty familiar with using HTML then it’s time to forget it all and move up to CSS. CSS stands for Cascading Style Sheets and is usually an external file containing all the styling for your website. There’s many advantages from using CSS, one is it cuts the rendering time of a page down and another is you can make global changes across your website from using one file!

I’m going to hopefully teach you the basics which will help you begin the transfer from HTML to CSS.

Validating your code

Validating your code is important and everyone should do it. It’s a standard set by W3C and helps cut down on cross browser errors. This meaning that sometimes your website could look perfectly fine in Firefox but something could be out of place in IE and this seems to be very common.

Linking to the External CSS File

<link href=“style.css” rel=“stylesheet” type=“text/css”>

This will be placed inside the head tags of your html. Here I’m linking to a style sheet named ‘Style.css’, if you named it something else or have it in a separate folder then remember to link to it! Otherwise you’ll see no styling at all!

Creating your first external style

#box {
width: 300px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
background-color: #f8ffc9;
}

Now you might be looking at this and thinking what the hell, but let me explain. At the beginning we start of with a ‘#’, this is to tell the Validator that this ‘style’ will only be displayed once on the page. Now you’re thinking then there must be a different symbol we use if we want something displayed more than one, well there is and that’s using a ‘.’ infront of box.

Here’s an example of using the ‘.’ instead of the ‘#’

.box {
width: 300px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid #000000;
background-color: #f8ffc9;
}

What’s padding? Margin? Whah!
Here’s a little run down on what the code does. Height & Width are self explanatory, padding controls how close you want the text to appear inside the box. If you want text touching the border then leave it at ’0′, however for presentation a few pixels would be better.

Margin works the same however it controls how close it is to objects outside the box. Moving onto border, this will add a 1px line around the box and this line will be colored black. Last but no least is the background color, this is a very common style used and is also self explanatory. This will fill our Box with the background color of ‘#f8ffc9′ which is a slight creamy color.

How do we get the style to display on my webpage?

Text

This calls the style called ‘Box’ and at the start it uses ID to select the style, this is because we only want to display it once. Here’s how we display the same style many times.

Text

Instead here we are using ‘Class’, you would generally find these being used on font styles.

Here’s the hardest part!… sike
That’s it! The basics and first lesson on understanding CSS. I hope that wasn’t to hard and hopefully you will all be CSS Gurus in a short time! If you have any problems or questions then please leave a comment!

Creating a main navigation

Tue, 20 Nov 2007 18:11:14 +0000

Navigations are one the most important things when doing Web Design, making them user friendly and attractive is the mission. In this tutorial you will learn how to create a simple yet attractive techy navigation.

Step 1
Create a new document, I used 400px by 400px, fill the background with a light colour or whatever you like best, we’ll be creating a dark navigation, now draw a vertical rectangle.

Step 2
Before filling the rectangle let’s add some smooth edges, go to ‘Select > modify > Smooth > 5px’ and fill it with a colour, I’ve used #383333.

Step 3
Create a new layer and once again go to ‘Select > Modify’ but this time select ‘Contract’, do something around 4-5 pixels this way the edges don’t get distorted, fill this with a lighter colour than the previous.

Step 4
Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Now use these settings for the first layer you created, this will be the border of the navigation, you should have something like this.

Step 5
Now create a rectangle with a decent size for some text to fit into, I then used a slight gradient overlay to make it more exciting than just a blank colour, then i added a 1pixel line underneath the recent created rectangle, this is to separate this from the next image, just simply duplicate this layer down till it’s full(some may need adjusting, the top and bottom because of the curving edges)

Step 6
Now it should look something like this, you can add some more blending options to the link backgrounds if you wanted, I added a inner shadow and a glow to make it look a little better, just play around and add links / images depending on your site.

Final preparations
I’m going to add some extremely basic things to the navigation such as text and maybe some images, such as ones found on tutorial websites, just to make the navigation look complete.Depending on your background of your website, some settings could need tweaking!There we go! Remember to bookmark us and re-visit for some more Photoshop Tutorials.

Create a Navigation with the pen tool

Mon, 19 Nov 2007 23:34:45 +0000

After getting the basics of web design down you’ll want to improve on your design skills and the pen tool will come into a lot of it. You can create any curve you can think of with the pen tool and I’ll show you in this tutorial how to create some pen style tabs(Navigation buttons).

Step 1
Firstly create a new document and fill the background with a light color and select the pen tool .You’ll also need to check your pen settings, once selected they are located below the ‘File’, ‘Edit’ and ‘Image’ tabs.

Step 2

Now you must start to use the pen tool and be warned at first it can be extremely stressful and you’ll want to just give up, but it’ll be worth it. In order to keep the line straight hold shift and click where you want it to start and then click where you want it to end, this will be a straight line.

Step 3

Next you want it to take more of a shape, whatever your foreground color is your tab will be. Next hold shift and click where you want your tab to end(In height).

Step 4

Creating where the curve begins and ends is the stressful part once you understand the very basics of the pen tool. You don’t want to hold shift here. Clicking slightly lower than where you curve will start is how we do this.

Step 5

Here we have to click slightly lower again but hold the click and drag it around a little to see how smooth you can make your curve. This can take some fiddling around with to perfect it.

Step 6
Now we should actually make this into a sub navigation, in this tutorial you should have learned how to use the pen tool at the very basic level. Now we’ll add some extra effects & Blending options to improve the overall presentation.

Hopefully this has helped you in understanding how to create buttons like this because I’ve not come across a tutorial which could teach it.

Thanks for reading and remember to bookmark us!