Designing for web?
- Started
- Last post
- 24 Responses
- djhiro
I am not usually a web designer, but am working on a new site for a client.
I am used to Illustrator and InDesign, designing in Photoshop is foreign to me and much harder. It's easier to play around with shapes and adjust type when it's vector.
Do you all start in PS and do everything in the program?
- VectorMasked0
90% of what I do is in photoshop. I use Illy when doing icons, graphics, buttons (depending on the style) and need to import them as smart objects for later editing.
To me it's just weird working in only illy. Feels limiting. it's even more weird how a couple of colleagues do absolutely everything in fireworks.
- uan0
illustrator is a good idea...lots of designers use it, because you can use svg (vectors) online to avoid the problems with retina oder other high pixel density screens. you can also use indesign, that's totally ok too. the problem here is the developers, some can handle it, but lots of them are used to work from photoshop, so it's a good idea to contact the dev and ask what's ok and what not.
if you use photoshop try to work at 2x the resolution so you can output higher res versions of images for retina and co.
- prophetone0
as vm noted, anything that can be vector brewed in ai and pasted into ps as a smart object. all else in ps.
- Hombre_Lobo0
I used to use photoshop for web design, but found it kinda clunky in how you feel tethered to the layers panel.
I prefer the illustrator way of being able to directly select objects easily. Sure you can auto select in photoshop but it's not very well thought out.
The tool I use now which is by far and away the best web design tool I've found is Fireworks. It's brilliant. Has the joy of not having to use the layers panel like illustrator, but geared way more for interface design.Everything is vectors, file size is tiny, you can have multiple pages in one document, you can have states of a page.
It has a brilliant symbol library akin to flash's symbol library. illustrator has a symbol library as does photoshop (ps also has smart objects which work in a similar way), but the implementation in AI and PS is less seamless.
You make a rounded edge rectangle in photoshop or illustrator, you have fanny about with vector points when resizing it, not in fireworks.
When you change type alignment it doesn't throw it around like PS and AI do... Go knows why they do, it can't be hard to keep the text where it is.
As a bonus fireworks has had in built prototyping since before 2006, so I can send prototype user journey examples with clickable links to clients. Or interactive wireframes in early stages.
It's not surprising though, photoshop was made for photo editing, illustrator was made for vector illustrations and fireworks was made for creating interfaces.
However fireworks has its limitations, it's gradient fill tools aren't the best. it's free hand vector tools arent quite up to illustrator standard. But for any limitations it has, it has 10x more positives than outweigh other program's.
It's a a shame adobe are no longer continuing support for it.
More info on why fireworks is great for web design -
http://www.reinegger.net/50_reas…- Why isn't auto-select in PS not well thought-out?iCanHazQBN
- Fireworks = save oftenmonNom
- Fireworks isn't being updated in CC anymore... I would not recommend learning it if you're starting out.zarkonite
- ukit20
Illustrator gives you more fine-tuned control but it's not such a great idea to go directly from Illustrator to exporting images for the web.
Best way might be to start in Illustrator and create grids, type, layout elements, etc. Then export as PSD with layers and open in Photoshop to add finishing touches and/or slice up images if you are doing that part.
- doesnotexist0
there are a lot of benefits to using illustrator web. two big ones for me are 1) it presents better because it's vector and 2) you can see every page at a glance from a bird's eye view
- I do like the huge canvas of illustrator, I find it's very helpful in iterative logo design development.Hombre_Lobo
- fadein110
bet the clients over the moon about a non web designer working on his site
- microkorg0
^ i work the same way as ukit2
- ernexbcn0
Fireworks was supposed to be the tool for this stuff, but it got nuked.
I'm hearing great things about Sketch:
- whhipp0
Wow, not sure if I understand these comments from "experienced designers"...
Photoshop has had the ability to create vector objects for a long time now. This argument, that PS doesn't do vector is so ancient I question anyones real knowledge of PS when I hear it—you all sound a bit out of touch, maybe too old to know it has changed.
Also, there are some settings in the top left of the tool bar that, if set correctly, basically sets you free of the layers window–you can just click and select any object on the screen just as you would in Illustrator.
Now both have their strengths and is a personal choice on which way you feel comfortable. Like some have stated, Illy's Artboards are nice if you know how to manage them, but Illustrator file sizes get ridiculous if you have any sort of raster imagery embedded. I like Photoshop's preciseness and dependable pixel placement/nudging without wondering if the settings are set to nudge 1px and the ability to manipulate photos and vector shapes in one place is ideal.
- http://37.media.tumb…prophetone
- Just because something 'can' do something, doesn't mean it's any good. Experience tells you this, young whhippersnapper.detritus
- PS is so sloooow. I can change the entire design in Ill in minutes, no degradation of ANYTHINGformed
- I use both almost daily, but Ill is just so much more efficient (for me)formed
- djhiro0
You who use Illustrator or Fireworks to design in web, do you convert to .psd afterward to send to developers, or do you send them a .pdf with pixel measurements?
- AI and PDF filesformed
- As someone who has done both, I'd much prefer a PSD. Easier to work with. But everyone is going to have a different opinion/ way of working.ukit2
- different opinion and way of working.ukit2
- Ask your developers, ultimately they're the ones who dictate the requirements for deliverables.zarkonite
- doesnotexist0
^ a good developer can work with AI files. it's not really a slice & dice game anymore, so these elements are made from scratch with css mostly.
also, symbol libraries are great in illustrator. symbols within symbols for stuff like navigation. kind of hard to do that in photoshop.
- 1st point - not always and still harder to get elements outfadein11
- monNom0
Illustrator multi artboards are great for planning and content organization, but for the final product, I tend to rebuild in psd, as the results are so much richer and allow for more detail than illustrator (which gets pissy if it's dealing with too many objects, and sometimes won't reopen a preciously saved complex file...that's fun).
- animatedgif0
Fireworks user here, still.
I love using it and all the devs I've worked with any introduced to it love it too.
Fuck Adobe, never pay them a cent again.
Their disgusting lack of support for even even basic bugs in year old software, their horrible practice of outsourcing most of development to the 3rd world resulting in barely functioning features (Flash "new" motion timeline anyone?) and saving tonnes of basic features for the CC release just to make it "essential" to people is awful.
Do you really want to be paying Adobe tax for the rest of your professional career? You really think it's going to stay at that price forever? Is it fuck, once the majority have been on CC for a year the price hikes will start and what will you do then.
- CS6 has it.cannada
- CC ships with FW CS6 still actually, but it has been "sunsetted"animatedgif
- ESKEMA0
just make sure everything is on pixel measures. The most common error from people doing web without experience is having everything placed in X 45.66 Y 235.567 with sizes 48.88884px.
Please, check your measures and placements, you can't just eyeball and be done with it.- might be common, but rarely means anything. just round to the nearest decimal.doesnotexist
- ohhhhhsnap0
FUUUCK ADOBE
- Gnash0
There is an element of a monopoly that disturbs me about adobe, but the use of their software is not that expensive considering the fact that it's how I make my living. Have you seen what a doctor pays in insurance? we have it easy.
- animatedgif0
"There is an element of a monopoly that disturbs me about adobe"
How do you think anyone who used Flash and Fireworks on a daily basis feels?
Dropped as if they were nothing, because Adobe doesn't understand OR CARE about their customers. (not that flash was good, but they didn't even try to defend it AT ALL)
Fuck that company
"but the use of their software is not that expensive"
This isn't the point, it's not really about the money it's about our tools been designed and developed to the whims of one companies profit.Compare Adobe to ANY 3D software company, it's like a bad joke. They're all massively competitive and pushing great feature every version at competitive prices while Adobe rests on it's laurels and throws a "rounded corners in photoshop" shaped bone to us every few years to keep us on CC subscriptions.
Take a look at what the ZBrush developers have added in the same timeframe as Adobe, take a look at Cinema 4D R12-15 VS Adobe CS5-CC, shit is a fucking joke.
FUCK ADOBE
FUCK SHANTANU"Most jobs have higher overheads than $1000+ software."
Are these overheads controlled and conceived by a single corporate for profit entity on a global scale?
- slappy0
Actually doing the design is just the tip of the pyramid, if you have done all your planning and scoping properly it wont matter what you design it in.
ie Research > Content Planning/ Asset Gathering> SEO Strategy > Social (if applicable), Online Marketing plan > Site Map > Functional Spec > Wireframing / User Testing > Design > Build