Loving Life Designs - Free Graphic Designs and Printables

A Heart Willing to Follow Blog Redesign

2013-05-10T11:50:00.001-06:00

I was asked by Sasha of A Heart Willing to Follow to design a blog for her, she said "I want something simple, but cute." Then she sent me a few blog designs as inspiration.

After going through the designs this is what we came up with.

I also created some blog elements for her:

a header
and an "about me" widget with a stylized image and text.

It was a quick build and Sasha was amazing to work with. Thank you Sasha for allowing me to design something for you and your family. Go and take a look. She and her husband are adopting a baby from Ethiopia.

If you would like a custom design feel free to email me at lovinglifedesigns@gmail.com

Free Font Friday - {Jenna Sue}

2013-04-19T10:28:00.003-06:00

It's been a while since we've presented a free font. Last one we presented was celtic garamond in february. Sorry about that.

Today's free font was one I used in revision fitnesses redesign.

I really love this font. It was created by Jenna Sue of Jenna Sue Designs (jennasuedesign.blogspot.com). She says in her blog post about the font - "I'm slightly obsessed with typography (it's my favorite part of design!), so making my own font has always been on my radar of things to do." You can read more about it on her design blog.

It's 100% free to use for commercial and personal use. "That's right, FREE. 100% Free, for any project. No need to ask permission... just use it! Enjoy :)" You can download it at Dafont.com.

Thank you Jenna, we really love the font.

Revision Fitness Blog Redesign

2013-04-17T16:56:00.001-06:00

After I finished Lindsey's blog a few weeks ago, Mindy, one of Lindsey's beachbody friends asked about a design for her site Revision Fitness. I was happy to design one for her.

Mindy wanted something similar to Vegas Fitness, Nutrition and Fashion - "Simple and to the point!"

Mindy already had a header created all I needed to do was create the sites design and some blogger elements.

This was the final design we came up with.

I created several elements for her:

A Meet Revision Fitness banner
Stylized about me photos
Social Media Banners
A Join my Team beachbody image
CSS Stylizing of the search and submit buttons for the search and follow by email widgets.

Using my handy dandy HTML and CSS skills I also created a center aligned navigation bar. With a border on top and bottom to distinguish it from the rest of the page.

And last but not least using the magic of Snap Widget I made two Instagram widgets. A gallery style banner at the top of the post section and a slideshow in the sidebar.

Go and take a look. Mindy and Chris have an amazing story and are awesome at motivating their readers and were amazing clients to work with. Thank you Mindy and Chris.

If you would like a blog design email me at lovinglifedesigns@gmail.com.

I Am The Way {Free Printable}

2013-03-22T12:15:00.002-06:00

My favorite Holiday is just upon us. I love Easter and always will. It celebrates so much to be thankful and happy for. It's an amazing holiday and to celebrate I created this poster for download. There are three different kinds, cause I could not decided which one I like the most, with three different colors. All ar 8 x 10's. If you have a specific color you would want to see, please leave a comment and we will see what we can do.

To download click the Poster you want.

{Downloads are for followers only. Thanks for following us}

Comment and let me know what you think, or if you want a different color.

Michelle

Vegas Fitness & Nutrition Blog Redesign

2013-03-06T16:22:00.001-07:00

A few weeks ago my sister in law, Lindsey, posted on facebook that she was wanting a new design for her fitness blog, Vegas Fitness and Nutrition and she didn't know what to do. Naturally, I offered to help.

She didn't want anything too fancy. Just simple and to the point. She showed me a few fitness blogs to use as inspiration and then we were off.

I first designed a new header for her. It went through a couple revisions and this is where we landed.

Next I created some custom blog elements for her. I built her a new about me graphic, a join my beach body team graphic, a what am I doing widget graphic and a buy Shakeology now graphic link. Michelle built the social media icons and the go icons for the blogger search widget and the follow by email widget. *Tutorials on how to implement that on your blog later.

I also coded custom HTML for her recipes. All she needs to do is post the HTML to the blog post, input the new recipe information and publish the post. I think it makes the recipe stand out from the post and makes it easier to find and read.

This is the final look we came up with. I think my favorite part is the blue striped background. I think it creates just enough class and elegance and is not over bearing like some backgrounds can be.

Well Lindsey, I hope you love your new look. I certainly had fun creating it and working with you.

What do you think?

How to add s3slider to Blogger - (Blog Tutorial)

2013-02-27T12:43:00.000-07:00

A while back I wrote a post on how to create an automatic fading slideshow in Blogger. It was a two part post. Part one was about making images big enough for the slideshow and part two was about creating the slideshow in blogger.

After several complaints about the slideshow not working correctly I have decided to make a new tutorial with a new slideshow method. It's the same method Loving Life Designs uses on our home/landing page.

This new method uses the s3slider created by Boban Karišik. You can see a demonstration and read the workshop on his website. My method doesn't implement the text overlay. I wanted my slideshow, for the home page, to be plain and simple. But I'll be showing you how to add the text over lay if you would want it.

First thing you are going to want to do, just like I explained in part one, is determine how large you want the slideshow to be. In my slideshow example site, my images are 850px wide and 423px heigh. It's important that all the images are the same size and you know the size of your images. Write it down somewhere you'll need to remember.

These are some of the images I used for the slideshow on our home page and on my example site. Michelle created them. I love them.

The next thing you need to do is add the following javascript code to your blog. *before you make any changes to your blog HTML you'll want to save a backup of your blog. If you don't know how to do that post a comment and I'll tell you.

<script src='http://elizabethspencer.webs.com/jquery.js' type='text/javascript'/>
<script src='http://elizabethspencer.webs.com/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

</script>

To start, you'll want to go your template tab.

Then you'll click on Edit HTML.

A new window will pop up and you'll want to paste the code, provided above, directly below. </title> and above <b:skin>. Just like pictured below. It's at the top - don't scroll down.

Save your template - But don't close the box just yet. *you should've, before you started, saved a backup of your blog.

Now, we are going to add the following CSS to the template. (This CSS is for a slideshow without the overlay text - keep reading to find out how to add that back in.)

#s3slider {

border:0px solid #ffffff;

margin: 0 auto 30px;

margin-left:10px;

width:850px; /* important to be same as image width */

height:423px; /* important to be same as image height */

position: relative; /* important */

overflow: hidden; /* important */

}

#s3sliderContent {

margin: 0px;

padding: 0px;

width:850px; /* important to be same as image width or wider */

position: absolute; /* important */

top: 0; /* important */

margin-left: 0; /* important */

}

.s3sliderImage {

float: left; /* important */

position: relative; /* important */

display: none; /* important */

}

.s3sliderImage span {

font-size:13pt;

}

.clear {

clear: both;

}

Scroll down til you see. ]]></b:skin>. Directly above that you'll want to paste the code, provided in the box above. Just like I have pictured below.

This is why remembering what your images size is important. You'll want to replace my width of 850px to that of your images width both in the #s3slider and in the #s3sliderContent. Then you'll want to replace my height of 423px with that of your images height. You only need to change it in the #s3slider.

Save your template and now close this window.

If you would like to add the overlay text - replace the following code ---

.s3sliderImage span {
font-size:13pt;
}

---with this code.

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 850px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */

 -moz-opacity: 0.7; /* here you can set the opacity of box with text */
    -

khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */

color: #fff;

display: none; /* important */
top: 0;
/*

 if you put top: 0;  -> the box with text will be shown 
                                at the top of the image

 if you put bottom: 0;  -> the box with text will be shown 
                                at the bottom of the image
    */

}

Play around with the code and make it what you want. You can change the text. You can change the background color. right now it's set to black and the opacity makes it kind of grey. Play around and make it what you want it to be. - If you need help leave a comment and I'll post another tutorial about it.

FINALLY, we add the HTML to a widget box.

To do this first, you'll want to click on layout.

Then click - where you want to add the slideshow - add a gadget.

Select HTML/Javascript

In the configure box paste the following HTML

    <ul id="s3sliderContent">

        <li class="s3sliderImage">

            <img src="#">

            <span>Your text comes here</span>

        </li>

        <li class="s3sliderImage">

            <img src="#">

            <span>Your text comes here</span>

        </li>

        <div class="clear s3sliderImage"></div>

    </ul>

</div>

You'll want to replace the # with your images url and change the span to text that matches your image (you don't really have to if you don't use the overlay. )

if you want to add additional images add the following

            <img src="#">

            <span>Your text comes here</span>

        </li>

above <div class="clear s3sliderImage"></div>.

This is what my code looks like.

<ul id="s3sliderContent">

<li class="s3sliderImage">

<img border="0" alt="Free Prints" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow1.png" height="423" alt="free Prints"/>

<span>Free Prints</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Announcements" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow5-1.png" height="423" alt="free Announcements"/>

<span>Free Announcements</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Poster Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow4-1.png" height="425" alt="Poster Designs"/>

<span>Poster Design</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Free Blogger Templates" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow2-1.png" height="425" alt="Free Blogger Templates"/>

<span>Free Blogger Templates</span>

</li>

<li class="s3sliderImage">

<img border="0" alt="Custom Blog Designs" width="850" src="http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/Loving%20Life%20Slideshow/slideshow3-1.png" height="425" alt="Custom Blog Design"/>

<span>Custom Blog Design</span>

</li>

<div class="clear s3sliderImage"></div>

</ul>

</div>

Save and cross your fingers - you're done.

What do you think? How did it turn out? Leave a comment linking to your blog.

UPDATE - March 6, 2013

Lee asked if there was a way to slow down the transitions between the images and if you could add a link to the images. Both are a pretty simple fix, however, I'll only be getting to fixing the slideshow transition length today.

The jquery function script has two options. In the current tutorial the only option change we have implemented is the timeOut function which controls the length of time the image is on the screen. The default is 6000. In the current tutorial I have it set to 4000, making it a little faster than the default. It's in milliseconds, by the way, so add or subtract 1000 if you want it on for a longer period of time or a shorter period of time.

The second option is the length of the transition. In the current tutorial I am using the default length of 1000 (about a second of time). It's using the default because I haven't told it other wise. If you want about one second to remain the current transition speed no need to add the following. If you would like to have it be a slower transiton add fadeTime (make sure the T is capitalized) just behind timeOut:4000 but before });

In the example below. I've added a transition speed of about 2 seconds. Make sure there is a comma separating the two function controls.

</script>

Free Design Giveaway - {we've reached 100}

2013-02-26T08:37:00.000-07:00

To celebrate we want to host a small giveaway. We want to offer one of our lucky followers a free.. whatever... blog header, poster, invitation, announcement... etc (excluding blog design) We are so happy that we have so many wonderful followers who tell others about our designs.

Do you have something in your head you want for your house, party, blog or even a favorite quote that you would like hanging in your house, but don't know how exactly to get it/what exactly it is? Enter our giveaway and we would love to help you out!

To enter you must do a few thing.

1. Become a follower of our blog.

2. Like us on facebook.

and

3. Leave us a comment telling us what you would like us to design with a email address.

You have until Thursday March 7th to enter. We will be announcing the winner the following morning!

Good Luck!

To get inspiration and check out some of our designs, head on over to our "Free Printables" page to see what we have created. Here are a few blog headers that I have created in the past, that I can re-call. Is that terrible? I don't remember the other ones that I have created.. hear me out... I got a new computer last year and I didn't transfer a lot of my old designs to it and I am just to lazy to go and dig them out.

Check back soon we have some exciting things coming to Loving Life Designs!

Custom Design - {Baby Shower Invitation}

2013-02-20T07:00:00.000-07:00

One of my office co-workers is having a sweet baby boy at the end of this month and I was asked by the person hosting the shower to create an invitation for her. I was excited cause it meant I had some pretty free rein over what the invitation would ultimately look like.

You like? I love!

They don't even know that I have this side hobby of mine. When they hired me they noticed that I had a degree in art. After I was hired they asked me to update a flyer for an event that they were hosting. It was pretty awful and I asked them if I could make a few tweaks to it. I didn't even have my Illustrator or Photoshop on the computer yet, cause they didn't know my background and after I made the few tweaks/ totally revamped it, with publisher! (Publisher can do lots, but not what I want and needed it to do. Super great for someone who does not have a art background) Now, I've been asked to do several different things for our office and other publicity events. It's been fun to use my abilities in a setting that I most likely would not have. So note to everyone, let people know what you can do. It will open up many doors for many opportunities.

Sorry for my soapbox. Now, if you ever would like a custom design by us, please feel free to shoot us an email at lovinglifedesigns@gmail.com to get some more information.

Michelle

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Free Font Fridays - {Celtic Garamond}

2013-02-15T08:00:00.000-07:00

Today is the third installment of our Free Font Fridays. Today, I present to you the font that I used in my Disney Pixar Brave valentines and my daughters sixth birthday party invitation.

I chose this font for both the invitation and the valentine because it feels very celtic and it's super easy to read. I had found some other fonts that were a little more stylized but were not as easy to read. After all my target audience is 5 and 6 year olds. Plus, you can't go wrong with anything in the Garamond family.

You can download Celtic Garamond from dafont, fontzone, fontspace, or fonts4free. If there is a site you prefer to use over another than download it from there, otherwise here is a link to download it from dafont. *This is free for personal use only. If you plan to sell something using this font you'll have to pay.

Here is a reminder of one of the cute valentine cards I used it in.

and here is the invitation I made using the font.

What do you think?

Enjoy.

Disney Pixar Brave Valentine Cards - {Free Printable}

2013-02-11T12:54:00.000-07:00

My daughter is obsessed with Merida. Disney Pixar's new princess. She wanted to be her for halloween. Her 6th birthday party was themed around brave. I even designed a brave invitation for her party - which I am totally proud of. I'll show it off later.

Naturally she wants brave valentine cards. So this year I decided to make and print them for her. They're not fancy or flashy. Just simple and to the point. After all they'll be going in the trash a few hours later.

I've put all 4 on one page for you to download and print. I've left a little white space so you can trim the card with or without a white border.

I have a PDF or a JPG version. I'll be sending mine to kinkos and I need it to be a PDF not a JPG for that. (you would think that I had a working color printer in the house - ha ha, nope!)

*Remember - Loving Life Downloads are for followers only. We ask that if you download our work that you become a follower. It only takes a second - thanks.

What do you think?

Enjoy.

Valentines Day Poster - {Free Printable}

2013-02-07T09:49:00.000-07:00

I meant to post this yesterday but illness has kept me in bed and since I am still in bed this is going to be real short.

Happy Valentines Day Everyone I hope it's a good one.

I made this 8 x 10 poster a about a week ago for Valentines Day. It's from 1 Corinthians chapter 13. I was inspired by, you would not believe, How I Met Your Mother. I've been re-watching the seasons and Marshal quoted this verse during one of the episodes centered around Lily and Marshals wedding.

This version of 1 Corinthians chapter 13 is from the King James Bible.

I also made 4 x 5.25 cards. I've left a little white space around the blue to made a nice border. Just print and cut.

Let me know if you need a different size. I'll be happy to make it.

Enjoy.

*Remember - Loving Life Designs downloads are for followers only. We ask that if you download our creations you become a follower. It only takes a second. Thanks.

Free Font Fridays - {Antrokas Font}

2013-02-01T12:00:00.000-07:00

It's our second installment of Free Font Fridays!

Today we are presenting a font that basically is the new face of Loving Life Designs

The font is Antrokas.

It's an elegant script font created by Rokas Cicenas. It's available for free download here at dafont. I have loved this font since I first saw it a few years back. I instantly downloaded it, but never could figure out the perfect design to use this font with. This font is defiantly meant to be used lightly, meaning designs that don't require a lot of text. Perfect for logos or headlines. Hence the reason we used it for our new logo and throughout the new blog.

Michelle

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Free Facebook Covers

2013-02-01T07:30:00.000-07:00

It's February! I'm so happy that it's February. I hate January. I know hate is a strong word, but I honestly HATE January. It's so cold and I'm usually done with the winter weather by January 1st. So hooray for February. Yes, I know this month can be cold, but it's the beginning of the end of this awful cold weather and that is why I LOVE February! Not to mention it has two great holidays... Ground Hogs Day, my husband and I watch the hilarious movie with Bill Murray, every Feb 2nd, and Valentines Day..created by Hallmark :) But I love it. It's a day I get to express to my family I love them, then just telling "I love you."

To help bring in this happy month I've created two fun Facebook timeline covers for you to download.

Numero uno. is easy. No editing of any kind. Just download the file here and upload to Facebook.

No. 2 a little more difficult, but no worries I will walk you through it.

Instructions:

1. Download the file here. I always suggest you download files to your desktop. Easier to find and then you can always move it to a different destination.

2. Open it up in Photoshop. The file name will be "LLDfacebookcoverValentinesPhoto.psd"

3. Select the photo you would like to use and drag it into Photoshop. Once it is in the file press "enter"

4. Now you are going to put your image layer between the layers titled "Clipping Mask" and "Kisses"

5. You are then going to right click your image layer and scroll down to "Create Clipping Mask"

Now, resize and move your image to where you want it.

7. Vola! Your image is set!

8. Save the psd file, and do a "Save As" as a jpeg.

9. Last but not least, upload as your Facebook cover!

Enjoy!

We would love to see the covers in action! Please leave a comment with a link to your Facebook page to see it. Thank you!

Michelle

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Lobster Two - {Free Font Friday}

2013-01-25T07:50:00.000-07:00

Loving Life Designs is getting a Ginormous overhaul. Not only are we changing the look of the blog. But we are also overhauling the posts. The one major thing that was lacking in 2012 was regular posts. The two of us have made a resolution to post more and we think that if we have themes to post about we'll post more often.

Starting with.....

The plan is that on Friday, Michelle and I will present to you a new free font that we just can't get enough of.

Today's font is that font that you see every where. AND I mean everywhere. I've seen it on TV, in magazines, on billboards. You name it I've seen it there. I've never known a font to blow up in popularity like this one has. That's right you, guessed it, Lobster Two.

Isn't it a beauty? We just love using it in our own designs. Here are a few of our designs where we use lobster two.

Here is a funny article that goes into detail about the misuse/overuse of this font. http://www.mishes.com/articles/lobster-font-abuse

I love the collage of images with all the sites, articles, magazines that have used the font.

{images via http://www.mishes.com}

To download the font click here.

To check out other fonts from this designer, check out their website here.

Enjoy the font, try not to go over board, like us and the rest of the designing world. :)

UPDATE - Jan 31, 2013
I was watching HGTV last night and during one of their commercials I noticed Lobster Two font being use. See, it's every where!

Custom Blog Re-Design - {Color of My Fangs}

2013-01-23T11:01:00.002-07:00

Back in August, (yes, forever ago) Katie of "Color of My Fangs" (colorofmyfangs.blogspot.com) contacted Michelle and I asking for some help with the look of her blog. She was having trouble achieving the look she wanted and asked if we could figure it out.

I made my attempts at it but was having a hard time making the current template do what she wanted it to do. Instead of "fixing" the template, I thought it would be easier to start from scratch and just create a brand new template for her.

She didn't want much. Just a simple minimalist blog that highlighted her pictures more than anything else, with a horizontal drop down menu, that had a search function, and a social media icons menu. Like I said not much.

It was a challenge to have the two VERY different menus in the same widget. One was text and CSS based and the other was image based. At first I wasn't sure what I was going to do but then I found the solution. I had to modify the template and create a new two column section above the post area, separate from the single column section meant for the default blogger menu. Then make two separate widgets for the different menus. One on the left column and the other on the right. It took some trial and error but I was able to finally accomplish the look she wanted.

The other thing Katie wanted was to have her outfit images to be as large as possible. Unfortunately bloggers default sizes were not working for her. The original size was WAY to large and extra large was just a little too small. I ended up making some minor CSS adjustments to the images which made it possible for Katie to make them the perfect size for her needs.

Here is what the final look turned out to be.

Katie was really great to work with and she was very understanding of my limited time. I think from start to finish it took about 2 months - I was able to get the finished blog to her in October. A little long, but not too bad considering all the other things I was doing those months (working part-time, my 5 year old started kindergarden, 2 of my sisters getting married, my anniversary, editing a movie - thats right I edited a movie, that will be in a few film festivals - it's called Jeb Finds God and you can watch it on Vimeo and not to mention that I had an infant attached to my hip) and the fact that it was all pro-bono. Not planning on doing that again. If you are interested in a blog design email us and we'll send you some info on our design process.

Thanks for reading - What do you think of the design?

Loving Life Designs is All New

2013-01-16T16:12:00.001-07:00

Notice anything different? Of course you do this blog has done more than just a 180 turn. It's insane how different this thing is. It took us about 6 weeks to really figure out what we wanted the blog to look like, to code it and then to perfect it. We're still not 100% complete with the look, there might be a few more changes but nothing TOOO dramatic.

It's a far cry from what the blog originally looked like - and this version below is like update #6. I don't think we have a screen shot of what the blog originally looked like.

We've gone through a lot of changes here at loving life. Our logo has had a few major updates.

Original Logo/header - which had like 3 updates.

Current/recently retired Logo/header - which we made 2-3 updates to.

I really enjoyed this header. I think my favorite part was the yellow flower. Michelle did a grand job on that design.

Do you see a trend? Thats a lot of change for a blog that is just two years old.

Here are some things that we're hoping to accomplish with this update.

Update/modernize the look and feel of the blog - our goal was to make it feel more like a website than an actual blog.
Update the color scheme - make it feel more open and welcoming, not so dark with all the greys and blues.
Create a new logo to match the new color scheme and overall new ambiance of the blog.
Make it easier for new potential followers to locate our different designs.
And FINALLY be settled on a look for the blog - NO MORE UPDATES!

So lets introduce you to the blog.

1. First thing you'll notice that we changed the logo/header.

I'll let michelle explain her new design and why she went with this look.

When designing the logo header I wanted to encompassed our motto "Creating Fresh Modern Designs" It's fresh, chic and invites viewers to explore our blog further then the first few posts.

2. Next is the layout. Like I mentioned earlier we wanted something that felt more like a website and not a blog. First thing you'll notice is a welcome post. It's for new visitors to the site, it's meant to introduce them to who we are and also give them an easy search function. Take a look at our Custom Search Tutorial for more information about that. (And yes, that is a picture of the two of us as kids...we were pretty stylish)

3. Next we have a wonderful jQuery slideshow. It's pretty great. In fact I absolutely love it. It scrolls through five images and introduces you to our services and available downloads here at Loving Life Designs.

4. Below that we have a "Whats new from Loving Life Designs" widget.

It updates automatically as we post more tutorials and downloads to the blog. The three most recent blog posts will always be there.

5. So where is the blog? What happened to the ability to scroll through all our posts? Oh! There it is!

That's it for the tour. Go ahead, take your time and discover the new site. If there is something that is not working for you let us know so we can fix it.

Thanks for reading - Let us know what you think of the design.

Another Christmas Card Design- 2012 - {Free Christmas Card Design}

2012-12-05T12:39:00.001-07:00

Hey Everyone!

Today, I know finally... your thinking...what Michelle is posting! That is crazy! I have been a little MIA on the blog lately. Apologies!

Anyways, I designed this a few weeks back and am now just getting it up on the site for everyone to download and use! I am terrible!

I really love it! It's a 5x7 photo card.

*Loving Life Designs downloads are for followers only. If you wish to download our creations we ask that you become a follower, it only takes a second. Thank you.

It's a psd (photoshop) file. You can edit the "The Morgan Family" and add your own picture. The font I used is HERE, from dafont.com. It's called Znikomit.

If you need help downloading a font and installing it, Elizabeth wrote and awesome tutorial. Go HERE to read it.

Here is a quick over view on how to add your photo to the photo card. Or any photo card for that matter.

1. Download the file. It's always best to choose your desktop so it's easier to find. It will be titled "Christmas 2012lovinglife.psd"

2. Open it up in Photoshop.

It should look like this when opened. You should see two layers in your layers palette. One layer will be the "Merry and Bright" and the top layer is "The Morgan Family" font layer. * Remember to download and install the font before you edit the file or Photoshop will choose a different font.

3. Select the photo you would like to use and drag it into the file. Press "enter" once you get it in there. The photo should be your top layer now.

Or you can go to "File" "Place" to open your photo in the file.

4. You are now going to drag your photo's layer and put it at the bottom of all the layers. Once there you can resize (apple "T" or Ctrl "T") and move your photo to the area it's suppose to go.

5. Now, just change "The Morgan Family" to your family name or to Love, The.... etc... it's all up to you! Just be careful about not moving the font layer. It's aligned just right under the Merry and Bright.

6. SAVE!!! I would save the psd. Then "save as" a jpeg.

7. Last thing, send the jpeg file to your local print store. Walgreens, Walmart, Costco, Sam's Club etc.

Enjoy and remember it's always FREE!!!!

Happy Christmas!!!

New Christmas Holiday Photo Cards - {Free Christmas Card}

2012-11-28T22:12:00.000-07:00

Can you believe that Christmas will be here in a mere four weeks? I can't believe it! Where has this year gone. It's been a blur.

Today I have for you two new photo Christmas card templates to download.

First off a fun Boxed Collage Christmas Card.

I've made the template available with two greetings "Merry Christmas" and "Happy Holidays".

*Loving Life Designs downloads are for followers only. If you wish to download our creations we ask that you become a follower, it only takes a second. Thank you.

This photo collage christmas card allows you to show off not just one but two of your favorite family photos this year, along with a simple and sweet holiday message.

The photo card is easy to customize, just add your two pictures and change the last name. Easy Peasy! If you really want to get adventurous you could use four photos and fill every box with family fun memories. This card will surely be loved by your friends and family.

*A Little Note about the fonts:

The font I used for "Merry Christmas" and "Happy Holidays" is called ribbon from Lost Type Co-op. However there is really no need to download the font since it's a non editable element in the template.

The font for the photo card closing - "with all our love, the YOURLASTNAME"- is Century Gothic. It should already be installed on your machine but if not you can download it from ufonts.

The other Christmas card I have available is a little more elegant, but still so simple. Can you tell I'm a minimalist?

I've also made this template available with two greetings "Merry Christmas" and "Happy Holidays"

*Loving Life Designs downloads are for followers only. If you wish to download our creations we ask that you become a follower, it only takes a second. Thank you.

Again, this elegant photo card is super easy to customize. Add your favorite family photo and fix the last name and add your families first names. Seriously, this card will surely be cherished by your loved ones.

*Another Note about the fonts:

The font that I used for the last name and the family first names in this elegant template is called dancing script and can be downloaded from fonts squirrel. You'll have to download and install the font, you can learn more about that from my "how to download and install fonts from the internet" tutorial, or you can change the font to Century Gothic. The font combination will look wonderful - if you choose not to download dancing script.

Enjoy and as always it's free.

If you are having trouble with the templates feel free to leave a comment or email us directly.

Four Free Blogger Template Designs - {Free Blog Template}

2012-11-01T11:34:00.001-06:00

Today I have four (4) new blogger template designs for you to download.

I'm continuing to build on my Simple Two Tone Template that I rolled out a few weeks ago. I really enjoy the look and feel of this template. It's so simple and so minimalistic that readers can focus on your message and not your background.

With these new templates I am introducing a new color scheme to the mix I call it Sunshine & Clouds. Yellows and greys are the current color trend and I thought that someone somewhere might appreciate a template following the trend.

What do you get with this template design?

A beautiful color scheme.
A blog header that uses matching fonts (Dancing Script & Crushed) and colors.
Page navigation that uses bloggers pages widget.
A custom looking about me widget that actually uses bloggers profile widget.
A template that uses Bloggers Template Designer.

*Remember Loving Life Designs downloads are for followers only. We ask that if you download our creations that you become a follower, it only takes a second. Thanks.

In addition to the new color scheme I'm developing a Chevron Background Series. All three current color schemes (Goldfish, Pacific Pink, and Sunshine & Clouds) are part of the new series.

Click here to download Goldfish Chevron Template

Click here to download Pacific Pink Chevron Template

Click here to download Sunshine Chevron Template

I'm working on a few more Holiday ideas - hopefully I can roll those out soon.

Enjoy - let me know if you have any trouble with the template or if you do install one of our templates. Leave a comment or email us we would love to see it in action.

Halloween Party Invitation {Free Printable Invitation}

2012-10-13T21:20:00.000-06:00

Tonight I was looking at our download stats and noticed that our princess party invitation was downloaded and was reminded of how much I love that invitation. I love how simple it is and it's design could work for a number of different events. I had even said I would do a 4th of July invitation but never got around to it.

Since Halloween is just around the corner I decided to make a Halloween Party Invitation following the same design concept.

This is a 4x6 PSD invitation - if you would like a 5x7 email me and I'll make one.

*Remember Loving Life Designs Downloads are for Followers only. We ask that if you download our creations that you become a follower, it only takes a second. Thanks.

A little note about the fonts:

The font for "Happy Halloween" is bosshole and can be downloaded form kevinandamanda.com.

Click the image to download

The party infomation is called century gothic. It should be on your computer as a default font but you can download it from ufonts.com.

Click image to download

Enjoy

Introducing Free Blogger Templates - Simple Two Tone Template

2012-10-11T09:28:00.000-06:00

We are rolling something new out, here at Loving Life Designs. We've spent a ton of time thinking about this and countless hours preparing for this, we hope you enjoy it.

Drum Roll Please

Introducing Free Blogger Templates designed by Loving Life Designs.

The great thing about these designs is that they work with bloggers designer templates and not the minima template that has mysteriously disappeared since they permanently switched everyone to the updated interface.

There are some other features that I love about these designs.

The Blog Title is not a picture. It is from the default blogger system. Just adjust your Blog Title and Blog Description in the configure header widget.

The profile/about me widget. It's got some style, no more boring profile information. The image is a cute and simple circle, created using handy CSS and your name is a font that matches the blog title and post title.

Today I would like to introduce you to our first design.

I call it Simple Two Tone. You can see a sample of the blog template here or click see the demo below.

The title says it all. It's simple, minimalistic and it's color scheme is designed with two colors that look great together.

As time passes we'll come out with some additional color combinations and some fun backgrounds but for now we have four options for you to choose from.

*We ask that if you download our creations that you become a follower, it only takes a second. Thanks.

Halloween Color Schemes.

Candy Corn	*Midnight*

Download the Candy Corn template here	Download the Midnight template here

If you want a special header I created two headers for the Halloween Color Schemes

These are for the Candy Corn Color Scheme - Click to Download

These are for the Midnight Color Scheme - Click to Download

How To Install these Headers (i'll do a better post about this soon)

For now - First download the png file and save it in an easily located file. Navigate back to your blogs dashboard and click on layout. Then click edit on your header gadget. When the configure header dialog box appears under image click on choose file from your computer. Navigate to where you saved the image and click open. IMPORTANT! Make sure you have behind title and description checked.

Just for fun Color Schemes.

*Pacific Pink*	*Goldfish*

Download the Pacific Pink template here	Download the Goldfish template here

Enjoy - Let me know if you have any trouble and if you install one of our templates leave a comment or email us we would love to see it in action.

I'm a Mormon - Ann M. Dibb {Free Printable}

2012-10-07T14:10:00.002-06:00

During the saturday morning session of general conference Ann M. Dibbs gave a talk titled "I'm a Mormon." It was a beautiful talk aimed a the young women of the church.

Sister Ann M. Dibb, second counselor in the Young Women general presidency, recalled meeting a teenage member of the Church a few years ago. She immediately knew this sister was not from Utah because of the words on her T-shirt which read, “I'm a Mormon. Are you?” Sister Dibb was impressed by this young woman's bold declaration and pondered what her own T-shirt would figuratively say. She concluded it would read, “I'm a Mormon. I know it. I live it. I love it.”

She said it is important to be confident in Church membership, just like the apostle Paul who said, “...I am not ashamed of the gospel of Christ. . . .”

“Such conversion and confidence is the result of diligent and deliberate effort. It is individual. It is the process of a lifetime,” Sister Dibb said.

Read more about the talk here.

It was a wonderful talk and I was inspired to create a poster from her magnificent message.

I've created 3 files for you to download. Choose your size, print and put it in your favorite frame or gift to that young woman in your life.

*Remember Loving Life downloads are for followers only. We ask that if you download our creations that you become a follower, it only takes a second. Thanks.

Enjoy.

How to Add a Custom Search Gadget to Blogger part II

2012-09-20T19:13:00.000-06:00

Today I would like to present to you the second part of my two part tutorial on how to customize a search function. You can read about the first part here.

The great thing about this is that with just a little effort and not much code you can make a functional search box that matches your blogs design.

Lets jump right in.

Our original code for the search form should look like this.

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

The form should look like this -

• • • • •

How to change the "execute search" button

Using the code from above. First delete the code value="search".

Then change type="submit" to type="image". Not to be confused with type="text" found earlier in the form. Don't delete that.

Next, add your image by adding the code src="IMAGEURL.PNG" before the type="image" but after id="search-btn".

Now you'll want to align the image by adding align="top" before the id="search-btn" code but after the input code. This is not necessary but if you having alignment issues adding this could be the solution.

The form should now look like something like this - depending on the image you used.

and your code should look like this

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="30" type="text" /> <input align="top" id="search-btn" src="IMGURL.png" type="image"  /></form>

Note:
If you are in need of an image to use I have this one and this one .

The url for the first is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/SearchButton.png

and the url for the second is http://i1251.photobucket.com/albums/hh552/lovinglifedesigns/search_btn.png

for more search buttons do a quick internet search, you'll find thousands of ideas.



• • • • •

How to change the Border and Background colors of the search form

This one is pretty easy. All you need to do is add an inline style to the search form. I've added it after the name="q" and before the size="30" codes.

Example 1 -

In this first example I added a red dashed border by adding the following code style="border: 1px dashed red"

Example 2 -

In this example I added a purple border and a pink background by added the following code style="border: 1px dashed #8d38c9; background:#FAAFBA;"

Example 3 -

In this last example I added a goldenrod background by added the following code style="background:#FAAFBA;"

My completed form code for example 3 looks like this:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="background:#FAAFBA;" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

Here are some useful resources to help with color and border properties.

For more information on CSS borders take a look at this tutorial by W3Schools .
For more information on HTML color codes take a look here at computer hope .
For ideas on color combinations take a look here at colorlovers web trends.

• • • • •

How to Change the Text Properties of the search form

To change your text properties, like changing the text color or making the text uppercase, you again need to add an inline style to the search form.

To change the text transformation add text-transform:uppercase;.

Example 1 -

To change the text color you need to add a color: #HTMLCODE;.

Example 2 -

*Remember you need to add words to the search box in order for this option to work. You can learn about that from my last tutorial.

My completed search form code for the above example looks like this:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" style="text-transform:uppercase; color:#c38ec7;" size="30" type="text" value="keyword search" /> <input id="search-btn" type="submit" value="Search" /></form>

Here is a great resource on text properties from HTML help.

There you have it folks a simple, totally customizable, yet powerful search function. I hope that this tutorial is helpful. Please let me know if you have any questions I will be happy to try and help.

Happy Coding.

How to Add a Custom Search Gadget to Blogger

2012-08-03T20:36:00.002-06:00

I can't believe that the last time michelle and I posted anything on this blog was April 25th. Seriously SO SORRY.

We're still here I promise.

Today have a two part tutorial on how to add a custom search gadget to blogger. The title should almost be a SIMPLE Custom Search Gadget for Blogger. It really is that easy to add and customize.

Having a search feature on you blog can save readers a bunch of time if they are looking for something specific or a certain topic. Plus, like I said earlier, adding one is so incredibly easy that there isn't a reason in the world you shouldn't have one; and you'll wonder why it took you so long to add it.

The easiest way to add search function is to add the blogger team designed gadget "search box". It's a fine option if you wish to have a generic look to the search box. It says it's a custom google search but that just means you can add different variables to search; for instance you could have it search not only your blog, but google, and your blog roll. That seems to be all the customization available.

And it would look something like this.

Doesn't inspire too much creativity does it. After all you've spent countless hours making your blog look the way you want it to look. A generic search function just stands out and doesn't blend with the look and feel of your custom blog design. Wouldn't you rather it look something like this?

or this?

or maybe even this?

So here we go How to Add a Custom Search Gadget to Blogger

First things first lets add the search box to your page and then we'll discuss a few quick changes.

1. Go to Dashboard > Design > Page Elements > and select "Add a gadget" > then click the plus sign (looks like this ) next to the HTML/Javascript.

2. Copy and paste the following code to the content box.

<form action="/search" id="searchthis" method="get" style="display: inline;">

<input id="search-box" name="q" size="30" type="text" /> <input id="search-btn" type="submit" value="Search" /></form>

3. Save and Viola, you are done.

Now lets show you some quick ways to customize the search function.

Add words to the search box. Currently the box is blank. add the following code value="keyword search" right after the code type="text" but before the />. You can change the text inside the quotes to whatever you want. For example you could have it say "search" "search loving life" or "enter keyword". It's whatever floats your boat, it's your search function.

Change the word in the enter button. This is easy! Find the code value="search" and again change the text inside the quotes to whatever you want. For example it could say "go" or "find". Seriously whatever.

Change the width of the search box. lets say that you want this in your sidebar but it's too long. Find the code size="30" and adjust the number up or down. A larger number will make a longer search box, a smaller number will make a shorter text box. Play around with the number to find the right feel.

I think that is all for now. Next post I'll show you how to change the background color, the border, the text and switch the search button to a picture.

If you are having trouble with the search function or have a question leave a comment or email us and we will see what we can do.

Long Absence

2012-04-25T10:45:00.000-06:00

I wanted to apologize for our absence. Michelle just started a new full time position (yeah for her) and I gave birth to a wonderful baby girl on March 30th.

We are deeply sorry about the absence. Here are some pictures of my new little one to tide you over.