Design Instruct Week: Prizes on Twitter Every Day

* Twitter giveaways are now finished! *

How It Works

Each day between March 1 through March 7, 2010, we’ll be giving away different prizes on Twitter. We’ll update this page every day this week with details on how to enter for a chance to win.

Follow @designinstruct to find out if you’ve won.

To enter, click on the “Click to Tweet” button of that day’s giveaway, which will take you to Twitter and automatically fill out the message that you need tweet. Just post the message on Twitter, and you’ll be entered.

Please only tweet once per giveaway. There are seven giveaways so you have seven chances to win different prizes this week.

Winners will be randomly selected and announced on Twitter every day. We’ll give winners instructions on how to claim their prize through Twitter’s direct message (DM) system.

Day 7: MailChimp 100,000 Email Credits

Starts: March 7, 2010 – 7:30AM EST. Ends: March 8, 2010 – 7:30AM EST

MailChimp is an email marketing service that helps you manage and build your email list, design beautiful email templates and track your performance. They’re giving away a total of 200,000 email credits (a $1,000 value). Two winners will receive 100,000 email credits each. Read more about the credits on their Pricing Plans page.

If you haven’t already, please sign up for a MailChimp account so that we can credit you right away when you’ve won (it only takes a few seconds).

Don’t forget to follow @designinstruct to find out if you’ve won.

Day 6: InMotion Hosting Free Web Hosting for 2 Years

Starts: March 6, 2010 – 7:30AM EST. Ends: March 7, 2010 – 7:30AM EST

InMotion Hosting is giving away 3 of their 2-year Power Plan packages. InMotion Hosting is a leading web hosting provider with over 100,000 domains hosted. Their business class hosting packages come with 24×7 U.S. based technical support by phone, chat or email. All of their hosting plans come with a full cPanel license pre-installed, a free domain name or transfer, and unlimited transfer and bandwidth.

The Power Plan offers customers the ability to host 6 sites on one account, is ecommerce ready and comes with fast and reliable email.

Giveaway finished

Day 5: Fanurio Software Licenses

Starts: March 5, 2010 – 7:30AM EST. Ends: March 6, 2010 – 7:30AM EST

Fanurio is a time tracking and billing software application that’s highly appreciated by freelancers for its intuitive interface, flexible timer and ability to produce detailed invoices. Whether you need to round time, use multiple currencies or create invoices with your own layout, Fanurio has the right tools to help you get paid. Fanurio is giving away 10 licenses for its software (valued at $59 each). The software is available for Mac, Windows, and Linux.

You can download and try Fanurio for free.

Fanurio

Day 4: Iconshock Entire Stock Icons Collection (and their Source Files)

Starts: March 4, 2010 – 7:30AM EST. Ends: March 5, 2010 – 7:30AM EST

Iconshock, a leading creator of top-notch, professional stock icons for web and software applications, is giving away three subscriptions to their entire stock collection (valued at $429 each). They come with their vector source files and in different sizes. You’ll have enough icons to (literally) last you a lifetime.

See the information about Iconshock’s entire collection.

Day 3: FreshBooks 1-Year Shuttle Bus Subscriptions

Starts: March 3, 2010 – 7:30AM EST. Ends: March 4, 2010 – 7:30AM EST

FreshBooks is an easy-to-use online invoicing service that saves you time, gets you paid faster and makes you look Fortune 500 professional. From estimates and expenses to time tracking and invoicing, FreshBooks makes everything quick and simple — letting you focus on your work, not your paperwork. Customize the service with your own logo and colors, send invoices by email or ground mail, accept payments with PayPal, Authorize.net and more. Freshbooks going to award three winners with a year’s Shuttle Bus subscription to their web application, worth $228 each. You can learn more about the software by taking the nice tour.

You should also sign up for a free account, it literally takes seconds to get up and running.

Day 2: Inkd 3-Month Subscription and Full Color Business Card Prints

Starts: March 2, 2010 – 7:30AM EST. Ends: March 3, 2010 – 7:30AM EST

Inkd, the world’s first online marketplace for cutting edge print designs, is handing out a 3-month all access template subscription where two winners will enjoy premium access to their entire graphic design template library—over a thousand templates full of graphic elements, photos, and illustrations—ready to edit and print, with new designs added every day. Two winners will get 1,000 full color 2-sided business card prints. You can pick one of their stylish Business Card Templates, or provide any design of your own and get the business cards to your door in a week.

Inkd

Day 1: Campaign Monitor Apple iPad and $50 Email Credits

Starts: March 1, 2010 – 7:00AM EST. Ends: March 2, 2010 – 7:00AM EST.

Campaign Monitor, a web-based email marketing software application for designers and their clients, has offered an Apple iPad (16GB Wi-Fi, valued at $499) to one winner—it will be shipped to the winner when the product is available, late March 2010. Four winners will get $50 dollars in Campaign Monitor email credits (see details here).

If you haven’t already, you should try out Campaign Monitor for free – it only takes a few minutes to sign up.

Stay Tuned

We’ll be announcing more giveaways on this page, and the best way to find out when a giveaway starts is by joining us on Twitter.

Make Watercolor and Marker Style Portraits with Illustrator

Preview

final

Resources

  • Portrait by Lillian Bertram (Creative Commons Share Alike – used here with permission)

Step 1: Set up your Illustrator document

Start with a print document of 8.5 x 11″. Make sure to change the color space to RGB.

step 1

Step 2: Import the reference photo

Import the photo you will be using as a reference (File > Place). In this tutorial, I used this portrait by Lillian Bertram.

Step 2

Size it up or down as necessary—try to size it up to the artboard.

Don’t sweat the resolution or pixelation of the image since the reference photo is only a guide. However, the better the quality of the image, the more detail you have to work from.

Since the artwork will be imported into the first layer, name it “Photo Reference” using the Layers panel.

Your work area should look like this:

Step 2_2

Step 3: Set up your work area

You are going to want to go to the Layers panel and create two more layers. Name them “Outlines” and “Fill Lines“.

Go ahead and select the reference photo on your canvas.

With the photo selected, go to the Transparency panel (Window > Transparency) and lower the transparency of the photo between 50% and 70%—just enough for you to still see the features, but not enough to obstruct your tracing workflow.

Now go over to the Layers panel and lock the reference photo layer so that you don’t accidentally move it.

It may also help to select a Workspace preset for Painting (Window > Workspace > Painting) to set up an initial workspace and panels placement that’s suitable for what you will be doing.

Step 4: Setting up your brush

Before you get started, go to the Appearance panel (Window > Appearance) to show the Appearance panel.

Click on the settings (upper left) and in the drop down menu that comes up, be sure that New Art Has basic Appearance is deselected.

Then, you can close out the Appearance panel.

Now double-click on the Paintbrush Tool (B) in the toolbar to pull up the options dialog box for the brush.

Be sure to have Keep Selected and Edit Selected Paths unchecked as they can inhibit a natural drawing process. Adjust your Smoothness to a lower number if you have confidence in your drawing strokes, or a higher number if you feel you have a shaky hand or want straighter and smoother lines. I usually keep the Fidelity option around a 4 or 5 as well.

Go to the Brushes panel, select a 1pt stroke, and double-click the 2 pt. Oval default brush. (If you wish, you may rename the brush to make it your own.)

Brush

You can adjust the options so as to respond to the pressure and tilt of your tablet, as well as make it more of a flat-tipped, calligraphy style marker.

Brush settings

If you don’t have a tablet—don’t worry—you can still make adjustments to the head of the brush and add some randomness to the variability in the stroke. These adjustments will make for a more realistic marker look.

Be sure to doodle a bit on a blank area of your canvas on the “Outlines” layer until your brush looks as you wish.

Step 5: Initial tracing

With the Paintbrush Tool (B) selected, go to the color selection area of the toolbar. Make sure that there is no fill on the brush and choose black that has a little gray to it for the stroke—you don’t want to use a 100% black if you want a more natural look.

Zoom in on the area of the canvas where you want to begin working. Personally, I like to work from the eyes outwards, but also find it just as helpful to work with a quick outline around the whole face and work inwards. What you want to do is use short brush spurts of lines in a similar direction. You want to define the darkest areas of the photo, or the areas with the most contrast. Use the pressure of the tablet for thicker areas of definition. You will want to shade with cross-hatched or diagonal lines to denote areas that are midtones.

This is your chance to experiment and play around stylistically. You can change how your brush displays by going back to the Brushes panel and modifying the settings you created earlier. You will have the ability to apply your changes to all your strokes, so long as you modify the same brush you used to make all of your previous marks.

Periodically hide the “Photo Reference” layer to see how your composition stands on its own.

At some point, you want to break away from using the reference entirely once you have enough key features and focus on stylizing the portrait with your own marks and aesthetic.

Step 6: Add contrast

With your base outlines close to order, you will now add fill lines to the piece for greater contrast and to pull the piece together visually.

Select the “Fill Lines” layer. Go to your Stroke panel and choose a stroke between 3pt and 4pt.

Fill lines select

You will now go over the outer edges and any areas where you want to make a bold distinction of contrast. This will also give it a more urban/graffiti/marker look.

Step 7: Tweaking the piece

You can also make use of the Eraser Tool (Shift + E) to organically remove unwanted marks.

Remember that all of your strokes are just paths so you can always pull and adjust curves using the Pen Tool (P) and Convert Anchor Point Tool (Shift + C) to make adjustments.

Also, you can use the Group Selection Tool (white arrow with a “plus” symbol) to select and edit areas of lines by scaling, moving or rotating as you see fit.

Step 8: Before you begin coloring

Since you want to achieve a softer and layered look with the colors, you will be using layered Pencil Tool (N) fills with a lowered transparency. To begin, create a new layer to sit below your “Fill” and “Outline” layers. Name it “Color” and lock all other layers but this layer. Also, be sure to hide the “Photo Reference” layer.

Step 9: Set up the Pencil Tool

Double-click the Pencil tool Icon in the toolbar and adjust the settings as follows:

  • Check Fill new pencil strokes
  • Uncheck Keep Selected
  • Uncheck Edit Selected Paths

Pencil tool

Go to the color selection area of the toolbar and swap the stroke color with the fill color so that there is no stroke color.

Double-click the fill color and choose a skin tone color that is on the lighter end of a yellow to red hue.

Next, go to Window > Transparency to select between a 15% to 20% opacity for your fills.

Test out your color and transparency by drawing some overlapping circles and see how the color fills build up. If the new fills aren’t showing up as transparent—or with the correct color—check your settings and also be sure that your Appearance panel has the New Art Has Basic Appearance option deselected.

Step 10: Coloring in your portrait

Begin with the skin tones of the face. Draw overlapping shapes that contour and compliment your lines with the Pencil Tool (N).

Over the darker and shaded areas, be sure to build up the color. Also select darker shades within the same hue to add more contrast and shadow.

For the skin: I tend to work with yellows, oranges, and reds. Use a gradient for larger areas with a light to dark fade, and build on top of them. Be sure that your highlights are basically just areas with less color.

If you need to enhance highlights, draw transparent white shapes over these areas. Keep a light hand, and draw fast layered shapes with lower opacities—this helps keep the watercolor and layered feel to the illustration.

Also draw a bit outside of the lines—with this process, imperfection is our friend.

Since you will be drawing irregular shapes with the Pencil Tool (N), you may notice sharp edges and unclosed paths. To close paths, hold down the Option/Alt key right after you begin drawing your path and just before you finish it. This will complete any shape you are drawing. It’s okay to have irregular shapes and sharp edges; you can always edit them at any point with the Eraser Tool or the point-editing tools.

Color in the rest of the portrait using colors that you find works best. It is a good idea to use the Eyedropper Tool (I) and choose a color palette from another photo you may find aesthetically-pleasing for user experience.

I also encourage the use of contrasting colors to add a bit of interest, like circle shapes of bluish hue shadows on yellow and orange areas of skin or small drops of deeper reds on blue or green tones. They add a bit of complexity and depth.

Step 11: Finalizing the portrait

At this point, you should be close to finished with the portrait. Improvise, add flourishes, text, and deviate towards using your own technique and style to enhance your illustration.

You may also bring your illustration into Adobe Photoshop for added effects, color management, and texture.

Conclusion

This tutorial shared with you some techniques for using Adobe Illustrator’s powerful set of painting and illustration tools. We also covered ways to set up your workspace to achieve the watercolor and marker style illustration. I hope you enjoyed my tutorial and have taken away something useful for web design by reading it. Here is the final piece. Show us your work in the Flickr group pool.

final

Download Source Files

SEO Friendly Shopping Carts

Are you considering the option of having an ecommerce enabled shopping cart created to sell your products online?  If you want to reap the benefits of organic search engine traffic as well, there are few things you need to know.

Shopping carts and e commerce websites are created with the purpose of being user friendly.  User friendly does not always mean that it is search engine friendly.  Finding the best e commerce software that is both user and search engine friendly will provide your visitors with what they need to make purchases, while giving the search engines what they need to maximize your organic search engine rankings.