Step 1: Creating New File

We are going to start by creating a new file using Photoshop CS4. After opening Photoshop go to File >> New… or you can just use Ctrl+N. Use the settings in the image below for your new file.

Step 2: Setting Up The Background

Now lets set the background layer Blending Options to the settings in the image below for Gradient Overlay.

Step 3: Creating the Phone Body – Create The Shape Layer

So, now after the background layer is ready we can start creating the phone shape layer. Select the Rounded Rectangle Tool (U) and set shape color to Black and 20px radius of rounded corners as shown in the image below. Then draw a rectangle shape with a fixed size of 360px*560px for this tutorial, but you are free to choose the size you like for your version. Then rename your new shape layer to “phone”.

Step 4: Creating the Phone Body – Applying Layer Styles

After creating the shape layer for the phone we will have the following result. Now press Ctrl+A while your “phone” layer is selected and then choose the Move Tool (V) and then go to Layer >> Align Layers to Selection >> Vertical Centers then Horizontal Centers this will make our phone aligned to the middle of our canvas.

Now open the “phone” layer blending options and use the settings in the images below for Drop Shadow, Inner Shadow, Inner Glow, Gradient Overlay, Pattern Overlay (use the Brushed Metal Wallpaper as a pattern. Or, you can create your own Metal texture via this photoshop tutorial), and Stroke.

Importing The Brushed Metal Wallpaper as Pattern

You can create a pattern from the wallpaper by simply opening the wallpaper in Photoshop and then goto Edit >> Define Pattern… and then give it a name that you like.

If you got everything right the “phone” shape layer should look exactly as the image below.

Step 5: Creating The Phone Screen – Create The Shape Layers

We can now start creating the screen shape layers. Select the Rounded Rectangle Tool (U) and set shape color to Black and 10px radius of rounded corners as shown in the image below. Then draw a rectangle shape with a fixed size of 300px*400px. Then rename your new shape layer to “screen 1″.

Now align the “screen 1″ shape layer horizontally to the canvas as we did with phone shape layer in Step 4, but don’t align it vertically just move it vertically so that most of the lower third of the phone shape is clear. You can use the image below as a guideline.

Step 6: Creating The Phone Screen – Duplicating The Shape Layer

Now we are going to duplicate the “screen 1″ shaper layer 3 Three times by going to Layer >> Duplicate Layer… and call the new layers “screen 2″, “screen 3″ and “screen 4″.

Step 7: Creating The Phone Screen – Applying Layer Styles

Now that we have four similar screen shape layers we are going to apply styles to every layer. Select “screen 1″ shape layer and then select Blending Options and apply the settings in the images below for Inner Shadow, Gradient Overlay and Stroke.

The “screen 1″ layer should look like the image below.

Now we are going to apply styles to “screen 2″ layer. Select “screen 2″ shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity, Inner Shadow, Outer Glow and Gradient Overlay (I used the same gradient colors as in layer “screen 1″).

The “screen 2″ layer should look like the image below.

Now we are going to apply styles to “screen 3″ layer. Select “screen 3″ shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Satin.

The “screen 3″ layer should look like the image below.

Now we are going to apply styles to “screen 4″ layer. Select “screen 4″ shape layer and then select Blending Options and apply the settings in the images below for Fill Opacity and Bevel and Emboss.

The “screen 4″ layer should look like the image below.

Step 8: Creating The Phone Screen – Create Screen Light Reflection

Now let’s add a little light reflection to the screen to make it more realistic. Create the Shape layer as shown in the image below. Rename the new layer to “screen reflection”.

Select “screen reflection” shape layer and then go to Blending Options and use the settings in the images below for Fill Opacity and Gradient Overlay.

Now you should have a result similar to image below.

Step 9: Creating The Phone Navigation Dial – Create Shape Layers

Using the Ellipse Tool (U) create a circle shape with a fixed size of 85px*85px, set shape color to Black and rename the layer to “navigation 1″, duplicate the shape layer as “navigation 2″. Place the Shape layers as shown in the image below.

Step 10: Creating The Phone Navigation Dial – Applying Layer Styles

Now, select layer “navigation 1″ and then Blending Options and use the settings in the images below for Blend Mode, Bevel and Emboss, Gradient Overlay and Stroke.

Layer “navigation 1″ should look like the image below.

Now, select layer “navigation 2″ and then Blending Options and use the settings in the images below for Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke.

Layer “navigation 2″ should look like the image below.

Step 11: Creating The Phone Command Buttons – Create Shape Layers

Using the Pen Tool (P) create a shape similar to the image below, set shape color to Black, top right corner radius to 10px and rename the layer to “command 1″, duplicate the shape layer as “command 2″, “end call” and “accept call”. Place the Shape layers as shown in the image below.

Step 12: Creating The Phone Command Buttons – Apply Layer Styles

Now apply the Inner Glow, Gradient Overlay and Stroke to all four command layers as in the images below.

Now apply the Bevel and Emboss style for layers “command 1″, “end call”, “command 2″ and “accept call” as the images below consecutively.

The result should be as in the image below.

Step 13: Creating The Phone Command Buttons – Create Command Buttons Engravings

Now we finish command buttons by creating the engravings on them. Using Line Tool (U) create with a weight of 3px and a width of 30px and set layer color to Black. Duplicate the Layers 3 times and align them to each command button as in the image below.

Step 14: Creating The Phone Command Buttons – Apply Style to Engravings

Apply the Blending Options settings for all layers for Inner Shadow, and apply Blending Options settings to each layer as in the images below. Apply the red styles to the end call button engraving, green styles to the accept call button engraving and blue to “command 1″ and “command 2″ engravings.

Step 15: Creating The Phone Navigation – Create Engravings

Now using Pencil Tool (B) with a master diameter of 3px, then create a new empty layer by going to Layer >> New >> Layer… or use the shortcut Shift+Ctrl+N, and then draw a shape like the one in the image below (use Black as color). Repeat the same step on a new layer but use White as color.

Step 16: Creating The Phone Navigation – Create Engravings

Now align the two layers to “navigation 2″ layer to the center horizontally and then move the white layer one time to the bottom. Then duplicate the layers and rotate them 90 degree CW by going to Edit >> Transform >> Rotate 90 CW and repeat this 2 times, and distribute each two sets on the dial as in the image below.

Step 17: Creating The Phone Speaker

Now we are going to create the speaker using Rounded Rectangle Tool (U) with fixed width and height of 100px*8px and using the settings in the image below.

Create using the settings two shape layers call the lower layer “speaker back” and the hight layer “speaker”. Position both layers to center of the phone horizontally and at the top of the phone above the screen in the space available, just like the image below.

Step 18: Styling The Phone Speaker

Select the “speaker back” layer and open Blending Options and use the settings in the image below for Bevel and Emboss.

Select the “speaker” layer and open Blending Options and use the settings in the images below for Blend Mode, Drop Shadow, Inner Shadow, Inner Glow, Bevel and Emboss and Contour.

You should have a result like the image below.

Step 19: Creating Phone Shadow

Now, after we finished the phone we will start on making the shadow. Select the background layer (the first layer we created in this tutorial) then using Pen Tool (P) and the color Black create a shape under the phone similar to the image below with a width of about 400px, then rename the layer to “shadow”.

Now select the “shadow” layer and goto Layer >> Rasterize >> Shape, so that we can apply a filter on the shape layer. Now goto Filter >> Blur >> Gaussian Blur… and use the settings in the image below.

Applying Filters to Shape Layers

You can apply filters to Shape layers in two ways: First, by rasterizing the shape layer but in this case you lose the qualities of resizable shape layers. Second, by converting the shape layer to smart object and keep all the qualities of resizable shape layers. You can convert a shape layer to a smart object by first selecting the layer and then goto Layer >> Smart Objects >> Convert To Smart Object.

You would have the result in the image below.

Now move the “shadow” layer just like the image and set its Opacity to 60%.

Step 20: Creating Phone Reflection

Now, select and duplicate the “phone” layer select the “phone” layer again and goto Layer >> Group Layers or you can just use Ctrl+G and name the group “reflection”, move the group just under the phone like in the image below.

Now we can apply a layer mask to the group, select the “reflection” group and then goto Layer >> Layer Mask >> Reveal All, then select the Gradient Tool (G) and set gradient from Black to White and Drag from the lower third of the phone to the bottom.
You can use the below image as a guideline.

Now, if you have followed the tutorial step by step then you should have a result similar to the final image below (Click on the image for the full resolution image).

Here is how the html looks like for each of dropdown menu:

<div id="container">

 <!-- First Menu Start -->
  <ul>
  <li><a href="#">Menu One</a></li>

 <li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

 </ul>
  <!-- First Menu End -->

 <!-- Second Menu Start -->
  <ul>
  <li><a href="#">Menu Two</a></li>

 <li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

 </ul>
  <!-- Second Menu End -->

 <!-- and so on -->

 </div>

As can be seen, we are going to use the unordered lists for our dropdown menu. Each menu link is given a class of dropdown and dropdown itself has been wrapped in a list with class of sublinks. These class names will be utilized by jQuery to decide which menu to show.

Here is the CSS for the dropdown menu:

/* CSS For Dropdown Menu Start */
  ul
  {
  list-style:none;
  padding:0px;
  margin:0px
  }

ul li
  {
  display:inline;
  float:left;
  }

ul li a
  {
  color:#ffffff;
  background:#990E00;
  margin-right:5px;
  font-weight:bold;
  font-size:12px;
  font-family:verdana;
  text-decoration:none;
  display:block;
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #560E00;
  }

ul li a:hover
  {
  color:#cccccc;
  background:#560E00;
  font-weight:bold;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border: 1px solid #000000;
  }

ul li.sublinks a
  {
  color:#000000;
  background:#f6f6f6;
  border-bottom:1px solid #cccccc;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  margin-top:2px;
  }

ul li.sublinks a:hover
  {
  color:#000000;
  background:#FFEFC6;
  font-weight:normal;
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  }

ul li.sublinks
  {
  display:none;
  }

/* CSS For Dropdown Menu End */

Most of the CSS is there for styling the menu (although you can style it even better if you want) but here are some of the important things to note in that CSS:

1 - We remove the bullets from lists using list-style:none;

2 - We know that lists are block-level elements and always appear vertically. In order to make it appear horizontally, we make them inline elements and float them to left with:

display:inline;
float:left;

3 - The links by default are inline elements, we make them block-level elements with display:block; so that we could apply a width to them.

4 - Initially we hide all dropdown menus with:

ul li.sublinks
{
display:none;
}

Imagine the old days, creating the dropdown menu with raw javascript, well a lot of code ! but this is all we need with jQuery:

$(function(){
  $('.dropdown').mouseenter(function(){
  $('.sublinks').stop(false, true).hide();

 var submenu = $(this).parent().next();

 submenu.css({
  position:'absolute',
  top: $(this).offset().top + $(this).height() + 'px',
  left: $(this).offset().left + 'px',
  zIndex:1000
  });

 submenu.stop().slideDown(300);

 submenu.mouseleave(function(){
  $(this).slideUp(300);
  });
  });
  });

Pretty easy stuff there actually, let me explain how. First and as usual, we wrap our code in jQuery’s ready handler:

$(function(){
...
});

We run our code when mouse enters (mouseenter method) an element with class set to dropdown ($('.dropdown')), the menu link in our case:

$(function(){
$('.dropdown').mouseenter(function(){
........
});
});

We make sure that we hide (hide()) all previously open dropdowns when mouse enters a menu link:

$('.sublinks').stop(false, true).hide();

Note the stop function there, it helps us to show only one dropdown at a time when mouse is quickly hovered over various menu links. If we did not use it, each dropdown menu will remain visible unless we move our mouse arrow away explicitly. That is basically known as queue buildup so we avoid that with stop function there.
We then grab the actual dropdown menu to be shown with and store in into a variable:

var submenu = $(this).parent().next();

If you look at the html:

<!-- First Menu Start -->
  <ul>
  <li><a href="#">Menu One</a></li>

 <li>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  </li>

</ul>
  <!-- First Menu End -->

When a link with class dropdown is hovered, we move back with parent() ending at <li> and then with next(), we reach at our desired dropdown menu, <li> with class sublinks. So this is basically how jQuery makes it easy for us to find which dropdown to show when a particular menu link is hovered upon.

After that, we apply some CSS to the dropdown so that it appears exactly below the hovered menu link:

submenu.css({
position:'absolute',
top: $(this).offset().top + $(this).height() + 'px',
left: $(this).offset().left + 'px',
zIndex:1000
});

That code is very important as it makes sure that dropdown appears exactly below the hovered menu link. With position set to absolute, we can position the element at any place on the document independently. We then get the top position of the hovered menu link with $(this).offset().top (this refers to current hovered menu link) and add to it the height of it so that dropdown appears exactly below that link. We do something similar for the left property. We then use the z-index property to make sure that dropdown appears over everything else.

And then we show the dropdown while sliding it down with slideDown at the speed of 300 millseconds with:

submenu.stop().slideDown(300);

Of course, you could have used other methods of animation such as fadeIn, animate with custom animation styles.

Now this far it was about to show the dropdown. It is time to hide it when the mouse leaves it. We do so with this piece of code:

submenu.mouseleave(function(){
$(this).slideUp(300);
});

To hide the dropdown, we use slideUp, the opposite of slideDown. Note that submenu is a variable we had created earlier to denote the dropdown.

So that was all there is to creating a single-level dropdown menu with jQuery.

01. How to Create a Curious Owl

In this tutorial you’ll learn how to create a little owl illustration with non-spooky scene set at dusk, with a curious owl sitting on a branch and some scenery in the background.

Tutorial Link

02. Create a Cool Vector Panda Character in Illustrator

Adobe Illustrator is my favourite tool for creating fun and cute character designs. With just a few simple shapes, a mix of gradient colours and a few shadows here and there you can build some great looking illustrations. Here’s a step by step walkthrough of the process used to create a cool Panda character, from the basic outlines through to the detailed final design.

Tutorial Link

03. Create A Cute Creature Character From A Sketch

In this tutorial you can leant how to create a cute creature from a sketch. This tutorial uses custom brushes, the Paintbrush tool, Pen tool, and the Live Paint Bucket tool. Even if your not a huge fan of the cuteness, you can use these techniques for other illustrations, logos, and vector elements.

Tutorial Link

04. Create a Owl using Dynamic Gradient Techniques

Many works that look complicated are really made from simple elements. In this tutorial, Russian artist Alexandra Zutto shows how to build up complex, beautiful images by patiently layering and building up small, straightforward segments, always varying them to prevent monotony.

Tutorial Link

05. Create the face of a goofy bunny

The following tutorial will help you create the face of a goofy bunny. You won’t need the Pen Tool. Only the Ellipse Tool and the Rectangle Tool plus some basic effects like the Inner Glow, the Drop Shadow or the Warp effect.

Tutorial Link

06. How to Design a Cheeky Koala Mascot Head

This tutorial will show you how to combine basic shapes with some clever coloring and blending to make a fantastic looking koala character using some opacity masks, brushes, gradients and effects, in addition to an easy shading technique you’ll find yourself using in plenty of other projects.

Tutorial Link

07. Cartoon Character – Dexter

Dexter is probably one of those cartoon characters that don’t need an introduction, but anyway, for those who never heard about him, Dexter is boy genius that has a giant secret laboratory filled with his great inventions. In this simple tutorial you will see how to draw this character inside Adobe Illustrator.

Tutorial Link

08. How to Make an Attractive Vector Butterfly

In this tutorial you all will learn how to make a vector butterfly using the blending mode from transparency box and the gradient mesh. The techniques shown in this tutorial will help you make shades on objects and liquid transition of colors.

Tutorial Link

09. Create the face of a greedy monkey

This tutorial will help you create a simple illustration of a monkey face. It uses the Ellipse Tool, the Pen Tool, the Rectangle Tool, the Crystallize Tool or the Gradient Tool. For the the shadow effects you’ll use some classic effects like the Inner Glow or the Gaussian Blur.

Tutorial Link

10. Create Lady Bugs Insect Tutorial

Lady bugs are probably one of the cutest and most illustrated insects; that is when they aren’t swarming you. This tutorial from Tutorial Lounge demonstrates how to draw a vector lady bug in Illustrator using some easy to use illustration techniques.

Tutorial Link

11. How to Create a Cool Monkey Character in Illustrator

In this tutorial, we’re going to be creating a monkey character illustration using Adobe Illustrator. You’ll be using basic Shape Tools, the Pen Tool and various other Illustrator techniques to create the illustration.

Tutorial Link

12. Create a Cute Little Tiger in Illustrator

The tiger is one of the coolest animals in the earth. It’s a very powerful, dangerous, yet fascinating animal. In this tutorial, we will be drawing the tiger, but we will be doing it a little bit different. Instead of portraying the tiger as a savage and mean creature, Here you will learn how to draw a cute little tiger that you will be able to use in your projects, as a desktop wallpaper, etc. You will also learn lots of Illustrator techniques as well.

Tutorial Link

13. Create a student character mascot with Adobe Illustrator

This is an intermediate Illustrator tutorial level where you can learn how to create a vector student character mascot from a sketch in Adobe Illustrator. The techniques can easily be applied to other character design, illustrations or icons.

Tutorial Link

14. Design a Cute Hamster Avatar

In this tutorial you all going to learn how to create this cute little Hamster Avatar character with the help of illustrator.

Tutorial Link

15. How To Draw A Funny Cop Illustration From A Sketch

Cops or Police Officers, their mission is to keep the peace and order around us. No one can escape from their batons. In this tutorial you will see how to draw a funny cop illustration from a sketch. This tutorial requires intermediate knowledge of Adobe Illustrator and advanced pen drawing skills.

Tutorial Link

16. How to Draw a Cartoon Duck

This tutorial will take you through basic shapes , using basic tools ie pathfinder , knife and eyedropper tools to create a cute duck character. Following this tutorial you can draw a step by step illustrated vector tutorial file which will help you to actually look at how it is done!

Tutorial Link

17. Draw a beautiful female character

Office life is very boring, what keeps us alive in our offices? You’re right, those hot and strict secretaries. This simple tutorial shows you how to create a beautiful female character using Illustrator.

Tutorial Link

18. How To Create a Cute and Cuddly Vector Dinosaur

this tutorial will help your Adobe Illustrator skills, and help you relax, have some fun, and give you very good overview about how to create a cute and cuddly vector dinosaur in illustrator.

Tutorial Link

19. Design a Fun Invoice Template

If you are a designer then your invoices need not to be boring! Follow this tutorial to set up a fun yet professional-looking invoice template using Adobe Illustrator and InDesign.

Tutorial Link

20. Using InDesign to Create a Designer Resume

In this tutorial, we’ll explain how to create a resume with InDesign using paragraph styles and a grid. We’ll walk you through each step in creating this resume and introduce you to some tools and the use of styles.

Tutorial Link

21. How to Create a Shiny, Vector Laptop

In this tutorial you all will see how to create a laptop in Illustrator using basic tools like the Rectangle Tool, Ellipse Tool, Pen Tool and others. We’ll construct the overall shape, keyboard, laptop monitor, and more.

Tutorial Link

22. Create A Mouthwatering Chocolate Covered Strawberry

This is very testy tutorial where we will see how to create a chocolate covered strawberry illustration. You can easily apply this illustration to your own greeting card, t-shirt, or anything else you can think of. Moreover, you can apply this tutorial to other illustrations and logos.

Tutorial Link

23. How to make Necklace in Adobe Illustrator

In this tutorial you will learn how to make necklace in Adobe Illustrator and you will also learn that how to make Pearl effect.

Tutorial Link

24. Create An Awesome Space Rocket Avatar

What? You still don’t have your own avatar? Remedy this situation immediately with this tutorial where you’ll learn how to draw a shiny, awesome-looking space rocket in Adobe Illustrator using advanced techniques such as gradient meshes, pattern brushes and opacity masks. We will then add a flare, smoke, clouds and sky to complete a fun illustration.

Tutorial Link

25. Create a Candy Inspired Vector Snowboard Design

Learn how to put together a sweet candy inspired design in Illustrator by cutting, splitting and joining vector paths to produce an intricate weave of shapes. We’ll then add some finishing touches with subtle shading and a cool striped overlay to add depth to the design. The final concept will them be ready for being mocked up as a custom snowboard design.

Tutorial Link

26. Illustrator Tutorial: Vector Handphone

In this tutorial, you will see how to draw a vector mobile phone by using simple shapes and gradients. By the looks, it seems like similar to Nokia 6300.

Tutorial Link

27. How To Create a Sleek DVD Player

In this tutorial you will see how to make an Interactive DVD player in Illustrator. To reach the final result we will use the instrument Rounded Rectangle Tool, the option 3D > Extrude & Bevel and the Map Art option.

Tutorial Link

28. How to Draw a USB Flash Drive

USB flash drive, they are now everywhere, slowly replacing compact disks. In this tutorial, I will show you how to draw an USB flash drive in Illustrator. Advanced Illustrator skills needed.

Tutorial Link

29. How to Illustrate a Professional Looking Apple iPad

In this tutorial we will learn how to make a realistic looking illustration of an Apple iPad using the Rounded Corner Rectangle, Gradient Mesh and Gradient Tool. Don’t let the professional finish fool you; this tutorial is perfect for beginners and experts alike.

Tutorial Link

30. How to Make Super-Sharp, Vector Swords

In this tutorial we will see how to draw a sword in Illustrator, using the Rectangle Tool, gradients, and other Illustrator tools. Actually the tutorial isn’t very hard, let’s see the final result that is our goal first!

Tutorial Link

31. Create an illustration of a fountain pen

In this first tutorial you’ll learn to create an illustration of a fountain pen. It is more of an advanced tutorial. Hopefully you’ll understand the exact steps author followed to reach this final illustration.

Tutorial Link

32. How to Create an Elegant, Vector Pen in Illustrator

In this tutorial, you will see how to draw a vector pen, in an elegant box using Illustrator. We’ll pull out the Pen Tool, Rectangle Tool, and gradients in this one. Let’s see the final result which is our goal.

Tutorial Link

33. How to Create Realistic, Vector Bubbles

His Majesty the Bubble! In this tutorial we will learn how to create realistic colorful bubbles. We’ll cover numerous techniques and build this illustrations step by step. Set aside a couple hours for this one!

Tutorial Link

34. create a 6-egg box

In this tutorial you will learn how to create a 6-egg box (full of eggs). We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

Tutorial Link

35. Draw a Glowing, Vector Pocket Watch

In this tutorial you will learn how to draw the front and the back side of a pocket watch from scratch. This tutorial is detailed and by the end you will know how to draw all kinds of shapes, like cog-wheels and small screws. You’ll learn to create the scatter brushes used for the designs on the watch and how to use some of the existing patterns and gradients in Illustrator’s library to your advantage.

Tutorial Link

36. How to draw a delicious Burger

A burger, the king of fast foods! Who doesn’t like burgers? Everyone does! For those designers that are hungry a new tutorial, how to draw a burger in Adobe Illustrator.

Tutorial Link

37. Creating a Toaster-Popping Illustration

With this tutorial, learn how to apply some effects not often used in Illustrator, like the Chrome effect, which is used to create metallic look with a realistic aspect. Also, notable in this tutorial is the use of Texturizer to create toast texture. We will also use 3D effect and the Mesh tool, which bring depth to the this illustration.

Tutorial Link

38. Geometric Flower Effect Logo in Illustrator

This is an Illustrator tutorial that explains how author made this nice logo for one of his clients in Czech Republic. Feel free to use it as inspiration, but please do not copy it in any form. All copyrights belong to the owner. Last but not least, please excuse Czech language appearing in the dialog boxes on pictures; author use a localized version of illustrator.

Tutorial Link

39. Create a Tasty Burger Icon in Illustrator

In this delicious tutorial you all going to see how to create a three-dimensional, scrumptious burger using Adobe Illustrator. Remember that I’m a vegetarian, so you should definitely appreciate the effort!

Tutorial Link

40. Create a simple paperclip icon

This is a really fast tutorial. In only seven steps you’ll learn to make a paperclip icon. You will only need the Rounded Rectangle Tool, the Direct Selection Tool and the Gradient Tool. Also you might learn some basic stuff about working with grids and strokes.

Tutorial Link

41. Design a Stylish Wallet Icon

In this simple tutorial you will see how to create the wallet icon from my Women’s Icons using Adobe Illustrator CS4.

Tutorial Link

42. Create a Stylized First Aid Icon

In this tutorial we’ll use a combination of craft and Illustrator’s 3D tools to create a first aid icon. You can use the techniques you learn in this tutorial to create realistic rounded box icons of your choice. This works well for complex icons at large sizes and scales down nicely.

Tutorial Link

43. Abduzeedo 2010 Logo Design

In this tutorial/case study you will see how author created the symbol and what the inspiration behind it was. We will use Adobe Illustrator for the tutorial.

Tutorial Link

44. Create a classic calendar icon

In this tutorial you’ll learn to create a classic calendar icon. It’s a pretty simple and fast tutorial. You only need to know how to use the basic tools and some effects like the Inner Glow, the Drop Shadow, the Transform effect, the Rounded Corners effect or the Warp effect.

Tutorial Link

45. Create A Briefcase Icon

In this tutorial, we will see how to create a briefcase icon with rectangles, ellipses, and gradients. This briefcase icon is great for web designs and user interfaces. Moreover, you can easily apply these techniques to other icons, logos, and illustrations.

Tutorial Link

46. Create a Metallic Star in Illustrator

This tutorial will show a technique to create a segmented star that, when gradient fills are applied, takes on a basic metallic appearance. A future tutorial will take these same techniques and elaborate on them to create a more realistic looking star… if you think that’s possible.

Tutorial Link

47. Create a documents icon

In this tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool. The Drop Shadow, the Warp effects or the Clipping Mask will help you create some discrete details.

Tutorial Link

48. Create Character Driven Book Cover Art

In this two part tutorial on creating the “Let’s Go To Monster School!” book cover, We will see a complete process from initial sketch to the final artwork, using an Illustrator to Photoshop integrated workflow. In Part 1 we will employ Illustrator to trace our hand drawn sketch, lay down the shapes and define the basic colors. In Part 2, we’ll take the vector drawing into Photoshop, where we will refine the shading, add some textures and complete the book cover with the appropriate typography.

Tutorial Link

49. Explore new-folk illustration styles

In this tutorial you’ll learn how to combine, merge, and manipulate ships in Illustrator to create an intricate illustration based on a Russian doll.

Tutorial Link

50. How to Make an Inspired, Golden Painting

In this tutorial we will travel back in time to recreate the painting style of one of the most outstanding symbolism artists – Gustav Klimt. His works are full of warm golden colors, simple ornaments, irregular patterns, natural symbols, and asymmetric shapes. We will work to produce this style with the help of Adobe Illustrator tools.

Tutorial Link

51. Simple Beer Label Tutorial

In This tutorial we’ll see how to create a simple beer lable tutorial using some simple techniques like drwaing, shading, inner glow, the rounded corners effect etc.

Tutorial Link

52. How to Make a Map in Illustrator

In this tutorial you will see how to make a nice little map using illustrator. The author of this tutorial was called to make a map for the university which was tedious but still fun. This can also be a neat little add-on to a party invitation or the like. First and most importantly turn on some music! Some Armin van Buuren thumping in the background helps the creative process.

Tutorial Link

53. How to Create a Cubist Masterpiece in Illustrator

Cubism is one of the most outstanding movements in abstract art. Geometric shapes, vivid colors, simple figures, and textures are all distinctive features of this style. Let’s try to recreate the cubist painting in Illustrator inspired by works of Pablo Picasso – after learning some simple techniques you’ll be able to easily paint your own cubist composition.

Tutorial Link

54. make watercolor and marker style portraits with illustrator

With this tutorial, we are going to work through ways of creating digital portrait illustrations that have a unique and somewhat tactile feel of marker and watercolor. This tutorial will focus on using a drawing tablet and Adobe Illustrator. There will be a focus on technique and technical settings, but the overall product will rely on your own personal style and taste.

Tutorial Link

55. Dot Matrix Effect

Here is a technique for creating dot matrix style images which is helpful for learning about selection tools and the basics in Illustrator. First you will create an LED display and then make a simple mosaic landscape.

Tutorial Link

56. How to Create a Cute Vector Bear T-Shirt Design

One of the great things about designing with vector shapes is that any design, especially characters, can be developed out of basic shapes, giving a simple and stylized style. Let’s get busy with Adobe Illustrator and design a cute bear character and surrounding scenery in just two colours, ready for use as a cool t-shirt design.

Tutorial Link

57. How to make a shiny transparent 3D graph in Illustrator

In this tutorial you all going to learn how to make a simple graphic become a graphic art.

Tutorial Link

58. How To Create Outstanding Modern Infographics

Merge form and function to create outstanding modern infographics. In this tutorial you will learn that data doesn’t have to be boring, it can be beautiful! Learn how to use various graph tools, illustration techniques and typography to make an accurate and inspiring infographic.

Tutorial Link

59. Design a character for a T-shirt print

Character creation is a personal thing. Anyone can doodle stick drawings and scrappy characters, but armed with an insider’s knowledge of cracking character design, you can breathe life into any design. For this tutorial, Ben the Illustrator reveals the process he goes through to create one of his famed characters – and he has created a special character just for Digital Arts readers.

Tutorial Link

60. How to Create a Vintage Ocean Liner Poster

The period between the end of the 19th century and World War II is considered the golden age of the ocean liner. In this tutorial we’ll be starting with a basic sketch of an ocean liner author drew up. Of course author encourage everybody to create their own sketch. If you do decide to use your own drawing, you might want to alter or skip a few of the steps. In this tutorial we’re going to create a vintage ocean liner poster. The main tools you’ll get to know in this tutorial are the Pathfinder and the Transform Effect.

Tutorial Link

61. An Illustrator’s Project: From Start to Finish

In this tutorial, We’ll walk through the steps of how to create an illustration art piece so that you can witness what goes behind a digital illustrator’s work, as well as gain some new insights for your own projects’ workflow. We’ll go through conceptualization and idea gathering, creating illustrations in Illustrator, and then finishing the piece in Photoshop.

Tutorial Link

62. How to Create a Vector Optical Illusion

In this tutorial we’ll learn to create three types of optical illusions. Learn how easy it is to fool our brains. You’ll not believe there is no curved lines on the chessboard.

Tutorial Link

63. Create a Fun Print-Ready Doodled Business Card Design

There’s nothing more unique to your creative talent than a series of your own doodles and sketches. Let’s use the good old doodle to represent our design services by combining quick and fun doodles with a print ready business card design. We’ll be drawing our doodles directly in Illustrator, and using the application’s print abilities to set up our business card document with the correct margins and bleed to build a complete print-ready PDF document.

Tutorial Link

64. How to create a Typeface Character

In this tutorial author started a character design project that merges typefaces into unique monsters, cute animals, and various other font inspired character creations. The method is simple, Author take different sections of the characters of a specific font and he put them together, giving birth to different kinds of creatures. The interesting thing about Typefaces is that each font gives a different aspects to the characters. That is the essence of Typefaces, Faces with Type. Learn the basics of how to create these fun characters!

Tutorial Link

65. Lego Bricks Typeface

The well-known LEGO plastic parts offer endless possibilities to create all types of objects. This tutorial will show you how to digitalize your toys and build a logotype for your favorite website without running out of bricks.

Tutorial Link

66. Create a folded paper text effect

This is an Illustrator tutorial that explains how to create a simple folded paper text effect. Also, to improve the look of the final result, Author will show you how to create some ink blobs and stains from some simple ellipses and brushes.

Tutorial Link

67. Shakespeare Text Illustration Tutorial

Author created this text illustration of the ‘Bard’ as an ironic play on the idea of making pictures out of words. Something Shakespeare is one of the best at.

Tutorial Link

68. Retro 3D Arcade Text Effect in Illustrator

In this tutorial we’ll make clever use of Illustrators built in 3D capabilities, gradients and opacity masks to design a Retro 3D Type Effect.

Tutorial Link

69. Create An Editable Stitched Label Type Treatment

In this tutorial you going to learn how to create a stitched label type. This tutorial relies heavily on the Appearance panel, making it easy to edit the text and apply the treatment to other fonts and vector elements.

Tutorial Link

70. Create An Editable Metal Type Treatment

The writer of this tutorial is a huge fan of the updated Appearance panel in the Illustrator CS4. He have really found the Appearance panel to be useful when creating type treatments that he constantly need to r epeat. One of these styles is a metal type treatment. This tutorial is pretty similar to the Letterpress Font and Sketchy Font tutorials in that it uses the Appearance panel to create a type treatment that is fully editable when it is done.

Tutorial Link

71. Create a Grimy Text Treatment with a Pen Tablet

This is an Illustrator tutorial that explains how to create a grimy text treatment utilizing Illustrator’s Blog brush, Live Paint, and a pen tablet. You can easily apply these techniques to other illustrates, type treatments and logos.

Tutorial Link

72. Create quirky repeating patterns

In this tutorial you will see how to make a repeat pattern based on map-like imagery. Author uses simple shapes and icons to illustrate geographical features from a bird’s-eye point of view similar to those used in OS maps.

Tutorial Link

73. How to create a baroque pattern in Illustrator

In this tutorial we will see how to create a decorative pattern in Illustrator starting from a sketch. The process is really easy to follow. You’ll need only 10 steps to create a baroque stylished pattern.

Tutorial Link

74. How to create funny swirls

This is an Illustrator tutorial that explains how to create decorative swirls that can be easily integrated in your works. The creative process is easy to follow and the result is a vivid, outstanding image.

Tutorial Link

75. 3D prototype mock up in Adobe Illustrator

This tutorial shows you how to use Adobe Illustrators 3D feature to mock up prototypes. For this example we will be mocking up a label for a pill container but the techniques used can work for many things including box packaging.

Tutorial Link

76. Japanese Sushi

This tutorial will teach you how to create a plate of yummy Japanese sushi in illustrator. Sounds like a lot of work, but I will show you how to make the details like the rice, the spawn and the sesame seeds easily just using Symbols. This technique will speed up the process of your work. Hope you enjoy this tutorial.

Tutorial Link

77. Learn gorgeous new shading skills

In this tutorial, Yuta Onoda shows how you can transform a pencil sketch into a gorgeous, textured digital artwork using layer masks and blending modes. You’ll also learn how to add realism to your artwork by faking print offsets and paint spatters.

Tutorial Link

78. Envelope Distort

Ever wanted to wrap some text inside a shape? The way you do it is with Illustrators handy “Envelope Distort” which can produce some very creative and exciting shapes to make your designs that extra bit special!

Tutorial Link

01. Horizontal Centering

To horizontally center block level elements in CSS you need three things. You need to explicitly set a width on the element, set the left and right margins to auto, and include a proper doctype to keep older versions of IE from going into quirks mode.

div#page {width: 960px; margin: 0 auto}

The above will center the div with an id of page inside it’s parent container.

02. Vertical Centering Text with Line-Height

If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the height of the containing block

The HTML:

some text here

The CSS:

div#container {height: 35px; line-height: 35px}

03. Vertical Centering Block Level Elements

Positioning can be used to vertically center block level elements.

The HTML:

your content here

The CSS:

div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top margin equal to half the height of the div.

This same trick works for horizontal centering as well. Change top to left and margin-top to margin-left and set the negative margin to be half of the width of the element.

div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}

The above CSS will center the element both vertically and horizontally.

04. Fluid Images

To create fluid images set a max-width on the images to be 100%

img {max-width: 100%}

Unfortunately IE doesn’t do max-width. However IE treats the width property as though it was max-width. For IE use a conditional comment and set

img {width: 100%}

For a more details about creating fluid images in older versions of IE click the link above.

05. 3D Buttons with CSS Only

3D CSS buttons are easy to create. The trick is to give your elements borders with different colors. Lighter where the light source shines and darker where it doesn’t.

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

The CSS above will create a button with the light source at the upper left. Usually one or two shades of color change is all that’s needed, but you can experiment for different effects.

06. CSS Font Shorthand

When using shorthand on the font property you need to specify each property in the following order

body { font: font-style font-variant font-weight font-size line-height font-family; }

You don’t need to include every property, but know that for any you don’t include that property will be reset to it’s default.

07. Setting Multiple Classes on an HTML Element

Easy and easy to forget the proper syntax. If you want to set multiple classes on an html element it should look like:

with all class names inside the same set of double quotes with a space between each. The CSS specificity is controlled by the order of the classes in your CSS file. If your CSS has:

class-2 {color: blue}
class-3 {color: green}
class-1 {color: red}

then text inside the div will be red as class-1 is the last declared in the CSS. The order the classes appear in the html is irrelevant.

08. Rounded Corners

When CSS3 is fully supported across browsers rounded corners will be as simple as:

.element {border-radius: 5px}

which will set a 5px radius on all 4 corners. For now we need some browser specific CSS combined with a little JavaScript to make this work in all browsers.

In Safari, Chrome, and other webkit browsers we use -webkit-border-radius and in Firefox and other Mozilla based browsers we use -moz-border-radius.

.element {
	border-radius: 5px
	-webkit-border-radius: 5px
	-moz-border-radius: 5px
}

Webkit and Mozilla use different syntax when specifying one corner.

.element {
	border-top-left-radius: 5px
	-webkit-border-top-left-radius: 5px
	-moz-border-radius-top-left
}

For non Webkit and Mozilla browsers a little jQuery plugin will mimic the border-radius property.

$(".element").corner("5px");

The jQuery corner plugin allows for more than setting the radius of the corner. You can also set the corner to show as a number of other patterns.

09. Link Style Order

When setting CSS on the different link states, the link states need to be set in a particular order

a:link
a:visited
a:hover
a:active

An easy way to remember is LoVe HAte. LVHA – Link, Visited, Hover, Active.

10. Clearing and Containing Floats

There are two basic methods to clearing CSS floats. The first is to use the clear property

Say in the above html you have your content and sidebar div floated to the left and you want to ensure the footer div sits below both. You would use the clear property

#content {float: left}
#sidebar {float: left}
#footer {clear: both}

You could also use clear: left or clear: right depending on which way the content and sidebar are floated.

If on the other hand your html was:

and both the logo and tagline are floated, your header div will collapse and show as having 0 height. You can either add an empty div (<div class="clear"></div>) and then clear the empty div as above or you can use the overflow property on the header div to contain the floated elements

div#header {overflow: hidden}

The above will keep the header div from collapsing even if everything inside has been floated.

11. Conditional Comments

Conditional comments are an ideal way to target IE browsers only, since IE is often the browser that won’t cooperate. The basic form of a conditional comments is:

The above will load an IE specific stylesheet only when the browser viewing the page is Internet Explorer. You can further target specific versions of IE.

You can specify any version of Internet Explorer and through a combination of conditional comments you can server different CSS styles to different versions of IE.

12. HTML Hack for IE

Another way to target IE specifically is to use the HTML * hack. Internet Explorer allows you to use something other than the html element as the root of your document. By placing an * in front of html in your CSS (*html) you can target IE only as other browsers will ignore the declaration.

div#content {width: 580px}
* html body div#content {width: 600px}

IE will use 600px for the width of the content div, while other browsers use 580px.

The above works for IE6 and below. When not in standards mode, but in quirks mode this will work on IE7 as well. You can also target IE7 (in quirks mode) specifically with

*+html body div#content {width: 620px}

13. CSS Specificity

When two or more CSS selectors are sending conflicting instructions to a single html element, a choice must be made as to which styles to apply. This is done through CSS specificity calculations and is expressed in the form of (a.b,c,d)

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

In the following examples the specificity increases as you move down

p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

14. min-height fix for IE

Sadly IE still doesn’t comply with min-height. However it does treat the height property as though it was min-height. Knowing that, we can sort of get min-height working in Internet Explorer.

.element {
	min-height: 500px
	height: auto !important
	height: 500px
}

The first line above sets the min-height for non-IE browsers. The last line essentially sets min-height in IE as IE will treat height as we expect it to treat min-height. The middle line above is to ensure that non-IE browsers don’t use 500px as the height of the element. Using !important will override the height declaration below in all browsers, except IE.

Another way to target IE only is to use _height. Only IE6 will treat _height as height. All other browsers will ignore it. You have to specify _height after any height declaration as IE will use whichever comes last.

.element {
	min-height: 500px
	_height: 500px
}

15. Base Font-Size

Using fluid measurements like 'em' or % on your fonts is a great way to help create more fluid designs. It can be a pain though to calculate ‘em’s for every different element. A simple trick is to set your base font to be the equivalent of 10px. Since the default font-size of browsers is 16px you can set a base font-size with the following:

body {font-size:62.5%}

10/16 = 62.5%

Now if you want your h1 to be 24 px the calculation is much easier

h1 {font-size: 2.4 em}

16. 100% Height

100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%

html, body {height: 100%}

We need to add one more thing. If your content exceeds 100% height then it will overflow its container. To correct this we’d need to set min-height on the content’s container

#content {min-height: 100%}

You can use one of the methods above for serving min-height to IE.

17. CSS Drop Caps

Drop Caps can easily be styled by taking advantage of the CSS pseudo-element :first-letter.

p:first-letter {
	display: block;
	float: left;
	margin: 5px 5px 0 0;
	color: red
	font-size: 1.4em;
	background: #ddd;
	font-family: Helvetica;
}

This should work in all modern browsers. CSS3 introduces the ::first-letter notation to distinguish between pseudo-elements and pseudo-classes, but this new notation is not yet compatible with IE. For now use the single :first-letter notation.

18. Remove Dotted Outline on Links

Easy with the CSS outline property

a {outline: none} or a {outline: 0}

The outline is useful for accessibility so think twice before turning it off completely. You may only want to set it for one of the specific link states mentioned above.

19. Text-transform

Through the CSS text-transform property you can make sure certain blocks of text are either uppercase, lowercase, or only the first letter of each word is uppercase

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

20. Font Variant

Another trick with type is to use the font-variant property to create small caps

p {font-variant: small-caps}

If the font you’re working with doesn’t have a small caps variation, know you’ll be creating pseudo small caps, which may or may not look as good as you’d like.

21. Removing the Border from Image Links

By default any image that is wrapped in a link will have a border around the image (similar to the way text is underlined). Removing the border is simple

a image {border: none} or a image {border: 0}

Since I never want to see the border around image links I usually set the above on every site I develop.

22. Using a CSS Reset for Cross-Browser Compatibility

One of the issues in cross-browser web development is that different browsers use different default values for various CSS properties. By explicitly setting a property like margin to be 0 for certain html elements we can assure that the margin will be 0 on that element in all browsers.

The best way to do that is to use a CSS reset file like the ones developed by Eric Meyer or Yahoo or you can develop your own.

Using a CSS reset ensure that all browsers are on the same page so to speak.

23. Setting Padding on Background Images

Since background images don’t create a new CSS box you can’t directly set padding on them. What you want to do is use the background-position property on the background image to create the same effect.

background-position {top-value left-value}

Top values can be top, center, or bottom and Left values can be left, center, or bottom

Both can also take values in % or px or any other measurement. So to create 5px of padding around a background image you would use:

{background-position: 5px 5px}

24. Stretching a Background Image

To create a background image that can expand and contract with it’s containing element you want to create an image larger than needed, large enough to accommodate the largest possible size of the containing element. Then use the background-position property to center the background image

{background-position: 50% 50%}

The above will center your background image in the containing element. The image will grow and shrink to fit the size of the containing element and always be centered. You’ll want to make sure the center of the image contains the most important part of the image since only the center is guaranteed to visibly show.

25. Wrap Links Around a Background Image

Again since a background image doesn’t create a new CSS box you can’t directly wrap a link around it. You can either wrap the link around the containing element or wrap the link around all the content inside the containing element.

your content here






your content here

Either of the above will essentially let someone click your background image as though it were a link.

26. Background Images as List Bullets

Sometimes it’s nice to be able to use an image as a bullet instead of one of the supported list-style-types.

ul {list-style: none}
ul li {
	background-image: url("path-to-your-image");
	background-repeat: none;
	background-position: 0 0.5em;
}

27. Swap Background Images on Hover

There are two very similar ways to achieve this. The key in both is to use the :hover pseudo-class to change either the url of the image or the position of an image sprite

.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}

.element {background-position: top-value left-value}
.element:hover {background-position: different-top-value different-left-value}

Unfortunately IE only accepts :hover on a link and not another element. You can use something like the suckerfish system to dynamically add a class for IE and simulate the :hover behavior.

28. Visibility or Display?

On the surface both the CSS visibility and display properties seem to do the same thing, hide or show an element on the page. Beneath the surface they work differently.

• {visibility: hidden} – The element holds the space, but isn’t seen
• {display: none} – The element does not hold space. Other elements collapse to fill the space

Most of the time you likely want to use display: none, unless your goal is to leave an empty open space on your page.

29. Cross-Browser Transparency

Not all browsers currently support the CSS3 opacity property. However we can still make transparency work across browsers.

.element {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

From the bottom up:

opacity is the CSS standard and will work in current Webkit and Mozilla browsers as well as Opera

• -moz-opacity is for older versions of Mozilla Browsers
• -khtml-opacity is for older versions of Safari and any browser using the khtml rendering engine
• filter:alpha(opacity=50) is for Internet Explorer

30. Target IE7 (and below) and IE6 (specifically) without Conditional Comments

We all know how difficult IE can sometimes be when it comes to CSS. However instead of cursing IE under your breath or out loud you can easily write IE specific code that other browsers will ignore. My own preference is for conditional comments, but here’s a quick trick you can use in your main CSS file.

.element {
	background: red; /* modern browsers */
	*background: green; /* IE 7 and below */
	_background: blue; /* IE6 exclusively */
}

With the exception of IE, all browsers will ignore the asterisk in front of the property. Everything other than IE6 will ignore the underscore. The order of the above properties is very important due to CSS precedence rules.

31. nth-child

The nth-child CSS pseudo-selectors allow you to target the 3rd or 7th or nth element in a list. Another use would be to style odd and even rows in a table differently. The alternative is to add a class specifically to the list-item you want to style differently, but that’s not very flexible. The nth-child syntax looks like this:

ul li:nth-child(3) {
	background: blue
}

The above would select the 3rd item in the list and give it a blue background

ul li:nth-child(3n+3) {
	background: blue
}

Similarly the code above would style every 3rd list item with a blue background

Unfortunately no current version of IE supports it. However there is a way to simulate the 1st bit of code above for IE7 and IE8.

ul > li:nth-child(3) is the same as ul > *:first-child + * + *

The code above will also target the 3rd element in the list in a way that IE7 and 8 understand. Not quite as useful as being able to use (3n+3) to target every 3rd list-item, but better than nothing. Hopefully IE9 will support nth-child.

Another and perhaps more practical solution currently is to use jQuery, which supports all CSS3 selectors.

32. Basic 2-column CSS layout (fixed width, centered, header and footer, sidebar on right)

The above is a pretty common website layout and it’s rather easy to code.

The HTML:

The CSS:

#wrapper {width:960px; margin:0 auto}
#content {float:left; width:600px}
#sidebar {float:left; width:360px}
#footer {clear: both}

The specific widths are arbitrary, but it is necessary to include a width. The keys are centering the wrapper as described above in this post, floating both columns, and clearing the footer div. You could also float the sidebar div to the right. Either will work, though I find it easier to float both in the same direction.

33. Basic 3-column CSS layout (fixed width, centered, header and footer, sidebars on right and left of the content)

Expanding on the above 2-column layout is this common 3-column layout.

The HTML:

The CSS:

#wrapper {width:960px; margin:0 auto}
#primary {float:left; width:230px}
#content {float:left; width:500px}
#secondary {float:left; width:230px}
#footer {clear: both}

Again the widths are arbitrary, but necessary. You can float the secondary div to the right if you prefer.

34. CSS Triangles and Other Shapes

CSS borders come together at an angle at any corner. This isn’t obvious when setting a border that’s the same color on all sides or if your border-width is only a few px. Making the width much larger and setting different border-colors on different sides lets you see this clearly. Taking advantage of these angles we can use the border-property to create some interesting shapes.

Creating a triangle is a matter of setting the border-color on 3 of the 4 sides to transparent. You also want to set the width and height of the element to be 0 in order for all 4 corners to meet at a point. You can set the border opposite the triangle to 0 as well, but the adjacent borders need to maintain a width or the entire element with borders will collapse to a single point.

The HTML:

The CSS:

.triangle {
	border-color: transparent transparent green transparent;
	border-style: solid;
	border-width: 0px 300px 300px 300px;
	height: 0px;
	width: 0px;
}

With a little experimentation you can create moe interesting shapes, especially if you combine several elements.

35. Prevent a Line Break

Sometimes the text in a link or heading will break where you don’t want it to. A simple way to prevent this is:

h1 { white-space:nowrap; }

36. Class vs. Id

Use an Id for elements that are used once and only once on a page

The HTML:

The CSS:

#content {background: #fff}

Use a class for elements that may be reused on the page

The HTML:

The CSS:

.large-text {font-size: 1.4em}

37. Replace Text with an Image

Better typography through more font choices is here, but there are still limitations to using it in practice. Sometimes the easiest solution is to use an image. However you also want the original text to be there for search engines and screen readers. A simple way to have both text and image is to use the text-indent property.

h1 {
	text-indent:-9999px;
	background:url("h1-image.jpg") no-repeat;
	width:200px;
	height:50px;
}

The height and width should match those of your image

38. Style the Element that has Focus in a Form

A nice usability tip is to let people filling out a form know which input currently has focus. You can do this easily using the :focus pseudo-selector

input:focus { border: 2px solid green; }

This way your users will know exactly which field is ready for input

39. Understanding !important

!important is a way to override CSS specificity. In general it’s not the best solution since the more you use it, the more you end up needing to use it again. It can make your CSS unmaintainable in a hurry. It can be useful due to a quirk in IE. When you have something like the following

h1 {
	color: red !important;
	color: blue
}

browsers should show the h1 with a color red. IE, however will show the style that comes last instead of following the rules of precedence. So the above code would show your h1 as red in all browsers except IE where the color would be blue.

40. Simple Debugging in CSS

Sometimes your CSS doesn’t seem to be working like you expect and you want to isolate one element in your html to see what space it occupied. An easy way to do this is to give the element a border temporarily

.element {border:1px solid red}

One downside of the above is the extra px in the border could temporarily throw your layout out of whack, since it increases the width of your element. You may find at times it drops a floated element further down the page for example. Still it can be a quick and easy way to see what’s going on and you can overcome the width limitation, by temporarily decreasing the width you’ve given to the element to compensate for the extra width the border adds.

41. Create a CSS Frame for Images

Many images look nice a frame. You typically frame pictures before hanging them on a wall so why not add a frame to images on your website. Just like what you can see how every article image here at instantShift is framed using modified verion of this very same trick.

The trick is to wrap your images in a div and add a simple class.

The HTML:

The CSS:

.frame {
	border: 2px ridge #000;
	 padding: 10px;
	background-color: #fff;
}

.frame img {
	border: 2px solid #ooo;
	padding: 1px;
	 margin: 10px;
}

You can use a variety of border-style values to create different looks to the frame (groove, ridge, inset, outset, double, dotted, dashed, solid). The padding and background-color on the frame div will create the look of a mat around your image. Adding border, padding, and margin to the image itself can create the effect of having a second mat around your image for an extra effect.

Once set up all you’ll need to do to add your frame to any image is wrap it with a div and assign the class. You can even create several different styles of frames and then pick and choose which to use for each image.

42. Mobile Specific Stylesheets

As more and more people are accessing the web via smart phones and other mobile devices we need to make sure our sites display well on different platforms. Fortunately html allows you to serve different stylesheets for mobile devices.

43. Letterpress Type Through CSS

The basic idea is to make use of the CSS3 property for text-shadow to create the letterpress effect.

.element {
	color: #222;
	text-shadow: 0px 2px 3px #555;
}

The trick is to use a shadow color that’s lighter than the text color and offset it a little and add a bit of blur. The values above for the text-shadow property are:

text-shadow: x-offset y-offset blur color;

44. Setting Page Breaks For Print

Some people will want to print your pages and you may want your pages to print in a more readable form. For example you may have a table of data on a page and you’d prefer the entire table be printed on one page as opposed half the table ending up at the bottom of one page and the other half at the top of the next. CSS offers a way to force a page break in some places and prohibit in it others.

First you’ll need to direct your styles to printed media through @media print

The above will tell printers to do what they can not to break the table over two pages. CSS provides a total of 3 properties related to printed page breaks. Possible values in parenthesis.

page-break-before (auto, always, avoid, left, right, inherit)

page-break-after (auto, always, avoid, left, right, inherit)

page-break-inside (auto, avoid, inherit)

45. Creating Circles With Border-Radius

The CSS2 border-radius property can be used to create circles in all browsers that support the property. The trick is to set the height and width of the element so they’re the same and set the border-radius of the element to be half that value.

.cirlce {
	width: 300px;
	height: 300px;
	background-color: red;
	border-radius: 150px;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
}

border-radius is the CSS standard property

• -moz-border-radius is for Mozilla based browsers like Firefox
• -webkit-border-radius is for webkit based browsers like Safari and Chrome

Unfortunately none of the above will work in any current version of Internet Explorer.

46. CSS Tooltips

You can create a lightweight CSS cross browser tooltip easily with a few lines of code.

The HTML:

This is the Tooltip LinkThis will be the text that shows up in the tooltip You can place any text you want here.

The CSS:

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline;  position:absolute;}

You can add more styles to the above to suit your design. The key is the span is set to display: none until you hover over the link. When you hover over the link the display is changed to show inline and given a position of absolute. position: relative is necessary on the link in order to ensure the tooltip is positioned in relation to the link and not another containing element.

47. Creating a Fixed Header

Instead of letting your entire page scroll you might want to hold the header with your logo and navigation fixed in place and only let the content below scroll.

The HTML:

header 
content 

The CSS:

#header {
   position:fixed;
}

You want to make sure to keep the header and content divs separate and then use position: fixed on the header. Other ideas you can try are creating a scrollable table with a fixed header within your page or keeping both header and footer fixed while allowing your content to scroll between them.

01. C4D VW Beetle Tutorial

Tutorial Link

02. How to Make a Dead Tree Trunk

Tutorial Link

03. Space ship modeling

Tutorial Link

04. Making an hourglass

Tutorial Link

05. Egg modeling tutorial

Tutorial Link

06. How to setup uncut blueprints

Tutorial Link

07. Animate a Dancing Ice Cream Bar

Tutorial Link

08. Uv Unwrapping And Painting A Gun In Bodypaint

Tutorial Link

09. Modelling a Tire Thread

Tutorial Link

10. Modeling & texturing a Book

Tutorial Link

11. Realistic Glass Mat

Tutorial Link

12. Create a Futuristic Animated Computer Screen Shader

Tutorial Link

13. Creating a diamond

Tutorial Link

14. Stockastic Lighting Tutorial

Tutorial Link

15. Modelling a Deck Chair

Tutorial Link

16. How to Make a Chair

Tutorial Link

17. Dynamic Spring

Tutorial Link

18. Working With procedurals

Tutorial Link

19. Light Posts – Walls & Streets

Tutorial Link

20. Cinema 4D Clothes

Tutorial Link

21. How to Create a Dynamic Ring

Tutorial Link

22. Creating Velvet

Tutorial Link

23. Creating a bridge Scene

Tutorial Link

24. Model, Texture, and Render an Interior Scene

Tutorial Link

25. How to Create City Blocks

Tutorial Link

26. Planet Tutorial

Tutorial Link

27. Creating Detailed Buildings for City Scene

Tutorial Link

28. Oculus Medicus

Tutorial Link

29. Model a Venus-styled Robot

Tutorial Link

30. Modeling a Hand

Tutorial Link

31. A Recipe for Skin

Tutorial Link

32. 3D Text Shatter Effect

Tutorial Link

33. Incredibly Realistic Water Text

Tutorial Link

34. Font Explode

Tutorial Link

35. Create a Jelly-like Text Animation

Tutorial Link

36. Create a Steam Powered Typographic Treatment

Tutorial Link

37. 3D type explosion

Tutorial Link

38. Creating a Chrome Metal with Great Reflections

Tutorial Link

39. Create a Twisted 3D Text

Tutorial Link

40. 3D Valentine’s Day Typography

Tutorial Link

41. Beautiful Xmas Wallpaper

Tutorial Link

42. Make an Impressive Exploding Text Effect

Tutorial Link

43. Cinema 4D Extruded Text

Tutorial Link

44. 3d text tutorial

Tutorial Link

45. Dynamic Modelling

Tutorial Link

46. Create a Stylish Liquid Type Logo

Tutorial Link

47. High Dynamic Range Imaging

Tutorial Link

48. RSS icon on c4d how to

Tutorial Link

49. Create an Abstract Armored Sphere Scene

Tutorial Link

50. Expose Render

Tutorial Link

51. How i do my materials

Tutorial Link

52. Abstract Cinema 4D Tutorial

Tutorial Link

53. Abstract Flower

Tutorial Link

54. Matraid Cinema4D Tutorial

Tutorial Link

55. C4d mats and render tutorial

Tutorial Link

56. Create a Gorgeous Abstract Greeble Scene

Tutorial Link

57. Simple Splash Tutorial

Tutorial Link

58. Motion Graphics: Project Workflow

Tutorial Link

59. Snazzy Door Type Effect

Tutorial Link

60. HDRI tutorial

Tutorial Link

61. Create Amazingly Realistic Renders

Tutorial Link

62. Comedy Titles in Cinema 4D

Tutorial Link

63. Transformers Titles in Cinema 4D

Tutorial Link

64. Create a Realistic Subway Station Scene

Tutorial Link

65. SLOW MoDynamics

Tutorial Link

66. MoDynamics: Fracture

Tutorial Link

67. Metaball Tutorial in Cinema 4D

Tutorial Link

68. Dynamic Deformers

Tutorial Link

69. How to make a Cascading Text Animation

Tutorial Link

70. Create a Detailed Zune HD MP3 Player

Tutorial Link

71. Landscape in Cinema 4D tutorial

Tutorial Link

72. Create a Jumping Lamp Animation in C4D

Tutorial Link

73. Cloth & Hair

Tutorial Link

74. Wireframe video-tutorial

Tutorial Link

75. Using text and spline objects

Tutorial Link

76. Morphing in Cinema 4D

Tutorial Link

77. Recreate Sherlock Holmes trailer title

Tutorial Link

78. Modelling a chair

Tutorial Link

79. Construct a Detailed Type 97 Hand Grenade

Tutorial Link

80. Modelling a bath

Tutorial Link

81. Cinema 4D Diamonds Tutorial

Tutorial Link

82. Create an Animated Bar Graph with Cinema 4D

Tutorial Link

83. Fracture Text Breaking News Open

Tutorial Link

84. Multi coloured fur-1

Tutorial Link

85. Multi coloured fur-2

Tutorial Link

86. Create a realistic earth

Tutorial Link

87. Making of Did you fill up the tank on mars?

Tutorial Link

88. Dotted Line

Tutorial Link

89. Rigging a Detailed Tank Track

Tutorial Link

90. Stylish Light in Cinema 4D and Photoshop Tutorial

Tutorial Link

91. Rolling Out The Red Carpet

Tutorial Link

92. How to create a Sci-fi scene

Tutorial Link

01. Create a Model Riding Digital Volume

This is a tutorial illustrating perspective techniques and how you can achieve the feeling of depth and motion. This will be done in a few steps, such as placing the main character, creating the volume fading away and adding foreground and background images.

Tutorial Link

02. Dazzling Dance Photo Manipulation

In this detailed and lengthy Photoshop tutorial, you will learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork. You will also learn several tricks to reduce your Photoshop document file size and number of layers and layer styles.

Tutorial Link

03. Manipulate Smoke to Create Hyper-Real Images

In this tutorial you can learn how to apply the Warp Tool effectively and a few other tricks to make smoke look like a skull. This technique has a variety of outcomes and works well with water, clouds and a whole bunch of other stuff. This is probably more for intermediate users, as this tuorial guide you through the process well, but not every Warp Grid point handle move.

Tutorial Link

04. The Making of “Constant Slip”

This tutorial takes you through the creative process of making intriguing light effects and applying them in your work. This is more a process description of making this illustration, than a detailed step by step how to. Also, you can have some good guidance on how to deal with an illustration like this and cover the overall workflow.

Tutorial Link

05. Creating a Spy Fly Photo Manipulation

This tutorial describes the main steps in creating a dead robot fly. This art piece was actually created for a contest and of course the first prize was the result. The concept of this illustration was to take a picture and be creative, use parts of that image and create something unique.

Tutorial Link

06. Create amazing water-drenched photomontages

In this tutorial, you can learn how to make a splash, blending two very different images to create this amazing underwater effect, complete with a dissolving figure of a man. This tutorial provides step-by-step guidance on how to make a stunning, dynamic effect that recreates the look of a figure dissolving in water, with some clever use of Photoshop and some found images. Although the finished image appears hi-tech, it is just a very clever photomontage constructed from just two images, using relatively simple Photoshop techniques – the secret is in knowing which tool to use when, and putting the time into making sure it’s precisely executed.

Tutorial Link

07. Create a Never Ending Staircase Illusion

In this short tutorial you can learn how to create a never ending staircase illusion with PhotoShop. Textured with wood, stone, grass or what ever you choose.

Tutorial Link

08. Create a Photo Manipulation of a Flooded City Scene

In this tutorial, we will learn how to manipulate a simple photo into a flooding torrent of a scene. Also, how to use some relatively simple techniques to give this image a semi-realistic, stylized feel.

Tutorial Link

09. The Making of Mystic

In this tutorial we all can learn the process of making a spectacular image. This tutorial focuses on the big picture steps taken to create this image. You’ll learn some incredible techniques in this tutorial, and get a view into how one can creates beautiful photo-manipulation based images.

Tutorial Link

10. Create a Stunning 3D Liquid Explosion Artwork

In this tutorial, you’ll learn how to create a Poser figure, create a shatter effect and render it in 3DStudio Max, then use Photoshop and some simple stock images to create a brilliant and visually stunning water explosion effect. Even if you don’t have Poser or 3DSMax, we’ve included the render in a PNG format for you to play with, and you’ll still learn valuable techniques.

Tutorial Link

11. Create a Vivid Themed Illustration

Drawn elements are certainly something that can enhance an illustration. Even if you’re not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don’t believe me, you will definitely change your mind after reading this tutorial.

Tutorial Link – Part I, Part II

12. Create frozen liquid effects

This tutorial will shows how you can bring the coolest of effects to your illustrations. Here you’ll learn technique by which anyone can transform almost anything into what looks like water or frozen fluid.

Tutorial Link

13. Create A Fantastic Natural Combination Scene

If you cant afford high quality stock images or graphics for your blog articles or website design then you can use this tutorial which showcases how you can create your own unique image according to your requirment using many images.

Tutorial Link

14. How to Create a Steampunk Golden Car

This tutorial shows you how you can convert a real car image into a steampunk golden car using coolest effects of photoshop.

Tutorial Link

15. Create A Slow Motion Bullet Shot Effect

In this tutorial you all going to learn how to make a nice bullet shot effect and how you can use a technological object such as a remote control to show a lot of tiny parts flying off after the impact: the circuit board, the buttons, a few chips.

Tutorial Link

16. Create a Dramatic Impact to a Planet Scene

This is a tutorial about how to create simple looking impact effects using some creative skills of photoshop.

Tutorial Link

17. Creating a Touching Story Scene

In this tutorial, you are going to create a story scene using photo manipulation and a lot of color adjustments. The outcome is simply amazing.

Tutorial Link

18. How to Create a Severed Arm in Photoshop

In this tutorial we will be learning how to create a severed arm with fleshy stumps and strings of sinew. This will be created by using some basic Brushes and Layer Masks.

Tutorial Link

19. Awesome Avatar Transformation

This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into a Na’vi (based on the characters in James Cameron’s movie “Avatar”).

Tutorial Link

20. Create An Amazing Alien Invasion

If you really inspired by alian arts then you must going to enjoy this tutorial. Here you can learn a step by step process to creat a alien invasion scenario which looks so real that you going to feel horrified by the outcome.

Tutorial Link

21. Create An Urban Tiger Photo Manipulation

In this tutorial we will examine the methods behind creating an image that contains a window to another world within it, as we smash a hole in urban life to reveal the jungle waiting in the wings. We’ll look at several basic techniques that are the cornerstones of creating any mixed media composition, including simple transformations, creating clipping paths and layer masking.

Tutorial Link

22. Create Glass Transparency in a Cute Photo Manipulation

In this tutorial you’ll learn how to incorporate glass into your work. We’ll learn a good technique for incorporating glass transparency into photo manipulations, while placing a cute, pirate hamster on the high seas.

Tutorial Link

23. How to Create a Flaming Photo Manipulation

In this tutorial, we’ll manipulate a picture so it looks like a woman burning in flames. The idea behind this manipulation was to create a nice looking illustration, only by using simple techniques and tools such as the Brush tool and Warp command. We hope you enjoy the tutorial and try it with your own stock imagery.

Tutorial Link

24. Create a Dark Melancholic Photo Manipulation Scene

In this photo manipulation tutorial, we will be creating a melancholic and enthralling piece using Photoshop. Here, you all can learn several techniques for blending images seamlessly. We’ll cover how to paint realistic lighting and shadows, how to create an effect of a moving sky like it just came out from a long exposure shot, how to make a vignette, how to utilize fill and adjustment layers, and more.

Tutorial Link

25. Create a Steampunk Style Illustration

After going through this steampunk tutorial you’ll feel like going simultaneously backward and forward in time. The main focus, aside from the style of course, is fusing elements from different sources together to create a cohesive whole. There are many tricks to this end and we shall be looking at light sources, shadows, and image grading.

Tutorial Link

26. Create a Post Apocalyptic Photo Manipulation

In this tutorial, you’ll learn how to create a post apocalyptic manipulation using adjustment layers, vector masks, and some special effects.

Tutorial Link

27. Scared Photomanipulation Tutorial

This tutorial will teaches you some basic things about photomanipulation by creating a scared scenario using images of human body object.

Tutorial Link

28. How to make an AVATAR Na’vi

This tutorial was made to help step you through the making of Na’vi from the film “Avatar”. By this process you can able to convert any image into this Avatar character.

Tutorial Link

29. How to Create a Magical Painted Scene

In this tutorial, we will be using several basic tools and stock images to create a fantasy artwork where everything seems to come alive from what is being painted on an old piece of paper.

Tutorial Link

30. Create a Fantastic Tree

Once again a tutorial full of horrer. Here you can learn that how you can create a scared tree using just some simple images.

Tutorial Link

31. How to Create Cityscape Concept Art

In this tutorial, you will learn how to easily create a successful piece of cityscape concept art. We’ll be using a very basic 3D scene as a foundation for the piece, then taking it into Photoshop for some creative photo manipulation of reference photos, basic painting and adjustments.

Tutorial Link

32. Create an Abstract Sea on Land Illusion

Here, you will learn how to use paths and masking to produce an abstract view of sea on land. You will also learn some cool texturing ideas.

Tutorial Link

33. Use a 3D Model to Create a Dramatic Scene

For this tutorial you’ll need Photoshop CS3 Extended, as the tutorial utilizes that version’s unique 3D Tools. You will import a three-dimensional object of an airplane and use it to create a dramatic scene. Use the Vanishing Point filter to create realistic shadows, add texture to the model, and use brush Tools to get awesome results.

Tutorial Link

34. Photomanipulation Comic Book Effect

In this tutorial you can learn how to create an exciting comic out of photos and filter effects. This tutorial will teach you how turn a normal highway photo into an intense action scene.

Tutorial Link

35. Design a Surreal Desert Scene in Photoshop

In this tutorial you can learn how to create a surreal time-themed photomanipulation using Photoshop. The name of this photomanipulation is “Time Guardian” which is not common and very creative to use.

Tutorial Link

36. Create an Amazing Light Beam Surrounding a Lady

This tutorial gives you some insight in to techniques and concepts by which you can learn how to create and colorize a textured background and how you can genrate a custom brush-style in Adobe Photoshop also a way to employ the Smudge-Tool and Displace-Filter. Also, you can learn the creation and modify of custom vector-shapes and how to optimize color-curves and alter colors using adjustment layers.

Tutorial Link

37. Making of a Sexy Humanoid

This tutorial will takes you to the step-by-step process of creating the amazing humanoid form using some simple photoshop techniques.

Tutorial Link

38. Create a Powerful Mental Wave Explosion Effect

In this tutorial, Fabio shows you how to create a crazy explosion, like a mix of Magneto’s ability with Peter Petrelli’s power. He’ll teach you how to use images and filters to produce this wave explosion effect. Even though it may look like a difficult tutorial, it’s really not that hard.

Tutorial Link

39. Water effect photo montage

Very interesting tutorial by which you can learn how to convert any object into water look like effect.

Tutorial Link

40. Create a Magical Golden Winged Boot

This tutorial will teach you how to create a magical flying boot using a combination of photo manipulation and awesome light effects.

Tutorial Link

41. How To Create A Beautiful Indian Sunset Scenery

In this tutorial, We will see how to create a beautiful sunset, in a rocky scene with teepees. We will using many pictures to create this scene. We also use The Dodge and Burn Tools, as well as Color Balance and curves, to achieve the goal.

Tutorial Link

42. Making of a Scary Mental Hospital Scene

Very creative yet simple tutorial about how to creat a scary mental hospital scene.

Tutorial Link

43. How to Create a Somber Composition

In this tutorial you will learn how to manipulate stock images and turn them into your puppets to express your desired feelings.

Tutorial Link

44. Create an Imaginative Golden Apple Tree

Here, In this tutorial we’ll see how to convert simple tree into a fantecy golden apple tree.

Tutorial Link

45. Super Fast – Speed Lighting Effect

Take an image of a fireworks display and turn it into an intense sensation of speed. Manipulate natural lighting to fill a motion filled scene. Use masks to blend the effect over a car image to make the car appear to be in motion. This tutorial shows you exactly what to do.

Tutorial Link

46. Create a Platform Environment

In this tutorial, you will learn how to combine digital painting and photo manipulation to create polished fantasy art. The process of combining digital painting and photo manipulation is a great mix. It truly allows you conquer the world with beautiful illustrations.

Tutorial Link

47. How to Mold Paint Splatter to a Face

In this tutorial, we’ll learn how to take splattered paint Photoshop brushes and apply them to the contours of a model’s face. This is a relatively simple technique, which yields excellent artistic results.

Tutorial Link

48. Combine Photo Elements to Create a Surreal Photo Manipulation

This Photoshop tutorial, you will learn how to use a variety of color, lighting, and cut and paste techniques to create a surreal photo manipulation. Combine your creativity with these Photoshop techniques to create your own photo manipulation artworks.

Tutorial Link

49. Design a Vibrant Blackberry Inspired Ad

The Blackberry Loves U2 TV promo features some awesome, bright and vibrant lighting effects. Let’s take a look at recreating the style to produce a Blackberry inspired design of our own.

Tutorial Link

50. Skating in clouds

This tutorial showcases how to creat a magical clouds scene from various textures and simple photoshop techniques.

Tutorial Link

51. Age Progression

Here’s a little tutorial showing you how one can basically go about aging a woman’s face in Photoshop.

Tutorial Link

52. Create an energy sci-fi scene

Here, In this tutorial you can learn how to use Photoshop to combine 3D renders with stock images and light effects. This is an unconventional Photoshop tutorial because it is focused more on the process rather then the technique.

Tutorial Link

53. Design a 3D Machinary War Scene

This tutorial shows you how to seamlessly blend 3D models into your 2D composites using Photoshop Extended. You’ll discover how easy it is to roll, rotate and slide complex models within 3D space.

Tutorial Link

54. Join the DarkSide

If you guys into KOTOR2 (Knights of the Old Republic: Part 2) then you might going to like it as you should know this effect! which we going to learn in this tutorial.

Tutorial Link

55. Designing a war movie poster

In this tutorial I will show you guys some simple but efficient techniques that will help you make great movie posters using simple photo manipulation techniques.

Tutorial Link

56. Use lighting effects to make photos sparkle

Turning a run-of-the-mill photo into a dazzling one is simple – when you know the right tricks. This tutorial shows how to create a variety of light effects that can be applied to photography or illustration with equal impact.

Tutorial Link

57. Create a Surreal Scene of Flying Bombs on Fire

In this tutorial, we’ll make a scene with flaming bombs pouring from the sky. This tut is made to show some down and dirty Photoshop tricks that beginners can quickly pick up. It also includes some relatively advanced techniques to help budding designers enhance their workflow.

Tutorial Link

58. How to Create a Fantasy “Mother Nature” Scene

This tutorial is about creating a fantasy scene called “Mother Nature.” We will use well chosen images, brushes and most off all our imagination in combination with Photoshop techniques to create an outstanding image.

Tutorial Link

59. Beautiful Sunrise Landscape

Learn how to combine and blend multiple landscape photos to create a beautiful sunrise landscape. You will also learn about masking and other selection methods.

Tutorial Link

60. Create a Face Shattering Effect

This tutorial takes you to the process of creation of a face shattering effect which is highly creative if you like to play with your own images.

Tutorial Link

61. Making a Beautiful Pair of Fantasy Eyes

In this tutorial, we will explore the basics on how one can create fantasy eyes effects in Photoshop.

Tutorial Link

62. Make a Vivid Flaming Skull Conceptual Composition

In this Photoshop tutorial, We will learn how to combine stock images and typography into a beautiful conceptual composition. The aim is to explain the creative process and motivations behind design decisions made while creating a digital art piece. Also, we’ll see through some powerful Photoshop tools and commands that allow you to control color balance and image vividness.

Tutorial Link

63. Create incredible B-movie poster art

This tutorial shows you how to combine 3D renders with stylized photography, text and smoke to capture all the camp horror of an alien invasion. This spoof movie poster design is a simple but effective way of tackling those graphics challenges where there seem to be too many thoughts to fit in: it enables the designer to combine slogans and other textual elements with the bare bones of a storyline and striking images, all bound up in an iconic format that everybody will recognize.

Tutorial Link

64. create a plane crash in Photoshop

This tutorial teach you how to create a scene with a plane crashing on a mountain using ordinary images, and with simple techniques that will create an explosive horror scene. Even with basic Photoshop skills, you can quickly find a path to create such photo manipulations. Try to find good stock images with the same perspective, and you are on the good way.

Tutorial Link

65. Create a Divine Angel Montage in Photoshop

Here, You will create this photo manipulation using stock images provided by some really great artists. The final image is an Angel that lights his way in the dark forest.

Tutorial Link

66. Animal King Photo Manipulation Tutorial

In this photoshop tutorial, you’ll learn how to mash up a series of photos in a highly creative poster based on a famous painting from the 1800’s.

Tutorial Link

67. Photo-Manipulation: Lonely Fairy

This tutorial will walk you through the steps of blending various photos into one, realistic magical piece. You’ll work with blending modes, lighting and color adjustments and compositional planning.

Tutorial Link

68. Create a Cyborg With Photoshop

In this tutorial you’ll discover how to incorporate mundane, everyday objects into a cyborg creation. Combining household objects with 3D renders is a technique that can have interesting results. This will also give you an opportunity to get to grips with the Pen tool, the Dodge and Burn tools and blending modes, as well as the Transform and Warp functions to make it even more realistic.

Tutorial Link

69. Create a Surreal Photo Manipulation with Twisting Water

In this tutorial, we’re going to create a fantasy photo manipulation mixing different images and learning to use and modify the stock images in a creative way. The idea is to get a compact image that looks absolutely real, and at the same time, absolutely impossible!

Tutorial Link

70. Create a Flying Land Illustration On Fire

This tutorial is about creating a fantasy illustration using some dragon images and a few cliffs for creating the land. We also add lava and fiery effects.

Tutorial Link

71. Snail race photo montage

In this tutorial we will be learning some more photomanipulation to create a snail race scene.

Tutorial Link

72. Create A Distressed Surreal Cityscape

Matte painting plays a major role in today’s films. The first known matte painting shot was made in 1907 by Norman Dawn (ASC), you can see how the traditional matte painting evolved from “The Wizard Of Oz” to the ground breaking “Avatar”. In this tutorial we will see some techniques in matte painting to create a distressed surreal cityscape.

Tutorial Link

73. Blend a Planet Transparently into a Photo Manipulation

This tutorial showcases you how to use different blending modes to blend flying hairs easily and to make semi-transparent planet. You will also ging to learn the different techniques of adjustment to get the most realistic results in your photo manipulations!

Tutorial Link

74. Create Grungy Style Artwork with Shattered Effect

In this tutorial, you’ll see the steps to create this Grungy Style Artwork, Mixing with Great Lighting and Shattered Effect in Photoshop. This is an intermediate level tutorial and some steps can be tricky.

Tutorial Link

75. Photo Manipulate a Falling Angel

In this tutorial you can learn how to combine several photos to create a dramatic ‘fallen angel’ scene.

Tutorial Link

76. Bloody Method Photoshop tutorial

This tutorial shows you the step-by-step method to creat some sort of bloody mouth with a dark and quite dramatic style of flow.

Tutorial Link

77. Create a Fantasy Landscape

In this tutorial, you will learn how to create a fantasy landscape using some simple and easy techniques. Everyone with basic Photoshop skills can succeed to recreate this simple image using the most important thing in this kind of photo manipulation – the right stock.

Tutorial Link

78. How To Create a Photo Manipulation with Your Own Photos and Textures

In this tutorial, You can learn some tips on how to take your own photos for the photo manipulation. You will learn, how to blend pictures, apply textures, create your own brushes etc.

Tutorial Link

79. Transform a person into an alien

In this tutorial is written how to create a very cool looking alien using Adobe Photoshop. Grab a picture of someone and get ready to alienize it!

Tutorial Link

80. Design an Intense Particle Illustration

This tutorial shows you a simple process of manipulating a image with lighting effects and incorporating brushes too. This tutorial will bid you a step by step guide on how to achieve the illustrated outcome.

Tutorial Link

81. Create an Old Fantasy Space City

This tutorial will explain how to make an Old Space City from a single source image in photoshop. Please notice that every part in the scene in great detail. Watch the images in each step carefully, as most of the instructions are embedded in the step images.

Tutorial Link

82. Creating an Abstract Watercolor Wallpaper

There are plenty of ways to create a Watercolor Effect in Photoshop. Some are very cheesy and you can easily tell that a simple filter has been used. In this tutorial, we will be using Layer Masking. It is one of the most fascinating and powerful Photoshop method, to use layer masks in your designs.

Tutorial Link

83. Create the Photo Manipulation “Brightness Tomorrows”

In this tutorial, We will see how to create a futuristic looking photo manipulation using some special tools, such as the Background Eraser Tool and how to blend pictures properly using Match Color Adjustments and Lighting Effects.

Tutorial Link

84. Gunshot Through a Glass

In this tutorial you can learn how to create a suspenseful photo manipulation in Photoshop. You will also learn how to create realistic distortions with the displace filter and apply photo effects to give it a cold look.

Tutorial Link

85. Creating the Spoiled Princess Fashion Poster

In this tutorial you will learn how to create a fashion advertisement poster. We’ll be combining multiple images, finding the perfect stock, and unifying it with just the right colors.

Tutorial Link

86. How to Create an Abstract Photo Manipulation

Here we’ll learn how to create an abstract photo manipulation that looks like you’ve just painted the subject. This tutorial included lots of useful techniques for creating impressive abstract pieces which is simple but if you don’t understand any steps then just skip it as not all of them are compulsory.

Tutorial Link

87. How to Create a Chilling Photo Manipulation

In this tutorial we’ll see how one can create a fantasy photo manipulation called “You Can Not Frost The Time” with using several Photoshop tools such as Color Range, different blending modes, and more.

Tutorial Link

88. How To Create a Futuristic Sci-Fi Scene

This tutorial guides you through the steps to create a futuristic sci-fi scene. We will transform original pictures using Photoshop tools that will help to give the image a more spectacular look.

Tutorial Link

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

Nowadays there are a competing host of JavaScript libraries around these days. Though I prefer jQuery, I have always liked the way the menu on MooTools worked. So in this tutorial well get that same effect.

Official Link

Floating HTML Menu Using jQuery and CSS

For all of you who want to deal with long web pages and need to scroll to the top for the menu, this is a nice alternative: floating menus which move as you scroll a page. With HTML language also CSS and jQuery, and it is fully W3C-compliant.

Official Link Demo

Accordion Menu Using jQuery

In this post, you will get how you can create a fancy accordion menu using jQuery. In this post, you will see two examples of accordion. First menu visibility get toggled on clicking on the header while the another menu visibility and get toggled when mouse is moved over this menu.

Official Link

jQuery Vertical Slide Fixed Height Menu #6

This is an Expanding simple vertical slide menu. This one allow you to have fixed, non-expanding top level links and the ability to click to open and click to close a top level sub list. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You should make a donation for use of this menu.

Official Link

Unobtrusive Slide Out Menu

In this DHTML menu script, the submenu slides is to left or to the right. The menu is based on an unordered list (<UL><LI>) that makes it search engine friendly and visible to users with JavaScript disabled.

Official Link Demo I II III

Slide Down Menu

This is a slide menu based on an unordered list (<UL><LI>) and supports unlimited depth of items.

Official Link Demo I II

Sliding JavaScript Sidebar Menu

It uses mootools due to the smoothness of their effects, however, this could just as easily be developed in script.aculo.us or other JavaScript libraries.

Official Link

Professional Dropline #5

This Dropline menu us hover instead of click to open (and keep) open submenu. With the top level and the dropline centered within the containing div. Using hovers instead, will make the click allow the top levels to have links.

Just hover over a top level item to dropdown the associated sub line. The top level will stay black to show that it has been selected. Hover the same item to close the sub list or a another top level item to close the current sub level and open a new one. “Home” and “Privacy policy” don’t have sub levels.

The ability to have a selected top level open on page entry is included, that is demonstrated in this menu where “Sales” is selected on page entry (demo).

Tested in IE6, IE7, Firefox, Opera and Safari (PC). Visit stunicholls.com to find more than 30 great menu scripts.

Other Nice Dropliners.

• Professional dropline #4
• Professional dropline #3
• Professional dropline #2

Official Link

jQuery Dropline With Current Selection

A dropline menu with have the ability to set the current page and the menu to open with this highlighted. If you hover over any of the other menu options then the current trail is removed and the new trail displayed. Once you move the mouse of the menu then the current selection will re-appear.

This script make the need to use jQuery to control the display of the droplines decrease and is styled using CSS.

All browsers except IE6 have an opaque background to the droplines. Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

Official Link

Horizontal Dropline/Dropdown/Flyout Menu Using jQuery

Dropline Menu with dropsown. It will close automatically after 2 seconds if the mouse moves out off any of the menu items. This feature can be modified to collapse back and keep the dropline.

This JavaScript has been tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

You should make a donation for use of this menu.

Official Link

jQuery – Menu Tree

A simple four level vertical sliding menu tree. Clicking any of the orange color list items and it will expand that sub level and contract any other open level. Re-clicking the same list item will close that level and any sub levels which are open.

Tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome.

Official Link

jQuery Plugin: Treeview

This is a Lightweight and flexible transformation of an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements.

Official Link

CSS Drop-Down Menu Framework

This is a very flexible and good looking navigation menu. Can be transformed just by changing CSS class name. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

Official Link Demo Download

JavaScript Dropdown Menu with Multi Levels

Just 1.2 KB in weight includes features animation, active header persistence, easy implementation and multiple instance support. This JavaScript dropdown menu will make your web site prettier because this script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome.

Official Link Demo Download

MenuMatic

MenuMatic is a MooTools 1.2 class which take a sematic ordered or unordered list of links and turns it into a dynamic drop down menu. For user who not use JavaScript, it will fall back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.

Official Link

Drop Down Tabs (5 styles)

With horizontal CSS tabs menu for dropdown tabs that supports second level drop down menu for each of tabs.

Official Link

Smooth Navigational Menu

It is a multi level navigation menu, CSS list based on menu powered by jQuery which make smooth affair website navigation. And that’s is good thing to give the important role of this element in any site.

The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek slide plus fade in transition which applied during the unveiling of the sub menus.

Official Link

Superfish

It is an enhanced Suckerfish-style menu jQuery plugin which take an existing pure CSS dropdown menu (without JavaScript, it will degrades gracefully).

Official Link

Dropdownmenu Made with Scriptaculous/Prototype

A pretty multi level drop down menu.

Official Link

Professional Slide Drop #1

A simple dropdown menu which has a vertical sliding action. With a Hover over a top level link to slide down the submenu and it does slide down, not just appear in a vertical shutter action, and then hover over the same top level to close another top level to open that one and close the previous one. You can take your mouse over the top level items to open and close them and they’ll work simultaneously.

This uses simple JavaScript routine to read the mouse hover and slide the submenu list either up or down depending on the current state of the submenu.

Tested in IE6, IE7, Firefox, Opera and Safari (PC).

Official Link

Professional Dropdown #2

Good looking menu although it is unclear if it is still maintained. Tested in IE5.5, IE6, IE7, Firefox, Netscape, Opera, Mozilla, Safari (PC) and Safari (iPod Touch). Testing in recent browser versions is recommended before using this. You have to make a donation to use this menu. Visit stunicholls.com where you will find more than 30 great menu scripts.

Official Link

List Based Menu with Images

This is a menu which based on an unordered list (<UL><LI>). It make the menu easy to use and search engine friendly.

Official Link

Unlimited Drop Menu

Just unlimited dropdown menu.

Official Link

Create a Multilevel Dropdown Menu with CSS and Improve it via jQuery

The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also well known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.

Official Link

CSS Express Drop-Down Menus

CSS Express menus should be used in a horizontal orientation only with single dropdown level.

Official Link

Chrome CSS Drop Down Menu

Chrome Menu is a CSS and JavaScript hybrid dropdown menu. It’s configurable and search engine friendly.

Official Link

Vimeo-like Top Navigation

Like a Janko creatures on Almost of the same top navigation implemented on Vimeo.com. That drops down when you hover over search box. And give you different search options which you can choose and narrow your search.

With simple base CSS drop down menu based on unordered list tutorial. The structure is described visually in the image below:

Official Link Demo Download Source Code

Sliding Top Menu With jQuery

sliding top menu is script with built of jQuery that can be fired through the open & close button or with any tag with the related class name.

You can use it as an info box, login area & more.

Official Link Demo

A Circular Menu with Sub-Menus

A really nice menu adds a sub menu level of smaller icons in a circular pattern within the top level circle. There’s also the facility to add a simple description for each icon. This menu has been tested in IE6, IE7, Firefox, Opera, Safari (PC) and Google Chrome. (Send e-mail to author to get zip).

Official Link

Fancy Sliding Menu for Mootools

The Fancy Sliding Tab Menu is run on Mootools with an idle state listener to bring all of the tabs back to their normal state after a desired amount of time without mouse movement on the window.

Official Link Demo Download Source Code

Collapsable Menu

This tutorial will show to you how to use Mootools to create menus. The result of one of the menus is interesting and gives you a collapsable box with an animated effect on mouse over.. You will get many good posts here which explaining coding stuff in a very relaxed and easy to understand way.

Official Link Demo Download Source Code

01. How to Speed Up Your Blog’s Loading Speed

WordPress, by default, comes uncompressed and sends the uncompressed HTML to the visitor’s browser. With one line of code added to your header, you can compress WordPress’s output by up to 75%. By using zlib compression technology, you can harness the power of PHP and reduce your blog’s load time and increase the load speed!

First, place the following code in a file and call it “test.php” and then upload it to the root of your blog directory:

<?php phpinfo(); ?>

Make sure that “zlib” is enabled by your hosting provider.

Second, place the following code in your header (above the DOCTYPE):

<?php
  ini_set('zlib.output_compression', 'On');
  ini_set('zlib.output_compression_level', '1');
?>

You’re done! Check Port80Software.com to ensure you are compressing your output.

Source Link

 

02. Allow More Time For Slow Servers to Upgrade Wordpress

WordPress auto download/install is a very nice feature, but sometimes a few problems can appear. One of them is that WordPress don’t manage to download the new version. This happens on slow servers. Here is how to solve it.

To apply this hack, you’ll have to edit one of WordPress core files. Keep in mind that it is never recommended. This hack should be applied only if you have problems while auto-upgrading WordPress.

Open the wp-admin/includes/files.php file and go to line 448. You’ll see the following:

$response = wp_remote_get($url, array('timeout' => 60));

To allow more downloading time, simply change the 60 with a greater value, as for example:

$response = wp_remote_get($url, array('timeout' => 120));

it’s all done!!

Source Link

 

03. How to Get All Custom Fields From a Page or a Post

Sometimes you may need to get all custom fields from a specific post or page. Apply following function that do the job.

function all_my_customs($id = 0){
  //if we want to run this function on a page of our choosing them the next section is skipped.
  //if not it grabs the ID of the current page and uses it from now on.
  if ($id == 0) :
    global $wp_query;
    $content_array = $wp_query->get_queried_object();
    $id = $content_array->ID;
  endif;   

  //knocks the first 3 elements off the array as they are WP entries and i dont want them.
  $first_array = array_slice(get_post_custom_keys($id), 3);

  //first loop puts everything into an array, but its badly composed
  foreach ($first_array as $key => $value) :
    $second_array[$value] =  get_post_meta($id, $value, FALSE);

    //so the second loop puts the data into a associative array
    foreach($second_array as $second_key => $second_value) :
      $result[$second_key] = $second_value[0];
    endforeach;
  endforeach;

  //and returns the array.
  return $result;
}

Once done, you can use the function like this:

$result = all_my_customs();
echo $result['my_meta_key'];

Source Link

 

04. How to Show Parent Page Title Regardless of What Subpage You Are On

This hack is useful for peoples who working with WordPress as a CMS and wanting to be easily able to display parent page title on a subpage.

Nothing hard at all: Just paste the following code where you’d like to display the parent page title:

<?php
if($post->post_parent) {
  $parent_title = get_the_title($post->post_parent);
  echo $parent_title;
} else {
  wp_title('');
}
?>

That’s all! Quick and easy!!

Source Link

 

05. Display Guest Author Name in The Front Page and Individual Posts

The first thing we need to do is to set a wordpress if statement to get the custom filed value. This way it will only show up when the custom file value is assigned. Open up your “index.php” and “single.php” and paste the following code where you want the author name to show up. It could be after date or after comments. For example after this code:

<?php the_time(’M j, Y’) ?>

<?php if ( get_post_meta($post->ID, 'guest_author_name', true) ) { ?>
// check to see if custom field guest author name exists
<?php echo get_post_meta($post->ID, "guest_author_name", $single = true); ?>
<?php } ?>

Once we put the if statement we just call it on whichever post we want the guest author name to show up. The guest author name should show up on the front page and for specified post only.

Source Link

 

06. How to Display Content in Multiple Columns

Printed magazines often display text in columns, so why blogs shouldn’t be able to do the same? here you can find out how to easily and automatically display your post content in columns.

This code is powerful but definitely easy to implement. Just paste it on your functions.php file and it will automatically output your post content in columns.
Your post content will be splitted on <h2> tags.

function my_multi_col($content){
  $columns = explode('<h2>', $content);

  $i = 0;

    foreach ($columns as $column){
    if (($i % 2) == 0){
      $return .= '<div class="content_left">' . "\n";
      if ($i > 1){
        $return .= "<h2>";
      } else{
        $return .= '<div class="content_right">' . "\n <h2>";
      }
      $return .= $column;
      $return .= '</h2></div>';
      $i++;
    }

    if(isset($columns[1])){
      $content = wpautop($return);
    }else{
      $content = wpautop($content);
    }
  echo $content;
  }
}
add_filter('the_content', 'my_multi_col');
</h2>
</div>
</h2>

Don’t forget to add the following styles to your style.css file :

.content_right, .content_left{
  float:left;
  width:45%;
}

.content_left{
  padding-right:5%;
}

Source Link

 

07. How to Show WordPress Post Attachments

Since WordPress 2.5, attachments management in WordPress have been improved and is now very powerful. Today, we’re going to show you a simple code snippet that you can use in your WordPress theme to display post attachments.

To achieve this recipe, just paste the following code anywhere in your post.php file and attachments will be displayed.

$args = array(
  'post_type' => 'attachment',
  'numberposts' => null,
  'post_status' => null,
  'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
  foreach ($attachments as $attachment) {
    echo apply_filters('the_title', $attachment->post_title);
    the_attachment_link($attachment->ID, false);
  }
}

Source Link

 

08. How to Set Post Expiration Date/Time on Your WordPress Blog

Sometimes (for example, if you’re running a contest), you want to be able to publish a post and then automatically stop displaying it after a certain date. This may seem quite hard to do but in fact is not, using the power of custom fields.

Edit your theme and replace your current WordPress loop with this “hacked” loop:

<?php
if (have_posts()) :
  while (have_posts()) : the_post(); ?>
    $expirationtime = get_post_custom_values('expiration');
    if (is_array($expirationtime)) {
      $expirestring = implode($expirationtime);
    }

    $secondsbetween = strtotime($expirestring)-time();
    if ( $secondsbetween > 0 ) {
      // For example...
      the_title();
      the_excerpt();
    }
  endwhile;
endif;
?>

To create a post set to expire at a certain date and time, just create a custom field. Specify expiration as a key and your date and time as a value (with the format mm/dd/yyyy 00:00:00). The post will not show up after the time on that stamp.

Note that this code does not remove or unpublish your post, but just prevents it from being displayed in the loop.

Source Link

 

09. How to Style Posts Individually

Your blog has a lot of posts, but the posts aren’t all of the same type. To give special styling to one or more of your posts, you can take advantage of both the post_class() function and the post ID.

To apply this trick, just open your single.php file, find the loop and replace it with the following:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

The important part is mostly in line 3. Here, we have added the PHP post_class() function. Introduced in WordPress 2.8, this function adds CSS classes to the post. For example, it can add:

• .hentry
• .sticky
• .category-tutorials
• .tag-wordpress

With these CSS classes now added, you can now give a custom style to all posts that have the sticky tag or those that belong to the tutorials category.

The other important piece of this code is id=”post-< ?php the_ID(); ?>“. By displaying the ID of the post here, we’re able to style a particular post. As an example:

#post-876{
	background:#ccc;
}

Source Link

 

10. Display Content only to Registered Users in Your Wordpress Blog

As you probably know, WordPress lets you decide whether to allow readers to create accounts and sign in to your blog. If you want to increase your blog’s registered readers or would just like to reward existing readers, why not keep some content private, just for them?

To achieve this hack, we’ll use a shortcode. The first step is to create it. Open your functions.php file and paste the following code:

function member_check_shortcode($atts, $content = null) {
  if (is_user_logged_in() && !is_null($content) && !is_feed()) {
    return $content;
  } else {
    return 'Sorry, this part is only available to our members. Click here to become a member!';
  }

add_shortcode('member', 'member_check_shortcode');

Once that’s done, you can add the following to your posts to create a section or text (or any other content) that will be displayed only to registered users:

[member]
This text will be displayed only to registered users.
[/member]

That’s it. Registered users will see the text contained in the shortcode, while unregistered users will see a message asking them to register.

Source Link

 

11. How to Disable Comments in Old Posts via PHP

In many situations like when you’re giving some alert to your readers or warning, and you don’t want to hear any feedback. Or you simply don’t want to have any comments, pingbacks, or trackbacks for respective event. For such situation you really want to know how to disable comments, pingbacks, and trackbacks via PHP in your WordPress blog.

The first step is to create it. Open your functions.php file and paste the following code:

<?php
function close_comments( $posts ) {
  if ( !is_single() ) { return $posts; }
  if ( time() - strtotime( $posts[0]->post_date_gmt ) > ( 30 * 24 * 60 * 60 ) ) {
    $posts[0]->comment_status = 'closed';
    $posts[0]->ping_status    = 'closed';
  }
  return $posts;
}
add_filter( 'the_posts', 'close_comments' );
?>

You can run this script as a plugin, through your theme’s functions.php, or through a custom user-functions.php file. Simply set the desired number of days by changing the number “30” to whatever you would like. As is, this script will close comments, pingbacks and trackbacks on all articles posted more than 30 days ago.

Source Link

 

12. How to Display Registered Users Comment Count on Your Blog

If your blog is private or have lots of registered users, it may be interesting to be able to display the number of comments posted by registered users. This is the purpose of this code.

Simply paste the following code where you’d like the count to be displayed. Re-arrange the code as desired.

<?php
global $wpdb;
$where = 'WHERE comment_approved = 1 AND user_id <> 0';
$comment_counts = (array) $wpdb->get_results("
    SELECT user_id, COUNT( * ) AS total
    FROM {$wpdb->comments}
    {$where}
    GROUP BY user_id
  ", object);
foreach ( $comment_counts as $count ) {
  $user = get_userdata($count->user_id);
  echo 'User ' . $user->display_name . ' comment count is ' . $count->total . '';
}
?>

That’s it! This will get approved comment count for each registered user.

Source Link

 

13. Separating Trackbacks From Comments in WordPress 2.7+

Separating your trackbacks and comments requires a minimal amount of coding work to set up. First, you’ll want to make a backup of your comments.php file just in case something goes wrong. Next, follow these steps:

Access your comments.php file and locate the following code:

<?php foreach ($comments as $comment) : ?>

Immediately after the above code, you’ll want to place this code:

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

Next, you’ll want to scroll down a little bit and locate the following code:

<?php endforeach; /* end for each comment */ ?>

Immediately before the above code, you’ll want to place this code:

<?php } /* End of is_comment statement */ ?>

This will filter out all of the trackbacks and pingbacks from your main comments loop. Now we need to create a second comments loop to display the trackbacks and pingbacks. Now, Almost immediately below the code from last step you should find this code:

<?php else : // this is displayed if there are no comments so far ?>

Immediately before the above code, you’ll want to place this code:

<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != 'comment') { ?>
<li><?php comment_author_link() ?></li>
<?php } ?>
<?php endforeach; ?>
</ol>

Once you’ve got the comments successfully separated from the trackbacks, there are a couple additional tweaks you may want to do to clean up how things look (it really depends on preference I suppose). The first is to clean up your trackbacks/pingbacks by only displaying the title instead of an excerpt and everything else. In order to do this, you’ll need to find the following code in your comments.php file:

<ol>
<?php wp_list_comments('type=pings'); ?>
</ol>

Now replace that code with the following:

<ol>
<?php wp_list_comments('type=pings&callback=list_pings'); ?>
</ol>

Lastly, you’ll need to add the following code to your functions.php file (which can be created if you don’t already have one):

<?php
function list_pings($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
?>
<li id="comment-<?php comment_ID(); ?>"><?php comment_author_link(); ?>
<?php } ?>
</li>

That should clean up the trackbacks/pingbacks section and you can also apply the same changes if you use a plugin to display tweetbacks.

The other thing you may want to do is fix the comment count to only show actual comments, filtering out the trackbacks/pingbacks which are included in your comment count by default. Simply add the following code to your functions.php file (which again can be created if you don’t already have one):

<?php
add_filter('get_comments_number', 'comment_count', 0);
function comment_count( $count ) {
  if ( ! is_admin() ) {
    global $id;
    $comments_by_type = &separate_comments(get_comments('status=approve&post_id=' . $id));
    return count($comments_by_type['comment']);
  } else {
    return $count;
  }
}
?>

So there you go. Now you have succesfully separated trackbacks from comments!

Source Link

 

14. Automatically Resize Pictures on Your WordPress Blog

You know it, a picture is worth a thousand words. But pictures means that you have to resize it, which is alwyas boring.
Happilly, a very cool script called TimThumb can resize pictures for you. The function below create a WordPress shortcode that will make Timthumb use even easier.

function imageresizer( $atts, $content = null ) {
  return '';
}

add_shortcode('img', 'imageresizer');

Then, you can use the following syntax to add an automatically resized image to your blog post:

[img]http://www.yoursite.com/yourimage.jpg[/img]

Source Link

 

15. How to Create a Tweetmeme “Retweeet” Shortcode

Twitter is one of the best way to get quality traffic to your blog. In order to help people sharing your articles on Twitter, you should definitely implement a Tweetmeme button, which display how many time time people RT’d your blog posts.

Just paste the function below into your functions.php file.

function tweetmeme(){
  return '<div class="tweetmeme"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>';
}
add_shortcode('tweet', 'tweetmeme');

Once you saved the file, you’ll be able to display the Tweetmeme “retweet” button anywhere on your posts. In WordPress editor, make sure you are in HTML mode and insert the following:

[tweet]

When your post will be published, the shortcode will be replaced by the TweetMeme button.

Source Link

 

16. Send Article to a Friend by Email

In order to create more traffic on your blog, it can be a good idea to let your readers send your posts to their friends by email.

To apply this recipe to your blog, simply paste the following function into your functions.php file, and that’s all. Hard to do something simpler!

function direct_email($text="Send by email"){
  global $post;
  $title = htmlspecialchars($post->post_title);
  $subject = 'Sur '.htmlspecialchars(get_bloginfo('name')).' : '.$title;
  $body = 'I recommend this page : '.$title.'. You can read it on : '.get_permalink($post->ID);
  $link = '<a rel="nofollow" href="mailto:?subject='.rawurlencode($subject).'&body='.rawurlencode($body).'" title="'.$text.' : '.$title.'">'.$text.'</a>';
  return $link;
}

Source Link

 

17. Automatically Insert Author Bio on Each Post

When you’re owning a multi-writers blog, it is important to show who wrote the post. In case of guest bloggers, it is also a nice way to give credit.

Simply insert the following lines of code into your functions.php file, and that’s all. Author bio will be automatically displayed after each post.

function get_author_bio ($content=''){
  global $post;

  $post_author_name=get_the_author_meta("display_name");
  $post_author_description=get_the_author_meta("description");
  $html="
\n";
  $html.="\n";
  $html.="
\n";
  $html.="
Author: ".$post_author_name."

\n";
  $html.= $post_author_description."\n";
  $html.="

\n";
  $html.="


\n";
  $content .= $html;
  }
  return $content;
}

add_filter('the_content', 'get_author_bio');

Source Link

 

18. How to Fetch and Display RSS Feeds

Do you know that WordPress have a built-in RSS reader? And you can use this feed to utilize in many ways. Here we’ll tell how to import and display feeds in wordPress 2.8 and beyond.

Simply paste the following code where you want the feed to be displayed. Don’t forget to define feed url at line 4.

<?php if(function_exists('fetch_feed')) {

  include_once(ABSPATH.WPINC.'/feed.php');
  $feed = fetch_feed('http://feeds.feedburner.com/catswhoblog');

  $limit = $feed->get_item_quantity(7); // specify number of items
  $items = $feed->get_items(0, $limit); // create an array of items

}
if ($limit == 0) echo '<div>The feed is either empty or unavailable.</div>';
else foreach ($items as $item) : ?>

  <div>
    <a href="<?php echo $item->get_permalink(); ?>" title="<?php echo $item->get_date('j F Y @ g:i a'); ?>">
      <?php echo $item->get_title(); ?>
    </a>
  </div>
  <div>
    <?php echo substr($item->get_description(), 0, 200); ?>
    <span>[...]</span>
  </div>

<?php endforeach; ?>

Source Link

 

19. How to Change Excerpt Length Depending of the Category

Do you ever wished to be able to modify the excerpt length based on which category you are on, without modifying your theme files? If yes, we’re pretty sure you’ll be happy with this hack.

No need to modify your theme files. Simply paste the code into your functions.php file. Don’t forget to change the category ID on line 3!

add_filter('excerpt_length', 'my_excerpt_length');
function my_excerpt_length($length) {
  if(in_category(14)) {
    return 13;
  } else {
    return 60;
  }
}

Source Link

 

20. Create a Function to Get Tags Related to Category

First, here is the function you have to paste in your functions.php file:

function get_category_tags($args) {
  global $wpdb;
  $tags = $wpdb->get_results
  ("
    SELECT DISTINCT terms2.term_id as tag_id, terms2.name as tag_name, null as tag_link
    FROM
      wp_posts as p1
      LEFT JOIN wp_term_relationships as r1 ON p1.ID = r1.object_ID
      LEFT JOIN wp_term_taxonomy as t1 ON r1.term_taxonomy_id = t1.term_taxonomy_id
      LEFT JOIN wp_terms as terms1 ON t1.term_id = terms1.term_id,
      wp_posts as p2
      LEFT JOIN wp_term_relationships as r2 ON p2.ID = r2.object_ID
      LEFT JOIN wp_term_taxonomy as t2 ON r2.term_taxonomy_id = t2.term_taxonomy_id
      LEFT JOIN wp_terms as terms2 ON t2.term_id = terms2.term_id
    WHERE
      t1.taxonomy = 'category' AND p1.post_status = 'publish' AND terms1.term_id IN (".$args['categories'].") AND
      t2.taxonomy = 'post_tag' AND p2.post_status = 'publish'
      AND p1.ID = p2.ID
    ORDER by tag_name
  ");
  $count = 0;
  foreach ($tags as $tag) {
    $tags[$count]->tag_link = get_tag_link($tag->tag_id);
    $count++;
  }
  return $tags;
}

Once you have pasted the function, you can use it in your theme:

$args = array('categories' => '12,13,14');
$tags = get_category_tags($args);

Source Link

 

21. How to Create an Anti-IE6 Plugin

With this amazing code created by Nathan Rice, you’ll be able to serve IE6 users the default WordPress theme. After all, those idiots don’t deserve anything better

Just paste the following in a new file and save it as ie6.php. Upload it to your wp-content/plugins directory and activate it on your WordPress dashboard.

<?php
/*
Plugin Name: Serve Default to IE6
Plugin URI: http://www.nathanrice.net/blog/serve-ie6-visitors-the-default-wordpress-theme
Description: This plugin will serve the default theme to any visitors using IE6.
Author: Nathan Rice
Author URI: http://www.nathanrice.net/
Version: 1.0
*/

add_filter('template', 'serve_default_to_iesix');
add_filter('option_template', 'serve_default_to_iesix');
add_filter('option_stylesheet', 'serve_default_to_iesix');
function serve_default_to_iesix($theme) {
  if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
    $theme = 'default';
  return $theme;
}
?>

Source Link

 

22. How to Check if a Plugin is Active or Not

When working with lots and lots of plugins, it can be useful for developers to be able to check if a particular WordPress plugin is active or not. If you want to check if a WordPress plugin is active, just use the is_plugin_active() function. The function takes a single parameter, which is the path to the plugin, as shown in below:

<?php
if (is_plugin_active('plugin-directory/plugin-file.php')) {
	//plugin is activated
}
?>

Source Link

 

01. Design a Beautiful Website From Scratch

Tutorial Link

02. Create a Clean and Colorful Web Layout in Photoshop

Tutorial Link

03. How to Make a Creative Blog Layout

Tutorial Link

04. Software Layout Design Tutorial

Tutorial Link

05. Awesome Tutorial Portfolio Design

Tutorial Link

06. How to Create a Unique Wordpress Theme

Tutorial Link

07. How to Make a Light and Sleek Web Layout in Photoshop

Tutorial Link

08. Create a Magic Night Themed Web Design from Scratch

Tutorial Link

09. Create an advanced game or clan layout

Tutorial Link

10. Company/Business/Software Web layout

Tutorial Link

11. Create a Professional Portfolio Design in 17 Easy Steps

Tutorial Link

12. Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

Tutorial Link

13. Wordpress Layout Design Tutorial

Tutorial Link

14. Design a simple, modern web template

Tutorial Link

15. Design a colorful theme for wordpress

Tutorial Link

16. Portfolio Layout Design Tutorial

Tutorial Link

17. Web Site Design Tutorial: Wellknown.as Case

Tutorial Link

18. How to Create a Unique Colorful Site Layout

Tutorial Link

19. Design A Clean And Fresh Company Website In Photoshop

Tutorial Link

20. Design an impressive web hosting layout

Tutorial Link

21. Hosting Layout Design Tutorial

Tutorial Link

22. Design a Portfolio Site with a Textured Background

Tutorial Link

23. Create a gritty website layout

Tutorial Link

24. How to Make a Green & Sleek Web Layout in Photoshop

Tutorial Link

25. Create a Clean Modern Website Design in Photoshop

Tutorial Link

26. Web Design Layout

Tutorial Link

27. Design a Minimal and Modern Portfolio Layout with Photoshop

Tutorial Link

28. Create A Stylish Portfolio Layout

Tutorial Link

29. Create a webdesign company layout in Photoshop

Tutorial Link

30. Create an Apple inpired website layout in Photoshop

Tutorial Link

31. Design a trendy business & finance layout

Tutorial Link

32. Create a Sleek, High-End Web Design from Scratch

Tutorial Link

33. Design an elegant, dark portfolio site

Tutorial Link

34. Business Layout Design Tutorial

Tutorial Link

35. Design a Sleek and Modern Hosting Layout

Tutorial Link

36. How to Create a Grunge Web Design Using Photoshop

Tutorial Link

37. Making your own portfolio web page

Tutorial Link

38. Design a Dark, Contrasted Layout in Photoshop

Tutorial Link

39. Create a portfolio/business website layout

Tutorial Link

40. Web Design Tutorial: Blog/Portfolio Template!

Tutorial Link

41. Premium Wordpress Theme Design

Tutorial Link

42. Software Layout Design Tutorial

Tutorial Link

43. Tutorial RocknRolla Blog Design

Tutorial Link

44. Create a Portfolio Layout with Wooden Background

Tutorial Link

45. Create a Promotional iPhone App Site

Tutorial Link

46. Create a Nice Web Portfolio Design with a Watercolored Background

Tutorial Link

47. Designer portfolio layout

Tutorial Link

48. Design a Cartoon Grunge Web site Layout

Tutorial Link

49. Create A Forum Layout Using Photoshop

Tutorial Link

50. Create a Clean and Effective Product Layout

Tutorial Link

51. Design a Clean and Colorful Portfolio in Photoshop

Tutorial Link

52. Portfolio Web Layout

Tutorial Link

53. How to Design a Band Website Layout in Photoshop

Tutorial Link

54. Create a Photoshop (PSD) Template for Joomla or Drupal

Tutorial Link

55. Business Layout Design Tutorial

Tutorial Link

56. Create a Nature Inspired WordPress Layout

Tutorial Link

57. Shopping Cart Design Mockup

Tutorial Link

58. How to Create a “Worn Paper” Web Layout Using Photoshop

Tutorial Link

59. Full Photoshop Web Design – Journal

Tutorial Link

60. How to Make a nice, eye catching web/blog layout

Tutorial Link

61. Personal Portfolio Layout Design Tutorial

Tutorial Link

62. Clean Business Layout Tutorial

Tutorial Link

63. Design a creative unusual layout

Tutorial Link

64. Create a Dark and Sleek Web Layout Using Photoshop

Tutorial Link

65. Wordpress Layout Design Tutorial

Tutorial Link

66. How to Design a Space Futuristic Gallery Layout

Tutorial Link