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.
………………………………………………………………………………………..
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.
3. Apply effect or layer style.
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.
2. Select which document you want to duplicate them to.
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.
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.
………………………………………………………………………………………..
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.
RSS feed
I actually started with Photoshop first and I dabbled in Illustrator for a bit. I still like Photoshop more, although I will take the time to learn Illustrator a bit more in the future.
I’m with Paul, I got into graphic design through Photoshop and went from there. I’ve tried to get into Illustrator many times but I’m not really a fan. I think that might be because I’m not an illustrator though!
When it comes to web design, you should try Fireworks. While it lacks a lot of intricate photoshop filters, most of the basic stuff you use in photoshop such as gaussian blurs, layer blending, even alpha gradients are all in Fireworks as well, with the aded advantage that tis optmised for web design, with the ease of use of Illustrator.
If AI and PS ever had a child, FW would be it. Give it a try, youll never go back.
Nice Tips…
I use both apps for different things, but I’m convinced Photoshop is the right tool for this job. I’ve worked with many designers who’ve insisted on working in Illustrator and leaving the transition to Photoshop up to me. We’ve had every problem in the book: incorrect scaling, poor interpolation of hairlines, and on and on.
I think that using Illustrator for web design somehow adds a degree of separation between the layout’s scale and composition and the real-world result as viewed from a browser.
So I agree.
I prefer photoshop for the web, being in itself a bitmap software you tend to get a much crispier look and feel on your graphics, also i find it more precise when it comes to slicing and pixel measurements, but then when it comes to designing icon i think nothing beats Ai
Great site, thanks for the tips
+1 for Fireworks
Definitely PS. Importing form Illustrator edges of eg full color areas are anti-aliased what really can be tricky to adjust.
Ultimately it is a matter of personal preference. Ask yourself: ‘Which app am I more efficient in?’, ‘Which app do I want to become more proficient in?’ or ‘Which app is more conducive to realizing my creative/design vision?’