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: 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 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.

Science Machine

This first video is a time lapse of the creation of an illustration called “Science Machine”. The work is amazing & concept is equally amazing. The art mixes all types of science and life in all forms.

Mootools Presentation

Next up is a more technical video of someone explaining the Mootools framework and its competitors ect. Not as cool as the first video, but still worth the watch if you’ve got time.

Who’s on First? Typography

This next video is a video of a cool use of typography and video. It takes a famous skit, and makes the text come alive while the audio is playing.

Photoshop Banner

I made this video well after I published the tutorial, but nevertheless it is still worth watching.

iPod Graffiti Tutorial

This is a nice tutorial on creating your own iPod graffiti photo like the commercial with Eminem from back a way.

Link Tag

The link tag is used for directing to other documents. In the case of a link to a stylesheet, it might display with the current web page, but for the most part it links to other documents pertaining to a collection of information. “rel” is used to describe the type of link. I describe the types of rel links below. Like a link in the body of a web page, use href to show the path to the page.

Style sheet: Link tags are most commonly used for link to style sheets. What you may not know is that there are various types of media you can specify with a link tag.

1. Screen - This is what your web browser uses to display the content
2. Print - The browser uses this style sheet whenever a web page is printed. Generally you want this page to be black text on a white background.
3. Handheld - for mobile devices
4. More media types include: projection, braille, aural, tty  & tv

Alternate: You can specify different forms of a document using the rel=”alternate”.

• Languages: You can specify the web page in a different languages. You can use this form:
  <link rel=’alternate’ lang=’fr’ title=’La documentation en Français’ type=’text/html’ hreflang=’fr’ href=’frenchversion.html’ >
• RSS Feeds: Not only can you specify different languages, you can link to things like RSS feeds:
  <link rel=”alternate” type=”application/rss+xml” title=”Tutorial Dog RSS Feed” href=”http://feeds.feedburner.com/TutorialDog” >

Appendix: Links to an appendix document. What is an appendix? It’s supplemental material.

Start: Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point. For example, if you had a article which was broken up into many page, you would want page one to be the “start”.

Next / Prev: Refers to the next or previous document in a linear sequence of documents. Sometimes browsers may pre-load the next document to reduce load time.

Contents: Refers to a table of contents page. <link rel=”contents” href=”tableofcontents.html” />

Other link types include index, glossary, copyright, chapter, section, subsection, help and bookmark.

Meta Tag

The meta tag describes information about a document. Like a digtial photo holds meta data about the camera, date, exposure, so does a web page.
Keywords & Description: Meta tags are most commonly known for specifying description and keywords. They are know to help search engines identify and the content of the web page. Though no one knows how much these play in to search results, they can’t hurt to include.

Refresh: You can have the webpage reload itself without any javascript. 

Content Type: Tells what type of document the web page is. The example is pretty standard. 

Generator: What software made the web page or website. For example, wordpress includes the generator for stat purposes and to credit their software. 

For Wordpress Users: All in One SEO Pack
If you’re a Wordpress user, you can use the All In One SEO Pack plugin to add tags to the meta keywords & descriptions. The SEO pack automatically takes care of suggesting keywords and descriptions. The keywords it suggested are pretty accurate too.

Have you’ve been stuck on designing your site using Dreamweaver or some other WYSIWYG (What You See Is What You Get) web page maker? If you’re ready to step out of the shadows of table based layouts, and discover CSS design then this article is for you. This article doesn’t aim to give you CSS code that you can copy to put on your website, instead teach you about the nuances you wouldn’t find in a general CSS tutorial or code.

What exactly is CSS?

CSS stands for cascading style sheets. Ok, what does that mean? Look at it like this, XHTML contains the data/content to display, CSS decides how the content looks, and Javascript determines how the web page interacts. CSS provides not only structure to the web page like a table would but also stylization the content like background color and font size.
CSS goes hand in hand with HTML. If you’ve used Dreamweaver or a similar application, then just learning CSS won’t help you that much. While you might be able to fly by the seat of your pants, learning & knowing HTML will prove to be vital. Clean and valid HTML will not satisfy avid web designers, it will save you tons of time when your design breaks and doesn’t look right. This article won’t delve into each attribute, instead the best practices of implementing attributes to the elements of the web page.

How to apply attributes to different elements

Attributes are instructions of how elements in the HTML should look. Attributes can be anything from font-size to background-color, but this section describes how to effectively apply certain attributes to different elements.

• ID’s
  ID tags in HTML (<div id=”header”>) are tags which should only be used once per web page. Generally, you want to use an ID to denote the page structure, so you might have id’s for a web page of “header”, “content”, “sidebar” and “footer”, because you’re not going to have two headers or two footers for any one webpage. To assign a style to an ID tag in CSS, use:     

  #idtagname{
  /* assign attributes here */
  }

• Class
  Unlike ID tags, class tags can be used multiple times. This is great when you want different parts of the design to look the same.
  To assign a style to a class tag in CSS use:     

  .classname{
  /* assign attributes here */
  }

• HTML elements
  You can apply a style to a particular HTML tag with CSS without using an id or class. For example, if you wanted to change every list (ul) to change from a dot to a square, you could simply do:     

  li{
  list-style:square;
  }

  Generally you don’t want to apply a style to an element like this. One exception though would be the body tag because it only appears once. In the next paragraph though, you will see where using the general HTML element is appropriate.

• Combining All Three
  If you’ve played around with CSS before, you’ve probably created HTML like this:     

  <ul>
  <li class=”x”></li>
  <li class=”x”></li>
  <li class=”x”></li>
  <li class=”x”></li>
  </ul>

  If you have a lot of li elements, you’ll know it can get very annoying to type out class=”x” every time. But there is a way to simplify this. Instead use the following CSS,

  .y li{
  /* CSS attributes for class x here */
  }

  And your HTML can become this:

  <ul class=”y”>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  </ul>

  The CSS applies the attributes for define in “.y li” for the li elements embedded in class “y”. Thus you get a cascading effect where you can affect elements inside certain elements. You can use this cascading affect for any combination of ID’s, class and elements. For example, you might use:

  #content .post ul{ /* style attributes here */}

Print vs Screen

Believe it or not, you can create a CSS for when someone prints out a web page which is great for a visitor because usually if you print you just want the primary content. Generally, you want a very different style sheet as compared to the “screen” version. Using the attribute “display: none;” you can and should get ride of ads, a sidebar and any other information someone wouldn’t want to print out. You also want a black text on white background design, otherwise you’ll make people print too much ink.

You link to the print CSS file almost exactly the same except for the ‘ media=”print” ‘ part.

CSS Default

When you load your HTML file in any web browser whether it be Firefox, Internet Explorer or Safari, the browser will render the web page with certain style attributes already assigned. You can of course override these attributes with CSS, but if you don’t specify differently, the browser will render the page with certain attributes already applied. Each web browser has subtle difference in how they render a web page under defaults, but in general a web page will look the same.
For example, the dots for a list item or the font family is a default style of the browser. You have the power to make that dot into a square or that font from Times New Roman to Verdana. But if you don’t specify, the browser will assume it. Another default attribute that always fools a beginner is the body tag which has a margin.

Save lines of code, be efficient

From time to time, you’ll notice your coping and pasting attributes from one id or class to another. If you find yourself applying the same attributes to a few elements, then you can combine attribute assignments so that multiple classes, ids and elements share the attributes. Lets take the attributes for the left and right arrows on the javascript image gallery. I originally had this as the attributes:

#moveleft{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
	background: url(’left.gif’);
}

#moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
	background: url(’right.gif’);
}

This is silly though because the two are essentially duplicates of each other except for the background image. We can though apply one set of attributes to both ids (using a comma to include more elements) and set the background to their respective urls:

Conclusion

The mark of a good CSS designer is one that creates the CSS for the HTML. If you start designing your HTML around what you can do with the CSS, you still have more to learn. In the future, I’ll delve into the basics of taking a design in Photoshop into HTML web page. If you have any questions or sub-topics you would like me to discuss, please leave a comment below.

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.

New Design

I redesigned the site from the ground up and have upgraded to the new Wordpress 2.5. The site was in desperate need of a better design not just because of ascetics, but for its poor information architecture. I don’t know what I was thinking, but I finally realized how poor the information architecture was after running Crazy Egg tests. The last design’s navigation lead people away from the site content. The goal of this new design is for visitors to quickly identify and navigate to the articles they would find interesting ON THE TUTORIAL DOG WEBSITE. This means the categories is the main navigational links.

The concept of the design is a school chalkboard. I thought imagery of chalk & blackboard jived with the concept of learning which is the goal of the visitor when they land on Tutorial Dog. The presentation of the articles on the page allowed for more friendly posts like this one as well.

The Road Ahead

This summer is gonna be a fun filled one with plenty a tutorials on the horizon. Thus far in 2008 I’ve been releasing one tutorial every two months, but this about to change soon. I’ve already published a follow up to the javascript image gallery and there even more tutorials ready to come down the pipe so make sure you subscribe. For all that want new Photoshop tutorials, stay patient because I’ve got a couple of great ones soon to be ready for publishing. And speaking of the subscribing, Tutorial Dog has crossed the 300 subscriber mark with the publishing of the latest tutorial.

Advertise

We’ve refined the advertising options and created an automated in house solution which has allowed us to offer such low prices. If there is a large demand to for the link ads, then we’ll raise prices according, so get in on the opportunity while you can. We also offer an image ad option for $10 as well.

Last time, I provided a reasonably decent solution for creating a HTML friendly Javascript image gallery using mootools. After taking in some of its faults, and learning more about javascript, I’ve rewritten the whole code, and have came up with a new version, a simple, easy to use gallery that everyone can use.

DemoDownload Files

Features

1. Anybody Can Use It - If Javascript is confusing to you, no worries. This solution doesn’t require any javascript knowledge. The only work require is one variable in the javascript & the actual HTML for the images.
2. Thumbnails - Unlike the previous version, you can now embed a different/smaller image in the previews.
3. Preview Slider - Easily slide through dozens of photos.
4. HTML friendly - Like the last time, this solution doesn’t compromise google bots or people with javascript disabled.
5. Better Transitions - The large photos ease in & ease out when switching
6. Image Descriptions - You have the ability to include a caption with every image

HTML

To set up the gallery properly, we need to write the necessary HTML to create the large image stage and the thumbnail slides. For the thumbnail slides, we’ll use an unordered list (<ul>) and list-items with links. The link tag will provide the path to the larger image to show on the stage and the img tag displays the thumbnail. The “moveleft” and “moveright” links move the slides left and right on the page.

<div id=”img_gallery”>
	<div id=”fullimg”>
		<img src=”images/ajax-loader.gif” alt=”loading” class=”loading” width=”24? height=”24? />
	</div>
	<a href=”#” id=”moveleft”>Left</a>
	<div id=”wrapper”>
		<ul id=”items”>
			<li>
				<a href=”LARGE IMAGE” id=”first” class=”item”>
					<img class=”thumb” alt=”img” src=”THUMNAIL”/>
				</a>
			</li>
			<li>
				<a href=”LARGE IMAGE” class=”item”>
					<span>DESCRIPTION HERE</span>
					<img class=”thumb” alt=”" src=”THUMBNAIL”/>
				</a>
			</li>
		</ul>
	</div>
	<a id=”moveright” href=”#”>Right</a>
</div><br clear=”all”/>

Now you need set up the top part of the web page. For this part, we’ll need to reference the css for the gallery, the javascript for the image gallery and the mootools 1.2 release. Also, it’s always safe to declare the webpage DOCTYPE as XHTML so that it’s javascript compliant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Javascript Image Gallery Using Mootools</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  

	<script src="mootools-12b.js" type="text/javascript"></script> <!-- MOOTOOLS 1.2 BETA -->
	<script src="imagegallery.js" type="text/javascript"></script> <!--   IMAGE GALLERY   -->
	<link rel='stylesheet' href='imagegallery.css' type='text/css' />

</head>

CSS

Now comes the cascading style sheet to create the design for the image gallery. The trickiest parts of the CSS is definitely the slider. For the slider, we create the buttons for moving the slider forward and back, and thumbnail area. The unordered list tag holds the thumbnails, but what makes the slider work is that the width of the unordered list is very large and the parent div of the unordered list (called the #wrapper) is the width of what will actually be displayed. That way the javascript can move the position of the unordered list to show different thumbnails. The key to the #wrapper CSS is the “overflow: hidden” attribute which allows the thumbnails to stretch out horizontally and not be in view.

body{ background:black; color:white; }
#img_gallery{ margin:50px auto; width:500px; }
#img_gallery a{ outline:none; border:none; }
#img_gallery a img{border:none;}

/* --- IMAGE STAGE */
#fullimg{
	width:500px;
	overflow:hidden;
	height:380px;
}
#fullimg img{ width:500px; }
#fullimg p, #fullimg span{
	position:absolute;
	background:black;
	opacity:.5;
	color:white;
	margin:0px;
	width:500px;
	padding:6px;
	font-size:11px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* --- SLIDER --- */
#img_gallery #wrapper{
	overflow:hidden;
	padding:4px 2px;
	width: 460px;
	float:left;
	height:50px;
	background-color:#181818;
	position: relative;

}

#items{
	margin:0px 0px;
	padding:0px;
	list-style:none;
	width:50000px;
	position: relative;
	letter-spacing:0em;
}
#items li{
	float:left;
	list-style:none;
	margin-right:2px;
}
#items .thumb{
	width:75px;
	height:50px;
	cursor:pointer;
	margin:0px;
	padding:0px;
}
#items .large{
	display:none;
	position:absolute;
}
#fullimg .loading{
	width: 24px;
	height: 24px;
}
#fullimg .thumb{display:none;}

#items .item  p, #items .item  span{
	display:none;
	text-indent: -2000em;
}
#moveleft, #moveright{
	margin:0px;
	height:58px;
	color: white;
	width: 16px;
	text-indent: -2000em;
	text-decoration: none;
	z-index: 1000;
	display:block;
	cursor: pointer;
	float:left;
}
#moveleft{background: url('images/left.gif');}
#moveright{background: url('images/right.gif');}
#moveleft:hover, #moveright:hover{ background-position:bottom; }

Javascript

The javascript is built for the most recent build of the mootools beta 1.2. I’ve heavily commented the code which you can view here. The only thing that needs to be changed in the javascript is the number of slides in the gallery.

var slides = 2;

License

You are NOT allowed to distribute this software with attribution. This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

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

This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Demo:

   

Image 1

 

   

Image 2

 

   

Image 3

 

   

Image 4

 

   

Image 5

 

 

Click A Thumbnail Above

 

Download Image Gallery

window.addEvent('domready', function() {
	var drop = $('large');
	var dropFx = drop.effect('background-color', {wait: false});
	$$('.item').each(function(item){
		item.addEvent('click', function(e) {
			drop.removeEvents();
			drop.empty();
			var a = item.clone();
			a.inject(drop);
			dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
		});
	});
});

The HTML:

<div id="imagegallery">
	<div id="items">
		<div class="item">
			<img src="images/167461515_05807d9fdc.jpg" alt="image" />
			<p>Image 1</p>
		</div>
		<div class="item" >
			<img src="images/229805603_e84bcf23bf.jpg" alt="image" />
			<p>Image 2</p>
		</div>
		<div class="item">
			<img src="images/248397811_0e7f1991be.jpg" alt="image" width="373" height="500" />
			<p>Image 3</p>
		</div>
		<div class="item" >
			<img src="images/1058831139_3dbe9e47b9.jpg" alt="image" width="500" height="333" />
			<p>Image 4</p>
		</div>
		<div class="item" >
			<img src="images/860213842_62e9bc4bcc.jpg" alt="image" width="500" height="333" />
			<p>Image 5</p>
		</div>
	</div>
	<div id="large">
		<div class="info">Click A Thumbnail on the Left</div>
	</div>
	<!– Image Gallery by http://tutorialdog.com –>
</div>

How the Javascript Works

The javascript you see above was the only part I needed to create- the rest is provided by the mootools framework. The first line, “window.addEvent(’domready’, function() {” and the closing brackets at the end is require of all (almost all) mootools scripts. The two variables at the beginning (var drop & var dropFX) govern the element with id=”large” in the html and the background color of that element.

The next part is just a function to get the image from the ‘items’ part of the html to the ‘large’ part of the html. “$$(’.item’).each(function(item){” basically says that for each html element identified under the class ‘item’, apply the following conditions to element. Now there is only one condition which would be “item.addEvent(’click’, function(e) {”. This line of code says that when the item is clicked, apply the follow instructions in the functions brackets. If you wanted to, you could change the word ‘click’ to ‘moueover’ and instead of needing to click on each photo, you would simply need put the mouse over the thumbnail image to get the large image to appear and essential get the function to trigger.

The code inside that ‘click’ function essential clears the items in the ‘large’ element and creates a clone of that ‘item’ class that was clicked and puts (injects) it into the ‘large’ element in the html.

Conclusion

If you’re just looking for a quick yet cool javascript image gallery, then download the included zip file and tweak the css to your liking. If you want to find out more about Mootools and creating really cool web apps, then check out the mootool demos which shows a variety of cool uses and a lot more functionality.