full - layered .psd by upir

Circlicity - Circular icons by Shaoren

Media Player Icons | Onyx Edition by scottwills

Warm Icons Set by stigma5

Music Theme Vector Icon Set by Kilik

Denis icons part 2 by plechi

Download Box Icon Set by thomasfedb

hot chocolate, coffee, milk mugs icons by upir

Realistic Weather Icons Pack by contempoinc

Flags Pack by boldonblue

Icon set for web and apps by sixtyeight

Mail Icons by DESIGNTED

Platino Dark - Web Set 4 by ckng

Colassal Collection Vector Icons (2 of 2) by Kilik

Minimo Icon Set by logorado

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

20 May 2009, 7:30 am

Kitchen On A Table And The Wall

Constrains like limited space and behavioral changes like cooking while entertaining have dictated the transition from monstrous-sized kitchens to neat compact kitchenettes and open modular concepts. Adopting these changes, Electrolux brings to us to two unique concepts. The Rendez-vous interactive table is a cook-top that allows you to do jiffy cooking and entertain at the same time. The Volare, akin to the Lounge Bar, is a wall mounted appliance that’s nothing short of an artistic kitchen! Check out the details after the jump.

Rendez-vous

You’re the sort who likes to interact with family and friends while cooking; then the Rendez-vous is just for you. It’s an intuitive table that features a unique energy shield that brings the appliances to life without having to plug them in. For instance, by simply placing the blender on the surface you can work it or charge it. Needless to say inductive and sensor technologies support the random cooking zones. Modular drawers that can hold stoves or refrigerator are accommodated beneath the table and can be tucked away, when you need to use the table for dining. A virtual chef that guides you through your cooking completes this futuristic package.

Volare

Like I said, this reminds me of the Lounge Bar, only this time it’s a complete kitchen on the wall! Ideal for space-crunch situations. Main highlights of this art piece are: modular system that allows customization; foldable induction stove; holds all modern appliances like an ice dispenser, tea/coffee unit and oven. The coolest thing about Volare is that its exteriors can come in many painted finishes; hence the accompanying spotlights can make the unit look like a piece of wall art when not being used as a kitchen.

Designer: Electrolux Global Design

Electrolux Global Design

20 May 2009, 5:48 am

Making Of Philips Carousel

19 May 2009, 9:40 am

How to Create an Identity Package in Illustrator

In this Illustrator CS4 tutorial I’ll show you how to create an Identity Package including: business cards, letterhead, and envelopes, all in Illustrator. In the tutorial you will set up your document, design the identity package, and learn best practices for proofing and sending to the printer. This tutorial will focus more on setting up your document to create this package, rather than focusing on the creative aspects of the design.

Final Image

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Notes

Before we start, I would like to give a couple of explanations on the tutorial. You might be wondering why I am using Illustrator, a vector art editor, instead of a page layout program like InDesign to layout the identity package.

For me, using Illustrator CS4’s multiple artboards I can easily see how each piece of the collateral works together, helping with consistency and productivity as well as quickly exporting the artwork for proofing and printing. Also to note, I am using standard US document sizes for this tutorial. This also means that all measurements are going to be in inches. Still, it is easy to use the tutorials techniques for the metric system or other measurement systems as well.

Step 1

To start, I am going to use an existing logo that I created for a fictional Illustration business called Vector Mill. I won’t go into to much detail on how I created the logo, just a quick breakdown.

Basically, I used different font weights of the Museo Sans font, Outlined the text, filled the text with a linear gradients, and used the Pen Tool (P) and Rectangle Tool (M) to create the Bézier curve part of the logo.

Step 2

After you have your logo created and open, select all the artwork and drag it into the Symbols panel. With the Symbol dialog open, check the Graphic radial button and press OK.

We don’t necessarily have to create a symbol out of the logo, it is just good practice for repeating objects in documents. Using Symbols will save size and time within Illustrator documents. For example, if you wanted to slightly change the Vector Mill logo after we have created the whole identity package, you would only have to change the original Symbol (double-click on a Symbol in the document to edit it) and Illustrator will modify all instances of the Symbol.

Also, using symbols helps with reducing file size. It wouldn’t matter that much in the document we are creating, but it is good to keep in mind when creating other larger documents.

Step 3

Next, we are going to create a bleed for all artboards that we’ll created in this tutorial. To do this, go to File > Document Settings, fill the first Bleed field with .125 inches and make sure the lock icon is pressed to the right of the Bleed fields so the Top measurement populates the other fields. Most printers require at least an eighth inch bleed, but be sure to check with you printer and see if they require more.

Step 4

Create a 3.5 inch wide by 2 inch tall rectangle with the Rectangle Tool Outside of the logo artboard. This will be a business card.

Step 5

With the rectangle selected, go to Object > Path > Offset. With the Offset dialog open, change the radius to -.25 inches. This offset shape will be converted into a guide for the live area of the business card. I like to keep a quarter of an inch within the trim edge of the business card. You can change this if you think that is to far inset or if the printer has a specific live area they work with.

Step 6

Select the first rectangle and go to Object > Convert to Artboards. As you can see, the rectangle turned into an artboard and already has a bleed applied to it because we changed the document settings earlier.

Step 7

Select the offset rectangle and go View > Guides > Make (Command + 5), creating guides so it’s easy to line up elements within the artboard.

Step 8

In the Vector Mill example, I have a two-sided business card. It is easy to duplicate the business card artboard with the Artboard Tool (Shift + O). Before you copy, go to View > Guides > Lock Guides and make sure it is unchecked because we want to copy the guide as well.

Now, with the Artboard Tool (Shift + O) select the business card artboard and hold down Alt (to copy) and Shift (to constrain movements) and drag a copy of the artboard below the original.

Step 9

Now we can start designing the business cards. For the first side of the cards, I dragged out the logo symbol from the Symbol panel and adjust the size to fit with the business card guides we created.

Step 10

I won’t go into depth about creating the graphics for the second side of the business card, just give you a quick breakdown of the steps. Again, this tutorial focuses more on setting up Illustrator for creating an identity package, than creating graphics.

First, create a shape with the Pen Tool (P) making sure that the object extends past the the artboard edge to the bleed guide, then fill it with a linear gradient. Next, create text boxes that align to the business card guide, and fill in the text boxes with appropriate text. Like in the logo, I used varying weights of the Museo Sans font.

Step 11

Now that we have created a look for the business cards, we can create a letterhead design with the same kind of style. First create a 8.5 inch by 11 inch (standard letterhead size) rectangle outside of the logo and business card artboards.

Step 12

Just like the business cards, go to Object > Offset, and change the offset to -.25.

Step 13

Again like the business card artboards, select the first rectangle and go to Object > Convert to Artboards. Then, select the second rectangle and go to View > Guides > Make (Command + 5). Now we have an artboard all ready to design.

Step 14

Like with the business cards, drag a copy of the logo from the Symbol panel, size the logo. Create the same linear gradient arc shape with the Pen Tool (P), and create a text box with the appropriate text.

Step 15

Now that you have the basic principles down on how to create an artboard and guides, you can create other elements of the identity package. In the Vector Mill example, I have to create a standard #10 envelope.

So for the envelope design, create a 9.5 inch wide by 4.125 inch tall (standard #10 envelope size) rectangle, offset the rectangle by -.25 inches. Convert the main rectangle to artboard, convert the interior rectangle to guides, use the logo symbol from the Symbol panel. Create the same linear gradient arc shape, and add the necessary text. We’re all done with creating the collateral!

Step 16

Now that all the pieces are together, I like to create a single preview sheet of all the collateral together, like in the final image preview above.

To do this create a 8.5 inch by 11 inch rectangle and Offset the rectangle by -.25. Convert the first rectangle to an artboard, and convert the smaller rectangle to a guide. Next, create a rectangle the size of your new document and fill it with a light gray.

Step 17

Drag a copy of the logo from the Symbols panel and title the page with appropriate text.

Step 18

Next, create a rectangle with a white fill and no stroke over all the identity pieces the exact size of the individual artboards (except the logo artboard). For example, create a rectangle over the business card that is 3.5 inches wide by 2 inches tall.

Once created, select all the rectangles and Copy (Command + C). With the rectangles still selected, go to Object > Arrange > Send to Back (Command + Shift + Left Bracket key). The white rectangle will act like the white of the paper the collateral will be printed on. If you are printing on different colored papers, just change the color of these white rectangles. Next, Paste in Front (Command + F) the copied rectangles.

Step 19

Now we are going to mask out the artwork for each piece. Start by selecting all the artwork in the letterhead artboard with the Selection Tool (V). Once all the artwork is selected go to Object > Clipping Mask > Make.

Step 20

Repeat the previous step with all the other pieces in the package.

Step 21

Select all you masked pieces and Copy (Command + C) and Paste (Command + V) them on the preview artboard we created a couple of steps ago. As you can see, the copies won’t fit on the page. So with the copied pieces selected, use the Selection Tool (V) and hold down Shift to scale the pieces. Next, arrange the documents in an order that appeals to you.

Step 22

Now we can add a little drop shadow to the pieces to distinguish them from each other. To do this, select all the pieces on the preview sheet and go Effect > Stylize > Drop Shadow. WIth the Drop Shadow dialog open, change the Opacity to 30 the X Offset to 0, the Y Offset to .01, and the Blur to .01.

Step 23

Now the identity package is done, we can export the documents for client proofing. I find that sending PDF to clients yields the best results for proofing. Before we save the PDF, it is a good idea to save a native Illustrator file.

Next, go File > Save As, locate the folder you want to save the PDF in, and change the name of your file. On the bottom of the Save As dialog, pick Adobe PDF for the format and make sure the All radial button in checked. This will save a PDF of all the artboards as pages in the new PDF document. You can also just choose a specific artboard if you want to create a PDF of single or multiple pages. Next, click Save.

Step 24

Once in the Save Adobe PDF dialog, by default you are on the General tab of the Save Adobe PDF dialog. In this page, you don’t have to worry about much except the Preserve Illustrator Editing Capabilities. This is nice to enable, just in case you loose the original Illustrator file.

Now, click on the Marks and Bleeds Tab of the dialog and make sure the Use Document Bleed Settings check box is unchecked under the Bleeds section. Now go to the Security tab of the dialog. This part is optional, but I like to add some basic security to the PDF so the client doesn’t try to use, edit, or print, the proof without paying for the work first! I usually check the “Use a password to restrict editing Security and Permissions settings” and type in a password I will remember.

I also usually change the Printing Allowed to Low Resolution at the very least. Moreover, I also change the Changes Allowed section to “Inserting, deleting , and rotating of page,” but you can look through the list and see what works for you. Again, this is optional, but a good defense for creating a high-quality proof without client or other people stealing your work.

Finally, press Save PDF and if you put a password on the file, you will be prompted to enter it again. The only bad part about using Illustrator’s artboards, is you can’t rearrange the numbering of the artboards. If you want the preview sheet we created to be at the start of the PDF document, you will have to rearrange the pages in Adobe Acrobat Reader.

Step 25

Once you have gotten final approval on the collateral, it is time to send it to print. Most printer will except PDF or EPS file format. Moreover, using the vector art in EPS and PDF files, create clean and crisp printing.

When you export the files for print, you are probably not going to need the logo artboard or the preview artboard, but before we export the files, you need to unmask all the clipping mask on the artboards (except the preview artboard). Simply select all these pieces (except the preview page) and go to Object > Clipping Mask > Release. If you want, you can delete all the white rectangles and mask rectangles to clean up your file.

Step 26

For a PDF export, go to File > Save As, choose your folder and file name, choose Adobe PDF for Format, check the Range radial button, enter the Range of artboards you want to save, and press Save.

Once in the Save Adobe PDF dialog, the only setting you need to worry about is under the Marks and Bleeds tab. Under the Marks and Bleeds tab, make sure the Use Document Bleed Settings is checked and press Save PDF.

Step 27

For an EPS export, go to File > Save As, choose your folder and file name, choose Illustrator EPS for Format, check the Use Artboards checkbox, check the Range radial button, enter the Range of artboards you want to save, and press Save.

Once in the EPS Options, make sure you save to a EPS version the printer can open and press OK. Now if you look in the folder you saved the file in, you will see each identity piece saved as an individual file.

Conclusion

Again below is a final image of all the artboards and the preview image we put together.

Graphic Design Week

To celebrate the launch of GraphicRiver’s new Print Design Templates category we’re putting on a whole week of graphic design tutorials on both Psdtuts+ and Vectortuts+. The new category means you can now sell your design work to make extra cash On the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a Photoshop, Illustrator or InDesign template via GraphicRiver. So to give the new category the launch it deserves, all this week we’ll be bringing you articles and tutorials just like this one, on graphic design as part of our Tuts+ Graphic Design Week.

19 May 2009, 8:00 am

Logos for Print Versus Online – Identify Your Audience and Design Accordingly

As the effectiveness and streamlined approach of an online presence continues to become the primary means of business communication, a businesses brand relies heavily on how a logo interfaces with its website.

We’ll explore a variety of issues related to working with and integrating logos, including effective and ineffective combinations and how logos presented online differ from their printed counterparts. In addition, we’ll discuss what makes a logo successful from a usability and technical standpoint.

Skype

Skype is an online service where users can talk online, instant message and do video calls for free (or a small fee in some cases). Skype’s main focus is connecting friends and family online. When visitors interact with their brand it’s all online. Having said that, their logo is mostly viewed with a 3D or beveled effect, while the flat blue color is reserved for other applications that may not allow for subtle color changes. These instances occur generally when it comes to printed pieces like fax sheets, embroidered clothing, etched surfaces and vinyl lettering.

It’s fair to say that the primary look Skype wants their visitors to observe is the beveled version of the logo. This version has a softer and more approachable appeal that works in more situations than not, from a usability standpoint, given their business model.

Digg

Digg is an online platform where users can vote or digg interesting stories.

Digg has a range of styles and icons that denote its brand. Unlike Skype who’s primary logo is fairly consistent wherever it occurs, Digg’s implementation is unique and varied. The homepage of Digg uses a reversed (white) logo.

Digg has expanded the visuals that visitors associate with them by using other icons and not their logo, to identify themselves. When someone wants to "Digg" an article, story, photo, or other, they don’t see a picture of the Digg logo, rather, they see a number that denotes how many diggs that particular entry has, while the word "digg" is written small and underneath the number (see 1).

With a site that is as popular as Digg, it’s hard to control the use of its visual assets. People alter company logos on a regular basis, which generally dilutes the effectiveness of a strong brand. It’s common to see custom icons and art that may or may not look professional that represent a company we recognize. Digg is rare in the fact that they welcome visitors to alter some of the visual assets that represent them. The digg shovel icon (see 2) is one of these examples. Digg openly allows modification of this icon to suit a website’s need as indicated here.

The full color Digg logo (see 3) is used in a different capacity, not necessarily less frequently but not as the primary identifier it prefers it’s visitors to see, judging by the lack of use on one of the most prominent places one would see it, the website or underneath the Digg buttons.

Firefox

Firefox is a popular web browser. In fact, most of your are probably reading this article with it!

Firefox is another great example of a product that may have occasional printed documents (perhaps on the corporate level) while their primary function is completely online. When a person wants to use Firefox they click on a full color and gorgeous Firefox icon. Once inside the application you don’t see the Firefox logo anymore.

With this in mind, lets switch to how the logos use translates to advertising. The Firefox logo in its entirety (see 1) is comprised of the icon and the text. In instances where the icon itself is not used they simply write the word "Firefox" (see 2.) Versions 3 and 4 are simply reversed to work where the background is too similar or creates an unpleasant combination with the orange text. You’ll never see an official version of the word "Firefox" written in another color.

One Here One There

One Here One There (OHOT) is a non-profit that fosters growth in sub-Saharan Africa through education. The OHOT brand gains support and awareness more equally (compared to the examples above) both online and in print. Since this is the case, the OHOT logo needed to remain largely consistent throughout the campaign. The OHOT logo below uses only two colors, green and gray. As OHOT is a non-profit organization it makes use of limited colors in their logo which in turn will save them money on printed pieces.

The OHOT website uses the logo in an unaltered form on a pale yellow background. Again, as the use of the logo equally spans print and online applications OHOT’s logo remains constant.

Below is a printed ad that incorporates a reversed version of the logo. Not much has changed.

This bench advertisement treats the logo in a similar, though creative manner.

OHOT logo and campaign designed by and courtesy of Carl Vervisch.

Less Effective Use of a Logo Online

As a major source of information, a website is a cornerstone of a successful brand image. It’s critical that your logo work well no matter if it’s simple, 3D, ornate, extravagant, etc.

Take for example the famous MGM logo shown below. This logo has been around for many years and is in and of itself a nice looking logo. On the other hand, the implementation into the website is less than ideal. Observe how the drop shadow is too heavy and impedes the legibility of the logo. It would have been much more effective to eliminate the drop shadow and experiment with changing the background color, at least directly behind the logo.

It’s important that your online presence portrays the image you intend to convey. In MGM’s case, the website is a major source of information, but more people see the logo on the big screen rather than at their website.

The most important concept to absorb is that a logo should work well no matter the circumstance. If you keep this concept in the back of your mind as you craft the logo, the end result will be one that works for years to come in both digital and printed form.

Resources

Below are a few resources that I’ve found helpful when it comes to getting inspiration or executing any of the steps that creating a logo entails.

Identityworks

Identityworks has a variety of information on branding, logos, logo re-designs and more. Follow the link to see how companies use guidelines to keep their brand looking visually consistent.

Veer

Veer is a stock photography site that has a large selection of high-quality fonts to peruse and purchase when you’re looking for that perfect font for your logo. Even better is that you can typeset your own letters to see what they look like in a particular font.

One of the biggest advantages of purchasing a font is that it limits the number of people who are using the same font in their logo. If you’re looking for something that’s a little more exclusive, then this is the way to go.

Fawnt

Fawnt has some trendy and unique fonts that are free to download. Check out the font called Diavlo, it’s pretty cool.

Kuler

Kuler is Adobe’s online tool for picking color combinations. Users can create their own combination using a variety of sliders and options. You can download color palettes that other users have made directly into your Adobe Application.

TIP: In Illustrator CS3 go to Window > Adobe Labs > Kuler to open the palette that interfaces with the website.

David Airey

Check out Davidairey.com to add a little humor to your day, check out the article below. There are also loads of great logo design articles and resources on the site.

Graphic Design Week

19 May 2009, 7:30 am