I'm confused about the relationship of Photoshop (and any other image processing software) in web designing. I can see countless tutorials anywhere teaching on how to make web layouts from scratch, and most of them include the whole contents of a real web page. But it stops there. No further instructions are included on how to implement the designs as a real web page/site (aside from those slice-n-dice approach which I know that you treat as a thing of the past.)
I'm sure my question isn't open-ended since I will list more definite questions here.
My assumptions are:
- Photoshop is intended to be only used for logos, banners, etc. to be export exactly to web pages.
- Creating web layouts using Photoshop is used only as a mock-up of the real site (only a guide?)
- After finishing constructing it, you should implement the design by hand-coding them using CSS, HTML, etc.
If all of my assumptions are correct, my most important questions are:
Why are people fond of creating web layouts using Ps if they cannot build it into a real site (I'm referring to those who can't code.)? I can see that their designs are too detailed that it would seem impossible to make it using tools/frameworks like Twitter Bootstrap and JQuery UI (afaik).
PS:(Post Scriptum not the other one) I am originally a student of programming and have no idea about how you do web graphics design. Also, I don't want to argue about using Illustrator or Frameworks(phased out by Adobe) instead.
Answer
Anymore, Photoshop, Illustrator, et. al. are used for supporting web assets and not for full page/site mock ups.
Yes, there are some people who still build entire page mockup using Photoshop. And in reality if a site is very custom-image based then it may be necessary. But there's traditionally no slicing taking place anymore.
There are also developers who do not want designers doing any coding whatsoever. So they merely want a layered file so they can deconstruct it and build the code themselves. I do occasionally run into these types of developers, but they are becoming more rare in my work.
There's really no blanket answer for your question. In the end, it depends upon specific people and their desired workflow. All I can tell you is how I use image editing apps now compared to 10 years ago.
There was a time when one would build an entire page in Photoshop, slice it up, then export the slices in order to reconstruct them in HTML. This was before CSS2 (and especially CSS3) was widely supported. At that time, it was almost mandatory to do things this way because you often needed a gradient, a round corner, or a small shadow which could not easily be created otherwise. Before CSS2 was supported ANYTHING other than standard borders and background colors required an image, often a repeating image tile. There was simply no way to code a round corner without using images for the corners, same held true with gradients an shadows. If you look at web sites today, note how many gradients shadows and round corners are used. Those would have had to all be images 10 years ago.
Today, much of what used to be an image or slice can be handled via CSS. I no longer need round corners, gradients, or shadows for anything. Therefore I don't need to slice up a page to generate those tiny assets. I only need image editing software to create things which either can not be created via CSS such as logos, patterns, photographs, thumbnails, etc. or for assets which shouldn't feasibly be created with CSS in order to ensure proper display across browsers - things like some buttons or special image effects.
In reality there's very little one can't create with CSS3 anymore. The only hurdle becomes fallback for older browsers or actual photos/artwork. Images may still be required to support older browsers (mostly IE) but often you can allow CSS to degrade to a workable state.
10 years ago a web site design started with pen and paper for sketching ideas, moved to Photoshop/Illustrator for comps. Then stayed with Photohop/Illustrator for complete design approval, then moved to construction to mimic the image layout.
Today, my web site designs start with pen and paper for sketching, then move straight to HTML/CSS mock ups. I open logos or images in the appropriate app and export/save for web and apply the image to the HTML/CSS mockup. I will, at times, create patterns and some specific page areas in an image editing app merely to test some variations side by side. But these are more for my design exploration than actual construction. Mocking up directly in code offers many advantages. Text is live HTML text no more clients with the "That text looks different than the design I approved" comments. Color variations can be created in seconds with well constructed CSS. Layout alterations take minutes compared to hours if going back to Photoshop, editing, then regenerating slices and code.
Image editing software has shifted from being a building tool to a supporting tool merely due to the advances in the markup languages - primarily with Cascading Style Sheets and browser support for them. HTML is still HTML in general. jQuery et. al. has added interactivity, but not really altered layout. It's CSS which has come a long, long, way and reduced the need for full image mock ups.
And for the record, I tend to jump to Illustrator first for assets. Then may use Photoshop if needed or for actual photographs.
No comments:
Post a Comment