Join 3,512 readers in helping fund MetaFilter (Hide)

Tags:

Can I use Photoshop Elements to design web interfaces?
April 10, 2009 5:02 PM   Subscribe

As a tool for designing web interfaces, is Photoshop Elements comparable to regular Adobe Photoshop?

I am not a designer but am looking to get into it. I have read that you can design pages with Photoshop. Well I don't really want to shell out for that, but Elements is cheaper. I just need to know if it is comparable.

For that matter can I design in GIMP?

I do not currently know how to use any Adobe products to speak of.

Offer any other pertininent advice you have :)
posted by zorro astor to Computers & Internet (21 answers total) 7 users marked this as a favorite
 
You can design websites in really anything that has basic drawing tools, so it comes down to how expressive you want your program and how you personally like the application. Photoshop is versatile and powerful, but not necessarily the best tool for everyone designing websites.

To that end, why not just try out the different applications to see if they'll work for you? GIMP is free, of course. But if you create an account on their website, Adobe lets you download trial versions of both Elements and the regular version of Photoshop (or, uh, "Extended," whatever that is). To learn the tools, YouTube is pretty good -- here's an example of a tutorial video (I just searched for "photoshop tutorial beginners").
posted by spiderskull at 5:35 PM on April 10, 2009


10 Free Web-based Alternatives to Photoshop
posted by Blazecock Pileon at 5:55 PM on April 10, 2009 [1 favorite]


I design wireframes (seriously) with Paint (in Windows). Its amazing how on-topic you can keep people when the font size isnt even an issue (which is important when your talking about vague wire frames)

But really -- any tool in the right hands is usable to create web interfaces.
posted by SirStan at 6:02 PM on April 10, 2009 [1 favorite]


All the best web designers I know design websites on paper. Then they either make the graphics as a mechanical final step, or some graphics person does it assembly-line fashion.

So, yes, anything that puts dots on the screen will be fine.
posted by rokusan at 6:35 PM on April 10, 2009


You cannot design web pages with Adobe Photoshop. You can design little bits of pages in Photoshop - like, for example, you change a button so that it looks a little grayer, or you can make that image over there a little smaller - but you can't design whole web pages in Photoshop, at least not practically.

Why? Photoshop is an image editor, and web pages are purposefully not images. That's because of rasterization; everybody's monitor is a little different size, so the pages you design have to be able to load well in a tiny window and a huge window. If the whole page is an image, either (a) it will be impossible to see when it's in a small window or (b) it will be all pixelated and ugly when it's in a big one; and don't even get me started on the awful things that monitors which are wider but just as tall as other monitors do to big web-site-sized images.

Adobe has their own program for designing web pages; it's called Dreamweaver. Its appeal is that it allows you not only to write the code that really makes the page but also manipulate the look of the page directly by viewing a display of it and dragging things around, just like in a paint program. The most important thing to learn is the code, so remember that you can't just rely on looking at it and moving things around; you'll have to sit down and learn html and css well before you can design a good site.

Dreamweaver is okay, but it costs $399, which, for my money, is a ridiculous cost to pay if you just want to learn to design web sites. (I just started learning a few months ago, so I know where you're coming from.) I think the best option you can go for that is similar to Dreamweaver is something called KompoZer.
posted by koeselitz at 6:37 PM on April 10, 2009


You cannot design web pages with Adobe Photoshop

You can do mockups, although Photoshop is probably overkill for that task. I think that's what the asker is after.
posted by Blazecock Pileon at 6:46 PM on April 10, 2009


The best web designer I know (basically, the top designer at an extremely successful web shop) uses Inkscape exclusively, and I've taken to the same thing. It's pretty great. The principles are: Do not:
posted by tmcw at 6:46 PM on April 10, 2009 [4 favorites]


...though, mysteriously, I have created hundreds of pages on dozens of sites based off of Photoshop comps. Many of those >gasp<>
(For actually coding I'd recommend skipping the WYSIWYG tools like Dreamweaver entirely and learning some HTML and CSS.)

On the main question: I generally use Paint .net as my cut price Photoshop alternative (it does most of the things I need) but I occasionally have used Elements (it tends to come free with a lot of things) and it doesn't seem to be lacking any of the things you'd need for website design - most of the missing features seem to be print orientated - but the teletubbies style interface is kind of annoying. I'm sure a fully fedged design could point out lots more deficiencies, but yeah, it sort of works.
posted by Artw at 6:50 PM on April 10, 2009


When you talk about designing, do you mean the ideation, or do you mean the creation?

Photoshop (CS, Elements, whatever) can help you draw what you want a page to look like, in an ideal screen resolution and browser, but it's not going to produce the HTML. Most places I've worked have done their "comps", i.e. their high-fidelity renderings of Web pages, in Photoshop.

Creating Web pages is done with HTML, which is what Dreamweaver produces. That's where you start working out the kinks, and the delta between the comp and how you'll get it to work given various contingencies.

Finally, I haven't figured out how to create a freaking box in Photoshop Elements (downloaded a trial a few days ago), which either means that I'm a little slow, that it has seriously non-intuitive interface design, or that it lacks some major functionality of "regular" Photoshop. Or all of the above. Elements is intended for amateur photographers, who, I guess, don't do a lot of box-making.
posted by chesty_a_arthur at 6:54 PM on April 10, 2009


For what I think you are looking for (creating a basic look & feel for a site) Elements will do ok. Personally, when I get a .psd from a designer I open it in fireworks and fix all the nasty little imprecisions, then start chopping it for graphics. Done properly, the mockup should include everything the HTML author needs to convert it to good CSS, any image editor will do that fine.

Dreamweaver will get a site up, but largely in non-compliant code, I second the recommendation to take a week or two and learn HTML. The basics are not very hard. I've been known to use Dreamweaver to create mockups or OMG WE NEED THIS SITE UP TODAY!!!! temporaries until I can get the *real thing* done.
posted by foxydot at 6:57 PM on April 10, 2009


Yes, you absolutely can use Elements to design web interfaces. I've used it for years for my professional clients (including a few Fortune 500 corporations and national charities) and it's been completely sufficient. You will need to adapt for more complex effects and things, but those restrictions tend to (at least in my case) help simplify the design and eliminate unnecessary complications.

Obviously, as everyone has previously said (and I think you knew) Photoshop (Elements or otherwise) can't do the coding. I personally hand code everything but there are plenty of options there if you don't want to learn XHTML and CSS. I suggest learning though - the control you'll have by hand coding is invaluable.

Not to plug myself or anything, but if you visit my website's portfolio section, all of those listed websites were graphically designed in Photoshop Elements. That will give you a good idea of what's capable, and perhaps help answer your question. Good luck!
posted by cvp at 8:27 PM on April 10, 2009


Well, I do web development but lemme answer you from a different angle. I'm a photographer so I read many Photography magazines. (you know the kind they kill trees for)

I am always impressed by how many people who have work published in the mags use elements. Many well respected Photogs use it over Photoshop.

Moral to the story, don't sell Elements short, it's a good tool.

Footnote: As much as I would LOVE to use the GIMP it is possibly the worst piece of major software written today. Every 6 months I download it again to see if it got any better and every 6 months I want to cry. - One man's opinion - It's horrible.
posted by Jfalways at 8:50 PM on April 10, 2009


You cannot design web pages with Adobe Photoshop

Tell that to every other little web-design-and-marketing shop I encounter. It's like a mantra..."Design a site in Photoshop and supply us with the .psd file" Then, their dev monkey slices it up and slaps it together in their template-du-jour. And thus is the state of web development today for a huge portion of the industry.

As much as I would LOVE to use the GIMP it is possibly the worst piece of major software written today. Every 6 months I download it again to see if it got any better and every 6 months I want to cry. - One man's opinion - It's horrible.

+++
posted by Thorzdad at 7:27 AM on April 11, 2009


Finally, I haven't figured out how to create a freaking box in Photoshop Elements (downloaded a trial a few days ago), which either means that I'm a little slow, that it has seriously non-intuitive interface design, or that it lacks some major functionality of "regular" Photoshop. Or all of the above. Elements is intended for amateur photographers, who, I guess, don't do a lot of box-making.

OK, in the clear, post-coffee light of day I found it. I'm a little embarrassed, but additionally I can't get behind the default to "custom shape" in the shape tool (the symbol is a heart. A heart!! I ask you.)

So it's just my stupidity and the interface that are to blame; the featureset isn't missing the shapes capability.
posted by chesty_a_arthur at 8:16 AM on April 11, 2009


The interface is indeed kind of annoying, and not as far as I can tell any easier or convenient than the upscale version.
posted by Artw at 8:28 AM on April 11, 2009


Do not EVER use Photoshop export to web for ANYTHING

tmcw, can you explain why this is? A quick google reveals nothing. I often use Save For Web for the preview of how an image will look with the compression settings I've picked.
posted by Magnakai at 9:18 AM on April 11, 2009


Scratch that, I just re-googled and found these:

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/ (also, nice header!)
http://www.impulseadventure.com/photo/save-as-save-for-web.html

Still, not quite totally damning, but interesting and informative. I wonder if this still applies to CS4?
posted by Magnakai at 9:23 AM on April 11, 2009


Back with photoshop 7, it came with a tool called imageready which actually allowed you to literally export whole web pages. They got rid of it when they merged with macromedia, and tried to sell some other tool which doesn't even come with the standard "CS" package for designers.

You could do animated gifs with it too, which was pretty sweet. I just googled how to do animated gifs in CS3 (and I assume 4 as well), since I was curious.

Anyway, as far as that guy saying "Don't ever export for web" that's just crazy. Export for web is awesome. You get to see exactly how it will look after compression, what the file size will be, and you can test gif and png compression seperately and get a live preview. As far as the color space issue, well, everyone's monitors are different anyway. The colors will look different for different people no matter what you do.
posted by delmoi at 10:05 AM on April 11, 2009 [1 favorite]


(Oh and I should say, I've never noticed a problem with it)
posted by delmoi at 10:06 AM on April 11, 2009


: Footnote: As much as I would LOVE to use the GIMP it is possibly the worst piece of major software written today. Every 6 months I download it again to see if it got any better and every 6 months I want to cry. - One man's opinion - It's horrible.

I've been using GIMP for about five years now - since version 2.0 came out. I've also been using Photoshop for fifteen years - since the first day I walked into the computer lab at Gunnison High School in 1994 - and I'm pretty damned good at both of them. I've also been using InDesign since version 1. To date, there is not a single thing I've had to do that I couldn't do in GIMP. The only thing I can imagine wanting to do that I can do in Photoshop but not in GIMP is CMYK color manipulation and exporting.

I don't know exactly what you know about "pieces of major software," but I code in Python, and I'm not the greatest programmer in the history of the world, but I know beautiful programs - Photoshop is not one of them. Adobe is grasping, greedy, and most importantly sloppy company that relies for its continued profit on the apparent inability of designers to adapt to different interfaces.

I don't know exactly what you think is "horrible" about the GIMP - you haven't said, actually, which is interesting to me - but I can assure you that I haven't found anything wrong with it. Moreover, it's a monument to the fact that Adobe is behind the curve - with their particularly evil hoarding of proprietary formats and their Microsoft-inspired 'embrace, extend, extinguish' approach, which has rendered formats that should be easily exported and manipulated like the .pdf (not to mention .indd) embarrassingly complex and top-heavy. (I'm not even going to get into the ridiculous amounts of silly and immoral crap they pull with Flash.)

I have a feeling designers are so stuck to Photoshop because they don't like learning, and because they don't really have a sense of what's happened over the last ten years. If they did, they'd remember that Adobe did nothing but take thousands of dollars from them repeatedly while delivering a product that is relatively subpar. The trouble is that there's a 'good old boys' club within the design community of people whose principal skill set is using Photoshop - if there were more people like me who could use both Photoshop and GIMP (and were open to learning new programs) then Photoshop wouldn't have nearly the stranglehold that it does on the industry.
posted by koeselitz at 1:44 PM on April 12, 2009


Adobe has their own program for designing web pages; it's called Dreamweaver.

That's seven kinds of wrong. Dreamweaver is for ASSEMBLING web pages, not designing them.

(Why do people always get drawing a blueprint confused with building a house?)
posted by rokusan at 11:39 PM on April 12, 2009


« Older How does real poker compare to...   |  Jane's mother is racking up en... Newer »
This thread is closed to new comments.