Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 17 2011

10:00

Basics: Difference Between Pixel and Vector-Based Graphics

This article is about the differences between pixel and vector-based designs but before going into details, I would like to give you an introduction to graphic design.  A design is a combination of words and drawings which is integrated in a manner so that it can enhance creativity and exquisiteness through innovative ideas whereas graphics are a visual presentation of images in print media. Graphic design is the production of images and text artistically and in an appealing style. Graphic design can be referred as a visual communicator in the field of multimedia. If someone wants to enhance interactivity in his website, logos and signs or to convey a strong message through brochures and posters then he should incorporate graphic designs in his work.

Advanced graphic designs of web pages has increased the level of competition in the IT industry. Everyone wants to introduce pleasing graphic design in their web pages, logos and brochures. When you start working on graphic designs you will come across two different types, pixel-based and vector-based graphics. In the following section I will give you the description of the major differences. This description will help you in the selection of graphics for your web site or logo designs. A flourishing graphic design can be developed only by understanding the pros and cons of these two formats so that you can decide which one is good for your work.

Pixel-based Graphics

Pixel-based graphics are commonly known as bitmap graphics or raster images. In order to understand pixel based graphics you have to understand the word pixel and its origin. The word pixel is basically a combination of two words “pix” and “el”. The first word “pix” came from the word picture and the other word “el” came from the word element. The pixel is the smallest element of a picture or the tiny dots of colors (red, green or blue). Bitmap or pixel-based images are made by the combination of these tiny dots on a lattice. The picture on a bitmap graphic is a blend of pixels. The biggest advantage of using pixel based graphics in your website is that all the digital and scanned picture are produced in this format and you don’t need to convert it into any other format.

A bitmap image looks like the ball at the left in the above picture and the square at the right side shows the close up of the bitmap image.

Picture Quality

The quality of the image in pixel-based graphics depends on the mode of compatibility of output device or dpi of the device. If you want to keep the quality of a pixel-based image on a web page, you have to uphold its dpi or dots per inch up to 72 dpi since the dpi of computer monitors is 72 or 96 dots per inch. The dot per inch or dpi is also referred as pixels per inch or ppi. This will also help you in maintaining the quality of the picture when you are changing the file size, the picture will look worse otherwise. Apart from computer monitors, printers operate with a range of 150 to 300 dpi and that is why the pixel-based graphics do not have a good result when they are printed even with a higher resolution. Making files larger does not work either. This means that pixel-based graphics is good for web pages but not for brochures.

The difference in the quality of a bitmap image on printer and on monitor screen is visible in this illustration. The small square box at the front shows how pixels get scattered when they are printed whereas the same picture has a realistic effect when it is produced on-screen.

Scaling of Pixel-based Graphics

Pixel-based graphics have a different behavior in scaling process. Making bitmap image smaller is not a big deal and it has no side effects on the quality of the picture. You can scale down a 400 by 600 pixel image into a smaller size without having a blurred or blotted effect on the picture but in the scaling up of the picture it possess different behavior. In a bitmap image, the properties of the picture include the attributes of each pixel. In making the size smaller, these attributes are shrunk easily but in the scaling up of the picture, the computer is unable to resize it as a larger image. The device does its best and makes the picture bigger with estimated attributes which result in a distorted and splotched image.

This picture demonstrates the difference of bitmap image before and after scaling.

Size

The size of a pixel-based image depends on the properties and attributes of the pixels. Pixel-based graphics have a larger file size than the files of other formats because in pixel-based graphics all the pixels hold their information and have their own separate attributes which on blending, make a complete picture. This process of image development increases its size and makes the file larger.

Vector-based Graphics

Vector-based graphics have a wide scope in line art. Apart from pixel-based graphics, in vector-based graphics images are developed by mathematical functions. Vector-based images are somewhat similar to geometric diagrams and use points and lines. Individual objects have individual attributes and characteristics which is unlike pixel-based images in which each and every pixel has separate attributes and properties associated with them. The editing of vector-based images is also very easy. The main reason of this easiness in editing is that only the properties of the lines and objects has to be edited in contrast to the process of changing attributes of every pixel. The lines, dots and functions used in the development of vector-based graphics are called primitives.

This is a perfect example which shows the actual vector-based image along with its primitives. The picture on the left side shows a vector-based image and the picture on the right side shows primitives of the original vector-based image.

Picture Quality

The image quality in vector-based graphics does not depend on the dpi of the output device. This type of artwork in graphic design is good for logo designs because the resulting image is clear and crisp.  Vector-based graphics do not work well when there is a need for soft-toned graphics in a picture. A picture which requires a lot of tonal changes is difficult to achieve in vector art. If you are interested in adding a vector-based image on your web page then you need to rasterize the image (convert it into a bitmap image). But the vector images that are created in Flash can be used in a web page without converting it. Besides Flash, there are several plug-ins that are available which support vector-based images. In many cases, the browsing software faces trouble in dealing with a vector-based graphics and rasterizes the vector image itself.

Vector-based images cannot be for realistic pictures. This is very important to know that the conversion of pixel-based image into a vector-based image is very difficult. It can only be done by using specific software. It is wise to use bitmap images in graphics orfor web design because images produced by scanners and digital devices are bitmap images and the conversion of pixel-based image into a vector image is a difficult task.

This is a perfect example which shows the difference in results of vector-based graphics and pixel-based graphics in a realistic picture.

Scaling of Vector-based Graphics

Vector-based graphics are easily scalable to any size. A vector-based image is made up of lines and mathematical statements which makes it easy to scale images up and down without losing quality. The output device does not need to make any estimations for the appropriate points, the objects changes its size or points through geometrical equations. Vector art has the strongest point that it gives its best results in logo designs and line based graphics and one can easily scale it into any size.

This diagram shows the behavior of a vector image when it is scaled up. It is obvious in this image that the result of a vector-based image is smooth after scaling.

Size

The vector-based images are smaller than bitmap images because the file contains only the information related to objects rather than the information of each pixel. In vector-based graphics, the size depends on the resolution of the picture that has been generated even if the picture is converted to bitmap image, the size remains the same. So, if you want to have a small bitmap image on your website you can use a converted vector-based image. The size of the vector-based image depends on the number of objects and layers included with it.

If you are going to start working on a new website or are deciding on a logo for your business this article should be helpful in choosing the format of graphics for your work or design.

January 27 2011

10:00

Please All Types of Clients: Guide to Choosing Color Combinations

Every graphic designer knows that choosing the color combinations is among the most important parts of the design making process, on print or on the web. There is no universal color combination that will please all types of clients. For some designers, it is a matter of trial and error. But trial and error means you wasting plenty of precious time. Time is an important commodity in the graphic designer’s fast paced world. Through proper research, sense of style and good common sense, you can eliminate the long time of experimentation.

Understanding the Color Wheel

Before anything, it’s important to know the basics of the Color Wheel first. Every designer should by now have familiarized the color wheel by heart.

White light is a combination of all the colors of the spectrum, divided into three basic groups: red, blue and yellow. From these three colors, you can combine every color imaginable to the human eye. To be able to create aesthetically pleasing color combinations, you have to know how the color wheel first. I’ll try explaining it to you without being too technical.

Monochromatic

For the monochromatic color scheme, it makes use of one color of different shades. For example, you use the following color combination for a web site:

The main color here is green, plus a lighter (50% white) green and a darker (50% black) green. Using monochromatic color combinations add a professional and sophisticated. It’s no fuss and straight to the point–thus it can get boring and monotonous (they have the same prefix, so…).

Complementary

The most interesting color combinations are those that show contrast and interest. This is by combining colors that are located opposite each other in the color wheel. They are bold, visually interesting and appealing. Just be sure to combine colors that look great together for your client’s company. Some combinations may look too gaudy–stay away from that.

Analogous

The analogous color scheme combines colors next to each other on the color wheel. They’re like the monochromatic scheme, great for professional and business uses. They are more interesting since they add contrast and interest into the canvas. Analogous color schemes are easy to work with and they always look great.

Here are some great examples of analogous color combinations:

Triadic

Triadic color schemes take three colors that are equally apart on the color wheel. They create a triangular shape when you connect the colors together. This type of color combination is aesthetically pleasing and well balanced.

Pleasing Clients with the Right Color Combinations

As mentioned earlier, you cannot please all clients with a universal color palette. You should know your client’s company first and foremost–what the company and their products are about, so that you can have a head start on picking the colors. Don’t forget to also check out successful logo redesigns.

Restaurants, Fast Food and Food Products

For companies that are centered on food and dining, use red and yellow a lot. These colors are attractive and easy to spot. Warm hues and solid colors are recommended. This is because the color red and yellow induces hunger by speeding up metabolism. This will increase the diner’s appetite, making them order more food than they should have. Avoid the blue and purple color for restaurants at all costs–these colors decreases one’s appetites. Subconsciously, our body reacts negatively to blue and purple toxins. Green and brown is a good color for relaxing and casual eating (think cafes and bistros). Try using colors in the triadic or complementary color scheme.

Here are some interesting color palettes for restaurants, fast food and food products:

Makeup and Hygiene Products

Choose colors that convey femininity, grace and cleanliness. Light, pastel colors like white, lavenders, light blues and light pinks are a great choice. Avoid warm and harsh colors. You can also opt for monochromatic and neutral colors, for they signify cleanliness and simplicity. Here are some interesting color palettes for makeup and hygiene products:


Government Agencies, Public Offices, NGOs and Organizations

When creating something for government and public agencies or organizations, keep in mind that it should appear respectable, trustworthy and dignified. Choose colors that are positive and cool, such as greens and blues. These cool colors provide a positive, public image that’s solid and built on trust. Government and NGOs love using reds, whites and blues for their logos after the US American flag. These colors are also a sign of nationalism and integrity.Choose the monochromatic or analogous color scheme. Minimize on using contrasting colors.

Here are some interesting color palettes for public offices, government agencies and other organizations:

Logos or graphic design for educational establishments, insurance companies and hospitals also apply as well.

Hotels, Spas and other Hospitality Establishments

When designing for hotels, spas and resorts, capitalize on comfort, hospitality and relaxation. Choose ‘earthy’ and natural colors. Browns, blues and greens are the most relaxing and calming colors. Avoid bold colors. Make use of the monochromatic color scheme. Use colors only to a minimum, unless if it’s a Vegas establishment.

Blacks, whites, silver and gold are also a good choice of colors for hotels, spas and resorts, especially if it’s a five-star establishment and they wish to capitalize on luxury and class.

Conclusion

Color is a good way to catch the eye of viewers, but too much color will be distract your readers from looking closer and reading on. If you can, stick to 2 to 4 colors only.

Color combinations are not created on whim, but through careful research and study. By knowing the basics of the color wheel and combinations, you can create thousands of aesthetically pleasing color combinations.

Reposted byfish2000 fish2000
Sponsored post
feedback2020-admin
14:56
you are awesome!
Reposted bysirthomasbolton sirthomasbolton

January 25 2011

10:00

Can Free Design Resources Be Exemplary?

As designers we’re always after some good resources for inspiration and even for design elements to help us when we have a mental block. But the thing is that there’s not very many GREAT resources out there that give FREE stuff away. You have inspiration sites like Dribbble and DeviantArt (deviant does give some things away) but there’s a new community emerging where the resources are not only free, but also outstanding. Let’s take a deeper look into this new community called DesignMoo.

First off, what I’d like to achieve with this article is to get your feedback not only these resources, but also your opinion on how you think these types of sites help or hurt our design community. So keep that in mind as you read through this and browse the site. Also feel free to offer other sites you’ve found that provide outstanding resources such as this one.

DesignMoo, according to their about page, is…

“a community of designers who think it’s best to share our design resources. That means we love to share fonts, brushes, textures, icons, illustrations, and more with anyone that might find them useful.”

And it’s true. It’s all free resources (but they just released a paid account with extras), contributed by some of the best designers around the world. It’s co-owned and operated by Chris Wallace and Rich Hemsley. Chris is owner of LiftUX, runs Chris-Wallace.com, tweets as @chriswallace and shoots on Dribbble of course. Rich Hemsley is the awesome community manager, tweets as @richhemsley and Dribbbles as well. The community is currently invite-only but growing very quickly and making a real wake in our design world. Check out some of the resources by a few of these amazing designers.

iPhone 4 Retina GUI
Rich HemsleyiPhone 4 Retina GUI

vCard Design Resource
Chris WallacevCard PSD

Abstract Tileable Design Patterns
Allison Grayce NoldAbstract Tileable Patterns

Logo Identity Guideline Template
Graham SmithLogo Identity Guideline Template

Clumsy Font Free
Kyle SteedClumsy

Invite Stamp Collection
Hillary HopperInvite Stamp Collection

It’s About Quality

So as you can see, we’re not talking about lame resources here. This isn’t clip art in a glorified form or anything. No, this is real stuff you can actually use and many times it will actually be better than what we ourselves can design. I’ve personally used several of these resources in my client’s work and it not only saves time, but looks awesome. The important thing to remember if you ever get into this community is to keep it awesome. Keep the elements you submit to a spectacular level. Give feedback, utilize what others offer, and contribute when you can.

What DesignMoo Offers

I recognize that there’s a million free resource sites out there. But like I mentioned, there’s none that I know of that provide the quality elements DesignMoo does. Here’s a breakdown of some elements for you to chew on and make a better, more informed opinion about this community.

Iconified

Sexy icons are always a must for sites these days. It adds personality and enhances the look of the site immensely, if used properly of course. Not everyone can be an icon designer, that’s why I’m very thankful for those people sharing their mad skills with those of us less fortunate in this area of design.

awesome-free-calendar-icon
Julien MartinLe Calendrier 2011

awesome-free-iphone-icons
Pontus JohanssoniPhone Icons

free-bookshelf-icon
Peter BurdetteBookshelf Icon

small-free-glyph-icons
Umar Irshad32px Glyphs

social-media-buttons-icons
Alfred PereiraSocial Buttons Vol2

UI Elements

And who could turn down some really sweet UI elements? These things are few and far between to look this good and take several hours to create. So I’m game for grabbing some to use that were made by some down right awesome people. Take a look.

free-user-interface-kit
Morgan Allan KnutsonChutzpah User Interface Kit

transparent-dropdown-menu-free
Rich HemsleyTransparent Menu

dark-user-interface-kit
Josh HemsleyDark Sexy UI Elements

Yummy Textures and Patterns

Ah yes, finally some great textures. I know you can find them lots of places but these are seriously some of the highest quality ones I’ve seen…and they’re more web-related than some other sites out there. Here’s a few pretty sweet ones to chew on.

free-argyle-texture-pattern
Hillary HopperArgyle Textures

free-grunge-brushes
Liam McKayFunction Subtle Grunge Brushes

free-bokeh-background
David LopezBokeh

Oh Glorious Fonts

We designers love some fonts. Whether we’re great typographers or not, we still like to have a plethora of them to choose from. And with the way CSS3 is breaking into the market and things like CuFon and such, we can utilize more of these fonts on our sites without the old “make an image” method. Here’s some fonts you may never have seen. Pretty nice, eh?

free-font-download
Brian CarrollFolly by Litchytype

free-font-download
Jed Bridges - Cerus Caps

free-font-download
A Visual IdiotNovak

So Does Free Raise Any Issues?

The simple answer is yes, but there’s also a no in there. Free can cause problems. Problems like overuse, looking cheap, and being misused in general. But DesignMoo is doing things a little bit differently. They are adhering to a level of quality that’s unmatched in the marketplace and making sure to keep that level of quality by allowing it to be invite only. It works similar to Dribbble‘s invite system, if you’re familiar with that, in that members get limited invites each month or so and the people they invite appear under them so everyone knows if you’re keeping the quality level up or just inviting your best buds. There’s nothing wrong with inviting friends, but make sure they know what they’re doing and can contribute great stuff.

In saying that, I don’t see problems for DesignMoo at this point, maybe in the future, but that bridge will be crossed when they come to it. Chris and Rich are infatuated with great design so I highly doubt it will ever turn into anything short of extraordinary.

Something to Recognize

If you’ve thoroughly read this far, you’ll know that I’ve mentioned there are other sites that provide similar services to what DesignMoo does. And I said none compare…and I still believe that. In fact, during my writing of this article, DesignMoo announced they have acquired 365psd.com. We’re not sure of the future of the two and how they will combine their resources (or if they will), but this just proves how great and powerful of a resource this site can and will be. You can read the full article on the “merger” over at Jon Notie’s blog.

My Take on This and That

I’m a design lover as well and I get irritated when there’s a site that could be great but has poor design features or usability. I realize that your design program is not everything for a website, but design itself entails a lot. It has a dash of user experience and a hint of personality among many other elements. Design is all around us and there’s nothing wrong with a site that provides resources and elements that can enhance the user experience of a site, especially when they are at no cost to use. Quality elements are great. An outstanding collection of them for us to choose from is even better. So with that, I want to encourage you to comment below and tell me what you think of design resource sites. What do you find helpful about them? Or hurtful about them? Do you have any ones other than DesignMoo? Let’s get conversing.

January 07 2011

10:00

A Graphic Designer’s Dilemma: How to Prevent Revisions & Other Client Issues

Time is a freelance graphic designer’s biggest asset. We are paid per project basis. Unless we get a project done and approved by the client, we won’t get paid nor start on another project.

Being a freelance designer is a job made in heaven or hell. Don’t you love the feeling of fulfillment once your design has been approved?  Being recognized and praised for your work is the best feeling to have, but this is not always the case—some bosses are harder to please than others. We have been on that road before, on one time or another—clients demanding revision after revision, asking for changes and modifications. There are so many demands that you feel like every creative juice has been squeezed out of your head. What do you do?

Of course, there’s no easy answer to this. We can’t please everybody. Sometimes we get disgruntled because clients ask for too many changes that we have to compromises the whole design and aesthetic. Clashes can occur, especially since some clients lack the creative set to distinguish design from rubbish.

Photo by: Zsuzsanna Kilian

Avoiding Revisions and other Issues

As revisions are inevitable, there are actually a few ways on how you can avoid them:

Know what they want

Master the art of communication. Client communication is the most important part of Freelance Designing. The best way to solve misunderstandings and frustrations is simply through proper communication. Always ask them their demands and preferences before starting a project. Ask them for their expectations.

Meet halfway

For your part, give them an overview on how you work and on what they should expect from you. Give them details on what you can and what you cannot do. If you can, present them a portfolio of your previous works to give them a glimpse of your design philosophy.

The most important part is meeting halfway. Yes, we graphic artists are trained to know the good from the ugly–but do not assume you know what to do and what your client wants. See to it that your client’s needs are met but not so much that it could compromise the design.

Be Inspired

Photo by: Raja R

Take time to think and be inspired. Jumping on a project without some inspiration can cause creative burn out. Thus, find ways to get inspired in order to think of fresh and innovative ideas. Avoid getting ideas from the internet–go out and derive inspiration from real life. Brainstorm, read a book, take a walk or take a pencil and doodle. Sleep it in and start the project the next day–brain recharged and stress free.

Clearly explain to them the objectives of the project

You and your client should come up with a set list of objectives approved by both parties. So much time can be wasted if there are no ground rules given. So before starting a project, ask the client what they want to achieve for the said project, and put it in writing. Objectives will give you a clear rundown on where you’re heading for both you and your client. After finishing the project, you can see if the objectives have been met.

Present your client a timeline

Create a timeline for the current project handled. This will force you to put a deadline to the project, removing your chances of procrastinating. Creating a timeline will help you manage your time properly, so that you can proceed to other projects. Your client will appreciate the effort, as well.

Make your clients understand your side

Many of our headaches come from the clients themselves–for example, giving us low resolution images to use, or insisting on using Comic Sans MS for their site, or asking for crappy color combinations like orange and black. Do not be afraid to voice out your opinion as a designer–make them understand. Tell them that low res images won’t look good when printed out, that Comic Sans MS will make a web site look second grade-ish, and that orange and black is best left to use for the Halloween season.

A creative brief is a great tool to keep track of the project’s progress. It doesn’t need to be that long (as the name ‘creative brief’ suggests). A short, one page creative brief will do. Write a good creative brief and explain the design thoroughly, in order to prevent any more further provisions and changes.

Present your client with several design studies

Some graphic designers make the mistake of worshipping their own work. They think that their design is so good the client will instantly love it. Once creating a single design, their mind is closed for other new ideas on how to approach it. Read: This is a big mistake.

Clients love to work with people who have plenty of ideas. Multi-faceted designers are always valued. So for a project, be sure to present, three, four, or more proposed designs for the project to show off your versatility and imagination as a graphic designer. For every design, you can make more studies by varying colors, fonts and the layout design so that your client. Providing several variations by mixing and matching in order to provide the client a wide range of choices to choose from.

Don’t Worry: Revisions are OK!


If your client asked you for revisions, don’t be such a sour puss. Too many designers tend to complain and sulk if their design don’t get approved. The creative set are known to be too proud to accept the fact that their design needs a little tweaking. Accept it, be happy to have given feedback, and do your job.

Once you get a list of revisions, create an outline and prioritize things in order. Inform the client the maximum client revisions you’re willing to do per project, and ask them to give instructions to you in sets, and not one at a time.

Revisions can be tiring, but it is another way to learn and add experience. Moreover, strive to prevent further unnecessary revisions by listening to your client carefully.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...