The 8 Best Free Browser-Based Adobe Illustrator Alternatives

ai-online-alternatives

Adobe Illustrator is the default choice for anyone who needs high quality graphic design software. But Adobe’s subscription model is pretty expensive, and Illustrator only works on Windows and Mac. If you’re a hobbyist on a budget, or use Linux or a Chromebook, what are your options? Fortunately, there are plenty of free, browser-based Adobe Illustrator alternatives you can try. Not only do you not have to pay for them, but they’ll run on any device running any operating system. 1. Gravit Designer Gravit Designer is a fast, powerful, and great-looking free vector design tool. As well as working in…

Read the full article: The 8 Best Free Browser-Based Adobe Illustrator Alternatives

Adobe Illustrator is the default choice for anyone who needs high quality graphic design software. But Adobe’s subscription model is pretty expensive, and Illustrator only works on Windows and Mac.

If you’re a hobbyist on a budget, or use Linux or a Chromebook, what are your options?

Fortunately, there are plenty of free, browser-based Adobe Illustrator alternatives you can try. Not only do you not have to pay for them, but they’ll run on any device running any operating system.

1. Gravit Designer

gravit designer

Gravit Designer is a fast, powerful, and great-looking free vector design tool. As well as working in all major browsers you can download a desktop version for Mac, Windows, Linux, and Chrome OS. In all cases you get full cloud sync integration.

The program has all the basics you’d expect from Illustrator, including a version of the Pen tool (called Paths) and a freehand drawing tool that smooths your lines as you go.

It’s easy to create custom shapes thanks to Gravit’s take on the Pathfinder tool. There’s also a wide variety of keyboard shortcuts, including many that are the same as in Adobe’s software.

In addition to all this you get huge libraries of pre-designed shapes, illustrations, icons, lines, and more to use in your designs. For pro users Gravit Designer also supports CMYK.

2. Vectr

vectr

With support for all major browsers as well as a downloadable version for Windows, Linux, and Chrome OS, Vectr is a simple tool for creating quick vector designs.

It isn’t as feature-rich as Gravit, but that means there’s a shorter learning curve. And it has strengths for particular types of usage.

Vectr is especially good for creating social media cover pages. There are preset document sizes, and its easy to import photos and add your own text on top.

There’s seamless cloud integration. Every image has its own unique URL that you can share with anyone. Or you can export your finished work in the SVG, PNG, and JPEG formats.

3. Boxy SVG

boxy svg

Boxy SVG is an SVG editor that works in Chromium-based browsers like Chrome or Opera. It also has a desktop version for Windows, Mac, and Chrome OS.

Boxy works natively with SVG files, so you never need to export your images when you’re ready to use them, and can easily open them in other image-editing apps. It also means you can output HTML code for your images, which you can paste straight into a web page. If you prefer, you can create normal image files in the JPEG, PNG, WebP, and GIF formats.

So what features do you get? All the basics are here. There are lots of shape drawing tools, plus a pen and various curve tools. You also get plenty of type options, including integration with Google Fonts. Support for clipping masks gives you the power to create more complex works.

We found Boxy’s interface to be a little tricky to master at first, but it’s a fast and very capable Illustrator alternative, so worth persevering with.

4. Canva

canva

Canva is a very popular and easy to use browser based design tool. It offers more than 50,000 templates for every type of user and purpose. You can use it to create logos, ebook covers, posters, ads, and a whole lot more.

You don’t get much control. There aren’t any drawing tools so it’s not possible to create something from scratch. Instead, you just pick the template and customize it to taste.

And that’s really the point. Canva is about simplification. You can create some beautiful, complex, and very professional-looking designs without any design skills.

Check out our guide to things you can create with Canva.

5. Figma

figma

Aimed at professional or serious users who may already know how to use Illustrator, Figma has a growing reputation. It comes with its own Adobe-style subscription plan, but has a free offering that lets you create three projects and work in a team with two members.

Figma is primarily built for interface design, and fully supports files made in Sketch, another popular pro design tool. It also has mobile apps for iOS and Android that you can use to preview your designs on the fly.

The learning curve is steep, but there’s little you can’t do with Figma. There’s both support for Google Fonts and your own imported, offline fonts. It’s easy to create shapes and to design custom shapes through a pathfinder-like tool, and there’s full mask support. You can also save them as Components to reuse in your other projects.

When you’re finished you can export your work as PNG, JPEG, or SVG files, or just copy out your styles as CSS code.

6. Inkscape

inkscape

Inkscape has long been established as one of the best free Illustrator alternatives. While it’s always been a desktop program you can use it in-browser through the RollApp service.

The effect is a little strange since you get the full desktop UI crammed into a browser window. However, once you switch the browser to full screen mode it works much better.

Inkscape is a powerful piece of software. There’s a learning curve, both in terms of mastering its tools and in that it uses a whole different set of keyboard shortcuts.

It’s also a tad slow. Using Inkscape with RollApp is ideal when you need to edit on the go, but in most cases you’d be better installing the desktop software.

7. Janvas

janvas

Janvas has a solid set of features, including support for masks, and plenty of pen tool and text options.

It suits the beginner thanks to a library of templates covering everything from icons and UI elements, to letter and photo book templates. An extra series of pre-made gradients, patterns and textures, and filters help to make common design features accessible with a single click. You can save your work in the SVG, JPEG, or PNG formats.

Janvas has its quirks. It’s got a panel-heavy interface that takes some time to master. It’s configurable, but you’ll need to experiment to find a layout that suits your workflow. The biggest downside is that it doesn’t support keyboard shortcuts at all.

All of which means Janvas is a solid choice for smaller, quicker projects, if not for more complex pieces of work.

8. Vecteezy Editor

vecteezy editor

If you have got an existing SVG file that you want to tweak, Vecteezy is a good choice. It’s best for editing files or making very simple icons and logos, rather than creating larger pieces of work from scratch.

This is due to the simplicity of the app. You get pen and type tools and not much else. Instead, there are heaps of pre-designed shapes and pre-drawn illustrations that you can import into your work. Templates are promised for the future, too.

Saving files is trivial: just choose to export as either an SVG or PNG and your final image downloads instantly.

Adobe Illustrator Isn’t the Only Option!

None of the these browser-based apps can match the full feature set that Adobe Illustrator has to offer.

But they’re more than good enough to create things like posters, illustrations, logos and the like. You can even use them to learn the principles of graphic design, since all the tools—the various drawing, text, color, and shape tools—all work in the same way.

And you needn’t stop there. Once you’ve mastered your chosen vector design app, it’s time to check out some of the best free alternatives to Photoshop, Lightroom, and other Adobe products.

Read the full article: The 8 Best Free Browser-Based Adobe Illustrator Alternatives

How to Save Adobe Illustrator Files in Other Formats: JPEG, PNG, SVG, Etc.

save-ai-files-other-format

By default, Adobe Illustrator saves files in the AI format. This is ideal for when you’re working on projects, or for saving a master copy of your work. But when the times comes to print or share the finished product, post it online, or import it into other programs, you will need to save it into a different format. Adobe Illustrator gives you lots of options for this. The right one to choose depends on how you want to use your resulting image. Let’s take a look at the best formats to use and how to use them. Saving Artboards…

Read the full article: How to Save Adobe Illustrator Files in Other Formats: JPEG, PNG, SVG, Etc.

save-ai-files-other-format

By default, Adobe Illustrator saves files in the AI format. This is ideal for when you’re working on projects, or for saving a master copy of your work.

But when the times comes to print or share the finished product, post it online, or import it into other programs, you will need to save it into a different format.

Adobe Illustrator gives you lots of options for this. The right one to choose depends on how you want to use your resulting image. Let’s take a look at the best formats to use and how to use them.

Saving Artboards in Adobe Illustrator

Before we look at how to save files in specific formats, it’s important to know how Illustrator handles artboards, and how to save artboards as separate files.

Artboards are like different pages within an Illustrator file. They can be combined into a single image, but you can also save them out separately.

Most of the ways to save Illustrator files let you choose how you want to handle artboards, and this affects what your final, exported image will look like. In most cases, you choose what to do through an option in the Export screen.

save artboards illustrator

Here’s what you should do:

  • If you want to save multiple artboards as separate files, check the Use Artboards box. Then select either All to save all the artboards, or enter a Range (such as 2-4) to specify which artboards to save.
  • When you have objects placed outside of an artboard (like if it’s overlapping the edge), check the Use Artboards box. This will ensure that your final image only contains what’s inside the artboard, and that the rest is cropped out.
  • If all your artwork is within the artboard, and you only have one of them, clear the Use Artboards box. This will produce an image that is cropped to the bounds of the objects within in, with all white space removed. This is especially handy for outputting square or rectangular shaped objects.

artboards illustrator

Saving High Resolution JPEGs in Adobe Illustrator

For an illustration, infographic, or anything that needs to be printed like a business card, the best option is to output it as a high resolution JPEG.

Ideally, you should design your artwork at roughly the size at which you want to output it. Although Illustrator images can be resized without any loss of quality, you’ll find that the sizing between objects—and especially the kerning in text—needs to be tighter at larger sizes than smaller sizes.

save as jpeg

If you haven’t previously worked in this way, create a new document, paste in your artwork and tweak it to taste. You’re now ready to save your high res JPEG.

  1. Go to File > Export > Export As. Type in a file name and set Format to JPEG.
  2. Set how you want to save your artboards, then hit Export to continue.
  3. In the JPEG Options screen change the Color Model if you need to, and choose a quality.
  4. Under Options, set the output resolution. Screen (72dpi) will produce a file the same size as your original document and should be okay for web use. Choose High (300dpi) for a high res image. This will be good enough for printing.
  5. Click OK to save the file.

Saving Adobe Illustrator Files as PNG

When you need to save an image like a logo or icon for use on the web, especially if it has a transparent background, then you might want to save it as a PNG file.

save as png

In order to support standard and high resolution displays you should export your file at different sizes. You can do this automatically.

  1. Go to File > Export > Export for Screens.
  2. Select the Artboards tab. If there’s more than one artboard in your image, choose the ones you want to output.
  3. Under Formats, set Format to PNG and Scale to 1x.
  4. Click Add Scale. This will create the settings for a second image, so set the Scale option to a new relative size. 3x, for example, will output an image three times taller and wider than the original.
  5. Add more sizes if you need them.
  6. Click Export Artboard to save your images.

Saving Adobe Illustrator Files as SVG

A better, more modern way to export graphics like icons and logos for the web is by using the SVG format. Short for Scalable Vector Graphics, SVG is actually an XML-based markup language.

While you can output files that you can link to in your web page, you can also save the image as a piece of code that you can paste directly into your HTML file. You can then edit this using CSS. It’s a very efficient way of adding effects and animations to your images.

There are other benefits: the images are lightweight, and because they’re vectors you can resize them easily. There’s no need to output multiple sized images for different screen resolutions.

save as svg

There are a couple of ways to create an SVG. Using Save As creates a larger file for working on. To create a final image you can use in your projects use the Export option.

  1. Go to File > Export > Export As.
  2. Set the Format to SVG and click Export.
  3. Set Styling to Internal CSS. This places all the styling information in a <style> block that can be easily changed with CSS.
  4. For Font choose SVG to keep the text selectable. Only choose Outlines if you’re using an obscure, custom font. Leave Images on Preserve.
  5. Make sure Minify and Responsive are both checked for maximum performance and compatibility.
  6. Now click Show Code to open the code in a text editor. You can copy and paste this into your HTML file. Or click OK to output the image as an SVG file.

Saving Artboards as PDFs in Adobe Illustrator

The simplest way to save an Illustrator file as a PDF is through the Save As option. However, if you are using more than one artboard this will combine them all into a multi-page PDF.

artboards as pdf

There’s a simple trick to save artboards as separate PDF files:

  1. Go to Export > Save for Screens.
  2. In the dialog box that opens, click the Artboards tab and select those that you want to save.
  3. In the right hand column set Format to PDF, then hit Export Artboards. It may take a few seconds to output large or complex files.
  4. When done your files will, by default, saved in their own separate sub-folder.

Saving Objects From an Adobe Illustrator Image

Sometimes you might need to save or export only selected objects from a larger piece of art. For instance, if you have designed a logo you may want to save the text or the symbol in its own individual file.

export assets

You can do this by turning the objects into Assets.

  1. Go to Window > Asset Export.
  2. Choose the Selection Tool from the Toolbar, or hit V on your keyboard. Now drag the objects you want to save onto the Asset Export panel.
  3. Now select the Asset. Hold Ctrl or Cmd to select more than one.
  4. Under Export Settings choose a Format. You can select PNG, Jpeg, SVG, or PDF.
  5. If you’re saving as a PNG or Jpeg you can export at multiple sizes. Set Scale to 1x, then click Add Scale and the set Scale to, for example, 2x. You can also use this option to export the asset in different formats.
  6. Click Export and choose a location to save your new files.

How to Use Adobe Illustrator Files in Other Apps

There are other options, too, that allow you to use your Illustrator file in other programs. Photoshop can open AI files directly, but only as a flat, uneditable image. Use the Export As option instead to save the file in the PSD format. This retains all the separate layers when you open it in Photoshop.

You can use AI files in other Adobe apps and products like InDesign, where it won’t be editable but will keep things like its transparent background.

For most non-Adobe apps, you will most likely need to save the file in the SVG format (using the Save As command this time). Check out our guide to opening AI files without Adobe Illustrator for more details.

Read the full article: How to Save Adobe Illustrator Files in Other Formats: JPEG, PNG, SVG, Etc.