Vector Design Workflow Between Photoshop and Illustrator

Have you ever had daydreams about finding the perfect procedure for designing interfaces? Well if so you might have a slight addiction to work so that’s something to keep in mind. But I’m here to say that your workflow can be improved if you cut down on the daydreaming and get more into daydoing. Now you may ask what exactly should be done differently?

The adjustments center around task management and a willingness to assign specific duties to the most efficient tool. For example the pen tool has become a staple amongst digital artists, along with the various shape tools for creating pre-defined objects. But there is quite a difference between Photoshop and Illustrator when it comes to vector creation for design mockups.

In this guide I want to share a process that explains how you might approach designing interfaces and the reasons for doing so. Designers often vary their workflow between web and mobile layouts. Over time you’ll learn how to discern which program best fits the task at hand. Eventually it will become second nature but at first you’ll need steady practice and a bit of curiosity before the process can evolve into a natural cycle.

The Photoshop Pen Tool

Although it carries a somewhat misleading name, the pen tool offers much more functionality than just a digital ink pen. This allows you to create vector-based graphics using anchor points to adjust line segments. Basically the pen tool is Photoshop’s greatest choice for vector-based design work.

But it can also be used to create a selection around pixels. Perfect strategy if you have a photo where you want to remove the background from something(or someone) and leave a transparent image. This process is often called “rendering” and works best on larger photographs. Also consider being able to remove the background from one of your own scanned drawings or from a magazine page.

What does this have to do with vector workflow? Well most designers would probably agree that Illustrator is the best program for building custom vectors. If I disagreed I might have to check myself into an asylum. But that doesn’t imply a dark stormy sky of uselessness in regards to Photoshop. You just need to know which tasks are most useful in PS versus AI.

Typically any pixel-based rendering should always be done in Photoshop. If you’re re-creating a pixel image into vector art then stick to Illustrator. But also consider the Photoshop pen tool is very similar to Illustrator, so if you learn one it’s easier to learn the other. If you don’t like switching between programs try designing a few icons with Photoshop for your next UI mockup – just see how it feels and try to find your own balanced workflow.

Exporting Vector Shapes

A tough concept to learn is how to move your vector design from Illustrator into Photoshop. One solution is to use File > Export and save the document as a PSD. Then your vector will appear as shape layers in Photoshop – easy to edit and change into a raster object if needed. This is also the best solution to retain layer information without importing one large shape.

Alternatively you can save the vector as a regular .ai file then in Photoshop use File > Place. The import menu offers a choice between a smart object(vector) or a pixel rendering. I would recommend keeping the smart object layer and duplicating it to create a new pixel-based layer. This way you can always go back to Illustrator and update or change things.

40 Awesome Illustrator Tutorials

If there was any specific workflow that I could recommend it would be creating your complex vectors in Illustrator and organizing them with Photoshop. It’s actually quite interesting because even if you design an Illustrator vector and copy/paste into a Photoshop document, you can double-click the smart object icon to edit the item using Illustrator. But drawing a PS shape(like rounded rectangle) then converting to smart object will only let you edit the object using Photoshop in a PSB file.

So there are major benefits to using Illustrator-based smart objects compared to only Photoshop shapes. I’d say the toughest part is getting familiar with the process and learning how to use both pieces of software.

Photoshop Layer Effects

The various layer effects seem to resonate like a more adult version of Kid Pix. And just like when I used to draw goofy shapes on those library computers in 5th grade, I continue to struggle with the intensity of layer effects in big-boy Photoshop. There are so many different options and so many FX to choose from. With practice these techniques become ingrained into your memory but there is always more to learn.

Learn Photoshop FX: Detailed Printer Icon Tutorial

The good news is that layer effects are not permanent and very easy to change without any repercussions. The totally freakin’ awesome news is that layer effects can also be applied to both smart object layers and pixel-based layers. I should mention that Illustrator can apply similar effects from the Effect menu at the top.

However I’d recommend organizing most these effects together in Photoshop only because it makes the editing process easier. If you have some vectors using effects from Illustrator then it requires re-opening the software to edit those graphics within Illustrator(gradients, shadows, bevel & emboss). Completely depends if the effect you need can be replicated in Photoshop, but generally it’s best to organize all your editable effects into a single program.

The Process of Design Mockups

The primary focus of this article is on website and user interface design with Adobe software. Photoshop and Illustrator are like the Tweedledee and Tweedledum of digital design work. I guess that makes Dreamweaver like the smoking caterpillar or something…

In any case the job of a UI designer is to create a beautiful world that keeps people mesmerized by the Internet looking glass. Get visitors interested and bizarrely fascinated with each layout. The buttons, web copy, icons, and colors should leave people curiouser and curiouser about your digital wonderland.

It doesn’t matter how this goal is accomplished – but the most resourceful work regimen would use the right tools for the job. Illustrator is by far your best friend when it comes to icons and even scalable logos. Any graphics that require a lot of curvy lines or complicated shapes would best be served in Vector Land(patent pending).

However pixel-dominated Photoshop can be useful when it comes to simpler vector shapes. Unfortunately most PS tools are just vectorally-challenged. So what is the best reason to use Photoshop? Well basically everything outside of Illustrator! Pixels are used in the final result when building mobile apps and websites. The rulers and guides in Photoshop can help you plan full mockups in a precise coordinated manner.

Also remember that the Photoshop shape tools are perfect for creating page elements. Tables, rectangular headers, rounded buttons, circular labels, and other similar items. Photoshop has its place within the vector workflow but it’s typically used for more common interface elements.

Try to learn both programs and get comfortable with moving from initial idea to completion. This process really is about the end result. And yes sometimes the journey can be more fun than the destination. But if the destination is a finished project and some money I’d be ecstatic – where’s that destination located and which cruise liner can take me there? A smart strategy with delegated workflow is always the quickest and most effective way to complete projects and get a sense of satisfaction from your design.

Some excellent tutorials for web designers:

30 Photoshop & Illustrator Tutorials for Web Designers