Design Guidelines for Agencies, Part 2: What's So Great About Photoshop?
August 4, 2008 at 4:58 PM
by JustinNewfangled works with many advertising and marketing agencies and we love to provide their clients with well-designed, highly-functional web sites. However, some of the art files we receive from agencies are less than optimal for our purposes. Photoshop is Newfangled's standard for creating web page layouts but we've received layouts in many formats including PDFs, Microsoft Word documents, Illustrator files and even PowerPoint slides.
One of the key reasons we create layouts in Photoshop is the ability to build a 1:1 representation of what the final page will look like in a browser, right down to the individual pixels. The difficulty in translating a file from any other program is that it requires practically rebuilding the layout from scratch in Photoshop, using the provided file as a rough guide.
Adobe Illustrator is a great program for building precise, vector-based artwork but it comes up short as a tool for building web pages. The issue lies in importing an AI file into Photoshop and how differently the two programs render artwork. Illustrator is a vector-based program and Photoshop is a bitmap-based (or raster-based) program. If you open an AI file in Photoshop, Photoshop attempts to translate the vector artwork into a bitmap image. This rasterization creates blurred lines along horizontal and vertical edges which can make slicing up the layout accurately for web application difficult, if not impossible.
We encourage our agency partners to provide us with layered Photoshop files whenever possible. This is not because we're a bunch of whiny prima donnas, but because Photoshop provides the best platform for creating accurate web page layouts and the results save time and money for us, for our agency partners and for the agency's client.
Note: This post is a reworking of an October 2007 article in
which I recommended a solution for sucessfully importing Illustrator
files into Photoshop for the purposes of web page layout. After further
research, I discovered the solution is incomplete and not adequate for
Newfangled standards.
Next time: How to Set Up a Photoshop File for Web Design
That is great advice. Do you have advice when saving Illustrator artwork to be viewed on a webpage? Should it be brought into Photoshop or just saved out from Illustrator?
Thanks!
@kate,
I don't recommend building a web page layout in Illustrator since there is no precise way to translate a vector format to a bitmap format. This doesn't mean you can't create page elements in Illustrator and import them into Photoshop but keep in mind there will be some mathematical 'fudging' done by Photoshop and you may lose clean edges or straight lines.
Hi Justin,I agree that Photoshop is a great tool for layout design but both apps have their strengths and weaknesses.The secret of creating good layouts in Illustrator is to properly set up your workspace. There is absolutely no need of transferring your Illustrator files into Photoshop.First of all: to avoid blurred edges you could create a 1px grid and set View -> Snap to Grid. From now on your objects will end exactly on pixel edges, so no Anti-Aliasing should occur on vertical or horizontal lines. Also make sure your buttons, rectangular objects etc have full pixel width/height values (i.e. 960 px wide, not 960.877px wide).Another important step: View -> Pixel Preview should be on while working on website layouts. As we are targeting for pixel output it's easier to spot mispositioning.And finally: File -> Save For Web & Devices works well, why would you transfer Illustrator file into Photoshop just to convert it to jpeg/png?All I'm trying to say is that while sticking to those few rules you can create good looking websites in Illustrator as well.
@Slawek,
Thanks for the insight on Illustrator; I'll have to try out your suggestions. One of the things that would be challenging about using Illustrator to create layouts here at Newfangled is that no one person is responsible for both the backend and front end of our sites. I turn over the Photoshop files of an approved design to a developer who applies the design to the backend. We've found that Photoshop allows us to quickly and efficiently slice up the design for application.
However, Illustrator is certainly a great tool. I especially like the ability to place a piece of vector art in Photoshop as a smart object and edit/update the original vector in real time via Illustrator.
Hi.I recently got an F in a Digital Design subject, because I "didn't show that I had the required capabilities in using Adobe Illustrator". This because I exported my Illustrator work to Photoshop, digitally texture painted it there, and then exported to PDF with layers in tact. When she went to open the file in Illustrator, it wasn't readable by Illustrator, and she couldn't see the vector work. I made it abundantly clear to her that this would happen, but she still wanted the PDF format, and I was not allowed to submit the actual image files.She provided no instructions about how to properly use PDF exporting so that the files are viewable in Illustrator, she didn't allow me the ability to hand in a .ai or .eps files and lastly, she didn't make it clear that she had to have the ability to go in later, and see be able to edit my illustrations with vector graphics.Do I have a case in complaining to the school that I was misled, and that her verbal instructions to "Use PDF for hand-in" would not be the best fit for her to later edit? I feel really up against the wall about this because I simply wanted to show that I excel in illustrating and digital painting, but because of simple, formal errors, she failed me.As I see it, most artists who create an object in Illustrator (in this case a fish), would then export to Photoshop and digitally paint it, then export to the viewable format. If the vector graphics are lost along the way, that is irrelevant because the end product is an image to be viewed, not scaled and/or edited.Thank you for all the information aboutIllustrator-Photoshop-PDF conversion, and what happens in the process, and what would be the optimal way to do this.
@Jackson,
Without having been part of your class it would be difficult (and unfair) for me to say who is in the right in this situation. However, if you've done the required work and feel confident about it, you should appeal your case to the department head or whomever has the authority to do something about it. Just remember, a cool head and kind words will get you farther than losing your composure. Good luck.