Become Successful: Treat Your Clients Like Rock Stars

Maybe you’ve noticed the Go Media staff photos popping up in our twitter profiles or facebook pages. Well, we don’t always look that cool; rock ‘n roll photographer extraordinaire Chris Cassella was the man behind the lens & the magic maker. He’s been cool enough to write about his experience & share some tips for making the most of your photography career.

Written by Go Media client & photographer Chris Casella

If you are like me, you read this blog regularly. I am drawn to the visuals and the trailblazing that goes on at Go Media. That is the exact reason I contacted them, I thought we might have something in common. I found that we do; a strong work ethic and a never ending desire to do what we want, at a high level and be successful doing it.

When I “reached out” to Jeff, I thought that we could both benefit from some kind of working relationship. We appreciated each other’s work, so we agreed to meet and talk about the possibilities there may be for us working together. We met up at their space in Cleveland where I was introduced to Bill, another driving force and partner in the business. I felt that I had found someone I could work with that had a similar outlook on business, design and aesthetic. Through our conversations it was decided we would trade some work. They would design some logos and branding for me and I would photograph the staff of Go Media for their needs, publicity and otherwise.

Before I knew it I was looking at proofs of my logo, presented in the smartest manner I have ever witnessed. It wasn’t just my logo on a two dimensional white background. They had actually presented it to me in different situations, in a three dimensional form, making it possible to see what it would look like on paper, on business cards and even on a bus stop with one of my images. What an awesome way to make a client realize some of the potential of their branding! Now it was my turn.

rock star photography

I traveled to Cleveland and photographed the staff the same way I do rock stars. I mean, they are rock star designers, right? I felt it was the best way to portray them. The images turned out great and I think bring out some of the personality I encountered. It was a whirlwind afternoon, but well worth it. It is the way I like to work. Stay focused, no nonsense, get the job done.

rock star photography

rock star photography

I love this Job!

Growing up I never thought I wanted to photograph rock stars, I wanted to be one. I ripped images form magazines and plastered them to the walls of my bedroom. Nikki Sixx and Slash were the coolest guys I did not know. When reality hit and I left high school and went to college that dream died. I had a scholarship to the Columbus College of Art and Design. I knew I would pursue art and thought I would be drawing skulls (too funny, considering who’s blog this is) for t-shirts in no time for bands like Metallica and Motorhead and the covers of metal albums.

But life takes strange twists and turns. I had always liked photography and when it came time to choose a major, for some reason, I went with my gut. Over the next three and a half years I was schooled in commercial and fine art photography. I had pretty much given up on the idea of a cool job in rock and roll & started thinking about making a living instead. When I got out of school, it was me and my 4X5 camera and buildings and their interiors. I didn’t despise it, but it was just not enough action or excitement. Then I photographed a friend’s band. That was in 1993. That was all it took. I got an itch that I still can’t scratch.

rock star photography

I have had the pleasure of working with publications, writers, record labels and PR companies. I have been on tour with musicians and seen my work displayed on the cover of a magazine in the UK. I have met and hung out with rock stars big and small, even my boyhood hero Slash. I want to work constantly and love what I do. That is why the dark side (hard work and internet networking) of all of this isn’t so dark to me. If you want something, you have to go after it and get it. Nobody is going to give you anything in this world, especially in the nooks and crannies where the creatives dwell. There are a few things that need to be considered if there are any future photographers out there that are looking to do what I do or what Ross Halfin or Robert Knight did before me.

You want to Photograph Rock Stars? Do This.

  • Learn how to shoot correctly and understand what you are doing. I know there are some savants out there, but for the most part, you will need to know how to get a good exposure. I learned back in the dark ages before digital, with film. I feel bad that a lot of people don’t use it or learn with it. I found it incredibly beneficial when it came to shooting digital so my exposures were where I wanted them.

  • rock star photography

  • Don’t depend on anyone. Do things yourself and follow up. Promises are rarely kept in the music world so it is up to you to make things happen.
  • Don’t think you need the most expensive gear there is. You should own pro level equipment, but save some money and get middle of the line not top of the line. You will get large images that can be printed for any publication on the planet.

  • rock star photography

  • Shoot all the time. Shoot local bands, for local rags, anything and everything you can.
  • Get connected and network. Research who to contact about the show or whatever you want to shoot. Local zines and rags can get the much coveted access you desire.

  • rock star photography

  • Lastly, once you get to shoot that band or musician, do not be a fanboy! Don’t ask for autographs or guitar picks or drum sticks or anything. That is the quickest way to lose their respect, gain the ire of your fellow photographers and never get hired again. You have to show people you deserve to be there working and making a living by the quality of your images and your character.

Design An Elegant Featured Content Slider for WordPress

An Elegant Featured Content Slider for WordPress

by John Sexton December 22nd, 2008.

Introduction

In this tutorial, we’ll create an elegant featured content slider for WordPress like the one featured on http://www.fuseboxtheatre.com.

This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda” product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.

We’ve managed to put together a nice implementation that seamlessly integrates with WordPress for easy, automatic populating of featured content. The slider we’re going to build today uses a number of existing components, including the Coda Slider jQuery plugin, the Easing jQuery plugin, and jQuery itself.

The original Coda Slider tutorial at jQuery for Designers goes into the nuts and bolts of the jQuery code and the mark-up structure. I’ll refer you there if you want to learn more about the jQuery is actually working. Including it here would make this tutorial way too long – and besides, there’s no sense in re-inventing the wheel!

http://jqueryfordesigners.com/coda-slider-effect/

The purpose of this tutorial is to seamlessly integrate this slider with an existing WordPress installation to create a beautiful, automatically populated, easy to manage featured content section. Let’s get to it!

The Markup and Javascript

As mentioned above, please refer to http://jqueryfordesigners.com/coda-slider-effect/ for a description of the jQuery, markup, and basic CSS necessary to get the slider working.

That tutorial also discusses the various jQuery plugins you need to get the slider working in the first place. For convenience, I’ve condensed the other jQuery plugins into 1 javascript file, which I’ve called coda-slider-condensed.js. You can download it here: coda-slider-condensed.js (Right click, save as).

The other jQuery plugin that you will need — that is not included in the jQuery for designers tutorial, but IS included here — is the jQuery Easing plugin. Easing is what gives the slider its sense of momentum – a small touch that really enhances the overall experience.

You can also get jQuery Easing here: http://gsgd.co.uk/sandbox/jquery/easing/

My coda-slider-condensed.js file already has easing enabled. If you want to change the type of easing, or its duration, look at lines 84-89 of coda-slider-condensed.js.

Before we get started with the WordPress goodness, all you have to do is make sure you include the jQuery easing file, as well as the coda-slider-condensed.js and, of course, jQuery itself, in your WordPress header.php file. Just cut and paste the following into your < head > < / head > tags.

[sourcecode language=”html”]

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/coda-slider/coda-slider-condensed.js" type="text/javascript" charset="utf-8"></script>

[/sourcecode]

Make sure to include the correct path to your javascript files – these paths are just examples!

Integration With WordPress

Now that we have the basics we need to get the Coda Slider working, we can get to the meat of this tutorial: how to integrate with WordPress!

Here’s what we want to do: create a featured content slider with our most recent 3 posts. Each featured post has an image and an excerpt associated with it. We want the image to show up both within our sliding panels, and as a smaller thumbnail in the slider navigation.

Let’s get started:

  • Since we want to feature 3 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable ($postcount) that we can use to track our progress. This handy variable will also enable us to seriously condense the code that we write later (that’s where the ‘elegant’ part comes in!)
  • Retrieve a query from the WordPress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 3 posts. If you want to learn more about wp_query and what you can do with it, check this out: http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
  • Loop through each of the posts we have retrieved from the database and display them as our three featured posts. We want the thumbnails of each post’s featured image to automatically appear in the navigation section of our slider.
  • Prevent duplicate posts from showing up using a simple – but important – bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later – to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.

Here’s what this part looks like:
[sourcecode language=”html”]

<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
[/sourcecode]

That’s just the PHP – we’ll need to wrap it in some DIVs to make it work with the slider, but we’ll tackle that later.

Filling The Panels

Next, we initialize our panels – this is where the power of our $postcount variable comes into play. Rather than have to manually create each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable, coupled with some simple PHP, allows us to automate that process.

[php]

<div class=“panel” id=“featured-<?php echo $postcount; ?>”>

CONTENT GOES HERE

</div> <!– End Panel –>
[/sourcecode]

We will end up with a series of DIVS like this:

[sourcecode language="html"]
<div class=“panel” id=“featured-1”> CONTENT </div>
<div class=“panel” id=“featured-2”> CONTENT </div>
<div class=“panel” id=“featured-3”> CONTENT </div>
[/php]

For CONTENT, anything could go in that spot – static content, post excerpts, custom field information, etc. Now I’ll briefly describe how to get the featured images and featured text into that content area.

Using Featured Images

On http://www.fuseboxtheatre.com, we are pulling data from the post’s custom “Image” field to get the featured image, and we are also getting the title and excerpt. Here’s how we do it:

[sourcecode language=”html”]
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a href="<?php the_permalink() ?>" rel="bookmark"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>

</div>
[/sourcecode]
This gives us an image that is linked to our post. This assumes that you have your post image located in a folder called “yourimagefolder” that resides inside of your site’s root. Of course you can adjust your path to whatever fits your individual situation. You can manipulate this image with CSS by targeting the wrapping div, of class .featured_media.

To assign an image to a post, go down to the “Custom Fields” section of your post and enter the image name with a custom field key of “Image,” like so:

Using Featured Text

Now we want the text to go along with the image. We open another div, “.featured_text” and go from there:
[sourcecode language=”html”]

<div class="featured_text">

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>
</a>
</h2>

<div class="entry-content">

<?php the_excerpt(); ?>

</div>

</div>
[/sourcecode]
This will give us a containing text area, an < h2 > level post title which is linked to our post, and the excerpt for that post. Again we can manipulate these using CSS by targeting “.entry-title” or “.entry-content”.

That’s all we need inside each one of our sliding panels. Now we need to end our WHILE loop and close some divs.
[sourcecode language=”html”]

<?php endwhile; ?>

[/sourcecode]

Adding Thumbnail Navigation to the Slider

Now comes the navigation – these are thumbnails that you can click to go to the associated featured post. These will be automatically drawn from the same “Image” custom field as your featured post image.
[sourcecode language=”html”]
<div id=“shade”>
<ul class=“navigation”>

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?></ul>
</div>
[/sourcecode]
We start off by opening our #shade div and our Navigation list – then do the same PHP as before to make sure we get the same three posts and do not duplicate them – after all, we want the thumbnails, post titles, or whatever else we are using for the slider navigation to correspond to the content they are matched to.

For each navigation item, we use the same code we used before to get the post’s custom image, but now we put it inside of a list item:
[sourcecode language=”html”]
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?>

</li>

<?php endwhile; ?>
< / div> <!– End Shade (be sure to remove space) –>

[/sourcecode]
The cool thing here is use of the $postcount variable – we are now linking our thumbnails to the panel divs we generated before – all by their IDs, and all automatically, just by referencing $postcount! This means we can just write the code once and loop it, rather than having to write it out explicitly for each panel.

We’re also using the WordPress custom field “Image” again – this time to take the same image we used as our featured image, and now use it as a slider navigation thumbnail. Using the technique, we can have this same custom image show up in the actual sliding “Panel” divs themselves, too!

The one thing that’s different here is that we’ve added a class to the image: “.scroller-thumb” Now, using CSS, we can specify a size for this thumbnail image. After all, we want to use the same image for the navigation as for the featured image, but we don’t want them both to be the same size. We also don’t want to manually create two image sizes and two custom fields for every post.

Here’s some simple CSS to constrain these image sizes:
[sourcecode language=”css”]
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
[/sourcecode]
Now we’ve finished the operations we want for each list item, so we end our WHILE loop, and close the navigation list, #shade DIV. That’s it for the code portion of the slider – now we need to make sure everything is nicely wrapped up inside of the appropriate divs. Here it is all together: In your HEADER.PHP:
sourcecode language=”html”]

[/sourcecode]
In your INDEX.PHP (or wherever else you want the slider to appear)
[sourcecode language=”html”]
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<div id="featured-<?php echo $postcount; ?>" class="panel">
<div class="featured_media">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");

if (isset($value_feat_img[0])) { ?>

<a rel="bookmark" href="<?php the_permalink(); ?>"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?></div>
<div class="featured_text">
<h2 class="entry-title">
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></h2>
<div class="entry-content">

<?php the_excerpt(); ?></div>
</div>
</div>
<!– End Panel –>

<?php endwhile; ?></div>
<!– End Scroll Container –></div>
<!– End Scroll –>
<div id="shade">
<ul class="navigation">

<?php
$postcount = 0;

$featured_query = new WP_Query(‘showposts=3’);

while ($featured_query->have_posts()) : $featured_query->the_post();

$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<li>

<?php // get the image filename
$value_img = get_post_custom_values("Image");

if (isset($value_img[0])) { ?>

<a href="#featured-<?php echo $postcount; ?>">

<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />

</a>
<?php } ?></li>
< ?php endwhile; ?></ul>
</div><!– End Shade –>
</div><!– End Slider –>
</div><!– End Wrapper –>
[/sourcecode]

Conclusion

This has been an overview of how to create an elegant featured content slider for WordPress. I hope you’ve enjoyed it! Below, you can find the CSS we are currently using for our slider at http://www.fuseboxtheatre.com. You may need to tweak it to fit your own layout.

One last thing: rather than just having the most recent three posts appearing in your featured content slider, sometimes you want to be able to control which posts show up. There are a number of ways to do this, such as adjusting the post date, assigning posts to a specific “featured” category, etc.

I prefer to do this using another cool WordPress plugin: WP-Sticky. You can find it here: http://lesterchan.net/portfolio/programming/php/#wp-sticky (Edit: This was written before the release of WordPress 2.7, which has a “Stick Post” feature build-in.)

I’ve found that using this plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. There are more cool tricks you can do with this plugin – I’ll encourage you to play around with it to discover them for yourself!

BONUS:

Remember that cool stuff we did with do_not_duplicate? Let’s say you have a bunch more posts that you want to appear below your featured content area (like we have on http://www.fuseboxtheatre.com). In order to make sure those posts don’t appear in duplicate, use this bit of code on your second WordPress loop:
[sourcecode language=”html”]

<?php query_posts(‘showposts=8’); ?>;

<?php while (have_posts()) : the_post();

if (array_search(get_the_ID(), $do_not_duplicate) !== false)

continue; update_post_caches($posts);
?>;

CONTENT GOES HERE

<?php endwhile; ?>;

[/sourcecode]

The CSS:

[sourcecode language=”css”]

/* FEATURED CONTENT SLIDER STYLES */

#wrapper{
width: 62.2em;
border: 0.1em solid #2b2b2b;
margin-bottom: 2em;
}

#slider {
margin: 0 auto;
position: relative;
}

.scroll {
width: 62.2em;
overflow: auto;
overflow-x: hidden;
position: relative;
background: #0e0e0e;
}

.scrollContainer div.panel {
padding: 1em;
width: 61.2em;
}

.format_text.featured_media{
margin-right: 1em;
float: left;
}

.format_text.featured_media a img{
width: 15em;
height: 12em;
}

.format_text.featured_text{
font-size: 1em;
float: left;
width: 35.5em;
}

.format_text.featured_text div.format_text.entry-content p{
margin-bottom: 0;
padding-bottom: 0;
}

#shade {
background: #000;
height: 9em;
border-top: 1px solid #333;
}

#shade.tall-shade {
background: #000;
height: 12em;
border-top: 1px solid #333;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 0.9em;
}

ul.navigation li {
display: inline;
margin-right: 0.8em;
}

ul.navigation a {
padding: 0.9em;
color: #000;
text-decoration: none;
float: left;
font-size: 1.25em;
}

ul.navigation a:hover {
background: url(images/arrow_down.png) no-repeat 50% 0%;

}

ul.navigation a.selected {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}

ul.navigation a:focus {
outline: none;
}

.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}

.scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}

.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}

.hide {
display: none;
}

span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}

img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}

img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}

a.selected img.scroller-thumb{
}

[/sourcecode]

Barack Obama Portrait Deck on UrbanOutfitters.com

Barack Obama portrait deck by Oliver Barrett of Go Media

In August, the Obama campaign was running a contest for the next Obama T-shirt. I thought to myself “Self, you don’t like John McCain, and you certainly don’t like Sarah Palin. You DO like drawing, fresh ideas, and what Barack Obama will bring to this mess of a country that we’re living in.” So I decided to whip something up for this shirt contest. I was thinking about what would make a good piece for this particular project, and figured that putting Barack Obama’s face on a tee for the Barack Obama campaign made some sense, so I started there. I fleshed out the portrait in a couple of hours, employing this new layered drawing technique I’ve been developing.

Once the portrait was done, I wanted to get some complimentary elements into the piece. I added a flurry of Obama logos and some of those concentric circles that I’ve been beating into the ground since 2006. I mocked it up on their template and submitted it.

For some reason, the submission never showed up on the page. Not sure why. It could have been that I just didn’t do it right (even though I tried a few times), or the contest couldn’t handle the big, fat wad of coolness that I was shoving down its throat.

So now I had this illustration that didn’t have a purpose. I decided that I should turn it into a poster and let people download it for free. I posted it to my Behance profile, but was too busy with other projects at the time to really push it. About a week later, I was putting some stuff together for Deck Peck and thought this poster/shirt design/whatever it had become would make a pretty cool deck. We submitted the illustration on a skate deck and it was well received enough for Urban Outfitters to feel the burning desire to sell it. Woo hoo! Go America.

You can buy the deck here. Buy it, get some fishing wire, and put it on your wall.

Here are some in progress images of the piece:

Barack Obama portrait deck by Oliver Barrett of Go Media

Barack Obama portrait deck by Oliver Barrett of Go Media

Barack Obama portrait deck by Oliver Barrett of Go Media

Barack Obama portrait deck by Oliver Barrett of Go Media

Barack Obama portrait deck by Oliver Barrett of Go Media

This is the finished poster. The aged look worked better on the poster than it did on the deck, so I left the deck clean.

How to Draw a Classic Hand using a Graphics Tablet

how to draw a hand 13

Introduction

Hey! I’m Whyball and I’m a graphic designer. Since I was a little kid, I loved to draw; at first I started drawing all kind of things that I saw in the books – usually animals were my favorite subjects! After a while I started to create original drawings.

A few years ago I discovered the digital drawing and was excited to see the simplicity of using the graphic tablet. Once again I was combining those 2 ways of drawing: copying and using the imagination.

I recommend to use this technique of copying something when it helps you to save some time while you’re working, or to achieve better quality. For example, if you need to draw a hand in a specific position, and you’re not so sure you can draw it from imagination, my advice is to take a camera and capture the position & form of a hand. It’s useful to have a timer function so you can take picture of your own hand easily.

Here is an example of some wings I drew using this technique. These wings are yours to use in your designs royalty free and can be purchased from the Go Media Arsenal.


Fine Art wings download

In this tutorial I want to show you how I draw a hand using a picture plus some imagination, and make it all look like a classic pencil drawing!

I use this kind of drawing to give to the design an artistic look. In my opinion the hand drawing effect looks great applied on anything from animals to gothic ornaments. Another advantage of this style is that you can make great artwork using only one color.

Let’s get Drawing!

Step 1: Find a Reference
The first step is to take a picture of a hand, you can use the same picture that I used in this tutorial, see the download link below; it already has the opacity reduced to 30 % so it is exactly like the one i started here with .

[download#35#nohits]

how to draw a hand 1

Step 2: Sketch Guidelines
After that, you should sketch out how you will adjust on the picture. In this case I’ve increased the size of the fingernails, and made a a white area in the middle of the hand where I want to put a small brain. Just make a place holder for now, but make it a little smaller than the actual brain will be so you can draw the hand tightly around the brain without gaps. You can draw some drips too. You can put them between the fingers, and on one side of the hand, like i did. You will sketch all this on a separate layer.

how to draw a hand 2

All that being set up, you should start drawing the hand.

Step 3: Build the Outline
The file size that I us is somewhere between 50/ 50 cm and 70/70 cm at 300 DPI. Get your graphics tablet set up & operating properly. Take a look at the settings that I usually use for the brush. These settings work well for the file size we’re using; I recommend that you try them.

For drawing, use a dark brown or gray color (something like 3f311d ), not black. Black has a too strong of a contrast with the white background which gives your linework an overly sharp appearance. So my advice is to use those colors for the brush, but if you want to use black for the brush you can change the background color to a light cream or gray and everything will look OK.

how to draw a hand 3

Start by making a new layer where you will draw the outline, it should look like this. You will also draw the lines that you consider will help you in the next step; (the first level of shades), so look for thicker and darker lines from the picture and draw them too.

how to draw a hand 4

After the outline is done you can start making the shades, but first I made those red dashed lines which follow the shapes of the hand. You should always have lines like this in your mind when you start hachuring, so you can represent the volume in the right way.

how to draw a hand 5

Another thing that I recommend you to do before you start is to adjust the contrast of the picture until it will look like this. This will help you to see where to put the darker and most important shades. You will see that after this first level of shades are made, the subject will start to look good.

how to draw a hand 6

Step 4: Begin Hachuring
Now, when you start the hachure, don’t forget to make a new layer. I recommend that you always make a new layer when you do something new or different on your design and you’re not sure how it will going to look.

We all know how bad is to work on a wrong layer…. :)

Now your drawing should look like this. The hatchring it’s made from overlapping lines in different directions and different lengths, so where you want to make a darker area you will draw thicker lines. In lighter areas you will leave only a few lines and you can make them thinner for an even lighter tone.

how to draw a hand 7

The hachure should look something like this, here you can see how on the left/down side is darker then the rest. That’s because of the multiple overlapped lines. If you will make it smaller you will see the effect that I want to achieve; and that’s to look like a textured gradient.

how to draw a hand 8

Step 5: Add Details
After you have finished with the darker tones, make another layer, and start working on the details. You should not make too many details, or at least not small ones because you will not be able to see them when the drawing will be printed.

To assure that you have enough details you have have to look at the drawing at approximately the size that it will be printed and see how it looks. Or better yet you can print it on a paper at the real size so you can have a preview of the final work.

how to draw a hand 9

Drawing the Brain

Now in case you are not used to draw brains, find a picture of one and try to imitate the texture that you see on it. The most important thing when you will draw it is to respect the light source when you make all the ‘’wrinkles’’. This will actually make it to look like a brain.

Now it’s time to merge the layers you created while drawing the hand. Once merged, apply a color overlay effect to give it a red color. Now you can see the parts from the hand that you will have to erase, parts where the brain and the hand are overlapping.

Now you will understand better why I told you earlier to make the placeholder for the brain smaller than the brain will be. It’s easier to erase what’s behind the brain.

how to draw a hand 10

Now you can delete the color overlay effect and get rid of the unwanted layers, if you have some. If you think that you may want to color the drawing later, you can keep separate layers for the hand and for the brain.

how to draw a hand 11

Final Touches

Step 6: Add Extra Shading
Finally let’s put some shades around the brain as you think it would reflect on the hand. And you should remember to keep the same light source whenever you put new shading.

And now you can merge all the layers together, and you’re done!

You can use this technique for making t-shirt designs, illustrations, posters, you name it. From my experience I can tell you that it will be appreciated very well.

how to draw a hand 12
Step 7: Add Texture to the Final Presentation
If you want the drawing to have more impact when showed to a client, I recommend you to change the white background to one more ’’artistic’’. Usually I use a combination of different textures and old papers pictures, and it should look like this.

how to draw a hand 13

Here are some details from the drawing, and some designs that i created using this technique.

how to draw a hand 14
how to draw a hand 15
how to draw a hand 16

More Examples of this Technique

portfolio work
portfolio work
portfolio work
portfolio work
portfolio work
portfolio work
portfolio work

I hope you liked my tutorial and find it useful, for any other question, don’t hesitate to write here or contact me at [email protected] Thanks for reading!

Rule Six: Motion

become a master graphic designer rule six
Rule Six: Motion – Have movement through your design.
Part Six of Seven Easy Principles to Becoming a Master Designer.

Movement? Are we talking about a video here? How can I have “movement” in a static printed design? It’s not a flip book we’re talking about are we?

No, I’m simply talking about creating a sense of movement through a design. It assists in giving the end-user a clear path for their eye to follow. Sometimes this movement is instrumental in directing the viewer’s eye to the places you want them to look and even the sequence in which you want them to look.

This may be a little easier to understand if we look at some examples.

First, let’s start with a design that has no movement to it. Let’s assume that each of these circles are photographs or design elements. How will the end-user’s eye move through a design that is laid out like this?

example of no movement

They will probably “read” through the design elements in this manner. Why? Well, because in Western society – this is how we are taught to view things. It’s the way we read. Always start in the upper left corner and read left to right working your way down through the design.

example of no movement with paths

This is the average westerner’s predisposition on how to look at a design. But we can break this method of viewing and impose our own. Let’s look at another very basic layout using extremely basic shapes. Except this time let’s give them an over-powering movement.

powerful design movement

movement with the obvious path drawn

Ok, now this is a PAINFULLY obvious example of movement. If this were the design, the viewer would have almost NO options as to how to look at this design other than lower left to upper right.

I just want to make the obvious point that we CAN control, or at least heavily influence how viewers take in our designs. With this in mind – we need to make sure that the movement in our design helps the overall function.

Now, because I’m such a huge fan of comic books, let’s look at a few comic book illustrations that use movement in their composition to carry a person’s eye through the image.

This panel is by famed comic book artist Will Eisner. He was well known for amazing compositions – and his comic The Spirit (now a major motion picture.) This is a great little composition because you almost feel like you’re following the character’s movements. You start at the top of the illustration and snake your eyes down each set of stairs until you see the figure at the bottom.


movement with path drawn

The next example I want to use is the cover for The Fantastic Four #1 comic book. This is really a great use of movement in a composition. You either start at the title or at the monster in the center. In either case, the progression of movement after that is so wonderfully obvious. From the title you follow Human Torch’s flame over to the character list, then down to the monster emerging from beneath the street. From there, it’s a clear spiral working around the outside of the illustration; from the monster you go back through the Human Torch to Invisible girl, to the Thing to Mr. Fantastic and finally to the innocent bystanders.

master designer rules motion

Let’s take a look at that with the path drawn on top.

become a master graphic designer

Let’s look at one last example – but maybe something with a better design application.

become a master desigenr

become a master graphic designer

That’s it’s for now. As you’re waiting for Part 7, catch up on the rest of the series:

Become a Master Designer: Part 1: Limit your Fonts
Become a Master Designer: Part 2: Limit your Colors
Become a Master Designer: Part 3: Contrast, Contrast, Contrast
Become a Master Designer: Part 4: Spacing is your Friend
Become a Master Designer: Part 5: Depth

Create a Furious Pink Panther Poster

Introduction

Everyone knows the pink panther! I sure love the old cartoons and remember this old VCR tape packed with episodes I used to watch as a kid, over and over again. Well, there were lots of episodes, so it wasn’t as obsessive as it sounds…

Anyway, I thought it was time to give the old feline a modern, furious twist, and so I created this T-shirt for Design by Humans, for which I would greatly appreciate your vote!

Apart from shamelessly promoting myself, I’m going to show you how to create a poster of this new and improved pink panther using some great online resources, from Bittbox and the Go Media Arsenal. You can use just about any version of Photoshop and will need to brush up your art skills for this poster with a pen tablet.

preview

Drawing the panther

First of all, download the sample file below & follow along with me in Photoshop. It’s got more than 100 layers, so you’ll really be able to see how this was put together.

[download#33#nohits]

Indeed, you are looking at a tiger photo, not a panther. I know my English and Zoology well enough to tell the difference, but I found a tiger’s fur much more fit for this particular design. Not only that, but those huge fangs are just SO cool.

So, get this image from istockphoto and position it accordingly in your newly created A3 canvas at 300 ppi.

1

You’re going to need a pen tablet at this point, so use a regular round brush with pen pressure enabled. Begin by tracing the general outline with black. Later on, we’ll fill the strokes with paint sprays of different colors. Change the tiger photo’s Opacity to about 60%. That will make drawing easier.

Try to give the dark outline a depth of field through stroke width. On a pen tablet, the harder you press, the thicker the line. So by drawing parts of the face with more pressure, you’ll get more obvious and visually imposing features. In this drawing, we want to draw attention to parts that show a fierce, angry panther. To do that, draw the fangs, jaw outline, eyes and wrinkles with a thicker line. These are the features we want to point out, and the emotion we want to generate.

2

Now add a few accents to the face. It’s a good idea to keep altering the visibility of the photo so that you get a general idea of what the new art will look like, while still keeping the photo as a reference. Use a shade of pink for this layer (ef6878) and make individual layers for each color, or even for different stroke widths of the same color. You’ll probably change your mind later on some of the lines, and it’s not worth having to redraw everything.

While drawing the pink strokes, think of them as the first step to defining the lighting and actual features of the feline. The mouth is almost completely painted because it’s not only a pink area in real life, but because we want it to appear darker.

Also, instead of painting the whole left side with pink, we’ll draw strokes that fade in and out (through line thickness). That will give the face a particular texture, and avoid giving the impression of a flat surface. It’s not a finished effect, but will work once we have all the other layers finished.

3

We’ll now get started with the highlights. It’s a good idea to change the background color right now too. Fill the background with this blue: 0a1e29. And use this yellow for the highlights: fbe382.

As if complementing the pink layer, draw the yellow highlights in largely unoccupied areas. Try not to cover much of the pink, and imagine how a bright yellow light from the right would highlight the animal’s fur. Don’t leave the left side completely dark, but remember that fur generally absorbs light and doesn’t really reflect it. For artistic reasons, the light is exaggerated, but serves the style and purpose of the design. We want edgy and bold contrast that goes with the kitty’s bad temper.

4

Two more layers. One containing a darker shade of pink (b0314f), and one of the previously used lighter pink. Firstly, make a new layer over the yellow one, and paint thin, short strokes on top of yellow areas. Those will add texture, and add small shadows to the lit side. Also, make one more layer for the darker pink and use it to darken pink areas, not yellow ones. These act as more profound shadows and will act as a transition from pink to background blue.

5

Double click on the black outline layer. Add a Color Overlay Layer Style. Choose the background color. That will basically make it fade into the background. Also, add more accents of the darker pink and of the lighter one, just like in the previous step. Fill the eyes with a bolder yellow (e7cc5f). That will not only bring more attention to the eyes, but will later be used over the yellow covered side to create depth and texture.

6

Add dark accents of this bluish gray: 293a44. We’re doing this in order to differentiate distinct facial features, and to be able to make an easier transition into the background, as well as paint details. Also, add the pupils using the same gray, and dark pink rings.

7

Bring out some of that beautiful fur with stubble-like strands. This effect is simply meant to make the fur look more dynamic. Also in order to add more depth to the lit side, add even lighter accents with this yellow: f7e2a8.

8

Finally, select the darker yellow found in the eyes and paint over yellow areas. Make sure that you only paint on the left side of all lighter yellow strokes. That’s it for the panther, so let’s get on with the next section.

9

Making it messy

It’s time for some messy artwork. In this section, you’ll need two resources: Bittbox Messy Spraypaint brush set and Go Media’s Stain Photoshop Brushes. From now on, it’s all trial and error, so you will most likely be moving things around in time. When using brushes, I suggest you paint inside the canvas and manually position it.

The head is basically just floating on the canvas, and it’s not the result we’re looking for. It’s time to create a transition from side to side of the document, using artistic elements found in the links written above.

To blend in the face, we’ll not only add paint elements behind the face, but also inside the face. Doing otherwise, will make the transition less subtle.

While placing the vectors and brushes, keep a general orientation in mind, because we want this to be well built from a compositional point of view as well. The paint will appear as a diagonally oriented line, starting near the source of light and ending in the darker side of the canvas. It is also further down than up, because we want the piece to have a certain stability and foundation. If it would be heavier on the top, it would create a floating sensation. There’s lots of material to read on Composition, and as a foundation to this sort of work, i suggest you read on that topic, if you haven’t already.

As previously mentioned, the Project File would be most useful in this case. Because the splatters and stains are kept on separate layers, it will be easier for you to keep track of all the changes seen in the screenshots below.

10

Add more yellow stains and spray paint. I also placed a Bittbox spray paint over the Go Media dripping stain because I wanted to make its edges less defined. It’s a good idea to do that with most vectors in this piece, since we’re trying to create a smoother transition.

11

In a similar manner, add more stains and spray paint. We’re already defining a general orientation, as you can probably see.

12

As mentioned before, we’ll fill the dark face outline with messy spray paint. Select the dark outline layer of the panther’s face. Because the layer has a color overlay, you’ll need to flatten the effect. Create a new blank layer, select both layers and merge them (Ctrl + E). Now create another layer, make it a clipping mask and while using a messy spray paint brush, paint yellow sprays on the lit side of the face. Also, paint two more yellow sprays behind the face; you can see them near the eyes- they appear as horizontal streams.

13

Add ink-like splatter vectors to different areas of the canvas using existing colors – yellow, pink and bluish gray. Also, begin adding pink accents of spray paint.

14

Add some more splatters and paint with pink. I also cut out a small stream from a spray paint brush, and applied it the left side of the face. It’s pointed out with the first white line on the left, as a Bittbox brush.

15

Next, continue the red section and add more splatters too. Mix splatters, paint stains and paint sprays, just as you did on the right side. I also added a couple of grayish stains so that the stream becomes visibly darker.

16

Create a halftone background

Now you’ll need the Abstract Halftone brush pack. Using a bluish gray (243941) fill the background with a 45° angled line halftone brush. Make sure that the halftones are well aligned, so that it gives the impression that they are simply changing color, not crisscrossing or mismatching. Position these in the unoccupied, or whitespace of the canvas.

17

And now add some background colored halftones. That will simply fade out some of the elements. I also added a pink halftone on the right side, just barely visible.

18

Finnish it off with type

You need this font for the final part. Download it, and type in the words in a similar way. Place them behind all the layers, including the halftones. You’ll notice that the final block of text, both pink and yellow, forms a rectangle. This is meant to bring a certain order and predictability to the layout of the design. It acts as an anchor that keeps all the elements in place.

Also, readability is not a main objective here, so neither the font, its layout or modifications are meant to serve that purpose. It has a more graphic role.

19

Now, while using the light yellow color, type the word panther repeatedly in the lower right corner in order the complete the rectangle grid. Also, add a lighter colored spray paint that will eliminate some of the negative space of the text.

20

And as a last touch to the text, make a selection of all the text by holding Ctrl + Shift and clicking on all the text layer icons. Make a new layer above, and spray paint with a light yellow. That will make the text appear less flat.

21

And with that, we’ve just finished creating a furious pink panther poster using only a few messy spray paint brushes, abstract halftones and splatter vectors. It’s situations like these where brushes and vectors prove their worth. Now use them to make your own furious design!

[download#33#nohits]

final_small

The Making of the TweetBacks Logo

Hand Drawn Vector Eyeball Freebie

Awhile back I got a friendly email from designer & illustrator Rich Nosworthy saying he had some fun eyeball vectors to share. After poking around his well developed portfolio, I was excited to see what he had in mind.

handrawneyefreebies1

He didn’t disappoint! In the file below there are six hand drawn vector eyeballs. They’ve got a great sketchy feel and sport highlights, reflections & veins.

Since we’re on the subject of freebies – go ahead & check out our freebies archives (if you haven’t already!). There are a ton of free design resources in the archives of the Go MediaZine if you can sniff them out.

Thanks Rich!

[download#34#nohits]