Web Design 101: Photoshop : Comments
April 15, 2008
Comments
Thanks for this. I’m (ha) still working with PhotoShop 5.5! I will need to upgrade sooner or later, and feel as if I’ll need to relearn PhotoShop all over again, so far behind I probably am with it now :)
i wish more designers colour coded their groups/layers and even grouped layers into logical groups. makes it much easier if someone is taking the PSD and turning it into a html template.
The Histogram doesn’t have an “obscure purpose”, it’s a very important tool to analyse the color of any digital image :-)
@natalia, that’s why I was careful to use the word “seem” with obscure purpose. I know it has purpose, and you know it has purpose, but to the beginner (that this article is targeted toward) who has little familiarity with how Photoshop works, the Histogram does little to explain itself in this context.
Like the author said, if you really want to export PNG from Photoshop, you need to “slam” them. Using GammaSlamma. Found here: http://www.shealanforshaw.com/
Great article, Anton! Awesome starting point for developers that don’t really know much about Photoshop and design that want to get their feet wet, fast.
Nice overview! The crappy PNG exporting has been fixed in the CS3 version. Saves the extra work of crushing it in another program after creating.
When you don’t use the slice tool, can you then tell me how do you create the small image pieces you need in a design?
the article is a nice introduction. the part on the layers is abselutly usefull. Are you planning more articles on the subject leading us deeper into photoshop?
I have the same question as Joke Dekker. How do you export webpage elements separately if you don’t use the slice tool?
I used to work with Fireworks for a long-long time. It’s much better than Photoshop for webpage planning (handling dimensions of objects is much more easier, slice tool is much more precise). I’m affraid that Adobe won’t improve Fireworks (there is hardly no difference between Macromedia Fireworks and Adobe Fireworks), because there are many overlapping areas in Photoshop and Fireworks (photoshop does not need too much improvement to be as good as fireworks for web developers).
That’s why I try to use only Illustrator & Photoshop for website design, but I can’t imagine how you export image elements for web without slices…
Joke & Csongor: You just flatten your layers, and use the Marquee (M)-tool to grab out bits of the design.
I have a Photoshop related question: Can I adjust the numbers of levels I can group layers? Seem to stop at 6 or 7..
ImageReady’s slicing tool isn’t too bad.
Also, why making a distinction between “Adobe” and “Fireworks?” Fireworks has been an Adobe product for a while now since Abobe bought Macromedia.
for people interested in learning photoshop:
http://psdtuts.com/
http://www.smashingmagazine.com/
have great resources.
I can see the confusion over slices, and was tempted to go into it in greater detail while I was writing, but I didn’t want to turn this high-level overview into a lesson about workflow (I’ll save that for future articles).
Essentially (and I’ll summarize the best I can in just a comment), I feel that slicing is a bit reminiscent of the days when tables ruled the net, and images were carefully stacked inline, like a version of Tetris. I tend to think of images more now as graphics stacked behind various objects, and use them in ways that slicing just can’t quite accomplish (to an old-school guy like me at least). With slices, it becomes too easy to create sites that are very rigid in design, that don’t allow for much flexibility, growth-options, or even liquid layouts.
Granted, if you’ve got a system that already uses slices and somehow it works for you, then great – go for it!
@JY True enough, but it was written with the intent that Adobe hasn’t altered or been able to match what Macromedia had already developed in regard to those features.
@Anton Can you provide an example of how Fireworks’ slicing tool improves your workflow? In my projects I spend a lot of time turning on/off layers/groups, cropping/undoing for small backgrounds that repeat, and rearranging my files when I forget that Photoshop puts them in a new “images” folder, giving my the structure images/images/file.jpg (so annoying!) Is Fireworks better in any of these areas? Thanks!
One could add comments en masse about the subject of the article, which by the way is a very nice introduction. Personally I find working with layer sets very helpful when it comes to organizing and coping with large numbers of layers. Simply link related layers and choose Layers > New > New layer set from linked, then name the layer set aptly and vôila you are one step closer to geting a grip of your layers!
/ Mårten
I couldn’t agree more with the comment of obscure naming systems.
Giving clear names to each and every single layer you have in Photoshop is an excellent habit to have. I’ve found this out the hard way and wasted a lot of time with poor naming choices (never again).
Not only is good layer naming essential the larger your project becomes, it also greatly helps the next person who might end up working on your document.
You can use this
feed to keep up with the comments made on this article.