PeHaa Blog http://pehaa.com mad about art and digital Wed, 24 Aug 2011 10:17:20 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Intriguing animate-on-scroll effect – jQuery tutorial http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/ http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/#comments Tue, 23 Aug 2011 19:29:42 +0000 PeHaa http://pehaa.com/?p=2429 Nizo for iPhone website. In this tutorial we try to recreate the intriguing scrolling effect.]]>

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.
My herb garden preview

Download the source files

My herb garden
.zip 0.4MB

We’ll start with the html structure :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My herb garden</title>
</head>
<body>
<div id="wrap_out">
  <div id='wrap'>
    <header>
      <h1>My <em>herb</em> garden</h1>
      <p>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.</p>
    </header>
    <div id="separation">
      <div>Scroll <em>down</em></div>
      <img src="images/herbes.jpg" width="592" height="350" alt="Herbes"> </div>
    <section>
      <div  id="coriander" class="element">
        <div>coriander</div>
        <img src="images/coriander1.jpg" width="286" height="232" alt="Coriander">
        <p>Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.</p>
      </div>
      <div  id="rosemary" class="element">...</div>
      <div  id="lemonbalm" class="element">...</div>
      <div  id="chives" class="element">...</div>
      <div  id="basil" class="element">...</div>
    </section>
    <footer> <a href="http://pehaa.com"> by <em>PeHaa</em> 2011</a> </footer>
  </div>
</div>
</body>
</html>

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.
My herb garden preview
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

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

]]> http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/feed/ 10 postcard from Paris – css3 keyframes animations in use http://pehaa.com/2011/08/postcard-from-paris-css3-keyframes-animations-in-use/ http://pehaa.com/2011/08/postcard-from-paris-css3-keyframes-animations-in-use/#comments Mon, 15 Aug 2011 14:27:47 +0000 PeHaa http://pehaa.com/?p=2372

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.
Postcard from Paris css3 reframes animation preview

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 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Greetings from Paris</title>
</head>
<body>
   <div id="wrap">
      <h1>Bonne Nuit <em>PARIS !</em></h1>
      <div id="phare"></div>
      <div id="eiffel"></div>
      <div id="eiffel_wrap">
         <div id="sparkling1"></div>
         <div id="sparkling2"></div>
      </div>
      <div id="roofs"></div>
      <footer>by PeHaa, Paris 2011</footer>
   </div>
</body>
</html>

We will use the following images (I will discuss the sparkling effect a little bit later)
used images
Let’s start to complete the css stylesheet :
ccs part 1

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
Sparkling
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 !

]]> http://pehaa.com/2011/08/postcard-from-paris-css3-keyframes-animations-in-use/feed/ 10 create a unique contact form with css3 transitions http://pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/ http://pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/#comments Sat, 30 Jul 2011 22:52:47 +0000 PeHaa http://pehaa.com/?p=2243 Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover.]]>

Inspired by the contact form on Clear Span Media website I decided to recreate an effect of a letter sliding out from an envelope on mouse hover. You may see the demo here.
contact form preview

Download the source files

Contact form
.zip 330 kB

It works in browsers supporting css3 transitions. In IE the envelope is not visible, I certainly could have played a bit more with jQuery to reproduce a similar effect, but it’s not a part of this tutorial.
Let’s start with the html structure:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Form</title>
</head>
<body>
	<div id="wrap">
		<h1>Send a message</h1>
		<div id='form_wrap'>
			<form>
				<p>Hello Joe,</p>
				<label for="email">Your Message : </label>
				<textarea  name="message" value="Your Message" id="message" ></textarea>
				<p>Best,</p>
				<label for="name">Name: </label>
				<input type="text" name="name" value="" id="name" />
				<label for="email">Email: </label>
				<input type="text" name="email" value="" id="email" />
				<input type="submit" name ="submit" value="Now, I send, thanks!" />
			</form>
		</div>
	</div>
</body>
</html>

The idea is as follows (I tried to illustrate it in the scheme below): the #form_wrap is positioned relatively (top:0), with the envelope fixed to its bottom. The form is positioned relatively, with top:200px. The overlay is set to hidden for both form and #form_wrap. When mouse enters the #form_wrap its height and the height of form increase both of 350px, at the same time the top property of the #form_wrap changes to top:-200px.
contact scheme
We will need an envelope cut into two parts, the top part, visible over the letter (after.png) and the bottom part (before.png) partially covered by the letter. You’re welcome to use the .ai file available here.
envelopes Let’s start to complete the stylesheet:
contact schemeNext, we’ll add some styling to the form elements:

label {
			margin: 11px 20px 0 0;
 			font-size: 16px; color: #b3aba1;
			text-transform: uppercase;
			text-shadow: 0px 1px 0px #fff;
		}

input[type=text], textarea {
		font: 14px normal normal uppercase helvetica, arial, sans-serif;
		color: #7c7873;background:none;
		width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
		border:1px solid #f8f5f1;
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
		-moz-box-shadow: inset 0px 0px 1px #726959;
                -webkit-box-shadow:  inset 0px 0px 1px #b3a895;
                box-shadow:  inset 0px 0px 1px #b3a895;
		}	

textarea { height: 80px; padding-top:14px;}

textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}

#form_wrap input[type=submit] {
		position:relative;font-family: 'YanoneKaffeesatzRegular';
		font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;
		width:100%; text-align:center; opacity:0;
		background:none;
		cursor: pointer;
		-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
		}

#form_wrap:hover input[type=submit] {z-index:1;opacity:1;}

#form_wrap:hover input:hover[type=submit] {color:#435c70;}

So far we haven’t used the transition, click here to see where we are.

We will add the same transition to form and #form_wrap. The four parameters correspond to the transition property, duration, timing function and its delay.

  -webkit-transition: all 1s ease-in-out .3s;
  -moz-transition: all 1s ease-in-out .3s;
  -o-transition: all 1s ease-in-out .3s;
  transition: all 1s ease-in-out .3s;

Then we’ll add another transition to the input[type=submit] element. The first set of settings corresponds to the behavior when mouse leaves the #form_wrap, the second when it hovers the #form_wrap. I wanted to make sure that the submit element does not appear until the form and #form_wrap transition is finished. On the other hand it starts to disappear immediately when mouse leaves #form_wrap.


	#form_wrap input[type=submit] {
		-webkit-transition: opacity 0.6s ease-in-out 0s;
		-moz-transition: opacity .6s ease-in-out 0s;
		-o-transition: opacity .6s ease-in-out 0s;
		transition: opacity .6s ease-in-out 0s;
		}

	#form_wrap:hover input[type=submit] {
		-webkit-transition: opacity .5s ease-in-out 1.3s;
		-moz-transition: opacity .5s ease-in-out 1.3s;
		-o-transition: opacity .5s ease-in-out 1.3s;
                transition: opacity .5s ease-in-out 1.3s;
		}

It’s almost ready, I will just add some jQuery so as it works in IE. The transition is similar, but not exactly the same:

<!--[if IE]><script>
	$(document).ready(function() {
            $("#form_wrap").addClass('hide');
            $("#form_wrap").prepend( '<div id="before"></div>').append( '<div id="after"</div>');
            $("#form_wrap").hover(function(){
	         $(this).stop(true, false).animate({
	              height : '836px',
	              top : '-200px'
	         }, 2000);
            $('form').stop(true, false).animate({
		height : '580px'
		}, 2000, function(){
                         $('#form_wrap input[type=submit]').css({'z-index' : '1', 'opacity' : '1'})} ) }, function() {
		$('#form_wrap input[type=submit]').stop(true, true).css({ 'opacity' : '0'})
	        $(this).stop(true, false).animate({
			height : '446px',
			top : '0px'

		}, 2000);
		$('form').stop(true, false).animate({
				height : '200px'}, 2000)
		})
})
</script><![endif]-->

You just need to add in the stylesheet #form_wrap.hide:after, #form_wrap.hide:before {display:none;} and 

#before {position:absolute;
		  bottom:128px;left:0px;
		  background:url('images/before.png');
		  width:530px;height: 316px;}

#after {position:absolute;
		bottom:0px;left:0;
		background:url('images/after.png');
		width:530px;height: 260px; }

Looking forward to your comments, if you find this tutorial useful, please share and bookmark.

]]> http://pehaa.com/2011/07/create-a-unique-contact-form-with-css3-transitions/feed/ 29 free vector envelopes http://pehaa.com/2011/07/free-vector-envelopes/ http://pehaa.com/2011/07/free-vector-envelopes/#comments Thu, 14 Jul 2011 17:07:34 +0000 PeHaa http://pehaa.com/?p=2234 Edit Colors > Recolor artwork. Click on the little preset icon and choose preserve Black, White and Grays. Then use Edit or Assign and play with [...]]]>

free vector envelopes by pehaa 1

This time I share with you a set of vector envelopes created in Illustrator. Don’t hesitate to change the colors as you like. Easiest way: go to Edit > Edit Colors > Recolor artwork. Click on the little preset icon and choose preserve Black, White and Grays. Then use Edit or Assign and play with the colors.

These are free for both your personal and commercial projects. My suggestion – you might use them to create an original contact form (stay in touch, I’ll show you my idea about that very soon).

Vector envelopes – CS2+ .ai file

4 x 2 in set, pat.zip, 11.5 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Please share and bookmark, your comments are more than welcome. Enjoy!

]]> http://pehaa.com/2011/07/free-vector-envelopes/feed/ 0 ice cream – free Photoshop and Illustrator patterns http://pehaa.com/2011/05/ice-cream-free-photoshop-and-illustrator-patterns/ http://pehaa.com/2011/05/ice-cream-free-photoshop-and-illustrator-patterns/#comments Sun, 08 May 2011 17:05:53 +0000 PeHaa http://pehaa.com/?p=2214

ice cream retro photoshop and illustrator pattern by pehaa 1
It’s hot. We feel like ice creams. Mon cheri loves peach, my favorite is vanilla with cherries.

ice cream retro photoshop and illustrator pattern by pehaa 1
That’s how this sunny afternoon resulted in a retro-flavored ice-cream pattern. It was created in Adobe Illustrator, I share with you the .ai file with pattern swatches as well as the Photoshop .pat file. For your convenience I included a version with transparent background.
Feel free to download them and use for your personal or commercial projects.

Ice cream – Photoshop Patterns

4 in set, pat.zip, 3.2 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Ice cream – Illustrator Pattern Swatches

2 in set, abr.zip, 0.9 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Please share and bookmark, your comments are more than welcome. Enjoy!

]]> http://pehaa.com/2011/05/ice-cream-free-photoshop-and-illustrator-patterns/feed/ 5 morning coffee – free Photoshop and Illustrator patterns http://pehaa.com/2011/04/morning-coffee-free-photoshop-and-illustrator-patterns/ http://pehaa.com/2011/04/morning-coffee-free-photoshop-and-illustrator-patterns/#comments Sat, 30 Apr 2011 15:56:40 +0000 PeHaa http://pehaa.com/?p=2203

morning coffee - free pattern for photoshop and illustrator
This morning I had my coffee with a croissant and with Adobe Illustrator. I prepared for you a retro and coffee-flavored pattern in vector and in Photoshop (.pat) format. For your convenience I included the basic version on transparent background.
As all my patterns – this set is free for personal and commercial use. Enjoy!

morning coffee - free patterns for photoshop and illustrator

Morning Coffee – Photoshop Patterns

6 in set, pat.zip, 0.8 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Morning Coffee – Illustrator Pattern Swatches

6 in set, abr.zip, 0.4 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Please share, bookmark and/or leave a comment here if you liked this post.

]]> http://pehaa.com/2011/04/morning-coffee-free-photoshop-and-illustrator-patterns/feed/ 3 botanical garden – free Photoshop brushes http://pehaa.com/2011/04/botanical-garden-free-photoshop-brushes/ http://pehaa.com/2011/04/botanical-garden-free-photoshop-brushes/#comments Thu, 28 Apr 2011 13:34:48 +0000 PeHaa http://pehaa.com/?p=2192

Botanical Garden hi res Photoshop brushes
I hope that PeHaa is back! Let’s restart with a set of 25 hi-res Photoshop Brushes entitled Botanical Garden. I find it quite a good proposition for my first post this spring. Enjoy, you are free to use them for both your personal and commercial projects.

By the way, have you noticed that the design of pehaa.com changed a bit? Don’t hesitate to let me know how you like it.

Botanical garden hi res Photoshop burshes preview

Freebies by PeHaa: Hi-res Photoshop brushes

25 in set, abr.zip, 2.6 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Please share, bookmark and/or leave a comment here if you liked this post.

]]> http://pehaa.com/2011/04/botanical-garden-free-photoshop-brushes/feed/ 11 handicap international t-shirt contest http://pehaa.com/2011/01/handicap-international-t-shirt-contest/ http://pehaa.com/2011/01/handicap-international-t-shirt-contest/#comments Mon, 03 Jan 2011 07:12:44 +0000 PeHaa http://pehaa.com/?p=2182

My dearest visitors, first af all Happy New Year to all of you!
I, personally, to give a good start to 2011 posted my entry to the Handicap International Contest, run by a french site Monsieur Poulet.
Here it is and if you like it, please hurry up and VOTE! Thanks!!
handicap international Lola's dreams

]]> http://pehaa.com/2011/01/handicap-international-t-shirt-contest/feed/ 0 free christmas social icons in vector format http://pehaa.com/2010/12/free-christmas-socialmedia-icons-in-vector-format/ http://pehaa.com/2010/12/free-christmas-socialmedia-icons-in-vector-format/#comments Mon, 06 Dec 2010 17:07:58 +0000 PeHaa http://pehaa.com/?p=2158

No, I haven’t got a christmas tree, yet. I haven’t brainstormed with Santa Claus (or rather Père Noël this Christmas), either. It’s snowing, but no christmas gifts are ready, except for those for my blog visitors.
I prepared for you a set of christmas tree balls – 20 social media icons in vector format (.ai backsaved to CS2+). Enjoy and Merry Christmas.
In the set you will find: Behance, Linkedin (two versions) and Twitter (two versions):
social icons behance linkedin twitterDelicious, Flickr (two versions) and Facebook (two versions):
social icons : delicious flickr facebookDigg, StumbleUpon, Netvibes, DeviantArt and DesignFloat:
social icons stumble upon netwvibes deviant art design float diggand finally: RSS, Designbump, MySpace, Reddit and TouTube: social icons rss designbump myspace reddit youtube.

Freebies by PeHaa: Ai CS2+ Christmas social icons

20 in set, ai.zip, 16 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

You may also download the .pngs files, each 225px x 225 px

Freebies by PeHaa: Christmas social icons

20 in set, .png
All made by me. Free for both personal and commercial use. If you host them, please link this site.

If you like this post, please share, bookmark. You comments arem ore than welcome.

]]> http://pehaa.com/2010/12/free-christmas-socialmedia-icons-in-vector-format/feed/ 8 free floral pattern for Photoshop and Illustrator http://pehaa.com/2010/10/free-floral-pattern-for-photoshop-and-illustrator/ http://pehaa.com/2010/10/free-floral-pattern-for-photoshop-and-illustrator/#comments Sun, 17 Oct 2010 13:37:07 +0000 PeHaa http://pehaa.com/?p=2150

Today some variation on my recent creation – a floral pattern in two variants. You will find ready to use Photoshop .pat file and Illustrator (CS2+) .ai file with pattern swatches.
floral pattern 1floral pattern 1
Free for personal and commercial use. Hope you will enjoy. Let me know.
Do not forget to link my site if you host these resources.

Freebies by PeHaa: Floral Pattern

pat.zip, 0.2 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

Freebies by PeHaa: Ai CS2+ Floralr Pattern swatches

ai.zip, 0.3 MB.
All made by me. Free for both personal and commercial use. If you host them, please link this site.

]]> http://pehaa.com/2010/10/free-floral-pattern-for-photoshop-and-illustrator/feed/ 9