Digital Web Magazine

The web professional's online magazine of choice.

Web Design 101: Photoshop : Comments

By Anton Peck

April 15, 2008

Comments

John Lampard

April 16, 2008 3:12 AM

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 :)

paul

April 16, 2008 8:40 AM

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.

natalia

April 16, 2008 10:17 AM

The Histogram doesn’t have an “obscure purpose”, it’s a very important tool to analyse the color of any digital image :-)

Anton

April 16, 2008 11:17 AM

@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.

Ben

April 16, 2008 11:17 AM

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/

John Barbagallo

April 16, 2008 12:44 PM

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.

Matt Ronchetti

April 16, 2008 1:59 PM

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.

joke dekker

April 17, 2008 3:31 AM

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?

Csongor Fabian

April 17, 2008 8:27 AM

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…

Tor Løvskogen

April 17, 2008 9:35 AM

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..

JY

April 17, 2008 10:58 AM

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.

Anton

April 17, 2008 10:36 PM

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.

Jodi

April 23, 2008 8:13 AM

@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!

Marten

April 29, 2008 2:01 PM

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

Eric J. Gruber

May 5, 2008 7:42 AM

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.

Sorry, comments are closed.

Media Temple

via Ad Packs