Sunday, February 7, 2010

CoffeeShop "Contact Me" Mini-Envelope Icon!

I am sure you have seen those cute little Contact Me Envelopes all over blogs and websites. You click on these little guys and your email program automatically opens up with their email address. Nifty right! Well, today I am going to share the "secret" to putting one on your blog. :-)


Image and video hosting by TinyPic


I love these little envelopes and with the help of this amazing tutorial (sorry, this link does not work now), I made one of my own. So if you want to save some time, please check the bottom of this post for my free CoffeeShop Contact Me layered .psd Envelope download.



This is what the image will look like when you open it up in Photoshop or Photoshop Elements. It looks scary with all of those layers, but you only have to change the color of the heart and little letter, and adjust the text.

Simply click on the top pink Solid Color adjustment layer box to change the heart color and click on the blue Solid Color adjustment layer box to change the letter color. You can remove the heart by turning off the heart layer. :-) And you can customize the text (the text layers are circled in the image above).

Then "Merge Visible" if you are putting this on a background that is not white, or "Flatten" if the background is white. Then Image, Image Size and adjust the width of the envelope to taste. I made the one I posted above 150px wide. Make sure to adjust the image size, the original envelope is HUGE!

Upload the little envelope to an image sharing site (make sure to adjust the size before uploading) such as TinyPic and copy the Direct Link for Layouts.

Paste the code you see below (put your email address where it says "youremailaddress" and the Direct Link you copied in place of the TinyPic URL already there) in a post or on a HTML gadget in Page Elements in Blogger. Remove the center code if you don't want the image centered.

<center><a href="mailto:youremailaddress@yahoo.com">
<img src="http://i49.tinypic.com/npkyl4.jpg"> </a></center>


And you will see this:





Download the incredibly cute CoffeeShop Envelope Icon file HERE!


Do you want to download my favorite CoffeeShop PSE/Photoshop Actions and Lightroom Presets or Design Elements in one convenient zipped file AND help support this blog? Just click here for my action pack or here for a download of some of my most popular design elements, storyboards, and textures.

For complete info on installing all of my actions, click here.

25 comments:

Joanie said...

Very cool!

Sylvia said...

As usual, great tutorial Rita.
I already put it up on my blog instead of the plain ole wording.

Matilda said...

omg thank you so much for this. I have been googling the last couple of days for a tutorial like this, and today when I check my blogger updates I saw this. It has been a god send.

Thank you so very much

mwah!

Lori said...

Thank you for freebies. Link on your post was added to Lori's freebie list

Kim Burmeister said...
This comment has been removed by the author.
Life's Captures, by Jewels Martin said...

My Envelope was big too.

Rita said...

Thanks everyone!

And you have to make the envelope small via Image Size before uploading! I explain how to do that in the tutorial. :-)I made the original one large so it can be adjusted to any size.

Rita

Gretchen Clark said...

Thank you SO MUCH for these tutorials and making them easy to understand...you ROCK!!!

CBH-Freebies Search said...

Thank you so much for this Freebie. I want to let you know that I posted a link to your blog in CBH Digital Scrapbooking Freebies, under the Page 11 post on Feb. 08, 2010. Thanks again.

Staci Brock said...

Very cute! What a fun idea, thinking I just may have to add this to my blog. Thank you for putting it all together, making our lives easier!!!

CraftCrave said...

Thank you! This blog post will be advertised on CraftCrave in the DigiFree category today (look for timestamp: [08 Feb 04:00pm GMT]).

Lori Decoite said...

great tut rita! Thanks!

Jerry Jones said...

Hmmm, you must be reading my mind, which can be a scary thing, but I have been needing a contact form for me blog, thanks and hugs.

Amy said...

Thank you! I love it & I love your blog. Thanks for everything!

The Hatch Family said...

Thanks so much for this! I followed the instructions, and made it great without any problems. I'm finally getting the hang of this:)

Letitia said...

I love your blog! Thanks for sharing these wonderful tutorials with the rest of us. You're awesome!!!

Liren said...

I just wanted to say thank you so much for these awesome tutorials. I'm newish to to your site, but in such a short time, I've learned so much from you! This will definitely come in handy!

Mimi said...

Thanks, Rita. I just added your mini-envelope to my blog!

saramellander said...

SO cute!!!

Yeti said...

Love your take on this! Thanks for leaving a link back to our tutorial.

Yeti

YetiKitn.com

Mrs Jelly said...

I'm so happy somebody told me about your blog! I can see your tutorials will be a massive help to me!

Darla said...

Rita! You Rock!
I have had more fun on your blog today! Learning about actions and storyboard templates and now Blogger tutorials! I've now got a "Add this" and a "contact me" graphics on my blog. Thank you for your great and easy to follow directions.
Darla

Kelly said...

I'm not sure how I found your blog, but I'm so glad I did! I just put your Contact Me envelope on my blog and thanks to your tutorial, it was really easy - even for someone like me who is not a photoshop/flickr/html whiz!
Thank you!

Anonymous said...

Hello,

Thanks for sharing this link - but unfortunately it seems to be down? Does anybody here at www.thecoffeeshopblog.com have a mirror or another source?


Thanks,
William

Rita said...

William, you are right, the link doesn't work anymore. I will look for another link, but until then you can download the one I made and edit it as needed. Rita