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 src="icons/1.png" alt="image" width="32" /></a></li>
  <li><a><img src="icons/2.png" alt="image" /></a></li>
  <li><a><img src="icons/3.png" alt="image" /></a></li>
  <li><a><img src="icons/4.png" alt="image"/></a></li>
  <li><a><img src="icons/5.png" alt="image" /></a></li>
  <li><a><img src="icons/10.png" alt="image"/></a></li>
  <li><a><img src="icons/6.png"/></a></li>
  <li><a><img src="icons/7.png"/></a></li>
  <li><a><img src="icons/8.png" /></a></li>
  <li><a><img src="icons/9.png" /></a></li>
  </ul></div>
 </div>

Now lets set up the header of the HTML document. We wan’t an XHTML tranistional document so that all the javascript is compliant and works. We need to reference the Mootools library, and the javascript that makes the stage work as well as the css file. We’ll deal with getting those files later.

<script src="js/mootools-12-core.js" type="text/javascript"><!--mce:0--></script> <!-- MOOTOOLS 1.2  -->
<script src="js/mootools-12-more.js" type="text/javascript"><!--mce:1--></script> <!-- MOOTOOLS 1.2  -->
<script src="js/dock.js" type="text/javascript"><!--mce:2--></script> <!--   IMAGE GALLERY   -->

Step 2: The CSS The trickiest part of the CSS is understanding the fact that we’re making the ul extend beyond the ‘div id=”wrapper”‘. The image below explains how the tags appear with the CSS. The ul element extends because the class “items” has a width of 5000px, and the “wrapper” id has an overflow of hidden. The buttons are floated on either side of the stage, and the text is hidden with the text-indent attribute. To get a tag to conform to specified widths and heights, we use the ‘display: block’ attribute.

body{
background:#232323;
color:white;
}
#stage-container{
margin: 50px auto;
width: 420px;
}
#stage-container .text{text-align: center;}
#stage-container a{outline: none;}
/* — STAGE — */
#stage-container #wrapper{
overflow:hidden;
margin: 0px auto;
width:352px;
height:55px;
background: url(images/stage2.jpg);
position: relative;
}
#stage-container #items{
margin:0px;
padding:0px 6px;
list-style:none;
width:5000px;
position: relative;
}
#stage-container #items li{
float:left;
list-style:none;
margin-right:5px;
padding: 6px 6px;
margin-top: 5px;
}
/* — BUTTONS — */
#stage-container #moveleft{
float: left;
background: url(images/left.gif);
}
#stage-container #moveright{
background: url(images/right.gif);
float: right;
}
#stage-container #moveright,#moveleft{
height: 20px;
width: 20px;
display: block;
z-index: 10;
text-indent: -3000em;
margin-top: 18px;
}

Step 3: The Javascript First, we’ll be using the newly released Mootools 1.2 for this javascript. Mootools is a “compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.” We’ll be utilizing the scroller class and the Fx classes to achieve the entire effects on the icons. Like almost all mootools scripts, we need to enclose the javascript in a dom ready action. What this does is not let the javascript work until all the javascript is completely loaded by the user.

window.addEvent(’domready’, function() {
// Your code here
});

The first part of javascript just deals with moving the stage left and right. We need to tell the javascript where to slide the stage, if it can slide the stage left or right and how much to slide. When a button is clicked it triggers an event to move the slide left or right depending on which is clicked. The slides must figure out though if it can move left or right. We don’t want to move left if there is no icons to the left of the current slide. These issues are what the variables at the top of the javascript deal with.

The image in step 2 will help illustrated how the javascript is working. The unordered list element (ul id=”items”) is being shifted left and right by the javascript (thats why is larger than the stage). The shift is triggered by a hyperlink tag (’a').

var slides = 2; // CHANGE THIS TO THE NUMBER OF SLIDES
var pos = 0; // default setting, start at the first(0) pixel
var offset = 346; // How many pixels the slider should move to get to the next slide
var currentslide = 1; // first slide is the default slide
var items = $('items'); // items variable for the id 'items' in the html
var fx = items.effects({
duration: 800,
transition: Fx.Transitions.linear
}); // the way the items transition is described here
/* Scroll Object Initialized */
var scroll = new Fx.Scroll('wrapper', {
offset:{'x':0, 'y':0},
transition: Fx.Transitions.Elastic.easeOut
}); // the scroll stage is set up here, and each movement will be 'Elastic'
// other tranistions could be linear, quadratic, ect.
/* Trigger to move the slide left */
//when the #moveleft link is clicked, this tells the scroll to move left
$('moveleft').addEvent('click', function(event) {
event = new Event(event).stop(); // don't go to the actual link described in the href
if(currentslide == 1) return; // can't go more left than the first
currentslide--; // currentslide is one less than before
pos += -(offset); // slide the stage left by the offset's size
/* lower the opactiy, slide, then raise back opacity */
fx.start({
'opacity': .3 // the opacity of the icons will become 30 %
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 }); // bring the icons back to 100% opacity
scroll.start(pos); // move the stage to the new position
});
});
$('moveright').addEvent('click', function(event) {
event = new Event(event).stop();
if(currentslide >= slides) return;
currentslide++;
pos += offset;
fx.start({
'opacity': .3
}).chain(function(){
this.start.delay(800, this, { 'opacity': 1 });
scroll.start(pos);
});
});
scroll.toLeft(); // We'll initalize the stage to left most position

The next part of the Javascript strictly deals with what happens when you move the cursor over an icon. We want to make the icon bigger. When the cursor leaves the icon, we need to readjust the icon to different size settings.

$$('.icon').each(function(item){  // for each icon, apply the follow events
item.addEvent('mouseover', function(event) { // when the icon is moused over, enlarge it
var fx2 = item.effects({
duration: 200,
transition: Fx.Transitions.linear
}); // initialize the icon transition properties
fx2.start({
'width': 40,
'height':40,
'margin-top': '-2',
'margin-left': '-5'
});
});
item.addEvent('mouseleave', function(event) { // when the icon is left by the mouse, reset icon
var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear });
fx2.start({
'width': 32,
'height':32,
'margin-top': '0',
'margin-left': '0'
});
});
});

Conclusion Thats all that’s need to create a dock carousel. The icons in the demo are kindly provided by Jonas Rask and Devin Ross. I’ve implemented the dock in the resources section of Tutorial Dog were you can download icons that I’ve created.

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

Next, we need to create buttons that will move the carousel from left to right. First, create a 20px circle shape with the color #232323 using the ellipse tool. Apply the following Bevel & Emboss and Gradient Overlay layer styles.

Now create a new white layer for the reflection. Start by creating another circle shape, and use Direct Selection Tool to mend the shape into the shape you see below. Move the handles (the line that is asymptotic to the path) of each point to change the curvature of the path. Set this layer to blending mode Overlay, and an opacity of 82%.

Next we need arrows to specify the direction. Take the pencil tool set to a 1px brush, and create a arrow out of pixels ontop of the button. Apply the following Drop Shadow and Inner Shadow to give the look that the arrow is imbedded in the button.

Finally for this step, group these three layers in a group and duplicate the group. Then with the group selected in the layer palette, Edit >> Transform >> Flip Horizontal. Place the buttons on either side of the stage.

Step 3: Stage

Now we’ll recreate a the Leopard dock. Fist we need the Leopard wallpaper. Place the image inside the Photoshop document, and use the shape made in step one to mask of the wallpaper layer. To do this, select the shape, and right click and pick “Make Selection”. Now with the selection, make a mask on the wallpaper layer. Click the little link connecting the mask to the image, to disassociate the mask with the layer, so you can move the image around without moving the mask around with it. Place the wallpaper in the correct place.

The next step is to create the shelf, create a white rectangle shape, and use the Direct Selection Tool to select the corners, and transform the shape to give it the perspective of a shelf. Again, we want to use the path of the original stage layer. This time though copy that path and paste the path into the shelf layer. With both paths selected, click the “Intersect Shapes area” button. Set the opacity of the stage to 51%.

Finally, we need to create a swoosh across the stage. Again, we want to create a shape, this time, use the pen tool to create the shape over the stage. Set the opacity of this layer to 14%.

Step 4: Icons

This step is more for mocking up the final product which we’ll be finished in Part 2, but drag 32px icons onto the dock. Space them appropriately.

When creating the icons for Part 2, we need to make sure that the icons are transparent and that the size of the icons are 40px or greater. To get best looking transparent icon, make sure you use the PNG-24 setting in the Save to Web palette. This will create the best looking transparent icon. If you export with GIF, you tend to get more jagged edges that look bad.

Step 5: Slicing and Exporting for the Web

Next we need to slice up the document to get it ready for the web. There should only be 4 slices in this document: the two buttons, the stage and the text. You can name each slice by taking Slice Selection Tool and double clicking on a slice. A panel will pop up with input to rename the slice, that way when you export, it will automatically name the images.

Now that you’ve sliced the image, go to File >> Save to Web… You can change the export setting for each slice, but for this particular document leave each slice as a gif. For more info on exporting, check out this article that walks through exporting for the web in Photoshop. When you go to save, make sure you change the option “Slice:” from “All Slices” to “All User Slices” so you don’t have unnecessary slices.

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 >> Sketch >> Stamp). I removed the background quickly using the magic wand tool, and then applied the stamp filter. The purpose of using the stamp tool is to provide a rough estimate of where the paths need to follow along.

Step 3: Create vector paths

To actually create the paths, I used Adobe Illustrator instead of Photoshop. (I find Illustrator better for hardcore use of the pen tool, but if you are more comfortable with Photoshop, it’ll do the job too.) I took both photos as well as both photos with the stamp filter applied, brought it over to Illustrator, and created pen paths using the photos as a guide. I provided some detail for the jacket and tie, but for the most part, you want make the area below the neck a long rectangle. Since the Obama’s photo had him wearing a suit and tie and I want some conformity, I copied the vector and added McCain’s head to the suit and tie. I used the dark colors from the palette below I found on Colour Lovers and made the Obama vectore blue: #2140A2 & McCain red: #BB1A1A.

Using Illustrator: If you are going to use Illustrator for creating the vectors, copy and paste the four images (photos and stamped photos) from Photoshop into an Illustrator document. I made sure that each photo was on it’s own layer, and locked each of these layers. I created the Obama and McCain vector paths on their own separate layers as well. It’s a good idea to place the photos on their own locked layers because you won’t be able to edit the images in Illustrator, and you will be able to quickly turn off a photo layer at will. I created the silhouettes of the characters using a 2 pt stroke path, then create shapes filled with the correct color to show details for the candidates hair, eyes, mouth and chin.

Step 4: Creating the Pattern

Now we want to bring the vector paths back into Photoshop to create the pattern. I created a large document (3500 square pixel to be exact) so that there was space to create the pattern and also have high resolution vectors. Copy and paste Obama and McCain to their own separate layers as “pixels” (making sure they were of equal size proportions). I applied an outside stroke using Layer Styles to each candidate so that the pattern could smoothly transition from one vector to the other. Started to create the pattern by duplicating the layers and placing each vector layer above the next. Once you have a few repeats in the column pattern, duplicate the column, and make another row so that they are next to each other, but offset the pattern so that Obama and McCain are directly looking at each other.

If you’ve ever made a complicated and precise pattern, you’ll know that to make the pattern repeat correctly, you’ll need to pick a spot in the pattern, and then find that exact same spot in the pattern again. What helped me was to use the guides to dissect Obama & McCain at their noses. (To make a guide by clicking on the document ruler and drag out onto the document) To start the pattern on the left, I aligned a guide snug against the beginning of McCain’s nose. I could easily place the right end guide by finding the beginning of McCain’s nose horizontally to where it touched the other guide. For the top and bottom guides, I again used their noses to find the area of repeat.

Using the guides helped properly align the pattern as well. When I created the pattern initially, some of the face offs (when the two where looking directly at each other) where slightly off because I began manually repeating the pattern. Using the guides help reveal and solve the problem. Once you properly align the pattern and created guides, take the rectangular marquee selection tool, and create a selection along the guides. To make the pattern, go to Edit >> Define Pattern…

To apply the pattern to a layer, take the paint bucket tool, and set the fill to ‘Pattern’ and pick the pattern just made.

Step Five: Creating the Wallpaper

I created a new document at 2560 px by 1600 px dimensions. Since I wanted to tilt and reduce the pattern size, I created another 12000 x 12000 px document (yes those dimensions are correct) and filled the document with the pattern. Once Photoshop filled the document with the pattern (it took a while on my machine) I brought the layer over to the wallpaper sized document and rotated and reduce the layer.

I took a photo of aged paper and put it on top of the pattern layer. I duplicated the paper layer and set one layer to Blending mode Lighten at 9% opacity and Multiply at 46% opacity.

I then created a white layer above the pattern set to Soft Light blending mode at 28% opacity. What this does is make the colors in the pattern look more faded and worn. Then I created a new layer to darken the outer edges of the wallpaper. To give the effect of light shining in the middle, I added a radial gradient set to Overlay at 10%.

Final Result

Step 1: Obama 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 darken his appearence. It’s up to you to decide how dark you want certain areas, but I wanted to make his hands and shirt appear lighter, so I made sure not to darken these areas too much. You’ll want to keep one side of Obama’s face brighter than the rest so that it appears light is hitting that area.

Step 2: Color Background The next step involves creating the lighting behind the person. While you may be tempted to use radial gradients, I found using a soft low opacity brush did the best job. You want to keep the hardness of the brush to 0% and the opacity between 5% and 15%. Don’t be afraid either to keep all colors on one layer. The colors were the basic CMYK colors of Cyan (#019CFA) Magenta (#EB00C0) and Yellow (#F5DC08).

Now that there is vibrant colors behind Obama, create a new layer above the colors layer. Take a white low opacity brush again, and lighten up the most vibrant part of the previous layer. This helps give a more realistic feel to the lights.

Take a white brush again and on a new layer paint softly the area above Obama’s shoulders. Then set the blending mode of this layer “Overlay” and duplicate the layer. What this does is create the appearance of a burst of light directly behind Obama. As a final measurement to liven up the background, create a new layer filled with white, and set the blending mode to Overlay. Set the opacity of layer to 45%.

Step 3: Background Texture For this next step, we’ll require the two free Watercolor Textures from GoMedia’s Arsenal website. You can find the watercolors under “Freebies”. Desaturate the red and yellow watercolor ( Image >> Adjustments >> Desaturate ) and invert ( Image >> Adjustment >> Invert ). Set the blending mode of this layer to “Screen” so only the light shows through. Reduce the size and place the texture at the bottom left of Obama. For the blue texture, desaturate the layer, and set the blending mode to “Multiply”. Rotate and place this layer at near the top portion of Obama.

Step 4: Background Dots First create a new layer above everything but the photo of the person. This step will deal with using the brush tool and it’s settings. Set the brush to a diameter of 9 and a hardness of 100%. In the Brushes palette, set the Size, Scattering and Opacity Jitters up to 100%. Also set the spacing to 1000%. This will change the settings of the brush to create non-uniform circles randomly around the document. Once you’ve create a decent amount of circles around the lights, set the layer to blending mode “Overlay” and duplicate the layer.

Step 5: Smoke

On a new layer, take a small semi-soft white brush and make a scribbled line. Apply the Wave filter (Filters >> Distort >> Wave); the settings below worked for me. The take the Smudge Tool at 60% Strength and begin to smudge the line in an upwards direction. You can move around a whole section, but a key to creating a more flame look, only smudge the upper half of and particular section the scribble.

I used the eraser tool to remove and darken some parts of the smoke. The next step is to give some color to the smoke via Hue / Saturation menu. Choose the colorize option, and move the saturation and Hue to the right, and the lightness to the left.

Another Way to do this by using stock photography of smoke. I took a stock photograph of smoke against a black background, and like the texture behind the Obama, you can set the blending mode to screen to get rid of the black background. I used a black brush to darken the smoke at the edges, and resized and changed the coloring.

Conclusion That’s all folks. If you give this tutorial try yourself, please feel free to leave a comment with a link to the image below. You can find the little Obama logo on his own download webpage. I’m including the PSD for this tutorial as well.

Start Large, then downscale. The most important thing to know BEFORE you start, is to start BIG. Working on a large document will allow you to zoom better but more importantly downscale all the minor imperfections you would see at a larger size. Start at least twice (four times is optimal) the size of what you expect to be the final image size.

Step 1: Outline

For this tutorial, I’ll draw Kobe Bryant from an image. One great thing is you can draw an outline right on top of the image. Create your document (remember 2x or 4x it’s intended size) and import any reference images making sure you resize the image to take up the appropriate space in the photoshop document.

Setting Up the Brush with Tablet

The first thing you’ll want to do is create a new layer for the outline. To set up the brush controls, take a hard round brush (the size depends on the size of the document). To enable the tablets input, we need to access the Brush palette ( Menu Bar >> Window >> Brushes ). First set the spacing to 1% under the “Brush Tip Shape” option. Next enable the “Shape Dynamics” and set the Size Jitter control to Pen Pressure & the Roundness Jitter control to Pen Tilt. Since my tablet doesn’t have tilt support, you see a caution sign next to the tilt control. The tilt isn’t necessary, and you may even want to remove it even if you have the ability.

The brush settings

Tracing Tips: Now that you’ve set up the brush, you can trace out the photo. If you pay close attention to the video, during the tracing stage, I traced the outline two different ways. The first way which you see in the beginning, I made the outline of thick solid lines. Later on, I switched up and made the brush size smaller and created more swift short strokes to get a smoother and accurate line. I then took the eraser and cleaned up the up the line. The reason I switch to a more sketching type approach was because the lines I was creating with on solid line was not coming out as I intended. (Thats why you see me undo a lot in the beginning.) Lock this layer so that you don’t alter it in later steps.

Step 2: Coloring

Once you’ve completely traced the image, create a new layer for each color you intend to use. Put these layers below the outline layer, and fill in the drawing. Naming each layer is a good idea so that your organized. I use only a few colors because I’ll add depth in the next step. Keep within the lines!

Color the outline on different layers.

Step 3: Shadow & Highlight

Again, create a new layer above both the outline and the color layers. For this step, we’ll be dealing with soft brushes with low opacity, because you want to avoid sharp lines in the shadow. Generally, when I add depth the opacity of the brush is 3-5% and no greater than 12%, . To add a shadow, use a black brush and a white brush for highlights. The photo was a great reference to know where the shadows and highlights where. Keep in mind that you can always undo, and just mess around and see what you come up with. The time drawing I made in the time lapse took 5 and a half hours to create start to finish.

The shadows and highlights.

Adding depth to the face

The face of the subject is trickiest part of this tutorial. If you look at a face, there are a lot of bumps & curves and thus a lot of subtle places to shade. For the eyes, there is a shadow cast under the eyebrows, and light on the top of the eyelid, then shadow on the lower eyelid followed by light cast on the cheek. There is light shining on the forehead, the nose, the top of the lip under the nose and the top of the chin.

Places to shadow and highlight on the face

Conclusion

There you have it. All you have to do now is tie up and lose ends and downscale your drawing. When you downscale, you’ll suddenly know why I told you to start big.

If you follow the NBA, you’ll know Jason Kidd was traded from the Nets to the Dallas Mavericks. (While I like Jason Kidd and he is a great player, giving up Devin Harris was stupid on Mark Cuban’s part). If you’re like me and want the wallpaper of his shoe to match his current team colors instead of his old team colors, then you’ll have to turn to Adobe Photoshop. This tutorial will show you the best way to change the colors of the shoe easily and quickly.

You may already know since Photoshop CS 2, there is the color replacement brush, but the tool isn’t always the most effective tool. The color replacement tool also applies it modifications directly on the photo layer so is a “destructive” process. If you’ve played around with the color replacement tool, you’ll know that the process of using layers (as shown in this Photoshop tutorial) is basically the same process.

Get the Resources

Grab a wallpaper from the Nike Basketball website or the Jason Kidd wallpaper. We’ll also need the Dallas Maverick Team colors. For the main color, we’ll use the light blue #009CFF and accent it with the dark blue #010C22.

The orignal shoe wallpaper done in Nets team colors.

We’ll use the Mavericks team colors to re-color the shoe.

Pen Tool

Take the pen tool (set to the shape layer option) and start to outline the red toe of the shoe with the color set to the light blue. Try to cover all of the red area, but if you let a sliver of red show, you can always fix the points later.

Blending Mode: Color

Here is where the magic starts. Simply set the pen tool layer you just created in the previous step to blending mode “Color”. To do this, in the Layer palette click on the shape layer, and change the first drop down menu from “Normal” to “Color”

Continue to outline each part of the shoe where the color needs to be changed. This includes the swoosh logo, tongue and sole of the shoe. Again, setting the layer blending mode to color. I used the dark blue to color the laces, and the light blue everywhere there was red on the shoe.

To illustrate how the coloring mode works in Photoshop, try to imagine that the photo is comprised of two layers, one that contains the color of the photo and the other contains the black and white of the photo. The black and white layer contains the shadows and highlights and the color layer contains just solid blocks of vivid color. Its hard for color to show through when a part of the black and white layer is extremely light or dark. By setting the blending mode to color of the shape layer, you are only changing the color layer of the photo to different colors, in this case light blue. What is great is that the layer isn’t obstructing the shadows and highlights so it appears as you are just re-coloring the shoe.

Coloring Dark and Light Areas

If you try coloring a white or black part of the shoe, you’ll notice the colors don’t really stand out. This is because color doesn’t show in extreme shadow or light. If you want to color one of these areas, for example the inside of the Nike swoosh on the shoe, you’ll need to bring up (or down for a light part) the luminosity. Outline the area you want to change with the pen tool just like you would if you were going to set the layer to color. Instead set the color of the layer to white and set the layer blending mode to “Luminosity”. You will need to bring the opacity of the layer down quite a bit, but now simply duplicating that layer above the luminosity layer and setting it to blending mode “Color”, you can apply color to the layer.

Using the light blue color and the brush tool, you can color the text of wallpaper blue as well. You can brush over the entire text then use the magic wand tool to select the outside of the text and deleting the selection. Again set the blending mode to color.

Download Jason Kidd Shoe PSD

Find A Reference Image

Apple’s website has high resolution photos of the iPod Shuffle to reference when creating you own Photoshop layered document. Using a reference image will help make sure the measurements & proportions are correct.

Mark Image With Guides

The next step is to put in guides outlining the Shuffle. First, make sure the rulers are showing in the top & left of the Photoshop document window. If not, go to the menu View >> Rulers. By clicking & dragging the top ruler in the document, a horizontal guide will appear where you let go. A vertical line can be made just the same by dragging from left ruler. Creating guides on the edges of the player and guides that are tangent to click wheel.

Create the base of the unit using a Round Rectangle

Take the rounded rectangle tool (make sure ‘Shape Layers’ is select in the option panel) and drag out a 5 pixel rounded rectangle. If you’ve set snapping to guides, it should be fairly easy to create the rectangle to the same proportions. You now need to adjust some of the anchor points on the path because the object isn’t a perfect rectangle. You can move the anchor points using the Direct Selection Tool Pointer (directly above the Pen Tool and other shape tools). You may also want to change the curvature by dragging the handle points that radiate from an anchor point.

A close up of one corner shows the two points lining up to the grid. The points have been moved slightly moved to conform to the shape of the Shuffle.

Apply Gradient

To add depth and realism, we’ll use a gradient to imitate the effect of light on the object. Because the Shuffle is round on the sides, the shadow will likely be around there. Where there is a shadow, there is usually a highlight, which occurs where the flat part of the object meets the rounded part. To apply a gradient to the rounded rectangle creating in the previous step, go to the menu Layer >> Layer Style >> Overlay. Because the shadow occurs uniformly on either side, it will pay to reflect the gradient on either side. This way you don’t have to repeat the gradient twice. You’ll want to play with the gradient to get the realistic look. You’ll need to play around with your settings until you feel you have something that is realistic. I provided a screen grab of what I came up with.

Create The Button Surface

For the click wheel, we will require the ellipse tool. First make a circle shape that encompasses the entire click wheel. Now in the options palette, choose “Exclude overlapping shape areas” (Figure 1). If you’ve used Illustrator, the options to set how shapes will interact with each other is found in the Pathfinder palette.

Figure 1. The shapes tools options set to exclude overlaping shapes.

Now create the inner circle to make the ring that is the click wheel. Make sure the fill of this layer is white.

Apply A Layer Style To The Click Wheel

The next step again involves applying a layer style to a shape. This time though a bevel & emboss and a stroke will be applied. The stroke is a simple 1 px gray line around the shape. The Bevel & Emboss is more or less something that you need to play around with to get the right look. I’ve provided my settings for each.

The Stroke and Bevel & Emboss settings for the click wheel.

Button Symbols

The play/pause, forward, back, volume up & volume down buttons are simple rectangles and triangles. Use the rectangle tool, and the polygon tool set to 3 sides (set this in the options palette) to create these shapes.

Create A Realistic Metal Surface

One small touch you can add is a grain to the metal. Without the grain the look of metal looks a tad too much like plastic. You’ll want to start out by duplicating the shape layer of the entire iPod Shuffle and set the color to black. From the menu, select Filter >> Noise >> Add Noise. You’ll have to rasterize the layer. Set the filter to around 100% with Gaussian and Monochromatic.

Take the opacity down to around 1% – 2% opacity and set the blending mode to multiply. You’ll then want to add a mask to this layer. With the gradient tool, you’ll want to drag a gradient from the top left to bottom right of the iPod Shuffle so that the mask allows to layer to show through the top left of the iPod. Generally, you’ll want the noise layer to show through where the object shines, and mask out where there is shadow. Small touches like this can do a lot for imitating the look of a metallic surface.

The Final Result

This is Shuffle uses the same concepts covered in this tutorial.

iPod Shuffle Photoshop Documents

To complete this tutorial, you will need Adobe Photoshop (or any other image editor that will export transparent TIFF files), Xcode and CandyBar installed on your Mac. Xcode is Apple’s free software development kit. You should be able to install Xcode from your computer’s install disk or download it off Apple’s Website. It’s also important to note that the newest version of Mac OS X, Leopard has moved to a maximum 512 pixel icon sizes. CandyBar allows you to organize your icons.

Designing The Icon

Designing the icon is up to you and your imagination. Here is a list though of things to keep in mind when designing your icon.

• Apple Human Interface Guidelines Apple has there own set guidelines and rules to which they expect icons to be created by.
• Plan Your Icon For Scale Like designing a logo, you need to be able to scale your icon from 16 x 16 pixels all the way now to 512 x 512 pixels with Leopard. For the 16 pixel icon you may want to take out elements. For example, for my RSS icon, I’m eliminating everything but the orange rss button.
• Leave Margins for Your Icon You don’t want one icon to outwieght the others because of it’s size.

Exporting The Icon

I’ve create an easy to use Photoshop Template just for mapping out each icon size. This way you don’t have to bother creating multiple size documents and what not. Simply drag and drop the icon layer(s) onto the template and the duplicate and resize according to each size on the template. At this time you may want to sharpen icons at smaller sizes to give them more definition. Remember: you can use Fade controls (located under the Edit menu) after using the sharpen filter.

Now that you’ve completely resized your icons and are ready to make them into an icon, hide the back drop layer. Then go to File >> Save As. You want to format the document as a TIFF file with the options, “Layers” unchecked and “As A Copy” checked. A TIFF Options dialogue box should appear after hitting the save button. It’s important to have Compression set to “None” and “Save Transparency” checked. This way, the icon comes out exactly as you intended.

Important TIFF Settings to getting the best looking icon

Now all you have to do is duplicate the TIFF file four / five times (one for each size), and crop the file to elimante all other icons. Knowing where to crop the documents should be simple because the guides still remain from the Photoshop document.

Using Icon Composer & CandyBar

Icon Composer is located in the Applications >> Utilities in the Xcode folder. Once you’ve opened the application, creating the icon is easy as dragging the TIFF files over their appropiate sizes. Agree to Extract Mask when asked. Save a fresh ICNS file. The icon shouldn’t yet appear as the actual icon on the document. This is where CandyBar comes in handy. Just drag the .icns file into CandyBar and then drag out the icon image show in the application.

Icon Composer is as simple as dragging and dropping the TIFF files on to its appropriate spot.

Exporting a TIFF, and not a transparent PNG file from the Export to Web menu proved vital especially when exporting transparent images. This particular icon, when made into an icon using an exported PNG file will cause the smoke coming off the RSS to pixelate. This pixalation is fixed though when exported a TIFF file with tranparency.

Set the stage. Take a dark photo will very little color so you can see the X in proper lighting. If the X were against a white background, it would be hard to see the highlights of the edges in the later stages of this tutorial. This desatuared Cosmos Wallpaper will do the job to achieve this.

Type out the ‘X’

Take the text tool and type out the capital letter ‘X’. I’ve found that the “Myriad Pro Bold” font creates a close resemblance to the real X used in Apple’s artwork. Make the size of the X around 800 pt. (Remember, its always better to start large, then scale down when you are finished.) Set the color to the default black.

Gradient Overlay Layer Style

Next, apply a layer style effect to the ‘X’. To access the layer style palette, with the X layer selected, go to the menu under Layer >> Layer Style >> Gradient Overlay. Set the opacity to 9% and the angle to -90 degrees.

Bevel Edge

Right click the ‘T’ corresponding to the text layer and choose “Select Layer Transparency”. Create a new layer above the X and fill in the selection with the color #4c4c4c. After that, go to Select >> Modify >> Contract… Contracting the selection will reduce the size of the selection similar to how a image transform would. Depending on how large you’re, you’ll want to change the contraction size, but the particular size I made the ‘X’, I’ll choose 3 pixels. Now with that new layer still select, hit delete so that the new layer trims around the ‘X’.

A small subtle trim will give the effect of depth.

Dodge & Burn Tools
Its time to take out the dodge and burn tools. These tools are very good for a situation like this because they won’t add any new pixels and the tools won’t harm layers other than the one that is selection. With both of these tools, make sure you use a brush hardness of 0%. This will stop any harsh lines created. It takes a while to get the setting right for the situation, but I’ve found the dodge tool works great at a Range of Shadows and Exposure at 21% (changes these in the options palette). For the burn tool, a Range of Shadows and Exposure set to 6% (yes that 6%, these tools need little exposure have an effect on the image). Add highlights and shadows to the trim layer just like you were painting on it.

The dodge and burn tools should add perspective and proper lighting to the ‘X’.

Use the Selection Tool As A Mask
A great way to create an edge is to take the square marquee selection tool, and create along the crease of the ‘X’. Take the dodge tool and brush inside the selection, then go to Select >> Inverse and burn the other side.

Using the rectangle marquee tool is a great way to create edges at joints in the ‘X’ when using the dodge and burn tools.

Gloss

Last but not least is the large gloss reflection that will come across the X. Create a new layer and select the pen tool. With the paths option chosen from options palette, create a swoosh across the ‘X’ and close the pen path outside & around the ‘X’. Take the Path Selection Tool (the point just above the pen tool) and right click on the path and pick “Fill Path…”. Fill the path with white. Again using the “Select Layer Transparency” from the X text layer, create the selection and go to Select >> Inverse and delete the white outside the X.
Change the opacity of the gloss layer to around 40%. Create a layer mask for the gloss layer. Take a white to black gradient set to radial, and drag a gradient from the left side of the X where the reflection appears on the X to about 200 pixels past where the reflection leaves on other side of the X. With a large black brush set to 0% hardness (we don’t want any edges) brush along top left of ‘X’ to fade out some reflection.

Final Result

Download PSD

First off, I got this incredible photo of the puppy free off Flickr. This particular photographer ny156uk has some great photos for commercial use. You can find more free photos for commercial use on Flickr by doing an advanced search.

Figure 1. The Original Photo (Aww how cute)

Before starting, keep in mind that it is important to name your layers and lock the original photo layer. We’ll be creating a few duplicate layers and adding a title will help distinguish the subtle changes of each layer. We also want to keep an original photo layer so that we’ll have the original photo to work off from and not one that has already been altered.

Increase Saturation & Set the Layer Blending Mode to Color

First duplicate the original layer, again we do not want to change the original photo layer. To duplicate the layer, click on the photo layer in the layer palette and either go to the menu under Layer >> Duplicate Layer… or hit the command ctrl + j. Name this layer ‘Color’. Now with that new duplicated layer selected, go to Image >> Adjustments >> Hue/Saturation (or ctrl + u). Drag the Saturation Slider to the right to about +65 (Figure 2). What this does is makes the colors more vibrant. Click OK to close the Hue/Saturation menu. With that layer still selected, change the blending mode to ‘Color’. To do this, go the Layer palette, click on the drop down menu where it says ‘Normal’ (the top most left item) and at the bottom of the list there will be an option called ‘Color’. By setting the layer to Color, we’ll keep the vividness of the colors, while not distorting the photo.

Figure 2. The saturation of the photo is turned up so the image looks distorted.

Apply The Sharpen More Filter & Fade

Duplicate the original photo again. This time apply the sharpen more filter (Filter >> Sharpen >> Sharpen More). The sharpness should be overkill, but there is an easy way in Photoshop to undo part of this effect. Go to Edit >> Fade Sharpen More…. This menu will allow you to change to opacity and blending mode of the filter. For our purposes, we’ll just change the opacity to 20%. NOTE: You can only fade a filter directly after you’ve applied it. You can’t come back to it after Photoshop’s history has logged some other action.

Figure 3. The fade menu almost “undoes” the sharpen more filter.

Overlay Radial Gradient

Figure 4. The photo with a radial gradient set to overlay

The next two steps will concentrate on making the dog the focal point of the image. Create a new blank top layer. Take the gradient tool, and with a white to bl ackradial gradient drag out from the center so that the circle is white and the outer regions fade to black. You may need to adjust the size of this circle, but make sure the circle covers a large span. Now set this layer to blending mode Overlay with an opacity of 55%.

Multiply Radial Gradient

Duplicate that radial gradient layer. Change the blending mode to Multiply and opacity 25%. Now go to Edit >> Adjustments >> Levels (Ctrl + L) and drag both black and gray sliders closer together. What this does is make the distance between black and white closer.

Download PSD

Reduce image sizes to the size it will appear at on the web page!

There are two reasons to do so: reduce file size and downsized images look bad in web browsers.

• You can save bandwidth by optimizing your images to the size they will appear on the web page. If you want, you can create a thumbnail image for the web page, and link to a larger version.
• While the Safari web browser is good at reducing images, web browsers like Internet Explorer and Firefox don’t do that well at showing images at small sizes than they are made for (it can make the image look really bad, trust me).

Gallery images
If you don’t want your readers click off the web page to view a large image, there is a cool solution to this problem. Litebox is a script that allows you to pop up an image in the web page to show a large version of the image. The script isn’t that large of a file size and can improve the usability of your site.

Image Compressions Formats

The three standards currently are JPEG, GIF, and PNG. Each format has its upside and downsides, but if you use the right format for your situation, everything should be fine.

1. JPEG or JPG is a the best format to use for images like photos. There is no transparency with jpeg images.
2. GIF is the best format for web graphics and illustration type images. GIF is great for graphics because the color palette, unlike a jpg image, is limited to 256 different colors. This allows a gif format to boast smaller file sizes, while retaining good detail when a graphic image is exported. GIF can also export images with transparency, but can leave jagged edges.

   Figure 1. This is how a Gif image looks at different color ranges.

3. PNG is a competitor to the GIF format. There are two versions of PNG, 8 and 24. Version 8 is very similar to GIF, so the one to look at is 24. PNG 24 can sport great detail that one would want from a jpg image, but is able to compress the file size better. PNG 24 also allows you to export transparent images that would appear jagged with exporting with gif.

Exploring Export To Web… in Photoshop

Photoshop has a simple to use mini application in Photoshop thats sole purpose is to get images web ready. To get to it, go to the Menu Bar, File >> Save for Web… A large window will open up with the document you have open in the new window. To the right you’ll see the options for which file format to compress at. The only two options you need to worry about is the compression formats (GIF, JPEG, PNG-24) and colors for gif and image quality for JPEG. For PNG-24 you need to set whether the image is transparent or not. If you go to the 4-up tab, Photoshop allows you to compare 4 different exporting settings. The image size of each export setting is stated under the image along with the compression settings. You can test whether its worth it to limit the color palette of a gif image, or if bringing down the jpeg quality is noticable.

Changing Image Size
As stated before, you want to compress the image to the actual size at which they will appear on the web page. You can easily change the size of the image with in the window so that you don’t have to worry about reducing the document. To the right of the image and under the compression options, you’ll see to tabs, ‘Color Table’ and ‘Image Size’. Click on the ‘Image Size’ tab and you can easily punch in a new image size. Make sure to check the ‘Constrain Proportions’ and hit the Apply button.

• When exporting transparent images, your best bet is with PNG-24. The file sizes tend to be larger, but they provide spot on quality.
• When dealing with vector art, cartoons or any type of clip art, your best bet is GIF compression.
• When dealing with photos, the best bet is JPEG compression.

Type out your banner text and curve the text

Type out the text you want to go on the banner and then select the text and click on the “Create warped text” button located in the Options Palette. Create a subtle curve, because later you want to create the banner and if its curve too much, it will look awkward. I added some depth to the text.

Figure 1. Warped Text with Layer Style

Create A Background Object

This is optional, but you can create something like a heart or a plaque to which the banner can be in front of. It adds visual appeal and adds height to the graphic. I simply took the heart shape from the shape presets and added a gradient to add depth.

Figure 2. Heart Shape with Gradient Overlay Layer Style

Use the Pen Tool to create the primary part of the banner

Take the pen tool, and pen out a banner the aligns with the curvature of the text. You’ll want to slightly curve the ends of the banner. As a side note, you can also take the square tool and try manipulating the shape to create the effect you want. Add a drop shadow and a black to white gradient set to overlay to add depth and realism.

Figure 3. The banner layer goes under text layer. The banner needs two layer styles, a gradient and drop shadow.

Create the second fold of the banner

This fold adds accent to the banner, but it is tough to make the fold to look right. My tip is to try to start adding pen tool points where the primary part of the banner would end. By starting the path behind the banner, its easier to conceptualize where the next point should go. Do this step for one side of the banner as you can copy and flip the path later. Copy the effect from the primary part of the banner by right clicking and copy the style effect and past it on the new layer.

Figure 4. The first fold should look like an extension of the previous part.

Create the end of the banner

Like step 4, try to create this part of the banner like an extension of the previous part. Close the banner so that the ends look like a ‘v’. Again copy and paste the style effect over to this layer.

Duplicate and Flip the second fold and the end of the banner

To duplicate the layers, select both and go to Layer >> Layer Duplicate. Then to flip the two shapes, go to Edit >> Transform >> Flip Horizontal.

Download PSD