Saturday, 5 May 2012

Touchdraw - let's make a blog header

Touchdraw is an iPad vector graphics app which I bought a few weeks ago and am continuing to find endless uses for, including drawing quilt diagrams, templates, blog headers, buttons and more.  There are two previous posts (the starter post and the HST post) in this series and I would suggest you work your way through those before trying this one as some prior knowledge is assumed.  The header I am going to make today looks like this.

But there are endless possibilities.  You can import different shapes of photos, make a different shaped photo mosaic, use images from the internet (where you have permission to use them or they are free to use for blogs etc), you can buy images from scrapbooking websites, buy or import free fonts etc.  Your creativity is the only limit.  But for today's tutorial, I am using my own photos and a Touchdraw font.

1.   Create a new drawing.  I always convert to inches, by force of habit although there is no need for this picture.  But the other thing I wanted to show you that I always do when doing any kind of detailed work is to increase the subdivisions, usually to 64.  You do this by tapping on the number 8 which will bring up the keyboard so you can enter "64".  I double this to 128 if I find I am still not working in enough detail.  This feature is useful when you want to make tiny adjustments, for example to where two lines meet.  The more you zoom in, the more gridlines will appear and the more accurately you can move shapes around.


2.   First I want to import three photos.  I have first cropped them to square on my macbook, emailed them from iPhoto on my macbook to my iPad and then saved them into the photos file on my iPad.  Of course you could download pictures direct to your iPad or use photos taken with your iPad.  In case you're wondering, Kerry verykerryberry whited out the background of these photos for me and you can find out how to do the same in her tutorial here.

3.   I now want to drop the photos into Touchdraw.  Tap on the picture icon on the left side bar and this will bring up the photos on your iPad.  Ignore the squares I've drawn, I deleted them afterwards!




Tap on each of the three photos you want in your header in turn and they will drop into your Touchdraw picture.


4.   You can now slide the images around, enlarge them, shrink them and align them as desired.

5.   To the right of these three boxes, I am going to add a fourth box, of the same dimensions, where I will add my text.  I have drawn a line around it so you can see it but I will remove that once the text is inserted.


6.   To add some text into that box, I first tap on the big A in the left sidebar, then I tap where I want to place the text, this time inside the new box.


This brings up a text box I can write in.  


8.   Once you have written your text, tap "Done" and the text will drop into your box. Don't worry if your text is not showing at this point, we will now go and adjust the size of the box it is sitting in and the size of the font to make it fit.  


9.   Moving the blue squares around your text, enlarge the box the text is sitting in to fill the box on your screen.

10.   Now we will adjust the size, font, colour and alignment of the text.  Making sure your text is selected by first tapping on it, tap on the multiple AAA icon in the left toolbar. 


Here you have all sorts of options for playing around with your text.  I have chosen Futura condensed extra bold - font size 270 in black. 


11.  You may once again need to slide around the box containing the text to make it fit and line up with the photos.


12.   At this point I will delete the square I drew to align my text.


13.   Finally I email it to my macbook using the Export icon in the top right hand corner and I send it as a Large PNG or JPEG image.  I can then drop this onto my blog as a new header.


14.   Once I saw my finished header in the email I decided to go back and rearrange my photos a bit and then send.


And voila, I have a new header.  If you make anything using these Touchdraw tutorials, I would love to see pictures in my Flickr group and please feel free to ask any questions too - I may know the answers and, if I don't, Jon at Touchdraw definitely will.

Homework for advanced students who want to race on ahead:  I went onto draw my own font for the header (inspired by Lu's Alphabet print) using the icon shaped like a pencil and the icon shaped like a pen nib as well as a mix of circles and rectangles for the Q and the dot on the i.



With the pencil, you draw a squiggly line, take your finger off the iPad and Touchdraw makes it smooth - try writing your signature.  You can then tap on the stroke icon to change the width, colour and ends of the line.

For solid letter shapes, tap on the pen nib icon then tap a series of dots on the screen which start and finish at the same point.  This makes a shape you can fill with colour.  I tapped out the outline of the L, the bottom half of the i and the t.  Once the shape is made you can slide the dots around to alter it.

For the Q, play around with circles and rectangles to make the shape you want.

Once all your letters are drawn and slid into the right place, select them all, group them and then you can change the size of the group to fit the header.

17 comments:

  1. Awesome new header, Lynne! :)

    ReplyDelete
  2. love, love, love your new blog header, and now I want an iPad!

    ReplyDelete
  3. Love the header and a great tutorial ... I don't have an iPad so I use inkscape - which is an open source vector program for windows (like Adobe Illustrator but FREE!) It has tons of functionality and the interface is very similar so your tutes are brilliantissimo!

    They also have a ton of downloadable clipart, like these tesselated triangles which takes a lot of work out of setting up your designs ... you can import them into touchdraw as svg files and save yourself some time ...

    ReplyDelete
    Replies
    1. I'm downloading this as i type! Thanks for the link.

      Delete
  4. Wonderful, haven't tried any of this before so I will be testing this out!

    ReplyDelete
  5. As a technophobe I am in awe!

    ReplyDelete
  6. Great tutorial! I love the new header. btw thanks for telling me I was a no-reply blogger. I had no idea I was being so rude! I think I fixed it, could you reply to this comment to test it. Thanks Lynne!!

    ReplyDelete
  7. This is so timely! I just deployed a new blog template and am in need of a new header. Thanks for the great tute!!

    I don't have an iPad but I do have a Macbook so hopefully the program is available.

    ReplyDelete
  8. Your new header is great with the pillows made from Summersville.
    And, the tutorial is great, I just have to purchase Touchdraw now.

    ReplyDelete
  9. I am so excited about this post because I want to make a button for my blog. However, also sadden because I do not have a IPad. Its on my with list. Still a great post for the many who will use it.

    ReplyDelete
  10. I can't wait to try this.......sometime this weekend! Thanks for all the TD tuts! Love the pillows too!!

    ReplyDelete
  11. I can't get my pen to work anymore, whenever I try to use it, it just shows what I have drawn in a "connect the dots" pattern. Somehow I think I disabled it?

    ReplyDelete
  12. Thank you again for this great tutorial Lynne!

    ReplyDelete
  13. This is AWESOME! I am loving all of these TD tutorials. I have one question, though. I can't figure out how to delete the square around my text. I only seem to be able to delete the text itself.
    Really am enjoying these, thanks so much Lynne!

    ReplyDelete
  14. Oops, one more question. How do I title my drawings?

    ReplyDelete
  15. THANK YOU FOR THIS. LOVE YOUR HEADER!

    ReplyDelete

Comment away peeps :-)