Today, as it’s Typography Friday here on Sitepoint, I want to follow it up with a pile of free fonts from some of the best retro font makers out there. There are a number of excellent font foundries providing retro fonts and often they’ll provide free typefaces to let you get a chance to see how good the quality is. I’ve picked out a few that you might find useful for your design work.

I was lucky enough to attend a talk by Rich from House Industries a couple of weeks ago and their work is amazing. The amount of care and research they put into their typefaces is incredible. To get their free fonts you must sign up for their catalog, which is also free.

Fontoville have some really nice work. Their fonts are distributed through Font Bros and that’s where you can get your mitts on some cool free typefaces like the one’s below. Font Bros h

Another particular favourite is Font Diner. Font Diner was launched in 1996 by typographer Stuart Sandler. He has created more than 400 typefaces and is heavily inspired by 1950’s culture. You can download over 30 of their fonts for free here, including the samples you can see below.

Girls who wear glasses have quite a few free fonts available for download and they also sell retro clipart. The site seems to be a little bit out of date but the fonts are good.

And finally, the Hitchcock font based on the iconic work of Saul Bass.

While it’s great to get fonts like this for free, it’s also nice to buy some fonts occasionally so these hard working typographers can pay the mortgage.

Do you like these fonts? Have you come across other font foundries producing cool retro work?

Related posts:

1. Gone Retro: 10 Gorgeous Websites With A Touch Of Yesteryear What makes a web site "retro"? Jennifer takes a look...
2. Web Fonts: Do Something Positive! Kevin challenges the traditional angry rant that is typical of...
3. Serif Fonts Vs. Sans Serif Fonts: A Working Case Study Sans serif fonts are the norm for websites, but are...

Retro styles are popular in just about every aspect of design. I love looking at them to see how the designer puts together a look and feel that conveys a long gone era. Take a look at fashion, advertising, print and even cars. Designers revisit the past to plunder the good, the bad and the sometimes downright ugly elements to use in new design. Web designers are no different of course and there are many fabulous web sites out there using retro styles.

So what makes a site retro?
Sites falling into the retro category aren’t necessarily representing any one particular period. One dictionary definition of retro is “a fashion reminiscent of the past” so that leaves it wide open to interpretation. On the web retro web sites can be distinguished by the type of illustration or photographic images used, the typefaces and the colour palettes.

Photography and illustration

For many retro sites, the illustration used has a major influence on the overall look and feel. Take a look at the CSS Tinderbox website (image farther down the page) which uses distinct Soviet era style drawings to achieve its look. The site is also dirtied up to make it look aged. Likewise the photography on the Ernest Hemmingway site is mostly of the younger Hemmingway. The photographs look yellowed and give a feeling of another age.

Typography
As is the case in both web and print design, the choice of typography is a huge factor in conveying a look and feel. For some sites the retro typography in the logo and headings There are a number of specialist font foundries who specialise in retro typography. I love Letterhead (see their website below), Font Diner and Fontoville for their cool typefaces.

Color

Many of the retro style sites have muted colours with a bit of dirt or grunge thrown in to evoke age. The colours tend to be earthy hinting that the colours may have been more vibrant in the past, but now are old. In the most successful retro designs, the appropriate color palette works in conjunction with the other elements to give the feel of earlier times.

So without further ado, here are ten websites displaying a unique retro look. I’ve chosen these because I think they represent retro design from top to bottom. There are no sites here which just have a retro logo but nothing else linking them to another era. They are fairly consistent throughout.

World Domination Design Group employ clever use of old style video, voice-overs and 1940’s upbeat tunes.

The CSS Tinderbox does a nice job with Soviet style graphics and typefaces.

Ernest Hemmingway Collection uses old photographs, paper objects and muted worn paper colours to convey the feeling of a certain era.

Detectiv Nali shows an old leather case with aged illustrations, photographs and typographic ornaments depicting the time of Arthur Conan Doyle. Sherlock Holmes appears to have been a major influence in this design.

Letterhead Fonts have recently redesigned their site to showcase some of their beautiful typefaces. The new design has an art deco feel.

RobotMania has been on the web for years and won a lot of awards when it came out. It has a very cool retro vibe about it.

Selling a dream. The Edgewater Cottage Community has a 1950’s feel for selling a modern residential area.

Rejected Robot is the portfolio site of William Tamplin and has an endearing feel about its toy robot box design.

Prospect Denim by Media Boom (itself a retro site) is also an award winner and has fabulous illustration and flash work.

And finally, the Big Fat Institute have updated their site recently, but this is a link to their old site which was a great example of brilliant retro design using video and typography to create an authentic looking 50’s site.

So there you have it. Not a style that’s appropriate for every site, but done well it can be very effective.

What do you think of these sites? What other good retro web sites have you come across?

Related posts:

1. 16 High Quality Retro And Vintage Fonts Following on from yesterday's post on retro web designs, Jennifer...
2. Elements Of Design: Texture Continuing the series on Design Elements, Jennifer looks at how...
3. Typography: Concordant, Contrasting & Conflicting! Jennifer looks at how the relationship between typefaces can improve...

In a typical web layout, a designer needs to place a logo, text, photographs or illustration. By making a conscious effort to work on the relationship between these elements to produce an eye catching design.

Balance in design is very much like balance in life. It tends to be a good thing. An often used example of real life balance is the see-saw (which I believe is also called the teeter-totter in distant lands). A see-saw is not much fun when only one person sits on it. Balance is achieved when two people of equal weight sit on each side. Balance can also be achieved when one heavier person sits on one side and two lighter people site on the other side. And balance can be achieved if a heavier person slides closer to the center of see saw, while a lighter person sits on the end of the other side.

As humans we’re balanced physically. We have an arm and a leg on each side of our spine and head that balances top center of that spine. We’re able to stand and move despite being different sizes and weights. In design we try to achieve a balance between elements because it is pleasing on the eye. But balance isn’t always achieved through symmetry. Take a look at the boxes below.

The white line in box 1 and 2 is symmetrically balanced while in boxes 3 and 4 the line is asymmetrically balanced.

Symmetry

Symmetrical balance is mirror image balance. If you draw a line through the centre of the page, the elements on one side of the line are mirrored on the other side. We can achieve it by placing elements fairly evenly in the design.

Symmetry in nature

A typical example of this occurs on the web, where blocks of text mirror each other in buckets or columns. Symmetry can also be achieved using colors and typography.

Mobile Web Book – on this web site, the mobile phone image divides the page in two, with the blocks of text on either side balancing each other out.

On the poster for the movie The Day I Became A Woman, the block of large white text in the top right corner is mirrored in the bottom left corner both in terms of colour and shape.

The very colorful Florida Flourish site could be almost be cut in half down the center. It has a very strong sense of symmetrical balance.

The Havoc poster below is balanced left and right using similar shapes (and body parts). The red text above and below the title is balanced in color and size above and below the title.

Asymmetry

Asymmetrically balanced layouts have elements that don’t mirror each other across a centerline. These layouts can be more difficult to design but can be appealing to viewers. We can create an asymmetrically balanced layout by placing several small items on one side, and one large item on the other side. If you have one dark item on one side, you may place several light colored items on the other side. An asymmetrical balanced design can create tension, drawing the viewer in.

MattWeb has a large graphic filling the left side of the homepage. A sense of asymmetrical balance is achieved here using matching colors and a sans-serif font which is in keeping with the spirals in the graphic.

Dann Whitaker’s site has several elements that don’t reflect each other symmetrically, but do balance each other in terms of color, texture and content.

Off-Balance

Ok, so it could be boring if ALL of your design work involved balance. If you know the rules, then you can break them of course, and lack of balance can convey action and motion. It can make people feel a little uneasy or even disturbed. An off-balance design can make people think. Just don’t let it happen by accident.

Poster by Barbara Kruger

Next week, we’ll take a look at Proximity. In the meantime have you come across any websites showing strong symmetrical or asymmetrical balance?

Related posts:

1. New Series: Principles Of Design Jennifer gives an overview of a new series in which...
2. Balancing Act: Is Work-Personal Life Balance Achievable? Stop striving for the unachievable perfect balance in your life!...
3. Elements Of Design: The Line In our series on Design Elements, Jennifer takes a look...

1. Style for mobile

Congratulations — you’ve decided to embrace mobile, one of the fastest growing segments on the Web. The first thing you’ll notice is how diverse the mobile ecosystem is. Browsers, screen sizes, connection speeds — everything is different. The Web community enjoyed a brief period of iPhone domination, when addressing one browser/screen resolution seemed sufficient. But now that Android devices (which come with a variety of screen sizes) are quickly gaining popularity, it’s important to once again think of the bigger picture.

When styling your mobile site, stick to relative units — percentages, ems and so forth. There is no way to predict what mobile devices your users are using today or might be using tomorrow. Relative units can go a long way when it comes to making a lasting, quality mobile design. It’s also important to maintain visual consistency with the desktop site — this will make your brand stronger and reassure your mobile visitors that they’re in good hands. You’ll also want to minimize scrolling and page transitions in order to reduce time spent looking for content.

2. Resize images

Small screens call for small images. There’s just no reason to push desktop-sized, heavy image assets to mobile users that don’t need them. A good strategy involves resizing the images on the web server — this way they take up to 90% less time to load. CSS-based resizing can also work, although it carries performance and bandwidth penalties.

If you can, make your optimized images link to the full, original image hosted elsewhere. Your mobile visitors will appreciate it in case they want to zoom in to get more detail.

3. Automatically detect mobile devices

Typing is a pain on even the best mobile devices, and many users avoid it when browsing. Combined with the fact that communicating to your users that you actually offer a separate mobile version of your site, and getting mobile users to visit the mobile version of your site is actually quite difficult.

Thankfully, a variety of methods for automatic mobile device detection have become recently available. The most reliable approach, in our experience, is User Agent detection, where a server makes a decision on what to serve based on how an incoming browser describes its capabilities. Other implementations feature real-time JavaScript requests to databases like DeviceAtlas or WURFL that also supply information on what a device can do. A mobile version is not complete until it’s automatically triggered for every mobile user!

4. Rethink navigation

Your website might have a couple of dozen footer, header and sidebar links — but do they matter to your mobile visitors? Mobile web surfing is known for its high bounce rates (users come to look at just one page), so focus on a few key areas of the web site and acknowledge your visitors’ short attention spans. Don’t think twice about eliminating links to destinations that don’t have a high mobile priority.

At the same time, consider adding or prioritizing mobile-specific items. That tiny “Contact” link hidden in the footer of your full site? It could be a great top-line header item for the mobile version, simply because many users will come looking for a phone number or your office address. Another great item to have in the mobile header is Search.

5. Provide a clear path to the full site

As a web designer, you are responsible for making content decisions for the mobile visitor. However, occasionally a piece of information that a user is looking for is not included in the mobile version. One very easy solution is to put a footer link to your “Full Site” on every page. Make sure that this link takes the user to the full version of the exact page that they’re currently browsing.

Once the transition to the full site is complete, it’s considered good practice to disable mobile redirection for that user. Some sites do this permanently (e.g. Digg Mobile) while others (CNN) set a timeout period of 1-2 hours with a special cookie. Your call!

6. Don’t break links

In the early days of the mobile web, it was common to see standalone mobile web sites that were structured completely different from their traditional, desktop counterparts. Today, mobile traffic is driven to a large extent by Google searches, links in Twitter streams and email. Most of those links point to desktop web sites, which is why automatic device detection is so crucial.

However, after the mobile user has been detected and sent to m.yoursite.com, it is important to show them the exact content that they expect. For instance, if a www.yoursite.com/category/article/ was the original link, present the visitor with the mobile-optimized m.yoursite.com/category/article/, not just the m.yoursite.com homepage. This might sound easy, but a significant number of web publishers don’t do this right, and end up surprising and frustrating their audience.

7. Measure the mobile audience

Mobile devices are quickly becoming an integral part of the Web, rather than an isolated market niche. Plenty of mobile analytics and advertising services have come and gone, but Google’s recent AdMob acquisition and a Mobile Analytics API are going to further help consolidate mobile services under one roof.

Measuring the mobile audience is important for several reasons. First, by knowing what devices are popular with your users, it is possible to make informed design decisions. For example, if your mobile audience is 99% iPhone, you shouldn’t worry too much about BlackBerry compatibility. Another aspect is traffic and lead generation. After looking at the mobile stats, you’ll likely see that mobile and desktop users prefer different content. Knowing all this, it is possible to create an outstanding mobile presence and successfully monetize it.

Thanks for reading these mobile tips, and best of luck with your mobile sites!

Related posts:

1. 7 Tips to Improve Your Web Site Copy If you haven't revisited your web site copy in a...
2. Considering A Site Redesign? 5 Tips To Get You Focused Does your site need a lick of paint or is...
3. Mobile SEO Myths Exposed Mobile SEO is dead, overstressing about “mobile design” is pointless,...

Old Public library logo (left) and new.

The Redesign began in 2008 with the designers using photographs and sketches of lion statues on the steps of the library building. The lions outside the building are known as “Fortitude” and “Patience”. Influences are reported to have included Japanese woodcuts, stained glass and Art Noveau. The vector style artwork has been designed to be versatile enough to use in many formats and colors, as well as reproducing well at small sizes.

The new logo comes, as is often the case with a logo redesign, with a new mission for the library. They wanted to convey a more digital-friendly and modern feeling.

As a Leo and owner of a company with Lion in the title I have to admit I’m particularly drawn to this. Although I’m still debating with myself about whether I like this logo. I like the simplicity and the clean lines but is it a bit too cartoony for such a important keeper of knowledge?  I’m not too keen on the placement of the text although I do  like the sans-serif font. The font is called Kievit.

Some people are remarking that it looks like the MGM logo. I think they are referring to a very short lived MGM logo and not the well known classic. The blue and gold MGM logo was used in 1968 on a small number of films and the recording division of the company but was later replaced by the roaring lion we know and love.

Here’s an interesting video from the New York Public library outlining how the logo came about.

Check out other articles about the logo on Brand New and the New York Times web sites, both showing initial sketches and ideas for the logo.

So what do you think of the new logo? Is it an improvement or just more meddling with a classic?

Related posts:

1. New York Times Releases Another API The New York Times might be running on fumes, but...
2. Amazon Adds New Service: Public Data Sets For researchers, finding and utilizing large public data sets has...
3. How to Write a Cookie-less Session Library for JavaScript Craig provides the code for a stand-alone JavaScript session variable...

Here’s four more tips to help you speed up or refine your crops as you go.

1. Straighten Images With The Crop Tool

There are lots of ways to straighten images crooked images in Photoshop, including this method using the Crop Tool. Here’s how. In the toolbox, select the Crop tool (). Now on your crooked image, start in the top right corner and draw a marquee around the image using the crop tool. It doesn’t matter if you cut off some of the edges as you’ll adjust the marquee to fit next. When you let go of the mouse button, you’ll see the cropping shield and it allows you to see which parts of the image will be deleted when you apply the crop.

On the tool options bar, make sure that the Perspective check box is not selected. In the image window, move the pointer outside the crop marquee so that it appears as a curved double arrow (). Drag clockwise to rotate the marquee until it matches the angle of the picture.

Place the pointer inside the crop marquee, and drag the marquee until it contains all the parts of the picture you want shown. Use the and corner handles to adjust the size of the marquee.

Press Enter (Windows) or Return (Mac OS). Voila! The image is now cropped, and the cropped image now fills the image window, straightened, sized, and cropped according to your specifications.

2. Stop The Crop From Snapping To The Edge Of Your Document

Sometimes when you’re using the Crop tool it can be really useful to have the cropping border snap on to the edges of your image. This happens with the Marquee selections too. There are of course, other times when it’s a pain to have the crop sticking like glue to the edges. If you don’t want any snapping to happen, press Shirt + Ctrl+; (win) or Shift+Cmd+; (mac). This turns off all snapping such as snap to the document boundary, snap to rulers and snap to guides. If you only want to turn off Crop or Marquee snapping to the edges of your document, choose View > Snap To and choose Document Bounds.

3. Swap Crop Dimensions

When you choose the Crop tool, the tool Options bar displays a number of options, the first two being the width and height of the crop. In between those fields is a tiny little button that you’d hardly notice and it’s a bit time saver. Below you can see I set up a crop of exactly 6cm x 10cm. If I hit that little button, I will now get a crop of 10cm x 6cm. Saves on all that inconvenient typing.

4. Non-square cropping

You don’t have to draw out a square to crop an image. You can make a selection around an object or in an image using any of the selection tools. Here I’ve drawn really loosely around the buildings with the lasso.

Choose Image > Crop and Photoshop will crop the image as tightly as it can.

Do you have any other speedy Crop tips you’d like to share?

Related posts:

1. Speed Up Your Workflow With The Crop and Straighten Command In Photoshop Photoshop has many useful automated commands to help speed up...
2. Three Time Saving Photoshop Tips Jennifer shows you three tips to speed up your work...
3. Selections In Photoshop, Part 4: Tips & Tricks In the final part of our series on Selections in...

1. Concord

A design is considered to be concordant when you use only one typeface, and when the other elements of your page do not have much variety in weight, size and style. This type of design tends to sedate and evoke a fairly calm feeling. A concordant relationship in typography can be a good one depending on the aim of your design. If you want something high impact and in your face, this is not it. However, if you want a clean design with little fuss or clutter, you can achieve that by sticking with the one typeface and keeping other design elements simple.

In the example below I’m using one font, Times New Roman. Within the Times New Roman typeface there are several styles, namely Regular (Roman), Italic, Bold and Bold Italic. The heading is larger and bolder than the body text, the first letter is larger and there is some italic type in the heading and near the bottom of the body text in the sentence “There is nothing surprising in this”. Overall the design is subdued, but it is also neat. You really can’t go too far wrong by sticking to just one typeface in your designs.

If you feel restricted by just one typeface, remember that many professional fonts offer a number of styles within the one typeface. For example Futura offers 19 different styles within the one typeface.

2. Conflict

Conflict occurs when you use two typefaces that are too similar. It might sound like that’s not a problem, but it actually disturbs the reader when a change of font occurs and the second font is very similar to the first one. Take a look at the example from before. This time I’ve put the heading in Georgia. Both Georgia and Times New Roman are serif fonts and while they do look a little bit different from each other, they still look too similar. The heading here is not too much of a problem. The bigger problem lies in the sentence near the bottom, “There is nothing surprising in this”. The font has changed, but the reader might wonder why. Is it a mistake? In the previous example of a concordant relationship, I made this sentence stand out by using italics. Very simple.

So the point here is, avoid conflict.

3. Contrast

We can achieve much more appealing and attractive designs using contrasting typefaces. By using typefaces and design elements that are clearly very different from each other, simple designs become much more eye-catching. One of the easiest ways to get contrast on a web site for example, is to use a very large serif font as a heading, with small body text set in a sans serif font. (Note this is just one example, you can play around with all kinds of different font categories and mix them up). Again a good rule of thumb here is to use no more than two typefaces unless you are trying to deliberately make things look messy on your site or page. Looking at our Moby Dick example again, this time I’ve set a large size 40 pt, bold, italic heading in Georgia, and the body text is set in Arial. The sentence near the bottom also stands out clearly and doesn’t look like it was a typesetting error.  It looks like the font has changed for a reason.

RikCat Industries is a nice example of the use of contrasting type on the web.

To sum up, concordant typography is good, but sometimes a little dull. Conflicting typefaces are bad. Contrasting typefaces are very good and eye-catching. I hope this helps you a little bit when it comes to choosing your fonts.

Related posts:

1. The Old Style Typeface Jennifer continues her series on font categories. Today, she looks...
2. Focus On Typography, Part 4: Space Let your text breathe by putting some space around it,...
3. The Sans Serif Typeface Continuing our ongoing series on Typefaces, Jennifer takes a look...

Getty have now launched a formal Call For Artists. The difference is that Flickr members can upload 10 images to a dedicated Call For Artists group, rather than waiting for the Getty Images editors to get in contact. When your 10 images are uploaded they will be assessed for suitability, which basically means “will they sell on the Getty Images web site?”

The submission guidelines are

• You can upload ten images
• Files must be at least three megapixels in size
• You must be able to provide model or property releases where appropriate
• Photos cannot be licensed to any other must not be licensed to any other users or through any other agency or distributor
• You must be the creator or the copyright owner of the image

If any or all of the uploaded images are selected, Getty Images will invite you by Flickrmail to enroll. There are two types of license available in The Flickr Collection on Getty Images:

1. Rights-managed (RM) – Rights-managed works are licenses on a use-by-use basis. Price of the license takes size, placement, duration of use and geographic distribution into account.

2. Royalty-free (RF) – Royalty-free images are licensed at set prices based upon the file-size the customer purchases. The end-use is not specified.

Depending on which side of the fence you’re sitting on this could be a fantastic opportunity to get more attention for your photography or illustrations and to earn a bit of money from them. Prices from images sold range from $5 up to a few hundred dollars depending on how it will be used, so if you’re lucky enough to have an image selected and sold it is certainly financially more worthwhile than selling through any of the micro stock libraries.

For more details visit the Getty Images Call for Artists group on Flickr.

Are you a Flickr user? Will you be responding to the Call For Artists?

Related posts:

1. Flickr Stock – The Way Stock Photos Should Have Been Did Flickr miss out on a goldmine opportunity by reportedly...
2. Tweet Your Flickr Pics with Flex Andrew Muller's Flex-based Twitter app is really taking shape. In...
3. Flickroom: Easy & Stylish Way To Work With Flickr Jennifer gives an overview of Flickroom, a handy AIR app...

Elements and Principles

In the past we’ve looked at elements of design, namely Type, Line, Shape, Texture. Consider these as the building blocks for your design. The principles that we’ll look at over the next few weeks are what makes the structure strong and holds it together. The five principles that can help to build a strong design and make it stand out are:

• Balance
  To create a clean, balanced look, every element should have a visual connection with another element on the page. Don’t just fill your page with stuff willy nilly (official design term). Nothing should be placed on the page arbitrarily.
• Proximity
  When elements that are related to each other are placed close together, they become one visual unit, reducing clutter and giving a clear structure. Organizing information into appropriate groups is one of the quickest and easiest ways to improve your designs.
• Contrast
  If everything on the page looks the same, you’re going to have a pretty boring design. By bringing contrast into the design, your page will instantly become more attractive. Contrast can be applied to shapes, colors, type and lines. For good contrast, make the elements very different.
• Value
  Value can be described simply as the relative lightness or darkness of an object. Like contrast, value can add depth and dimension to your designs.
• Color
  Color and value are closely related. Color has incredible power to create a mood and change the intent of a design. Color choices should be made carefully to ensure the success of any design.

Next week we’ll start by taking a look at balance, how it can improve your designs and some examples of designs that make great use of it.

Related posts:

1. The Primary Design Elements: A New Series In the first of a five-part series on Design Elements,...
2. Principles Of Good Design: Balance Jennifer describes how balance is important to achieve attractive results...
3. Sexy Web Design Is Back In Stock Our smash hit new book Sexy Web Design may have...

The Clone Stamp tool samples pixels from one area of an image and copies them to another part of the image. You are literally using a paint brush to paint pixels from part of an image onto another par. You can use any brush tip or shape with the Clone Stamp tool, allowing you to control very precisely the area that you are cloning to and from. You can also sample from one image and apply the clone in another image, as long as both images are in the same color mode.

In this simple example, I’m going to remove a butterfly from a tar macadam background, but the concept is the same with any image you choose.

1. Open up your image in Photoshop.

2. Select the Clone Stamp tool ().

3. On the tool options bar, open the Brush pop-up palette and select a medium-sized brush with a medium soft edge. For this example, I set the brush diameter to 200 pixels and the hardness to 50%. It’s a good idea to use a soft edge brush, otherwise you will see a very hard line where the cloning takes place.

4. Then, make sure that the Aligned option is selected.

Now you need to set up your sample point in the area in the area you want to duplicate and clone to another area. When you select Aligned in the options bar, it means you will reuse the most current sampling point no matter how often you stop and resume painting. When Aligned is deselected, you’ll reuse the same sampled pixels every time you paint.

5. Move the Clone Stamp tool pointer to the dark area on the left side of the butterfly. Hold down Alt (Windows) or Option (Mac) and the pointer appears as target crosshairs. Click once to set that point as your sampling point. Release the Alt or Option key.

6. Click and drag the Clone Stamp tool over a small area of the butterfly’s wing. As you drag the wing will start to disappear as it is replaced with the pixels you’re sampling from another part of the image. The crosshairs that appear to the right of the Clone Stamp tool indicate the source area of the image that you are replicating as you drag.

7. Release the mouse button and move the pointer to another part of the butterfly wing. The crosshairs maintain the same spatial relationship to the Clone Stamp tool pointer that they had when you made the first stroke. This is because you set the Aligned option when you were setting up your brush.

8. You can reset your sample area anytime by holding down the Alt (Windows) or Option (Mac) key and clicking once. You will need to do this several times to completely remove the butterfly, and don’t forget to resize your brush as you go. Keep cloning until you have removed the side of the butterfly on the dark side of the tar macadam.

9. Reset your sample point and work on the white side until you have cloned “out” the other side of the butterfly. To finish the area where the butterfly sat, take samples above and below.

And that’s it. Don’t be afraid to keep resampling as you work through your cloning. If you do a lot of cloning, you’ll find using the shortcuts become second nature very quickly.

Is the Clone Stamp Tool an important part of your workflow?

Related posts:

1. How To Use The Background Eraser Tool In Photoshop The Photoshop Background Eraser tool doesn’t make a selection, but...
2. Easy Retouching With The Spot Healing Brush In Photoshop Jennifer shows you how to quickly retouch blemishes on an...
3. How To Quickly & Easily Remove A Background In Photoshop Jennifer takes a look and the often ignored, but very...