New VeraType 3.3.1 Released

A new release of VeraType is out. New features include:

– Added export to SVG. Can import into Illustrator
– Added export to FXG. Can import into Flex
– Added support for background image in export to SVG, FXG, and HTML
– Improved fidelity of HTML export
– Added SVG copy to clipboard
– Added FXG copy to clipboard
– Fixed numerous bugs

To use:

1. In VeraType open an image and make any adjustments:


2. Press the save icon and select FXG or SVG:


3. Save it to the same directory as the picture you loaded and then open it in Illustrator:


You may get an warning that the original image can’t be found. This means that the background image is in a different directory than the one you exported to.


If you try to replace it it doesn’t always end up in the correct place. To fix it, copy and paste the background image to the same directory as your exported SVG, FXG or HTML page and then open it again.

You’ll notice that the layers are named and the text is selectable.


If you export to FXG multiple lines of text are selectable. If you export to SVG only single lines are selectable. If you export to HTML multiple lines of text are selectable.



When viewed in the web page the image is centered. You can view the HTML source code. There are instructions in the code to remove centering.


You can edit the page with a text editor and save it again. Simply, you change “auto” to “0” and it will be aligned to the left instead of centered.

How to import VeraType artwork into Adobe Illustrator

VeraType exports to Image, HTML, and Text formats but what about exporting to Illustrator? Currently it does not but it is fairly easy to manually import your work into Illustrator. How do we do this? We export the text and then paste it into Illustrator. Text fields in Illustrator are vectors and will maintain fidelity as you resize them. You can try this by changing the font size of a text field in Illustrator (try 64pts) and checking the edges of the fonts.

text sized at various font sizes

text sized at various font sizes

To Import into Illustrator open VeraType and follow along.

1. Import your image and make any adjustments.
2. When you are ready to import to Illustrator look in the lower dock of the app and find the “Copy and Paste” icon. Click this icon.
3. You’ll see a menu with the option to “Copy Text”.

Screen Shot 2015-07-11 at 10.29.20 PM

4. Select Copy Text. This will copy the text to the clipboard.
5. Switch over to Illustrator and create a new document
6. From the menu bar select Edit > Paste. This will paste the text from the clipboard.
It will probably look compressed and it will probably extend past the edges of the art board:
Screen Shot 2015-07-11 at 10.38.16 PM

7. Make sure it is still selected and in the font drop down select a fixed width font such as “Courier”, “Courier New” or “Monaco”. The text should reformat itself and world will be made right again.

Screen Shot 2015-07-11 at 10.41.18 PM

If not you may need to find another font. A fixed width font is a font where each character is the same width. Most fonts are not. In VeraType the list of fonts on the right side are all fixed width.

BTW You may need to change the font size to fit your document size. Change it to something lower than the current value as low as 4 or 5 points.

If the text is too large even after changing the font size then you may need to change the detail level in VeraType (located just under the Zoom setting). Lower this value down. Secret hint: The zoom setting is really the font size. When you click and drag or when you export you can see the font size.

What about about images? If you have used an image as a background you will need to import it into Illustrator manually. You may then need to stretch the image to fit the width and height of the text.

An easy way to do this is to:

1. Export to an image from VeraType (rather than copy the text) using the exact same settings as when you copied the text. Click the File icon and choose Image then click Export. This will create a PNG file
Screen Shot 2015-07-11 at 11.07.49 PM
2. Import this image into Illustrator. File > Place  and select the image.
3. Set that as a background (move it lowest on the Layers panel and lock it). Then match the image and the text to the background image. This can take time to get right.

You would stretch the image and you would change the font size on the text field. Once they are matched to the background image delete the background image.

4. Next select both the text and the image
Screen Shot 2015-07-11 at 11.17.54 PM

5. Select Object > Group from the menubar.

Screen Shot 2015-07-11 at 11.20.31 PM

It should now be grouped in the Layers panel:

Screen Shot 2015-07-11 at 11.21.45 PM

Now you can resize that group and maintain the positioning and sizing of the text and image.

Screen Shot 2015-07-11 at 11.25.40 PM

Export to Multiple Sizes for Photoshop

Export to Multiple SizesExport to Multiple Sizes is a script for Photoshop to export your work to multiple sizes. When creating icons for mobile or desktop applications you must export your application icon to over twenty five different sizes. Now you can choose a target platform (or create your own sizes list) and export them all at once!


Export to custom sizesFeatures
* Easy to use
* Export to iOS, Android and AIR or your own sizes
* Exports desktop, mobile and tablet icon sizes
* Exports app descriptor XML for icons for AIR
* Resizes from highest quality resolution
* Requirements: Images must be square


Price – $4.95 (Requires Photoshop CS4+. Mac and Windows) – (Tweet and get 50% off).

tags: Photoshop, Photoshop script, iOS, iPhone, iPad, Android, AIR, mobile, desktop, app, Google Play, App Store, icon, image, bitmap, resize, export, save as, save for web

Password Manager for Mac and Windows

password_manager_icon_128Password Manager is an application to easily create secure passwords. Using anything less than 12 character password is not secure. Short passwords can be hacked within 6-12 hours. Passwords using common words can be hacked even quicker. I wrote this application because creating unique passwords using random letters, numbers and characters of significant length is the most secure way to protect your accounts.

Whenever I create a new account for a web site whether it is a social media site or a bank site I open this app and generate a secure password of at least 16 characters in length. With one click I’ve copied a secure, hidden password to the clipboard where it is ready to use. I don’t have to create one myself every time. I don’t have to remember it because the browser will (Firefox) or I can just request a password reset from the site and create a new secure password.

* Automatically creates 6 secure passwords when opened
* Automatically copies the password you choose to the clipboard. No pressing CTRL + C.
* Automatically obscures the password. Show or hide within the application. Prevent  onlookers. Great for use in a public setting.
* Create your own custom password as required by websites including numbers, letters, mixed case, non letter characters and fixed size
* Change the length of the password up to 1024 characters

Price – $1.99 (Mac or Windows)

tags: secure, password, passwords, mac, windows

Restart AIR Play for Mac

restart_air_play_128AIR Play is Apple’s software used to stream video or audio to an Apple TV. Occasionally it gets stuck and the video and / or audio doesn’t stream to the device. This software fixes many of those issues. Whenever this occurs I open this app, click the restart button and almost instantly AIR Play is working again.


Restart AIR PlayNote! This application restarts core audio similar to going to the command line. If you are comfortable doing that then you do not need this app. This wraps up that functionality and gives you instructions so you can use it whenever you need it.

* Easy to see icon
* One click restart
* Fixes numerous AIR Play issues

Price – $.99 (Mac)

tags: AIR Play, Apple TV, audio not streaming, no audio, no apple tv, no apple devices, mac

Fixing Apple TV

Apple TV can be finicky at times. Sometimes the audio stops working and sometimes it does not connect or it does not see the Apple TV. This tutorial will help you get it working. First download Restart AIR Play.

Please read these instructions completely before proceeding

TLDR; Click button, enter credentials, restart your video or audio app and try again.

NOTE: Any audio applications (such as iTunes) playing audio will stop playing. They may need to be restarted. To be safe close them before proceeding.

1. Click the Restart AIR Play button in the Restart AIR Play app.
2. You will be prompted to enter your login to restart the core audio process
3. After entering your login click OK.
4. Now try to connect and stream to your remote device again. You may need to restart your video or audio application (iTunes, VLC, QuickTime, etc) and then try to connect again to Apple TV again.


Show Desktop for Mac

show_desktop_128Show Desktop is an application for easily showing your desktop. All you do is click the icon and all the visible applications are minimized giving you a clear view of your icons. This app helps you see your desktop quickly and easily. I use it all the time myself.


* Easy to see icon
* One click launch
* Easy to see desktop

Price – $.99 (Mac)

tags: start, show desktop, minimize all windows, mac

Start Screen Saver for Mac

Start Screen Saver is an application for easily starting the screen saver. All you do is click the icon. Once the screen saver has started the program will exit.

This app helps you lock your screen quickly and easily. Although it’s simple I use it all the time myself.

* Easy to see icon
* One click startup
* Easy to setup secure lock screen password. Preferences > Security > Require password after screen saver starts

Price – $.99 (Mac)

tags: start, screen saver, mac, lock screen, security

VeraType Instructional and Demo Videos

Here are a set of videos that demonstrate what you can do with VeraType. For the best experience watch these videos in full screen and enable HD. You can do this by clicking the settings icon on the video player and choosing the highest setting. Note: The actual quality is much better in the application than in the video.

Shaping text into an image (literally)

Creating a dramatic effect using Invert and the Levels Control

VeraType Update

The last few weeks I’ve been working on two projects, VeraType and Radiate. VeraType is an entertainment productivity app that converts images into text and text into images. Radiate is a online design and development environment in the early beta stages. I’ve had a few breakthroughs on both.

In VeraType there’s a feature that lets you load in an image and then type in a word, phrase or even a page or two of text and the app will arrange the text into the shape of the image as shown below.


In the app this is called the custom text option. It looks like this:


Click on the images to see a full size preview.

This had some issues. First, if you don’t provide a lot of text then the shape of the image is indiscernible. So I added an option to repeat the text so it would fill out and form the shape of the image. So if you typed, “hello” it would be repeated maybe 1000 times until it was the size you specified.

This worked for a while but what if you wrote a letter and you didn’t want to repeat it? You could manually adjust the detail level until it showed just the text you wrote or the app could do it for you. This posed a new challenge. Previously you would provide the image and the size (detail) and the text would fill that area. But now to show only the text someone types you have to size the text field until it fits the text. The size has to be determined. This became the size to fit option. In the app you would set the repeat option to off to achieve this.

Warning: Technical explanation ahead. You can skip the next few paragraphs. 

The first method I used was to create the text image at the smallest size and increase the size step by step. On each step I would check if all the typed text was there. If it wasn’t then increase the size once more (you only had a certain number of rows, which were determined by the height of the image, so the text would get truncated). If the text wasn’t all there I’d create the text image again and repeat this process until it was.

This was fine if there wasn’t a lot of text. But as the words and phrases grew into paragraphs so did the rendering time. When the size and repeat option was enabled, which is the default, it would only take a single pass to generate the text and that took anywhere from 5 to 300ms (debug performance measurements). But since we didn’t want to repeat the text and the size was not available it would take up to 300 passes or more at 5 to 300ms each. It was becoming clear that this would cause problems for mobile devices.

The second method which I worked on this week used the phone book method I read about but never used before. Oddly enough, this method is related to origami. In this case, which I think they call a needle in the haystack situation, you have a very large set of data but if that data is ordered then you can divide and conquer or divide and reduce.

In this method you start in the middle of the data, check where you are and then go forward or backward into the middle of your previous location until you have less and less results.

So for example, if you are looking for someone named Michael Thompson in the phone book using this method you would split the phone book in half and check if he’s on that page. If he’s after that page then you split the pages in half again but this time from the middle, the page you are on now, and the last page and check that page. If he’s before that page then start from the page you are on to the previous location you were at and check again. You repeat this process until you get to the page you are looking for. If the phone book was 100 pages long then the sequence we described would start on page 50, go ahead to page 75, go back to page 62 (62.5), go ahead to 68 (68.25) and so on until we find him on page 68.

End technical explanation.

Long story short it went from 1 – 400 iterations down to about 8 or 9 no matter how much text I entered in.

The second feature I worked on was to enable a background image. See below. Click on the screenshot to see a full size preview.

text with image background

This had it’s own set of challenges.

Technical explanation.

I added an image behind the text but it didn’t always size and position correctly so I bound the image size and position to the text size and position. This exposed all sorts of issues that the text image had that I didn’t resolve earlier on. At different sizes and especially when the images had borders, the text and image would end up scaled or size down. This was because the text field would shrink down to fit the widest row or highest column. This didn’t work when the background image was shown.

The solution was to include a second text field that had the exact number of characters wide and exact number of rows including the blank lines at the end of the non repeating text. Without that the height of the text field was too short and so the image was too short even though it had the correct width.

End technical explanation.

All in all it was a productive week.

I forgot there was one more feature. That’s the swap color scheme option.

Swap color scheme

I like this option more than I thought I would. It gives the image some contrast. Enjoy.