The main post list will display differently based on post type. The sidebar includes a custom Widget to display the latest portfolio entries.

The portfolio can be displayed as 2, 3 or 4 columns. The theme utilizes PrettyPhoto pop-ups for displaying full image views.

The theme takes advantage of the the WeGraphics WP admin panel. From this panel you can control and customize a multitude of options.

From the style and layout tab, you can control everything from post options to fonts and colors. You can also swap out the large background image that appears on each page from this panel.

Bello also features a Portfolio custom post type. This allows you to view and manage your portfolio items separately from other posts.

Download the Free Bello theme from WeGraphics and give these features a test run.

View a live demo of Below here
View the theme documentation here

If you have questions or would like to see new features added to upcoming releases of Bello, feel free to post those in the comments field below.

This is not an article to help you start a clothing line with all of your existing designs. There is plenty of info out there already for that crowd. This is an article for an absolute beginner who wants to give t-shirt designs a go. We’re going to look at where to start with inspiration for your first design, where and how to print it, and a little marketing and self-promo for good measure.

Finding the Right Inspiration and Motivation

Find a Theme that You Are Passionate About

Being a designer I’m sure that you have worked on a project that did not float your boat. Something that bored you, or a subject matter that simply did not interest you. It takes the fun out of work. On the other hand, when your working on something that inspires you, suddenly it’s not work at all. It’s something that ignites a spark in you, and you end up going the extra mile to make the project incredible.

Keeping that in mind, you need to find a theme for this t-shirt design that inspires you to do something great. The theme could be anything from extreme sports to rock music. Anything is fair game.

Target Audience

Once you’ve decided on a theme, do the necessary research to pinpoint the target audience. Understanding who you are designing for is essential in a killer design. Know whether your audience is male or female, 65 or 25, and what part of the world they live in. Understand what they like to wear, what colors, fonts and imagery they are drawn to. These are the things you need to know and understand before putting pen to paper, or mouse in hand to start your design.

Inspiration

Now that you’ve found your theme and you know exactly who you’re designing for, it’s time to look for a little inspiration. Where you go for this inspiration might vary drastically depending on your theme. For example, it might be a trip to the mens section of your local sporting good store, it might be browsing online for college style humor, or could be a trip to the coffee shop where your target audience gathers every morning.

Get creative with your inspiration. In the end your only as good as what inspires you, so spend the time here, and create a concept that will turn heads and get people talking.

Sitting Down to Create Your First T-Shirt

File Setup and Consideration

When setting up your file to begin designing there are several things to consider. How big will the graphic be? Will it be printed on light, colored, or black material? Will it be printed digital or silk screened? If it’s silk screened, how many colors will be printed? etc…

Create your new document with units set to inches since we’re working in print. 15 inches by 12 inches is usually the largest available screen-size when screen-printing. When designing keep your number of colors at 8 or fewer. The more colors the higher the production cost, and most screen printers are not capable of handling more than 8 screens.

Prepping for Print

For digital printing you don’t need to do a lot of prep work for print. Ink jet printers can print as many colors as needed, even a photograph is fair game. Digital is great for small run jobs, but most likely, you will be screen printing a t-shirt design. In order to do that you will need to separate your colors into different layers. Screen printing involves printing each color separately, so the printer will need to access each color in your design.

In Adobe Photoshop it’s a simple matter of selecting your colors with the magic wand tool and copying them each to their own layer.

In Adobe Illustrator, it’s a little different, but still just as easy.

The secret to color separations in Illustrator is in the Pathfinder palette ( Window | Pathfinder ). Select everything in your design and choose Trim from the Pathfinder palette. This basically removes all of the artwork that is unseen. In other words, pieces of objects that are behind other objects.

Now select one color with the Magic Wand Tool (Y) and all objects of that same color should be come selected and choose Unite from the Pathfinder palette.

Now, in the Layers palette create a new layer titled Separations, then create Sub Layers for each color from your design. You can then copy (Cmd + C) that color and Paste in Place within the new layer to move that color to it’s own separate layer.

Once you have all colors moved onto their own layers you can turn off each layer to see the individual colors. This allows the printer to easily access each screen when printing.

Displaying Your Designs with Product Mockups

Part of marketing and selling your designs is displaying them using product mockups. The beauty of mockups is that it allows you to present the design on a shirt well before you have a printed shirt in hand. You can download the WeGraphics T-shirt Mockups here and here.

Printing an Inventory or Print on Demand

For your first design is probably not practical or cost effective to print an inventory to have on hand. Especially since you are not sure what sells might be like for this particular design. Regardless, though, you should be aware of what printing options are available.

Traditional Printers

As mentioned above the most traditional printing for t-shirts is screen printing. This process is one of the oldest printing methods around, with origins dating to first-century China, though the technology has improved significantly since then. This method involves dividing the colors in the design so that they can be separately.

Low Run Printing

Digital printing is an excellent method for handling lower run jobs. Some printers will print as little as 5 shirts at a time. This can be excellent if you just need a few designs on hand to display in a portfolio, or to wear around town. There are no real color restrictions with digital printing. But, in my opinion, it doesn’t quite feel the same as a traditional screen printed tee.

On Demand Printers

In the past few years on demand printers have begun to spring up on the web. Vendors like CafePress and SpreadShirt. These vendors allow you to upload your designs, open an online store, and have your shirts printed upon order. This is an interesting solution for a one man design shop. Do your research on these vendors, quality and experience can vary from one to the next.

Some of the more popular sites:

• Spreadshirt
• Zazzle
• Cafepress

On The Cheap – Ink Jet Transfers

For the do-it-yourself designer on an extra low budget, there’s always the inkjet transfers available at office supply stores. These transfers allow you to print your own designs and then iron them onto your own tees. Also an good solution if you need a printed shirt in just under 30 minutes. ;-)

Getting the Word Out – A Lesson in Marketing

Blogs, Tweets and Votes

Spreading the word about your design is essential. Post it on your blog, share it on flickr, and tweet the design around the globe. Other useful sites to submit your design to:

• Design by Humans A central hub for artists and t-shirt lovers. The site is an ongoing contest and community.
• Teetonic A design competition with open submissions
• Threadless A community-based tee-shirt company with an open call for design submissions.
• Allmightys Another avenue to submit your design. When fame and friends!
• Oddica This site give a nice commission for sales on accepted designs.

Work Outside the Marketing Box

In order to get your design noticed you must take the same approach to your marketing as you did for your design. Step outside the boundaries a little. Think outside of convention. For example, give a few shirts away among your target audience. Give people a reason to talk about you and your design. This may involve stepping outside your comfort zone a little bit, but that’s all part of good marketing.

Conclusion

Being a designer who is just stepping into a new industry, it can be a little overwhelming given the amount of information you have to absorb and the level of competition that you have to compete with. But given the right foundation, goals, and plan of action you can step into a new industry with confidence.

If your just starting out with t-shirt design or your a t-shirt veteran, share your experience below and let us know your opinion on working and designing in the t-shirt industry.

So now here we are using Illustrator on a daily basis to produce incredible vector illustrations, but like Photoshop, there are many tools within illustrator that are often overlooked. So we decided to put together this handy guide of 25 essential tips for Adobe Illustrator.

Get to Know the Tools Panel

The panel appears on the far left side when you open Illustrator. The panel can be moved around by dragging it’s title bar. The tools found here are some of the most important within Illustrator. You’ll use these tools to create and manipulate objects on the art board.

Some of the tools have options when you double click them, and some have hidden tools when you click and hold the mouse down over them. These are indicated by small black triangle in the bottom right of the tool icon.

Below the tool icons are thumbnails displaying the current colors for fill and shape. You can swap these colors by pushing (X) on the keyboard. You can also reset them back to black and white by pushing (D).

Also, another very important set of buttons on this panel are the Draw Normal, Draw Behind and Draw Inside options. These are handy buttons to know when drawing objects on the art board.

Drawing like a Pro with with the Pen and Pencil Tools

Pencil Tool

The Pencil Tool lets you draw free form like a pencil on paper. It will create open or closed paths, and will place points anchor points as you draw. You can’t determine where the anchor points are positioned but you can adjust them after you are done drawing.

The Pencil too is great for for creating a sketch look and feel. It’s not as precise as the Pen Tool, but that’s the whole point.

You can double-click the Pencil Tool icon to adjust the following settings:

Fidelity – Controls how often anchor points are added to the drawing path and how far you have to move your cursor before a new point is added

Smoothness – Controls how smooth the path is. The higher the number here the more points are added to the path as you draw, resulting in a more accurate line.

Fill New Pencil Strokes – Simply adds a fill color to the line after you draw it. This results in more of a shape than a line.

Keep Selected – Controls whether or not the line should be selected or unselected after your done drawing it.

Edit Selected Paths - Determines whether you will be merging with an existing path if your new line gets within a specified distance of it.

Within X Pixels – Determines how close your new line must be to an existing path to merge.

Pen Tool

The Pen Tool is the meat and potatoes of Illustrator. It takes a little bit of practice to understand how to properly use the Pen Tool. But once you’ve mastered placing and editing anchor points you can draw or trace anything you desire. Anchor points are the heart of drawing within Illustrator.

The basic concept of the Pen Tool is clicking to add points versus drawing a line. As you add points Illustrator adds the line between the points automatically. You can then edit the lines by clicking and dragging the anchor points and their handles.

For more information and examples using the Pen Tool visit the Adobe Illustrator Reference Manual.

Keyboard Shortcuts to Make Drawing Easier

Move a shape while drawing it (spacebar + mouse drag)
Draw from the center of a shape (Option + mouse drag)
Increase or decrease polygon sides, star points, arc angle, spiral winds, or flare rays (mouse drag + up or down arrow keys)
Switch through drawing modes (shift + D)
Join paths (Cmd + J)

Understanding Perspective Drawing

If you’re a comic book or cartoon illustrator then you already have a sold grasp on perspective drawing. If you’re a graphic designer the concept may be new to you, but with a little practice it’s easy to master within Illustrator.

The concept of perspective drawing revolves around vanishing points and how a 3 dimensional scene is naturally perceived by the human eye. For example, a long straight road will appear to vanish in the distance. Objects will appear smaller the further away they are, etc…

Starting in CS5 Adobe introduced a slew of new features that allow you to control perspective drawing like never before.

Let’s take a closer look

In Illustrator click (View | Perspective Grid | Show Grid) or (Cmd + Shift + I) to show the Perspective Grid. While the grid is in view you can add shapes that will automatically adjust to perspective view. Using the Perspective Selection tool (shift + V) you can then edit the grid placement and adjust your objects all within perspective.

Using the Eraser Tool to Fine Tune Your Illustrations

Once you’ve filled your art board with illustrations, how do you erase what you don’t want? Erasing in Illustrator is a little different than Photoshop. There are three common methods for erasing artwork in Illustrator.

Path Eraser Tool (located under the Pen Tool)

The path eraser tool, and with a single smooth motion click and drag it along the segment of the path you want to erase.

Delete Anchor Point Tool (-)

Select this tool and simply click the anchor points you want to remove. The path will readjust once the point is removed.

Eraser Tool (shift + E)

This is one is the closest to the PS equivalent. Select this tool and click and drag it across the portion of a shape that you would like to remove.

Perfect Placement with Rulers, Grids, Guides and the Align Panel

Illustrator makes aligning objects a snap. There is a wide variety of tools to help us place objects in exact position. Just like in Photoshop the rulers (Cmd + R) and guides are available. There is also a handy grid (Cmd + “) if you need it. But most importantly let’s take a look at the Align Panel.

The Align Panel contains an array of  options to align and distribute objects. This panel is essential if you need your artwork to align perfectly.

Using Illustrator as the Ultimate Type Tool

Illustrator makes it incredibly easy to work with type. Just view the options under the type tool (T) to get started.

One of the of the most useful tools is Type on a Path. First draw a path of any shape, and select the Type on a Path Tool. Then select the path with your cursor and begin typing. There are some excellent opportunities for type design using this tool.

Also note, that the usual type options are available from the Character Panel ((Cmd + T).

Using Swatches and Color Groups to Stream Line Color Management

The swatches panel contains colors, tints, gradients, and patterns that can be saved separately from your document. Why is this useful? Let’s say that your working on a project that contains 4 colors plus a gradient and two seamless patterns for a client. This is print project 1 of 8 that the client has requested, and you know that you will be using these exact colors over all of these pieces. You can simply create a new color group by choosing it from the panel drop down menu, then drag and drop each color to the group, or choose “Add Selected Colors” from the drop down.

Once your colors and gradients are contained within the panel you can save them from the drop down menu within the swatches panel.

Adding One Click Artwork using Symbols

Symbols in Illustrator provide an excellent way to reuse artwork from one source. For example, let’s say you’re designing a user interface, and the design contains 10 12 buttons, and halfway through the design you decide to change the button style slightly. Since you’ve created all of your buttons from one initial symbol, all you have to do is edit the original to change all instances of the button. This can be an incredible time saving tool.

To create your own symbols

Simply drag your artwork to the symbols panel and the new symbol dialog box will appear, where you can name your symbol. The symbol type defaults to Movie Clip. You can set the registration point, align to grid, and utilize 9?Slice Scaling if you plan to export for Flash.
To edit a symbol simply double click the thumbnail in the symbol library or an instance on the document. Any changes made to the symbol will be saved and applied to all instances.
Also note, that you can save Symbol Libraries just as you would with swatches so that you can use symbols between documents.

Filling Your Shapes with Gradients, Meshes and Patterns

Gradients

Gradients in Illustrator can be added from the gradient panel (Window | Gradient). In the Gradient panel, the Gradient Fill box thumbnail displays the colors and type of the current gradient. When you click the thumbnail, the selected object on the art board is filled with the gradient.
Gradients can also be added with the Gradient Tool (G), which provides some of the same features as the Gradient Panel except they are directly over the object on the art board. With the slider you can modify the angle, location, and spread of a linear gradient or the focal point and origin of a radial gradient. You can also add and edit color stops right from the slider when you hover the mouse over it.

Meshes

When a mesh object is created it allows that object to contain multiple colors which can flow in different directions and transition smoothly from one point to another. Multiple lines cross the object and provide a way to easily manipulate color transitions on the object. Where these lines cross a mesh point is created. Mesh points appear as diamond shapes and act similar to anchor points but with the capability of accepting color. You can add and delete mesh points as needed.
To convert an object to a mesh, simply select the Mesh Tool (U), choose a fill color for the mesh, and begin click on the object to add mesh points.

Patterns

Patterns in Illustrator are saved in the Swatches Palette. Anything can be saved as a pattern, but most likely you will be creating a seamless design. To create a new pattern simply choose (Edit | Define Pattern). Patterns can be saved along with colors and gradients in a Swatch Library.

Ultimate Shape Manipulation using Envelopes

Envelopes are objects that reshape selected objects. You can make an envelope out of an object or you can use a preset warp shape or a mesh grid as an envelope.

To distort an object using an Envelope

Select an object. Choose (Object | Envelope Distort | Make With Warp or Make with Mesh). To use a object as the shape of the envelope, make sure two objects are selected, the top most object being the envelope shape, and select (Object | Envelope Distort | Make With Top Object).

Then edit any anchor point on the envelope with the Direct Selection Tool. This gives you the ability to fine tune the object to whatever shape you desire.

Keyboard Shortcuts for Editing Shapes

Switch Pen tool to Convert Anchor Point tool (alt)PC (option)Mac
Switch between Add Anchor Point tool and Delete Anchor Point tool (alt)PC (option)Mac
Move current anchor point while drawing with Pen tool (spacebar + mouse drag)
Cut a straight line with Knife tool (alt + mouse drag)PC (option + mouse drag)Mac
Cut at 45° or 90° with Knife tool (shift + alt + mouse drag)PC (shift + option + mouse drag)Mac

Take Your Illustrations to the Next Level with Brushes

Brushes are simply stylized paths in Illustrator. There are 5 types of brushes available.

1. Calligraphic brushes - Create strokes that resemble those drawn with the angled point of a calligraphic pen.

2. Scatter brushes – Disperses copies of an object along a path.

3. Art brushes – Stretch a shape evenly along the length of a path.

4. Bristle brushes – Create brush strokes with the appearance of a natural brush with bristles.

5. Pattern brushes – Paint a pattern that repeats along a path. Pattern brushes can include up to five tiles, for the sides, inner corner, outer corner, beginning, and end of the pattern.

Creating Your Own Brushes for Ultimate Customization

The power of brushes in Illustrator lies in creating your own set of custom brushes from artwork you’ve created. For example, If you have a set of charcoal pencils you use for sketching, and you’d like the same effect within Illustrator, you could scan dots made with your pencils, scan and vectorize them, and create your own set of charcoal pencil brushes to use within Illustrator.

To create a new brush

Select the artwork you want to use on the art board, then Click the New Brush button  on the Brushes Panel, or drag the selected artwork to the Brushes panel. From the pop up window that appears select the type of brush you want to create, and click OK. Each brush type has it’s own settings. Play with these to create a multitude of different brush behaviors from the same piece of art.

Painting with Live Paint

Live paint treats your art board as though it were a coloring book, meaning that all paths are on the same surface versus in front of, and behind each other. The paths will be used to divide the artwork into areas that can be colored. Once you’ve created a Live Paint group each path will remain editable, and Illustrator will adjust your colors to the path if you decide to edit the shape. It’s sort of like editing a coloring book page after you’ve colored it.

To create a Live Paint Group

Select one or more paths or  compound paths, then choose (Object | Live Paint | Make). Then select the Live Paint Bucket tool  and click the selected object.

Trace Your Own Hand Drawn Artwork Using Live Trace

Live trace is an incredibly powerful tool. In my mind it lengths the outside world to the vector world of illustrator. If you’re used to drawing objects by hand and then scanning and editing them in Photoshop, then try the same process in Illustrator by first running your hand drawn sketch through Live Trace.

To use Live Trace

Import your bitmap (scanned) artwork on the art board by using (File | Place). With the artwork selected got to (Object | Live Trace | Tracing Options…). There are several presets within the Tracing Options window, or you can use the controls to fine tune your own settings. Check the preview check box to see your settings applied in real time. When you are satisfied click the Trace button.

After your object is traced click (Object | Expand) to turn your artwork into editable paths.

Non-Destructive Design with Appearance Attributes

Appearance Attributes are similar to adjustment layers in Photoshop. Basically its Illustrator’s answer to non-destructive design. Appearance attributes are properties applied to the look of an object that do not effect its underlying structure.  If you apply an appearance attribute to an object and then decide to remove it later, it does not change the underlying object or any other attributes applied to the object.

Take a peak at the Appearance Panel (Window | Appearance). From within this panel you can control EVERYTHING about an object or group of objects. Get to know this panel and understand how to use it. It will make a huge difference in your workflow and how your vector artwork is structured.

Saving and Reusing Styles with the Graphic Styles Panel

Graphic styles in Illustrator are similar to Layer Style in Photoshop. So if you are familiar with Layer Styles then this concept is not new to you. With graphic styles you can save all of the attributes you have applied to an object. For example, say you have applied a gradient fill and stroke color, altered the objects transparency, and apply a drop show effect. Now simply drag this object to the Graphic Styles Panel and a new style will be created that you can then apply to other objects.

Note that you can save a group of graphic styles for use in other documents just as you would a group of swatches from the Swatches Panel.

Adding a Professional Touch with Special Effects

Special effects can be added to an object in much the same way you would in Photoshop. You can apply these effects by selecting an object and choosing an effect from the Effect menu.

Remember that all effects can be edited from the Attributes Panel. See above for details.

Automating Tasks to Make Your Life Easier within Illustrator

Actions

If you’ve read our previous Mastery post on Photoshop then you are already familiar with actions. They work the same way in Illustrator. Basically, and action is a recorded series of tasks that you can run over and over again with the click of a single button.

To create an action simply open the Actions Panel and click the New Action Button. Once you push Record all of your tasks will be recorded until you press the stop button on the Actions Panel.

This is an incredibly powerful feature to add to your work flow. For example, if you had a series of 45 button files that all needed to be resized and have a drop shadow applied. You could set that up as an action and apply it with the click of a button versus doing it all by hand.

Data Driven Graphics

Data-driven graphics make it possible to produce multiple versions of your artwork. For example, you work at a company with a sales staff of over 100+ employees, and you’ve designed a new business card for the entire sales staff. Instead of hand placing each employees data on the card, you can set the design file up as a template and use a script to populate the data (name, phone, email, photo) from the company database.

You can turn any piece of artwork into a template for data-driven graphics within Illustrator. All you need to do is define which objects on the art board are dynamic (changeable) using variables. This is incredibly handy if you are a designer within a production team. You can create a template that gives you control over the dynamic elements of your design. When you hand your template over for production, you can be sure that only the variable data will change.

Additional “Must-Know” Tips?

Whether you’re an advanced Illustrator user or just getting started — there is never a shortage of tips for Illustratpr. Share your favorite must-know tips in the comments, and let us know if we missed anything important!

Creating the Separate Layers in Photoshop

In Photoshop we can create the layers we need that will later overlap via CSS.

See the example below to understand the visual hierarchy.

The first two images will need to be saved as transparent PNG files. To do this in PS, select ( File | Save for Web and Devices ) from the new window choose “PNG-24″ from the drop down in the upper right corner. Then make sure that “Transparency” is checked. Click to save in your website images directory.

Each of these images should be the same width and height, in this case a 187px square. I saved my images as “gallery-thumb.jpg” for the thumbnail, “gallery-shadow.png” for the transparent mask, and “gallery-rollover.png” for the rollover image.

Now let’s take a look at the HTML

<a href="images/gallery-full.jpg" class="item">
<span class="rollover"></span>
<span class="gallery-shadow"></span>
<img src="images/gallery-thumb.jpg"/>
</a>

You’ll notice we have a typical href tag, with a class of “item”, linking our thumbnail image to it’s counterpart, the full image file. What’s different about this block of code is that there are other elements between the open and closing href tags. The two span tags will house our mask and rollover state.

Let’s peek at the CSS to see how it works.

a.item{
position:relative;
display:block;
height:187px;
width:187px;
float:left;
}
a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-shadow.png);
}
a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:187px;
height:187px;
background:url(images/gallery-rollover.png);
}

This CSS is pretty straight forward. Basically we are setting our span elements to “block” giving them a matching width and height and setting their positions to match as well.

I’m using a small bit of Javascript in the header to control the rollover. Let’s take a quick look.

<script type="text/javascript">
	$(document).ready(function(){
	$(".rollover").css({'opacity':'0'});
	$('#gallery a.item').hover(
		function() {
		$(this).find('.rollover').stop().fadeTo(500, 1);
		  },
		   function() {
		   $(this).find('.rollover').stop().fadeTo(500, 0);
		  }
		 )
		});
	</script>

Now that you’ve seen how easy it is to recreate the effect used in Roundfolio, let’s take it a step further. Let’s try using a brush stroke as our mask image. I’m using a brush from the Dry Paint Strokes brush set here at WeGraphics.

Here are my three images laid out in Photoshop. Remember these images have to be the exact same width and height.

As you can imagine this creates a pretty cool effect.

Click here to check out my results.

Conclusion

This is one of those tutorials that is only limited by your imagination. Try different shapes, patterns, and brushes to create your PNG masks, and share your results in the comment field below.  You’re no longer bound by the square edges of typical web design!

Download Roundfolio: A Free Portfolio Template

Keyboard Shortcuts for Layer Manipulation

Note: These shortcuts refer to the “Cmd” key on a Mac keyboard. For PC users substitute the “Ctrl” key in it’s place.

Create a new layer
As your working in PS adding layers to your canvas is essential. It’s possible that you may add dozens of layers in one piece. You can save a number of clicks with the following shortcut.

New layer with dialog box: [ Cmd + Shift + N ]
New layer without dialog box: [ Cmd + Shift + Alt + N ]

Zoom in and out
zooming in and out is a necessity when designing a piece with lots of detail, or working on a large print piece.

Zoom in: [ Cmd + = ]
Zoom out: [ Cmd + - ]

Another useful zoom trick is to fit the artwork to your monitor window size

Fit to window: [ Cmd + 0 ]

Merge layers
Sometimes it’s a good idea to merge 2 or more layers into one to decrease your document size ore the amount of layers your working with.

To merge layers: [ Cmd + E ]

Group Layers
Select the layers that you would like to group together [ Cmd + click ].

To group those layers: [ Cmd + G ]

Create a new layer that contains all visible layers
This can be an excellent tool for many reasons. Sometime you may want to experiment with a flattened file without actually flattening your file.

To create a new layer containing all visible layers: [ Cmd + Alt + Shift + E ]

Using Actions to Personalize Your Work Flow

One of the most useful productivity tools in Photoshop are Actions. “What are actions?”… you might ask. Well imagine something that you do over and over in PS that involves a series of clicks that are repetitive, meaning you have to do the same thing over and over to achieve the result you are after. Well, why not record those steps into an action and run it from one click, or maybe even a keyboard shortcut?

A Further Look

Let’s have a look at the actions that are built into Photoshop. Load the Actions Palette from [ Window | Actions ]. Then load the Production actions collection from the palette’s pull out menu. There is a variety of simple production actions in this collection. It will give you a good idea of how actions can be used to speed your production.

For example, notice the first action in the set. “Letter Canvas 150″… Creating an 8.5×11 canvas is something that you probably do often, and here is a handy little action to preform those steps for you to keep from having to do a receptive task over and over. The possibilities of actions are essentially endless.

Creating Your Own Actions

It’s simple to do so, just click the New Action icon at the bottom of the palette. Once the action is created, the record button will light, also at the bottom of the palette. From there Photoshop will record each function you preform until you press the stop button.

For example: Let’s say that you always convert you art to a size of 800×500 and add a water mark logo and save as a JPG for the web. This is something that you could easily record to an action and do with the click of a button.

500+ Files at Once with Batch Processing

Batch Processing is an incredibly powerful tool. Imagine you have a directory of 500 images that all need to be sized down to 100×200 pixels and converted to black and white and then saved as a Gif. Well, we just learned that we can create an action to do that for us with the click of a button. Given the size of this task it will still involve opening 500 images and clicking that action 500 times, right?

Wrong! We can use Batch Processing to open all of those images one by one, perform the action and then save and close each file. What might take you several hours will only take Photoshop a few minutes to do. So you’ve got some time to go grab a cup of coffee. Explore the Batch Processing options under [ File | Automate | Batch ]

Using Tool Presets to Save Your Best Brushes

If you spend the time to get your tools set a specific way, why not save those settings as a Tool Preset? For example, you’ve spent the time to create a scatter brush from your favorite WeGraphics water color brush set. Instead of adjusting those settings each time you want to splatter paint, you can open the Tool Preset palette from [ Window | Tool Presets ] and click the new Tool Preset icon at the bottom of the palette.

Once you have a collection of presets you can then save them for use later. Click “Save Tool Presets” from the palette’s pull out menu. You can organize your presets by tool, or by type of project.

Photoshop also comes packed with several collections of tool presets. Just select the brush tool to see the presets for that tool. Load more by clicking the pull down menu from the presets panel.

Keyboard Shortcuts for Handling the Canvas

Multiple Undos
Typically in most software packages [ Cmd + Z ] will undo multiple times, but in Photoshop it only undos 1 time and then does a redo if pressed again.

For multiple undos: [ Cmd + Alt + Z ]

Switch Canvas / Document Windows
This is a great tip if you are working from multiple windows within PS.

To switch between documents: [ Cmd + Tab ]

The Move Tool
Here’s an easy one to remember. When working on a large canvas or moving artwork that you have zoomed in on, the Move Tool is essential.

Toggle the Move Tool by holding down the [ spacebar ] or switch to the Move Tool: [ H ]

Show / Hide Rulers and Guides
Using the rulers and guides are a necessity when it comes to precise placement of objects in your document, and at times you need to toggle them to view your work without these distractions.

Toggle rulers: [ CMD + R ]
Toggle guides: [ CMD + ; ]

Rotate View
If your working on a tablet it can make the feel more natural to rotate the view of your canvas/document to a 45 degree angle.

Rotate view: [ R ]

Cycle Through Open Documents

[ Ctrl + Tab ]

History Snapshots for Fast Experimentation

If you design like I do then you’re probably familiar with experimentation. Let’s say you have a project near completion but you want to try a few extra filters or adjustments to see how it would look, but you might not be happy with the results and want to revert back to where the piece is currently.

Before starting your experimentation simply click the small camera icon at the bottom of the history palette. This creates a snapshot of the document’s current state within the History Palette. You can create as many snapshots as you want to compare the artwork at different states.

Creating Seamless Art with Patterns

Creating patterns in PS is an often overlooked feature. You can do some very powerful things utilizing pattern layers. Imagine creating a grunge background pattern that expands to fit any sized document window. It can be done with ease using seamless patterns.

Creating and Defining Patterns
When creating a pattern it’s a good idea to keep seamless designs in mind. But not all things in nature are seamless, so you have to use a bit of ingenuity to make it work.

The best way to create a seamless pattern in Photoshop is by using Filter | Other | Offset. Let’s say your canvas is 500×500 pixels, so your offset would need to be 250 pixels vertical and horizontal.

After clicking “OK” for the offset you can then remove the seam lines with the Clone Stamp [ S ] or the Healing Brush [ J ].

To  define the pattern click Edit | Define Pattern. The pattern will then be accessible from the Pattern Palette when you select the Paint Bucket Tool [ G ] or when you create a new Pattern Layer from the Layers Palette.

One Click Art with Photoshop Brushes

Creating my own brush sets is my favorite way to customize my workflow in Photoshop. You can do some incredible things with the click of a single brush. Brushes can be created from virtually anything. The door is wide open for creativity regarding this aspect of PS.

Creating and Defining Brushes
There are very little restrictions when creating brushes. The only thing you have to keep in mind is size. The max size for a brush is 2500×2500 pixels and the result is black and white. I typically create a grayscale canvas that size and work within that boundary. Try scanning objects and taking photos as source material for brushes.

Once you have a brush laid out, click Edit | Define Brush Preset.

The brush will then be accessible from the brushes palette.

Custom brushes are a very fun tool. I encourage you to experiment and find a style of brush that you would find useful within your artwork.

Adding Flexibility with Custom Vector Shapes

Custom Shapes are an incredible tool, that is somewhat hidden within PS. To view them you need to select and hold the mouse down over the Shape Tool in the Tools Palette. A drop down will appear and the last option is Custom Shapes.

Shapes are loaded similar to patterns. There is a drop down in the top tool bar that show all of the shapes currently loaded.

Photoshop comes with several collections of built in shapes. You can load these from the small arrow at the top of the Custom Shape drop down. Load some of the preset shapes and experiment.

You can also create your own custom shapes from your vector files. Simply paste a vector from illustrator as a Path in Photoshop. Then with the Pen Tool [ P ] selected Ctrl + click on the Illustrator path and select Define Custom Shape from the drop down. Bam! Your shape now appears in the Custom Shape drop down menu in the top tool bar.

Keyboard Shortcuts for Brushes and Tools

Default Colors and Switch Colors
Switch back to default black and white, or switch the foreground and background colors.

Default colors: [ D ]
Switch Colors: [ X ]

Brush Tool and Eraser
These are two of the most widely used tools for basic illustration.

Brush Tool: [ B ]
Eraser Tool: [ E ]

Brush Size
Change the size of your brushes while working. This is an incredibly useful tool that can save a lot of clicks.

Increase brush size: [ ] ]
Decrease brush size [ [ ]

Using Clipping Masks to Show/Hide a Portion of a Layer

I think that clipping masks are generally misunderstood, but can be a very powerful tool when it comes to flexibility and non-destructive design.

To use Clipping Masks you need two layers the bottom most layer being the clip (or portion that is viewable) and the upper most layer being the mask (or portion that is overlaying the clip). The mask can also be multiple layers.

A good example is a text layer acting as the clip and a texture being set as the mask. The image is layered above the text and then set to a Layer Mask by [ Ctrl + clicking ] on the upper layer and choosing “Create Clipping Mask” from the pop menu. To release the mask [ Ctrl + Click ] the mask layer again and choose “Release Clipping Mask”.

The is a great practice as both layers remain in tact and can be edited separately.

Scaling Art and Keeping Proportions

Scaling the size of artwork is a common task in Photoshop. So common that you probably don’t even think about it. There are a couple of methods to keep in mind for keeping your artwork in proper scale, or width to height ratio. I often times see photo within a document that have been scaled improperly and as a result appear stretched either vertically or horizontally.

When scaling an image [ Cmd + T ] hold the shift key down so that your image stays to scale. A simple trick that is essential, and makes your work appear more professional.

An alternative method for scaling an object is to use the top tool bar. It appears when you select the scale tool or press [ Cmd + T ].

From here you can scale by entering a percentage value. A shortcut is to click the chain between these fields so that your values are locked together, therefore, keeping your object in correct proportions.

Use Smart Objects and Filters for Non-Destructive Designs

This is a new PS feature starting with CS4, and is an excellent way to maintain your layers while still adding effects and even replacing the layers content! Yes, you heard right, you can even replace a Smart Object with something completely new and the effects and edits of that layer will remain separate and will apply in the same manner to the new layers content.

A Further Look
Let’s try an example. Say we have a layer that contains an image. First we convert it to a Smart Object by [ Ctrl + clicking ] on the layer and choosing “Convert to Smart Object”. Pretty simple, right?

Now let’s apply a Gaussian Blur [ Filter | Blur | Gaussian Blur ]. You’ll notice that the filter is applied as a “Smart Filter”. Meaning the original layer is still in tact, and the filter is applied as a mask. That mask can be selected and you can then paint on the canvas where the filter should be applied. Pretty cool.

But wait… There’s more. Now I want to replace that layers content with something new. To do so, double click the Smart Objects layers thumbnail within the Layers Palette. The content will open in a new window. From here you can edit it, or replace it all together with something new.

This is an incredible tool that allows flexibility that was not available in previous versions of Photoshop.

Multiple Compositions with Layer Comps

Layer comps are an easy way to maintain alternative layouts in a single design file. This method of maintaining a design is much easier than managing multiple files of a single composition.

To apply Layer Comps simply open the Layer Comps panel [ Window | Layer Comps ]. Once you have created a new layout within your document press the “New Layer Comp” icon at the bottom of the panel. This will record the document state. You are then free to continue editing. At that point you can refresh the current layer comp or create a new one.

Once you get used to using Layer Comps you’ll find you can’t lice without them.

Masking with Quick Mask Mode

One of the most tedious tasks in Photoshop is making a selection from an image, or so you thought. Making selections can be as easy as painting on your canvas using Quick Mask Mode [ Q ].

In QMM you can simply paint where you want your selection to appear. When you leave Quick Mask Mode your painted area will become a selection. QMM simplifies the task of creating a complex selection.

Masking Even Quicker with Quick Selection

If you want to make selections even faster, give the Quick Selection tool a try.  This tool will select similar surrounding colors as you paint with the tool on your canvas.

How to Refine the Edges of Your Selections

Now that you’ve made your selection you may be asking “What about the jagged line or hard edge created from my selection area?”. In steps the Refine Edge feature. With a selection made [ Select | Refine Edge ]. A new window appears with several options for adjusting the edge of your selection.

What’s really cool about this feature is that you have complete control over your selection, and can preview it using several view modes in real time. Fine tuning your selections has never been easier.

Using the Background Eraser Tool to Quickly Remove Background Color

Wouldn’t it be nice to erase only the background of your image while leaving the foreground intact? Well it’s possible using the Background Eraser Tool. Select the Background Eraser Tool from the Eraser Tool drop down.

Once selected there are three options in the top menu bar for selecting how the tool performs.

Sampling Continuous – The tool continuously samples color to be removed as you paint.
Sampling Once – Erases only the color you sampled by [ Opt + clicking ] the color before erasing.
Sample Background Swatch – This is my favorite setting as it erases the color currently set as the background swatch.

Keyboard Shortcuts for Handling Selections

Add/Remove from a Selection
Once you’ve made a selection sometimes it’s necessary to add to that selection without starting over from scratch. Likewise when trying to remove a portion of that selection.

Add to a selection: [ Shift + Mouse Drage ]
Remove from selection: [ Alt + Mouse Drag ]

Constrain Marquee
You can keep the Marquee tool confined to a perfect square or circle.

Proportional Shape: [ Shift + Drag ]

Draw Marquee from Center
Instead of dragging your selection from the edge.

Draw selection shape from center: [ Alt + Drag ]

Draw Marquee from Center and Constrain
The above two shortcuts at the same time.

[ Shift + Alt + Drag ]

Saving Color Schemes Using the Swatches Palette

So you’ve created a logo and color scheme for use throughout all branding materials for a particular client, and you will need access to those colors across multiple documents. Why not save that color scheme as a set of swatches using the Swatches Palette. It’s pretty easy.

You can add new colors to the Swatches Palette by simply clicking anywhere in the gray area or by clicking the new swatch icon. A dialog will appear allowing you to name the swatch. The chosen color will be whatever is set as the foreground color.

Once you have your collection of swatches you can save them from the pull down menu at the top right of the palette. Now your client’s brand colors are just a click away.

Non Destructive Editing Using Adjustment Layers

Adjustment layers are one more excellent example of non-destructive design, leaving your original image perfectly intact. You can add adjustment layers by using the icon at the bottom of the layers palette.

A menu appears with adjustment options. Let’s select “Levels” for this example.

The a new layer appears above all others and the adjustment panel opens. Here you can select your levels and all layers below the adjustment layer will be effected.

Also note that the adjustment layer has a mask so you can use the brush tool to determine where the effect is applied.

Saving Your Layer Styles for Use in Other Documents

Often times you will create buttons in PS using layer styles. Those buttons my contain a gradient overlay, a stroke, and a subtle drop shadow or outer glow. That’s a lot of clicks to create each button, especially across multiple documents.
You can easily save all of your styles to the Styles Palette for future use.

Once you’ve created a button with various styles click the “New Style” button within the Layer Style window.

Your style will be saved to the Layer Style palette. Once you have a collection of styles you can save them from the drop down menu in the top right of the Layer Style palette.

Using Multiple Sources with the Clone Stamp

Everyone is familiar with the Clone Stamp Tool and how it can be used to paint using a clone source within a document. But I bet you didn’t know that you can paint using multiple sources. Up to 5, in fact. And you can switch between those sources using the Clone Source Panel. The sources can be from multiple layers or even multiple documents.

Choose a clone source icon at the top of the panel (1 through 5) and then [ Opt + click ] anywhere in the document to set that source. Choose another icon and do the same.

Applying Multiple Filters at Once With Filter Gallery

Sometimes the hardest part about applying filters is deciding which filters to apply. The task is made abundantly easier using the Filter Gallery. [ Filter | Filter Gallery ] From this new window you can apply multiple effects, edit and remove them, and experiment to your hearts content before committing. Pay close attention to the bottom right of this window.

You can add new effect layers from the icon at the bottom. You can even rearrange layers for different effects. The effects can also be reedited by selecting the corresponding effect layer.

Let Photoshop Do the Work with Advanced Content-Aware Fill

Content Aware Fill is a new option for removing something in an image without using the old methods of Clone Stamps or Healing Brushes alone.

Start out with an image that has something to be removed. I have an image with a telephone pole blocking the view of the cloudy sky.

Make a loose selection around the pole. It doesn’t have to be perfect, just quick. That’s one of the benefits of Content Aware.

Next choose [ Edit | Fill ] and make sure that “Content-Aware” is selected for Use:

The features effectiveness depends greatly on the image you’re editing, but regardless, it’s quicker than relying completely on the Clone Stamp, which would have taken A LOT longer. Typically you will have to do a little bit of of touch up here and there, but over all Content-Aware is a very powerful and useful time-saving tool.

Additional “Must-Know” Tips?

Whether you’re an advanced Photoshop user or just getting started — there is never a shortage of tips for Photoshop. Share your favorite must-know tips in the comments, and let us know if we missed anything important!

To convert a layer to a Smart Object simply Ctrl+Click the layer in the layer palette and select Convert to Smart Object from the popup menu.

Now you’ll notice an icon placed in the layer thumb. This is to let you know that the layer is now a Smart Object. Now try applying a filter such as Gaussian Blur.

The filter is applied similar to a layer style. It can be clicked and edited again if needed. You can also take the brush tool and draw on the layer mask above the filter to edit where the effect is applied.

The filters can easily be turned off or removed to reveal your layer’s original state. Absolutely no destruction done!

If you have some other useful tips regarding Smart Objects and Smart Filters share them in the comment field below.