Sketch Vector Editor – First Impressions Creating a 3D Icon/Logo

Since Adobe is pulling the rug from under me by discontinuing Fireworks, I thought I’d try an alternative. Simply googling “fireworks replacement” will get you quite a few mentions of Sketch, by Bohemian Coding. I think I gave it a go about a year ago, but I thought it was too simple, or too rudimentary for my needs. I thought “Big green buttons across the top toolbar? That’s their choice of UI?”. Well, it’s not a horrible choice after all. Read on.

I’ve been using Fireworks for many years, mostly for designing website layouts, icons, banners and mockups. Unless I need some powerful photo editing stuff, I don’t normally touch Photoshop. Also, unless I need to create a complex vector logo or drawing for print, I don’t touch Illustrator either. I know people see Fireworks as a secondary product in the Adobe suite, but that was never my case. I also know people say Fireworks is not “trully vector”. It is if you know how to use it. And it lets you export vector paths anytime you may need them elsewhere. Anyway, enough about Fireworks. I’ve already written a simple tutorial about creating a 3D looking sort of icon in Fireworks, so I thought it would be a good idea to try and duplicate that with Sketch. I followed my old tutorial step by step and tried to manage with Sketch’s tools. It worked.

I started by dragging a PNG file of the old logo into Sketch, to use as a background placeholder. The result was predictable: Sketch created a new layer, named after my file. It was easy to rename it and to adjust the opacity. It wasn’t that easy to lock that layer though. I think the only way is to right-click the layer to lock it.

Soon I started drawing curves. I found the Pen Tool quite easy and intuitive to use. It’s a well thought-out tool and it spared me any frustrations and hair-pulling. I easily figured out how to edit a shape again once I’ve left that layer. You click the shape twice (or double click) and it goes back into vector mode for paths.

Sketch Pen Tool Bezier Curves

The Layers Panel in SketchThe Escape key easily cancels the current selection. Selecting paths, adding fills (from the Inspector on the right) and Subtracting one path from the other was all pretty intuitive. Very nice to notice that subtracting paths creates a new parent layer (like a group or folder) and the paths inside are still editable.

I created 3 new rectangles in the middle. Was surprised to see them popup as squares in the middle of my canvas. Was expecting to be able to draw them by hand. I’m sure “interactive creation of rectangles” is in there somewhere. Resizing and moving was easy. I wish I had easily found the “paste in place” button, but I didn’t. After you Copy, Sketch Pastes just above the current object, 10 pixels to the right and 10 pixels down. The rectangles in the middle were very easy to align though, by draging them and using the snaps.

Rectangles and Paths in Sketch

Gradient Handle in SketchI could easily create a big rectangle with rounded corners. Took me a few seconds to understand how you change the colors of the gradient: you click the handles on your object. Smart. And nice. Easily duplicated the background object (I’m still not sure about the correct terminology here: objects vs layers) and created gradients. I must admit that gradients in Sketch are cooler than in Fireworks! They move and snap and do what you want them to do much easier. Still, I can’t for the life of me figure out how to remove the middle handle…

Gradients in SketchCreating the shapes for the white highlight and the black shadow was easy. Giving them blurred edges was not. I thought I’d find some sort of “feather” effect or option, but it’s not here. I looked it up. You can simulate that sort of edge blur by using a shadow. I got a similar effect for the white highlight – white fill with white shadow – more like a glow, actually. But the black object with the black shadow was impossible to create (setting the object fill color to 50% opacity and the shadow to 0 displacement, 12 blur and 7 spread). You can’t see the problem in the image below, but what Sketch does is it creates a “hard” line between the fill and the shadow that I just couldn’t get rid of. I’m sure there’s a technique I’m not mastering yet.

But I’m pretty satisfied with the final result, even if this was a rather simple exercise.

Transparent Highlights in Sketch
I wanted one final dark background for the whole thing. In Fireworks I used a gradient with a “texture”. You can’t combine gradients and “patterns” in Sketch, as far as I know. I ended up creating two rectangles, one with a leathery pattern and one with a transparent gradient and put them one on top of the other. I couldn’t figure out how to use the Blend Mode yet.

All an all, this was a positive experience. I’m certainly going to give Sketch another chance.

Final 3D Logo in Sketch

Leave a Reply