PeHaa Blog » tutorial

Create your portfolio gallery using html5 canvas – tutorial

PeHaa — Sun, 19 Feb 2012 20:04:22 +0000

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. See the demo and try the hover effect. The grayscale “copies” of the images are created with canvas and we use pure css3 for the smooth changes.

Download the source files

Portfolio gallery with canvas
.zip 0.25MB

Step 1 : Html markup

Let’s start with a simple markup, each portfolio entry being an element of an unordered list.




	
	Gallery :: Tutorial by PeHaa 
	


	
		Gallery
		
			Spring flowers 1
			City lights 1
			Spring flowers 2
			City lights 2
			Spring flowers 3
			City lights 3
		
		Photos by Pinkonhead

Step 2: Basic styles

We start our stylesheet with a basic reset.

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}
:focus {outline: 0;}
a {text-decoration:none;}

We will use 300px x 300px images. The main containing element #wrap is centered up (margin: 0 auto) and given the width of 1020px (=340 x 3).
The list items are given float : left and are positioned relatively. The image title is wrapped in a div element that slides up on hover. To achieve a smooth effect we apply a css3 transition.
(Note that for the simplicity of this tutorial I don’t use any vendor prefixes. Therefore, you’ll find them in the source file to download).

#wrap {
  width: 1020px;
  margin: 0 auto;
}
li {
  float:left;
  position:relative;
  display:inline-block;
  width:300px;
  height:300px;
  margin:10px;
  padding:10px;
  background:#fff;
  box-shadow:0 0 5px rgba(0,0,0,.35);
}
li div {
  position:absolute;
  height:0;
  width:280px;
  background:rgba(0,0,0,.45);
  overflow:hidden;
  bottom:10px;
  left:10px;
  padding: 0 10px;
  line-height:50px;
  color:#fff;
  transition:height 1s;
}
li:hover div {
  height:50px;
}

Click on the image to below to see the result at the current stage.

Step 3: Canvas

Now, we will make use of the html5 canvas element to draw the grayscale versions of our images. Below you’ll find a createCanvas custom function that creates a canvas element, takes a copy of an image, performs the conversion and draws it to the canvas and finally inserts the canvas to the DOM where desired. With .each() method the createCanvas function is iterated across all images within the #gallery list.

$(window).load(function() {

	  $('#gallery img').each(function() {

	    createCanvas(this);
	  });

	  function createCanvas(image) {

	    var canvas = document.createElement('canvas');
	    if (canvas.getContext) {
	      var ctx = canvas.getContext("2d");

// specify canvas size
	      canvas.width = image.width;
	      canvas.height = image.height;

// Once we have a reference to the source image object we can use
// the drawImage(reference, x, y) method to render it to the canvas.
//x, y are the coordinates on the target canvas where the image should be placed.
	      ctx.drawImage(image, 0, 0);

// Taking the image data and storing it in the imageData array.
//You can read the pixel data on a canvas using the getImageData() method.
// Image data includes the colour of the pixel (decimal, rgb values) and alpha value.
// Each color component is represented by an integer between 0 and 255.
//imageData.data contains height x width x 4 bytes of data, with index values ranging from 0 to (height x width x 4)-1.
	      var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
	          pixelData = imageData.data;

// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
	      for (var y = 0; y < canvas.height; y++) {
	        for (var x = 0; x < canvas.width; x++) {

// You can access the color values of the (x,y) pixel as follows :
	          var i = (y * 4 * canvas.width) + (x * 4);

// Get the RGB values.
	          var red = pixelData[i];
	          var green = pixelData[i + 1];
	          var blue = pixelData[i + 2];

// Convert to grayscale. One of the formulas of conversion (e.g. you could try a simple average (red+green+blue)/3)
	          var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);

	          pixelData[i] = grayScale;
	          pixelData[i + 1] = grayScale;
	          pixelData[i + 2] = grayScale;
	        }
	      }

// Putting the modified imageData back on the canvas.
	      ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);

// Inserting the canvas in the DOM, before the image:
	      image.parentNode.insertBefore(canvas, image);
	    }
	  }
	});

Step 4: Styling the canvas

If you look into the generated code source you’ll find


	Spring flowers 1
	City lights 1
	...
	...

Let’s add some styling to define the canvas behavior in normal and hover state:

canvas {
  opacity:1;
  position:absolute;
  top:10px;
  left:10px;
  transition:opacity 1s .2s;
}
li:hover canvas {
  opacity:0;
}

And that’s it ! This example will not work in Internet Explorer versions below 9. You could provide an alternative solution using grayscale filter and adding some jQuery to recreate the transition effect on hover – but this part is not covered in this tutorial.

The beautiful photos featured here were taken by Pinkonhead, and are shared as freebies on her blog. Enjoy.

Create a fancy responsive image-on-hover effect

PeHaa — Sat, 11 Feb 2012 20:37:26 +0000

In this tutorial we will create a fancy image-on-hover effect. We’ll use pure css3 and provide a jQuery solution for the browsers that do not support opacity and transitions. We will also take care that it works responsively.

Download the source files

Fancy responsive image-on-hover effect
.zip 0.2MB

Step 1 : Photoshop

We have to prepare two versions of the image : the image we want to see on hover and its desaturated copy. Mine are 845px x 515px.

Step 2 : Let’s start with the html markup

..

Step 3: Basic styles

We start our stylesheet with a basic reset.

html, body, div, span, h1, h2,  p, a,  ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}

The main containing element #wrap is centered up and given the specific width 865 px = 845px (image size) + 2x10px (borders size).
The div that contains the images is given position:relative (to properly position the two versions of the image) and overflow hidden (we will size up and rotate our images and we want to hide the exceeding parts).

#wrap { width: 865px; margin: 0 auto;}
ul {margin-top:50px; }
li div {width:845px; height:515px; overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px  rgba(0,0,0,.4);}

Step 4: Grayscale to color transition (see demo)

The img element is positioned relatively, the colored version (.onhover) is given 0 opacity and absolute position. When the containing div is being hovered over the opacity of .onhover element changes to 1. To make the transition smooth we apply the transition property to img. (For simplicity I decided to omit all vendor prefixes).

img {position:relative; top:0;left:0;
transition:all 1.5s .5s; }
img.onhover {opacity:0;position:absolute;}
li div:hover img.onhover {opacity:1;}

To deepen the effect of transition between the normal and hover state we will add a fading out inner shadow (span.shadow):

.shadow {position:absolute; top:0; left:0; opacity:1; background:transparent;
width:100%; height:100%;
box-shadow: inset 0 0 60px 20px rgba(37,27,23,.5);
transition:opacity 1.5s .5s;}
li div:hover .shadow {opacity:0;}

Step 5: Let’s add scaling and rotation (see demo)

We just have to add the transform property, specify the transform origin as well as the transform parameters in hover state.

img {position:relative; top:0;left:0;
transition:all 1.5s .5s;
transform: rotate(-4deg) scale(1.2);
transform-origin:50% 50%;}

li div:hover img {transform: scale(1) rotate(0);}

Step 6: And what if we want it responsive ? (see demo)

First let’s modify a little bit the style of #wrap and the li div to keep them flexible. In the latter case we just no longer specify the height and width of the element.

#wrap { max-width: 865px; margin: 0 auto; width:95%;}
li div { overflow:hidden; position:relative;
border:10px solid white; box-shadow: 0 2px 5px rgba(0,0,0,.4);}

We have also to modify the styling of the img element – we add three new properties to the img element.

img {max-width:auto; vertical-align:bottom; width:100%;}

Step 7: jQuery solution

We will add a jQuery solutions for IE.

You can also go further and recreate the full transition with jQuery animate function.

And that’s it. I hope you got inspired by this example – it’s your turn to play with css transitions. Enjoy !

Intriguing animate-on-scroll effect – jQuery tutorial

PeHaa — Tue, 23 Aug 2011 19:29:42 +0000

I suppose that I was not the only one to become speechless in front of the Nizo for iPhone website.
In this tutorial we try to recreate the intriguing scrolling effect. We’ll go for simplicity : 5 objects to animate and linear movement, no easing. The basis that opens the door for further elaboration.

Click here to see the demo.

Download the source files

My herb garden
.zip 0.4MB

We’ll start with the html structure :





My herb garden



  
    
      My herb garden
      Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.
    
    
      Scroll down
       
    
      
        coriander
        
        Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.
      
      ...
      ...
      ...
      ...
    
      by PeHaa 2011

The document is composed of 4 elements header, #separation, section and footer, contained within two divs : #wrap_out and #wrap.
The stylesheet begins with a simple css reset and the @font-face declaration

body, div, h1, h2, form, fieldset, input, textarea, footer, p, img {
	margin: 0; padding: 0; border: 0; outline: none;
}
a { text-decoration:none; color: #fff;}

 @font-face {
 font-family: 'DeibiRegular';
 src: url('deibi-webfont.eot');
 src: url('deibi-webfont.eot?#iefix') format('embedded-opentype'),  url('deibi-webfont.woff') format('woff'),  url('deibi-webfont.ttf') format('truetype'),  url('deibi-webfont.svg#DeibiRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}

Right now, the important point is to set width : 100% and overflow-x: hidden for the #wrap_out. The #wrap element centers the content of the page.
section is positioned relatively and the animated herbs (class="element") are positioned absolutely.
Let’s continue with our stylesheet :

body {
	font-family:'DeibiRegular', Helvetica, Arial, sans-serif;
	background:#f2f2f2 url('images/bg.jpg');
	color: #fff; width:100%;
}
#wrap_out {width:100%; overflow-x:hidden;}
#wrap {width: 960px; margin: 0 auto; z-index:1;position:relative;}

header {display:block;z-index:2 position:relative;}
header p {display:block; font-size:30px; padding: 70px 60px 0px;}
h1 {text-align:center;font-size:130px; margin-top: 30px; text-shadow: 0 0 60px #889473;}
h1 em {color: #f5f187;font-style: normal;}

#separation {margin: 0 auto;width: 592px;z-index:-1;position:relative;}

section {position:relative; margin-top: 120px;display:block}

.element { position:absolute; display:block;}
.element#coriander {top:0px; left:30px; width: 286px; height: 272px;}
.element#rosemary {top:40px; left: 335px; width: 370px; height: 183px;}
.element#chives {top : 0px; right:30px; width: 197px; height: 514px;}
.element#lemonbalm {left: 30px; top:280px; width:265px; height: 233px;}
.element#basil {right: 255px; top:250px; width:368px; height: 263px;}

footer {margin-bottom: 10px;text-align:center;font-size: 30px; display:block}

The idea is to encourage the visitor to scroll down by positioning the #separation element at the bottom of the page. We want the #separation to stay there when the window is resized but to move up when we start to scroll down. A possible way to do that is to make the height of the header element dependent on the height of the window browser :

$(document).ready(function () {
    var myHeight;

    function init() {
        myHeight = $(window).height();
        $('header').css('height', myHeight - 300);
    }
    init();
    $(window).resize(function () {
        init();

    });
})

To animate the .element we’ll go simple and use a linear function to move it from its initial position to its target position. We assign four parameters (its initial and final coordinates) to each element :

$('.element').each(function(i) {
			var myElement =$(this);

				switch (i)
				{ case 0 :
					myElement.data('params', {top0 : -1300, x0 : -2600, top1: $(this).css('top'), x1: $(this).css('left')});
					break;
				case 1 :
					myElement.data('params', {top0 : 0, x0 : -930, top1: $(this).css('top'), x1: $(this).css('left')});
					break;
				case 2 :
					myElement.data('params', {top0 : 280, x0 : -1030, top1: $(this).css('top'), x1: $(this).css('left')});
					break;
				 case 3 :
					myElement.data('params', {top0 : -1200, x0 : -2330, top1: $(this).css('top'), x1: $(this).css('right')});
					break;
				case 4 :
					myElement.data('params', {top0 : 250, x0 : -530, top1: $(this).css('top'), x1: $(this).css('right')});
					break;
				}
			});

What happens when we scroll ? The top property of each element and the left (for coriander, rosemary and lemon bald) or right (for chives and basil) changes as a function of the scroll position :

$(window).scroll(function () {
var s_max = myHeight / 2 + 500;
    function move(p0, p1, s) {
        return Math.min((-p0 + p1) / s_max * s + p0, p1);
    }

    var scrollTop = parseInt($(window).scrollTop());
    $('.element').each(function (i) {

        var myX = move($(this).data('params').x0, parseInt($(this).data('params').x1), scrollTop),
            myY = move($(this).data('params').top0, parseInt($(this).data('params').top1), scrollTop);

if (i < 3) {
            $(this).stop().css({
                left: myX + 'px',
                top: myY + 'px'
            })
        } else {
            $(this).stop().css({
                right: myX + 'px',
                top: myY + 'px'
            })
        }
    })
})

move is a function of the scroll value and has two parameters : initial (p0) and final (p1) position of an element.
Before we start scrolling, s = 0, move is equeal to p0. When scroll reaches s_max, the value of move is p1. The min operator prevents further movement.
As I said this is one of the simplest possible solutions.
What is s_max ? I wanted the animation to finish once the elements are verticaly centered in the middle of the window (I’m not pixel perfect here).
Where is that point ? Imagine that we don’t animate our elements and that they are in their final positions. Notice that we have to scroll down 500px (see the scheme below), to see the top of the second row of our herbs. If we scroll down a half height of a window more we will see them in the middle.

We want to be sure that the page is high enough so that the elements could reach their final positions. To assure that we will make the property height of section dependent on the height of the browser window, in this case we need to scroll $(window).height/2 + 500. We have 240px above the section (120px + 120px). The minimum height of section is then $(window).height/2 + 260. We add a line to the init function

function init() {
    myHeight = $(window).height();
    $('header').css('height', myHeight - 300);
    $('section').css('min-height', Math.max(myHeight / 2 + 260, 600));
}

It was tested in Safari, Firefox, Chrome, Opera, IE7 and IE8. It works in the last two if you don’t forget to add

I hope you find it useful. Please bookmark and share.
Let me know what you think – I’m looking forward to your comments. Thanks.

postcard from Paris – css3 keyframes animations in use

PeHaa — Mon, 15 Aug 2011 14:27:47 +0000

I decided to explore the area of css3 keyframes animations. The idea was simple – to create a sort of virtual postcard. I live in Paris so obviously I send you my greetings from Paris :). Click here or on the image to view the animation demo.

Download the source files

(.psd file included)
Postcard from Paris
.zip 1.9MB

The css3 animations are supported by : Chrome 2+, Safari 4+, Firefox 5+, iOS Safari 3.2+ and
Android 2.1+ (source Smashing Magazine).
We are going to animate 3 elements : the clouds (there are three layers of clouds), the rotating phare light and the Eiffel Tower sparkling.

The html structure is very simple :





Greetings from Paris


   
      Bonne Nuit PARIS !
      
      
      
         
         
      
      
      by PeHaa, Paris 2011

We will use the following images (I will discuss the sparkling effect a little bit later)

Let’s start to complete the css stylesheet :

Animating clouds

To animate the three layers of clouds independently we use the following keyframes. (Notice that each time I use the -webkit- and -moz- prefixes).

/* will be applied to #wrap that has 3 backgrounds layers */

	@-webkit-keyframes wind  {
	         0% {background-position: 0px 200px,0px 350px, left top;}
			50% {background-position:  500px 40px,600px 450px, left top;}
			100% {background-position: 1000px 200px,1200px 350px, left top}
	}

	@-moz-keyframes wind  {
	         0% {background-position: 0px 200px,0px 350px, left top;}
			50% {background-position:  500px 40px,600px 450px, left top;}
			100% {background-position: 1000px 200px,1200px 350px, left top}
	}

/* will be applied to #roofs that has 2 backgrounds layers */

	@-webkit-keyframes wind1 {
	         0% {background-position: 100px 250px, left bottom;}
			50% {background-position:  650px 150px, left bottom;}
			100% {background-position: 1300px 250px, left bottom}
	}

	@-moz-keyframes wind1 {
	         0% {background-position: 100px 250px, left bottom;}
			50% {background-position:  650px 150px, left bottom;}
			100% {background-position: 1300px 250px, left bottom}
	}

This way we have defined the property of background-position for the beginning, middle and end of our animation. Next we add :

#wrap {-webkit-animation: wind 80s linear infinite;
       -moz-animation: wind 80s linear infinite;}
#roofs {-webkit-animation: wind 80s linear infinite;
       -moz-animation: wind 80s linear infinite; }

to associate the animations with the proper elements and to define the duration, timing-function and iteration count, respectively (I use the shorthand notation).

Animating phare light

This time we are going to simultaneously animate the opacity and rotate the phare light with the rotation origin in its top center point (as in the image above).

	@-webkit-keyframes phare {
	         0% { -webkit-transform:rotate(0deg); opacity:0}
		50% { -webkit-transform:rotate(180deg); opacity:1}
	        100% { -webkit-transform:rotate(360deg); opacity:0;}
	}
        #phare {-webkit-transform-origin: center top;
	        -webkit-animation: phare 15s linear infinite;}

(here and further, repeat the same with -moz- prefixes).

Adding sparkles

We will use two different images with sparkling effect

Below is the styling :

#eiffel_wrap { position:absolute; width:240px;
              height:462px; right:10px; top: 180px; opacity:0;}
#sparkling1 { position:absolute; background: url('images/sparkling1.png') no-repeat;
              width:240px; height:462px; opacity:0;}
#sparkling2 { position:absolute; background: url('images/sparkling2.png') no-repeat;
              width:240px; height:462px;  opacity:0;}

We will animate the #eiffel_wrap, #sparkling1 and #sparkling2.

@-webkit-keyframes sparkling {
		0% {opacity:0;}
		50%{opacity:1;}
		100% {opacity:0;}
	}

The idea is to use the sparkling animation to turn out and in the #sparkling1 and #sparkling2 elements within the 0.4s cycle, with the first in/out when the second is out/in. To achieve that we will delay the sparkling animation of 0.2s on #sparkling1.

>
#sparkling1 {-webkit-animation: sparkling .4s .2s  infinite;}
#sparkling2 {-webkit-animation: sparkling .4s  infinite;}

In Paris this beautiful evening spectacle may be seen for several minutes every full hour. We will use the #eiffel_wrap element and eiffel_wrap animation to recreate this effect (not literarily though – I will not make you wait an hour long).

#eiffel_wrap { -webkit-animation: eiffel_wrap 30s 1s  infinite;}
@-webkit-keyframes eiffel_wrap {
		    0% {opacity:1;-webkit-animation-timing-function: steps(1);}
			40%{opacity:0;}
			100% {opacity:0;}
			}

With -webkit-animation-timing-function: steps(1); the transition is instantaneous with no fading out effect.

And here we are.
I hope you found this tutorial useful and got inspired. Please share and bookmark if you like it.
As always I’m looking forward to your comments and… see you in Paris !

illustrator tutorial: create a 6-egg box (not necessarily for Easter)

PeHaa — Wed, 03 Mar 2010 23:32:57 +0000

In this tutorial you will learn how to create a 6-egg box (full of eggs). We will use 3D Rotate and Revolve Effects. We will also play a lot with masks. You may download the source file (created in Illustrator CS4, back-saved to CS2+).

Free source file: Ai CS4 (ai.zip 1,5 MB)

Part I – Preliminaries

Step 1

Open a new 800 px x 600 px RGB document in Illustrator.
Go to Illustrator > Preferences > General and make sure that the Keyboard Increment is set to 1px.

Step 2

With the Rectangle Tool (M) create two rectangles. The sizes of mine are: the bottom 444 px x 198 px and the top 403 px x 162 px. Center them vertically and horizontally.

Select (V) the smaller (top) rectangle and tap twice the Up Arrow key to shift it 2 pixels up.

Select the bottom rectangle. Go to Effect > Stylize > Round Corners… and set the Radius to 77px.
Repeat that for the top one, this time setting the Radius to 65px.

Select both rectangles. Go to Effect > 3D > Rotate and choose the settings as in the image

Keep the two rectangles selected and go to Object > Expand Appearance.
Don’t deselect and release the clipping masks that were just created by Illustrator. To do that go to Object > Clipping Mask > Release or use the keyboard shortcut Option/Alt+Cmd/Ctrl+7.
Next go to Object > Path > Clean Up.

Finally, select both shapes and ungroup twice Shift+Cmd/Ctrl+G (or Object > Ungroup).
Now, the two shapes appear in the Layer Panel as Paths.

Copy Cmd/Ctrl+C the bottom shape and paste it to front Cmd/Ctrl+F. Keep it selected and holding down the Shift key select also the top smaller part. Choose Divide from the Pathfinder Panel. Ungroup Shift+Cmd/Ctrl+G.
Bring the frame (compound path) forward Cmd/Ctrl+] (or go to Object > Arrange > Bring Forward).

Part II – Create the box lid

Step 3

Copy the three shapes created in Part 1 and turn them upside down (to be sure it’s exactly 180 degrees hold the Shift key down)
Bring the frame part to front Shift+Cmd/Ctrl+] (or go to Object > Arrange > Bring to Front).
Apply a gradient fill as in the image below, the numbers represent the RGB values.

Copy the lid frame Cmd/Ctrl+C and paste it to back Cmd/Ctrl+B. Tap 4 times the Up Arrow key to shift it 4 pixels up.

Apply the gradient to the lid frame bottom copy as in the image (For your convenience you can make all the other objects invisible Cmd/Ctrl+3)

Here is what we get

Step 4

Select the inner part of the lid and apply a radial gradient as in the image

Step 5

Get back to the lid frame. Select it and go to Effect > Stylize > Drop Shadow… Set the parameters as in the image

(1) Since I do not want to have the lid frame shadow outside the lid we will create a clipping mask.
(2) In the Layer Panel select the lid shape. Bring it to front Shift+Cmd/Ctrl+]. Holding down the Shift key select bot the lid shape and the lid frame. To create a clipping mask either go to Object > Clipping Mask > Make or use the shortcut Cmd/Ctrl+7.
(3) Here is what we get. Select all element and group the lid Cmd/Ctrl+G.

For your convenience create a new layer Cmd/Ctrl+L. Select the lid and drag it for a while to the new layer.

Part III – Create an egg

Step 6

You may use the image below as a template to draw the shape of your egg. Lock this image Cmd/Ctrl+3. Next draw an elipse (L) starting in the center of the template egg – hold the Option/Alt key. Then reshape your ellipse using the Direct Selection Tool (A).

With the Direct Selection Tool (A) select the right half or your egg and delete it.

Set its stroke color to white, no fill and go to Effect > 3D > Revolve. Click More Options to view the complete list of options. In the image below you will find all the settings I used.

With the Shift-key hold down rescale your egg so that it was about 106 px x 144 px.

Step 7

Copy Cmd/Ctrl+C and paste to back Cmd/Ctrl+B the egg. Open the Appearance Panel and change the settings to No Shading.

(1) You should get a white egg shape.
(2) Keeping it selected go to Object > Expand Appearance.
(3) Don’t deselect and choose Unite from the Pathfinder Panel.

Step 8

Keep the just created white egg copy selected and go to Effect > Stylize > Drop Shadow and choose the settings as in the image

Select both the top and the bottom eggs and group them Cmd/Ctrl+G (or go to Object > Group).

Step 9

In order to obtain the colorful egg use orange R = 247 G = 147 B = 30 as the stroke color instead of white and choose R = 86 G = 45 B = 34 as the Custom Shading color in the 3D > Revolve Panel.
If you want to add some decor to your egg(s) (fill your box with Easter eggs maybe(?)) visit my tutorial: Create and color an eco easter egg in Adobe Illustrator.

Part IV – Create the bottom part of the box

Step 10

First we will apply gradients to all three parts created in Part I.
First add a gradient fill as in the image to the frame part:

Next to the inner part:

Next copy Cmd/Ctrl+C the very bottom part and paste it to front Cmd/Ctrl+F, tap three times to shift it 3 pixels down

Fill it with the same gradient you used for the frame part, then reverse the gradient.

Step 11

Now we will put the eggs in.
Make sure you have 5 white eggs and a colorful one. Bring them all to front Shift+Cmd/Ctrl+]. Scale down the three eggs from the second row. I used the Object > Transform > Scale (see the image below). Arrange the eggs ‘on‘ the box.

Step 12

To make sure that your eggs do not break before the frying pan is ready to receive an omelette create a tiny rectangle (M). Scale it so that it works well with the size of an egg. With the Direct Selection Tool (A) select the two bottom points and click the little Convert Point icon in the top panel. Apply the gradient fill as in the image.

Go to Effect > Stylize > Drop Shadow and set

Place the separators between the first and the second row of eggs.
Group Cmd/Ctrl+G the first row of eggs and the two separators.

Select the inner part of the box, copy it Cmd/Ctrl+C, paste to front Cmd/Ctrl+F, then bring to front Shift+Cmd/Ctrl+].
Holding down the Shift key select it together with the group of eggs and separators.
Make a clipping mask Cmd/Ctrl+7.

Step 13

Create a simple shape resembling the wider part of an egg (the easiest way is to start with an Ellipse (L))
Copy it three times and apply the gradient fill as in the image. Send them to back Shift+Cmd+Ctrl+[ (or go to Object > Arrange > Send to Back) and place so that they constitute the base part of the box.

You may use Illustrator to distribute them evenly (select all of them and choose Horizontal Distribute Center in the Align Panel) as well as to center it with the rest of the box. To do the latter, select all three shapes, group them Cmd/Ctrl+G. Keep them selected. Holding down the Shift key select the frame of the box. Click again on the frame to make it the key object (this time you don’t need to hold down Shift as you click). This time choose Horizontal Align Center.

Step 14

Now, a little bit tricky part where we will add a shadow inside the box. Note that the eggs are over the frame so if we add Drop Shadow effect to the frame, the shadow will not be visible on the eggs. And we want to have it on the eggs in the front row.
Here is how we will deal with that.
(1) Copy Cmd/Ctrl+C the frame, paste it to front Cmd/Ctrl+F then bring to front Shift+Cmd/Ctrl+]. Go to Effect > Stylize > Drop Shadow… and use the settings as in the image.
(2) With the Rectangle Tool (M) create a rectangle that divides the frame vertically into two parts. Send it backward Cmd/Ctrl+[ (or go to Object > Arrange > Send Backward).
Holding the Shift key select both the frame and the rectangle and choose Divide from the Pathfinder Panel. Ungroup the objects. Delete the rests of the rectangle. Also go to Path > Clean Up.
(3) Here is what we get.

(4) Copy Cmd/Ctrl+C the inner shape of the box, paste it to front Cmd/Ctrl+F then bring to front Shift+Cmd/Ctrl+].
Holding the Shift key select it both with the bottom half of the frame. Make clipping mask Cmd/Ctrl+7.
(5) Again copy Cmd/Ctrl+C the inner shape of the box, paste it to front Cmd/Ctrl+F then bring to front Shift+Cmd/Ctrl+] and holding the Shift key select it both with the top half of the frame.
(6) In (4) and (5) Illustrator created groups that contain the clipping mask and the masked object. In the Layer Panel select the group created in (5) and bring it back so that it was placed directly under the eggs from the second row. It’s done.

Step 15

Copy Cmd/Ctrl+C the bottom parts of the box that you created in Step 13 and paste them to front Cmd/Ctrl+F. It might be more convenient if you ungroup them for a while Shift+Cmd/Ctrl+G. Select each one separately and apply the gradient fill as in the image. Next select all and in the Appearance Panel change the Blending Mode to Multiply and decrease the Opacity to 42%.

Step 16

Select the shape that makes the tiny border of the box frame. (In the Layer Panel you should find it just above the elements we worked on in the previous step).
Copy it Cmd/Ctrl+C, paste to back Cmd/Ctrl+B then send to back Shift_Cmd/Ctrl+[.
Go to Effect > Stylize > Drop Shadow… and enter the settings as in the image

Step 17

With the Ellipse Tool (L) create an ellipse. Send it to Back Shift+Cmd/Ctrl+[. Place it as in the image and fill with the black to white gradient as you can see below.
Note: If you are using Illustrator CS4, select the white gradient stop and set its Opacity to 0. Decrease the Opacity of your ellipse to 70% and skip to Step 18.

Copy the ellipse Cmd/Ctrl+C and paste it to front Cmd/Ctrl+F. Select both of them and go to Transparency Panel. Choose Make Opacity Mask.

To edit the masking object select its thumbnail in the Transparency Panel. It’s the one on the right (left thumbnail represents the opacity mask, right thumbnail represents masking objects). Then inverse the gradient and check ‘Clip’ in the Transparency Panel.

Click the masked artwork’s thumbnail (left thumbnail) in the Transparency panel to exit mask-editing mode.
Select the masked ellipse and in the Appearance Panel change the Blending Mode to Multiply and decrease its Opacity to 70%. Holding down Shift and Option/Alt key drag the ellipse under two other parts of the box.

Step 18

Put the lid group back to the layer we work on and send it to back Shift+Cmd/Ctrl+[.
Create two rectangles, mine are filled with R = 153 G = 134 b = 117. Try to position them as in the image. Group them Cmd/Ctrl+G and and send to back Shift+Cmd/Ctrl+[.
Select all and chose Horizontal Align Center from the Align Panel.

Holding the Shift key drag the rectangles and the lid down so that to position the three groups properly. The 6-egg box is ready, it’s time to prepare a pan for an omelette.

Thank you for reading. I’m looking forward to your comments.
And… if you like this post please share: Tweet, Stumble, ….

illustrator tutorial: create a seamless folk pattern

PeHaa — Sun, 21 Feb 2010 16:15:06 +0000

In this tutorial you will learn how to create a seamless pattern composed of simple folk-flavored flowers. In the first part we will create an individual flower. In the second we will focus on constructing a pattern and define a seamless Illustrator pattern swatch.

You can download the source file. This tutorial was prepared with Adobe Illustrator CS4 but the source file is back-saved to CS2.

Free source file: Ai CS2+ (ai.zip 0,9 MB)

Step 0

We will use five colors for our flowers: white, black, blue, beige and red as well as some brown background color. In the image below you can see the RGB values of the colors I used.

Part I – Create an individual item of the pattern

Step 1

Choose the Polygon Tool (you will find it under the Rectangle Tool in the Tool Panel). Option/Alt-click and in the dialog box set the Radius to 25px and the number of sides to 22.

Keep your polygon selected and go to Effect > Distort & Transform > Pucker & Bloat… Set the slider value to 70%.

(1) Copy Cmd/Ctrl+C the bloated polygon and paste it to front Cmd/Ctrl+F. Go to the Appearance Panel and uncheck (or delete) the Pucker & Bloat Effect.
(2) Hold down the Shift-key and Option/Alt-key and enlarge a little bit the polygon.
(3) Select the bloated shape (the one beneath) and go to Object > Expand Appearance.
(4) Select both shapes and choose Intersect in the Pathfinder Panel.

Step 2

Choose the Polygon Tool and set the Radius to 33px and the number of sides to 11. Fill the shape with red, no stroke.
Again go to Effect > Distort & Transform > Pucker & Bloat… This time don’t bloat your shape that much, set the value to 21%.

Go to Object > Expand Appearance. Don’t deselect and go to Effect > Distort & Transform > Transform… Create a rotated copy of your flower shape (Note that if you rotate your flower by 360/11 degrees the shapes will overlap, that’s why we choose 1/2 x 360/11. Note also that Adobe Illustrator makes the calculations for you!)

(1) Select the two copies, go to Object > Expand Appearance.
(2) Choose Unite in the Pathfinder Panel.

Step 3

(1) In the Layer Panel put the red shape below the beige one. Align them centering horizontally and vertically.
(2) Copy Cmd/Ctrl+C the beige shape and paste it to back Cmd/Ctrl+B then immediately send it to Back Shift+Cmd/Ctrl+[ (or go to Object > Arrange > Send to Back). Don’t deselect, with the Shift-key and Alt/Option-key hold down enlarge it a bit, my shape is 95px x 95px. Change the fill color to blue.
(3) Keep the blue shape selected, go to Object > Path > Offset Path and set the offset to -1px.
(4) Select the outer shape and delete it. Now the arms of the star-like shape are a little bit thinner.

Step 4

(1) Option/Alt-click with the Polygon Tool and set the Radius = 66px and Sides=12. Fill the polygon with black, no stroke.
(2) Bloat it (Effect > Distort & Transform > Pucker & Bloat…) of 17%.
(3) Go to Object > Expand Appearance.
(4) Go to Object > Offset Path… and set the Offset to -0.5px. Delete the outer shape.
(5) Send it to back Shift+Cmd/Ctrl+[. Select all shapes and center them horizontally and vertically.

Step 5

Select the beige star-like shape so that you could easily determine it’s center point. Go to View > Show Artboard Rulers (or use the keyboard shortcut Cmd/Ctrl+R). Drag the Guides so that they intersect in the center of the beige object.

With the Ellipse Tool (L) and the Shift and Option/Alt hold down create a tiny circle starting from the point on the vertical guide as in the image below (the diameter of mine is 5,2px). Fill it with white, no stroke.
Choose the Rotate Tool (R) and Option/Alt-click in the center point of the flower (the point where the guides intersect). In the dialog box set the Angle to 360/22 and choose Copy.
Repeat Cmd/Ctrl+D (or go to Object > Transform > Transform Again) until you have all 11 white dots.

Step 6

Select all the white dots. The fastest way to do that is to select one then to go to Select > Same > Fill Color.
Group them Cmd/Ctrl+G (or go to Object > Group).
Copy Cmd/Ctrl+C and Paste to Front Cmd/Ctrl+F. With the Shift-key and Option/Alt-key hold down rescale it down a bit as in the image.
Repeat the same enlarging the circle of dots and changing the fill color to red.
Select all Cmd/Ctrl+A and group Cmd/Ctrl+G.

Part II – create a seamless pattern

Step 7

Alt-click with the Rectangle Tool (M) and set the size to 900px x 900 px. Make sure the square is on the very bottom of the layer (send it back with Shift+Cmd/Ctrl+[) and has no fill and no stroke. Copy it Cmd/Ctrl+C and paste to front Cmd/Ctrl+F, set the fill of the copy to the background brown color.
Lock the two rectangles.

Place the flower in the upper left corner of the rectangle, you do not have to be very exact. With the flower selected go to Effect > Distort & Transform > Transform… and create five copies as in the image.

Go to Object > Expand Appearance and then ungroup immediately Shift+Cmd/Ctrl+G (or Object > Ungroup).
We will recolor the four inner flowers.
Select the second flower and go to Edit > Edit Colors > Recolor Artwork…
By default, this method preserves white and black so we have to update the settings. Click the symbol as in the image, access the Recolor Options and uncheck White and Black.
To recolor the object click the button marked in the image. This way you will randomly change the color order (note that with five colors that we use we might have 120 different flowers). Each time you click, the color order is randomly changed. Choose OK once you are satisfied with the outcome.

Repeat the same individually for three more flowers. Than select the whole row and group it Cmd/Ctrl+G.

Step 8

Don’t deselect and go to Effect > Distort & Transform > Transform… and create a copy of the row as in the image.

As you did previously, go to Object > Expand Appearance and ungroup Shift+Cmd/Ctrl+G.
Select the second row (it will be grouped but it will not be grouped with the first row).
Go to Edit > Edit Colors > Recolor Artwork… and change the color order of the whole row.

Now, select both rows and group them Cmd/Ctrl+G.

Step 9

With the two rows selected go to Effect > Distort & Transform > Transform… and create three copies as in the image.
Once again go to Object > Expand Appearance, then ungroup Shift+Cmd/Ctrl+G.
Now, all ‘double rows’ are grouped together. With Edit > Edit Colors > Recolor Artwork… change the color order for the second and the third group.
Note that you do not change the colors of the last group. In order to create a seamless patterns the objects located on the opposite edges of the no-fill, no-stroke rectangle have to be identical.

Step 10

Your pattern is ready. Unlock the rectangles created in Step 7. Select all flowers and the rectangles and drag them to the Swatches Panel (or go to Edit > Define Pattern…)

illustrator tutorial: create a yummy vector cupcake

PeHaa — Thu, 18 Feb 2010 17:13:28 +0000

Some time ago I posted two similar cupcakes as vector freebies. Now it is the time to share my recipe (with a special dedication to Janna Hiromasa ;):)).

You may download the source file. I use the CS4 version but the file is back-saved to CS2.

Free source file: Ai CS2+ (ai.zip 0,3 MB)

Step 1

Create an irregular shape as in the image below. You can either use the Pen Tool (P) or start with an ellipse (L) and then move the anchor points and adjust the handles with the Direct Selection Tool (A) and the Convert Anchor Point Tool (Shift+C).
Fill the shape with a solid color, R = 255 G = 174 B = 209 and set the stroke to none.
Copy Cmd/Ctrl+C and paste in back Cmd/Ctrl+B then drag it a little bit down and to the right as in the image.

Fill the bottom shape with the pink gradient as in the image. The numbers in the image represent the RGB values of the the gradient colors.

Step 2

With the Pen Tool (P) create a simple irregular shape as in the image

Fill it with the gradient as in the image, no stroke.

Copy Cmd/Ctrl+C and paste the yellow shape in the back Cmd/Ctrl+B.

Keep it selected, enlarge just a little bit and shift a bit down. Adjust the gradient so that the beneath copy was a bit darker.

Step 3

It is the time for our chocolate coating. First with the Pen Tool (P) create an irregular shape as in the image. Fill it with the dark chocolate color, mine is R = 48 G = 35 B = 19.

Deselect, set the fill color to R = 98 G = 69 B = 35 and choose the Gradient Mesh Tool (U).
Add (just by clicking) a mesh point as shown in the image.

Deselect, set the fill color to R = 73 G = 54 B = 31 and add another mesh point as shown below.

And once more with the milk chocolate brown R = 123 G = 84 B = 39.

Step 4

Now we will put our cupcake into a brown paper liner.
With the Rectangle Tool create a rectangle. Fill it with some light brown R = 143 G = 108 B = 86. With the Gradient Mesh Tool (U) add a mesh point in the middle of the bottom edge of the rectangle. Now with the Direct Selection Tool (A) reshape the bottom part of the rectangle so that to obtain the shape of the liner (you will have to replace the mesh points and to add some curviness by dragging the handles).
Send the liner shape to back the liner shape – select and go to Object > Arrange > Send to Back or use the shortcut Shift+Cmd/Ctrl+[.

(1) We will have 19 mesh points on the horizontal edges of the liner. The middle and the two extreme ones are already there.
First add two more in the middles of each half. Then try to distribute uniformly four in each quarter.
(2) Still with the Gradient Mesh Tool (U) click somewhere in the bottom part of the liner (make sure you click on the mesh line) to get some more mesh points as in the image.
(3) Select all the mesh points on the bottom edge and change their fill to some darker brown, mine is R = 58 G = 30 B = 18.
(4) Starting from one of the extreme points select every second mesh point on the top edge and every second mesh point on the mesh line inside the liner and change its fill to the same color as used in (3).

Step 5

We will add some shadow that comes from the cupcake.
In Step 1 we created two pink shapes. Select the bottom one, copy Cmd/Ctrl+C and paste it to back Cmd/Ctrl+B, still selected enlarge it a little, drag and rotate just a little bit. Change the fill color to black.

Next select the liner. We aim to intersect the just created shadow shape with the liner shape. The problem is that the liner is not a path but a mesh object and the Pathfinder won't work in such case.
Don't panic. Go to Object > Path > Offset path and set the Offset size to 0px. This way you've just created a path that has the exact shape of the outline of our mesh object.

Keep it selected. Press the Shift key and select the shadow shape.
Go to Pathfinder Panel and choose Intersect.

Go to the Appearance Panel, change the blending mode to Multiply and decrease the Opacity to 18%.

Step 5

For your convenience block the cupcake (to do that select it and hit Cmd/Ctrl+2).
Choose the Star Tool (You will find it under the Rectangle Tool in the Tools Panel). Double click and in the dialog box set the values as: Radius 1: 200 px, Radius 2: 210 px (I increase the Radius 1 by 5%) and Points: 36.

This will give you the napkin with the right proportions. Send it to back, Shift+Cmd/Ctrl+[. Select (V) and rescale the napkin.
Fill it with a light blue gray R = 236 G = 240 B = 242 , no stroke.

Step 6

Create an ellipse (L) and place it symmetrically under the cupcake. Set its fill to black with no stroke, change the blending mode to Multiply and decrease the Opacity to 12%.

Step 7

Create another ellipse (L) and put it between the napkin and the cupcake shadow that was created in the previous step. Make sure it is entirely within the napkin. Fill it with the black to white gradient as in the image.

Change the blending mode to Multiply and decrease the opacity a little (I set it to 80%).

Step 8

It's the time for a cherry.
Create a simple shape of a cherry and bring it to front Shift+Cmd/Ctrl+]. To do that either go to Object > Arrange > Bring to Front or use the shortcut Shift + Cmd/Ctrl+].
Fill it with the solid color, R = 139 G = 0 B = 55, no stroke.

Copy Cmd/Ctrl+C and paste the cherry to front Cmd/Ctrl+F. With the Gradient Mesh Tool (U) add two mesh points as in the image.

With the Direct Selection Tool A, change the fill colors of some of the mesh points as in the image (the numbers correspond to the RGB values)

Decrease the opacity a bit (71%).

Group the two cherry shapes, select both and press Cmd/Ctrl+G.
Copy Cmd/Ctrl+C and paste Cmd/Ctrl+V the gradient shadow we used for the napkin. In the Layer panel place it above the cupcake group and below the cherry group. Position it and resize so that to obtain a nice shadow of the cherry on the chocolate cover.

Step 9

Now we will create the cherry stem.
(1) With the Pen Tool (P) create a simple two-points path. Set fill to none and stroke to R = 198 G = 221 B = 124. (2) Use the built-in Illustrator brushes from the Brushes panel (go to Window > Brushes). I chose the 3pt Round Calligraphic brush and set the stroke to 1,5 pt.
(3) Go to Object > Path > Outline Stroke.
(4) Copy the stem to front Cmd/Ctrl+C, Cmd/Ctrl+F, with the Option/Alt key on drag the stem copy a bit to the right. You should now have three copies of the stem, select the two of them that do not overlap.

(5) Go to the Pathfinder Panel and choose Intersect.
(6) Apply the gradient fill as in image to the beyond (larger) part of the stem.

(7) Create a tiny ellipse as in the image. In the Layer Panel put it below the two parts of the stem.
(8) With the Shift key on select the small ellipse shape and the larger part of the stem (the one with gradient fill). Co to the Pathfinder Panel and choose Unite.

(9) Create a small ellipse (L) and in the Layer Panel put it between the cherry and the twi parts of the stem. Set the fill to R = 73 G = 54 B = 31, no stroke.

Your cupcake is ready!

tutorial: Create a vector Christmas ball

PeHaa — Wed, 25 Nov 2009 21:40:52 +0000

In this tutorial you will learn how to create a vector Christmas ball from scratch in Adobe Illustrator. In the first part of this tutorial I explain how to create a decor, in the second one how to create a 3D Christmas ball.

You may download the source file. I use the CS4 version but the file is back-saved to CS2.

Free source file: Ai CS2+ (ai.zip 5,3 MB)

Part 1 DECOR

Step 1

Choose the rectangle tool (M). Alt-click and set the width as 18px and height as 100 px. Fill the rectangle with R = 206 G = 21 B = 82 and set the stroke to none.
Copy Cmd/Ctrl+C your rectangle and paste it in front Cmd/Ctrl+F. Next holding the Shift key drag the copy 10 px down (don’t worry if you do a bit more).
Having your copy still selected to to Object > Stylize > Round Corners and set the radius to 10 px. Next expand it (Object > Expand Appearance).
Select both rectangles and choose Unite from the Pathfinder Panel.

Step 2

Go to Effect > Distort & Transform > Transform… and create 10 copies of the stylized rectangle with the settings as in the image below.

With your shapes still selected go tho Object > Expand Appearance. Next immediately ungroup your objects Shift+Cmd/Ctrl+G (or go to Object > Ungroup).

Select every second shape, go to the Appearance panel and set the Blending mode to Multiply and Opacity to 60%.

Step 3

Select all your shapes, again go to Effect > Distort& Transform > Transform… and create an inverted copy with the settings as in the image.
Make sure to expand your selection (Object > Expand Appearance).

Step 4

Select and drag your rectangles to the Symbols Panel.

Part 2 BALL

Step 5

To create the ball you may use the top right shape from the image as a template. Then it is most convenient to place it in its own layer, double-click the layer in the Layers panel, select Template, and click OK. Create a new layer Cmd/Ctrl+L and … just retrace it.

Alternatively you may create the half-ball shape starting from the simple shapes. First draw a circle using the ellipse tool (L) and holding down the Shift key. Next with the Rectangle tool (M) create a rectangle and place it as in the image. With the direct selection tool (A) drag the bottom right corner a bit to the right and upward so that it meets the circle. To obtain the smooth transition make sure that the handles are parallel (or almost parallel) to the tangent line to the circle in the intersection point.
Select both shapes, go to Pathfinder Panel, choose Unite, select the unwanted parts with the Direct Selection Tool (A) and remove them.

Step 6

Set the fill to white, stroke to none and go to Effect > 3D > Revolve. Set the parameters as in the image. To set the shading click ‘More Options’. Use ‘Custom’ as the Shading Color and set the color to R = 226 G = 68 B = 147.

Here is what you should obtain:

Step 7

In your 3D Revolve Options panel click Map Art… Go to the third surface and choose xmas_ball in the Symbol field (the left upper corner). Resize and reshape our symbol as in the image.

Here is what we get.

Step 8

Now we will add some shading to our ball. Choose the outline shape, copy it Cmd/Ctrl+C and paste in front Cmd/Ctrl+F. Go to the Appearance Panel. Now, we will change the 3D Revolve settings.
First go to the Map Art… and chose Clear All.

Next change the settings as below:

Here is the result.

Step 9

Change the blending mode to Multiply and decrease the Opacity to 52%

Part 3 HANGING

Step 10

Now, we will create the cap of the ball. In a new layer (Cmd/Ctrl+L) create a rectangle with the Rectangle Tool (M). Fill it with light beige R = 229 G = 227 B = 214, no stroke. Choose the Direct Selection Tool (A) and convert the upper right corner. Next remove the bottom part and the left part.

Step 11

Go to Effect > 3D > Revolve.

Here is what you should get.

Step 12

Now, exactly as we did for the ball, we will add some shading. Copy Cmd/Ctrl+C and paste the cup in front Cmd/Ctrl+F. Change the fill color to white. Go to the Appearance Panel and change the 3D Revolve settings.

Next change the blending mode to Multiply and decrease the opacity to 30%.

Step 13

Replace and resize (if necessary) the cap shape so that it works well with the ball shape.

Step 14

Copy the cap shading Cmd/Ctrl+C and paste it in front Cmd/Ctrl+F. For your convenience set the cap and its shading invisible and lock them for a while.
We will expand this object so to speed up the process go to the Appearance Panel and in 3D Revolve options (More Options…) choose No Shading. Change the fill color from white to any more visible.
Go to Object > Expand Appearance. Next go to the Pathfinder Panel and choose Unit.

Step 15

With the Pen Tool (P) create the shape about as in the image. Make sure that its bottom boarders are all above the bottom boarders of the cap shape.

Step 16

Select the two shapes and choose Divide from your Pathfinder Panel. Ungroup immediately Shift+Cmd/Ctrl+G and remove the unwanted parts.

Step 17

Unlock and set visible the two cap parts. Select the whole layer and go to Object > Clipping Mask > Make or use the keyboard shortcut Cmd/Ctrl+7.

Step 18

Now we will create the shadow that the cap drops on the ball. In fact it is not very visible so you may omit this step.

Create a new layer Cmd/Ctrl+L, name it Shadow and put it between the ball and the cap layers.
Alt-drag the the ball shading from the Ball layer. In the Appearance Panel change the 3D Revolve options to No Shading and choose some fill color. Go to Object > Expand Appearance and next to Pathfinder Panel in order to choose Unite. (Yes, you have already done it once).
Next alt-drag the Clipping mask shape from the Cap layer to the Shadow layer. Choose some fill color.

Step 19

Select the the copy of the cap clipping mask, move it down and resize a bit. Once you are satisfied with its shape and position Shift-click the ball shape so that both shapes are selected. Go to the Pathfinder Panel and choose Intersect.

Step 20

Set the blending mode to Multiply and decrease the opacity (34%)

Step 21

Now we will create the tiny hook. With the Ellipse tool (L) draw an Ellipse. Drag a little bit the handles of the upper point with the Direct Selection Tool (A).
Next go to Object > Path > Offset Path… Make sure that the Preview is checked and attune the Offset value (keep it negative). The appropriate value will vary depending on your ball size.
Select both paths and choose Minus Front in the Pathfinder Panel.
Starting from the point a bit above the hook top point draw the Ellipse (L) holding down the Alt-key. Intersect it with the hook (Pathfinder).

Step 22

Play a little with the hook shape. Next apply the gradient fill with the settings as in the image.

Step 23

To finish you only have to add a tiny string (I clicked twice holding down the Shift key with the Pen Tool (P)). Add some background that you like in the new layer. Move that layer to the very bottom. You may also want to add some shading. Create an ellipse (L) and fill it with the black to white radial gradient as in the image. Set the blending mode as Multiply decrease the Opacity to 30%…. and MERRY CHRISTMAS..

ultra-easy pattern making – illustrator tutorial

PeHaa — Tue, 14 Jul 2009 13:31:13 +0000

In this post I will show you how to quickly create a seamless simple geometric pattern swatch in Adobe Illustrator. In the last (extra) step I will show you a very simple way to ‘export’ it as a pattern to Photoshop.

First, have a look at what we aim to obtain (this pattern is inspired by the fabric of my favorite tunic).

Vector pattern swatch - preview

Free source file: Ai CS2+ (ai.zip 0,1 MB)

1. With the Rectangle Tool (M) create a rectangle 20 px (width) x 60 px (height). Set stroke to none and fill to black.

2. With the black rectangle selected go to Effect > Distort & Transform > Transform… and choose the settings as below. Next go to Object menu and Expand Appearance.
Ungroup the bottom rectangles Cmd/Ctrl+Shift+G.

Multiply your rectangle by four

3. Once the rectangles are ungrouped you can change their fill colors. I used:

Color swatches

4. With the Direct Selection Tool (A) select the the top parts of your rectangles (so that to include all top apices) and drag it a little to the right holding down the Shift key (drag as you like, don’t worry – you can change it any time). Alternatively you can group your rectangle, select the group and use Object > Transform > Shear…

Shearing the rectangles

5. Group your rectangles Cmd/Ctrl+G and go to Effect > Distort & Transform > Transform… and choose the settings as below

Applying reflection

7. Again go to Effect > Distort & Transform > Transform… Choose Apply New Effect and the settings as follows:

A copy to the right

8. And once again (yes to Apply New Effect) and:

A copy to the left

9. Creat a rectangle 80 px (width) x 120 px (height) (80 = number of colorful rectangles x width of a single rectangle; 120 = 2 x height of a single rectangle). Set its fill and stroke to none and send it to the very bottom of the layer Cmd/Ctrl+Shift+[. Select all. In the Align Panel choose: (1) Horizontal Align Center and (2) Vertical Align Top.

Creating bottom rectangle

10. Now, drag your selection (make sure the whole layer is selected) to the Swatches Panel or go to Edit > Define Pattern… It’s done!

11. If you want to use this pattern in Photoshop, here is how to do it ultra-quickly: with a Rectangle Tool (M) create a rectangle 80 px x 120 px and fill it with your pattern (no stroke). Select it, copy and paste in Photoshop into a file that has the same canvas size. Go to Edit > Define Pattern…

Below: the tunic inspiration. Thnx to Pinkonhead for taking the photo and to Joe Vains for suggesting this idea ;) :)

I hope you find this tutorial useful, all comments are highly appreciatied. Please share and bookmark!

tutorial: Create and color an eco easter egg in Adobe Illustrator

PeHaa — Wed, 08 Apr 2009 05:41:54 +0000

In this tutorial you will learn how to prepare an eco colored egg for easter. Eco for there are no artificial colorants used. I wanted to recreate the look of a traditional polish egg: cooked in onion rinds with wax decors to be scratched off afterwards. In the first part of this tutorial I explain how to create a decor, in the second one how to create a 3D naturaly looking egg.

Preview: final result

Free source file: Ai CS2+ (ai.zip 0,83 MB)

Part 1: Decor

Step 1: Creating a custom brush

Create a custom brush to be used for the decor. I call it a nail brush. Below you can find the template of mine (you can aslo create this shape combining two ellipses, then go to Pathfinder, choose Add to Shape Area and extract afterwards).

nail brush

Using the Selection Tool (V) drag your shape to the Brushes panel and choose the settings as below:

Create a nail brush

Step 2: Creating a wax decor

Draw a straight line segment, apply the nail brush and go to Effect > Distort & Transform > Transform…

Creating decor (1)

Again go to Effect > Distort & Transform > Transform… and choose Apply New Effect when the dialog box pops up.

Set the value of horizontal move so that to recreate what you can see below (that may vary depending on the initial size of your line segment).

Create decor (2)

Draw another vertical line segment of the same length above the left border of the first circle of nails, apply the nail brush, go to Effect > Distort & Transform > Transform… and again set the value of horizontal move and number of copies so that to recreate what you can see below.

Creating decor (3)

Then drag it down holding alt/option key (to make a copy) and Shift (to drag it vertically) key

Creating decor (4)

You don’t have to be precise as far as the number of copies here (as you can see I was not) since the left and right edges will not be visible.

Step 3: Turning the decor into a symbol

Select your three objects, go to Object menu and expand them. Set stroke color to none and fill color to white. Drag the selection to the Symbols panel and choose Graphic:

Creating symbol

Now, it’s time to create an egg.

Part 2: Creating a 3D egg object

Step 4: Creating an egg shape to be revoled

You may use the image below as a template to draw the shape of an egg.

Egg shape template

To trace it, make sure the image is in its own layer, double-click the layer in the Layers panel, select Template, and click OK:

Easiest way is to draw an elipse starting in the center of the template egg – hold the alt/option key. Then reshape your ellipse using the direct selection tool (A).

With the selection tool (A) select the right half or your egg and delete it. We are about to create an eco egg which means we only use purely natural colorants – the onion rinds in this case. To obtain the onion rinds effect set the stroke color to R = 165 G = 78 B = 61. Make sure you set fill color to none.

Shape to be revolved

Step 5: From 2D to 3D

Go to Effect > 3D > Revolve. Click More Options to view the complete list of options. On the screenshot below you can see my choice of settings:

Rotated egg

Step 6: Mapping Art

Choose the Map Art button and go to Surface 2, choose the eco veggtor symbol and place it on the grey area. Check the preview to properly position the symbol.

Mapping art

Step 7: Adding shade on the egg surface

Duplicate the revolved object (cmd/ctrl+C) and paste it to the front (cmd/ctrl+F). Change the stroke color to white (fill is still none), blending mode to Multiply and Opacity to 60%. Double click the Apperance panel, first go to Map Art and click the Clear All button – that removes art from all surfaces. Press OK than go to More Option, below are my settings:

Adding shadow to the egg surface

Step 9: Adding background and shadow underneath the egg

Create an ellipse starting from the bottom peak of your egg. Set it to the back shift+cmd/ctrl+[. Fill the ellipse with a radial black to white gradient and adjust the gradient settings as below:

Adding shadow underneath the egg

Set blending mode to Multiply and decrease the Opacity a bit. If you use Illustrator CS 4 you may use a black to transparent gradient instead, then you do not have to change the blending mode.
Now set the backround color, create a rectangle and set it to back shift+cmd/ctrl+[. I set the fill color to R = 157 G = 178 B = 178. The font I used are Skia Regular and Santa Fe LET.

Preview: final result

I hope you found this tutorial useful – it’s my first one – some feedback much appreciated! So are tweets/diggs/stumbling… :)