One major skill that I’m relieved to have learned while in college is how to take good quality pictures. One of our ideas with Assault was to get pictures of our shirts on rock bands rather than on stock mock ups like every other apparel company. We felt it was the one thing to set us aside in a small way from everyone else that would also be a great way to network with bands that we were fans of.

Unfortunately, we didn’t realize that live concert photography is probably one of the hardest forms of photography. You can’t depend on your camera’s automatic mode if you want your photos to look professionally done. You can’t use a point and shoot camera. After a few practice shows though, and with plenty of practice and tips from our friends, we were finally able to nail down our process which we’re going to share with everyone, cause we’re awesome.

Lookout! Giants at the Metro Chicago

Account for lighting & other variables

If you’ve been to Assault’s Online Store you know that we try to get photos of people wearing our clothing during rock shows where there are any number of variables that you can’t account for. Such as:

• The crowd
• The amount of lights
• The layout of the venue
• The variation in color and intensity of the lights

To help you get started doing your own photography under these conditions I’ve prepared a few tips and techniques that will help take your photos from sorority party-girl self shots to Rolling Stone worthy concert photography. (Maybe not THAT good, but close)

As always, we’ll try to accomplish quality results as cheaply as possible.

Equipment: Digital SLR Camera

Your little party camera, aka the point and shoot, isn’t going to cut it. I’m sure it’s got plenty o’ megapixels, but the most important thing is that you get a large image sensor to capture more color information. I started off with a Nikon D70 DSLR that I bought off my friend Dennis Burnett for $300 bucks. It’s older than my little sister’s point and shoot, but the photos still look ten times better.

If you shop around I’m sure you can find a decent used SLR. Try Craigslist, or Ebay. (Does anyone use Ebay anymore besides Nigerian scammers?)

Not only is the camera body important, but it’s important to have a decent lens on your camera. I stuck with the zoom lens that came with my camera to start, but eventually purchased a Nikon 50mm prime lens to help in the low lighting situations.

Equipment: External Flash

A Hero Named Hope live show at the Metro Chicago

The quickest way to make your photos look like an amateur Kenny Powers photo shoot is to only use the built in flash. Buy a decent external flash. You’ll be able to shoot from further away. You can also get a better amount of light around your subject. Along with a softer light, you’ll also be able to adjust the intensity of the light so your shots aren’t washed out and overexposed.

I bought the Quantaray QDC 900WA for my Nikon D70 for $99 bucks. It looks like you can buy the same one online for the same price. Google it.

External flashes can also have a diffusion cover of some sort put on them to reduce over exposure and ensure that your subjects are softly lit.

Chris Huebner from the band, From the Broken

Camera Setup

Put your camera in manual mode. When I first started I asked my friend Dane Sponberg for some settings to start out at. Here’s what he had to say:

Try using these camera settings as a starting point:

• 800 ISO
• F4 or 4.5
• 1/30th of a second shutter speed
• Flash set to +1

If the stage lights aren’t coming through, either bump your ISO up and turn your flash down, or leave the shutter open longer, like 1/10th of a second. Just watch that, cause the longer the shutter is open, the blurrier it will get.

A few additional pointers, tips and tricks

A few of my personal additional settings/tips that you may also benefit you are to:

• Shoot in uncompressed raw mode
• Try not to overexpose, digital imagery picks up more color information in the blacks which is more easily fixed in post than an overexposed shot
• Bring an extra CF or SD card
• Charge your damn camera. I can’t count how many times I’ve been burned on this
• Use Lithium batteries in your flash so it charges up faster
• If your camera is older like mine, clean off the contacts with rubbing alcohol to ensure the external flash will work
• Shoot LOTS of images. Many will not turn out.

Some final thoughts

If you’d like to see how most of my early photo sets turned out you can look at our Flickr Photo feed. The most important thing to do when getting the shots in the show is to make sure you are shooting in NEF Raw mode so you can edit the files later in Photoshop.

The more color information you have the easier it is to make your photos look even better in post. My next tutorial will cover how to edit the photos and color correct them to make them look even better.

I got an email this week from Shy asking for a tutorial on how we apply our t-shirt designs onto photo real mock ups. I must say as much as I’d like to act like we could do photo shoots every day with pretty girls like the people do over at Design By Humans, we can’t. So I enlist my resourceful mockup PSDs from Emptees, and Photoshop layer modes and by the time I’m done I’ve got something worthy of the Assault Shirts homepage.

There are already plenty of people who have built ready made templates to place shirts on and to adjust colors so I’m not going to go into detail on that process. Instead, I’m going to refer you to the post I did last week about a few quick tips, as well as point you to the Emptees resources page where I got my templates from:

• Tips for prepping t-shirt designs for print
• Emptees Resources & Downloads

I chose to use this prepared blank shirt photoshop mockup by Falseone.org and if you chose the same one I did, your design should look something like this when you are done:

For demonstration’s sake, I’ll be using the most recent design we released, SS Amnesia, because it fits very well on many different colors.

Is your design flattened and not on a transparent background? See Below:

You have several choices if your design is on a flat background:

1. Trace your design in Illustrator:

www.youtube.com/watch?v=i0yNFH99cWg

2. Use the magic eraser tool and delete your background (This will look like shit)

3. USE LAYER MODES

Depending on the color of design you can easily set the design layer’s mode to either “Screen“, or “Multiply” and it will delete the background (or blend it) so that you see the design placed nicely on the shirt mockup.

This will take some experimentation. Generally, if you have a darker background on your design you want to use “Screen” as your layer mode. Think of it like a screen door in a way. All the black and darker tones becomes see through. If you have dark colors in your design that now look brighter or darker, you may want to use Image>adjustment>levels (or cntrl+L) to adjust your colors to get them as close as you can to your actual design.

If you have a lighter background on your design set your layer mode to either “Multiply” or possibly “Darken”. @angbowen from Fuel Your Creativity has a great article explaining the various layer modes and how they work. I highly recommend reading her article, Photoshop Blend Modes Explained. It will help clear up any confusion about what each layer blend mode does.

Is your design is on a transparent background. Read below:

If you’ve prepped your design with a vector fill layer as your background layer, you should easily be able to hide that layer, and copy the other merged layers by hitting cntrl+shift+c or by flattening your image and hitting cntrl+c.

Change over to the blank mockup t-shirt file, and hit cntrl+v or paste your design on top of it. Scale it down as you see fit and place it on the design. If you had a transparent background on your design you should be good to go for the most part. The only other step is to change the color of the t-shirt to the actual color you want it.

To do this double click on the Gradient Map Layer which will bring up the gradient editor.

Double click on the red colored tab to the right which will bring up your color picker window.

What I do next is head over to the American Apparel Colors resource and grab all the CMYK values for the shirt color I want. The highlighted field in the screen shot above is where you enter the first value, the second value goes in the next field, and so on and so fourth. Here’s the color picker window with the proper CMYK values for the American Apparel red color:

The red code listed on the American Apparel page is 0,100,80,2. See where I entered them above? Nice work.

You can use any color you’d like for the gradient map color, but you probably want to stick to the exact color your shirt supplier gives you. Just sayin’

Feel free to scale/distort the shirt if you feel it needs to be warped a little to fit into the shirt, but I generally leave it as is. Here’s what the design should look like:

Click to see a larger version of this image to see the detail

Need more help still?

Post in the comments, and I’ll gladly answer any questions you have on using free mock ups or getting realistic t-shirt templates. GoMediaZine has also covered this in great detail and even sells templates. I wish I had an entire design team like they do, but unfortunately it’s just me, and Mr. 51% so you’ll have to take what you get!

In the past year I’ve learned quite a few things that I didn’t know about t-shirts, and t-shirt printing that I thought I would share with anyone who’s either already designing their own shirts, or just getting started.

If you’re printing your shirts using a direct to garment type of solution you need not worry about many of these tips such as reducing the colors, but for those of you using screen printing, like we are at Assault Shirts, I think you’ll find most of these tips and resources very helpful.

Reducing image colors in preparation for a screen printing in Photoshop

Throughout many of our t-shirt designs we’ve had to reduce the amount of colors in an image in order to make it fit into the color scheme of our design.

Reducing the amount of colors also makes it cheaper to print, and it gives you a better idea of what your design is going to look like once it’s been screen printed. We used this technique in our 1984 T-Shirt design as well as our One Year As A Lion T-Shirt.  The key to reducing an image’s amount of colors for screen printing is the Posterize image adjustment. To demonstrate, I’ll use this image of Johnny Depp as the iconic Chicago gangster, John Dillinger.

Image > Adjustments > Posterize…

Posterize reduces the amount of colors in your image to the number of levels you specify. Depending on what kind of a look you are going for you can reduce the amount of colors once, or sometimes twice to get the desired look for your image. I’m sure you can even reduce it further, but I generally use 3 or 4 levels.

To posterize your image, first make sure you are on the selected layer you want to posterize. Then, go to Image> Adjustments> Posterize…

After posterizing your image, you can either desaturate it or try varying the amount of levels within the Posterize settings to get the desired effect. Here’s a few other options I managed to come up with:

You can also bring your image into Illustrator, and start to trace the image so it doesn’t look so crispy which you’ll find  may have a better effect than what I’ve outlined above. I personally am all-Photoshop guy so I prefer to keep everything in Photoshop, but Live Trace in Illustrator is another popular method for vectorizing an image.

New Document Presets for Screen Printing T-Shirts

The two document presets for the two sizes of screens that we use are:

18x23 canvas with 300 dpi resolution in CMYK color mode

With the large image sizes it may make sense to start at a resolution of 150dpi if the computer you are working on is a bit older. You can also use a Fill Layer for a background rather than a raster background layer to reduce your document file size. I do this with all my designs so my working file isn’t a 2gb fail whale waiting to happen.

Getting Pantone color codes for exact color matches with your printer

In order to guarantee your designs colors are matching and actually printable you need to send your pantone colors for every color in your design to your printer. Rather than let them do the color work for you, you should send the colors pantone codes.

To do this,  use the eye-dropper tool by selecting it in the tool palette or by hitting the “i” key and then clicking on the color in the design.

After you have the color selected, in your tool palette double click the color, and your color picker will open with the color you just eye dropped. Generally, this color will still be an RGB or CMYK color and isn’t the pantone color code we want. To get the approximate pantone color code, click on the “color libraries” button.

This will open up your color libraries window and the eye dropped color should be selected. The P542 C is what you want to send to the printer along with every other color code associated with your design.

2 minute color separation in Photoshop

Our printers have always done the color separation for us after we send them the high resolution images, but in case you need to do color separation on your own here’s the easiest and quickest way to accomplish that:

• Select the Magic Wand Tool in the tool palette (or hit the “w” key”)
• Uncheck “Contiguous” in the tool options area

• Click a color on your design
  

• Create a new layer and fill it by hitting cntrl + backspace or alt + backspace (depending on what color you want to fill it with the foreground or background)
• Repeat this for each color in your design and you should have each color separated on it’s own layer! (Here’s my design with new colors all separated on their own layers below)

I also found several detailed step by step Youtube videos which outline the above process using similar techniques:

www.youtube.com/watch?v=lmspWZqbc2Q

www.youtube.com/watch?v=4uydc2VmfvQ

T-Shirt placement templates and mock ups

To ensure your printer gets your shirt printed with the correct shirt placement you should place your design on an actual shirt. This should be included with your high resolution shirt files that you send to your printer.

In the past we’ve used a combination of the below sources for t-shirt templates and mockups:

• Photoshop T-Shirt Custom Shape -- Download Use this custom shape as a background and place your shirt design atop it and mask out the outside area.
• Go Media’s Arsenal T-Shirt Templates are a the best way to get a photo realistic idea of what your designs will look like. They’re worth every penny.
• Color Overload’s Men’s T-Shirt Templates Another PSD with an assortment of color t-shirt templates to use for creating mockups from Color Overload
• Assault Shirts Product Page Photoshop Mockups This is our T-Shirt mock-up that we use on our product pages at Assault Shirts. It’s my personal favorite and can be used for shirts of all colors in the American Apparel style.

Related Links & Resources

• T-Shirt Forums Graphics & Design Help
• Designer’s Guide to Apparel Printing from Go Media
• Emptees T-Shirt Resources -- Great assortment of downloads and resources

I recently took an hour out of my day to figure out how Ustream works and do a live broadcast with some SEO and Blog Tips for all the small t-shirt and apparel websites out there. It went live on Ustream, and is now found at Watch Tee-V. I packed as many tips and tricks into one hour as I could think of, and answered a few questions along the way.

Even if you’re not in the t-shirt design industry I still think you’ll find some good tips in there.

Don’t Forget

Assault will be at the Belmont Arts and Music festival this weekend in Roscoe Village in Chicago! Great deals on EVERY shirt in EVERY size that we have in stock plus a chance to get to meet Craig and I face to face!

I knew, from the vision I had in mind, that I wanted a nearly symmetrical design radiating from a central focus. In this case I found an image of the face of “Big Brother” from the movie 1984 to be the focus. Feeling that this imposing figure had all control over the populus (and viewer) through methods of fear, propagation, and surveillance I knew I wanted everything to stem from his mind and to point, visually, to his face as the central focal point.

I then began to layer in the imagery I thought were either directly available to work towards the theme or that linked to subjects indirectly corresponding with the theme. So, for this design I focused on this idea of “Big Brother”, of being watched, controlled, enforced, manipulated, opressed, etc… Here, I have an an atomic bomb’s mushroom cloud rising from his destructive mind, and guns like crossbones on a pirate’s flag flanking his left and right.

Remember the central theme of the design at all times

During this particular design process, I thought of the current state of surveillance I thought of tools of oppression and fear propagation; televisions, loud speakers, and weapons. I wanted this endless  barrage of surveillance equipment to be erupting from behind his face.

Here, I’ve added elements such as CCTV cameras, some loud speakers and a couple TV’s.

At this point most elements are only made on one side and then copied over, flipped horizontally and added to the other side of the design.  This is only done for the sake of speeding up the production process. Once the design is filled out a bit more I will add/subtract elements to make the design asymmetrical.

Here, I’ve continued to fill the design out more, adding more TV’s, speakers and cameras. At the top and bottom I’ve added different antennae elements to elongate the design and begin to break up the symmetry.

View the design in different sizes

When doing a design with so many various elements all working together in a relatively tight space, it is important to take breaks to look at the image at different sizes.

The reason I do this is to remain focused on whether the design still works, whether it is balanced, i.e. are there so many elements that the design now feels overwhelmed and cluttered or is there still room for additional elements. I felt at this stage, there were enough primary elements, and only smaller tweaks and touches were needed. So here you can see, I’ve added static and eye elements.

Once these final tweaks were completed the design was ready for the addition of color, and more abstract complimentary design to aid in grounding the existing design elements. For this, I passed the design along to Tim.

The finishing touches – done by “third world Timmy”

Finalizing this design from Stani boils down to two steps:

1. Breaking up the symmetry as much as possible by adding “Victory” text elements. (The brand of cigarettes from the book, 1984) and moving megaphones, microphones, tentacles, and antennas. This is mostly accomplished by using custom shape tools and graphing things together the way I want them to display. I’ve also added some custom brush splats in the background to give the design more volume.

2. Adding an intense blue color palette. I accomplished this by placing duplicates of the design on top of itself and masking/cloning different color blues to get the exact colors I wanted. I also used custom adjustment layers (levels) and several layer modes (color burn, and color dodges)

The final image:

Related Links:

• The artist statement and inspiration that went into this t-shirt is discussed in full detail in the 1984 T-Shirt blog post
• Assault Custom Photoshop Brushes tutorial
• Photoshop Brush Dynamics Tutorial

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

Unlike a good portion of the design related blogs on the internet, we at AssaultBLOG try to write as much of our own content as we can rather than just link to other peoples’ hard work. It’s also been awhile since we’ve written an extensive tutorial so I’ve decided to make our own list of best posts from Assault that you may have missed if you just recently started subscribing to our RSS feed.

5 Tips to make your unsigned band stand out from the rest

List of tips to spend your hard earned day job money to make your band stand out from the rest.

HTML emails – A quick rules and primer tutorial

Thinking of writing an html newsletter? Consider these few things first.

When Every Sale Counts

When you launch your first online store, it takes forever to get sales. This article will give you a few insights as to how you can get those first few sales even when your traffic is relatively low.

SEO Tips and strategies the high priced consultants aren’t telling you

Don’t feel like paying $2,000 for an SEO audit of your site? Read this list of tips and it will greatly help you fare better in the SEO world. This is my most comprehensive and one of my best SEO articles to date.

How to float to the top of Google search pages

Interested in what gets you in the top ten search results for Google searches? I list out my secrets for free! (This list is a great list especially if you have no money to spend like I don’t.)

E-Commerce tips explained with some interesting human behavior psychology

Do you know why we sometimes find ourselves excitedly buying things we don’t really need?  I came across this outline from a book by Dan Ariely called, “Predictably Irrational” that had some incredibly insightful information about people and why we at times seem to act completely irrational. It covers giving away  things for free, putting high price points on products to create demand, and even the benefit of arousal!

How to reset your Myspace page using CSS

A brief tutorial with working code to make your Myspace look a bit more respectable. If you don’t want to read the whole post, you can just copy/paste/edit the source code that is supplied.

Tips & tools to improve your conceptual web design

A list of tools that will help bring your web designs one step closer to print designs including non-standard web fonts, custom line breaks, and transparency across all browsers.

Assault Photoshop Brush Set 1

The first set of brushes released from some of our t-shirt designs that were never used.

5 tips & resources to help get your t-shirt company off the ground

During my time at the university of hard knocks in the t-shirt business I learned a few things that I share here with anyone else who may be starting a t-shirt company so they don’t have to go through the same growing pains that I did.

How to create your own Photoshop Brushes

A step by step tutorial outlining how to create your own Photoshop brushes so you don’t have to spend hours scouring the net for the perfect brush.

How to use Photoshop Brush Dynamics

Part two of my brush tutorials where I show you how to use brush dynamics to get some cooler effects with your brushes that you’ve created in the Photoshop brush tutorial.

How to make those trendy lasers and light bursts in Photoshop

I’ve seen tons of ads with cool looking light bursts and light rays, and decided to write a step by step tutorial on how it was done. Originally, I believe I saw them in wired from designer, Tom Muller, so I even got in touch with him and interviewed him to find out more about his design process.

Alternative ways to find design inspiraiton

My personal best ways to find design inspiration when watching tv or going to the park just doesn’t cut it.

Turn a WordPress blog into your own personal FFFFound

A wordpress theme tutorial with included plugins that will allow you to make your own FFFFound blog like I have done on VNovember.com.

Like what you see here?

I write one quality post like this at least every week, and time permitting I make additional posts about the music industry, apparel industry, and design. Subscribe to the RSS feed, it’s worth every penny.

Seems like too many websites and brands start up from scratch, and get absolutely NO WHERE. Without the blitzkrieg of press releases and public relations broo-haha, it can be damn hard to get relevant traffic to your site, especially with no money. Here’s my comprehensive guide for getting traffic to your site when you have no fan base, no tribe, no cult following, no page rank, no domain age, no public relations, and most importantly, no money.

Before you even write, follow SEO best practices

We’ve done several posts on SEO here at AssaultBLOG. Our most popular one being, “Tips & Strategies For SEO That The High Priced Consultants Aren’t Telling You.”

There’s no point in trying to get Google to spider you if you aren’t following best practices.

A quick recap of SEO best practices from this article

• Minimize HTML and use table-less layouts
• Utilize alt tags, title tags, meta title and description tags, and anchor tags with keywords every
• 3% keyword density is more than enough on every page
• Utilize strong, em, h1, h2, h3 for headings and elements that carry more importance
• Think like a human, what would I search for in a post about [your blog post here]
• Register your business with local search, you appear at the top of the pages in the maps section
• Use an XML Sitemap
• Don’t waste too much time on META keywords
• Keep up with the latest Google trends and follow search engine resource websites

Provide something useful, unique

Content is king. It took me a long time to realize that no matter how much I wrote, unless it was something useful, and interesting to the masses, no one was going to take the time to read it, if they could even find it in the first place.

Writing for the web is a different kind of beast. People use the internet as a tool, to find information. How to do something, how to fix something, What’s the best way to skin a cat? Who did Michael Jordan punch in the face at the Bulls practice one day? What’s the name of Shawn Kemp’s 12 kids–you get the point.

Ulysses is a great novel, but no one on the internet is going to read an epic saga, we’re here to get answers, fast.

Hit the ground running, get links back cause you’re awesome

Congrats, you have something interesting to say, and you’ve followed SEO best practices when coding your website, but you’re still not showing up for any major searches in the top 20 results. It’s not secret, you must have links from other popular, relevant websites pointing back to your site, using the keywords you want to show up for in searches. A good way to start, is to mention other articles, and websites in your posts, and contact the original writers telling them you enjoyed their article, and you wrote about it. Some of my closest network of online friends are people I emailed (or Twittered) telling them I liked their articles.

Use Google docs, and make yourself a list of places you can send out freebie links to. There’s hundreds of websites you can submit links to in a user link feed to a helpful blog post about design, programming, and just about anything else. Our current list has over 100 places we submit our stories to, and we submit every quality blog to every one of the pertaining websites. Most importantly, when you find a new site, take the five seconds to add it to your list, and be sure to update your list if changes are made to the website.

Here’s our list of websites we submit our posts to

The most important thing to remember when getting links back to your site is the popularity of the site linking to you, as well as the relevance of it’s content. Second most important thing when getting linked to is that your targeted search keywords must be used inbetween the anchor tags and title tag.

In our case, getting linked on websites like Shirt.Woot.com, Hide Your Arms, Emptees, has helped us because they’re popular, the send lots of traffic, and in the future their links to us help us float up to the top of popular searches with the word t-shirt in it. This works the same as getting your pages on Digg, Designfloat, and many of the other sites in our list of links above.

Recently, Digg released the Diggbar, and they did a ton of research into it’s SEO-ability, and it appears as though they have done their homework. Don’t be afraid to utilize it, more people will digg your stories, and you can only benefit from it. One general rule I try to use when utilizing Digg is to not submit your own stories. If you do have a specific story you think is worthy of the Digg homepage, go for it and push it-but hell hath no fury like angry Diggers. So submitters beware.

Beware the rel=”nofollow”

When you type your name and website into a comment area on a blog, you get a link back to your website. While I do encourage participating at other blogs and websites, beware the rel=”nofollow”. That tag inside of an anchor tag tells the search engine not to go spider your link, so in other words you are getting no “link juice”. I see comments showing up from normal users and spammers all the time saying things like, “art community” trying to get link juice. I have bad news people, no one spiders your link text in comments–at least everywhere I know of doesn’t.

Delicious bookmarks is one place where the rel=”nofollow” tag is setup, as well in all Flickr image descriptions and comments.

That’s not to say you get no benefit from those User Link feeds on some of the websites in my list of websites we submit our posts to, alot of the time we end up getting featured in other popular design blogs as a direct result of those links. Keep this in mind when submitting your website, but don’t waste your time. We also pull in RSS Subscribers through these posts, so even though there is no actual “link juice” benefit, there is still the benefit of repeat visitors, and possibilities that you may be linked later.

rel=”nofollow” tags do have their benefit though. The more links you have on your page, the more Google divides their importance. For example, if you have 50 links on a page, there is obviously a less amount of importance on each one instead of having ten links. You can carve out which links not follow just by putting rel=”nofollow” in the <a href=”link here” rel=”nofollow”>Link not getting followed</a> I believe this has some fancy title called “link carving”, but that’s just how it was explained to me. If you do have lots of links on one page, sprinkle the rel=”nofollow” tag on ones you don’t want spidered. Like when you’re trashing a competitor.

Freebie “link juice”

I know some people like to keep their secrets to themselves, but I like to tell everyone in hopes that a few of you subscribe to my RSS feed. (As well as hopefully buy the occasional t-shirt, or hire us to design something for you.)

Believe it or not there are ways to get good quality link text back from very popular websites. Here’s a few websites that, upon approval of your content, will link back to your website without the rel=”nofollow” tag (This is subject to change) A couple of places that provide link juice are:

• Ebay blogs – We repost our relevant articles over at our ebay blog and link back to our site. You get quality html link text and there is no rel=”nofollow” tag on the links
• Flickr – While you used to be able to get link juice from flickr.com, that is no longer the case
• I Snare – Limits your links, but does give link backs
• Ezine Articles – Limits your links, but does give link backs
• Go Articles – Limits your links, but does give link backs
• QBN – Design resource website
• Noupe – Design resource
• Squidoo – Make your own pages

We’ve only done a handful of these things, but find a site that fits your demographic and run a contest there, or see if they feature “cool stuff”. Through a mutual friend I was able to show our products to Slash Film, and they wrote a very nice piece about our Chainsaw Bunny Shirt which sent us about as much traffic and sales as getting featured on Woot.com as a side deal.

Surgically Precise Keywords™… No not meta keywords

As I said earlier, pick the keywords you want to show up for in searches and use them inbetween anchor tags, in your title=”" tag, as well as in your head title tag. Don’t forget to use the keywords on your actual site content as well inbetween H1, H2, H3, and <strong> and <em> tags as well. They put extra emphasis on terms. 3% keyword density is MORE than enough per page. Don’t be evil.

Know what you want to show up for in search results and fight for them. Put those words in your H1 and H2 tags. Put them in your title. Put them in your product names. Have blogs link to you with that link text.

I touched on this in the, Tips & Strategies For SEO That The High Priced Consultants Aren’t Telling You, but it really is the do or die for your company.

You’re not going to show up in the top 10 results for “design blog”. At least not right away, you have to attack search results from the outside. Get ranked in the top result for other more specific searches that aren’t highly sought after like, “custom photoshop brush downloads” or, “repeating seamless background image” and you will eventually climb to the top for other searches organically.

Assault is never going to show up for the Google search, “t-shirts”. That search term is dominated, but we did feel we could show up on top for “zombie t shirts”. If you’re small you have to carve out your keyword niche with surgical precision. Pick keywords that are less competitive, but still have high search volume. (Use the Google keyword analysis tool for that)

Give it time, 3-6 months to see results

If you’re doing everything correctly, it still takes a few weeks and/or months to see quality results. Unless you’re a huge brand name, like Oprah, or have your name in the news constantly, your site isn’t going to get spidered and benefit as quickly.

If you’re starting from zero, every link, and every keyword counts. Give your link exchange partners the code and keywords to link you with. Don’t go overboard (title=”t-shirts t shirts art on our fancy designer graphic bloody t-shirts officially zombie awesome cool neato”) You’ll look like a fuck-stick.

A few additional thoughts

Google changes there algorithm several hundred times per year, so your site may fluctuate up and down in the rankings, and a lot of what goes into the Google algorithm is a mystery. What I’ve outlined above works for me. Don’t get discouraged. I should also note that in my other article, I provide a link to the PDF Google has written where I have gotten a lot of this information. I highly recommend reading it, and memorizing it. As I always say:

There are about 50 techniques, and everyone’s doing em, don’t let anyone sell you their Google first page results in 30 days snake oil bullshit, it’s not happening.

Have a tip? Did I miss something? Disagree?

Post it in the comments and share it with the world. I read every comment that hits this blog. (And sometimes when I’m bored I read spam for a laugh, or to order my viagara at discount prices.)

Hi I’m Jon Kruse. I run Mediocore Clothing and the blog How to Start a Clothing Company. When Tim and I got together to discuss writing a guest article for each others’ blogs, I was stumped on what to write about. In the end I decided to write about something that has helped me a lot but most people pass over it because they consider it common sense. What is this you ask? It’s called asking people for Help!

I use a three step approach

1. Connect on a personal level with someone.
2. Ask them for help.
3. Give them the tools they need.

When I first started I was very timid and I didn’t want to ask anyone for help. I would make up absurd milestones in my head that I had to reach before I would post on certain forums, websites, or even email friends that own clothing companies about helping me out. Looking back, I wasted too much time trying to do things by myself when there were so many people that wanted to help me and knew so much more than I did. It wasn’t until I let go of my fears of asking people for help that I finally started seeing returns in my business.

I hear from a lot of t-shirt companies that are starting out and looking for advice. I always tell them to have a great relationship with the t-shirt blogs and I have a couple articles about the subject “How to get your cool t-shirt reviewed“, “How I became one of the top online t-shirt companies by being a nice guy“. It really amazes me how many people will come back and say “ohh they wouldn’t post my shirt, it isn’t their style” or something along those lines. You will never know unless you try, and doing nothing is the fastest way to fail. I have had plenty of blogs post my shirts that didn’t really fall into what they normally post just because I have a good rapport with them.

Once I started making a personal connection with blog owners, I did the same thing with my customers. When you join my mailing list I give my background and what I believe in. I tell them about when I got fired from my job and decided to pursue something I really was passionate about–starting a clothing company. A lot of people can connect with my story because they know someone that has lost a job or have lost a job themselves. I always give out a couple of coupons with every order and ask my customers to tell their friends about my shirts. Some people will do this without you asking, but the simple act of asking someone to do something makes it a lot more likely that it will happen.

So let me go over those steps again.

Make a personal connection with someone.

I read a book called “You, Inc.: The Art of Selling Yourself”. There is a ton of good advice in there but one of the stories that made a strong impression on me was about tipping waitresses. It said that when it came down to how much tip you would leave you would tip more to a waitress that made a personal connection with you over a waitress that provided the best service to you but didn’t connect with you. This is the opposite of what most of us were taught, that hard work and dedication will pay off, but really the most important thing is connecting with someone and making them feel like your friend.

How to connect

Myspace, emails, facebook, twitter, these are all great ways to connect with your fans. Johnny Cupcakes really has this nailed down, and even though he has only said one thing to me over the internet, I still would call him a friend. He also does things like a showing of gremlins and a free pizza party and these stories spread through the Internet like wildfire.

Ask them for Help

• When was the last time you helped someone for no reason at all?
• When was the last time you helped someone when they asked you?
• Just asking for help will increase the chances of them helping you tremendously.

Give them the tools they need

You have to make it as easy as possible for someone to help you or else they won’t do it. So many times I hear a band or artist asking for votes for a contest, but if I get to the website and I have to fill out a long form I usually just give up. This is how it is for most people, so give them the tools that will make it easy for them to do what you’re asking.

• When you want to have a blog post a new shirt, give them already hosted pictures to use, a bio of your company, and information about the shirt. The less work they have to do, the better.
• When you want a customer to tell their friends about your company, give them coupons to hand out. Get them on a mailing list with emails they can easily forward.
• Just doing these simple things will increase the chances of someone helping you.

Now get out there and ask for help!

I recently wrote this post as a guest blogger on, How To Start a Clothing Company, for my friend Jonathan Kruse of Mediocre Clothing, and figured I’d re-post it here on my site for anyone who’s looking for a Lehman’s explanation of SEO, or search engine optimization.

One of the major things that has helped me with my t-shirt brand, Assault, since it’s inception in late February of last year was optimizing my site for Google and other search engines. I’ve worked as a SEO consultant and developer the past 7 or 8 years for various companies, and our list of clients contain some of the biggest names and brands in the world.

I’m not going to add to the gigantic list of of great SEO resources and basic SEO 101 strategies that you can easily find all over the web. Instead, I’m going to go over a few secrets that I have developed specifically for my online store, Assault Apparel, that will help those of you who are like me and don’t have any sort of money to use for marketing and PPC like some of the other t-shirt shops around town.

Assault's URL structure with CSS disabled

Think like a robot – Link Text, Title Text, Content Keywords, Landing Pages

A search engine spider uses a lot of information about your site to determine your search engine rankings. Using links with system text pertaining to your search term is a big factor. Using landing pages with specific keywords in your page title, as well as throughout the text in your actual page is another thing that gives you proper keyword density pertaining to the page titles.

Disable your sites’ stylesheet to get an idea of what a search engine is seeing when it comes to your page. The link text and text position on the site is very important. Be sure to have your links near the very top of the page, and to carve out your sites’ links by putting rel=”nofollow” on your anchor tags associated with pages you do not want spidered. This cuts down on the number of links on the page, thus giving you more weight on your pertinent links.

My links to the right all use the word t-shirts as well as link to my landing pages with the same keywords sprinkled throughout the content. I would say that about 2% of your pages content should contain your keywords. Anymore than 2% is overkill.

Think like a human – Keyword Choices

One of the most important tools I have used to determine naming conventions for my pages, shirts, and images is the Google Keyword Tool. Everyone uses this tool, and everyone who’s good at SEO is following the standards as laid out by Google in their SEO Starter Guide pdf, but what most places aren’t doing is choosing the high volume search keywords that aren’t being target by everyone.

For example, you’re never going to show up in the first 10 results for the keyword t-shirts, or tshirts, or even shirts. If you’re just starting out, there’s no point in trying to compete for this word. It’s already dominated. The words you should be trying to get in the top ten for, are other searches with the word, “t-shirt” in them. Assault‘s top keywords besides searches related to “Assault” are things like

• zombie t-shirt
• band apparel
• graphic t-shirts
• skull t-shirts
• rocker apparel
• chicago t-shirts
• band shirts

You get the idea. These are the keywords you need to use throughout your internal and external links to your pages as well as your actual physical file names. The way you work your way in the top ten is to carve out your niche in other t-shirt related searches and over time you will finally begin to sneak into the top results for other one word searches. Currently we’re between 5 and 9 for the keyword “Assault“, and we never even used to get into the top ten.

Register your brand with local search results

We registered our business as a local business with Google and we’ve seen a significant increase in traffic from “chicago t-shirts” related searches. This is what gets you in the local results up near the top of the search results page.

Link backs are incredibly important to move your site up

The number one thing that determines your page rank on search results is link backs. (This isn’t a proven fact, but we’ve seen our best results from a precision link back campaign) This means if you want to get in the top results for t-shirt related searches, you need to start exchanging links with popular websites, and sites that show up in the search results for t-shirt searches.

A couple of my tips/tricks to get high quality link backs

• Start an Ebay Blog. There aren’t any rel=”nofollow” on your links back to your own site. This is the best quality link juice you can get
• Flickr Photos with links back to your site. This also gets you top quality linkback text to your specific site
• Provide the exact linkback text to your link exchange partners so that it uses proper link text pertaining to your site.
• Forum links – participate in relevant forums and generally your links will not have the rel=”nofollow” on them.
• Start a Public Facebook Fan page. These are showing up in search results now as well.

Myths and irrelevant techniques

While everything I’ve said are examples of things that have worked for me, I should precede all of these things with this statement:

Google’s search algorithm is constantly changing. Last year it changed over 300 times, and no one is 100% how it actually works. Don’t fall for the companies out there selling expensive “black magic” to get your site in top results. Most SEO boutiques are full of shit. I’ve done SEO campaigns for small and big time clients, and independent SEO boutiques trying to scam business off of them gave our SEO work an F grade… no joke. Be wary of SEO marketing companies. There are about 50 techniques, and everyone is doing them. Any SEO company is probably on the verge of spamming if they’re overpromising results.

Google, Search Engine Watch, and the Search Engine Round Table are about the only 3 places I really trust.

Google does not use meta keywords, some search engines do, but I wouldn’t waste too much time on this.

Loading up 30 character file names and 40 word alt descriptions on images is a waste of time and resources. “SEO Experts” like Acronym may tell you to do this, but the time wasted doing this could be used somewhere else and you may get flagged as trying to game Google.  While it is important to use alt tags, and to name images appropriately, overdoing this by using 40 word alt tags, and 30+ character names for your images is a bit of a waste of time and you run the risk of being flagged as loading your image and alt tags.

Don’t use hidden text to fool Google. They’ll find out and you’ll get penalized.

Make an XML sitemap and submit it to Google, and update it constantly.

Don’t overdo keywords in the title. Be specific, but don’t be a total spammer.

Use Google Analytics, and setup E-Commerce tracking. You’ll be amazed at the value of the information you get from this tool. I get 70% of my sales from organic search results, and plenty of that comes from Google Image search related to finding my product images with quality names and alt tags. Like I mentioned before, it’s important to use proper, specific names, but overdoing file names and alt tags is a unneccesary.

Like this post?

If you liked this post, please subscribe to my RSS feed, follow me on twitter, and don’t forget to check out the Assault BLOG and online t-shirt store.

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

As a developer/designer I’m regularly shown designs that have non-standard web fonts, unrealistic font rendering, poor usability, and insanely large spanning background images. While most of the time we cannot come up with ways to work around these design concepts, there are a handful of ways you can cheat the system and make your web designs work a little bit more like a print design.

Here are a few tools I use to pull off some design concepts that you may have thought weren’t possible:

SIFR – Scalable Inman Font Replacement

SIFR stands for Scalable Inman Font Replacment, and has a life savor for me for almost two years now. It’s primary use is to use non-standard web fonts in your dynamic headlines of your site to give it a unique look/feel while still retaining the SEO content of the headlines. I use it extensively on Assault Shirts to retain my SEO headlines, as well as use some cool fonts that I’ve used on product headers and page header descriptions. It’s a bit tricky to setup, but it degrades nicely for users without Flash and/or Javascript enabled.

FLIR – Facelift Image Replacement

Like SIFR, Facelift Image Replacement this will help you get non-standard web fonts in your design by replacing your text with images that have rendered fonts in them. I’m in the process of seeing if I can use this to change over from SIFR because I’ve had some issues with SIFR not working properly when users have Flash disabled.

Gradual  Transparency (even with IE6)

There was a day and age where PNG transparency was impossible for older browsers like IE6, but thankfully those days are over. There are numerous transparent PNG hacks around the net that involve some sort of Javascript hack to get transparent PNGs to work. At Assault, we happen to be using the Unit Png Fix. It’s very compact and easy to get working.

You can use transparent GIFs, but as we covered in our web graphic transparency article you’ll find that they’re not nearly as flexible, and they don’t support gradual transparency. The only real drawback that you have to watch out for with transparent PNG files is that they have a tendency to get very large in file size, very quickly.

CSS Text Wrap

One thing I used to hear about quite often at my day job was rags. My background at the time was web only, and rags was not a term I was familiar with. After finding out it had to do with the way words break at the end of a line, I realized that most of my designers had no idea that there was no good way to control line breaking when you’re dealing with web. After explaining to them the reasons not to manually line break, (different browser font rendering, resolution, etc. etc.) most of the time we ended up just blocking off the text in a grid rather than trying to do anything to fancy.

At the time I thought there was no way to easily make text break in various places without doing hard returns or <br />’s. In the case that you want to wrap text around an image you were SOL. Thankfully, this is no longer the case: CSS Text Wrapper is a handy online tool that takes care of wrapping text where you want to and even allows you to wrap it around your own image. Take a look: CSS Text Wrap. The best part is it even writes the HTML/CSS code for you.

CSS Typography

I remember when I was 17 and I only used arial and helvetica. Thankfully, that’s not the case anymore. Here are a couple of delicious bookmarks that I constantly refer to that push the limits of CSS and Typography:

• 8 fonts you probably don’t use in CSS, but should
• CSS Type, Browse Web Type, Grab CSS Code
• Type Tester Compare Fonts for the Screen
• CSS Typeset

CSS Resizeable Background Image

This hasn’t yet come up in any of my design concepts because sometimes a gigantic background image can be circumvented with some skillful clone tool stamping and tile-able background image placement with CSS, but in case you need it there is a way to make your background image be scalable for small and large sized browser windows.

CSS Resizeable Background Image

Some Thoughts

My theory is that while print designers are good at what they do, they more than likely were not schooled at things like usability and cross browser display issues while in graphic design school. I know that I personally used to spend at least one weekend every semester helping a senior graphic design student because they had no idea how different of a medium web design was and couldn’t get their designs to look the way they wanted.

I think Paul Boag, of The Boagworld Podcast, summed it up very nicely:

Print designers just don’t have a grasp of the technological constraints on the web. The limited number of fonts, the layout restrictions of content management systems, the quirks of different browsers (in rendering HTML & CSS), the list could go on. Understanding your medium is vital to creating a successful design.

As someone who is both a developer and a designer, I like to be able to push my designs to the limits of what you can do with the current tools we have available. When I have design concepts brought to me in my day job I like to be able to say, “Yes we can use a tile-able background to give our site some texture,” or, “Yea we can have some transparent floral shapes on top of our gradients,” or “Sure we can use Benton Sans as our header font.”

Did I miss something?

If you have something I may have missed, please post it in the comments, or contact me via email or twitter. I can always use a few more bookmarks (Currently, I have 1600!)

Seven Day Sonnet @ The Fuel Room in Libertyville, IL

After going to a great show this weekend by a local Chicago band called Seven Day Sonnet, I realized a few mistakes that all indie bands make, that they should avoid at all costs. Besides having actual talent, of course, there are a few other things that I think you should or should not do:

Don’t Sell T-Shirts

Nearly all the bands at the show had merchandise of some sort that I don’t think anyone would have bought unless it had a “Budweiser” logo on the side of it and was drinkable. Despite probably being broke, all the bands at the show were still trying to sell some sort of apparel. Now I know that the company I run is geared towards “rockers” and t-shirts so shouldn’t I be trying to peddle my shit to them? I suppose that is true yes, but if I was in a band, and was working some shitty dead end job, there’s no way I’d hand my hard-earned money over to some t-shirt printer to put my logo on some silly hanes beefy t-shirt. Save your money, stay away from the shirts for now.

Don’t Use Friend Blaster

Most bands run their own PR these days, primarily through MySpace. As much as I hate MySpace, it can be used for good, but most of the time new bands use it to spam the HELL out of everyone who’s got a public profile.

I understand it’s tempting to use those Friend Blaster programs when you first start, simply because you can’t get anyone to listen to you, but there’s no quicker way to get everyone to ignore you than to yell louder and louder. As an alternative, I recommend using Myspace as an outlet for networking with other bands, as well as to act as a vehicle for your fans/friends to contact you as opposed to a way to spam anyone who has ever friended you.

$200 bucks towards an identity can go a long way

If you want to look a bit more legit, buy yourself a cheap domain at Godaddy, and try out a service like Crowd Spring to help you with a logo and a simple design. $200 dollars there will get you a lot further than $200 bucks on hanes beefy t’s. If you have enough money leftover, use it to get the best instruments/equipment, not some crappy apparel that only your mom and groupies (girlfriends?) want to wear.

Use your time and money creatively/wisely

I know that it seems weird to defy the predefined rules of rock, but you can party once you’re headlining your first venue. For now, you should try running your band like a business. That means calling up local venues, and putting yourself out there.

Have a simple demo CD, (or better yet a cheap USB stick loaded with music) and make sure to only give it to people who have expressed some sort of interest in your band.

“Bravery is all about people being willing to take a chance on themselves and their ideas: Are you willing to put yourself out there and risk seeing something you invented die?”

-Seth Godin

You’re going to have to put yourself out there, and email venues and other reputable rock periodicals. You’re going to have to stalk the local House of Blues owner, but putting yourself out there is going to pay off ten fold as opposed to handing out flyers outside of the local rock venues.

Strangely enough, I’m sure you can find some good PR people to friend on MySpace–Send them a friendly, personal message and see what they think of your band.

Assault custom guitar pick

No flyers, try custom guitar picks

One of the best things we’ve ever done for Assault was to giveaway free guitar picks with our logo on them. People are alot less likely to throw  those away, and they’re alot cooler than some stupid flyer. Surprisingly, custom printed guitar picks are cheap. I’m willing to bet if you spend about $200 bucks like we did you can get around 1000 picks and they cost about the same thing as a 5×7 post card. (Around .18 cents)

This past two months Assault has been nearly radio silent. After reading a post by Seth Godin on goals We realized that part of that reason we had slacked off was because we didn’t have any clear immediate goals in front of us. We met, and exceeded all of our 6 month goals for Assault and even most of our 1 year goals, but we didn’t have any new goals for 2009, and we decided to revise our goals. We’ve been doing just okay in the sales department and we decided it was time to take what we have and move it to the next level. Here’s what Seth Godin had to say about goals:

If you don’t have a goal (a corporate goal, a market share goal, a personal career goal, an athletic goal…) then you can just do your best. You can take what comes. You can reprioritize on a regular basis. If you don’t have a goal, you never have to worry about missing it. If you don’t have a goal you don’t need nearly as many excuses, either.

Not having a goal lets you make a ruckus, or have more fun, or spend time doing what matters right now, which is, after all, the moment in which you are living.

It seems to me, though, that the people who get things done, who lead, who grow and who make an impact… those people have goals.

Since restructuring our goalswe’ve been more productive in blogging, researching printing equpiment, and doing new designs for our next line of clothing for Spring.

Quick Tips for your Goals

1. Set goals that are just barely out of reach, you’ll try harder that way
   
2. Print them out and put them in your wallet, closet, locker, and desk so you don’t forget them
   
3. Cross them out as you go, trust me it helps when you feel like you’re doing nothing
4. If you’re in a partnership like we are, split your tasks up and assign them to who they are most relevant to
5. If you haven’t, bookmark or subscribe to Seth Godin’s RSS feed, he gives great insight no matter what industry or business you’re in.
   

Don’t just scan this if you want to benefit from it. Trust me the juice is below the headlines.

Awhile back I posted a blog about a few helpful tips that would help get your t-shirt company off the ground, and I briefly touched upon a subject that I decided would make for a great post–when every sale counts. I can’t quite remember where I was reading it, but I read something that astonished me about opening your first e-commerce store.

It will take on average 6 months to a year to get your first online sale

I still can’t believe that anyone could ever think this was true. I have news for you, it’s not.

Don’t send robot PR emails… be human

No matter what you’re selling, before you open your doors you should reach out to similar websites, and personalities associated with your target demographic. This doesn’t mean that you send out robotic press-release style spam emails, but rather personalized emails that show you give a shit about the people you are actually contacting.

We get PR emails at least a few times a week about various products and companies, and I can tell you there is no faster way to get your email deleted from my inbox. The products I do end up pimping on our site, are from people who sent personalized, friendly emails to me and actually proved to me that they’ve been to my site and know what Assault is about.

Keep a look out for forum posts in your stats

After your grand opening of your site, sales probably slowed down quite a bit, as well as traffic. We went through our slow periods right after our initial launch simply because our site hadn’t even been spidered by Google yet. To help during the lull periods, we feverishly tracked our statistics. We were only getting about 50 visits a day so we could see EVERY SINGLE person and how they got to our sites.

We visited the forums referring visitors to us and commented on the posts and subsequently got sales from these posts.

Friends with mutual benefits

While you can run around all the social networks and grab profiles and make a half assed effort to stay active in all of them–you’d be better off picking one or two and pouring all your weight into that.

Even better, when you’re making friends in these networks, make sure you make friends with people that have something to offer you in return. Channel the inner high school cheerleader in you and find friends that can make you look cooler, or more popular.

If you choose Myspace: make friends with people who run large groups. (aka heavy metal groups, Twilight Fan groups, People who live in Chicago groups, Barack Obama groups, etc.)

If you choose Twitter, find someone who’s active and steal their friends! Start @replying to questions they pose or things they say. (like I said, channel the inner high school cheerleader in all of you)

Friends page on your store website

We befriended other similar companies that our customers may like and added them to our friends page. It’s an easy way to email other stores that have similar demographics and ask them if they’d like to exchange links.

Mother**cking blog

Kendra wearing one of our shirts. Does it help with sales-Absolutely.

Blog Blog Blog. I hate using the word blog and I hate that it’s now become a thing that mainstream loves to throw out the word blog, but the truth is if you’re not blogging on a weekly basis, you’re going to fade into the background.

I’m a big advocate of never losing steam with our small business. If I’m not doing or thinking about what I should be doing to grow my company every day, I start to feel guilty. Doing a simple blog once a week takes a few hours, and gives you a medium to push visitors to your online store. On top of that, it’s a little subliminal way of keeping you organized and making sure you’re reaching your goals.

By having a blog you’re always adding content and increasing the chances that you’ll be able to push more people to your store.

My store’s biggest referral is my blog. Hands down. (it beats out even woot.com!)

Never underestimate good customer service

Every store is different, but we built our brand/store around the idea that we’d have a cult following so that the “merchants of cool” who found us would tell their friends, who would then tell their friends, who would then tell their friends. We’re online only as of now so we’re restricted ourselves to who can find us, but just think about the millions out there who never shop online–especially for things like clothing.

Make your customers happy and they will spread your seed–Even the assholes. I know you should even make the assholes happy because I’ve been that asshole. I’ve bought shoes online once, from Zappos. They screwed up my order by sending it to the wrong place, and I was pissed. (For some obscure reason) After dealing with some incredibly helpful customer support they’ve won me over as a self pimping customer for life. I can think of at least three people who have bought shoes from Zappos as a direct result of me telling them about how great they are.

You’ll benefit 100 times more from a blog post about how your customers service went above and beyond. It may cost you a dollar here and a dollar there, but the best thing a customer can do is send you a referral. A happy customer is going to do that.

Conclusion

The first year of running your own e-commerce can be grueling. You’re spread thin over a lot of different areas and you carry a lot of responsibility. I design, develop, and maintain all of our websites and blog all by myself. It’s a lot of work, and if you want it to pay off and grow you have to get sales any way you can.

Have I missed something or do you know of another great tip? Post it in the comments.

You’ve identified your niche, registered your business, designed your shirts, and launched your online t-shirt store. Now what? If you’re like we were, you need some sales, you weren’t blessed with $20,000 of marketing money to buy pay per click ads from Google. These few tips should help save you a few headaches as well as give you a few ideas on how to market your product for free.

Don’t give away your shirts for free

Don’t give your shirts away for free to people unless you are guaranteed at least a write up in a blog or a link back to your site or some sort of return on investment. I can’t count the number of times we’ve sent free shirts to websites and companies who said they were doing t-shirt roundups and then never posted anything of the sort after we sent them free product.

If you have limited inventory like we do–reserve your inventory for sales. This may sound like we are slightly bitter, and that’s because we are. I designed most of the shirts on our site and I even pay for them. When you’re just getting started, you can only afford so many shirts. This means every sale counts. Unless you are going to get some sort of ROI on your give away, there’s no reason to do this. GoMedia has a great article about doing design work for the apparel industry that touches upon a similar subject.

GoMediaZine

I know I’ve mentioned them before on this site and in this post, but Go Media is a great resource for tutorials and design insight. If there’s one thing you can take away from this post it’s to subscribe to Go Media’s RSS  feed. They’re the best at what they do. One article that I know can help for you people starting up an on demand t-shirt store is the tutorial that shows you how to make realistic t-shirt mockups.

Here at Assault, we were lucky enough to know a few photographers who would take awesome photos for our site, but if you don’t happen to know any photographers and don’t want your photos to look amateurish this is a great tutorial to get your design renderings onto realistic t-shirts.

Put yourself out there – Network in your industry and local area

Don’t be shy. Send emails to local magazines and websites that are similar to yours. What’s the worst thing that could happen? They don’t respond or they say not interested. It’s a numbers game. Not everyone is going to like your stuff. The people of QBN and Digg LOVE to slam our designs and site. It’s not big deal. Most of the time, they give good insight and can be quite humorous. Your friends and family are going to say your stuff is cool, but people who don’t care about you will be blatantly honest behind the protection of anonymity on the internet.

The first thing we did after launching our store was to send friendly emails to t-shirt blogs and design websites with links to our store and our blog and tutorials. The best way to find sites similar to yours in your industry is to do Google searches. We did searches like “t-shirt blogs”, “t-shirt resources” and “apparel design resources” and sent emails to sites that appeared to be open to reviewing our products.

Forget Myspace. It’s fine to have a myspace page to get in contact with bands for instance, but it’s useless for the most part as far as getting sales. Make friends with fellow designers on twitter. Download Twitteriffic or a similar twitter application and join in the conversation. Share links you find and comment on other t-shirt blogs’ posts. Thank everyone who comments on your products. Send personal emails back to your customers who comment on their orders.

Monitor your site traffic for forum post links

When you’re not getting much traffic it’s pretty easy to monitor your traffic and referrals. I recommend  using something like Sitemeter since it gives you real time stats. (We also use Google Analytics) There’s been plenty of times that a user in some obscure forum posts a poll asking which shirt they should buy (with links to one of our shirts as well as other shirts they like)

Create an account and add a comment to the forum post with a discount or a coupon code to help persuade the users to buy your product. When every sale counts, this is a good way to get a sale.

Give coupon codes to sites that review shirts

Some of our top sales referrals are from sites that we gave non-expiring coupon codes to like Shirts On Sale and Hide Your Arms. They show up for many t-shirt related searches and users are often at their site to do exactly what you’d think–get coupons for t-shirts. It’s the best way to get exposure to your shirts directly to customers who are ready to buy stuff.

Why would you spend $1,000 dollars for Google Ad Words when you can get the same target visitors to  your site for free? We’ve ran a few pay per click ad campaigns, and let me tell you that we’ve never even come close to breaking even. On the other hand, some of our top sales referrers are from a coupon code on a t-shirt blog that we didn’t pay a cent for.

Know of any good tips that I missed?

I know there are countless tips and tricks that I haven’t told as of yet (Maybe a part two?) I’m sure there’s also people who disagree with me on Ad Words, and giving away our product for free. If you have anything you’d like to add, or if you have your own site, post it in the comments!

I’ve been a daily visitor of ffffound for some time now, but I have never been lucky enough to receive an invite to actually use it. It’s a GREAT source of inspiration for all types of design, and I constantly refer to it and the QBN pic of the day thread for some good laughs and beautiful pictures. After realizing that I had a spare domain name I decided it was time to try and hack together a WordPress theme with a few plugins that would emulate ffffound, and its related images feature.

Download the theme and necessary plugins: VNovember_ffff.zip
To see the final working version of this theme+plugins: VNovember Image Bookmarking

Preface – What this theme + plugins will/will not do

I knew my version wouldn’t function exactly like the real thing, because I don’t really know how it works, and because I am somewhat limited to what WordPress has to offer. There were a few key elements of ffffound that I felt were the most important and useful part of its service, and I’ll be trying to replicate that functionality with WordPress and a few Firefox addons:

• Related images and recommendations based on post content and tags
• Displaying related images on homepage and post pages
• Displaying tag counts on the left side of the page
• Come up with an easy way to post the images via iPhone, Scribefire (direct from Firefox) and an easy way to thumbnail the images. (CSS for now)

***I recommend using a blank, fresh WordPress installation with no posts. (Not even the Hello World post) Or else you’ll have to go through your database and unpublish all your content posts or else they will start showing up in your related posts section when we only want images to show up

Upload the theme + plugins

I was able to accomplish most of this with some fancy CSS for IE and a few workarounds. For the most part the site is very easy to post to and looks very similar to ffffound. All you need to get this theme working is the VNovember_ffff.zip which contains the WordPress theme and the necessary plugins. To get these plugins individually you can go to their respective homepages:

• Yet Another Related Posts plugin (This one you’ll have to take from my zip as it is modified to work with images instead of using only text)
  
• Configurable Tag Cloud plugin
• SEO Friendly Images plugin

After downloading the zip do the following to get your files in the right place.

1. Unzip the theme
2. Upload the files in the “plugins” directory to your wp-content/plugins directory
3. Activate Configurable Tag Cloud plugin, SEO Friendly Images plugin, and Yet Another Related Posts plugin via the WordPress Plugins page
4. Upload the theme files to wp-content/themes so that the vnovember_ffff directory resides in yoursite.com/wp-content/themes/vnovember_ffff

Configure the plugins

Now that you have all the files in place you need to configure them. The Yet Another Related Posts plugin has settings, but I’ve made custom function arrays for them so you should not have to modify the settings page for this plugin. If you would like more/less related images to show up you can edit the functions in the single.php file and the index.php  file included in the vnovember_ffff theme directory.

From your WordPress Administration you need to add the Configurable Tag Cloud plugin to your sidebar. There are two sidebars with this theme, one on the left column and one in the bottom above the footer. Add the Configurable Tag Cloud plugin to your sidebar1 and apply these settings:

Tags, Uploading Images, making it work

The way this theme works is by using the tags you apply to each post to determine which images are somewhat alike. Every time you tag something the plugin will search through your posts and find other images that are similar and display the closest matches.

The easiest way to get images posted quickly is by using the Scribefire Firefox plugin. It takes just a few seconds to upload an image, add the tags, and publish the post all from your browser window. (You can still post from the WordPress Admin if you’d like) You can also snap pictures with your iPhone and use the WordPress iPhone application to post images directly from your phone.

If you decide to use the Scribefire Firefox plugin I recommend turning off the max image with option so that Scribefire isn’t trying to put inline styles in your image tags.

Some important things to remember:

• This theme does not have any commenting or trackbacks enabled
• There’s no need for multiple categories-just use tags
• This theme will only work and display properly if you only post images in your post body section
• You can hot link to images or upload them. I recommend uploading images to your own server and putting them in your posts rather than stealing someone else’s hosted images.
• This theme assumes your WordPress blog only has images, no textual, content related posts. If you want to have content related posts as well then I recommend using pages.

Plans for the future

A couple of plans for the future of this experiment (hopefully with some help from others!) would be to:

• Automatically pull the images src attribute for creating a link to the full size image from individual post pages using JQuery. (I haven’t quite gotten this to work yet)
• Create and cache thumbnails to related images on the fly with phpThumb. (not quite sure how to get this done either)
• Keep thumbnails to their proper aspect ratio (currently the related thumbnails scale improperly if they’re too tall)
• Possibly port this to WordPress MU so you can actually have user accounts with their own image bookmarking

A head start on the JQuery solution that I couldn’t seem to get working:

$(function() {

var imageSrc = $(“div.entry-content p img”).attr(“src”);
$(‘<a href=’+ imageSrc +).prependTo(“div.entry-content p img”);
$(“</a>”).appendTo(“div.entry-content p img”);
});

This seemed to get the proper image source URL, but it would never append the proper link href to the images. Please let me know of any problems you are having as well as bug reports in the comments, and if you can offer solutions to any of the three items I outlined above.

Happy image bookmarking!

Thanks for all the diggs everyone! Sorry the article went down for awhile!

For some time I have dual booted my Dell Inspiron 600m with Windows XP and Ubuntu Linux. Being a designer and a developer I have had to deal with the necessary evil that is Microsoft for years now and with Ubuntu picking up steam like it has past few years–the time was right to finally switch to Linux. The designer voice in my head says, “What about Photoshop?” and the developer in me says, “What about testing on IE6? What about Coda?” Here’s how I finally made the full switch and the tools I’ve decided to use instead.

But I need Photoshop…

Gimp! Bluefish! Ubuntu-restricted-extras! VLC! Yes, you’ve read all the articles on Digg about the replacement software. Some of them are awesome, and yes some of them kinda suck, and best of all they are all free! Some of you are saying they are hard to use so you won’t switch, but I’m here to tell you that you’re asking yourself the wrong questions. You should be asking things like:

Do I really use Photoshop on my tiny laptop all the time to justify keeping Windows?

Am I just doing basic image editing when I do use Photoshop?

In my case, I’m barely doing any Photoshop work on my laptop anymore. I may do some basic image work–for that I have the Gimp, and it does everything I could possibly want it to.

And just to prevent you haters out there from leaving me comments about how you can run Photoshop with Wine or Crossover Office–I’ve tried every which way and NEVER had I had a fully functional non-crashing version of Photoshop higher than Photoshop 7. Both CS, and CS2 crash and/or freeze. Photoshop 7 vs. The Gimp–I’ll take the Gimp anytime.

I get what you’re saying, but I’m a developer, I need Coda or Dreamweaver

So, you’re a developer and you use Coda, or Dreamweaver… Should you really be saying, “I can’t LIVE without Dreamweaver!” (If you’re not handwriting code, are you really a developer anyways?)

Am I really going to be doing full website development on my laptop?

Yes I might. In that case you have plenty of text editors: Bluefish, Quanta, GEdit, and you have Filezilla or GFTP to upload files.

If you’re a bit like me, you’re not managing huge development projects on your laptop. You may blog, and do some troubleshooting here and there–for that you have all you need with Firefox.

If you just edit a file here and there you can setup a permanent connection to your server via Places>Connect to server. That way I can open files directly with GEdit just like I would with Coda and edit them directly on my website.

A few other notes for developers…

The Web Developer and Firebug add-on both work in Ubuntu, and installing them is a breeze. In fact, rather than rooting around all the freebie websites you can install all your software at once from one place:

Applications>Add/Remove then select Show: All available applications

This includes most of the popular Firefox add-ons that you may do for web development, and some that you just like to use. (I personally love Foxy Tunes which lets me easily navigate my Pandora stations)

What about testing my websites in IE6?

I must admit this was one thing that kept Windows on my laptop for quite awhile. I had an old copy of IE6 on the Windows XP installation and it was my only last excuse for keeping the dual boot. After having to wait 8 minutes for startup everytime I restarted (Thanks to Windows Defender, Zone Alarm, and a few other things) I had had enough.

I googled IE for Linux–sure enough there was already a working IE6 package for Ubuntu. IEs4Linux took just a few minutes to download and install and now I have a functioning installation of IE6 on my laptop to test out my sites with! It even has a strange upside down IE logo!

Fine, there are other alternatives, but seriously–Ubuntu is just ugly and uncool

Here’s the real kicker for why I resisted switching for the longest time… Ubuntu is pretty ugly. The picky designer in me wants a combination of the cool themes plus the smooth animation and performance of OSX.

Enter Avant, Awn-Manager, Compiz, and Emerald. After adding those via the add/remove section outlined above, I have a nice OSX style dock, a cool icon theme, a cool window border them, and after downloading a GDM theme from Gnome-Look.org my computer is looking just as slick as OSX!

After getting GMail and the weather on my desktop with Conky, I personally think I have something a bit better than the silly widget dashboard from OSX! You can install themes for Avant as well!

Conclusion

I must admit, it took me just a little while to tweak things to get them just the way I wanted them. (The avant-window-manager and conky mostly) You may have to get your hands dirty using GEdit and the command line, but ultimately it’s a pretty stable installation, it’s lightning quick, and very easy to connect to the internet.

I must admit I do miss Photoshop a bit, but I still have a desktop computer with the full CS3 suite on it so if I really feel like doing some design work I can–but for now I’ll stick with my Ubuntu.

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!

A trick often employed on webpages is to use a seamless background that can tile both vertically and horizontally. If your website gets alot of traffic and you don’t like paying for extra bandwidth costs you need to optimize your site for every single kilobyte. This generally translates to NOT using a giant JPG as a background. (unless you’re doing silly myspace layouts) This tutorial will explain how to make seamless backgrounds for your webpages.

Step One -- Identify image you want to use as your seamless background

In this case I’ve put together a 500x500 red and gray image that I think will work as a textured background that I created using some of my own custom Photoshop brushes. (created using the custom Photoshop brushes tutorial) It’s important to know the height and width of your image for the next step in the tutorial so be sure to write down or remember what your height and width are. 500x500 may be too large for some websites since you may want to use something more like 100-200px in height and width, but for this example we’ll use a fairly large image:

Step Two -- Offset the image

The second step to properly making a tile-able background is to offset the image. My image is 500px wide and  500px high so I will be offsetting this image by 250px both vertically and horizontally. To do this I use the offset filter. (Filter>Other>Offset in Adobe Photoshop  CS3)

I set the Horizontal and Vertical offset values to exactly 50% of my image height and width and set the undefined areas to wrap around. After clicking ok I get an image that looks like this:

This isn’t quite what we want our background to look like… Ideally our background has no seams in it and appears to be one large image which leads us into step three of the process

Step Three -- Clone Stamp out the seams

One of my personal favorite tools that Photoshop has to offer is the Clone Stamp Tool (s key on keyboard to select it) I’m not going to go into great detail about how to use it except to say that if you’re not using the clone stamp tool then you need to start to.

After selecting the Clone Stamp Tool you need to choose a sample area in the image. Hold the alt button, (or option on mac) and a crosshair will appear, you then need to click in an area away from the seems preferrably in the lower left or lower right area. After clicking you can release the alt/option button and your brush will appear again. You can at this time use the clone stamp tool just like you would a brush and draw over the seams. As you drag the mouse over your seams you will see that is has cloned the portion of the image you just sampled. Here’s a video on Youtube that outlines how exactly the Clone Stamp works in detail:

www.youtube.com/watch?v=45tI5z3PkMU

One trick I like to use when sampling the areas of the image is to use either a soft brush:

Or for instances like this where I have a textured image I like to use my textured brushes:

After you’ve clone stamped out your seems your image should look something like this:

Step Four -- Check to make sure it tiles properly without seams

To make sure it will look alright for for tiling I recommend using the Offset filter again by hitting  cntrl+F or apple+F or you can just goto Filter>Other>Offset and hit ok. The image should re-wrap itself by 250px vertically and horizontally and you should still not see any seams. If you do, repeat step three and clone stamp out the seams.

Step Five -- Define Pattern to save for later use

If your image is going on the web you can export it now and use  the necessary CSS code to tile your background either vertically, or horizontally and vertically as you can with our image and you can see your results on your webpage. Ex:

background: url(path/to/image.jpg) repeat-x repeat-y;

If you want to use the tile-able seamless graphic in Photoshop then you need to create a defined pattern for your image.

To do this, select all (cntrl+a or apple+a) and goto Edit>Define Pattern… then name the pattern and hit ok.

Step Six -- Fill with Defined Pattern

To fill an area with your newly defined pattern goto Edit>Fill… and you should see the fill window popup. Set the “Use” drop down to “Pattern” and then select your pattern from the list below as I have:

After clicking ok you should see that the image (or selection) has been filled in with your seamless texture. You can see the result of my tiled image by clicking on the thumbnail below:

Conclusion

One thing you’ll notice about my image is that it will have a repeating area of lighter red texture and some gray splotches that may be easily seen when tiled over and over again. The way to get rid of this is to keep resampling the original image with the clone stamp tool in the begining steps to get rid of clearly noticeable areas of pattern. The less variation in the texture/colors of the image the less noticeable it will be that the image is a tiled graphic. This technique is currently in use in the main content area of the Assault website.

Additional Links:

• Assault Blog (hint: you’re on it now)
• Assault Shirts -- also using tiled image in center of website
• Creating Custom Photoshop Brushes Tutorial