Logos in Inkscape

Exclusive offer: get 50% off this eBook here
Inkscape 0.48 Essentials for Web Designers

Inkscape 0.48 Essentials for Web Designers — Save 50%

Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website

A$26.99    A$13.50
by Bethany Hiitola | November 2010 | Open Source Web Development

Logos can be a critical part of a web design. This is particularly true if the business you are promoting has a logo that is the centerpiece of its brand. Can you imagine a Nike website without prominent placement of its logo? There is also an opportunity here if the logo is well designed, to make it the centerpiece of a site design.

In this article by Bethany Hiitola, author of Inkscape 0.48 Essentials for Web Designers, we will discuss logos and their creation at length. We'll discuss:

  • The importance of logos for companies and how this affects web design projects
  • Logo design principles
  • How to tackle a logo design project
  • Redesign our fictional company's logo
  • Import our logo into design layout

 

Inkscape 0.48 Essentials for Web Designers

Inkscape 0.48 Essentials for Web Designers

Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website

  • The first book on the newly released Inkscape version 0.48, with an exclusive focus on web design
  • Comprehensive coverage of all aspects of Inkscape required for web design
  • Incorporate eye-catching designs, patterns, and other visual elements to spice up your web pages
  • Learn how to create your own Inkscape templates in addition to using the built-in ones
  • Written in a simple illustrative manner, which will appeal to web designers and experienced Inkscape users alike
        Read more about this book      

(For more resources on Inkscape, see here.)

Here's an example of a web page with a logo as a major design element:

Logos in Inkscape

Logos as the cornerstone of the design

Logos are the graphical representation or emblem for a company or organization—sometimes even individuals use them to promote instant recognition. They can be a graphic (a combination of symbols or icons), a combination of graphics and text, or graphical forms of text.

Why are they important in web design? Since most companies want to be recognized by their logo alone—the logo is the critical piece of the design. It needs prominent placement to work flawlessly with the design.

Best practices for creating logos

There are a lot of guidelines and principles to the best logo designs. And they start with some simple ideas that have been reworked and discussed intensely since the start of the Internet. But it never hurts to review the best practices. You want your company logos to be:

  • Simple: That's right, you want to keep them clean, simple, neat, and intensely easy to recreate. If you nail this attribute, the others listed below will be easy to achieve.
  • Memorable: Think of all the great company logos. You remember them in your mind's eye very easily right? That's because they are unique and in essence simple. These two attributes together make some of the best company logos today.
  • Timeless: These logos will last many years. This not only saves the company or individual money, but it also increases the memorability of the logo and brand of the company.
  • Versatile: Any logo that can be used in print (color and black and white), digital media, television, any size, letterhead, billboards, and small iconic statements along the bottom of web pages or promotional materials—is a successful logo. You never know where a logo might be placed, especially on the web. You want something that can be used in a prominent location on the company web site itself, but also something that works in a small thumbnail space for social media or cell phone applications.
  • Appropriate: We want the logo to be appropriate for the company it is representing. The right colors, images, and more will go along way in giving the company credibility immediately upon first glance by any consumer or potential client. It can also prove to be a great indication of the services one can expect from the company itself.

Seems easy enough right? It is, after some practice and some processes are in place. It never hurts to have a loose process to work with clients to determine their needs and wants in a logo. Some may already have a logo and want to keep parts of the design and revamp others while other clients might be so new they haven't ever had a logo before. As a start, here's a brief process for working with clients and discussing logos.

Information gathering

There's no better place to start than to open the floor for discussion. Here's just the start of what you can ask or gather from your client in an initial information gathering meeting:

  • Does the client already have a logo?
  • If yes, do they intend to keep that logo to use in the web design? Again if yes, get the source files. Hopefully they are in vector graphic format so they are scalable and usable right away in the web design.
  • Are they interested in a logo redesign? This can be beneficial if they are rebranding themselves as a business or having a 'grand re-opening' of some sort. It can breathe life into a stale business and sometimes garner some new interest.
  • If yes, is it a complete (open to anything) redesign? Or are there certain elements that need to stay? Sometimes color is important, or a certain font or even a certain graphical element needs to stay within the logo. Listen and take notes; it is important to work with the client to try to fulfill their needs as much as possible.
  • If the client is open to a complete redesign, brainstorm a bit with them about their needs and wants. Colors, fonts, graphical ideas. Don't be afraid to bring out some paper and pencils and start sketching some ideas. Sometimes it can be most productive to work through some rough ideas this way to get a feel for what the client likes most and not. Consider it a working session.
  • Try to understand where the client wants to use this logo most prominently. Keeping that in mind you will design something that is versatile and could be used in most mediums; you still want to know where they plan to use it the most. That way, you can tailor the logo as much as possible for that space—especially if you can use more color.
  • What are the primary goals of the company? What is their mission statement?
  • Does the client already have brand guidelines to consider?

Creating initial designs

After the initial informational session it is your turn to start designing. Take the paper and pencil sketches (if you had any) from the initial meeting and expand on them. In fact, spend a bit more time with your team and flesh out a few more of those ideas in a true brainstorming session. It can be beneficial to start this way first before jumping on to the computer and getting caught in details like typeface and effects.

Once you have some solid ideas, bring it over to the computer and start designing. Focus on only three of your best ideas. That way you bring only your best to the client to review and discuss.

Much like with the web design process, the logo design process takes a very similar route. You bring design mock ups to your client to review, give feedback, redesign, and then you go back and design some more—all until you get approvals. And then you—being an Inkscape expert—can build and then export the logo in any number of vector formats for use in almost any medium.

Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website
Published: November 2010
eBook Price: A$26.99
Book Price: A$44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Inkscape, see here.)

Importing existing logos

If you are fortunate enough to work with a client that has an established logo that they would like to continue to use in their web space, then you need to be able to pull the logo into your initial mock up designs—and then into your final design and use it as any other object. To do this:

  1. While in an Inkscape document (with our without your design already in place), from the main menu select File and then Import.
  2. Find the logo file in the menus and click Open.

    Logos in Inkscape

  3. Then place your logo where it best fits in your design.

What if the logo is not in the right size and not in a scalable vector-graphic format? Then you need to re-create the logo in Inkscape in a form that is scalable. It's definitely possible and not difficult to do. It just takes time and a bit of Inkscape expertise.

Re-creating existing logos

Sometimes a client provides you with a logo but it isn't of a good quality and it requires you to 'trace' it to essentially re-create the logo as a vector graphic. There are a few tricks to do this that can save you some time.

If you have an electronic version of the graphic—meaning any PNG, JPG, BMP, or graphical format of the image, you can import it into Inkscape as described above. Once placed, create a new layer on top of the original graphic and start "tracing". Use shapes, tools, images, and more to draw over the initial drawing until you have essentially re-created the logo.

Group all of your objects together to essentially make the logo one object again and hide or delete the original layer. Once saved as an SVG file, you can now make this new logo larger or smaller and not have it degrade in quality. You've recreated your first logo!

What if you don't get an electronic version? What if you are not confident of your re-creation skills? You can use the Inkscape tracing feature. It uses Protrace, an extension of Inkscape that scans and finds the "edges" of objects in pictures and allows you to manipulate them.

Logo re-designs

If your client decides that they want to redo their logos, as stated above, your challenge is two-fold: creating a logo that represents their company and then designing a web site that complements it.

Logo design is very personal to the company that it is being designed for. That being said, there are no step-by-step instructions on how to create a logo. But let's run through an example of what one could do to redesign the logo (again) of our fictional company. We'll redesign Gigi's Fun Travel logo.

Logos in Inkscape

Let's say we've already brainstormed with our client to determine that the color palette needs to stay the same—but we can work with using different shades and fonts. The logo still needs to be fun, and the client is open to either using the name in the logo or not.

  • Following the logo design principles listed above—we'll go simple, but with an eye towards fun. Let's start with two ideas: a tropical flower and mail stamp as the base of the logo. This affords us the orange and green color palette and allows us to continue the fun theme.

    Logos in Inkscape

  • Let's first concentrate on getting the flower and the colors within the mail stamp.

    Logos in Inkscape

  • Then, we can add in the company name and the stamp 'flyers'.

    Logos in Inkscape

  • Do we need the flyer lines of the stamp? In some promotional items we could use it, but the logo could stand on its own without it. Here's the finished product:

    Logos in Inkscape

Again, this is a quick example of what can be done with logo design. There are a ton of materials that can explore this design theory even more and give you even more pointers for the best logos created today.

Exporting logos for use on the web and more

Typically you would export your icons, buttons, and logos in a rasterized form—line a PNG format for use in web development. As always you keep the SVG forms so you can scale larger images of the graphics when and if needed.

To export any of the icons, buttons, or logos you created:

  1. Open the SVG file.
  2. Select all the objects in the drawing.
  3. Then from the main menu select File and then Export Bitmap.

    Logos in Inkscape

  4. On the Export dialog, click Browse to find a save location, and then click Export to save your files in PNG format.

As always, when providing files to programmers it is a good idea to provide them with:

  • The PNG image files you just exported from your design.
  • And the source Inkscape SVG file of your logo, buttons, or logo and the design mock up with all images used in the creation of it. That way, they see how they all work together and build it as designed.

Summary

In this article we talked about logo design principles, how to best tackle that logo design project, best practices for working with a client and of course—an example of how to redesign a logo. We also reviewed again how to hand off files to the web programmers to implement our design wishes.


Further resources on this subject:


 

Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website
Published: November 2010
eBook Price: A$26.99
Book Price: A$44.99
See more
Select your format and quantity:

About the Author :


Bethany Hiitola

Bethany Hiitola is a working writer and technology geek. With a degree in Scientific and Technical Communications, she's worked as a technical writer and multimedia developer for over 12 years—she spends the rest of her time as a wife, mother, gadget geek, and Master of the Household. She's written more user manuals than she can count, essays, novels, and a few technical books—including Inkscape 0.48 Essentials for Web Designers. More details are at her website: bethanyhiitola.com

Books From Packt


Inkscape 0.48 Illustrator's Cookbook
Inkscape 0.48 Illustrator's Cookbook

Agile Web Application Development with Yii1.1 and PHP5
Agile Web Application Development with Yii1.1 and PHP5

Blender 3D 2.49 Architecture, Buildings, and Scenery
Blender 3D 2.49 Architecture, Buildings, and Scenery

PostgreSQL 9.0 High Performance
PostgreSQL 9.0 High Performance

OpenSceneGraph 3.0: Beginner's Guide
OpenSceneGraph 3.0: Beginner's Guide

YUI 2.8: Learning the Library
YUI 2.8: Learning the Library

OpenCart 1.4 Beginner's Guide
OpenCart 1.4 Beginner's Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software