* 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.
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.
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.
- Learn more about Inkd’s all access template subscription
- Learn more about Inkd’s online printing
- Follow @inkdtweet on Twitter
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.
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.
- 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 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.
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 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.)
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.
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.
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
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.
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.
Download Source Files
- watercolor_marker_portraits (ZIP, 1.6 MB)
How does one get inspired creatively?
In this article, notable designers share their tips and tricks for getting—and keeping—themselves fresh with creative inspiration.
1. Delve into the history of your craft
To get inspired in your present work, it’s worthwhile to go back and look at the history of your craft. Depending on your particular design field, you might be overlooking hundreds of years of accumulated wisdom simply by neglecting to bone up on your history.
"To get a sense of where our industry is headed, you need to look at where it’s been," says Scotland-based brand identity designer and author David Airey in his book Logo Design Love. "Those who have worked through a lifetime of design have amassed an incredible amount of experience, and I never tire of listening to their stories and anecdotes."
One of the best places to learn about design and art history is Wikipedia. Start by using the site’s search feature to read up on things like "typography", "web design", "grid page layouts", or any other topics that interest you or might provide creative inspiration.
You might discover something new simply by looking back to the past.
2. See what others are doing
"Seeing what already exists out there allows you to build upon and improve your own work," says Australian graphic designer Jacob Cass, whose work you may have seen in magazines such as Layers Magazine and Computer Arts. "For example, I recently worked on a pro bono website design project for Haiti… I’d never done a charity website before so seeing what was already out there allowed me to see what design elements were most important. I could then build upon these foundations and create a website that achieved the goals of the charity I was working for."
Online portfolios sites like Behance, deviantART, Flickr, and Carbonmade offer you a chance to see what your colleagues are up to. Web-based design galleries like LogoPond and Creattica are also websites that you might want to take a look at.
3. Find inspiration on the Web
The Web gives designers a convenient venue for discovering sources of creative inspiration. Design blogger and freelance designer Chris Spooner reveals, "I’m forever stumbling over great artwork from designer portfolios, amazing illustrations and great new ideas being put into practice in website designs. This always springs new ideas to mind for projects, blog articles and tutorials."
Blogs like Abduzeedo, Smashing Magazine, and Yanko Design will give you a consistent stream of inspiration. Be sure to utilize an RSS feed reader like Google Reader, which can bring all of these sites to you in one handy location. Whenever you’re experiencing a creative lull, hit your feeds for a surge of inspiration.
4. Go to the bookstore
"One thing that always gets me inspired is browsing through books in a bookstore. I feel like the level of craft in your average book is a lot higher than the level of craft in an average website. If I see a book with some killer typography and just a nice overall design, I usually can’t wait to get back to the computer to see if I can incorporate some of those ideas into one thing or another," says Chris Coyier of CSS-Tricks.
Looking at books in your favorite bookstore is a surefire way to getting creatively inspired. Simply stepping outside your work area for a few hours can present you with a much needed hiatus that enables your creative juices to refresh.
And books, being one of the oldest forms of design, can stimulate your creativity by showing you a myriad of design, art, and typography styles and techniques through their covers and pages. Additionally, skimming books that interest you may allow you to discover some knew information that inspires you creatively.
For freelance web designer Lee Munroe, reading books is a good source of inspiration. "I find myself most creatively inspired when I’m reading a good design book (e.g. Handcrafted CSS, The Design Of Everyday Things)," says Munroe.
5. Follow your favorite designers in social media
Services like Twitter and Facebook allow you to see what your favorite designers are up to at any given moment. By following them, you might uncover some links to inspiring web resources and thoughtful anecdotes for inspiration.
"Currently I find a lot of my inspiration from other people. Rather than browsing galleries for inspiration, I think it’s much more useful to look at people who could inspire you and keep updated with them," says Liam McKay of Function. "This could be as simple as just following them on Twitter. Seeing other people succeed and create cool things gets me inspired, seeing works in progress and projects being built up from nothing is a great motivation for your own work."
Designer and illustrator, Nick La puts it plainly: "Follow creative people on Twitter." To find creatives on Twitter, you can start by subscribing to Twitter lists that auspiciously give you the opportunity to find and follow designers and artists on the ubiquitous social networking site. Visit the site called Listorious—an index of popular Twitter lists, sorted by tags such as design, graphicdesign, typography, and more.
6. Change your surroundings
Things can get stale real fast when you do the same things repeatedly. Getting out of your normal routine can help you find creative inspiration by affording you a chance to break out of the daily grind and see new things.
Angela Rohner, web designer and founder of popular web inspiration gallery, The Best Designs, imparts this thought: "I usually have to take a break away from the computer screen to really get my creativity going. Sometimes I will take a walk – especially during the fall and spring, I love to take a walk outside to clear my mind and get some fresh air."
Design blogger and website designer Steven Snell reveals: "One of my favorite techniques for inspiration is to change my surroundings. If I’ve been online for a long time, which is usually the case, I like to get outside or at least away from the computer for a little while."
"Mixing things up can help to get a fresh perspective," adds Snell.
For Jad Limcaco of Design Informer, engaging on another activity besides your creative work can generate inspiration. "Whether it be going to the gym, playing basketball or chess, or even taking a nap, these are all different activities that help me clear my mind. How does this get me inspired? Well, I find that by getting away, my mind is stimulated and refreshed, and I usually come back with a fresh perspective on things and a ton of new ideas," says Limcaco.
Digital media designer Jan Cavan (Dawghouse Design Studio) suggests why changing your surroundings can be inspirational: "Freelancing makes me feel a bit secluded sometimes so I go out and head to a coffee shop with my laptop and just try to enjoy and draw inspiration from the things going on around me."
7. Work on projects that are inspiring
"I find inspiration from working on projects I’m really excited about. The trick is getting those projects. One thing that’s really helped me is having personal projects that I can’t wait to work on. A lot of the ideas and experiments I try out trickle in to my client work and leads to more ideas and inspiration down the road," says illustrator and web designer, Brad Colbow.
Just realizing what a project will take, the challenges that it may pose, then getting a good sense of what’s about to come—for some— is enough to get you creatively inspired. "When I get all the information I need to know about the project I feel more confident and secure about what I have to do and that really inspires me," says highly sought after Brazilian designer, Fabio Sasso of Abduzeedo.
Find work that challenges your creativity—that begs it to come out—simply by picking projects that are inspiring and fulfilling to you.
Start your hunt for that next challenging and inspirational job by browsing reputable jobs listings that cater to designers such as Coroflot, Design Jobs on the Wall, Krop, and Smashing Jobs.
8. Open up your mind to creative opportunities
"I see creativity as something outside of me that reveals itself at the moment it chooses. If my mind is open, I recognize that element as something that can be applied in a design. I normally begin with a goal," says Francisco Inchauste of Finch.
"For example, creating a unique navigation look for a certain type of Website. I let that concept stir in the back of my mind for a bit and get away from the computer. I might be reading a magazine, see a nice animation on a TV show, or come across a fantastic color combination on some packaging in the store when inspiration strikes. I try to sketch out a few initial thoughts on paper to capture it. From there the ideas really begin to flow; at the speed of water from a fire hose. I then start playing out those design concepts on the computer," explains Inchauste.
9. Work in a comfortable environment
"One thing I’ve noticed that gets me inspired on a daily basis is my work environment. Working on a laptop, I will almost never design from one place for an entire day. By changing my location regularly, I find that my mind doesn’t hit the dreaded post-lunch slowdown like it does when I’m chained to my office chair. Relocating doesn’t mean you have to work at a coffee shop every day; a simple change of rooms in the house can do a lot. If your work machine is a desktop, one combatant is to rearrange the office space as often as time allows. That being said, keep your desk and direct viewpoint free of trash and unneeded clutter. Your focus needs to be on your screen, not the stack of trash or magazines next to you. Natural sunlight (but not the blinding sort) can help stimulate your mood, as can ambient lighting when you’re working into the night. Just a few irregular daily routines I’ve picked up on over the past year," says Sean Baker of Elysium Burns.
10. Just get something started
When you’re in a creative rut—instead of wallowing in it—why not fire up your favorite design tool and experiment. See what happens when you learn to let go.
"The best thing for me is often to get something started. There’s nothing worse for me than staring at a blank screen hoping something will pop into my head, so sometimes I will just start dropping stuff onto a page hoping to see a couple of things click together. I’ll also often be surfing galleries in the background or looking at textures or stock graphics. Basically, I try to simulate normal designing until all of a sudden something ticks over in my head and I’m no longer simulating but actively designing something," shares designer Collis Ta’eed, Envato’s CEO and founder of top design blogs such as Psdtuts+ and Creattica.
What are your tips and tricks for getting creatively inspired? Share it with us in the comments.
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.
Locating Duplicate Content within Your Website
When achieving top search engine rankings in Google are important to you, you will want to ensure that your site does not have problems with duplicate content. Below are some ways to identify duplicate content and how to keep it from diluting your website’s theme.