Radiate

Radiate is a Windows or Mac design and development application that allows you to create designs, websites, and prototypes for desktop and mobile applications. You can make a poster, a flyer, a banner ad, an image gallery, a flexible design, and even a complete website and more. You do not need to know how to code but can achieve even more with code. You can even share your work online.

Radiate Design Example

This design was done completely in Radiate. It is a copy of a WordPress theme. Visible is the  media library and undo and redo history panels

When you make a design Radiate helps you generate the markup. This markup can be viewed as a web page, mobile Android or iPhone layout code, and more. In this image is the Properties Inspector and Layers Panel.

When you make a design, Radiate helps you generate the markup. This markup can be viewed as a web page, mobile Android or iPhone layout code, and more. This image shows the Properties Inspector and Layers Panel.

This shows the Radiate code view. If you are a coder you can see and edit all the code live. No other program supports Radiates advanced code and user integration.

This shows the Radiate code view. You can see and edit all the code live. No other program supports Radiates advanced code and user integration.

No other program exists like Radiate. It is a tool built for today with people like you in mind. Whether you are a hobbyist, a designer, an advanced developer, an entrepreneur or prototype builder Radiate will help you accomplish your goals.

BENEFITS

  • Easy to learn with familiar user interface and feature set
  • Numerous examples available to get you started
  • Examples can be used to make new designs or websites rapidly
  • Many examples come with code included
  • Free subhosting for most sites (royalty free)
  • Multiple accounts support
  • Share projects with other users
  • Developers can work with your project without changing the design
  • Uploading is as easy as pressing a button
  • Sharing is as easy as pressing a button

FEATURES:

  • Create stunning flexible layouts
  • Integrate rich graphics and images
  • Support advanced horizontal, vertical and tile layouts
  • Position using advanced flexible left, right, top, bottom and center constraints
  • Rasterize your work as easy as dragging and dropping
  • Drag images into or drag selections out of the program as images
  • View online without uploading or using FTP programs (upload is automatic)
  • Get a free website for your web pages, graphic designs and images
  • Share your work or mark it private
  • Integrate WordPress content live into your design or web page
  • Export as an image
  • Export to a web page or website
  • Export to Flex MXML
  • Export to Android XML
  • Export as HTML, HTML5, CSS and JavaScript
  • Export all the web pieces separately including the markup, CSS, template, code. This is a new feature no other design program supports. Built for designers and developers in real life work flows.
  • Export to WordPress theme
  • Works with frameworks including AngularJS, ReactJS, CreateJS, FlexJS, VanillaJS Vue, SASS, LESS, JQuery, Gulp, Grunt and more
  • Create the next meme

Buy Now!
Price $99.95 (Requires Windows or Mac)
(30 day money back guarantee)
On sale for 75% off at radii8.com

tags: HTML5, AngularJS, React, Photoshop, Illustrator, iOS, iPhone, iPad, Android, AIR, mobile, desktop, app, Google Play, App Store, Flex, Flash, icon, image, bitmap, resize, export, save as, save for web, fluid design, Polymer, Ember, Knockout, Aurelia, Bootstrap, Mercury, Meteor, Backbone, SASS, LESS, CSS, JQuery, JavaScript, ActionScript, Gulp, Grunt, PHP, Node.js, RedTararin

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:

tiger

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

tigersave

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

tigerinillustrator

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.

imagenotfound

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.

textselectable

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.

Safari:

webpage

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.

tigersource

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 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.

Features
* 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. I figure if your computer gets hacked you can’t purchase any of my other products. 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.

Features
* 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.

 

Features
* 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

show_desktop_128
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.

Features
* 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