iPhone Typography

Typography is all the rage these days. Little slogans and quotes written in a quirky fashion.

20120822-125758.jpg

Like that…

It’s quite fun to do. However being on the move a lot, sitting down and opening photoshop then going to town on some text is probably not always convent. And as if to emphasise this need to be portable I’m writing this blog from the WordPress iPhone app.

First stop is the App Store and pick yourself up Impression from the app store. It’s £1.50 I’m sorry it’s not the cheapest app on the market but it’s useful for so many things. It’s intended for use as a watermarking tool. And very good it is too at doing that. There is a huge range of fonts and full control over positioning, size and opacity. Plus it has the copyright symbol right there so you don’t need to hunt for it…. As I’m demonstrating right now as I can’t actually find it without copy and pasting from something else; © found it.

I use this for pretty much ANY text I want to put on an image.

And now onto the typography before I ramble on in my usual way.

Typography is simply put; arranging type is a way that makes sense and is visible. I’m sure wikipedia has an article (HERE it is).

First thing to think about is the direction that text is read. Being English I read text from left to light, the same direction you are reading this blog post. This isn’t unique to us Brits, most of the world since the Greeks, I believe, have laid out their writing in this way. It’s a convention which we should follow when designing anything. The eye naturally starts at the top left and scans across and down (This works for photography as well by the way) Look at most websites, the logo is in the top left corner and the contact us is in the bottom right (the last place you’ll look).

Now I’ve told you this you’re going to see this design convention everywhere. Seriously… It’s everywhere!

Back to making typography on the iPhone. Let’s start simple. A black background…. Keep looking. Doing you know how to do that? I’m sure some smarty pants is going to link me a Black Background App in the comments (please do). I simply take a photo with the lens pointing into my shirt. Make sure you turn the flash off. Now take that image into PS Express (a free app) and just make it darker… Do it again… And one more time. Now take the saturation down. Bingo. You now have a black background. I like to make it square, I think I use instagram too much.

20120822-152241.jpg

Now open this black image in Impression and tap the screen. Do you know what your going to say? And is it spelled correctly? I use the iPhone notepad to double check my spelling just to make sure. I also play around and get a rough idea of how I want it looking. Try to plan it do you use one or two fonts. Don’t go crazy. Have one font simple and one fancy. Keep it simple. Now open the background in Impression.

Type out your first text.

20120822-133443.jpg

Now if you’ve got different colours you might want to do all the words in that colour first. Because you may not quite get the exact shade again as you can’t save custom colours. I mostly use one colour and white or black. So it’s easy to switch between just raising and lowering the brightness. Save the image and reopen the new image back into Impression.

20120822-134021.jpg

Remember try to keep things simple and go from left to right.

20120822-133723.jpg

Oh sideways. Bet you didn’t see that one coming… Yes you can break rules and have the font go however you want. Notice the first character starts where it should do though.

And continuing onwards we get this finished result.

20120822-134117.jpg

You don’t have to keep the background plain. I did a quick google for paper textures and found a free resource (lostandtaken.com)

20120822-141744.jpg

Now for a different font and a Bill Hicks Quote.

20120822-141911.jpg

I made the white font first as I wanted the first two words to be the same width. Another great thing with Impression is if you write out a word or sentence. Save the file and reopen the new image. When you reedit the text what ever you write will be the same width.

20120822-142955.jpg

I’d love to see YOUR typography. Link in the comments or #GCBphoto on TWITTER or instagram.

Hope this was useful to you in someway. I also hope that you’ve learned that just because an app is designed for a specific function doesn’t mean that you can’t find other uses for it.

Gordon

Advertisements

One thought on “iPhone Typography

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s