Tags: , , , , ,

Complimentary Colors in Web DesignColor choices influence mood, emotion and tone; a carefully chosen color scheme can clearly express a specific design style. There are certain colors that look good together, while other colors look so painful you have to click away before they burn your eyes.

Complementary Colors on Websites just makes a harmonious combination. On this post you’ll learn about them and a showcase of websites using the colors.

What are Complementary Colors?

Complimentary Colors in Web DesignDictionary Meaning

complementary color
–noun
1. Art.
a. one of a pair of primary or secondary colors opposed to the other member of the pair on a schematic chart or scale, as green opposed to red, orange opposed to blue, or violet opposed to yellow.
b. the relationship of these pairs of colors perceived as completing or enhancing each other.

Complementary colors are opposite on the color wheel. Red and green, yellow and violet, blue and orange, are the three simple pairs of complementary colors. These colors always go well with each other, hence the term complimentary.

How can complimentary colors helps in your design?

Complimentary colors just look great together and compliment each other. When people look at them, it makes them FEEL good. That’s how humans response psychologically. That’s also the reason why the color wheel is used by many logo designers, marketers, and advertisers.

Companies have been aware of complimentary colors for some time and most companies will spend a decent amount of money on getting it right. Good color choice really should be a priority for any marketing campaign, whether you are a big company like Microsoft or o2, or you are simply a local business just starting out. It can be difficult so here are a few tips on how to find the right colors for your brand.

Before choosing the colors to use you need to consider some things. For instance, a darker shade of purple and a lighter shade of yellow do not compliment one another nearly as well as a darker shade of purple and a darker shade of yellow do. Having a color wheel in hand would help.

Knowing this, when organizing your website, keep in mind that darker colors are easier to see than are lighter ones. Thus, if you choose a text color other than black, make certain it’s the darker shade of whatever complimentary color you’re using.

Additionally, be careful when using too many colors on your site. Choose two to begin with (complimentary colors, of course), and see what you can do using different shades.

Below are some best examples of sites using Complementary Colors.

Red and Green

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Orange and Blue

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Yellow and Purple

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Complimentary Colors in Web Design

Your Turn

Did you find this site inspirational or do you have some more sites using Complimentary Colors, send us a comment!

Get CISSP certified to become expert web designer. Learn about different color combination and their effects using 640-863 tutorials and 642-825 study guides.

Tags: , , , ,

Create a Cute Easter Bunny VectorToday is Easter Sunday, and like we all know Easter Eggs and Easter Bunny is what first comes to our mind. In this tutorial, we’ll be making a Cute Easter Bunny using just the basic shapes and a variety of simple tools, making it a good start for Illustrator beginners. We’ll also be using some basic gradients, color tools and the Pathfinder with a step by step instructions.

Try to create a Easter Bunny now using this tutorial and send it to your friends and relatives!

Final Image Preview

Below is the final image we will be working towards in this character creation tutorial targeted at the beginner to intermediate Illustrator user.

Create a Cute Easter Bunny Vector

After opening up Adobe Illustrator, create a new document. For this project the size of the document doesn’t matter at all, Illustrator has a vast area of artboard beyond the document edges that can be used.

First, Lets create some Rectangles for the colors we will use. Using the Rectangle Tool (M) create the rectangles and Edit the Fill by double-clicking the box and filling in the hex value or # in Color Picker.

Create a Cute Easter Bunny Vector

Create an ellipse with the Ellipse tool (L). With the ellipse selected, create a radial gradient from the gradient panel. Make the first Color Stop in the radial gradient white and the second Color Stop by holding Shift and using the Eyedropper Tool(I) select the Color with a Hex Value of #BEBEBE. Within the gradient panel, click on the Midpoint Indicator on the Gradient Slider and move it right, adjust to 87%. Remove the Stroke if there is by Clicking the None(/) on the toolbar below it.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Next, with the Direct Selection tool (A), select the bottom anchor point of the ellipse and drag it up about one fourth the way up the ellipse.

Create a Cute Easter Bunny Vector

Select Top Anchor Point. Click the Right Point and Drag it to the right while holding Shift. Same goes with the Left Point.

Create a Cute Easter Bunny Vector

With the Path Selected, Free Transform it and make it more wider. Hold Shift + Alt while dragging the corners to scale it from the center. Copy the shape again by dragging the Path on the Create a New Layer on the Layers Tab. Making a duplicate path. On the Menu Bar, Click on Object > Transform > Reflect. Then on the Reflect Settings, select Horizontal.

Create a Cute Easter Bunny Vector

Scale it down and make it more shorter and flat by dragging the Top Point down. Move it to the bottom.

Create a Cute Easter Bunny Vector

Copy the Head Shape and make it more bigger by using the Free Transform Tool.

Create a Cute Easter Bunny Vector

Create an Ellipse for the Eyes and add a Radial Gradient.

Create a Cute Easter Bunny Vector

Copy and Paste it at the back of the Path. Free Transform and make it wider. Use the Eyedropper Tool and point it on the Head Shape.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create another Ellipse with White Fill and move it. Then Create another Smaller Ellipse.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Select the Paths for the Eyes.

Create a Cute Easter Bunny Vector

Copy and Paste the Head Shape. Free Transform and make it more Narrow. Rotate Counter-Clockwise. Send the Path at Back under the Layers Tab. Copy and Paste the Path and Free-Transform and Scale it down.
Use the Eyedropper Tool and Pick the Pink Pallete(#D060A3) we made on the First Step.

Create a Cute Easter Bunny Vector

Select the Paths that made up the Ears.Group them and make a copy. Transform > Reflect and select the Vertical. Then move it to right side to make the Right Ear.

Create a Cute Easter Bunny Vector

Select the Body Shape Path and make a Copy. Scale it down and make the Radial Gradient to Linear Gradient. Move the midpoint to 83.52%. Add a Stroke and Enter the #BEBEBE on Color Picker.

Create a Cute Easter Bunny Vector

Copy the Nose-Body and Free-Transform. Use the Eyedropper Tool and pick the Pink Pallete. Scale it down and try making it more flat. Add an Ellipse with White Fill.

Create a Cute Easter Bunny Vector

Create an Ellipse and make another Copy. Move it a little to the Right. Select Both and use the Pathfinder. Subtract it from shape Area.

Create a Cute Easter Bunny Vector

Change the Fill Color to #E4ACCE. Make a copy and Transform > Reflect. Select Vertical. Move it to the Right.

Create a Cute Easter Bunny Vector

For the Teeth, Using the Round Rectangle Tool. Place it on the center of the Nose.

Create a Cute Easter Bunny Vector

Use the Eyedropper Tool and Pick on the Head Shape. Add a stroke of Grey and change it to Linear Gradient. Move midpoint to 57.69%.

Create a Cute Easter Bunny Vector

Create 2 Ellipses.

Create a Cute Easter Bunny Vector

Select the 2 Ellipses and the Round Rectangle. Make sure the Round Rectangle is on the bottom of the 2 Ellipse on the Layers. Use the Path Finder and Subtract.

Create a Cute Easter Bunny Vector

Add a Line using the Line Segment Tool on the Middle of the Teeth. With a Stroke of Grey.

Create a Cute Easter Bunny Vector

Creat an Ellipse and Add a Radial Gradient. Make the 2nd stop White while the 1st stop a Grey. Adjust Midpoint to 64.29%.

Create a Cute Easter Bunny Vector

Move it to Back and Set Transparency to Multiply.

Create a Cute Easter Bunny Vector

Create 2 Ellipse and try to imitate the Arc on the Mouth Line. On the Pathfinder, Subtract and Expand.

Create a Cute Easter Bunny Vector

Create 3 Small Elipse with Grey(BEBEBE) Fill. Group them and set opacity to 40%.

Create a Cute Easter Bunny Vector

Copy and Transform > Reflect. Select Vertical.

Create a Cute Easter Bunny Vector

Move it to the Right Cheek.

Create a Cute Easter Bunny Vector

Using the Arc Tool. Create an Arc for the Whiskers. Make the stroke with a Grey(#BEBEBE) color.

Create a Cute Easter Bunny Vector

Create 3 more by Copying and Free-Transform and Scaling. Group and Set Opacity to 50%.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Copy and Reflect Vertically them move to right.

Create a Cute Easter Bunny Vector

Create an Ellipse with Red Fill. Using the Direct Selection Tool. Drag Left Anchor to Left. Click top Point and drag it upwards while holding Shift. Same with the bottom point. Adjust Height and make it smaller.

Create a Cute Easter Bunny Vector

Add a Linear Gradient. Click 2nd Stop, Hold shift and Select the Dark Red from our palletes. Then the 1st Stop, Hold shift and Select the Red Color.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Copy and Scale Down. Using the Gradient Tool, drag from right to left.

Create a Cute Easter Bunny Vector

Adjust Height and Set Opacity to Multiply.

Create a Cute Easter Bunny Vector

Group them and make a copy. Transform > Reflect then move it to the right.

Create a Cute Easter Bunny Vector

Create an Ellipse, Use the Eyedropper and pick on the Ribbon’s Gradient. Set it to Radial Gradient. Using Gradient Tool, drag from middle top right to bottom left.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create an Ellise. Free Transform and using the eyedropper again select on the Body’s Gradient. Adjust midpoint to 74.73%.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Create a copy, scale it down and move a bit to the bottom.

Create a Cute Easter Bunny Vector

Click on the 2nd Stop and Adjust the Color on the Color Tabs or set it to 39.22%.

Create a Cute Easter Bunny Vector

Create 3 Small Elipses and Pick on the Gradient of the Big Ellipse with the Eyedropper.

Create a Cute Easter Bunny Vector

Group them and Rotate Counter-Clockwise. Make a copy and Transform > Reflect and move to the right.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

For the Egg, Create an Ellipse. Free-Tranform and make it Narrower. Scale it up to make it bigger.

Create a Cute Easter Bunny Vector

Create a Cute Easter Bunny Vector

Bring it to back of Feet Path under Layers Tab. Make a strip using the Rectangle Tool. Pick on the Pink Pallete.

Create a Cute Easter Bunny Vector

Make more Strips and make your own design.

Create a Cute Easter Bunny Vector

On the menu, Click on the Effect > Warp. Set options to settings below.

Create a Cute Easter Bunny Vector

Create a copy of the Egg Shape. Select the New shape and the Strips. Make sure the egg shape is at the back of the Strips on Layers tab. On the Pathfinder, Subtact from shape area.

Create a Cute Easter Bunny Vector

Create Ellipses and go wild with your design and use different Fill Colors.

Create a Cute Easter Bunny Vector

Create a copy of the Egg Shape and Bring it to Front. Set the Transparency to Multiply.

Create a Cute Easter Bunny Vector

Using the Rectangle Tool, Create a Box to bound our Illustration. Add a Radial Gradient Fill with a lighter blue and blue Fills. Send it to bottom or back of the Layers under Layers Tab.

Create a Cute Easter Bunny Vector

Add a Landscape or some hills. with a Light Green Fill. Dont worry about making excess of the bounding box. Create a copy of the Box and Select the Landscape. On the Pathfinder, click on the Subtract from Shape Area.

Create a Cute Easter Bunny Vector

Create Clouds using Ellipses. On the Pathfinder, click on the Add from Shape Area.

Create a Cute Easter Bunny Vector

Click Expand and Set Opacity to 90%.

Create a Cute Easter Bunny Vector

Create a copy, Scale it down and Move it to the bottom right.

Create a Cute Easter Bunny Vector

Create an Ellipse and add a Radial Gradient just like below. Use the 1st stop and adjust in colors to something darker grey.

Create a Cute Easter Bunny Vector

Set the Transparency to Multiply.

Create a Cute Easter Bunny Vector

Final Image Preview

We’re Done! That was easy wasn’t it? Below is the Final Image I obtained. Enjoy and Happy Easter!

Create a Cute Easter Bunny Vector

Join 1Y0-A17 web designing course to become expert of this art. Download PMI-001 tutorials and 70-646 demos to learn best web design practices.

Tags: , , ,

<p>Design was here is now here!</p>What it’s all about
Design was here is a design blog that features different aspects of design. It showcases design trends, articles, tutorials and resources for use in the field of design. Design is all over the place and can be seen anywhere. This serves as scrapbook of design post that I’ve written, seen and experienced and tell that I was there. Design was here is dedicated in sharing those to the readers, to inspire them to learn more, share it to the community and apply it with their daily lives.

How it all started

I’ve been a fan of design blogs for a few months now. I find trends, tutorials, and articles that I find useful and I try applying it on my works and personal stuffs. I thought that I could also do the same thing and share my ideas to the design community.

What to expect

Currently, i have a lineup of new and exciting articles about current Design Trends, Tutorials, Inspirations and Resources that i would like to share.

Expect these articles to be helpful and effective. These articles i will soon be publishing consists a part of my motivation to finally have the courage to launch this design blog. If it did help me, it would surely help you too. Visit this site from time to time to keep you posted and updated.

Extend your help with Design was here.

You can help us by sharing this to the community through voting us with any (or all!) social bookmarking buttons you can see below this post. This helps in bringing traffic to the site and spreading the love to everyone who would benefit from this post. Every post was well written and researched, taking few hours and even weeks of work. I would be glad that I somehow teach and inspire other people with my posts.

So what now?

Give me a warm welcome by commenting on my post and let me know that you’re here. Now, you can subscribe to my feeds through RSS or Email and get updates on my recent post. You can also follow me via twitter and contact me through the contact form. Spread the love!

I have just launched my very own design blog and the best part is, I am now ready to share it with you guys. Don’t I deserve any warm welcome? I would very much appreciate if you do. It wouldn’t cause you much by just simply leaving a comment to anything in here, to any posts that has caught your attention and interest. I would love to hear from you and I would very glad to comment you back.