8

What should I use to design websites, Photoshop or Illustrator?

Is there a correct software or is it more a personal choice?

  • What is your content going to be? – SaturnsEye Sep 12 '14 at 9:37
  • That is indeed an opinion-based question. There's lots of software to design a website. Ai, Ps, Dreamweaver, directly in the browser. Each have their fans and detractors. – Vincent Sep 12 '14 at 9:38
  • 1
    Also, be aware that there's many other options than Illustrator and Photoshop – spiral Sep 12 '14 at 9:51
  • @SaturnsEye I am learning and i am trying to choose a tool. – Giannis Sep 12 '14 at 9:58
  • 1
    @SaturnsEye The structure, layout – Giannis Sep 12 '14 at 10:05
7

I disagree with Anaksunaman's answer in regards to Photoshop. The other day we had a similar question that I answered (Organizing PSDs for developers) where I mentioned that in this evolving era, we as designers and coders must evolve with the workflow and using Photoshop is archaic and serves no purpose anymore in web design as an EFFECTIVE means of development. Its still a great tool for photo manipulation but using it to implement a website design is pointless, to me.

I will recommend (reference: What are the steps in designing a website?) that a better approach can be achieved with Illustrator especially with using artboards. Although, I'm not referring to designing the entire site in Illustrator Im talking about the wireframe and mockup. You should still design in the browser but if you design any icons they can be completed in Illustrator and exported. If you are going to be developing branding or anything print related I would surely hope that the logo you developed is in vector shape and that vector shape can be saved as an SVG for a scalable image in responsive web design. So a simple mockup or anything icon related can be exported out as SVG code and included in a XHTML document (reference: I made a map in AI, but the file size is HUGE as an svg?)

On the topic of coding I believe that Dreamweaver is pointless and wasted money and if you ask around at a few web development companies that I've talked to they chuckle at Dreamweaver. Its ok for new users but people that I have worked with that started using Dreamweaver relied heavily on the design preview area instead of working on the code and code completion is a bad habit for a new coder to rely on. You wont remember how to properly code if you always use code completion starting out. There are some great and powerful code editors that are free such as Notepad++, Text Wrangler (I prefer BBEDit which is paid) and Sublime Text.

So a recap to your question "Web design what to use Photoshop or Illustrator?": Both, image manipulation use Photoshop and Illustrator for logo, mockup, wire-framing, icons and anything that can be executed as a SVG. After your mockup is completed I would work in a code editor and develop the rest of your site.

  • 1
    Would it it appease you if I told you I did large portions of my work in GIMP, Inkscape and Notepad++? :-P – Anaksunaman Sep 13 '14 at 3:45
  • I don't even use Gimp or Photoshop much anymore.. I've found if I have to edit images I just use ImageMagick and work paid for Adobe =) – DᴀʀᴛʜVᴀᴅᴇʀ Sep 13 '14 at 3:46
4

photoshop or illustrator ?

Yes. And also likely

  • paper
  • pencils
  • wireframing tools
  • javascript
  • html
  • css

In other words, you have a toolbox, and you will use the right tool for the particular task at hand.

  • 1
    The bottom line of your answer is correct, but I didn't really learn anything from reading it. Some concrete examples (like in Darth_Vader's answer) would be useful. – Stijn Sep 16 '15 at 19:16
3

Unfortunately, I would argue that this is not a binary question since any graphics program can output content to be used on a web site. So, in that regard, it is much more of a personal choice.

That said, if you aren't doing any sort of immediate coding (just mock-ups and exporting elements to use, etc.) Photoshop is by far the most widely used product. Clients may want or expect that you use this product and similarly, third parties that deliver to you (such as if you outsource logo work) may deliver their finished products to you in .psd format. Thus having a copy of Photoshop is highly recommended regardless of what you choose to do day-to-day.

For your own work, features between Illustrator and Photoshop are similar enough, you certainly can adapt Illustrator to produce front-end web designs (the graphical portions). A simple Google search turned up this result for some basic settings for CS5 that would help web designers. Remember that Illustrator is aimed more squarely at vector-based images and print, so may require a little thinking outside the box if used for web design.

Adobe Dreamweaver comes in second behind Photoshop on the almost must-have list, likely, at least if you will be doing any coding with your design. For entry level work with code (and some proprietary hassles) Adobe Muse is a sort-of alternative to Dreamweaver. There are of course plenty of other fine products that do similar stuff, but again, popularity picks Dreamweaver.

Alternatively, there are handfuls of good free code editors such as MS Visual Studio Express, Komodo and Notepad++ (and you can even use MarkdownPad for some basic content work.) What you lose by not using Dreamweaver is WYSIWYG, mostly, since other products have code completion, etc. But if you really want WYSIWYG sans Dreamweaver, there are other products as well.

If you want a non-vector, raster alternative to Illustrator that isn't Photoshop, you can likely use Corel products if you wish or the open-source Gnu Image Manipulation Program (GIMP). The GIMP has the advantage (like the alternative code editors I mentioned) of being free.

Any good tools you use should (will) likely have some sort of a "slice" option for exporting final elements from your mock-up (assuming these aren't already sorted out and saved separately). Other than that, there is very little in the way of "must have" features in my opinion except in the name of convenience.

To be honest, you literally could do all your web design with MS Paint and Notepad if you were versed enough...

2

You can use both for Web design depends upon your choice but when it comes to deliver web designs/wire frames early then Illustrator is a lot quicker and easier to use for this task.

1

I also like fireworks for website design. Interesting post -http://boagworld.com/design/fireworks-vs-photoshop/

  • Fireworks has been discontinued and is no longer available. – Scott Sep 12 '14 at 15:28
  • And yet its a tool that many of us still use. – spiral Sep 12 '14 at 17:43
0

For me Illustrator hands down but you can do almost anything you want with Photoshop and if you can't afford the full creative cloud package then I recommend you try to find enough money for Photoshop CC.

If you can afford the creative cloud then i recommend the following:

  1. Adobe Muse CC for Wire framing and layout design
  2. Adobe illustrator CC for icons, logos and any other illustrations
  3. Adobe Photoshop CC for manipulating and editing photos

Adobe muse is where all the magic happens. It was built by some of the people who built InDesign and its been designed so print designers can publish websites live on the web without writing a single line of code.

Mock ups no longer have to be in pdf format, instead you can create a responsive design that the client can really get a feel for how it works in the real world. But if you do still want to create pdf presentations as well, then I suggest you download the Awesome screenshot chrome extension because you can't export pdf of png files from muse; well not that I know of anyway?

I also recommend that you eventually code the website yourself and don't leave it all just to muse as you will create a better built site in the long run.

I also want to mention that a lot of web designers don't even use design software, they simply just design right in the browser, right from the start.

protected by DᴀʀᴛʜVᴀᴅᴇʀ Mar 3 '16 at 16:38

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.