Posts Tagged ‘Photoshop’

Calligraphy with Illustrator

Monday, September 12th, 2011

Sometimes calligraphy brushes in Illustrator just don’t cut it. As much as you may try, a brush style in Illustrator just can’t mimic the flowing hand drawn style we crave. In the past, Illustrator was very limiting in creating flourish elements. To get shapes the way you want, you had to rely on your skill with the pen tool and the Bézier curve. With Illustrator CS5 in our hands, we now have the ability to manipulate line weight at different points on a line, making a job that would have been very time consuming, a breeze.

1. To mimic the hand drawn calligraphic style, I’d suggest starting on paper. Erasers are definitely your friends. Grab references of calligraphy styles you enjoy. Play with flourishes at the ends of words and with how words interact with eachother. Draw out your words. Don’t worry about the line weight at this stage, we’ll be adding this in the next steps.

2. Scan in your sketch. Bring it into Photoshop and clean up your drawing. This step makes it easier to trace in Illustrator.

3. Open your clean sketch in illustrator and starting tracing. Using the pen tool, trace over all of your lines. I’d suggest trying to keep the number of points to a minimum, but if your having trouble getting smooth lines, I’d try using the smooth tool.

4. Now we can get crazy with those curves. Press Shift (W) to begin using the width tool. Once you have this selected you can click on any point in your illustration to adjust the width of the line. Just click and drag away from the line to create a thicker stroke or toward the line for a thinner stroke. This will adjust the width of the entire line from that single point. To have more control over the whole stroke, use the direct select tool (white arrow) to select a point on your line. Then press Shift (W) and adjust the point. This will only effect the width of the line from that point until it reaches the next point on the line. This method is great for getting high-contrasting line weights on a single line. A great way to start is by scaling down the width of the line on each end-point of your type. This creates clean beginning and endpoints and helps the lines feel more brush-like.

5. With your reference images in hand, mimic the line weights you see. I’d suggest trying to keep all of your thick strokes a similar weight and thin strokes a similar weight. This way your type has a very consistent and cohesive feeling. Once you have all of the type in the style to your liking, try playing around with embellishments. Add extra flourishes or lines to enhance the design. To finish up my own design, I added a soft gradient halo around my text and a subtle feathered drop shadow to make the text stand out from the background.

Now get out there and start experimenting, you’ll be surprised at what you can make and how easy it can be to get fabulous looking designs!


Tutorial: Tilt Shift Photography

Friday, June 10th, 2011

I have an obsession with small things. Starting at a young age, I can remember building tiny cities and farms with my brother with wood blocks and small plastic figurine pigs. I continuously checked out the same book on making my own miniature doll furniture, and was way obsessed with decorating Barbie’s dream house with all of her miniature accessories. Even a bit more grown up, I still find myself in love with small things, from miniature brass figurines to tiny tiny lamps and, as most here know, dogs with short legs.

Tiny is just too cute, and so I love the emergence of Tilt Shift Photography. I can now make everything appear at a smaller scale. Tilt shift photography gives the appearance of a scaled model, with a shallow focus, high-contrast, and vibrant colors. Today, I’m sharing a fun way to create this look in Photoshop, so you too can start shrinking your world.

1. Select a Photo. Generally a model is seen from above, so make sure you’re choosing a shot from a high and wide angle, this will give you the best results. For this tutorial, I choose a photo taken out of my upstairs window of the street below.

2. Enter Quick Mask Mode. Open the image in Photoshop and enter Quick Mask Mode. You can do this by pressing Q on the keyboard, or select the Quick Mask icon at the bottom of your tools palette.

3. Draw a Gradient. Select the gradient from the menu by pressing G. Choose the reflected gradient. Draw a line where you want your main focus to be on the image. In this picture I choose the car to be the most in-focus element. If you look closely, I drew a line from the bottom of the car wheel to the top of the car. Keep using the gradient until you get the placement you’d like.

(more…)


Tutorial: Subtle Web Backgrounds Using Photoshop Texturizer

Wednesday, June 8th, 2011

Subtle web background textures are extremely popular in current web design. They can be used to give a site depth and and add richness in a way that isn’t too overwhelming. I’ve been really into using these subtle textures in my web designs and I’ve been on the hunt for how to create my own textures from scratch. Today I’m going to share one way to create these patterns for your own web designs.

In this tutorial I’ll show you how to create a repeatable pattern in Photoshop and then use Photoshop’s texturizer to make a unique subtle and repeatable web background (as seen on the left). The texturizer’s great, because it allows you to add texture to an image without altering the image below. If you’ve already got a repeatable texture, you can jump down to section B to get started with the Texturizer!

A. CREATE A REPEATABLE TEXTURE

1. Find a Photo. Start with finding a high-res pattern image. I choose to work with a great fabric texture found here, but you could easily use a different photo or create your own.

2. Convert Texture to Grayscale and Resize. Bring your texture into Photoshop and convert to Grayscale. To do this go to, Image > Mode > Grayscale. Resize your image as necessary. I scaled mine down to create a more subtle look. Go to Image > Image Size to adjust the scale of your pattern.

(more…)


Great Gift Ideas for Designers

Wednesday, December 15th, 2010

Now’s the time for that last minute online gift shopping. December 17th, known as free shipping day, is only two days away. Every year on this day, more than 1,000 participating merchants will offer free shipping with delivery by Christmas Eve in the continental United States. If you have waited untill now to get those gifts, the 17th is your day! To help you on your way, I’ve uncovered a handful of holiday gift ideas for the designer or artist in your life.


Gift Idea #1: Monogrammed Mugs
At $6.00 a piece, these mugs make great stocking stuffer. They are great for the typography buff and are a wonderful way to personalize your gift.

Gift Idea #2: Winter Calligraphy Dessert Plates
With swirling wintry themes, this set of 4 plates are sketched by an artist’s hand
and will deck out any designers table.

Gift Idea #3: Vintage Marquee Letters
With a plethora of options avalable on Etsy or Ebay, you’re sure to find that perfect word or letter to make a statement on their wall.

Gift Idea #4: Photoshop Magnet Kit
These Photoshop-themed magnets are the best way to stick your photos to the fridge or to any other metal surface.

Gift Idea #5: Brass Vintage Letterpress Necklace
These were originally used on hand-cranked printing presses and are recycled into beautifully crafted jewelry.

Gift Idea #6: Number Jumble Artwork
If your special someone is a fan of type, this number jumble artwork will get their juices flowing!

Gift Idea #7: Color Etched Letters
A, B, C your way over to these ornate etched and painted metal letters, perfect for proudly displaying or any shelf or tabletop.

Gift Idea #8: Paint Brush Note Pad
Keep your favorite artist on track with this fun and creative notepad.

Gift Idea #9: Camera Pencil Sharpener
This camera-shaped hand-crank pencil sharpener has a hidden drawer for shavings. Great for any photography buff.


Hugs and Kitties for everyone!

Thursday, April 8th, 2010

This week we celebrated Greg’s birthday. And in preparation, as has become tradition, the rest of the design team searched the internet for just the right image to Photoshop Greg’s face onto for his birthday card from the Zoomers. All week we had been threatening Greg with a “Kittens and Hugs” party instead of the “Pizza and Pints” party he was hoping for. So, you can imagine how excited we were to find this image to “Gregify”. Of course we had to add some additional kittens, just for good measure. As we put together the card we couldn’t help but browse the images from the last few years. We certainly got a laugh out of them, so I thought I would share. Enjoy!


Like magic!

Thursday, March 25th, 2010

Adobe just announced it will launch Creative Suite 5 on April 12, 2010. I’ve been checking out some of the new features for Photoshop that Adobe has released via sneak peek videos. I’m definitely excited to check out the new content aware fills, the videos posted by Adobe make the tool look like magic. I’ll be interested to see how it works in the real world. The new improved warp tool and the changes to the selection tool for better edge detection are really exciting as well. I also noticed what seems like a minor change to the preferences in one of the Just Do It Days videos that I’m really looking forward to. It allows you to check a box that will set the “save as” default location as the location where the file is currently saved. I have always wondered why this wasn’t an option.

Here are some videos to check out the new features:

Content-Aware Fill Sneak Peek

Content-Aware Spot Healing Sneak Peek

Selections and Masking Sneak Peek

Painting Sneak Peek

Painting and Warp Tool Sneak Peek

Just Do It Sneak Peek 1

Just Do It Sneak Peek 2


Going Vintage

Wednesday, October 28th, 2009

Lately, I’ve been inspired by vintage photography. I love its naturally faded colors, vignettes, and soothing tones. I’ve been on the lookout for Photoshop tutorials that will add bit of that historical and airy elegance to my own projects. On my search I found two tutorials, one focusing on a vintage feel, and another recreating a Lomographic style that gives a blurry and colorful look that you often find in the original analog photography. Below are two examples using both tutorial techniques, one features a muted pink tone, while the other focuses on a more contrasting, blurred effect. If you would like to share any additional ways to achieve a vintage style, I’d love to hear it.

Vintage_Tutorial


Totally Kuler

Wednesday, October 14th, 2009

Today I was introduced to Kuler, a web application by Adobe that lets you generate custom color themes. Kuler gives you the opportunity to experiment with color variations and also browse themes from other Kuler members. This is a great tool to gain inspiration for colors and assist in creating cohesive color stories. What I loved is the ability to import your own photos and pull color pallets directly from the images. All you need to do is create an account, upload a photo, and Kuler lets you “select a mood” (bright, colorful, muted, deep, dark), offering you a variety of different color pallets taken from the same photo. After you have chosen a combo that you are happy with, you can save it for later access, reference the color values for use in projects, or download a color pallet that is compatible with other adobe programs. The downloadable color pallet is really one of the site’s key features, because it lets you quickly start using the colors in your designs rather then wasting time pulling color values from Photoshop. Below is a custom pallet we generated from one of Tweedle C’s Hawaiian vacation photos and a basic design incorporating the colors demonstrating how very simple it can be to turn inspiration into artwork.

Kuler

Kuler_Example


It’s Smoking

Wednesday, October 7th, 2009

I traveled to the coast last week for a nice relaxing vacation. Being born and raised an Oregonian, I’ve spent many, many of my vacations at the beach. I like to go there because generally, I’ve seen what there is to see and done what there is to do, so I’m more inclined to take walks on the beach and for the most part snuggle inside and enjoy the changing weather (Don’t worry, I didn’t get swept away by the potential Tsunami). I also love, love, love to watch TV shows that I never see on a regular basis. I checked out many episodes of Cash Cab and the Price is Right, and even a little Dog Whisperer (I don’t even own a dog, but that show rocks). Meanwhile, I missed my DVR and longed to fast forward through commercials.

I can’t say that that watching the commercials was a complete bust, because I did catch on to a cool new trend: smoke art. In a couple of the ads I spotted the use of smoke interacting with a type treatment or image. The effect used black smoke on a white background, creating a high-contrast, dramatic effect that was both eerie and beautiful. Upon further research, I also found a variety of gorgeous smoke images using brilliant colors.

I loved the effect of the smoke in the TV commercials, and it got me interested in finding out how I can create a similar look in my own designs. I found a few tutorials on how to create my own smoke effect in Photoshop and Illustrator, as well as some helpful brush sets, but I think the most dynamic images are when smoke has been photographed and then incorporated into a layout. I’m very curious to try a few of these techniques, and can’t wait to see more from this emerging trend.

Smoke


Vector Dogs

Tuesday, September 15th, 2009

side-by-side

Here is a cool technique for turning a photo into a posterized vector file using Photoshop CS3 and Illustrator CS3. (Dont worry, it’s relatively easy.)

(more…)