Purpose of Life – Quote Art

Purpose of Life – Quote Art

When I read this quote I really liked it’s sentiment.

I had a grandmother pass away recently and realized the great importance of finding your gift and sharing it with others!

The meaning of life is to find your gift. The purpose of life is to give it away.

Typography Art by Pixelthin

A very introspective quote.  Very thought provoking and will make your ponder your life.

When I started on this typography art, the hardest part (besides finding out who actually stated this statement) was making the layout smoothly join the two phrases into one flowing quote.

I had many drafts with different typography and layouts.  My goal was to first have the two phrases be different so that they each stood out.  Secondly, have them similar enough so they were cohesive.

Whenever I start a project in typography I remind myself of the number one rule:  font use in typography art can have 2  to 3 (but not more than 3) different fonts in any given art piece.  In this ‘Purpose of Life’ piece, I have used 2 fonts:  Kunstler Script and Georgia.

Variations on the same font.  i.e. italics, bold, light, different kerning, etc.  of the same font style is allowed and does not count as a different font type.

I used these two fonts in a variety of ways to enhance their appearance.   In Adobe Illustrator, you also have an option to change the character sizes of height, width, kerning and spacing.  I took advantage of these options in this piece.

As you can see from the draft below, getting the layout like you want is a journey, a work in process.  Here’s what I have to this point.

The meaning of life is to find your gift. The purpose of life is to give it away.

A work in progress…

I realized in trying to make the phrases different they did not flow with the reader’s eye.  I eventually worried less about continuity and just simply switched the fonts around.

The meaning of life is to find your gift. The purpose of life is to give it away.

Getting closer…

Still the readability was not quite what I wanted.  I minimized the space between the two phrases even making the A in ‘away’ just touch the word ‘gift’.  It seems to automatically join the two phrases and make it pop.

The meaning of life is to find your gift. The purpose of life is to give it away.

Physically joining the two phrases allows the eye to see the continuity and flow of the statement.  At this point, I am happy with my design.

See my design on wood here!

 

Creating a favicon for your website

Creating a favicon for your website

It’s amazing that a tiny little image can make a big difference on how your site appears to the viewer.  The tiny icon (favicon) next to your website name on the tab in your browser a small token of your tech savvy design and should not be overlooked.

If you don’t have a favicon for your site, the browser with put up a default icon. Safari displays an blue globe, but most just show a blank document icon:

It’s pretty simple to make a favicon.  Using a program to illustrate and a program to turn your image into a font is all you need–along with your creativity, of course!  Many browsers now accept favicons as .png.   Internet Explorer did not accept .png favicons until IE11.  To be on the save side of all users seeing a favicon on your site, I suggest using an .ico file.

There are many tutorials about setting up the size (16px X 16px) (32px X 32px), etc. for your favicon.  It will depend on what platform you are using it for.  I created a 16px X 16px favicon in this tutorial for simplicity.

I chose to use this for my favicon image:

I created it in illustrator with the font from my logo and saved it as a .png file.   Once you have your .png file created need to take it and upload it at favicon.cc  where your file will be switched to an .ico file.

To do this:  go to www.favicon.cc.  Click on ‘Import Image’ on the left side.  It will bring up an option to browse and then upload your file.  When you’ve done that, it will look like this:

Next, ignoring all the ads on the site to download external things, click on the actual download button to get your ico file.

Favicon.cc will put your icon on their browser tab so you can see what it will look like when you upload it to your own site.   (This is temporary, it will not stay on their site!)

Now, you have the favicon.ico file you need.  Put this in your images directory and direct your html to find the .ico file.  Refreshing your browser and deleting your cookie history will ensure the new favicon shows up on your browser tab.

It’s really that simple and makes your browser tab look sharp.