The one tool you need in your toolbox as a band (which basically makes you a small business owner) is to install and configure Analytics on your website. Do yourself a favor and get off of MySpace. At the very least MySpace should just be used as another avenue to reach fans, not your only or primary point of contact. For this particular tutorial, we use WordPress as our content management system of choice. I recommend WordPress to anyone who asks me simply because of how easy it is, and how easy it is to integrate Google Analytics.

If you’ve already setup Google Analytics you can skip down a ways on the page as I go into the aspects of Google that will mean the most to you. It’s a good idea to look over the initial setup to make sure you’ve done everything properly. The way I setup Google does enable tracking on a few more important items that you don’t get by just copying and pasting the code Google supplies to you.

Get WordPress or a something similar CMS

With WordPress you have two choices to setup your site:

1. Download the software and install it to your web host (Recommended)
2. Host your website remotely on yourname.wordpress.com (less freedom)

Some hosting providers like Media Temple have a one click install for WordPress. This helps things along considerably. If you can’t afford your own domain name and/or hosting. Signup for an account on WordPress.com. Your name will be YOURNAME.wordpress.com to start, but you won’t be able to have complete freedom over the look and feel of your site.

If you have no other choice, start with option 2. You can always export your data and import it to your own web hosted .com later.

Signup for a Google Analytics account using your Google account name

I’ve had a Gmail account for awhile now so all I had to do was go to Google.com/analytics and sign up for an analytics account.

Setup your profile

Setting up your profile is as simple as putting in your website address for each website you have. If you want to setup e-commerce tracking for your online store you have to enable this option later. For now, just enter in the basic information for your site.

Our site already has a profile so the additional site we just setup appears below that domain name. (assault.it.com) You’ll also notice that the status icon is a little alert. That’s because we need to actually setup the embed code on the site.

Click on the edit link on the right, and then click on the Check Status link over to the right

Now you’ll see what we need to get our hands on which is the Google Tracking code. (On the right) You can just copy and paste this into your site if you’re not using WordPress, but it’s better to integrate it with the Google Analytics for WordPress plugin so you can enable additional features not offered with just copying and pasting the code.

If you just copy/paste the code into your site you won’t get any of the additional benefits setup like goal funnels so don’t do that.

Leave this window open for now, and I’ll explain how to implement this code with the Google Analytics for WordPress plugin in the next step.

Download/Install/Activate The Google Analytics Plugin for WordPress to your blog

You’re better off using the Google Analytics for WordPress plugin for a 3 reasons:

1. The plugin will track outbound clicks to see where people are leaving your site and what links they are clicking on when they do leave your site.
2. The plugin will automatically put the proper code on all aspects of your site, and when an upgrade is available it’s as easy as clicking upgrade.
3. Your downloads will automatically be tagged as /downloads/wp-content/uploads/your-file-name.zip so you can get an idea of how many downloads you are getting.

To download the Google Analytics for WordPress plugin you can either add it through the administration interface by going into your WordPress Admin area: http://www.whateveryourdomainis.com/wp-admin and then click on the arrow next to the Plugins link and click “Add New”.

Then, do a search for “Google Analytics for WordPress” and it should be the first result. Install and move on to the next step or install it manually via the directions for installation on the plugins’ WordPress page which I have pasted below:

Input your Google tracking code

Remember the code we left open in another window from before? This is where we need that code again.  You just need the id off of your tracking code which I’ve highlighted below, not the entire copy/paste code that Google gives you.

Copy that part of the code and paste it into the configuration text box like I have below.

Set up your settings similar to how I have to ensure you’re tracking downloads as well as outbound clicks from your site.

Collect the data!

Gather several weeks worth of data before you really go in and analyze where people are coming from and what parts of your site are most popular.

What’s important?

Depending on how you are using your site there are a variety of things that could be of importance to you. (Besides just actual traffic of course)

If you’re using your website as a place where you can push your music to the fans with downloads then that’s going to be one of your most important areas to pay attention to. To view your download statistics go to the content report, and then “Top Content” section.

Then filter your content by downloads by typing “/downloads” into the text box as I have below:

Another thing to pay attention to is your  traffic sources. How are users finding you? Google searches? Reverbnation? MySpace? Twitter? Blog posts?

Want to increase/decrease the date range?

Been a few months since you installed the plugin code? How about increasing the date range from the past month to the past few months? Or past few days? Do that on the dashboard where you see the calendar:

Setup Goals (AKA Super Fucking important)

After you’ve ensured your data is being collected you’re going to want to setup goals.

Goals allow you to setup a flow on the site for how they find you up until they actually do something. (For istance,  download a file off of a specific page)

There are 3 types of goals you can setup, the most important to us being the URL destination which allows us to set a user path for a visitor coming to our site. Name the goal and select URL destination and you’ll see the rest of the Goal Details options that I have in the screen capture below:

“Goal URL” is the second have the the name of the page the user should end up on, and goal value is something to set up if you’re setting a monetary value for something like a digital download. For instance, if you have a file uploaded to your site as I have above, your goal URL would be downloads/wp-content/uploads/name-of-the-file-you-uploaded.zip

Note: You can take this link from the information in your Top Content section like I showed you how to do above.

If you want to track users from say, your homepage to your downloads page you can enter in the separate steps a user would take to get from your homepage to your actual file download.

If I had 4 pages I could enter them all in each field and name each step to determine how many users are able to make it through the entire goal funnel.

At Assault’s online clothing store, we use goals to track our user’s sticking points in our shopping cart check out process. If we find there are a lot of users abandoning their carts after they get to a specific step in the checkout process, we know there must be some sort of usability issue.

One of the coolest aspects of the goals and e-commerce tracking is that you can determine where your actual converted sales/downloads are coming from most. (Meaning the websites that send you the most downloads and money!)

Google analytics goals are critical when determining what social networks to push your music to the hardest, which blogs to keep pimping your free gear to cause their audience buys digital music, which twitter users are giving you shoutouts, etc. etc.

I say again, setting up Goals and Goal Funnels will give you visual proof of where you are having success with getting your music downloaded. I can’t stress this point enough!

If you find most of your users aren’t getting to your music downloads, then you need to give them a clearer call to action on all your pages.

If you’re users are bouncing after :20 seconds and only visiting one page, then they’re not finding what they came to your site for.

There are HUNDREDS of things you can learn from all the data Google gives you. Are your fans primarily hitting the page on the site with your pictures? Are they coming to the free download of a song you offered them that got plugged by a blog? Are they looking at your bio because you have a hot chick lead singer and they want to see if she’s single? (Assault‘s top viewed page on our store is for our zombie t-shirt. Go figure.)

Analytics is the key to your online strategy. It tells you what you’re doing right, and what you’re doing wrong. It’ll also tell you what your fans want more of, and if you’re getting them to the right place in the fewest amount of clicks.

Want more info? Did you get stuck at a certain point? Want some one on one advice? Send me a message on Twitter or post in the comments. I reply to just about everything that comes my way.

After completing my first two designs for team Assault, Tim asked if I’d like to make a tutorial providing some insight into my design process.

Generally speaking I always try to work from general to specific. I also find that for each design, the process is unique. Some designers feel that thumbnails are always useful, some designers feel that just going at it, throwing pieces together and working out the design solutions on the canvass is the best method.

To be honest I do not prefer any standard methodology over another, the only consistent philosophies I try to abide by while working include, working general to specific, maintaining focus on what works for THIS design–don’t hold anything precious, and last but certainly not least, don’t be afraid to try something new!

For the “One Year As A Lion” design I already had a strong image in my head of what I wanted and a fairly certain approach laid out before I began, so lets get into it.

Gather source images

The first step in the actual production process is to search and gather images which I think could be useful. I’ll use ANY resource available, google, flickr, magazines, old sketches, ANYTHING.

When I was living in Amsterdam, taking the train to work, they would hand out free newspapers to passengers. As the papers were in Dutch I couldn’t read the articles, but i took the papers anyway and during my ride I would look through the images for anything that MIGHT be useful in the future. At the end of each month I’d scan all the clippings in that I had accumulated, and save them in a PSD file of reference material.

For this design I knew I wanted a man/lion figure standing out among a sea of sheep. I wanted the lion to be the only source of light as well as the sheep to resemble rocks of a cliff. I searched for sheep, sheep flocks, goats, lions, orangutans, (for fur) clouds/storm clouds/ash plumes, (all for rock like imagery to accompany the sheep) bodybuilders, (for the lion man’s base) barcodes, and skeletons.

As you can see in this image I’ve gathered and extracted various masses of sheep. At this stage we aren’t concerned with color, brightness, contrast or levels. Remember, we’re working general to specific, once we lay in the base of the image we can then work more specifically, tweaking when necessary.

From general to specific

The lion man is a good example of finding anything you think could work to your advantage and going with it.  Here is an image of two different body builders, a random hand, two different lion’s manes and even some orangutan fur to fill out the mane further. None of the images have the same colors, tonal values or contrast. At this point, even the seams between the different images are clearly noticeable. Again, all acceptable at this “block in” stage.

Here the lion man has come a little further, now with both arms and a leg. Where pieces didn’t line up enough i painted in a make-shift base. The further we go, the more layers we build up, the less noticeable the seams between the various pieces will become.

Combining the elements in gray scale

Here we have the lion man with his flock. I’ve gone ahead and desaturated the image so that I could focus on unifying the values to bring the individual pieces together more.

After using several adjustment layers, including: “levels,” and “brightness/contrast”, to even out the values I began painting in areas that needed more visual information before going any further with any additional layers.

Here I’ve addressed all the seams, I’ve added to and unified highlights and shadows and I’ve slightly altered the outreaching hand.

I’ve knocked back the brightness and added a layer of cloud imagery I’ve meshed together with the sheep layer. I’ve began to bring out a focal point and focus on building up the light source. This was accomplished by fading the edges of the flock to darkness and dodged up areas that would be closes to the light source. (his hand)

I’ve also adjusted layers of highlight and deep shadow by dodging/burning/over-painting.

Here, you can see I’ve added a flame for the light source. I’ve also adjusted the shape of his hand. Because I couldn’t find a hand “just right” for my design needs here I took a photograph of my own posed hand with my phone and then brought it into Photoshop for further manipulation. I’ve also brought in layers of hair I had assembled from images of orangutans set to multiply over the base of the lion man’s body.

I should mention that in order to streamline the design process I have a “hue/saturation” layer at the top of my layer stack in this PSD set to “0% saturation”. This way, no matter what color information a new layer or image brings in, as long a it is below this “hue/saturation” layer it will automatically show up as gray scale. This keeps me from having to individually desaturate every layer I bring in.

I’ve now began to bring in more subtle detail elements. Here I’ve added sheep skeletal information to various members of the flock including skulls, ribs, and spines. I’ve also added to the sheep’s head in the lion man’s hand.  Additionally, I’ve added in bar code elements to the back of several sheep’s heads, a subtle detail.

From my original mental image of this design, I knew that the final design would be a layered “posterized” look. I felt this would best add to the element of ambiguity in the flock. I believed this would also aid in bringing together the sheep and cloud elements.

Having had this in mind, I added another adjustment layer at the top of my layer stack in the PSD, as I had done with the “hue/saturation” before. This time it was a “posterize” modifier.

Bringing it all together with detail

Now that I had all of the basic design information unified, all that was left was detail work. I wanted a hot color palette of yellows and oranges to work with an earthy palette of browns. I tried several ideas before stumbling across the right design solution for this image: I ended up using color overlays and various hue/saturation adjustments.

Finally, dejected, I decided to take a wander through my reference library of images and textures I’ve collected. It was at this point I stumbled across a sheet of brown, discolored and deteriorating paper.

I then made copy layers of this sheet which were then merged and the seams stamped out with the stamp tool. All that was left was to find the most visually pleasing layer setting, which in this case was “color burn” at 100%, a little hue/saturation tweak and bingo!

Even though I felt I had achieved the colors I wanted, something was still missing. It was still too clean. I needed a bit of grunge, a bit more granular debris. So again back to the reference library to find an appropriate overlay.  This piece of paper had just the detailed dirt information I was looking for.

I set this layer to “multiply”, and knocked back the opacity and adjusted the levels so that only the darkest micro detail would show up.

And here we have my final image. I had completed my portion of the design, the base for which Tim would add his own design touches to in order to polish the piece.

The finishing touches by Tim

After receiving the final design from Stani, I decided to add a bit of the “Assault” flair to the design including some text, our hidden logo, (It’s in there I promise you) as well as some abstract splats to the lion and flames. I duplicated the entire design, and set the layer mode of the duplicate to color dodge. Next, I played with the opacity and levels to give the design more contrast, and more importantly a few less colors so we could afford to print the shirt!

What you see above is the final version of the design and you can purchase the, “One Year As A Lion” T-Shirt over at the Assault Online Store. You can also purchase Stani’s other design, the 1984 t-shirt, which we will also have a, “making of” blog post in the near future.

Related Posts

• Tutorial: Creating your own Photoshop Custom Brushes
• Assault Grunge Photoshop Brushes
• Tutorial: Photoshop Brush Dynamics
• Tutorial: Trendy Lightbursts step by step tutorial

Assault's most recent HTML Email blast

If you’re a designer and developer there’s no doubt that you have at some time had to design or code an HTML email. If you haven’t already, sign up for our newsletter at the top of our homepage to receive the Assault Newsletter once a month.

HTML emails have become a great way to solidify your brand with internal and external emails. Along with their popularity, there seems to be some common misconceptions about how they work, and how long they take to build. Along with the basic process for which I have outlined below, there are a few general rules that you should always follow with HTML emails as well as with any other web based project for which you are not experienced with or completely cognizant of:

1. If the client needs it the next day, they are not getting an HTML email.

Email clients are even pickier than web browsers, and there are 50 more email clients than browsers. HTML emails need to be tested after they are built. Testing can take anywhere from 1-4 hours. They also need to be cut up from an image and turned to plain text so that if users have certain features disabled in their email client (Such as HTML) they can still see the content of the message.

2. HTML Emails are commonly rejected and/or flagged as spam (Should you even use it?)

HTML email adds points to your emails’ overall spam score, and runs the risk of being marked as spam. For this reason, it is important to send a text only version of your email, and/or a link at the top of the email that allows users to click to view their newsletter in a browser window. Another thing to note, is that because you have an inherit spam score from the embedded HTML, that you should not forward HTML emails. They should be sent directly with no FWD in the subject because that too will add to your overall spam score.

We should also be sure to have permission to send emails to the people we are contacting whether it be via an opted-in online subscription form, or they should have exchanged business cards, and understood that they would be getting contacted.

3. Images are disabled for security reasons

It is important to have the text of the email be in system text because 99% of email clients have images disabled for security reasons. This causes them to show up blank until the user right click and allows them. With plain html and system text users can still see most of the email.

4. “Pixel Perfect” – Not possible with HTML Emails

There are too many email clients, and too many different rules for how html emails are displayed. They are never going to look exactly the same in all email clients. Your 16 hour build time can easily turn into 100 hours of time if you spend time trying to make it look correct in Eudora as well as in Outlook Express, Gmail, and Yahoo Mail.

5. Fast, Good, Cheap – Pick two

If you want a fast and cheap email, it’s not going to be complex and it has to be very simple. If you want a good, fast email, it’s not going to be cheap.

The Correct Process (16-24 hours After Design Approval)

• Design Approved for build
• Design built into inline styles, HTML/CSS and tables
• Images uploaded to remote host
• Design is sent around to different email clients to test for images disabled etc.
• Email is built into workable template for either Campaign Monitor or Thunderbird (see below)

The Incorrect Process

• Design Approved
• Design Sent to Client
• As an attachment
• As a PDF
• As a single image in an html document

Two Ways to send your HTML Email

1. One email at a time, personalized for each individual
This process requires using either an Outlook template, or a Thunderbird template. We recommend doing this process in Thunderbird because it provides a way to send an html email, as well as a text only email in case users do not allow HTML in their emails.

It should be noted that there is no tracking with this approach. The only way you will know who clicked on what is by looking at your site statistics, or from actual responses from users.

2. More than one email at a time, mass email to large lists
For this solution we recommend using Campaign Monitor. Campaign Monitor‘s templates take longer to make because they have to integrate with the Campaign Monitor template scheme, but can be saved and reused.

Campaign Monitor makes it easy to import lists of emails, personalize names and subjects of emails, make groups of users based on certain rules, and makes it easier to track and maintain your campaigns to see how successful they are. It’s also a relatively cheap service at $5.00 per campaign and .01 cents per email. Some of my most favorite t-shirt related websites use Campaign Monitor: Linty Fresh, and Threadless.

Other email services:

• Mail Chimp
• MyEmma

A co-worker of mine recently found a great article in Wired that had some really beautiful looking “lasers”, as he called them with some light bursts and motion trails around them. He wanted some insight as to how one could emlways wanted to write a cool trendy tutorial so I’ve decided to unwrap the trendy light trails with a handy Photoshop tutorial.

Download Source PSD
Download Custom Brushes used in this tutorial

Begin – Choose a source focal point

To start out you need some sort of focal point so I figured a picture of one of our t-shirt models, Kendra, would do just fine. After extracting her from the background using various techniques (pen tool, magnetic lasso, and masks) we’re left with a blank canvas and a girl. If you can, preserve your layer masks.

Drawing Lasers and Motion Trails (option 1)

There are plenty of ways to make the little lasers, and I’ll be the first one to tell you that there really isn’t any right or wrong way–so for demonstration purposes I will show you the two ways I made my lasers in the above image. The first way of which is by using the pen tool and making a wavy line like I have done below:

After you’ve drawn your path you need to select the brush tool by hitting the “b” key or by selecting it from the toolbar on the left. Right click on your canvas to bring up your brushes window and select a brush with a very soft edge that (depending on the size of your image) is about 7 pixels wide.

After you’ve done this, select the pen tool again by hitting the “p” key or by clicking on the pen tool button to the left. Create a new layer (Layer>New>Layer) and then right click on that path and goto the “stroke path” option.

A window will popup. Check the “simulate pressure” option and make sure your brush tool is selected. Then click ok.

You will notice that you have a brush stroke going across where your path is and it should go from thick to thin at certain points in your curve with simulated pressure.

Now to get the glow effect on the brush you need to apply a layer glow. (Layer>Style>Outer Glow) Here are approximately the settings that I used with the color #006cff:

You may notice your glow may not have the intensity that you want. The best way to remedy this is to duplicate your layer by selecting it in the layer box and hitting apple+j or cntrl j and then merge those two layers together by hitting apple+e or cntrl+e. Here’s what mine looks like currently

After making one of the lasers this way you may want to repeat the process with another path, or you may want to just move your other path down and transform it. Save the paths you create as we’ll be using them later in the tutorial by going to your paths layer, and dragging your “work path” to the new path icon which should give you something similar to this in your path window:

Creating Motion Trails and Lasers (option 2)

Now one way to make very smooth consistent “lasers” is to use the above method. The other way, which may be a bit more quick and dirty but looks just as good is to brush the lasers on by hand. To do this, create a new layer and select a brush similar to the one you just had, except size this one down a few pixels by either opening the brush window (F5) or by hitting the “[” key which will scale down the brush size one pixel at a time. Then, by hand, draw several “lasers” from right to left across the canvas as I have here:

Somewhere between creating the live demo of this tutorial and writing the actual tutorial I did manage to forget a few screen captures so forgive me if there is some slight inconsistencies in my lasers. (I re-drew mine for this demo, but the actual lasers in the image were slightly different–but they were created in the same fashion) Now that you have several white lines you need to apply the blue glow effect to them. To do this, copy your layer style from your previous outer glow layer style and paste it onto your new layer. (Right click on layer with style and goto copy layer style, then right click on the layer you want to apply the style to and click paste layer style)

You can also recreate the layer style from scratch by going to layer>style>outer glow. and enter in the same settings that we did above. After you’ve done that your image should look something like this:

A few things to note about my image:

• My previous lasers have their layer modes set to things like color burn, and overlay to give some variation in the colors as you can see here.
• I’ve moved Kendra into the foreground in front of the lasers because… well because she’s the focal point!
• After getting my second laser technique down I decided to duplicate that layer and motion blur the layer to give it a bit different of a look from the first layer of lasers.

Add Light Bursts and thick Motion Blurs

It’s at this point that it might be a good idea to reference our original source inspiration to get an idea of what else they were doing with their design. I notice with some of these images that they use a bit of a blur with some of their lasers, as well as lasers of a different thickness.

The first thing I do is repeat my first technique for creating lasers, only this time I use a thicker brush and I’m going to blur the thick laser as well as distort it to give it a smokey feel. I repeat my first technique above by creating a path and a thicker brush and stroking my path.

Don’t forget to re-apply the previous glow layer style to get the right color blue neon on the outside. The next thing we want to get on this specific laser is some distortion. To get the right kind of distortion on this laser I want to use the glass filter, and in order to do that I need to put my white laser on a black background. To do that I create a new layer (Layer>New Layer) and fill it with black and place it below my white laser layer. I then merge the two layers by hitting apple+E or cntrl+e. After you have the laser on black you need to apply the glass filter with these settings (or something close to it):

This should give you a fatty laser beam that looks something like this:

Now those of you who are beginners are thinking, “OH NOES!? Where are my beautiful laser beams and motion trails that I made before?!?” Don’t worry they’re still there. What we need to do now is one of two things. You can either set this layer mode to “screen” which will act just like a real screen and make all the black invisible…

…or you can use the magic eraser tool. (Shift+E or hold the mouse down on the eraser tool till you see the magic eraser.) I don’t quite recall why I used the magic eraser, but for some reason it seemed to be the quick and dirty way to get this done so we’ll stick with it.

After selecting the magic eraser tool and clicking on the black areas of the image, I duplicated my fatty laser beam and set the layer mode of my copy to overlay to give it a more intense glow effect with a slightly reduced the opacity. Here’s what my layers currently look like.

Bring out the focal point with large light bursts with brush modes

After looking back at the reference image, I think our design still needs more of a focal point for our lasers, so we need to add some distorted light bursts. There are plenty of ways to do this whether it be using the lens flare or light effects, but I prefer to use good old custom brushes with layer modes. To start out, pick a dull tone of the color you want your light burst to be. I’ve chosen a dull blue (#1b294e if you want the hex code) Create a new layer. Then you need to set your brush settings to something similar to what I have here:

In order to get that intense bright look it’s important that you set the brush’s mode to “Color Dodge.” Then you need to pick a place on your canvas and click in roughly the same place three times as I have done here. You’ll notice that the more you click the more intense your color dodge becomes. I’ve clicked three times and ended up with a shape that looks something like you see below:

To polish off our light burst I want to add some white in the middle of the burst so that it doesn’t look like such a tacky gradient. To do this I simply set my brush mode back to normal for the layer mode and set my foreground color to plain white. After clicking in the middle of the current light burst you should see a nice gradation to white. Now we don’t want this perfect looking sphere shaped light burst showing up–we want it to be distorted, and for that you can use almost any of the distortion filters that Photoshop has to offer, but I recommend using a combination of the shear filter and the liquify filter.

After getting your gradient sheared to your liking, I recommend setting it’s layer mode to “lighten” and also duplicating the layer once and set that layer mode to “color burn” to give it a more intense look. (refer to PSD to see my final settings for this) I ended up duplicating my layer three times, and to make each layer unique I ran another filter, the liquify filter with these settings and adjusted my layer modes to give it the desired look.

At this point in the tutorial I’m not going to go into exact detail of each and every step because I’d be typing all day–the more you experiment with layer modes, masks, and layer modes the better the image usually turns out. I use a combination of all of those things to get to my final image as you’ll see in my final PSD which you can download here.

Add masks to light bursts for texture

After I get the desired intensity with my large light burst I merge those 3 layers and add a layer mask to hide certain areas of the burst that I don’t want. (Plus the source image appears to have a textured look to it) I select a dirty brush and paint a mask around desired areas of the image to hide/show more of the light burst. There are plenty of tutorials out there that teach you how to use masks and if you’re not using them along with custom brushes then I highly recommend you start doing that.

Rinse, Repeat, add color, use different distortion filters

In order to bring in some more color I’m going to repeat some of my earlier steps to make more lasers, except this time I’m going to use a purple color instead of blue, and instead of using the liquid filter, or the shear filter, I’m going to use the ocean ripple filter. First things first, you need to put your newly created lasers onto a black background so the distortion will work properly as I have outlined above. Then select the ocean ripple filter from the distort menu and apply something similar to the settings you see here:

The edges should be a bit rough looking and to smooth these out we’re going to slightly blur the ripples using the motion blur filter. Make sure to set the direction of the blur to mostly horizontal so it doesn’t lose it’s overall shape.

Experiment with your design!

To add some more volume to my composition I duplicate those new laser levels several times and experiment with different methods of transformation and layer modes/opacity.

Ultimately, the design is going to really come together in these phases and you’re not limited with what you can do. If at this time you wanted to completely change your design’s colors you could do so and continue on–or you can re-arrange the layers to get different effects on every layer.

Experiment! Save versions of your file so you can revert back in case you don’t like what you see. There’s been plenty of designs of mine that I worked on for several more hours and then ended up actually using a design that was done much earlier on in the process. (Look at our Radioactive II t-shirt design. It ended up being done alot sooner than I thought it was and I ended up throwing away what I had once thought was the “final” version.)

It’s hard to take your hands off the keyboard/mouse sometimes and actually decide when a design is done. This method of saving versions of your design is a great way to be able to look at your design later on with fresh eyes to see that maybe it was done a long time ago!

Clean it up! Accent the Focal Point!

Cleaning up your final composition and adding bits and pieces to the design is what’s going to give it it’s focal point, and if you haven’t been doing so already it can be really good to experiment with some of the same techniques using type. Before I get into adding type to my design, I’d like to touch upon adding a bit more variation to my color palette.

One thing I tend to notice about my design as it gets in the later stage is that I may want to add some variation in color to certain layers. The best way I find to do this is to utilize the clouds filter which I think is one of the most dynamic filters in Photoshop which is often under utilized by Photoshop n00bs.

To a beginner the clouds filter looks like just that, it makes pretty clouds, but once you learn how to use layer modes, masks, and custom brushes, the clouds filter can become your best friend for making your designs interesting and more dynamic. In this particular instance I’m going to use the clouds filter to add some more variation in color to my lasers by choosing a purple and a blue using the color picker tool for my foreground and background colors. After running the filter>render>clouds filter with purple and blue set as my foreground and background colors I decide to set my layer mode to overlay, and I also duplicate the layer and add a layer mask to it so that it’s hidden in various places. After getting the desired look that I’m happy with, I merge those two layers together.

Now that I have the desired color variation I want, it’s time to further emphasize the focal point, which in this case is Kendra the t-shirt girl. To bring more attention to her we’re going to duplicate her layer as you can see above and apply the layer mask to her. Your lower layer should no longer have the mask thumbnail next to it on your layers palette. This basically means nothing is being masked on your lower layer anymore.

You’re going to smudge using the smudge tool and a custom brush to give it the textured glow look that you see in the final image. If you’re not seeing the smudge’s show up outside of Kendra then you probably haven’t applied your layer mask and your smudges are getting hidden. make sure you’re smudging the bottom layer, so that the original Kendra image is on top.

You should see something similar to this:

Duplicate that smudged layer one more time and set that layer’s mode to color dodge:

Copy your layer style you created previously from one of our laser layers and paste that glow layer style onto your top original layer in this instance it’s called “Kendra Original”.

Add the finishing touches and details

I’ve been in the habit of adding little orbs to designs in this style so I create several new layers above and below my Kendra original image and use various custom brush settings to get some of those little orbs and light bursts surrounding my image and focal point.

Color correct and adjust your color palette!

The only other thing I can really think of to do on the image besides clean it up in various areas is to adjust the color of Kendra to match my color palette. To do that I’ll use some adjustment layers on my original Kendra layer (that still has a layer mask on it) The first type of adjustment layer I use is a curves layer:

You’ll also notice there are a few new items showing up here including some of my dynamic brush creations as well as some repetition of the purple lasers that I created before. One final thing to do is to add another adjustment layer which will add some blue hues to the original photo (Gradient Map):

Here’s the gradient settings I used:

Your layers window and image should look something like this now:

That’s about it for now. I’ve gone through and added some square looking brushes with brush dynamics.

I also added the name of my brand, Assault, to my image just because I like shamelessly plugging my product after writing these long tutorials. I’ve applied the following layer style to that layer to give it a similar neon look to it as well. (I’ve also applied a slight gaussian blur to soften the lettering)

Here’s the final image after cleaning up some of the layers and deleting some unwanted artifacts. I’ve also re-cropped the image because it felt nicer with a bit more head room for our center piece.

Conclusion

I’ve decided to post as much as I can from this tutorial so that if you knew 80% of what I covered you can at least benefit from my custom Photoshop brushes, or the original source psd of the graphic so you can see the actual layer breakdown I used to get to the final image. If you want to see some of the other tutorials I’ve written that I may have blazed past in this more advanced tutorial you can find links to them below.

While this may not be the EXACT process that was followed in our original inspirational material this is one of the many ways you could accomplish the same effect very quickly. Here are all of the files and links to my other helpful tutorials.

• Download the source PSD for this tutorial
• Download Custom Trendy Photoshop Brushes from this Tutorial
• Adobe Photoshop Brush Dynamics Tutorial
• Custom Photoshop Brushes Tutorial
• Additional Photoshop Tutorials
• Assault – Buy some t-shirts so I can start doing this thing full time!

With Mr. 51% and Saw-Shan’s wedding fast approaching I decided it was time to make it official that I become the officiant of their wedding. Thanks to the Universal Life Church I was able to get ordained online, and for the very low cost of $49.99 I was able to purchase the Classic Wedding Package which includes:

• 1 Ordination Credential
• 1 Wallet Card*
• 1 Clergy Badge
• 1 Fancy Floral Marriage Certificate
• 1 Classic Marriage Certificate
• 1 Wedding Officiant Certificate
• 1 Baker’s Wedding Handbook

I’ll be sure to post pictures of everything I receive when I get it in the mail which hopefully will be in the next few days.

Before going ahead and getting yourself ordained (which took less than 24 hours) I’d make sure to double check that it’s okay in your state to get married by an online minister. The Universal Life Church has gone ahead and gathered the laws from every state about marriage, and as it stands in the state of IL it is completely legal for myself, Timberooni, to marry Mr. 51% and Saw-Shan. (It should also be noted that I am also able to absolve anyone of their sins–which I do for myself on a nightly basis. Feel free to email us if you need something absolved.)

It also may be a good idea to call the Office of Vital Records in your county to double check and make sure you meet all the requirements for performing marriages. Just in case. I’d hate for Mr. 51% to find out that his epic bachelor party went to waste cause he’s still not married… technically.

One of the staples of our t-shirt designs featured at the Assault T-Shirts website is the use of randomization and intense brush dynamics. I use plenty of other techniques in conjunction with brush dynamics, but needless to say, if it weren’t for Adobe’s incredible dynamics engine, our designs would have taken twice as long to make, and they’d be only half as tough looking. If you’d like to learn to create interesting textures, highly dynamic imagery in a short amount of time, or something similiar to what we have done with several of our t-shirts, this tutorial is for you.

Step 1 – Select a Brush Shape

The first step to getting brush dynamics going is to either use an existing brush or to create a new Photoshop brush shape based on a selection. For this tutorial we will use a simple star brush and turn it into a dynamically generated brush that changes color/size/format without doing anything other than using the tool as you normally would (by clicking and dragging) Here is what the brush stroke looks like by default when clicking and dragging

As you can see the brush is evenly spaced out and has no dynamics assigned to it whatsoever. If you’re using Adobe Photoshop CS3 then your brush dynamics are located on the brush window which you can view by going to Window>Brushes or by hitting the F5 key. Click on the label “Brush Tip Shape” to bring up the brush dynamics window. Here is what my current brush dynamics window looks like by default:

Step 2 – Shape Dynamics

Here’s where all the magic happens… In each different window there are settings for you to tweak and play with to get the desired scatter amount as well as variations in opacity, colors, (foreground and background) brightness, scaling, flow, and hue/saturation. Here’s a shot of my settings with just the shape dynamics turned on and the result that comes out of it:

Step 3 – Select a Brush Shape

If you want to scatter the stars a bit you can adjust the scatter dynamics by checking off the box and playing with the settings in that area. Here are my settings from that and their results:

Step 4 – Color Dynamics

If you want to vary the color of the brush you can do this by adjusting your foreground/background colors and then you can adjust the color dynamics. Here are my results with that:

Step 5 – Dual Brushes

My final brush dynamic that I like to use alot is the dual brush dynamic which combines the use of two brushes as if they are being used two at a time (with a layer mode specified by you) Think of it as using a marker and a paintbrush in the same hand like when you were a little kid. I’ve selected the sparkle brush and adjusted the settings on that brush to give my brush a light textured look:

My brush is begining to look alot like the Barack Obama website branding at this point, and it only took me a few minutes of experimenting with the settings to get an effect that used to take ages to complete. (You won’t find anything like this in illustrator–as of now at least)

Step 6 – Save Brush Preset

The only thing left to do now is to create a new preset for your brush and by clicking on the create new button on the brush window.

Conclusion

This is just meant to be an introduction to brush dynamics. There are limitless possibilities to what you can do with brush dynamics including using it to create randomized variations of logos like I did with the Lex & Terry T-Shirt designs as well as on the Skull Spartan Warrior Shirt. There are also other methods of dynamics that you can use such as texture, opacity, and flow. (Opacity and Flow are covered in the “Other Dynamics” Section of the Brush Window)