02 March 2013

How to make a "Meet Me" Button


I am so excited to be a guest blogger for Amy today! My name is Lindsay and I blog at Simple Life of a Housewife. I am a mommy, wife to a traveling husband, Texan, and a former blog designer.

Today I am going to teach you how to make a "meet me" button for your blog. These are buttons that sit on your sidebar which your readers can click and be taken to an "about me" page. This is a pretty long tutorial but please don't let it intimidate you. It's really easier than it looks.

For this tutorial you will need to download Gimp. This is a free software that is similar to Photoshop. 

1.) Open Gimp

2.) Click on File and then New


3.) Since my sidebar is a little over 300 px I am going to make my new image 300x600 px. I can always crop later if it is too large.


4.) Once I click OK this is what my screen looks like.


5.) Now I need to find the image I want to use for the "meet me" button.

6.) I am going to click on File and then Open.


7.) Now I am going to go through and find the photo I want to use. I like that with Gimp you can see a preview of your image as you scroll through.


8.) Once I find my image I am going to click Open. You might have to move your main screen over a bit to find your image sitting behind it (does that make sense)?


9.) The image is obviously too big to fit into my sidebar so now I need to scale it. I am going to click on the screen with my picture in it and click on Image and then Scale Image. 


10.) Since I want to image to fit perfectly in my "meet me" button layout I am going to scale it to 300 px wide and the height will automatically change.


11.) Once I have it the size I need I am going to click Scale. Now my screen looks like this.


12.) Now that my image is scaled I am going to copy and paste it into my layout.

13.) I am going to click on Select and then All.


14.) Now I am going to click on Edit and then Copy.


15.) Now I am going to click on the screen with the while "meet me" button layout. 

16.) Then click on Edit and then Paste.


17.) And my screen now looks like this.


18.) I don't want my image to sit in the middle of my layout so I need to move it. To move it I need to double click on the move tool in my toolbox. 


19.) Once the move tool is selected move your image to where you want it. This is what my screen looks like when I am done.


20.) Now I am going to click on the Font tool to write my "meet me" message.


21.) Your "meet me" message can be as long or short as you want it. And whats fun is you can mix and match colors and fonts. Play around with your message till you get it how you want. This is what mine looks like when I am done.



22.) I need to crop my image and get the extra white space off of the bottom. 

23.) I am going to double click on the crop tool in my toolbox.


24.) Now I am going to crop my image. I am going to highlight just the part of the image that I want to keep.



25.) Once I have my image the way that I want it I am going to double click. Now my screen looks like this.



26.) Now that I am done I am going to save my image as a jpeg file so I can upload it to blogger.

27.) I am going to click on File and then Save As. I save this as meetmebutton because it's so much easier to find that way. 

Sometimes with Gimp it's hard to save as a JPEG so I actually type it into the name.

When I am done I click on Save. 


28.) Now that it is saved I am going to upload my image to my sidebar and link it to my About Me page. 

29.) First I need to get the URL for the About Me page. To do this I am going to open my About Me page and copy the URL on the top of the screen.


30.) Now I am going to go to my blog's layout.


31.) Now I am going to click on Add a Gadget.

32.) I am going to select the Image option.


33.) I am then going to paste my About Me URL in the link option and upload my image.


34.) Now I am going to save and view my blog. This is how my blog looks after I have saved my "meet me" button to my sidebar.  



There ya go! See?? That wasn't too bad was it? If you made a Meet Me button I would love to see it! Just tweet me at @lindsayintx to let me know.

1 comment:

  1. Oohhh such a great tutorial!! I'm not very good at computer/html stuff---but am trying to learn so I can edit my own layouts. :)

    ReplyDelete

I love receiving feedback, so thank you! =)
Your support means the world to me.

Have a charming day ;)
xo, amy