Blog Archives

infographic series - Goldfish jumping from a fish bowl

1/29/2018

Icons that show motion are fun to look at and also great fun to make. Takes this happy fish, enjoying a swim in his fish bowl, jumping out and creating some bubbles. And there are a few new tips in here to make this even easier!

Start the fishbowl with a circle, add a heavy stroke, no fill.

Draw a rectangle over the top of the circle, this will cut off the top and make it flat.

Select both the circle and the rectangle, use the Pathfinder Minus Front Mode to remove the rectangle and leave the flat top. Make a copy of this off to the side for later use.

Draw a rectangle, fill it with a light blue for the water.

Use the Curvature Tool and click on the top of the rectangle and pull up or down to curve the top and create a wavy edge.

Copy the shape, flip it and fill it with a slightly different color and set the opacity to around 30-40% to show the other water through. Select both shapes and CUT (or copy) them.

Select the fish bowl and click on the Draw Inside at the bottom of the Tool Bar.

Paste the wave shapes into the bowl and position them so the waves are in the upper third of the bowl.

Draw a rounded rectangle, round the end completely.

Select the Stroke Panel and click on the Dashed Line check box and put in random numbers to create a random dashed line. Make sure to select the rounded cap (hotdog) the line ends.

Control the spacing and the line length in the Stroke Panel until you get the right spacing.

Use the Direct Selection Tool to delete the left side and lower left arc.

Place the "fish path" in position to show where the fish is jumping. Add an arc to the side of the bowl for a reflection. Set the opacity of the arc to 30%.

Use the copy of the fishbowl create earlier. Fill it with a slightly different blue than the waves, set the opacity to 25% This will get pasted into the bowl but the waves are already pasted into it so using the Draw Inside mode is no longer available.

Open your Layers Panel. Find the "Clip Group" that is your fishbowl and waves. Open the group up by clicking on the "Twirly" (yes, really called a Twirly) on the left of the icon to open up the contents. Find the layer you created in the last step and drag it INTO the layer order INSIDE the Clip Group, this is how you can add to a Clip Group that has been created with Draw Inside.

Here is the slip shadow in the bowl.

Create the body of the fish starting with a circle.

Use the Direct Selection Tool to select the upper point of the circle. Use the UP arrow on the key board to move the point straight up.

Convert the rounded top point to corner point in the Control Bar.

Use the polygon tool to draw a triangle. While drawing, use the down arrow to change the number of side to three.

Place the triangle over the fish body, select both shapes and use the Pathfinder Unite Mode to combine the two shapes. COPY this final shape.

Use the Stroke Panel to round the corners of the stroke.

Fill the fish with a gold color.

Click on the Draw Inside mode and paste the fish shape into the body. Remove the stoke and add a lighter color fill and move it to the side to create a slip shadow effect.

Add a few circles, one black, one white, for the eyes. Create an arc for the mouth.

Place the completed fish at the end of the dashed fish path. Add some circles, smaller as they get away from the bowl, to show bubbles.

Create four lines in a "plus" formation to show bubbles popping. You have just made a happy gold fish jumping in and out of the fishbowl.

1 Comment

INFOGRAPHIC SERIES - Droopy eared Dog

1/22/2018

1 Comment

This is the second in a series of animals using basic shapes. This is nearly the same as the Curious Cat tutorial here, adding a few dog features to make it a droppy-eared dog. Enjoy!

Create a circle. Duplicate the circle and overlap it half way. Select both circles.

Use the Pathfinder Intersect Mode to create the body of the dog.

Draw a rectangle and place it over the shape. Select both shapes.

Use the Pathfinder Minus Front Mode to remove the lower portion of the body.

Use the Direct Selection Tool to select the lower corners and pull the Corner Widgets in to round the corners slightly.

Use the Selection Tool to pull the body shape longer.

Add a circle with a darker color fill for the head.

Add two circles, filled with white, for the eyes.

Add smaller black circles.

For the tongue, create a rectangle, filled with pink. Use the Direct Selection Tool to select the bottom corners and pull the corner widgets in to round the bottom.

Draw an Arc for the mouth. Add a stroke to make it bigger. Place the tongue and then bring the Arc to the front to cover the edge of the tongue.

Add a black circle for the nose.

Draw an Arc for the tail. Add a stroke to make it bigger. Make the color darker than the body for contrast.

For the ears, draw a rectangle and add a stroke.

Pull the corner widgets into the max amount to round the ends.

Use the Direct Selection Tool to select and remove half the shape.

Place the ear behind the head. Repeat the process for the other ear.

Create circle or ovals, in sets of three, for the paws.

Select the body and copy it, then click the Draw Inside button at the bottom of the Tool Bar.

Paste the body into the body, change the color to a darker color and use your left/right arrow keys to move the body to create an offset shadow look.

Click on the Draw Normal mode at the bottom of the Tool bar. You have a cute, droopy-eared dog!

1 Comment

INFOGRAPHIC SERIES - Curious Cat

1/14/2018

0 Comments

Fun and cute curious cat, with a little smirk on its face. Simple shapes, a few easy steps and you have your very own kitty. This is the start of the animal series with these shapes so look for more animals with these basic shapes.

Create a circle, duplicate it and position it half way over the other circle.

Select both circles, use the Pathfinder Intersect mode to leave the center section for the body. Copy this shape for the ears.

Draw a rectangle over the body, select both shapes, use the Pathfinder Minus Front mode to cut off the lower half of the shape.

Use the Direct Selection Tool to pull the base down.

Use the Direct Selection Tool to select the bottom corners and pull the corner widgets in to round the bottom edges.

Draw a circle for the head, place it on the body.

Paste the shape copied from the main body step. Move the ears into position.

Create large white circles for the base of the eyes.

Add smaller dark circles to give the eyes direction.

Use the Polygon Tool to create a triangle for the nose.

Add lines for the whiskers using a darker color.

Use the Arc Tool to create a tail, add a heavy stroke and place it behind the body,

Add two sets of small circles to the base of the body for the paws.

Copy the body, then click on the Draw Inside mode at the bottom of the tool bar.

Paste the copied shape, change the color then click on the Draw Normal mode.

Double click on the body, then click on the shape again. The screen will go slightly gray (you are now in isolation mode). Click on the Draw Inside mode and paste the copied shape into the body, darken the color. Use the Escape key to exit Isolation mode then click on the Draw Normal mode.

To add depth the ears, select the ears, the choose Object>Path>Offset Path. Use a negative number as an offset to make the shape smaller.

Fill the smaller shapes for the inner ears with a lighter color.

Add a small arc the for the mouth and your cat has a great look and cute smile.

0 Comments

INFOGRAPHIC SERIES - Snowy Weather

1/8/2018

1 Comment

It's cold out there! So here is a snow storm icon with unique snowflakes. Create as many as you want to show a flurry or a storm. Stay warm.

Start the cloud with a rectangle.

Pull in all 4 of the corner widgets to round the ends.

Repeat the process with smaller rectangles and overlap the new shape 1/2 over the lower shape.

Create a third rounded rectangle. Select all three, use the Pathfinder Unite mode to create one shape.

Add a 30pt stroke, remove the fill color.

Use the Scissor Tool and click at the bottom of the cloud in two locations. Use the Direct Selection Tool to remove the cut section from the scissor tool. Round cap the ends in the Stroke Panel.

Create a star. Draw the star and use the UP arrow to create more points.

Draw a line and circle from the star.

Add lines to the line. Group all the lines and circle. Do not group the star with the other items.

Select the grouped items. Choose the Rotate Tool and OPTION + CLICK in the center of the snowflake (shown with the red +). OPTION + CLICK will place the rotation point in the center and open the Rotate dialog box.

Snowflakes have 6 sides so the angle is 360° divided by 6. You can type ANY equation in the box, this is the calculator. Click COPY (don't click OK) to copy the set 60°.

Once you have rotated/copied the first set use COMMAND + D to duplicate the last rotate command until you have all 6 arms of the snowflake. Select all the elements and group them together.

You can create any type of arm for each snow flake with some simple shapes.

Longer arms will overlap as the unit is rotated around the center.

Try simple lines and shapes to see what the outcome will be,

These simple shapes can turn into a cool snowflake.

Same method each time. Create an arm, group all the elements in the arm together. Rotate the arm around the center at a 60° angle. Duplicate the rotation and a snow flake emerges.

Longer arms will touch or overlap when rotated around.

The possibilities are endless, just as infinite as there are unique snowflakes.

Add one or more snowflakes to your cloud and you have a unique snow cloud icon.

1 Comment

Design Points n PixelS

infographic series - Goldfish jumping from a fish bowl

INFOGRAPHIC SERIES - Droopy eared Dog

INFOGRAPHIC SERIES - Curious Cat

INFOGRAPHIC SERIES - Snowy Weather

Archives