Toluu

Tutorial Dog

Man's best friend for learning

Javascript Dock Carousel Using Mootools (Part 2)July 21 2008

This tutorial is the second part of a tutorial that will build a javascript carousel that imitates the Mac OS X dock. In part one, we build a mock up in Photoshop and exported the nessecary images. In this part, we’ll take those images and build it into a HTML & CSS. Then we’ll use javascript to make if interact.

Demo Files

Step 1: The HTML

To keep things organized, we’ll seperate the files into there own folders. So we’ll have a “js” folder to keep all the Javascript files, an “images” folder to hold all the webpage images, and a “icons” folder to hold the icon images. What needs to be in the HTML? Well, the links to move the stage left and right, the stage and all the icons and finally the text image. The “wrapper” class you will see later enables the icons on the next slide to hide. The icons are there own list elements.

<div id="stage-container"> <img src="images/text.gif" alt="image" width="111" height="24" /> <a id="moveleft">Left</a> <a id="moveright">Right</a> <div id="wrapper"> <ul id="items"> <li><a><img class="icon" src=

Javascript Dock Carousel Using Mootools (Part 1)July 14 2008

Follow part 2 of this tutorial here. This tutorial will take you through creating the initial mockup in Photoshop, and creating a usable carousel that imitates the Mac OS X Leapard dock. This tutorial we’ll acquiant you well with creating a slick button, and using the shape tools. We want to deal with shape layers instead of pixel because of the non-destructive nature of shapes. Non-desctructive shapes means you can edit and scale without distortion.

Step 1

Create a photoshop and create a new document 540px x 308px. Fill the background with #232323.

Take the Rounded Rectangle Tool, set it to a 5px radius and create an object that is 350px by 50px. Make the color of this shape layer #303030. Make sure you have the tool set to the “Shape Layers” option instead of the paths option. That way, you are creating non-destructive shapes so you can go back and edit & reference them later without compromising distortion. Next, type out “CAROUSEL” (or whatever you like) at the top of the document with the color #080808. Find a good serif font like “Myriad Pro”. Apply the Inner Shadow below layer style to the text.

Step 2: Buttons

Design Video Round #2July 7 2008

In the Hip-Hop edition of the Design Video Roundup, we’ll be diving deep into the world of hip-hop and design. Also, we dive into more animated typography, and Photoshop tutorials.

Pulp Fiction Typography Video

Another animated typography video, this time it’s done with one of my favorite movies Pulp Fiction. Nothing beats Sam Jackson with a Jheri Curl. I must warn, the contents of the video is a little explicit.

Music Video

This isn’t the most relevant video, but the music video has some cool animation effects with the boom box in the beginning plus the music is pretty good, and the breakdancing animals really are funny.

Design Code Rap

Now you probably think it’s another one stupid video like Ridin Nerdy, but this rap isn’t that wack. It’s pretty informative if ya listen closely.

Add Focus To Your Photo & Grab Attention

This is the video to the photoshop tutorial I wrote a while back.

Create a Leopard OS ‘X’

Statistically the most popular article on Tutorial Dog, garning over 43, 000 pageviews and 6,000+ video views.

Presidential Pattern in Photoshop - McCain vs ObamaJuly 1 2008

In this Photoshop tutorial, we’ll dive into a pattern inspired by the artwork in the Stephen Colbert book “I Am America (And So Can You)” (the book has some very good illustrations). The tutorial will cover creating vector artwork from a photograph, taking the vector artwork and making a repeatable pattern and then creating a groovy wallpaper that utilizes the pattern. For the pattern, we’ll pit Barack Obama versus John McCain. As one reader pointed out in the last tutorial which featured only Barack Obama, we’ll feature both canidates in the upcoming Presidential election.
Download PSD Files

Step 1: Gather resources

First we need to acquire two profile photos of Barack Obama and John McCain. These two photos will help create vector illustrations of the candidates. For creating a wallpaper texture, we need a good paper texture.

Step 2: Setting up the photos to vectorize

We need to create simple two tone vectors for Obama and McCain and to help us in creating the vector we’ll use the Stamp filter (Filters >>

Barack Obama’s Coldplay iPod + iTunes Commercial in PhotoshopJune 13 2008

This Photoshop tutorial will guide you through creating an effect in the vein of the most recent Coldplay iTunes commercial. The Coldplay commercial uses colorful backdrops, with various textures, smoke and lighting effects. For this tutorial, we’ll take a photo of Barack Obama, mask it, create a silhouet and create the colorful background. This tutorial includes a download to the PSD file so you can see how the layers are set up.
Download the Final PSD

Step 1: The Person

I start out with a 1200 px x 800p x document with a black background. For the tutorial, I’ll use a photo of Barack Obama on Flickr. First, we’ll need to take the photo and strip Barack of the background. To do this, create a mask for the photo layer, and blacken out the mask layer with a hard brush around Obama. Once you’ve completely masked out Obama, bring the layer over the 1200 px by 800px document. Desaturate the layer by going to Image >> Adjustments >> Desaturate. Next you need to take a large soft black brush with a low opacity and dar