Adobe Photoshop VS Illustrator // when designing for the web

Disclaimer: I have a feeling this is a bit of a touchy subject, so let me start by saying they’re both Adobe programs, use the tool that works for you.

I come from a print background and so when I entered into the web design world, I thought Illustrator was the King of all programs. Seriously, I probably couldn’t have sold it better had I been hired by Adobe to do so. Yes, it was almost fanatical, possibly a tad overkill – either way, I loved Adobe Illustrator.

Back in the day, when I was first learning how to design for the web, equipped with all my know-it-all print design knowledge, I was adamant on doing all my designs in Illustrator. Sure I knew that I’d eventually have to slice everything up in Photoshop (Illustrator does have a Save for web feature, it’s nowhere near as easy to use as Photoshops), but if it meant I could use Illustrator, I was willing to take on extra work to transfer it over. One word to sum that up… ridiculous!

Basically, long story short, when it comes to web design, Photoshop can do almost everything that Illustrator can do, and more. It just takes an annoying – but crucial – learning curve to get familiar with it.

Here are my favorite “Photoshop is just as good, if not better…” features:

Shapes
The great thing about Photoshop shapes is that they are vectors, the same as Illustrator. The reason this is great is that you can resize vectors anytime you need to without compromising quality. This might seem a bit self-explanatory, but I can’t tell you the number of times I got stuck with a pixel-based shape that I then needed to redraw because I needed it bigger.

shape

………………………………………………………………………………………..

Smart Objects
Smart objects are fantastic! They are one of the best examples of Adobe striving to enable you to make non-destructive artwork (artwork that you can always go back and tweak). Once it’s been converted, any effect you apply to it (i.e. Gaussian Blur) will now be applied in a way that can fully edited at a later time.

Directions
1. Select all the layers (while holding down the Alt/Option key for multiple layers) that you want to create a smart object with.

2. Right-click and select Convert to Smart Object.

smart-object-01

3. Apply effect or layer style.

smart-object-02

4. Now you can go back in to the effect and edit it later

 

………………………………………………………………………………………..

Duplicate
Duplicate is a great way to duplicate layers without using copy and paste. The benefit of using this command is that your layers will be duplicated in exactly the same position and size as the originals. This is a useful feature to use when designing your extensions (webpages other than the home page).

Directions
1. Highlight the layers that you want to copy and right-click on them, choosing Duplicate.

duplicate-01

2. Select which document you want to duplicate them to.

duplicate-02

3. Go to your new document and see the duplicated group and layers.

………………………………………………………………………………………..

Layer comps
Another way Adobe has made our lives easier is by creating Layer Comps. Basically, it’s like a built-in layer display memory device. The benefit of this feature is that you can essentially have a whole web design contained within 1 Photoshop file. Make sure to always back-up your files.

Directions
1. Display the layers that you want to be visible and hide the ones that are for other pages.

2. Find your Layer Comps palette under the Window menu.

3. Click on the Create New Comp Layer button on the bottom of the palette, and give it a name.

layer-comp-01

It then stores all the information that is visible at that moment into the Layer Comp. You
have as many Layer Comps in a file as you need.

4. Whenever you have changes to make to a page, you just need to remember to click the Update Layer Comp icon to save the changes.

layer-comp-02

………………………………………………………………………………………..

Ok, now that the Photoshop lovefest is over I do want to give some Illustrator props. As an illustrator I find it to be an invaluable tool that I really couldn’t live without. And truly, to bring it back to web design, the best arsenal of web weaponry that you could have is a combination of both.