For those of you who missed earlier posts, Touchdraw is an app for iPad which will also come to mac before too long. It costs £6 and I think about US$9 and is the best £6 I spent this year. Today I am going to show you how to make a blog button but will be assuming you already know what I taught in the previous tutorials here, here and here. And so in the course of writing this tutorial, I made myself this new button.
1. As usual, start by creating a new drawing. I tend to convert all drawings into inches from force of habit, even though there really is no need with a blog button. And I once again tap on info, units and rulers and increase the subdivisions to 64 to allow me to zoom right in on the drawing and make fine adjustments.
2. Blog buttons can be square or rectangular but the ones I use on my blog are square. I use 125px X 125px buttons. 150px X 150px is another common size but we don't need to worry about sizing the button at this stage - we do that when we are finished. We just need to make a square button if that's what we want to finish with so I am going to start by drawing a square on the screen as something to work within. Mine is 6" square.
3. Now as to what you might want to design within your button, sky's the limit. Perhaps take a photo from your blog drop it into this box and add some text below such as your blogname. You can easily copy a photo direct from your blog to your iPad by putting your finger on the picture, leaving it there for a second or two which will give you the option to save the image. You can then tap on the photo icon in the sidebar which will bring up your camera roll and the image will be sitting there.
Tap on it to drop it into your picture, re-size the picture by dragging the blue dots on its corners to fit your square.
Add some text in any gaps you have or even write over the photo.
Thicken the border a bit perhaps and change its colour, fill the original box with background colour.
And there is one possible button image.
4. Or you could draw a simple block
add text about a block tutorial, blog hop or sewalong (oh and I coloured it in too)
Add a border by drawing a filled square over the top of the block you've drawn
Then tap on arrangement then move to back which will move the square to the back of the picture making a border.
5. For my new button, I dropped in a photo of one of my Summersville pillows
Drew a white rectangle over the middle of it
Added my homemade writing ( I can make this homemade writing the subject of another tutorial if anyone is interested).
6. OK, now to turn your image into a button. First you need to save the image to your iPad by sending it to your camera roll. So tap on export in the top toolbar, then send to photos, then change the size in custom to 125 x 125 or 150 x 150 depending on the size you are making. You can then upload the picture to blogger direct from your iPad or by emailing it to a computer. .
7. To host an image on blogger, upload the image either into a gadget on your blog which you can delete once you have used it. I go to "Design", then "layout" then "add a gadget" and add a picture gadget to somewhere on the blog with this picture in. I then "View blog" and right click on the picture I have just added, grabbing its code. Once you have made your button, the gadget can be deleted.
7. Next go to the grab my button code generator and fill out the required fields; (i) your blog name or the name of the thing for which the button is being created, eg "Paper Piecing Blog Hop", next the url to which the button will link, eg your blog url and finally the url of the photo.
5. Click "preview" and, if you like what you see, click "Get Code" and copy the entire code that comes up.
6. You then paste that entire code either into a blog post (with the HTML tab selected) or into a HTML gadget on your blog and hey presto, you have a button people can grab.
<div align="center"><a href="http://lilysquilts.blogspot.co.uk/" title="Lily's Quilts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPXOwz2POR0NV9NWhvQVE4ixun3r7mZkUN-Huo_ok3I-oZ9MogSX1K6hhe5FsscFUQh6ZviO4en_QJt1pSQi1lRMt1xNZQIkjX5Nv_qA1Uoy9rrgeUpfQp9yrK4B97TkzPo0Z8Hd5XFEz/s253/Untitled+Drawing+102+1-1.png" alt="Lily's Quilts" style="border:none;" /></a></div>
1. As usual, start by creating a new drawing. I tend to convert all drawings into inches from force of habit, even though there really is no need with a blog button. And I once again tap on info, units and rulers and increase the subdivisions to 64 to allow me to zoom right in on the drawing and make fine adjustments.
2. Blog buttons can be square or rectangular but the ones I use on my blog are square. I use 125px X 125px buttons. 150px X 150px is another common size but we don't need to worry about sizing the button at this stage - we do that when we are finished. We just need to make a square button if that's what we want to finish with so I am going to start by drawing a square on the screen as something to work within. Mine is 6" square.
3. Now as to what you might want to design within your button, sky's the limit. Perhaps take a photo from your blog drop it into this box and add some text below such as your blogname. You can easily copy a photo direct from your blog to your iPad by putting your finger on the picture, leaving it there for a second or two which will give you the option to save the image. You can then tap on the photo icon in the sidebar which will bring up your camera roll and the image will be sitting there.
Tap on it to drop it into your picture, re-size the picture by dragging the blue dots on its corners to fit your square.
Add some text in any gaps you have or even write over the photo.
Thicken the border a bit perhaps and change its colour, fill the original box with background colour.
And there is one possible button image.
4. Or you could draw a simple block
add text about a block tutorial, blog hop or sewalong (oh and I coloured it in too)
Add a border by drawing a filled square over the top of the block you've drawn
Then tap on arrangement then move to back which will move the square to the back of the picture making a border.
To make this final button image
5. For my new button, I dropped in a photo of one of my Summersville pillows
Drew a white rectangle over the middle of it
Added my homemade writing ( I can make this homemade writing the subject of another tutorial if anyone is interested).
6. OK, now to turn your image into a button. First you need to save the image to your iPad by sending it to your camera roll. So tap on export in the top toolbar, then send to photos, then change the size in custom to 125 x 125 or 150 x 150 depending on the size you are making. You can then upload the picture to blogger direct from your iPad or by emailing it to a computer. .
7. To host an image on blogger, upload the image either into a gadget on your blog which you can delete once you have used it. I go to "Design", then "layout" then "add a gadget" and add a picture gadget to somewhere on the blog with this picture in. I then "View blog" and right click on the picture I have just added, grabbing its code. Once you have made your button, the gadget can be deleted.
7. Next go to the grab my button code generator and fill out the required fields; (i) your blog name or the name of the thing for which the button is being created, eg "Paper Piecing Blog Hop", next the url to which the button will link, eg your blog url and finally the url of the photo.
5. Click "preview" and, if you like what you see, click "Get Code" and copy the entire code that comes up.
6. You then paste that entire code either into a blog post (with the HTML tab selected) or into a HTML gadget on your blog and hey presto, you have a button people can grab.
<div align="center"><a href="http://lilysquilts.blogspot.co.uk/" title="Lily's Quilts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPXOwz2POR0NV9NWhvQVE4ixun3r7mZkUN-Huo_ok3I-oZ9MogSX1K6hhe5FsscFUQh6ZviO4en_QJt1pSQi1lRMt1xNZQIkjX5Nv_qA1Uoy9rrgeUpfQp9yrK4B97TkzPo0Z8Hd5XFEz/s253/Untitled+Drawing+102+1-1.png" alt="Lily's Quilts" style="border:none;" /></a></div>
As usual, I'd love to see what you make with Touchdraw - upload photos of your drawings to my Flickr group if you have a moment.
It must be nice to be so computer savvy! I envy you!!! Seriously, I DO!! I haven't a clue what you just said!!
ReplyDelete:D
DeleteThanks Lynne! You are amazing for sharing your talents and know-how with everyone. I just got an iPad and Touchdraw will be the first app I buy :)
ReplyDeleteGrab my button code generator? What's that?
ReplyDeleteI can't thank you enough for this great tutorial series. I am learning so much and having a blast doing it! Thanks, Lynne!!
ReplyDeleteBwaaaahahahah. I found the code generator thingy and added it to my iPad desk top. It shortened the name to "Grab a Butt". ROFLOL
ReplyDeleteNow, how to set the copy right/liscensing on a flickr photo so that it will work in a button.....any suggestions?
Ooohh! Does this mean you're going to do a penguin books quilt along??! Pleeeaase DO!
ReplyDeleteI would definitely be interested in a tutorial on how to use homemade writing! I just used touchdraw last week to create a button but I ended up using another program on my computer for the writing (the button is for a new blogger blog hop - many of the participants are bloggers I met through your small blog meets -Thanks!) I'll post it to your flickr page (even though it is only half touchdraw.)
ReplyDeleteOh, how I wish I had a ipad to play with .... some day, some day ....
ReplyDeleteGreat tutorial L....off to "confiscate" the ipad from the kids!!!
ReplyDeleteace
ReplyDeleteLike the look of Amy in your glasses on that camera roll. She looks dead clever. but then she is.
ReplyDeletePs I like the new 'reply' option
ReplyDeleteI have wondered about those buttons, I'll give it a try tomorrow!
ReplyDeleteYou inspired me, couldn't wait for it to come to Mac so bought idraw instead and made myself a new blog header, having loads of fun playing with it
ReplyDeleteGreat tutorial! Here's one I've been struggling with . . . how to make a kaleidoscope block in touch draw. I can't seem to get the angle and length of the triangle correct.
ReplyDeleteJessica, I don't know if you know but you are a no-reply-comment-blogger so I hope you come back and pick up this reply. I had a play and did this: Draw a square of the finished size of block you are looking for and draw in lines across the two diagonals and cutting the block in half vertically and horizontally. Select all and group this into one object. Duplicate it and spin the duplicate through 22.5 degrees using the adjustment menu. Now using the two sets of lines, you can see where to draw the kaleidoscope shape lines. If this is all gobbledigook to you, email me on lilysquilts @ gmail . com and I will email you the Touchdraw doc for you to open on your iPad and work on!
DeleteYeah . . . the comment links back to my blog. There's not a way to enter both a blog and an email. But, I did check back :)
DeleteWhat you described is what we (my husband and I) figured out yesterday, with one modification. The way you described, we couldn't figure out how to draw the "base" of the triangle as each of the "sides" of the isosceles triangle were different lengths. What we did instead is draw the vertical and horizontal axis of the square, group it, copy it, turn it 45º, position it on the center point, then group all the lines. That way, we could "connect" the lines to form the base, and get an accurate measurement for the corner triangles.
I haven't found a way in TouchDraw to create triangles well. There's the polygon tool, but I'm not sure it works well for this purpose.
Lynn, I hate to sound negative...but I just want to point out really quick that it is against Flickr's terms of use to use a photo hosted on Flickr to direct to anywhere other than Flickr...you can read about it here: http://www.flickr.com/help/photos/#68
ReplyDeleteHowever, you can upload the photo to a blog post and copy the image location from there!