Web Export 3.5.0 for Adobe XD and more

It has been one year since Web Export was released and it is now at version 3.5.0. With Web Export you can author and export web pages, web sites, slideshows and more from Adobe XD. It is really at version 1.0.0 in the big picture.

There have been exciting new features, new and smoother workflows and new documentation and videos and a new website and new forums. In the latest version you start out with a basic export screen and you can switch to an advanced screen.

Along with the Web Export plugin came the Alignment plugin and the Statistics plugin.

The Alignment plugin does just what it says. It supports aligning items to their container, stretching items to fit, aligning to margins, aligning to center and more.

Check out the Web Export playlist and start taking your designs online.

Check out the new documentation here.

And for this week only use the code MAX-SPECIAL to get 30% off all Velara 3 software at the store here.

Velara 3 Launches Web Export plugin for Adobe XD CC

October 15, 2018 – Velara 3 today introduced the Web Export plugin for Adobe XD CC. Web Export features exporting HTML and CSS with just a few clicks. The Web Export plugin also offers a wide selection of features including constraining elements to left, right, top, bottom, horizontal center and vertical center positions. In addition you can add markup before, markup after, and add additional styles, classes, and attributes supporting popular web frameworks.

“We are thrilled to offer Web Export in the Adobe XD Plugin Manager. With nested layouts, centering constraints and dynamic CSS, Web Export is a great tool to compliment Adobe XD.”

Just in time for the holiday shopping season, Web Export is available on the Adobe Exchange.

Velara 3 creates tools to a provide a seamless workflow for designers and developers.

Instructions on installing and getting started are here.

What is problems are you trying to solve in graphic design and web development in 2017?

What do you need as a web developer? What do you need as a graphic designer?

When you need to do the following tasks:

  • Port a design to the web
  • Check the design across multiple browsers
  • Check the validation of a web page
  • Create an advanced layout for the web
  • Integrate content from WordPress into a design
  • Integrate and support multiple web frameworks in a graphic design
  • Render and code an HTML page live as you type (showing outlines)
  • Render and code an MXML document live as you type
  • Create new design with text, images, and form items
  • Create a rich email letter (self contained HTML with inline styles)

These are the problems I’m trying to solve with Radiate. Check it out and if it doesn’t solve a problem for you then let me know.

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 in the CSS section to remove centering.


You can edit the page with a text editor and save it again. Simply, you change margin “auto” to “0” in the container selector and save 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 custom export group
* Exports desktop, mobile and tablet icon sizes
* Exports app descriptor XML for icons for AIR
* Resizes from highest quality resolution
* Can set custom sizes
* Can set quality, image format, resample method and include the color profile
* Preserves aspect ratio


Price – $4.95 (Requires Photoshop CS5+. Mac and Windows)

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 allows you 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$4.95 Free (Mac or Windows)

This is now a free download. The download is here.

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)

NOTE: This does not work with the new version of OS X 10.11 or greater. A workaround is being worked on.

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