and i may or may not have been a little too excited once i figured it out.
kind of like… “omg omg omg chris come look at this! look at what i can do! wooooppeeee!!!” meanwhile chris is staring at the computer trying to figure out the difference between photo A and photo B.
i mean. isn’t it obvious that on photo B the corners have been elegantly rounded and there is a watermark? “can’t you see it honey??” and he is thinking… “what is a watermark?”
yep. it is the little things in life that really make me happy.
anywho, i must preface this by saying that i have used two different online photo storage websites: flikr and photobucket. when you upload pictures to your blog, it automatically uploads them to one called picasa but i have always found it to be slow. i really liked photobucket because i knew it well after using it for myspace pictures many many years ago. but sometimes, if i edited a picture, the edits didn’t translate over to my blog and it was a little frustrating.
and by a little i mean i wanted to punch my computer in its face, did it have one.
so i started using flikr. so far flikr is way better than photobucket. flikr uses picnik to edit photos and photobucket uses its own editor. so all of the techniques i am showing you today are done in picnik, via flikr. picnik is a free tool you can use to edit photos and you don’t have to use flikr to get to it but for the purposes of blogging it helps because flikr gives you the html code to put in your post for the picture to show up.
{oh and flikr says “hi” to you in a different language every time you log in. remember – its the little things. :)}
confused yet? let’s get started.
i am just going to go ahead and assume that you have either 1) created a flikr account based on my stellar recommendation of it or 2) decided to create a flikr account based on my stellar recommendation and just haven’t yet.
go ahead. i will wait.
now let’s upload a picture:
from your flikr home page, click on the upload link.
click choose photos and videos
choose your pictures.
click on upload.
from here i click on “home”. i dont bother to add a description and you can always go back and do that later if you need to.
and this takes you back to your home screen. from here you can click on the “your photostream” link to view all of the pictures you have uploaded and edited or you can click on the picture you want to edit. so let’s pic the picture we just uploaded, so just click on it, mmkay?
{and hi! from lithuania!}
from this page you can do lots of stuff like add a location to a map or share it on facebook. but you want to know how to resize, crop and edit right?
click on actions and scroll down to the bottom and click on “edit photo in picnik“
and this page shows
and once the photo opens up in picnik, you will see this screen. first we are going to crop the photo.
drag the corners of the picture until you have framed everything you want included and then click “ok” in the right hand corner.
now we are going to resize the photo. resizing it allows it to take us less storage space in flikr which, if you are cheap like me and don’t want to pay and upgrade to flikr pro, allows you to upload more photos!
i change all of my pictures to be 500 pixels wide because that is what looks best on my blog. you will need to play around with sizes to see what works for you but my advice it to make them as big as possible, while keeping it as clear as possible, without messing up your layout. if you keep the “keep proportions” box checked you don’t have to worry with it looking wonky. {wonky = technical term} once you have it the size you want, click ok in the top right corner again.
now we are going to add text and a border. click on the create tab.
click on the “frames” link, and then scroll down until you find “border” and “rounded edges”
when you click on rounded edges, it automatically rounds off the edges and you can use the “corner radius” sliding scale to adjust how round they are. if you decide that rounded corners really aren’t your cup of tea just hit cancel.
today though, i want a colorful frame around this picture. so click on “border”. it automatically adds a thick black border. you can adjust the width and color of the outer border (the black part) and the inner border (the white part) with the tools in the sidebar. when you get something you like, click on apply.
now let’s add a watermark (or any other type of text for that matter).
1. click on the text tab
2. type in the text
3. pick your font (make sure you scroll down, there are a ton available for free)
4. click add
now you can edit the size and color of the text.
1. use the little circle corners to adjust the size of the text.
2. find a color you like
3. use the fade to adjust the brightness of the text
4. once you have it how you like it, close the pop up editor by clicking on that tiny x
yay! we are done editing!
next:
1. click on save to bring up this screen
2. change the name of the picture
3. add a description
4. click save again
and then we wait while it does it’s thinking. once it saves it will automatically go back to flikr and then we are going to put it on the blog!
click on that tiny little arrow do bring up the drop down list and then click on “grab the html/bbc code” section.
copy the html code
in blogger, make sure your editor is in “edit html” mode as opposed to “compose”
find the position in your post where you want the picture to appear and paste the code there.
marvel over the twilight zone you’re in where you are editing a picture of a picture you edited to post in a blog about editing pictures.
and now, click on “compose” to look at the picture in your blog post.
i know it looks like a million bazillion steps but i promise the more you do it the faster you will become and it will definitely be second nature after a few pictures.
there are so many other things you can do with picnik so i encourage you to take one picture and do lots and lots of different things to it and learn more about it! for a great post to get you started check out this one by thrify decor chic!
so what do you want to learn next?
Cassie says
Looks like I need to make a flikr account. =D. Great post! You did a wonderful job explaning how to do this!
Erin says
Even broken down into simple instructions I'm overwhelmed! I guess that's why my pictures always have such unstylish corners 🙂
vanessa says
Wow you should win some kind of award for that post! I am doing good if I even crop my pictures. Oh and I take back that award for posting that yummy picture. lol.
Alina says
Alright, I did step-by-step what you told me. It looks great, except that there's a white "border" around my rounded edges on the blog. I think this has to do with the background color of my blog. Suggestions?
Also, the next thing I want to learn is how to put in links to your page or someone else's blog or previous blogs. Is this simply a matter of copy/paste in the "Edit HTML" screen? Let me know!