Creating a Simple Collage with PhotoShop Elements

This tutorial will be for your Photoshop Elements users. I personally use PSE8, so if you use a different version, the directions may vary just a bit.

With this tutorial, I will show you how to create just a simple photo collage, and later I will do one that is more complex! Hope you enjoy!

~Open up a new page. Decide what size you want your collage to be. I like using 8x10 for framing, or 12x12 for scrapbook pages. But any size will do. Set your Resolution to 300 pixels per inch. Whenever you are wanting to print a "project"...you always want to set your resolution to 200-300ppi for better print quality!
~Use your Paint Bucket Tool to create your background layer as a solid color.
~ Open each of your pictures you want to add to your collage, and minimize each of them. Go to WINDOWS, PROJECT BIN. This will open a new screen at the bottom of your page called your project bin. It is a great tool to be able to see everything you have opened, and be able to click and drag from there! WOO HOO! I love when they make things easy! ;)
~ Make sure your New layer is highlighted in your layer box, and click and drag up your first picture on to your collage. A new layer will automatically be created for you...another woo hoo!
~ Use your Move Tool to re size and move your image to where you want it.
~ Continue to do this with each picture until they are all of you collage. Once they are all there you can move and re size each picture on its own, since they are all on their own layer.
~If you want to add a border around each of your pictures(like I did), Select the Move Tool. Right click on a picture a select Edit Layer Styles. Check mark the STROKE box and select the size and color of your border. I used 15. It's best to use the same size for ever picture.
~ Continue doing this with each picture until you are happy with the look.
~You can add text to your collage by selecting the Text Tool. You can change the font, size and color by the text options box at the top of the page.
~ Don't forget to Save when you are done! :)

Tools Needed:

 

This is the sample one I made using these instructions:

 

Creating a Simple Photo Collage in GIMP

Creating a Collage can be something VERY simple to something a bit more complex. In this tutorial I will show you how to do a SIMPLE photo collage ( IN GIMP). Later I will do another tutorial on a more difficult one. There is a guide to the tools you will need for this at the bottom, as well as my sample collage I made from this tutorial. Have fun!


~Open up a new page as big as you would like to print you collage. Such as an 8x10 to frame, or a 12 x12 scrapbook page. Go to File, New, change the pixel option to inches, and select your size. Then hit "Advanced options". Change your X resolution and Y resolution to 300 Pixels per inch(ppi). Anything you know you will eventually want to print, you want to create at 300ppi. This will give you a great resolution for your prints.
~Use your BUCKET FILL TOOL to choose the color that your background will be. I always love either black or white backgrounds. This give your pictures PLENTY of room to stand out. But any color will do.
~Now it's time to add the pictures! Go to File, Open as Layers. Choose your picture. Once it opens up as a second layer, you can resize it by using the SCALE TOOL, and move it around by using the MOVE TOOL. Remember when using the scale tool, to click on the little chain link in the box that opens up. This will allow you to scale it by clicking the corner of the picture and moving it, it will keep the proportions right, and not distort your picture at all.
~Continue to do this until all you pictures are opened up...all on their OWN layers! This will allow you to move and re-size each picture on its own, until you have their size and placement just right!
~If you want to add a border around each of your pictures(like I have done), you will need to open each picture up on their own new page. So go to File, Open, and choose your picture. It will be put on its own page, instead of as another layer on your project page. You can then go to Filters, Decor, Add Border. You can change the color of your border as well as the size. I like around 30-40.
~You border is created on its own separate layer, so you will need to Merge the layers together. Right click on the Border layer in your layer Box. And click Merge Down.
~Now to get your picture with its border on to your Collage page. Hit Ctrl X (cut).
~Go to your collage page and open a new layer. You can do this by going to Layers, New Layer. Or by clicking the little paper icon at the bottom of your layer box. Make sure it is set to open a Transparent layer.
~After you have sized and placed your picture where you want it, you have to ANCHOR it down, before you can move on to any other action. You can do this by hitting the little anchor icon at the bottom of your tool box.
~Continue doing this will each of your pictures until you have them all on you collage project page. Re-size and re-arrange until you are happy with the way it looks.
~If you want to add text to your page, simple click the TEXT TOOL, type your text. At the bottom of your tool box, you will be given the option of changing the color, size and font of your text.
~To add the final detail, if you want a matching border around your whole collage, go to Filter, Decor, Add border.
~Don't forget to save! :)

Tools Needed:

.

Adding "Post Dividers and Siggy's" to your Blog

Ever wonder how peole get those cute little signatures under each post, as well as the fancy little post dividers? Well here's how...its pretty easy, and will make a HUGE difference on your blog!


FIRST is the creating part:


-Open a new page in your editing program sized ABOUT 700px x 200px(your length can be longer...but I wouldn't go any higher).


-Create your design and add a signature on it. You can get GREAT handwritting fonts from HERE.


-Save your image as a .png(PS) or .gif(gimp)


-Upload your image to Tinypic.com or Imagehost.org and copy the Directlink(tinypic) or Hotlink(imagehost)


TIP: You can choose to do an all in one siggy and divider...I have found this easier. OR, if you dont want the divider, you can simply just do a signature.


INSATLLING YOUR POST DIVIDER/SIGGY


- Go to Layout, EDIT HTML


- scroll down till you find(it will be the second section in the POST section) :


.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

-Hightlight ALL that you see above, and delete it. Replace it with ALL that you see below:

.post {
background: url(http://yoururlhere.jpg/);
background-repeat: no-repeat;
background-position: bottom left;
margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

-Insert your link you got from tinypic/image host where it says YOUR URL HERE.


Scroll a bit more and find the Section that looks like this:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
Replace the RED number with 3em. If your post divider is BIG, you may need to make this number be a little higher. This will allow a little romm under each of your posts so your post divider doesnt sitt ontop of your post.

-Save and preview.


TIP: You can change the position of your divider by changing the above code where it says "bottom left" to "bottom center" or "bottom right".
You may need to or want to change the date/time and signature stamp that is automatically put under each post. I would recommend removing your name(if you added a siggy on, and the time, but leaving the date. Here is how to do that:
How to edit the DATE/TIME/SIGNATURE stamp after each:


-Go to Layout, Page Elements


-Click EDIT on your BLOG POST section.


-Check mark or uncheck mark the items you want shown/or not.


-Save

HERE is a great site for Pre-made post dividers. You can open them up in your editing program and edit the size of them to your liking, and also add your signature to it. Then follow the same steps as above for saving and installing.

CREATING A "GRAB MY BUTTON"

Buttons are the new advertisments of your blog! Whats a better way to get your blog name out there to share with as many people as you can! You can now create your own button and then all of your visitors can "grab it" and post it to their blog.

To CREATE your own button:

-Open a new page in your editing program. The size should be no larger than 200x200(so that it will fit in your side bar).

-Create your button using text, papers,ribbons,buttons,etc., or even pictures.

-Save it as a .png(PS) or .gif(gimp)

-Upload your image to tinypics.com or Imagehost.org. And copy the Directlink(tinypic) or Hotlink(imagehost).

-Paste your link into the code below IN BOTH SPOTS and also place your blog address in the right location too:

<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="http://YOURBLOGADDRESS.com" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>


-Go to Layout, Page Elements

-"Add a gadget". You will want to choose one on the side. After you create your gadget, you can move it lower on your list if you would like by just clicking and holding it down and moving it to the right spot.

- Place the whole code into the "content" box

-Save!

Your button and its code will now be available for all your visitors and followers to grab and post it on their blog!

To GRAB someone else's button (BUTTON....NOT BUTT):
Most will have a code box just like on yours. You can copy their code and place it in a new gadget(not the same as your button gadget). You can grab as many buttons as you would like and add them all to the same gadget by putting
in between each one. This < br> means a space break. You can add it twice if you want a bigger break between buttons. I do mine twice.

If you find someone's button who DOESNT have a code under the button, simply click on it and it will bring you to their flickr or photobucket account. Right click the image and hit SHARE, then select Blogger. Enter YOUR blog information, and it will post it to your blog automatically.


.

ADDING A "BLOG LIST and FOLLOWERS" TO YOUR BLOG

They’re super easy to add. Just go to Layout, then Add a Gadget (preferably one that is on your side column), and there is an option for Blog List/Followers. Then just click on “Add a Blog to your List,” and copy and paste the web address. Now hit Save. That’s it.


.

GIVING YOUR BLOG EXTRA LARGE PICTURES

You've worked hard to make your pictures look great, and if you're like me, you want to make sure they're big and beautiful on your blog. Blogger gives you different size options, but if you want your pictures to show up in XLarge size, keep reading.
It's very important that your blog has the Updated Editor selected, so let's make sure you have that selected first.
- Go to Customize, Settings, Basic.


- Now go all the way towards the bottom of the page where it says "Select Page Editor."


- Click on "Updated Editor."


- Click "Save Settings."

Now go back up to the top and click Posting. You should now be able to start a New Post. Upload your new picture, click ok, and click on your picture and you will be given an option for XLarge. It seems so simple, but you wouldn't believe how tedious it was before the Updated Editor. :)


.

ADDING A "TICKER" TO YOUR BLOG

Want an easy way to remind family and friends how old your kids are? Or a countdown till your big family vaction, or even a counter to know how many people have viewed your blog? Well, tickers are an easy way to get any of those done! A few great ticker sites to check out are :



Lily Pie (for kids ages,anniversaries, due dates, etc.)
TickerFactory (kids,vacation, due dates, weightloss goals)
FreeCounters (a counter to show how many hits you have)
Go to any one of the sites listed above. Create your ticker. ANd then find the HTML code. Copy this code.
-Click on the Customize link at the top right of your blog. Then Layouts, and Page Elements.


-Click on one of the Add a Gadget links.If you made a full size(long ticker) you will need it to be at the top or bottom of your blog. If you used a smaller half size ticker(short), then you can use a side gadget.


-Click on HTML/JavaScript to open the gadget.


-Leave your title blank(or this will show on your blog), and paste in your HTML code under Content.


-Click on Save
 
.

ADDING A "PLAYLIST" TO YOUR BLOG

Adding a playlist to your blog is just one more way of letting the world see another glimpse of you and your style. Some people love hearing others playlist, and some would rather turn the volume down!Here are the steps so you can add a little "umph" to your blog. Whether someone turns your playlist down or not...well, thats up to them! :)
-Go to Playlist.com


-Go to Join Now, or log in at the top right corner. To join it is free...and VERY fast!


-"Start building a playlist"....search for you song title, words in the song, or artist name.


-You can listen to the song by pressing the play button next to the song. If you want to add it to your playlist press the + button.


- Your song will be added to your playlist on the right side of the screen.


-After all your songs are chosen, you can rearrange them how you want them to play,Or you can hi the little button on the top right of your playlist screen to "shuffle" them. SO each time someone visits your blog, a new song will play.


-At the bottom of the playlist screen, hit "SHARE" or "EMBED"


-Choose your settings and hit "GET CODE"

-Before you hit the BLOGGER button, copy the FULL code that is found at the bottom of the screen. Then click the BLOGGER button.


-Fill in your blog information. ( I have been having problems with this NOT working. It will say LOG IN FAILED). If this happens, go to your blog and add the copied code into one of your Gadgets(on the bottom).


.

CREATING A SLIDE SHOW ROTATING HEADER

Have you ever seen those beautiful headers that rotate people pictures through it? Ever wanted one...well now you can have it! :) Here's how.....


- You want to make your header approximately the width of your blog. If you’ve followed the MAKING YOUR CENTER BLOG WIDER instructions, your blog width will now be 1000px, so keep that in mind. If you didnt, it should be 660px. Her recommended length is 300 pixels, but I found that to be very hard to work with. It’s so long and thin. SO you could go anywhere from 300- 400 pixels. Remember, the more pictures you have the slower your blog will load, so it’s suggested that you keep it between 2 – 5 pictures. Remember you can stretch your photos if you need to by following THIS EDITING TIP that I got from CoffeeShop.


- Remember ALL of your pictures have to be the same size for this to work!


- Go to Tinypic.com or Imagehost.org and upload your design. Copy the Directlink(tinypic.com) or the Hotlink(imagehost.com)


- Now minimize that screen and go to HTML BASIX


- Click on "Automatically Refresh Images" and set how often you want them to flash. I recommend ever 6 seconds.


- Enter the image height and width in pixels.


- Now, take the direct link(tinypic.com) or Hotlink(Imagehost.com) for your photo that you copied and paste it where it says “URL of Image.” Do this for as many pictures as you need for your slideshow.


- Click Generate.


- Now you will see a very long code. Click on Select All. This will highlight the entire code, and you can just right click to copy that code.


- Now just go back to you blog, click Customize, Layout, Page Elements. Then go to the top and click on “Add a Gadget.”


- Select HTML/ JavaScript, paste the code there and save. Now you should have a slideshow header.


TIP: you can also do the as a small square slide show that will go on your side bar. You images should all be down to about 200x200 px to fit.


.

CREATING AND INSTALLING A "FROM SCRATCH" BLOG HEADER

If you really want to make your blog original, you can create your own header to match your custom background from scratch using the same style and techniques used in your CUSTOM MADE BACKGROUND. The possibilities are endless! To do this:


-Open a new transparent document that is approximately 1000 x 500, set at 72ppi. You can make it a little bit smaller than that, but don’t go any wider than 1000 pixels. That is your max. This is for if you have already made your CENTER BLOGGER WIDER. If not, your max size would be 600px wide. Make sure not to set it at higher than 72 ppi, or it will take your blog FOREVER to load.


-Add your Papers, ribbons, bows, brushes, etc. to have your header match your background. Make sure to create each thing on its own layer so you can have lots of play with your design. Save it in layers before you merge it together in case you need to go back later to make changes.


- After you’re done, don’t flatten your image. Just "merge visible layers". This will keep a transparent background, rather than white. Now you can save your image as a .png file.


-To add it to your blog, go to Customize, Layout, Click Edit on your header, and upload your file.


- If your header is TOO large on your Blog, just go back to your editing program and resize it a bit smaller, save, and upload again.

.

INSATALLING PRE-MADE BLOG HEADERS

Another option for your Header is to use a premade template. Here are a few of my favorites:


-SHABBY BLOGS has lots of great ones (HERE).


-COFFEESHOP offers some great ones (HERE). She mixes her storyboards and blogger templates together, so just look to make sure the one you download is for a blog header. Now these can only be used in PS or PSE, but they’re great for getting ideas from if you use Gimp. If you do use these, just add your pictures to her template, and save as a jpg.


- Go to your blog and go to your Dashboard and hit Layouts, then Page Elements. Or Go to Customize, then layouts then Page Elements. Click Edit on your Header, and load your new one, and select "Instead of Title and Description"


- Save and preview. If you want it to be smaller, go back to the editing program and resize and save again.

CREATING AND INSTALLING A SIMPLE BLOG HEADER

If you want a simple blog header, COFFEESHOP (HERE) has a great tutorial that shows you what size to crop your photo and how to add text to it before uploading it. I actually used this tutorial for my BLOG (TheAndressFamily). To do this:


- Crop your picture between 660 – 1000 pixels wide and 150-400 pixels high. How big you go is more a matter of taste, and if you make it too big Blogger will shrink it to size. You can crop at 72ppi since it will be used for web, not print. The higher ppi, the longer it will take for your page to load. Sometimes it is best to create it bigger, so you only have to size it down if it's too big for you taste. If you make it too small, and want it bigger, you have to start all over.


- Now you can add your text. Remember that if you want to use a particular color from your picture as the text color, just use the eyedropper to select the color. And MeShell’s pattern fill challenge is great for creating letters for this.


- When you’re done, Flatten and Save your image as a jpg.


- Go to your blog and go to your Dashboard and hit Layouts, then Page Elements. Or Go to Customize, then layouts then Page Elements. Click Edit on your Header, and load your new one, and select "Instead of Title and Description"


- Save and preview. If you want it to be smaller, go back to the editing program and resize and save again.


.

CREATING AND INSTALLING YOUR OWN BLOG BACKGOUND

If you want to take it to the next step up from using the pre-made blog backgrounds, you can CREATE your own blog background. This obviously takes more time...and patience. It can be a bit frustrating trying to get the sizing right. But if you are looking for something more personalized, then this is the way to go.

- In your editing program(Photoshop, Elements, or GIMP), open up a new page. Size it to 24inches wide and 15inches tall, at 72 ppi. NOW even though you create your page this big, not ALL of the page will show up on your blog. But if you create it any smaller, you will see white on the sides or the bottom. SO stick with this size.

-Create you background by using layers of Papers, ribbons, or Brushes. If you use premade Scrapbooking kits, make sure your give credit to the "maker of the kit".

TIP: From experience (of trial and error), I have found that its best to do a simple repeating background, because depending on the size of one's computer screen, it will change the way they see your blog. SO some things maybe cut off on other screens.

- Make your first layer a FULL(24x15) solid background of a paper or color you want. Can be solid or textured.

- On your next layer create a box using your rectangle tool. Fill it with any color.(we will only be using this as a guide tool, and will delete it before saving. The box should be 15 inches tall, and should fill everywhere between the 5inch mark and the 19inch mark. This will show you "ABOUT" where your center posting part on your blog will be. So everything under that box will not show up on you blog.

- Decorate the two outer sides of that box(Everything on its own layers).

TIP: Because everyone's computer screen show a different amount of your background, we have found the best spots to decorate are between inches 2-5 and 19-23. BUT also add decoration to the other few inches for those that it shows the FULL screen to. AND, there is no need to decorate any lower than 10 inches...this will not show on anyone's blogs. It is only used as extra space(but must be there). So it may be helpful to create ANOTHER layer with a second box(you can turn the opacity low). Put this box from 2-13inches, and 8.5 inches long. This will show you where MOST peoples computers will cut your blog off.
Here is an example:

- When you are happy with your design of your background,Make sure you delete the "box" layers we created as your tools. THEN save it FIRST as a (xcf(gimp) or psd(ps)). This will save it in layer form, in case you need to go back later to make and changes. Next save it as a jpg.

INSTALLING YOUR OWN BACKGROUND
- Open up a word document, or notepad. And Copy this code on to a new page:

<style type="text/css"> body {background-image: url("YOUR PHOTO URL HERE"); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; }</style>

- Go to Tinypic.com or Imagehost.org and upload your design. Copy the Directlink(tinypic.com) or the Hotlink(imagehost.com)

- Paste your link into the above code where it says "Your Photo URL here". MAKE SURE YOU LEAVE THE "" marks in the code!!!!

- Copy your NEW WHOLE code.

- Go to your blog and go to your Dashboard and hit Layouts, then Page Elements. Or Go to Customize, then layouts then Page Elements.

- Click to "ADD a Gadget". You can use it anywhere...but I normal use the very bottom one to keep it out of the way. In the TITLE spot, leave it blank. If you type in it, it WILL show on your blog. In the CONTENT spot, paste your code. Hit save and then "preview your blog".

You can go back and change your blog background as many times as you want by taking the same steps. Just make sure you always use the same "gadget" spot, and delete your old code before pasting the new one. When you are creating your own background you may need to do a few "tries" before you get the look right. That's why it's best to leave them all in layers, so you can move your embellishments around to where you can see them on your blog.

Installing Pre-Made blog backgrounds

There are MANY sites that you can get beautiful FREE, pre made backgrounds. ANd installing them is soooo easy. Its one of those things you can do over and over and over again...as often as your heart desires! :) Here is a few of my favorites:


- Scrap-e-blog

- Cutest Blog on the Block

- Shabby Blogs

- CoffeeShop


- Copy the code that is given to you with the background. It's a long code that starts and ends with < script >. Make sure you copy it all.


- Go to your blog and go to your Dashboard and hit Layouts, then Page Elements. Or Go to Customize, then layouts then Page Elements.


- Click to "ADD a Gadget". You can use it anywhere...but I normal use the very bottom one to keep it out of the way. In the TITLE spot, leave it blank. If you type in it, it WILL show on your blog. In the CONTENT spot, paste your code. Hit save and then "preview your blog".


You can go back and change your blog background as many times as you want by taking the same steps. Just make sure you always use the same "gadget" spot, and delete your old code before pasting the new one.

.

ADDING COLOR TO YOUR CENTER BLOGGER

The first step in adding a little personal touch to your Blog is by changing the color of your center blogger. After a few ONE TIME only steps, you can change it any day you want very quickly and easily. SO those first few one time only steps......
~First go to the top right of your blog and click Dashboard. You can always find your "customize" either at the top of your blog, or through your dashboard. Next click LAYOUT and EDIT HTML.
             Towards the top you will see a section of "Variable names". Above the FIRST variable name, post this code:

< Variable name="blogwrappercolor" description="Blog Wrapper Color"
type="color" default="#fff" value="#ffffff" >

- Next scroll down until you see:

                                #outer-wrapper {
                                 width: 1000px;
Add this code directly behind the:         #outer-wrapper {

background: $blogwrappercolor;

Your end should look exactly like this:

                                          #outer-wrapper { background: $blogwrappercolor;
                                          width: 1000px;

-Then Hit Save

- At the top, go to "fonts and colors". With codes we added above, we can now change the color of our center blogger part(where you will type and post pictures).

- Click on "Blog Wrapper color". It will be the first option. If it's not there, you probably entered the a code in wrong. Go back and make sure all the correct changes are done.

- You can choose your color from the options they give you, or you can enter the HEX # into the box. You can get this # by double clicking on your color options in PS or gimp, and you will find a number that corresponds with every color. Copy it, and paste it in the box on your blog screen. You can change this color whenever you want.

- Click Save and view blog! (there will be white at the bottom until you do your first post)


.

MAKING YOUR CENTER BLOGGER WIDER

Bloggers basic blog gives you a pretty small amount of room with LOTS of extra wasted space on the sides of your blog. With this tutorial I will go over how to make your center Blogger wider. This will allow you to Make your pictures bigger(which will be in next weeks tutorial). Besides making the pictures larger...I personally jus like the look of the wider blog anyways! ;)

~First go to the top right of your blog and click Dashboard. You can always find your "customize" either at the top of your blog, or through your dashboard. Next click LAYOUT and EDIT HTML.
~Scroll down until you see the next set of changes: (NOTE: You will be changing JUST the width numbers that are in RED)

                                                       Find: #header-wrapper {
                                                                   width:660px;


                                                    change to : #header-wrapper {
                                                                         width:1000px;


                                                    Find: #outer-wrapper {
                                                               width: 660px;


                                                     Change to: #outer-wrapper {
                                                                        width: 1000px;


                                                    Find: #main-wrapper {
                                                             width: 410px;


                                                   Change to: #main-wrapper {
                                                                     width: 750px;


                                                    Find: #footer {
                                                              width:660px;


                                                    Change to: #footer {
                                                                      width:1000px;



- Click Save




NOTE: You wont "see" a change until you add color to your center...thats the next step!


.

CREATING A NEW BLOG

This week we will be learning how to start out a new blog..or do a beautiful makeover on your current blog. Blogs don't have to be journal writing, they can simply be a way to store and post your favorite pictures, or even a place to share with others the things you have learned while being a mommy. You can make a family blog, a business blog, a picture editing blog, or even just a rambling on of your mommy life blog! Make it yours! Personalize it, and share it with friends and family! We would LOVE to see the blogs you have created from this challenge...link us there so we can check it out and share ideas! This will be a two week challenge, so be prepared for more fun next week!

Here are the few example of Julie and Erins Blogs that we have done to help show you the final project. Each one has a different example in it (premade background, self made background, premade header, simple header, slide show header, etc. )
TheAndressFamily
JuliesBlogExamples
TheHendersonz
TheHenderson05


~ Go to http://www.blogger.com/, click Create blog, and fill in your information.



- You can choose any template that you would like. BUT...if you want to change your background on it, then it MUST be a "minima" template. Choose your template, then you are set to start Blogging!


A few good things to know about your new blog is where to post and edit your blog.


On the top right side you will find either your Dashboard or Customize. Click on those, and you will be able to edit your layout, edit old posts or create new posts. You can also change the color of your fonts and all your other blog settings!


.