-=Found Objects: A nice way to say Dumpster Diving=-

By Mrs. Knightly  |  January 25th, 2012  |  Etc.  |  No Comments »

If you follow us on Facebook, and you really should, you would know that in True Portlandia Fashion, Mrs. Knightly came across a stash of deliciously free and not too moist coffee bags laying idly by the side of the road and brought them in to share with the Zoomers.

Whether or not Mrs. Knightly also shared her 2nd or 3rd furtively thrown in the back of the car  NTMCB’s, is not on the table for discussion at this time.

Coffee bags are constructed of Burlap, which is made from Jute, a fascinating, highly renewable plant grown primarily in India. No trees were harmed in the making of this post, nor was it tested on animals, although dog beds have not been ruled out.

Mrs. Knightly’s first project were pillows for her progeny.

Burlap Pillows

"Are they clean?" -- "Yes."

And then, one of Mrs. Knightly’s oldest and dearest friends (this means longer than some of the Zoomer’s have been alive) was blessed with a bundle of joy. What to give a child who has, literally, everything?

Enter, the Racclown Bunny ™

Burlap Doll

Not from Fisher Price.

Because Mrs. Knightly’s dear friend also has a slightly twisted take on most things, he decided to accessorize the Racclown Bunny ™.

Burlap Racclown Bunny with Knife

"Accessories are the key to fashion" -- Danielle Chi 1980

The next project will be up for grabs. Stay tuned and practice your Haiku’s.

Make something, even if it scares the children,

Mrs. Knightly


Happy, Happy Birthday!

By Tweedle C  |  September 23rd, 2011  |  Design Love  |  No Comments »

In honor of 2 very special birthdays (June’s & my very own), I’ve collected a few of my favorite birthday cards. Enjoy!


Calligraphy with Illustrator

By TweedleR  |  September 12th, 2011  |  Design Love  |  No Comments »

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!


The Trend Effect

By TweedleR  |  September 7th, 2011  |  Design Love  |  No Comments »

I’ve been living on Pinterest since I first signed up and I am constantly getting a first hand look at some great trends in action. With Pinterst you see all types of images that members are bookmarking across the internet, from fashion, interiors, to graphic design. It allows you to get a first hand look at what’s popular and new.

There is always a trickle effect in design trends. I’ve said it before, that what you see in fashion effects the world of interior design and finally touches on graphic design. These effects can be seen through color, pattern, shape, balance and even texture. Keeping up with the trends in all three areas is important. It allows us to see design trends from a different angle and lets us evolve our own designs.

On Pinterest you may need to do some wading, but there are definitely some great current trends that you can pick up on. Below are a few trends I’ve been noticing in the fashion and interior realms and how these trends may effect design choices for current graphic design.

Industrial: Industrial design is everywhere in interior design. It’s a mixture of clean lines, heavy metals, warm woods and simple shapes. Industrial is all about form and function without any fluff.

How it translates to graphic design: Minimalist designs, heavy gritty textures, shiny and smooth surfaces, dark moody grays, taupes and blacks, chunky slab serif and modern serif fonts, simple icons, and geometric forms.

Industrial Design

Pattern: Geometric, tribal and Southwest patterns are all over fashion and interior spaces. Patterns are generally a wonderful mix of rich vibrant colors combined with neutrals like soft gray, white and black.

How it translates to graphic design: Exciting geometric designs, bright colors and contrasting neutrals. Subtle patterned backgrounds and unique color pallets.

Mod/Mid Century: The 60s are coming back with tailored clothing, contrasting stripes, warm leathers, rich wood tones, and pops of vibrant color paired with charcoal grays and blacks.

How it translates to graphic design: Bold geometric shapes. Vibrant mix of muted warm colors paired with strong dark neutrals. Heavy use of typography and a mixture of font types.

Romantic / Organic: Softer shades are emerging. Dusty Rose is back in along with nudes, taupes, and creams. Gauzy fabrics, organic materials, tufted furniture, velvet, reflective mirrored surfaces and elegant shapes and lines.

How it translates to graphic design. Heavy use of neutrals, soft organic shapes and textures. Hand drawn calligraphic fonts. Light and subtle textures. Thin lines, natural shapes and soft curves.


Web Design Trends 2011: Typography

By TweedleR  |  August 29th, 2011  |  Design Love  |  No Comments »

Web safe fonts. If you are a web designer or developer, names like Arial, Verdana, Georgia, or Tahoma instantly come to mind when you hear those words. Up until recent years, designers (sometimes begrudgingly) relied on these and a small handful of other web safe fonts to allow visitors to view fonts correctly on screen. Internet browsers could only display fonts that were installed on a person’s individual computer, so this standard set of fonts became the typographical foundation for most websites.

With only a few web safe fonts available, web designs of the past have been extremely limited in the use of exciting and engaging typography. Specialty fonts online were generally reserved for main headlines and could only be placed in as static images, limiting the functionality of the type and hurting search engine optimization (SEO).

In recent years, there has been an emergence of font-embedding services, like Typekit, letting designers break out of the “safe” zone. Designers have more font options and can not only play with font style, but also the important details of leading and line height. These new options for fonts allow text to be easily updated and copied and selected from the browser, meanwhile maintaining a positive effect on SEO.

The font-embedding tools have created a boom in typographical exploration. Strong typography on a site can help tell a story as well as evoke an emotion from the audience. It can also set a tone for the site or emphasize a chosen theme. This year are seeing designs that are using large and exciting font choices, both through the use of static image and services like Typekit.

The big trend right now is to go huge with your headlines. These over-sized headlines capture the attention of the audience immediately and can make a site stand apart from their web-safe counterparts. Not only that, they can also create a visual hierarchy with the rest of the elements on the page as well as improve legibility for the viewer. The trend of typography on the web is definitely long-awaited and something I think it will keep growing and continue to be explored through a variety of methods. Typography lends a richness to websites that we haven’t seen in past years and gives web designers a whole new way to present information.

Check out the designs below for great uses of large typography.

CarsonifiedTapp3 MediaNeiman GroupMarie CatribsJeroen HomanChirp TwitterBlack Estate Vineyard


Pinterest: catalog what you love

By TweedleR  |  June 13th, 2011  |  Design Love  |  No Comments »

I think my dreams have come true! Today I stumbled upon a new site that quickly struck my interest. Pinterest is a virtual pinboard that let’s you share and organize all of the images you find on the web. As I’m sure many designers do, I have saved TONs and TONs of images on my computer to use as references for design, pattern, texture, color, typography and the list goes on. The problem is, I save these images into one huge folder, and about once a month, have to take the time to organize them into each of their specific folder categories so I actually have a chance of them be useful.

With Pinterest, you create a link in your tool bar that quickly let’s you pin (bookmark) an image from the interwebs. You can then, from what I’ve read, create different pin boards that allow you to organize all of the images you have pinned. On top of that, you can edit, comment, repin, and follow other people who have awesome boards. Pinterest isn’t just for designers either, you can pin any kind of image you like, from fashion, to weddings, to foodie photos. I requested an invite immediately and I’m on the wait-list to start pinning. Just visiting the site was inspirational, it’s awesome to see what other people have pinned, and I can’t wait to start my own pinboard!


Tutorial: Tilt Shift Photography

By TweedleR  |  June 10th, 2011  |  Design Love  |  1 Comment »

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.

Read the rest of this entry »


Tutorial: Subtle Web Backgrounds Using Photoshop Texturizer

By TweedleR  |  June 8th, 2011  |  Design Love, Uncategorized  |  No Comments »

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.

Read the rest of this entry »


Mobile Web Design

By TweedleR  |  June 6th, 2011  |  Design Love, Uncategorized  |  No Comments »

Mobile web design is a whole new beast when it comes to design. We are working with a new set of variables as designers: screen sizes are smaller and their dimensions are across the board. Mobile design is relatively new, so there is a bit of discovery and experimentation when it comes to user experience and interaction. Plus, mobile devices are rapidly changing, so you have to stay flexible so that a design can adapt to meet the needs of the audience. And let’s not forget about differences in bandwidth between phone users. These variables create a whole new mix of ingredients that effects how design decisions need to be made.

To add to the mix, we are no longer working with the same exact user as we do with the standard web. The mobile user is generally on the go, (waiting in line, walking the aisles in a store, in their car lost…) and trying to get information quickly without having to wade through tons of excess ads and information. Mobile users browse less, and it’s more likely that they are on the hunt for something specific. Information has to be streamlined and clear of clutter—only key information is given to the users, so they can get what they need quickly.

With mobile’s such limited screen space, sites are often a paired down version of their web counterpart. Often, you also see a link to the full site, a good way to keep your bases covered. A normal sites’ large graphics, videos and odd fitting content, however, can cause viewers to run, not to mention slow their phone down. So, removing the excess (without removing the what keeps users excited), and keeping a more liner vertically scrolling site, is extremely key in keeping the design effective for your users.

When designing for the mobile environment there is a bit of guess work and important considerations that need to be made before jumping head first into design. You need to consider phone and screen-size restraints, but I think most importantly you need to have a good understanding of your users, what information they will want to access and were they will be accessing it from. By streamlining and cutting the fat of our full sites, we can keep our audience’s need for information satisfied. But, we can’t just cut out all of the fun and beauty that keeps users engaged. A great mobile site needs to be functional, fit, and still maintain the excitement of the full website.


USDA Releases MyPlate Graphic

By Tweedle C  |  June 2nd, 2011  |  Design Love  |  No Comments »

Today the USDA launched the new MyPlate graphic to replace the old nutrition pyramid. From an info graphic standpoint this is a huge improvement. The graphic is simple and easy to understand at a glance. The use of a plate instead of a pyramid allows the graphic to immediately translate to a real world usage model and takes away the need for complicated measurements. Info graphics are meant to take complex information and explain it quickly and clearly. In order to achieve this, the concept needs to be boiled down to the most vital information and extraneous content needs to be eliminated for the sake of clarity. This is where the new graphic succeeds, where the updated MyPyramid (launched in 2005) failed. MyPyramid is a perfect example of an info graphic gone wrong and screams of design/decision making by committee. I can perfectly picture the countless meetings that must have occurred where each stake holder chimed in with “can you just add this, what about that?, oh and don’t forget that, oh and last but not least, add some stairs on one side so that we can communicate the importance of exercise as well”. The result is a graphic that includes everything but communicates nothing. In this case less is definitely more.

I must say, visually, I still prefer the earliest USDA guidelines — “Basic 7″, that were used from 1943 to 1956. But from an info graphic stand point, MyPlate, is the most successful by far.