Integrating Photoshop and Illustrator to Create Professional Imagery
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
NOTE
This article covers Photoshop 7 to CS and Illustrator 10 to CS. Earlier versions should also work.
Photoshop is the de facto standard for web site design, but since it can't do absolutely everything, Adobe has provided us with tools that can fill in its few shortcomings. One such tool is Illustrator, another industry staple, for creating vector graphics.
One thing Photoshop can't do is create cool vector mosaics from bitmap graphics, or change squares into circles. I'll show you how to do both of these things and tell you why you'll want to do it.
First I'll cover the why. You may have seen some slick-looking corporate graphics that consist of hundreds of individual ellipses that come together to create a shape or an image. Images like this look cool and will give a site a contemporary look and feel, while still remaining true to their corporate intent—a very important consideration if you're designing a corporate logo!
When I'm done showing you the techniques required to do something corporate, such as the map shown in Figure 1, I'll give you more ideas that will work for any site.
)
Figure
1 The finished map to be incorporated in a corporate logo.
Prep the Image
First, you need to find an image to work with. A search for "North America" on Google Images or Amazon's new a9.com should turn up lots of material. I prefer the pixelated (aliased) maps because they're easier to resize and fill. Just make sure the image is in Indexed Color mode when resizing it so there's no anti-aliasing of edge colors. I changed the one in Figure 2 to 200% of its original size.
)
Figure
2 The initial map image before editing in Photoshop.
Preparing the image in Photoshop involves filling the different countries with colors of your choice and getting rid of any black lines around their edges. You do this because the mosaic filter will create some odd-colored squares otherwise. As it stands, you'll still need to use the eyedropper in Illustrator to change some bordering colors to match the rest of the country's color.
In Figure 3, I chose an orange with the value of #F26521 and a gray of #C2C2C2. Corporations love orange! Well, not all of them—but orange, gray, and white look great together and look very "corporate."
The easiest way to handle color changes, along with using the aliased graphic trick, is to use the magic wand with a tolerance of 1 and then choose Select, Similar to include other areas to be filled with the same color. For example, in Figure 3, I did this with the main portion of the United States and Alaska, or Canada and all the islands to the north. You can use the same technique to select the black lines around the countries and fill them with a color that matches one of the connecting country's colors, making sure that you first use the Lasso tool to deselect areas you don't want filled.
As you can see in Figure 3, I also removed Greenland from the map. At first I tried to claim it on behalf of Canada, but that didn't go over too well. Finally, once you're happy with how the image looks, change the Canvas Size to a square format by adding to its width, its height, or both. Mine ended up being 840 by 840 pixels. Save the image and open it in Illustrator.
)
Figure
3 The altered map ready to be taken into Illustrator.