There is a new Velara 3 Cloud feature that has been in the works for a while that is now in public beta that you can test. The cloud feature allows you to post your exports online in the Velara 3 cloud. This makes it much easier to test and validate your page across multiple browsers.
The instructions are here in the forums and written in the Upload project here.
It takes a few minutes to setup and once you are logged in uploads can happen at each export or automatically!
Test and review your pages in multiple browsers using this simple setup option.
Notes: Accounts are limited to total of 10MB-100MB.
In the future those who purchase a license or subscription will be given more space.
It has been two years now since Web Export was released and it is now at version 6.1.0! With Web Export you can author and export web pages, web sites, slideshows and more from Adobe XD.
Here’s some of what’s new since last year:
Multiple selection support to update properties
Added Stack support using relative normal flow positioning
Added Styles field to an element to add or replace styles
Added Javascript field to add JavaScript to an element
Added HTML template for an element to use your own HTML
Show exported HTML markup, Javascript and CSS in XD
Added support for pop ups and hover menus
Added quick preset layout options
Added navigation buttons to select elements from panel
Added embed images support
Add support for multiple views with multiple sizes in single page
Added export as string
Added support to export to sub folders
Show the properties that have changed from default
Spectrum Components support
New Documentation and updated
Web Export example projects has grown to 60 examples!
Multiple Selection Support This means you can select multiple items in your artboard and then change properties in the element panel and the values will be applied to all selected items.
The properties you can change are tag names, styles, and classes.
Show changed properties Using the Show Properties button you can see the properties that have changed on the selected element. If you are learning about a project it is helpful to see what properties have changed. Click the Show Properties (or Shift+click the Reset Properties button.
Stack Layout Support XD has added a “Stack” type of layout. This positions items inside of a group horizontally or vertically and allows you to set the gap between items all together or independently.
This is now an export layout type you can select in Group options. It is not selected by default even if the group has this feature enabled. By default items in a group are positioned absolutely.
See the row-layout and column-layout examples for more.
HTML, Javascript and CSS template fields
The new HTML markup template field replaces all default HTML for the selected element. It supports tokens so you can get the element properties and insert them into the value. This is useful if you’d like to create custom HTML components but don’t want to use markup inside.
The new Styles template field allows you to add your own style declarations to each element. It supports tokens so you can get the element properties and insert them into the value. You can even prevent all default styles from being exported using a special token.
The new Javascript template field allows you to add your own JavaScript to each element. It supports tokens so you can get the element properties and insert them into the value. Same video as above.
Spectrum Components examples There is a new introductory example showing how to use Spectrum Components in your artboard. There are a few components so far and more support is planned.
Did you know you can see what the exported HTML and CSS looks like right from within Adobe XD? Open the Element Options panel, select an element and click on the Show Markup or Show CSS button.
Embed Images You can now embed images inline using a data URI base64 encoding. That means the image is encoded into the HTML markup. There is no external image created. This option is in the element options and can be set on the entire artboard. The artboard option overrules any specific image options at this time.
It also comes with a color limit option that limits the number of colors in the image. This reduces the size of the embedded images. Check the export messages for the embedded images sizes or check the HTML page size.
Quick layout options of Position, Position By and Sizing Options Choose common layout positions, layout methods and sizing options in the Element Panel.
Navigation buttons to select next, previous or descendant items You can select another element on the artboard using navigation buttons.
Show Markup and Show CSS button in Element Panel Show the exported markup of the selected element without exporting
Added initial support for hover effects (select two elements) Hover effects will show you the difference between two objects when mouse is hovering over an element. Select two objects, preferably of the same type and in the Hover Options list select the second element. Exclude the hover element when exporting.
Export as string option Select this option to have the element markup exported as a JavaScript variable value:
Set destination of export to sub folders Define subfolders in the export folder location.
Documentation guide The documentation support site has grown and been improved.
Multiple views with multiple sizes in a single page In my opinion this is one of the most game changing features yet to be understood and utilized. Previously you can export multiple sizes of a page using Single Page Application media query export option. With that open the page that fits closest to the browser size is shown (think of one HTML page with small, medium and large artboards). Now you can do that with multiple pages with multiple sizes in the same page (home page small, medium and large, products of small, medium and large, etc).
More video guides There have been more than 10 new videos since the last update. Here is the web playlist.
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.
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.
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.
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.
Safari:
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.
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
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”.
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:
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.
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
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
5. Select Object > Group from the menubar.
It should now be grouped in the Layers panel:
Now you can resize that group and maintain the positioning and sizing of the text and image.
Export 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!
Features
* 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 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. The download is here.
AIR 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.
Note! 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)
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
