As an artist and a web designer, I am excited about the possibilities that Adobe Illustrator CC offers in its support of Scalable Vector Graphics (SVG) and the flexibility it gives me when creating high-quality graphics. Since SVG is vector-based, I have a lot more freedom to create images that will automatically scale on all modern devices.
Category: SVG
SVG ‘text’ and Small, Scalable, Accessible Typographic Designs
SVG element – typography, accessibility
Let’s say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word.
This is something we might tell a graphic designer switching from print to web to avoid. It’s too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.
But with inline SVG, we can do it, and do it well.
SVG <text>
The big “trick” here is that SVG has a
<text>element that is just that: text. Not outlines of text, just regular ol’ selectable, accessible web text.
Animating SVG Gradients
Three demos of animated svg gradients from designmodo.
Import web pages into Sketch
Sometimes you need to tweak or slightly redesign an existing web page without original assets. Some common ways to do this would be to recreate a page from scratch, tweak it in a web inspector, or in the worst case make a screenshot and mess with bitmap (if you enjoy pain). Another hacky way to do that is to actually convert the web page to a vector graphic. Here is how I do it:
1. Convert page to SVG
Option one: Use http://derailer.org/paparazzi/ like so https://www.youtube.com/watch?v=9cgHQyXm4_Y to import a page into sketch. If it doesn’t work well try option two.Option two: Go to http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx and insert the desired URL of a web page and the screen size.
Note: Sometimes you want to access a page behind a login, or an offline document. You can use this chrome extension http://cl.ly/VRdx to save a webpage as a single document and feed its internal code to hiqpdf converter.
So What’s the Big Deal with Horizontal & Vertical Bezier Handles Anyway?
Have you ever seen Illustrator progress shots from your favourite designers and wondered how and why their bezier handles are so obsessively arranged? We’re hoping to shed a little light on this seemingly unnecessary process. Note: this tutorial assumes a solid grasp of Illustrator & the pen tool.
