What Adobe software to use for web banners and web content / images with text


L

Lilyleaf

New Member
#1
Hi,
I would like some advice on what software to use for web content and I hope you can help.

I will soon be creating content for an ecommerce company. It will be photos with text and graphics/illustration on top of it.
My job will be to edit the photos and then add the text/graphics onto it, then export it and import the jpg it into a cms system.

I'm from a print background and I'm used to edit photos in photoshop, manipulate paths and create vectors in illustrator and then bring it all together in indesign and export it for print. But now, working for web, there's completely different factors to take into consideration and I have to admit it kind of scares me. I'm not sure how to change my workflow.

If I continued with my normal workflow, I would set up the indesign file for web of course and export it to jpeg, but then in order to really optimise the finished image for web I would have to import the image again in photoshop and use the "save for web" function to make it as small as possible.

I know Indesign is mainly for handling large amounts of text and for publishing. But it does have "for web" feature. And I like working in indesign because it's a vector based software and I can manipulate paths and text much easier than in photoshop. I also like how you have a big pasteboard and then just press Alt+Q to preview the image. Only thing I miss is optimising the final file for web – right now you can only choose resolution which is good enough really but not ideal if you want to save as much loading time as possible.

Now the other option is to edit the photos in photoshop, and then finish it all in illustrator. Illustrator have a web optimisation feature which saves me opening the file again in photoshop. But the only real complaint I have in Illustrator, is that I can't preview the artboard only in illustrator. Instread I have to create a stroked box around it, which feels totally retarded in my humble opinion.

I'm just so tempted to keep my usual workflow and using Indesign but I'm afraid it would be really frowned upon!

What do you think? If you have any input, please let me know, as I feel totally at a loss here!

Thanks!
 
Paul Murray

Paul Murray

Moderator
Staff member
#2
I know what you mean about the non-existent preview thing in Illustrator. I've used the "stroke around the artboard the same colour as the background" trick many a time. Personally I would use Illustrator (though I actually use a non-Adobe programme for design 99% of the time) and use something like TinyPNG to optimise the image. Even exporting from Photoshop the images are rarely as small as they can be, and if you're using JPEG as a format you'll be losing a little bit of image clarity every time you open it and re-save it.

You can get by with InDesign, the main issue is it's not as quick and easy to create artboards in different sizes as it is in something like Illustrator. Photoshop supports artboards but I've always found them a hassle to work with. Years ago Fireworks would have probably been the thing to use but that's now defunct so I guess Illustrator is the one to go for.

In terms of image size/resolution for retina screens, I tend to create all my images as retina images (i.e. twice as big as they need to be) and optimise them, rather than doing a 1x and 2x version. I do swap them out for a smaller image on mobile devices to keep pages loading fast. If you're the one responsible for adding the images to the CMS it might be worthwhile also looking into if/how it handles retina/mobile images.
 
L

Lilyleaf

New Member
#3
Thanks Paul for your reply! I really appreciate it. I have been leaning towards illustrator myself. I will try it tomorrow and see how it goes. I just have to be prepared to give an explanation on why I'm not just working in photoshop.
I actually looked into image optimisation software earlier, and tried ImageOptim.I was so disappointed! The optimised image completely changed in colour and looked washed out. I just wanted to go back in photoshop and boost the contrast and colours on it. I will try tinypng but ultimately I feel like I need more control over the outcome, which I have in Photoshop.

Thanks for bringing it up, I have thought about resolution and screen sizes also and that's another part that is a bit frightening tbh... Personally I too prefer to design for high res screens since they're becoming more common and I know how unprofessional 72 ppi images looks on my retina. I really hate having to compromise with the image quality but I do understand that loading time is ultimately extremely important if you want visitors to stay.

The thing is, the company has been around for a long time and have lots of employees, so they must have standard ways to deal with all this already! And I hope I'll just have to listen an learn.... I'm just really nervous since, right now, I have no clue which cms, adobe software and general procedures they use. So it's all a bit daunting.

Again thanks for your reply, its good to know that my thoughts aren't completely amiss.
 
fisicx

fisicx

Active Member
#5
Top tip. Don’t make the text part of the image. Layer the text onto the image using CSS. That way it becomes indexable by the search engines and can be resized / formatted for each device.

Consider also that most people visiting the site will be using phones or tablets so will only be seeing small images.
 
hankscorpio

hankscorpio

Moderator
Staff member
#6
Why would fireworks be defunct? It actually creates smaller JPEG and png files.

There's layer support even after saving it doesn't flatten.

I don't do web but I just wonder
 
Paul Murray

Paul Murray

Moderator
Staff member
#7
Why would fireworks be defunct? It actually creates smaller JPEG and png files.
Last time I checked it wasn't available as part of Creative Cloud (unless they've renamed/reworked it), so if it isn't already installed I don't even know if you can get it.
 
Paul Murray

Paul Murray

Moderator
Staff member
#9
I think they're trying to push Edge as the replacement to Fireworks. It kind of does what Fireworks did in the sense that it lets you prototype UI designs, but is much more inline with modern technology.

Honestly, I just use Affinity, you can set it up to export multiple versions of your artboards whenever you save, plus you can switch between vector and pixel preview on the fly.
 
fisicx

fisicx

Active Member
#10
I've still got Fireworks 4 installed on my still working XP PC. Does the job it was designed to do. And only cost me £12 off ebay (with a copy of Dreamweaver 4).
 
Top