Tutorial Dog

Using Ruby on Rails to Create A Twitter-Like Message Form

Devin — Tue, 18 Aug 2009 18:54:51 +0000

This tutorial will show you how to create a twitter message form that counts down the 140 characters and also allows you to input a message within the URL of the webpage as well. What’s cool about Ruby on Rails is instead of writing javascript to recalculate the message length, we’ll use Rails to automatically generate the correct javascript so that each time the field changes, the count is recalculated all through the controller object. Download the project code here.

Firstly, I’ll assume you have ruby on rails installed and have create a new project. You’ll also need a basic knowledge of how Rails works, and how Rails utilizes the principle of Model-View-Controller (MVC). Having said that, create a new project and create a new controller file called message_controller.rb. We’ll first take care of an initial message specified in the URL of the page. Add this code to the file:

class MessageController < ApplicationController

  def index
    if params[:txt]
      @txt = params[:txt]
    else
      @txt = "";
    end
    @count = 140 - @txt.length()
  end

end

The index method first check to see if a message was specified in the URL. If the a message was specified, then it sets the @txt instance variable to the string. If not, then the variable is set to an empty string. The count is also calculated here for the initial web page view.

Now we need to set up the view for the message controller, create a message folder in the views folder and create a new file called index.rhtml in this new folder. Copy this code to the file:

Message

<% form_tag :action => 'stuff' do -%>
	<%= text_field_tag :message_field,value=@txt %>
<% end -%>


	<%= @count %>


<%= observe_field(
	:message_field,
	:url =>{:action =>"update_message_length"},
	:frequency=>1,
	:with => 'message',
	:update=>:count ) -%>

The parts to focus on here are the text_field_tag and the observe_filed method. The div count is where the remaining count will be displayed. Looking at the text_field_tag, :message_field is the id of the tag, and the value is set to the @txt that was declared in the Message Controller. The observe_field method will automatically generate the javascript ajax code that will update the count tag. The parameters follow as such:

:message_field – indicates which field is observed
:url – Decides which action is sent to the message controller. (More on that latter)
:frequency – Every time the field changes, make a AJAX request
:with – this will help us get the text in the field
:update – decides where the contents of the AJAX response goes

At this point we need to go ahead and add the “update_message_length” method in the message controller. This function will be called every time the filed value is change as specified by the observe_field method. Append the following function to the controller:

  def update_message_length
    pop = params[:message]
    count = 140 - pop.length()
    render :text =>  count
  end

This function gets the message include in the message parameter, and sends out the new count. One small, but vital part not to forget is to create a layout file that includes the needed javascript framework so this is included. Create a new file in the view/layouts folder called: message.html.erb. Add this code to the file:





  
  Posts: <%= controller.action_name %>
  <%= stylesheet_link_tag 'scaffold' %>
  <%= javascript_include_tag :defaults %>



<%= flash[:notice] %>

<%= yield %>

Thats its! Now if you go to the URL http://localhost:3000/message, you’ll get a blank field, or you can include an initial message by http://localhost:3000/message?txt=message+here. Incase you have a flaw in your project, or are lazy, here is a copy of the working project.

Follow Up To Text Image Headers Tutorial

Devin — Sat, 13 Jun 2009 03:51:42 +0000

The first tutorial I published on CSS was a “trick” to essential hide the text generated from the HTML file and replace it with an image. Let me clarify what I mean by “trick” because its not meant to decieve anyone. It’s a non-obvious way of achieving two competing goals: displaying graphical representation of text while not compromising the HTML text mainly for Google. If you’re a web designer, you’ll know of the limitations to HTML and CSS and what may make a better user experience isn’t always good for Google. CSS and HTML is not only limited by the font selection, but something like a logo in which specicial types faces are created cannot be created through CSS. Using an image with an alt attribute just doesn’t seem like a good solution for a h1 headline tag either. For something like a screen reader, or viewing plain HTML, using the text is a better solution than the alt attribute of an image.

Now don’t get me wrong, this technique can be used for evil by hiding keywords to try to bolster search engine rankings on Google. I don’t know exactly how Google creates the ranking, but I do know that h1 headline serve as a key part in determining page rank for keywords. So who uses the negative text-indent trick? Google themselves use images for there main logo, but both Apple.com and Digg.com use negative text-indent to hide lot things. Apple hides their top navigation bar, and homepage featured items. Digg hides the h1 tag which states their name. (If you want to see for yourself, I’d recommend checking Apple homepage because you can see the relavent css directly in the source of the webpage. With Digg, you have to navigate your way through the file references.) Google doesn’t seem to penalize either of theses two sites. You might say that these guys are too big to be penalized, well in that case, this website, Tutorial Dog uses the negative text-indent and the site ranks on the first page for the keyword “javascript image gallery”.

Inadvertent Discovery While checking out Digg.com to see if they use negative text-indent, I discovered that they combine all their images for the site into one large gif image. They then direct the CSS file to specific sections of the image to show different images using the ‘background-position’ attribute. Why would they imbed all images into one document? For a site like Digg, which recieves millions hits daily, by combining the images into one file, their servers receive less of a usage because many image files aren’t requested from the server. Once this large image file is requested and sent, the web browser can reference the file to generate the page. To further illustrate why this is better, think of moving a bunch of boxes. Digg likens the large image file to one large box. In this case, while this box may be bigger and weight more, you only have to move it once to get all of the required materials to the receiver. With a bunch of small images, you will have to move a bunch of boxes one at a time. This technique probably won’t be worth your while to implement for your web designs, because it will take more time for what its worth. Digg, because they deal with large traffic, finds that this technique optimizes their page serving ability.

New Beginnings…

Devin — Thu, 04 Jun 2009 18:02:05 +0000

Its been a while folks. Almost a year now. But its time to start to get the wheels moving on this great site, because you need it! Now even though its been almost a year since the last tutorial was published, Tutorial Dog has seen traffic continue to come at a steady rate which makes a comeback all the more necessary. The site also has stayed relevant with many commenters (thanks) giving input on many hot button articles of the site.

Figure 1. Traffic Since May 2008

And I felt the previous design lacked on at making this important enough. This new site focuses on the readability and how to display images in a book-like fashion. Garretdimon.com primarily inspired me to rethink the way to present content, and expanding the design outside of the structure of a box. By creating a gutter of free space on the right side, I can display images and information in an interesting visual way. Like so…

All there is left to do is to publish new material. If you haven’t done so already, subscribe to the RSS feed and stay tuned. I’ve got a lot of ideas, so we’ll have to see what materializes. If there is anything specific you’d like to learn more about, leave a comment below.

Javascript Dock Carousel Using Mootools (Part 2)

Devin — Mon, 21 Jul 2008 12:00:36 +0000

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.

Javascript applications run better with specialized Java hosting. It ensures smooth, error free work of Java based websites or any Java script for that matter.


  
  Left
  Right

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.

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.

Javascript Dock Carousel Using Mootools (Part 1)

Devin — Mon, 14 Jul 2008 12:00:16 +0000

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.

Design Video Round #2

Devin — Mon, 07 Jul 2008 12:00:18 +0000

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 Obama

Devin — Tue, 01 Jul 2008 12:00:18 +0000

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

Barack Obama’s Coldplay iPod + iTunes Commercial in Photoshop

Devin — Fri, 13 Jun 2008 12:00:33 +0000

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

Design Videos Roundup #1

Devin — Mon, 09 Jun 2008 12:00:32 +0000

You know, sometimes I just don’t like to read. Sometimes I just like to sit and watch something rather than dig myself in text. This article hopes to fulfill that video thirst in you life in the matters of design. In our first installment, we’ll take you from lectures on mootools to moving text to time lapse art creation. Hope you enjoy, and if you have a video you know is good, please leave a comment.

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 & Meta Tags in HTML

Devin — Mon, 02 Jun 2008 12:00:04 +0000

The most important tag in the head of a web page is the title tag, but the link an meta tags can tell a lot of information about your content. These tag can tell important information to search engines, and provide a handful of usefulness to a visitor. HTML is not simply intended to hold content, it contains data to describe itself and reference more content. Text on the web is not just linear, its hypertext. It wants to quickly branch off like a textbook with chapters, pages, indexes and glossaries. The web is intended to be consumed in different ways by different people. The link and meta tags tell how a web page fits in the hierarchy of a website.

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.

Screen – This is what your web browser uses to display the content
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.
Handheld – for mobile devices
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:
RSS Feeds: Not only can you specify different languages, you can link to things like RSS feeds:

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.

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.

Introduction To CSS

Devin — Wed, 28 May 2008 12:00:53 +0000

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 (
) 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:
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:
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:

#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(’left.gif’);}

#moveright{background: url(’right.gif’);}

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.

Draw in Photoshop Using A Tablet

Devin — Wed, 21 May 2008 12:00:06 +0000

In this Photoshop tutorial, you’ll learn how to set up Photoshop so that it can use the tablets input, create an outline from a photo, color and shade all using the tablet. The tutorial includes a time lapse of the process I took to creating the final product.
A graphic tablet allows you to take Adobe Photoshop to a new level. You can take advantage of the brush tool and it’s powerful ability to imitate different traditional mediums of art and human input. For this tutorial, I’ll be using a Wacom Bamboo tablet. It’s Wacom’s (Wacom is the industry standard supplier) most inexpensive tablet ($79), but still does a good job. Tablets can range from the Bamboo which has only pressure sensitivity, to monitor tablets with pressure & tilt sensitivity. The monitor tablets are relatively expensive investments though. If you’ve never used a tablet before, it will take some time getting acquainted. One thing that would throw me off was that when I draw, I like to rotate the paper to draw straighter, but that doesn’t fly on a tablet because the cursor becomes disoriented on a non-monitor tablet.

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.