Foreword

I thought I’d share my workflow and give a few tips for how to make your designs a bit more future-proof and vector based in digital design. This article is about a workflow that is using vectors. It also gives you a few tricks about drawing techniques with Illustrator and handling vector based icons in Photoshop. Vector shapes are core parts of the next generation web but without taking the time to optimise them for screen usage. It almost doesn’t matter if they’re not SVGs or high resolution images. Hopefully it will make your design process a lot better.

Setting up Illustrator (OSX)

On Windows the keystrokes for example instead of ⌘Cmd+K is Ctrl+K.

Document Settings

Create a new document and select the web format in the dialog.
Set the canvas to a comfortable size to work on, let’s say a 1920px by 1080px document (this will automatically set the working units to pixels).
Then turn OFF the ‘Align New Objects to Pixel Grid’ function at the bottom of the panel (marked yellow). Click OK to create the document.

Artboard Settings

Now we need to set a background colour instead of the white, so create a 1920px by 1080px rectangle and set the colour to #b4b4b4. Lock it on its layer and create a new one for the drawings.

Preferences

Hit ⌘Cmd+K to open up Preferences. The first thing here is to set the Keyboard Increment to 1px. This will allow us to move the anchor points on our custom pixel grid, just like Photoshop pixel snap.

On the Units tab, the General units have already been set to pixel because we created a web document. You only need to set Stroke to Pixels.

Go to the Guides & Grid tab (Fig 3.) and set the Guides’ colour to 35% Gray by selecting the ‘Custom’ option from the drop-down menu then select Dots from the Style drop-down. This will make the the custom guides slightly darker than the background.

After that we need to set the grid to be a custom colour as well, so just by clicking on ‘Custom’ from the drop-down menu set it to 70% Gray on the slider (OSX). You can still fine-tune the colours later if you’d like to.

Gridline every 10px and set the subdivision to 10 then switch OFF ‘Grids in Back’ because otherwise you won’t see the grid. Hit OK.

When you’re ready with all the preferences you need to turn ON:

• Rulers ⌘Cmd+R or View/Rulers/Show Rulers
• Guides ⌘Cmd+; or View/Guides/Show Guides
• Grid ⌘Cmd+’ or from View/Show Grid
• Snap To Grid ⌘Cmd+Shift+’ or View/Snap To Grid

Also turn on the Transform, Pathfinder, Align and Stroke palettes as you’ll need these a lot. These steps are the foundation of the workflow and every step is very important. Now if you’re done with all, create a few test guides to see how they look. Your document should look like on Figure 4 below.

Best Practices

Your file is set up, it’s ready for action. Make sure that the grid snap is turned on and you can start drawing in the document.

1. In some cases you have to unlock the grid snap
The two upper anchor points of the triangle (bottom part of the heart) have to be off the grid to draw the heart shape. Hence you have to turn off grid snap and move the anchor points to make a tangent to the circle, otherwise it’s going to be a lot harder to draw a heart (Fig. 5).

Note: Whenever an anchor-point is off the grid (rotation and scale may cause that) you can move it back to be on the grid again very easily. Nudge it once (→) and then back (←) with the arrow keys.

2. Working with Strokes

Depending on line-weight you have to align the outline strokes either to outside, inside or to center (Fig. 6). Otherwise they won’t be crisp because they fall off the grid.

Playing with stroke align and corner types on simple shapes you can easily draw custom icons. On the example below (Fig. 7) the stroke weight is 1px.

Note: The finished object should be Expanded, when inserting into Photoshop or using it as an SVG, otherwise you’d see a simple icon as the left one on Figure 7.

A simple example on Figure 8. shows how an outline stroke can help when you have to make a turn from a straight line. We need a perfect circle to do that. As on the example a circle with 4px diamenter and 2px stroke aligned to the outside of the shape will do the job for us. Place it to be at the bottom of the upper rectangle (the two anchor points should intersect). After you finished the other shapes of the whole icon, expand the circle and subtract the unnecessary area (area shown red on Fig. 8).

3. Cutting with a shape’s outline

Sometimes a shape is covering some parts of an other one behind. Basically when we need to make a gap between the two (or more) shapes.

In order to do that, we’ll have to cut the shape with its own expanded stroke as the first step. This is because when expanding an outline — regardless how it is aligned — Illustrator generates a slightly bigger object, which intersects with the stroke’s outline shape.

In Action: Select the outline shape Hit ‘A’ (Direct Selection) and make sure you only select the outline. Then Copy it to the Pasteboard ⌘Cmd+C. Select the main object as well and on the Pathfinder click on Subtract. Now we have the original object again. Paste the outline shape with ⌘Cmd+Shift+V (Paste in Place) and select the second object you need to cut (the TV on the example — Fig. 9.) with Direct Selection. Then click on Subtract again.

The result should look like on Figure 10. Double Click on the object to enter Isolation Mode and just simply delete the unwanted shape.

Your icon is ready to use. Depending on the purpose of the icon, you can make the final version.

4. Create an instance before Expand or Unite

Most of the times all of these icons are going to live outside Illustrator, my advice is to always keep the original (editable) copy of the icon, where the stokes are not Fills, rounded corners are still effects, etc. Just make a copy and continue editing the instance of the object. I’m sure there are going to be situations when you need to go back and change them slightly.

Furthermore I would suggest sometimes try to paste the icon before uniting its separate parts in Illustrator in case if you’d like to fine-tune some bits in Photoshop.

Note: After you modified an icon in Photoshop and you’d like to put it back into the Illustrator file, just select the shape with Path Selection tool and copy it to the Pasteboard with ⌘Cmd+C. Then simply paste it as a Compound shape. The inserted shape does not have a Fill, so it’s important to set a colour.

Inside Photoshop

When you’re ready with an icon, you can paste it into Photoshop, use it as an SVG or any third party applications that supports Illustrator. I recommend to acknowledge Bjango’s workflows in Photoshop and to use his great set of actions which you can download here. Since the icons are designed in the Vector Workflow, they are going to be perfect for any purpose.

When you paste the icon into a Photoshop file, make sure that Pixel Snap is turned ON in Photoshop, otherwise you would need to re-align the vector shape. To check this, quickly open the Preferences in Photoshop ⌘Cmd+K and tick the last option ‘Snap Vector Tools and Transforms to Pixel Grid’. In case if you have Bjango’s Actions just click Enable Pixel Snapping (F15).

When hitting ⌘Cmd+V to paste the icon, a dialog will pop-up and you need to select Shape Layer and click okay.

Scaling & Sizes

When designing an icon, most of the times you know where it is going to be, so you design for a certain size and purpose. Sometimes, I paste a screenshot of the interface into the Illustrator file to see what size would fit into the area I’m designing for. What I’d like to say with this, is that if you know what size you design for, you have a rough idea about the physics of your icon.

When you need half size of an icon which has a 1px outline it is a lot more easier to scale and re-size it in Illustrator. At this point you it’s crucial to have the original editable version because scaling it in Photoshop would make the line-weight half size, so 0.5px.

This doesn’t mean you can’t apply strokes in Photoshop but it only works on simple objects, like buttons or basic shapes. It’s just a lot harder to create real assets for use if you do it that way. If you’re designing for real web use, you need to create real assets, so in our case vector icons and illustrations.

So here scaling means to multiply the drawings by 2x, 3x, 4x etc. because we are designing for different resolutions and shapes that are flexible and they use screens’ physics so it’s in the pixel space.

The Transform Tool will do a perfect job to scale the icons for us.
When you hit ⌘Cmd+T in the toolbar (Fig. 12) set the Reference Point to one of the corners, Lock Aspect Ratio and I usually use Percentage so it’s easy to calculate with.

On the example below (Fig. 13) you can clearly see that the icons are crisp and just after inserting them to Photoshop I can quickly increase the size just by entering the values in the Transform Toolbar. It also shows that I have modified the original icon in Illustrator, so on the third icon the ‘heart’ only cuts out 1px from the TV (in its original size). So when I scale it up in PS, the gap won’t be 3 times of 2px, what would have been way too big for this size.

Conclusion

I hope I could give you a few nice tips for how to start drawing in the Vector Workflow and you may even get some inspiration from the article. My aim is to reveal the importance of using vectors in digital design because creating real assets is a current need. Even when you download SVG icons from popular sites, you can barely find ones that are purely made for screen. It’s substantial just like when choosing fonts for web/screen use. When an icon has been made for screen use in Illustrator, it’s going to be crisp in browsers too as a vector or and exported PNG as well.

I’ve also created a file with my settings and you can also find the shapes
I used in my examples. Download Pixel Artboard CS4+(.zip)

Note: When you download the files please check your settings in Illustrator Preferences ⌘Cmd+K and set it up as written in the Preferences section at the beginning of the article.

Thank you for taking time to read my article and if you have any questions about anything I’ll try my best to reply quickly. Please recommend this article if you like it.☺

Details matter, it’s worth waiting to get it right.
- Steve Jobs