To celebrate this knowledge exchange, iStockphoto have created a special 15% discount for Psdtuts+ readers.

Introduction

Pixel illustrations are great for making computer icons, isometric images and even whole scenes. They can be made quickly and easily using Photoshop with a couple of quick tweaks to the preference settings.

The only drawback though, is that the pixel art looks best when each pixel has been placed by hand as opposed to using some Photoshop filter. That’s right, placed by hand — I know this sounds a little crazy especially when some pixel scenes have thousands of pixels in them. But without the hand placement your pixel art can look like a bad Lo Res image, so beware!

I think a good rule of thumb before starting off is that you should be able to see your creation clearly as a group of different colored squared bricks, but then if you squint and blur your eyes you can make it out as an image. Imagine that you’re making a tile mosaic, only you don’t need any grout.

Below is a complete piece of pixel artwork, we’ll be creating some of the more basic pieces in this work.

Software

OK let’s set up for drawing. Just in case you don’t have a copy of Photoshop, there are some free dedicated Pixel drawing programs available for free download:

• Pixen (Mac)
• Graphics Gale (Win)
• Find more apps here.

I’ve had a play around with both programs, but came back to Photoshop because I’m used to the keyboard commands.

Okay, Let’s Set Up a Page

1. First open the preferences in Photoshop and set the Image interpolation to “Nearest Neighbor.”
2. Create a new Page 300 px by 300 px at 72 dpi.
3. Select the Pencil tool at 1 pixel. The Pencil and Eraser tools are the only tools you will really need.
4. Occasionally you might use the magic wand to select an area to fill, just make sure Anti Alias is off.

If you did use the brush tool at a whopping 9 pixels instead of 1, you’ll get anti-aliasing occurring and that will spoil the hard-edge pixel effect. So stick to 1 pixel. “Keep it lean keep it mean,” as my Mother used to say.

When your pixel drawing is viewed at 100% (actual size) the pencil tool at 1 pixel wide is very small, so you might find it hard to see and manipulate. An idea is to enlarge the view to 800% so you can see what you are doing. I often have a 2nd window open in Photoshop with the same screen view at 200% so I can quickly see how my drawing looks up close and also from a little further away at the same time.

We can save our working doc as a PSD file and export for web use later as a GIF file. We can also enlarge the file afterwards and turn into a TIF for CMYK printing.

Let’s Start Drawing

OK let’s have a go at drawing something like this open book. With the Pen tool draw around the edge to create your black outline. Then fill in the flat colors of the page and book mark.

Create the idea of text on the page with some single pixel lines. See how we put a slight kink in the line to give the impression of a slight curve on the page.

Lastly add some highlights down the middle of the pages and side of the bookmark. A nice little touch is a single pixel highlight at the bottom outside corner of each page, it just gives a hint of a page edge instead of being a solid block.

Once you’ve got the basics of outlines, colors, highlights and shading, you can try your hand at building other simple shapes.

Angled Pixel Lines

Pixel icons like the ones above can be designed as a series of lines that are just 90º to each other and are very much squares and rectangles. Occasionally though, you might need a line at an angle.

Something to bear in mind is angled lines look best when they are a regular pattern. If they are irregular (like those shown below), they can appear lumpy and crude when viewed small. The second example below is much smoother Isometric angles, which look great with pixel drawings, but it’s not the 30º “iso” angle you used in Technical drawing class — it’s actually something closer to 26.5º. 30º unfortunately gives a lumpy line at 100%. If you make a line that regularly runs 2 points over and 1 point up, you’ll get 26.5º.

Shall we try drawing something else that’s a little more Geometric and uses more of those line patterns?

Let’s Draw a Pixel Log

The lines down the length are easy we know how to do those now, but how about those round ends?

These two are regular patterns but are changing from wide horizontal lines down to squares and then to vertical lines. It does look a little jagged but if you blur your eyes it does look correct!

The curve on the top-right of the log end is also the reverse pattern of the bottom-left section. I often count the pixels or remember certain combinations. The pixel combo on the circle is…

• 3 squares (across)
• 2
• 111
• 222(down)
• 6
• 2
• 1

A little tricky to get the hang of at first like using bezier curves in Illustrator but you soon get a “feel” for it. The length of the log is easy: we just use the 2 along 1 up system and make the log as long or short as we want.

Smaller concentric circles on the end give a nice ring pattern and some areas of darker shading at the bottom of the log give it some depth. We’ll give the log a flat fir color to start, then to create depth, we can create dithering by placing pixels of contrasting color either side of our high light/low light lines.

You can build up the patterns and make them more complex. Careful though — the more realistic and tricky you try and get the fuzzier the image may appear if it’s destined to reproduce at small size.

I did throw in a few more random pixels on log #3 as I wanted it to have a rough look and contrast a little with the squirrel.

For the final log I worked in an area of stripped bark and a small branch. I found it best to complete one area or style first and then work more detail into it. I don’t think I could have drawn the stripped bark log with dithering pattern from scratch — instead, I just kept adding layers over top of layers. Simple stages work best!

Irregular Pixel Drawing

Let’s move onto something a little more irregular, like a Squirrel to sit on our log. For something complicated like this, it’s best to start out with pencil and paper.

First I drew an isometric square on my page to get the right dimensions. Since we’re using this particular example for editorial purposes, I used a photograph for reference. Remember that if you’re planning to upload anything to iStockphoto, you need to include any reference material that you used. Then I start to sketch. I pay particular attention to the angle on both ears and feet as I want them to follow the isometric lines.

As you can see the detail is very minimal — I just want to get the basic shape and correct angles worked out first. We’ll do the rest of the work in Photoshop.

Bring in the sketch, put on a new layer and ghost the opacity so you can see the pixels you are about to create clearly. It’s not a hard and fast rule but I find pixel drawings look best when they have black outlines.

Here I am going around my Squirrel with the pencil tool creating the black outline. One thing to be avoided is clumping up where outline pixels touch each other on more than one side. If you draw an extra square just delete it with your eraser tool (also kept at 1 pixel width, see the red circle ) it will look neater and your audience will thank you for it.

It still looks a little messy but it will shape up! Keylines inside the illustration also help to give it a bold look, just make sure they are a darkish color that isn’t black to make some contrast. Call me a radical but I went with brown on this one.

When the shape is complete fill the inner area with a nice mid tone color (soft brown) and maybe use a light color to bring out some highlights.

The black outline rule is not a hard and fast one, I did leave some black keylines below the front jaw and paw as it was getting hard to see what was going on.

Conclusion

The hand placing, removing, changing of pixels is where the skill comes in. Sometimes. But once you start to get the hang of it, you’ll be able to draw just about anything — all you need is some patience. Hope this helps, and inspires you to create great work of your own!

Additional Resources

Here are some resources for further pixel reading:

• Mark’s Pixel art tutorial (shows more detailed pixel shading and creating pixel characters called “Sprites”)
• Creating Pixel Art Painting Pixel by Pixel — Tips and Tutorials. A good list of pixel sites to visit.
• 20+ Inspiring Pixel Artists, Tutorials, and Resources – a collection of pixel art resources here on Psdtuts+.
• Some pixel files I’ve drawn and animated as gif files. See the Squirrel in action!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

Note from the Editor: Psdtuts+ Thanks iStockPhoto!

• 

  This knowledge exchange was made possible by iStockphoto. Psdtuts+ regular author Alvaro Guzman has shared some of his best Photoshop tips for iStockphoto’s newsletter subscribers, and iStockphoto have kindly shared this article in return. We know plenty of people who read Psdtuts+ would be interested in iStockphoto, and many iStockphoto users would be interested in Psdtuts+, so we hope this will be a great way to help our audiences to meet each other and cross-over.

  To celebrate the exchange, iStockphoto have created a special 15% discount for Psdtuts+ readers.

  If you haven’t heard of iStockphoto before, here’s a very quick intro: iStockphoto is the world’s largest royalty-free stock multimedia destination with a file downloaded every second. iStockphoto pioneered the micropayment phenomenon in this industry in 2000, enabling buyers to license images for as little as $1. Now the site is home to more than 5.6 million photos, illustrations, video, audio and Flash files.

Adjustments Panel

Photoshop CS4 introduces a new Panel to make our lives easier. Adjustments is a quick and accurate way to edit any picture or image by simply clicking on one of the Adjustment options shown on it.

You will be able to edit the colors, saturation, levels, channels, mix colors, add gradients and whatnot from a single interface. You’ll be able to easily change the adjustment settings, hide/show a specific adjustment layer, quickly add clipping masks in order to apply an Adjustment to a single layer or several layers depending on your needs, and much more. This tutorial is a reference guide for any user level, and helps you to better understand this fantastic tool.

First of all, lets see what we are talking about. Open Photoshop and check the Workspace selector at the top-right of the window. You’ll see several options, where you can add your very own. A quick way to show the Adjustment tools is by selecting the option Essentials. Another way is just going to Window > Adjustments, either way is fine. You’ll see the Adjustment panel then, in the panels area, at the right side of the workspace.

Clipping Masks – Apply an Adjustment to Only One or to Many Layers

The Adjustment Panel shows two main areas, the first one with three rows of several filter layers, and a second one with several presets for the Adjustment Layers. At the bottom-right there’s a button that is used to enable/disable a clipping mask in order to apply the Adjustment only to one layer, or apply it to several layers below when the clipping mask is disabled.

Adjustments Panel Overview

Once you select any of the Adjustments, you’ll see the Settings options on the panel, you can enlarge the panel if that works better for you. Besides you can easily toggle the visibility of the Adjustment, reset the default settings or even discard the Adjustment Layer.

To add another Adjustment layer click on the arrow at the bottom left of the panel, that will take you to the list, if you want to go back to the current Adjustment Click on the arrow pointing backwards. Well, that’s enough with the panel itself, let’s try the power of the Adjustment Layers.

1. Brightness and Contrast

The first in line is the Brightness and Contrast adjustment. This is one of the simplest adjustments and yet very powerful. You can add it by clicking on the Brightness and Contrast icon on the Adjustments Panel.

You can simply edit the tonal range of an image in a very smart way. See the examples below, just move the sliders to adjust your desired settings. If you check the Use Legacy box, Photoshop will only increase/decrease each pixel’s brightness value, that’s why it isn’t recommended.

2. Levels

Who doesn’t know about Levels? One of the most used Adjustments in Photoshop. You will be able to easily adjust the color and tonal range by dragging three sliders: one for the dark tones, another for the midtones (gamma) and the last for the highlights.

To add a Levels Adjustment just click on the Levels icon in the Adjustments Panel and edit the settings as you wish. You can always go back to the Default values as shown in image 2.1 below. Or even customize your desired settings by dragging the sliders, 2.2 shows a dark enhancement dragging the dark slider to the right and 2.3 shows how to highlight the image by dragging the white slider to the left. 2.4 and 2.5 show how to increase/decrease the levels of Black and White.

At 2.6 you can see several presets of the Levels adjustment, you can choose any of them and modify it later, 2.7 shows an example of Increase Contrast. Finally you can edit the levels of each channel (Red, Blue, Green) separately, 2.8 shows a dark enhancement of the Red Channel. Besides, you can always click on the Auto button for an automatic correction.

Eyedropper on Adjustment Layers – How to Use It

In both Levels and Curves adjustments there are three little eyedroppers. They are pretty useful to neutralize some colors in the histogram, by electing any of them and clicking anywhere on your image you’ll be setting a black, gray or white point respectively to auto adjust the colors.

In the images below you can see how the black point is set by clicking on a dark gray area of the image (a), since the clicked zone isn’t 100% black the image turns a little bit darker. Then by setting the gray point I’m clicking somewhere over a window (b) that will neutralize the window color for midtones, as the window is a little bit blue, Photoshop will neutralize the blue tone on the entire image making it more red/yellow/orange. Finally, by setting the white point somewhere over a highlighted wall (c), the image turns a little bit brighter. Is a good practice to start with the neutral gray eyedropper.

3. Curves

Curves adjustments is a must-know filter for any Photoshop user. It basically lets you adjust points throughout the tonal range of an image (from shadows to highlights) you can adjust as many point as you want (with Levels you can only adjust three).

To add a Curves adjustment, just click on the icon on the adjustment panel. The first thing you’ll see is a line, because the tonal range is represented as a straight diagonal baseline, as shown in the image 3.1 below. The horizontal axis represents the input levels and the vertical the output levels.

Then you’ll need to add some points to the curve and play with them (3.2). As shows the image 3.3 below you can select only one of the color Channels by choosing it form the select list above the curves graphic. When you’re editing a single channel the points above the baseline increase the intensity of the color, and the points below the baseline make the color a little bit gray, or less intense.

Besides you can easily use the eyedroppers to set the black, gray and white points respectively (images 3.4 to 3.6) this process will modify the baseline for each color. Anyway you can always click the Auto button to make your job easier but less accurate.

4. Exposure

The fourth filter on the list is Exposure, add it by clicking over the icon on the Adjustments Panel. This is a pretty simple filter actually, basically it allows you to adjust the exposure levels by adjusting three sliders, Exposure, Offset and Gamma (4.1).

Exposure will adjust the highlights of the image without effecting the dark shadows. Offset will adjust the midtones and Gamma will adjust the dark tones without modify the highlights. This filter is pretty useful when you’re editing or even creating HDR pictures.

5. Vibrance

The Vibrance Adjustment is an easy way to edit the color saturation. Add it by clicking on the Vibrance icon on the Adjustment Panel. This adjustment increases the saturation of less-saturated colors more than the colors that are already saturated. This filter is really useful when you’re editing skin colors.

6. Hue / Saturation

Another must-know Adjustment, Hue/Saturation lets you adjust the hue, saturation, and lightness of a specific range of colors in an image or simultaneously adjust all the colors on it. Add it by clicking on the Hue/Saturation icon on the Adjustments Panel.

To adjust all the colors at the same time select Master on the color list and then move any of the three sliders. The Hue slider changes the color itself (6.2). The Saturation slider modifies the amount of the color, less saturated color means a more gray image (6.3, 6.4). The Lightness slider adjusts the amount of black/white of the image (6.5, 6.6).

The image 6.8 below shows the colors list, which means that you can edit only one color channel and adjust the hue/saturation/lightness values only for that channel (6.8). Finally there’s a check box named Colorize, check it if you want to colorize a grayscale image. For full color images I recommend the Photo Filter Adjustment, that we’ll see shortly.

Hue/Saturation Eyedroppers

You’ll notice there are three eyedroppers below the sliders in the Hue/Saturation panel. To make them work you must select a color channel first, the Yellow channel in the following example. Use the first eyedropper (a) to select a base color range, e.g. somewhere over the sand, then play with the sliders. Following select the next eyedropper to Add a color range to the editable range (b).

Finally, you’ll notice in the following example that the girl’s skin tone became almost red because of the adjustments. In order to fix it select the last eyedropper to delete or remove a color from the editable range of the face skin tone on the example. The final result is at the bottom of the image below (d). Useful isn’t it?

7. Color Balance

The seventh on the list is the Color Balance adjustment. Add this filter by clicking on its icon in the Adjustment Panel. This adjustment changes the overall mixture of colors in an image for generalized color correction. It basically adds something like a tint over the Shadows, Midtones and Highlights of the image.

By default the filter shows the Midtone colors’ mix in 0 (See image 7.1 below) you can move the sliders to paint the midtones. I painted the midtones a little bit yellow (7.2). Do the same with the Shadows and Highlights, as shown in the images 7.3 and 7.4 of the example. I’ve painted the shadows red and the highlights a little bit blue.

8. Black & White

Maybe one of my favorites, the Black & White adjustment allows you to create quick and beautiful grayscale images. Add this filter by clicking on the B/W icon on the Adjustments Panel. This filter allows you to maintain full control over how individual colors are converted.

Select the Default mode to create an automatic black and white image, or chose one of the many presets. Click on the auto Button to automate the adjustment. Besides you can mark the Tint checkbox and colorize the grayscale image.

9. Photo Filter

This Adjustment is just like if you put a color filter in front of the camera lens. Add it by clicking on the Photo filter icon in the Adjustment Panel. The are are several presets based on standards (see 9.1 below), increase/decrease the filter’s density to adjust the color intensity. Image 9.2 shows a warming filter by using an orange tone, and 9.3 shows a cooling filter by using a blue tone. You can easily customize a color filter by selecting the color radio button and selecting a color from Photoshop’s color picker.

10. Channel Mixer

This Adjustment makes it easy to create high quality tinted or grayscale images. Add it by clicking the Channel Mixer icon in the Adjustments Panel. On the Adjustment Panel, select an Output channel as shown in the image 10.1 below. You’ll see the slider associated to the selected channel is 100%, then you can modify the color values by using the sliders (see 10.2).

You can work with other channels as well, for example on the image 10.3 the Blue channel is selected. There’s a color enhancement over the image’s blue areas (like the sky), as shows images 10.4 and 10.6 below. You can click over the Monochrome checkbox to edit the channels in grayscale mode. This is very useful to create advanced grayscale images, or apply a custom tint to an output channel or choose any of the several grayscale presets (10.5).

11. Invert

This is the simplest adjustment ever, but yet so useful. Click on the Invert icon in the Adjustments Panel and you’ll see the image’s colors inverted (like a negative).

12. Posterize

Posterize is a rapid way to adjust the number of tonal levels. Add this Adjustment by clicking on the Posterize icon in the Adjustments Panel. The Posterize works this way, you chose a Levels’ value, e.g. 5 (see the image 12.1 below) that means the image will have 15 colors, 5 for red, 5 for green and 5 for blue. The higher the levels, the better the better quality the image.

13. Threshold

This adjustment converts any picture into a two color (black and white) image. Add this adjustment by clicking on its icon in the Adjustments Panel. How it works? You specify a Threshold Level, all the pixels darker than that level will turn into black and all the pixels lighter into white.

14. Gradient Map

The Gradient Map adjustment maps the grayscale range of an image to the colors of a custom gradient fill. To add it click on the Gradient map icon in the Adjustment Panel.

The way this adjustment works is really simple, one of the sides of the gradient replaces the dark areas of the image, the other side replaces the highlights, and all the middle tones of the gradient replaces the midtones of the original image, just as examples 14.1 and 14.2 show below. Click the Dither checkbox to add random noise in order to make the gradient smooth. Click on the Reverse checkbox to invert the colors of the gradient (14.3).

15. Selective Color

With this adjustment you can modify the amount of a primary color selectively without affecting the other primary colors. This filter works extremely well on CMYK images, but it works on RGB as well. Add it by clicking on the Selective Color icon in the Adjustments Panel.

As you can see on image 15.1 below, there are fields to select the channel. Adjust the CMYK colors percentage and select Relative or Absolute adjustment, for example on image 15.3 the Cyan color is selected and I increased its amount of Black in order to make the sky darker. That looks fine because the Absolute option is selected. The Absolute value adds the exact percentage to the color channel. The Relative option, as shown in image 15.4 is less dramatic since it changes the existing amount of the CMYK colors by its percentage of the total.

Conclusion

Obviously this is only the the tip of the iceberg of the unlimited power of this panel. Since each Adjustment Layer has all the properties of a Layer in Photoshop, you can change its Blending Mode, Opacity, Mask it, or even combine several Adjustment Layers to create outstanding results. Your imagination is the only limit.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.

A Basic Introduction to Typography

Typography plays a big role in graphic design and many designers are very passionate or opinionated about it. For this reason it is a very hot topic in design circles.

Developing your own skills in typography will take time and it can be one of the hardest things to get right. It is best to get a solid understanding of the basics as soon as possible in your education and career. However, it is a complex subject with a massive amount of detail which cannot be explained in just one article. So my aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

So What is Typography?

Typography is an art form that has been around for hundreds of years. Words and text are all around us every day in almost everything we do. In every piece of type you see, somebody has considered how the letters, sentences and paragraphs will look in order for it to be read by us, or make us feel a certain way when we look at it. Sometimes it is done well, others not. Often it is us graphic designers who are the ones deciding how it will look, in our brochures, our logos, our websites and so on. The better we are at this, the more effective our designs will be.

Good typography comes from paying attention to tiny details as this can make the difference between graphic design work that is just acceptable or really good. There is more to it than just choosing fonts and making copy look good though – it is also about making things legible and readable (some of most basic functions of good typography) as well as making layouts look good in an aesthetic way.

Typographic basics

The following is an explanation of some common areas of typography.

Typeface or font?

Let’s get this one cleared up straight away! Designers are often unsure of the difference between these two, as they are both well used terms for the same thing. Actually, a typeface is a family of fonts (such as Helvetica Regular, Helvetica Italic, Helvetica Bold, Helvetica Black, etc.) but a font is one weight or style within a typeface family (such as Helvetica Regular).

Typeface classifications

There are many different classifications and sub-classification of typefaces, but the most common two types you will hear of are: Serif – these typefaces are the more traditional ones. They are distinguished by a short line or finishing stroke on the end of character strokes and stems (shown in the anatomy diagram below) and; Sans-serif – as the name suggests, these are distinguished by their lack of any Serifs. They only became popular in the nineteenth century and are considered modern as a result.

Anatomy

These are some of the basic parts of the anatomy of typographic characters. There are lots more (which you can find out about here on Fonts.com) but I think it is better to start with a few first.

Glyphs

What are glyphs? Most designers have noticed that there is now a Glyphs palette in most of the major software packages. The word essentially refers to all the available characters in a font, from letters to numbers and all the special characters.

Kerning and Tracking

Kerning is the adjustment of the spacing between individual characters. Tracking, however, is the spacing of a group of characters. These two are often confused, but the way I remember them is that Tracking sounds like a long line of railway tracks, whereas Kerning sounds like kernel, which is an individual object.

Alignment

Generally text should be left aligned, simply because we are used to reading that way. Without good reason, only consider centering or right aligning text if it is a small amount, such as a heading or caption. Also, justifying text (where it has a straight edge on both sides) should be used in moderation too. It looks nice and neat in some situations, but too much of it will make a layout look rigid. Additionally justifying in a small column size can cause irregular spacing as between words as the software attempts to adjust your text to fit.

Measure

This refers to the length of lines of text in a paragraph or column. Most people tend to just refer to it as column width though. Measure is an important thing to get right in typography as it can be crucial to the readability of the text. If the measure is too wide the text may be difficult to read as the eye has to move a lot more after each line is read. If it is too narrow it can also be tiring on the eye to read, as the eye is constantly moving back and forth. A narrow measure will also lead to a lot of hyphenation.

Leading

Vertical line spacing is referred to as Leading in typography and print, which is because in the old days of printing and setting blocks of type, strips of lead were inserted between the lines according to how much space was required. Leading’s role in typography is to generate sufficient space between the lines to make it readable. As with all matters of typography, it is a balance between reading comfort and aesthetic style.

Ligatures

When parts of the anatomy of characters either clash or look too close together, they can be combined in what are called Ligatures. These can be for functional or decorative reasons depending on how obvious the clash is. Mostly this is only an issue with serif fonts although sometimes sans-serifs will need ligatures to be set too.

You can find out a lot more about ligatures on Fonts.com and Adobe’s Layers Magazine.

Hyphenation

Another one of those details you have to judge in typography. Hyphenation is not loved by designers or typographers but is considered necessary sometimes in order to prevent rag problems (there is a description of rag further on in this article). If you have to use them avoid having a lot of them in a block of copy, and especially avoid having one follow another. For more information on this try reading this page on Fonts.com.

Hyphens, En-dashes and Em-dashes

Another thing that can cause confusion the use of the horizontal line characters in a font, and which is the correct one to use. It is worth knowing the difference between a Hyphen (the short one) an En-dash (the slightly longer one) and an Em-dash (the longer one). Linotype and Fonts.com have useful guides on this subject.

Grids

A Grid is a guide by which graphic designers can organise copy and images in a flexible way, whilst making this content easy to take in and understand. They can form the basis of a good typographic layout so it’s good to get into the habit of using them in your work. Try looking at examples (such as a newspaper, a brochure, or a website with a lot of text content) to see how the type has been positioned and structured. The diagram below is intended to show in a basic way how different pieces of type can be positioned on a grid, and what the main parts of a grid are called.

Find out more about using grids from The Grid System, a very useful resource.

Rag

This is the uneven vertical edge of a block of type, most commonly the right-hand edge, as in the case of left-aligned text. It is important to pay attention to the rag, as it can affect readability in a big way. If the rag is not very good, it can be very distracting on the eye, as you read down a column. Usually it can easily be fixed by reworking the line breaks, or by editing the copy.

Widows and Orphans

If a single word or very short line is left at the end of a column it is called a Widow. Likewise if the same is left at the top of the following column this is called an Orphan. Both of these are considered bad typography as they cause distracting shapes in a block of type. They can usually be fixed easily in the same way as the rag, by reworking the line breaks in the column or by editing the copy.

Keep learning more

Once you have digested these basics I have outlined, there is a huge amount of good quality typographic reference material online to help you learn more and improve your skill and judgement. Below is a collection of useful links to get you started.

Recommended reading

Two of the main international font companies both have some very good resource sections aimed at helping you master basic typography:

• Monotype’s For Your Typographic Information
• Linotype’s Font Lounge

Inspiration

Have a look around on the web and get a feel for some great typography. Not only will you find a good variety of styles, but you can also see what other people consider good type. These are some good places to start:

• We Love Typography
• FormFiftyFive
• Resources for Inspirational Typography
• Typeneu.com
• Typographer.org
• Type Directors Club
• Typography Served
• David Airey’s list of typographic Flickr groups
• Typography on Behance

Terminology

If you want to find out more about typographic terminology or just want to look up a word, these are useful websites:

• Fonts.com glossary
• Paratype.com

General articles

These are some articles with general tips for improving your typography:

• 11 Essential Tips for Good Print Typography
• 8 Simple Ways to Improve Typography In Your Designs

Web typography

If you are interested in reading about using typography in websites, try these useful resources:

• Websites with beautiful typography
• Usetypography.com
• 8 detailed typography tips for the web
• Web Design is 95% Typography
• A practical guide to web typography
• The 100% Easy-2-Read Standard

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

This article consists of a list of some of the most common printing terms with a brief explanation of each. To make it easier to understand I have divided the list into three areas: General printing, Bindings, and Finishings.

General printing

CMYK

This is the widely used printing method to achieve full colour printing. It is also known as Process, 4 Colour Process or Full Colour Process. It uses only four ink colours: Cyan (C), Magenta (M), Yellow (Y) and Black (K) layed down on the paper as dots which combine to create the illusion of other colours. If you look at any piece of print under a magnifying glass you will notice a matrix of tiny dots of the four colours.

Spot colours

Spot colours are true colours which are pre-mixed to the colour required rather than achieved through a process method on the paper. They are much punchier than process colours and can either be printed on their own (for single or two colour jobs) or printed in addition to CMYK (resulting in a 5 or 6 colour print). It all comes down to cost at the end of the day though, as the number of colours used can potentially be endless.

Pantone^® colours

These are spot colours from the international ink colour matching system from the company called Pantone^®. They are designed to allow people in the design and printing industries to specify and match specific colours in the printing process. They are sometimes known as PMS colours (Pantone^® Matching System). They can also be created using the CMYK printing process but rarely come out exactly the same colour as in the Pantone^® Matching System. Pantone also provide colour specifically for different types of paper and coatings so that a consistent colour can be achieved across a range of products.

Metallic inks

These are spot colours that have a metallic constituent in the ink, giving a shiny quality to a range of colours from Pantone^®.

Hexachrome^® colours

By using six colors instead of the standard four in CMYK, it is possible to expand the spectrum on a full colour print job. This system has been developed by Pantone^® and results in a bigger visual impact. However, there are higher costs involved due to the extra inks and plates.

Coated paper

This is paper printing stock that has an outer layer of coating on either one or both sides. It is available in a variety of finishes including Gloss, Silk and Dull or Matt, which give slightly different results. They can produce sharp and bright printing due to the fact that the ink is not absorbed into the paper very much and the paper also reflects light well.

Uncoated paper

This is paper printing stock that does not have an outer layer of coating. It is sometimes preferred by designers for its natural feel. However, the effect is very different to Coated paper because the ink is absorbed and the dots expand. This results in print that is less sharp or bright than Coated paper, depending on the quality of the paper.

Proof

A representation of what the finished printed item will look like, so that the designer or customer can check for errors or printing problems before committing to the costs of printing the full job. This will generally consist of either a test sheet from the actual printing press, or a digital printout from a smaller machine. The costs vary greatly between the methods. Some online and discount printers will alternatively provide a digital PDF proof that shows folds, trims and so on. These are quick and easy to approve, however they provide no indication as to how colours or other physical attributes may turn out.

Dummy

A blank version of a proposed printed document, produced to demonstrate the feel of the paper stock that has been specified and the size of the document. On larger more expensive jobs this can help the designer or customer decide if they are happy with their choice of paper.

Lithographic printing (Litho)

This is a printing of method which uses a metal plate inside a printing press machine. The plate carries the image to be printed, to which the ink is applied. This is then applied to the paper as it passes through the press.

Offset printing

This very common printing method refers to Litho printing where the paper does not actually come into contact with the plate. Instead it is transferred from the plate to a rubber ‘blanket’ cylinder and then onto the paper.

Digital printing

Digital presses accept the digital data of your design and print straight from it, without the need to produce plates or any other such tools. Generally this method is used for shorter print runs as the set up costs are lower and the quality does not always match Litho standards. The main benefits of using digital printing are the short run costs, the possibility of item by item customization,

Registration

When two or more colours are printed together, Registration refers to the process of exactly aligning them on the paper so that the image is sharp.

Letterpress printing

This is a ‘relief’ method printing where a raised surface is applied with ink and then pressed onto a sheet of paper to create the text or image. This results in the text or image being slightly depressed into the surface. Once a common way of reproducing books, these days it is generally used in craft applications such as high quality invitations or letterheads.

Thermographic printing

To achieve a raised glossy feel in printing (often in business cards) powder is applied to printed ink while it is wet, and is then heated and cured.

Web printing

This is printing using a continuous roll of paper rather than individual sheets. It is used for very high print runs, such as newspapers.

Varnish

Applying a varnish coating to a printed surface can add a glossy, silk or matt finish.

UV varnish

This type of varnish is applied to give a very high glossy finish to printed surfaces. It is often used and referred to as a Spot UV, where it is applied to specific places on the print, such as photographs.

Self cover

Refers to documents where the cover is printed on the same material as the text pages.

Fold formats

There are many different formats and styles for folding smaller documents, but the most common tend to be: 4 or 6 Page Fold, Gate Fold, Concertina Fold and Roll Fold.

ISO standard

Different parts of the world use different standards for paper sheet sizes, but the most widely used system is the ISO standard. This consists of the A series (e.g A4) and the C series for envelopes (e.g C4 envelope for an A4 sheet). There is a B series of intermediate sizes for the A series but it is not so commonly used. RA and SRA (e.g SRA4) sheets are used by printers and are slightly larger than the A series, providing extra grip and trim in the printing process. If you are interested in other size coventions there is a useful guide on the Designers Toolbox website.

Bindings

Saddle Stitch binding (stapling)

The standard form of binding which uses folded pages inserted into a folded cover, all of which are then stapled through the fold. This method is only suitable up to a limited number of pages (depending on the paper weight) as using too many will result in the finished job buckling and not lying flat. Typical uses are brochures, magazines and small booklets.

Case binding

This method is for books of at least about 80 pages and gives a hard, durable cover. Pages are sewn together with thread and then the whole thing is glued into the hard cover. It is generally the most expensive method of binding. Typical uses are hardcover books and documents.

Image 2. thanks to Baddeley Brothers.

Perfect binding

This method is often chosen for the distinct flat spine it gives, which is useful for documents that will be kept for reference on a shelf. As with Case binding, pages are also stitched together and then glued into a separate (but not hard) outer cover. Often used for documents or brochures that have too many pages for Saddle Stitch Binding. Typical uses are company Annual Reports and paperback books.

Spiral Wire and Wire-O binding

This consists of a line of small holes along the edge of the cover next to the spine. Then, either a Spiral or Wire-O (double loop) wire is then inserted into the holes. The main benefit of this method is that it allows the document to lie flat or be folded over. Typical uses are notebooks and calendars.

Finishings

Lamination

This is a very thin plastic coating which is sealed onto the printed sheet in either a Matt or Gloss finish. Matt tends to create a very smooth and professional looking surface, while Gloss creates a very vibrant and shiny effect. Lamination is often used to improve the durability of the printed job, but can add to the costs and be seen as ecologically unfriendly as it cannot be recycled.

Foil Blocking

A technique where a metallic foil is applied to a specific area of a printed sheet (such as a logo) to create an eye catching shiny effect. The method uses heat and pressure too apply the foil and the result is a much shinier finish than normal Metallic inks. However, it is more expensive as it requires special tools to be made.

Image 1. thanks to GF Smith and SEA Design. Images 2. & 3. thanks to Baddeley Brothers.

Embossing and Debossing

This effect is where a a specific area or detail of a printed job (such as a logo) is either raised up (Embossed) or pressed down (Debossed). This makes the area more tactile and prominent than the surrounding area, or it can be used to suggest a slightly 3-dimensional look, such as a bevel.

Die cutting

This technique refers to either punching an irregular hole in a printed page or trimming the whole sheet in an irregular way. It requires a metal punch tool to be made which adds to the cost, depending on its complexity. Often used in packaging, where unusual shapes need to be created.

Encapsulation

This means to completely cover a printed sheet in clear plastic. It gives a much higher level of durability than Lamination and is used on ID badges and surfaces that need to be wiped clean.

Further reading

Hopefully this article has given you an overview of some common printing terms, but there are many places on the web where you can get more information and advice. Here are a few to get you started:

• Full Color Printing
• Catalogue Printing Glossary
• Tom The Printer
• Printernational.org

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

]]> http://psd.tutsplus.com/articles/techniques/spot-uvs-proofs-roll-folds-and-other-printing-terminology-explained/feed/ 38 http://psd.tutsplus.com/articles/techniques/preparing-and-talking-about-your-graphic-design-portfolio/ http://psd.tutsplus.com/articles/techniques/preparing-and-talking-about-your-graphic-design-portfolio/#comments Wed, 20 May 2009 05:30:48 +0000 Mark Bowley http://psd.tutsplus.com/?p=3339 ]]> As a graphic designer a portfolio is essential. While it’s great to have an online one, it’s also a good idea to have a physical one too to take along to meetings and interviews.

Putting together and showing this kind of portfolio of your graphic design work is quite a skill, and the best way to do it gets debated constantly by designers around the world. There is no right way of doing it – there will always be differences in what employers or clients expect, or would like to see. Some simple logic and advice will help you though, and I’m going to share what I have learned both from experience and from reading other articles.

So, to get started it’s worth mentioning that your portfolio, and the way you talk about it, is an opportunity for you to shine and to demonstrate that:

• you are creative
• you can apply good thought processes
• you have a range of skills
• you are ambitious and enthusiastic

Your audience



As designers, when we start a design project one of the first questions we always ask is who the audience will be. You should be applying the same thinking when putting together your portfolio – who will be looking at it? What are their needs and expectations?

Depending on your situation, your target audience is likely to be one of the following:

• A potential employer
• A potential client

If you are looking for a job in the design industry remember potential employers will most likely be designers themselves. This means they will have a keen eye for the look of your work and will want to understand your contribution to each project.

If you are looking for work from potential clients they, on the other hand, will be more focussed on whether you have experience in the type of work they need to produce, and whether your design style is to their taste.

Adapt where you can

Try to adapt your portfolio and presentation style to fit each audience. This means a bit more work each time but will make it more engaging for them. It will also lead to more success for you by demonstrating you understand their business.

Do some research

When you have a meeting set up to show your work, do some research. What sort of company are they? If they are a potential employer what kind of work do they produce? Are they really creative or more corporate? If they are a potential client what sort of design work have they had produced before? What kind of industry are they in and who are their customers? Luckily today most businesses have websites, so all this should be relatively easy.

Choosing projects



Limit the number

If you can, try and keep it to about 6-10 good size projects. People don’t want to go through everything you have done and will probably make up their minds about you during the first 3 you show. Obviously if you don’t have much to show for any of them (e.g an individual logo) you could consider showing more projects.

Select your best

I can’t stress this one enough and you will hear the same thing from other people in the industry: Only select your best work and work you want to talk about. If you don’t love it or can’t talk about it endlessly, over and over, it will show and they won’t be interested. I know myself it’s tempting to fill out your portfolio with work that isn’t your best but shows other skills or types of client. But it won’t be long before you struggle to talk about them engagingly, and you will come across as not enjoying your work.

What order to show them in?

The first and last projects in your portfolio will stick in people’s minds the most. So, you should select carefully which projects to put in these positions. In addition, the last project can be the best place for a project you really like talking about or has samples that people can look at. This is because it can often end up staying open on the desk while you continue the meeting.

The projects you show in the middle of your portfolio should then be ordered in a way that demonstrates variety in skills and style. Keep them interested by mixing things up and being dramatic. If there are samples to pass around for one project, consider following it with a project that doesn’t. Don’t, for example, put all your logo or brochure projects back to back if you can help it.

Show creativity

One of the things potential employers will often look for is how you got to the finished design. They may be interested in sketch books, loosely bound sheets of ideas, mood boards or unused concepts. Put a few of them in your portfolio but not for every project. They are there to demonstrate your ability to think and and sketch before you jumped on a Mac to create the work.

You should also aim to include at least one or two mockups or printed samples. This will stop your portfolio from looking like just a collection of flat printouts of your work, and therefore a more memorable experience.

Put in what you want to get out

What does this mean? Well one important thing to remember is that you should only put types of work in your portfolio that you want to get more of. If you’ve done a lot of one type of work but you’re now really tired of it, don’t put it in your portfolio even if you think it’s good work. Chances are, you will only get more of it.

Presentation is key

The standard of presentation in your portfolio must be the highest you can achieve. Employers and clients alike will be judging how much attention you pay to these details as well as the actual work. But don’t dress it up – the quality of your work and your presentation is much more important than a fancy or tricksy portfolio.

Explaining the work



OK, so we have covered putting your portfolio together, but you also need to learn how to talk about it.

It’s not easy

The art of talking about your work is not something that comes naturally to designers – I know I didn’t find it easy in the beginning. But it’s a good skill to learn, and learn as early as you can. Don’t be afraid of making mistakes and look upon each meeting as an opportunity to develop this skill. Not only will this make it easier to talk about your portfolio, it will also make you better at presenting concepts and design work, both to your colleagues and to clients.

The simple rule here is engagement. Your aim should be to arouse interest in your work, not give a speech or lecture. Remember, showing your portfolio to people is also about them, not just you.

When you come to each project, talk about it briefly to introduce it but don’t talk at length. See how they react, let them ask questions or let them simply look. If they are looking at you rather than the work, talk some more about the project – tell them what interested you about it. Look for signs that it’s time to move on to the next project.

To help you get used to talking about your work, try it on other people whenever you get a chance. If they are non-designers it will help even more, as you will practice not using designer lingo to describe each project.

Show your value

Employers want to see how you could be useful in their organisation, and when showing your portfolio they will often ask what your involvement was on a project. Whatever you are tempted to say, I advise this: Be honest, give yourself credit, but be clear about your skills.

A potential client will be wanting to find out if you have the skills they currently need. Focus less on talking up the design aesthetics of your work, and more on explaining the value of your services to the client of each project. Were they pleased with the work? Did they achieve their business goals?

Know yourself

You should take some time to understand your strengths and weaknesses (and yes, we all have weaknesses) before showing your work. If you can’t see them yourself ask another designer for an honest opinion (and be prepared for the answers!). You may not get asked about these specifically in a meeting, but you should be prepared to discuss them anyway.

The reason I mention this is that showing you understand your limits and where you are most effective is far better than trying to prove you are simply amazing. Employers and clients are interested in how they can use you best – they know no-one is good at everything and are not looking for that.

If you are particularly strong in one area though, make sure every piece of work in your portfolio shows that without you even having to say it. They will remember you better that way.

Summary

Hopefully this article will give you a good starting guide to your portfolio. Remember, it is a skill to be learned during your career rather than mastered beforehand – every time you show your work it will give you extra experience and feedback that helps you improve.

If you are interested in reading further, here is a collection of a few articles which you may also find useful:

• How to get your first graphic design job
• 15 graphic design interview tips
• Innovative one page resume and portfolio

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

]]> http://psd.tutsplus.com/articles/techniques/preparing-and-talking-about-your-graphic-design-portfolio/feed/ 36 http://psd.tutsplus.com/articles/techniques/10-steps-to-improving-your-photoshop-skills/ http://psd.tutsplus.com/articles/techniques/10-steps-to-improving-your-photoshop-skills/#comments Fri, 26 Dec 2008 16:12:19 +0000 Steven Snell http://psdtuts.com/?p=1757 ]]> Photoshop is an incredible tool for graphic design, but there is certainly a lot to learn for new designers, and there’s always more to master for those who are already experienced. If you’re currently working as a designer and looking to improve your skills, you probably find that time is a major constraint to improving your abilities.

If so, you’ll need to develop a plan to improve your skills step-by-step in the time that you have available. If you’re an aspiring designer, you may have no idea where to start in order to achieve the level of success of some of the Photoshop masters that we see online. In this, article we’ll look at ten steps you can take to progressively build your skills using resources that are readily available.

1. Follow Tutorials

PSDTUTS is obviously focused on providing excellent quality tutorials for readers. Like PSDTUTS, there are a growing number of other websites and blogs that regularly publish Photoshop tutorials. All of these sites are valuable resources for improving your skills, whether you’re looking to develop specific skills or just looking to improve in general.

In order to take advantage of the tutorial sites that are available, subscribe to a few that you like the most so you don’t miss out on new posts (you may also want to bookmark other tutorial sites in case you want to find them in the future). With the amount of content that is published, you’ll never be able to work through each tutorial, and you’re unlikely to have an interest in all of them anyway.

Try to get in the habit of picking one or two per week to attempt on your own. For most of us, learning is much easier when we’re actually doing something ourselves, so working through the tutorials is essential rather than just browsing through them. If you use Google Reader you can star the tutorials that interest you the most so you’ll be able to easily find them when you have some spare time.

About six months ago Collis published a list of his favorite tutorial sites, which included: Tutorial9, PS Hero, Tutzor, PhotoshopStar, Tutorial Dog, Abduzeedo, PhotoshopGUIDesign, Worth1000, Digital Grin, and Photoshop Support. In addition to Collis’ list, PSD Learning, PSDFAN, PhotoshopTutorials.ws, and Photoshop Essentials are also good resources.



2. Experiment

The best way to learn anything new is to experience it for yourself. While following tutorials can be incredibly helpful, you should also take some time to just experiment on your own to see what you can create. You can try to apply things you have learned from tutorials, or just experiment with things you’re not familiar with. Photoshop has so many different functions, features and settings that you’ll really need to become familiar with them in order to understand their potential.

Free form experimentation can open up your creativity and help you to get more comfortable with Photoshop. In order to ever be able to put the lessons you learn from others into practice in real world scenarios, you’ll need to be able to do some experimentation and adaptation. There may be some tutorials that teach you exactly what you need to do, but more likely they’ll teach you a skill or technique that can be used on your own projects, but you’ll need to adjust it to fit with your particular needs.

When working with experimentation, find something that works best for you in terms of learning new things. I like to work with large images by experimenting with wallpaper design because the large canvas size opens up all kinds of opportunities and you can take it in just about any direction that you want.



3. Start with the Fundamentals

There’s so much to learn with Photoshop and so many possibilities that it is essential to get a firm grasp of the basics and fundamentals before attempting to move too far along. Like anything else, the foundation of your Photoshop knowledge is critical to the end result. If you’re new, rather than trying to follow along with advanced tutorials, take some time to get familiar with the basics before anything else.

Elite by Design published an excellent three-part series a few months ago on How to Master Photoshop in Just One Week. Part one of that series starts with some tutorials on all of the basics of Photoshop, including the interface, the tools, shortcuts and more. Having a solid working knowledge of these items will make it much easier when you want to work on something more complex later. Part two of the series covers such topics as typography, web components and photo manipulation. Part three covers more advanced tutorials.

On the subject of fundamentals, PSDTUTS has some resources including: A Comprehensive Introduction to Photoshop Selection Techniques, Tools & Tips: Photoshop Actions, Tools & Tips, Smart Objects and Smart Filters, Tools & Tips, Photoshop Brushes, and 30+ Useful Resources for Improving Your Photoshop Efficiency.



4. Participate in Groups and Get Feedback

After you’ve learned by following tutorials and you’ve done some experimentation on your own, it can be helpful to get feedback and constructive criticism from other designers. There are groups of graphic designers all over the place that can be excellent sources of feedback. PSDTUTS has its own Flickr group for this purpose and a number of other design blogs have their own groups as well. Additionally, there are hundreds of Flickr groups for designers that are not associated with a specific blog or website.

The PSDTUTS Flickr group is very active with over 11,000 items and 4,000 members. Groups like this are great places to share your work with other designers who are also interested in improving their own skills. You can get involved by providing feedback to others on their work, and you’ll likely get more of a response on your own work. If you’re interested in a place where you can comfortably share your experimental work to continue the learning process, try some Flickr groups.

Other Flickr groups worth checking out include Abduzeedo, Go Media, Fuel Your Creativity, My Ink Blog, and Design Shard.



5. Blog about Photoshop or Design

If you’re attempting to improve your abilities with Photoshop, blogging on the subject will help you to stay active in your pursuits and it will force you to keep learning. Working on the content for your blog will be an excellent educational experience. Not all blogs are run by experts on the subject, in fact most probably are not. Many blog readers enjoy following a blogger who is truly developing along the way, and many of your readers will be going through similar situations in their own learning.

Once your skills have developed to a certain point you may also want to look into the opportunities available to write for other design blogs. Many of the larger blogs pay writers for their work, and blogs of all sizes are open to free guest posts in exchange for a link back to your own blog. While writing for your own blog will allow you the freedom to work on developing any skills that you like, writing for others will push you in other ways. In most cases, if you’re being paid for your posts, it is going to have to be quality work in order to get published. This means that you’ll need to keep stretching yourself and learning new things in order to develop the content. It can be difficult to write for other blogs, but it’s a tremendous growth opportunity if you’re willing to put in the work.

PSDTUTS accepts unsolicited article/tutorial submissions, and a number of other sites are also actively looking for writers. Other websites and blogs that are looking for graphic design content include GoMediaZine, CreativePro, and SitePoint.



6. Subscribe to Online Galleries

Online galleries that display exceptional work by various artists are an excellent source of design inspiration. This inspiration will come in handy when you’re looking to experiment on your own and create impressive results. Galleries are great because you can quickly browse through a large amount of items, plus you can subscribe to get constant updates and you’ll never lack inspiration.

There are galleries for all different kinds of purposes. If your work in Photoshop is primarily related to web design, you may want to subscribe to a few web design or CSS galleries. Some of the top web design galleries include Best Web Gallery, CSS Mania, CSS Drive, and CSS Elite. If you’re focused on other types of design you may want to look for galleries that specialize in that particular aspect. Some good examples are Design Flavr, UCreative, FAVEUP, Logo Pond and Design Snips.

In addition to online galleries, social networking sites that allow members to post a portfolio can also be outstanding sources of inspiration. They can be a resource for posting your own work in addition to viewing the work of others. Top sites in this category include Behance, Carbonmade, and deviantART.



7. Find an Expert to Follow

Regardless of what field you’re in, following and learning from an expert can be incredibly beneficial, and graphic design is no different. If you hope to become a standout designer, why not find someone that you admire and pay close attention to their career and their work? Fortunately, being in a field that is often closely related to technology, it’s easy to find experts online and get exposure to their work, read their blog, and read interviews with them.

PSDTUTS frequently publishes informative interviews with accomplished designers. These interviews provide insight into their lives and their careers that may help you some way in your own work. If you already have someone in particular that you admire, subscribe to their blog if they have one, find them on social networking sites, keep and eye on their portfolio, and just generally keep tabs on their career.

If you don’t have anyone in mind at this point, pay attention to work that you like in Flickr groups that you visit, see what stands out to you at design galleries, or find a particular tutorial writer that has a style which you appreciate. In some cases you may be able to get in touch with this person through their site or through profiles on networking sites, or you may choose to just quietly watch and learn from a distance.



8. Read Design Magazines

One of the downfalls of being in a field that has so many resources available online is that it’s easy to forget about all of the great offline resources at your disposal. While browsing through designer portfolios and subscribing to online galleries are great sources of inspiration, you may be missing out by not reading any traditional print magazines.

In addition to the inspirational aspect, articles in design magazines will often be a little bit different than the type of content you’ll typically find on blogs. If you want a well-rounded educational experience, find a few design magazines and see what appeals to you. Of course, each magazine will have a slightly different focus or approach, so look around a little bit to find a good match for your interests.

Just a few months ago You the Designer published a list 10 Amazing Graphic Design Magazines over a two-part series (see parts one and two) of magazines that are worth a look.



9. Try to Replicate the Work of Others

One proven way to learn is to attempt to replicate the work of other designers. I’m not suggesting that you rip off other designers by selling this work or taking credit for it as your own (which unfortunately is all too common, especially online). What I am suggesting is that in your own experimental work that is meant just for learning purposes, take an exemplary piece from another designer and do your best to duplicate it. If it’s just used for your own educational purposes and not sold or re-distributed it is perfectly acceptable. Also, unless you change and personalize this design dramatically, do avoid placing it in your portfolio.

In my own effort to learn web design I used to start with a finished product from another designer and attempt to achieve the same layout or some other aspect of the design. This was a valuable learning experience that helped to see how I could accomplish things that worked in real world scenarios. The same thing can be done regardless of what kind of design you’re working on. For example, find a few album cover designs that you like and attempt to re-create them.

By doing this you’re working towards the goal of creating a design that already has proven to be successful as a finished product. In addition to hopefully learning some new techniques in Photoshop, you’ll also pick up some general principles of good design that can be carried over to any work that you do.



10. Participate in Design Competitions

Once you’ve become pretty comfortable with your own progress in learning Photoshop, you may want to challenge yourself and have some fun at the same time by entering a design competition. In most cases there will be some potential prizes and you’ll be motivated to push yourself towards your true potential. Plus, you’ll often be able to see the work of other designers in the competition, which can provide you with some inspiration, and can give you a way to gauge your own skills and progress.

While the goal of entering a contest may be to win something, you’ll still benefit just by participating. It will give you the opportunity to create something specific for the purpose of being judged by others. In some cases you may receive some valuable feedback and you may get to see where you stand in comparison with some other designers.

PSDTUTS has run several contests in the past, including the solving poverty button design contest, the AudioJungle wallpaper contest, and the Flickr group contest. Other blogs such as You the Designer have had design contests as well.



What’s Your Learning Strategy?

What do you do in effort to learn more about Photoshop and graphic design in general? If you’re an experienced designer, what approach helped you to get to where you are today, and what do you do to keep learning new things?

Subscribe to the PSDTUTS RSS Feed for the best Photoshop tuts and articles on the web.

]]> http://psd.tutsplus.com/articles/techniques/10-steps-to-improving-your-photoshop-skills/feed/ 125