[Pro] Best recommended graphics practice?

Freeway
1

I imported a psd file (simple line drawing) and when uploaded the file size was large and color waaaay off. So I went back to PS and “Saved for web”, made it into a gif, reimported into FW and this time the color came out fine, at 25% of the file size. So, this is leading me to wonder if importing psd files etc. into FW is a good practice? Or should I take care of sizing and formatting my graphics before importing into FW (which Dan J mentioned he does in one of his screen casts). Also, I noticed that in the inspector my imported graphics have a dash where size should be. How do I see the size inside FW? Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

PS is a perfect companion for FW, just follow a few simple rules,
keep your design the same size you want in FW, always work on pixels
and use RGB. Ps files look great in FW, gif, png or jpeg, depends on
the graphic. Try this, draw a button 100x75 pixels size in a canvas
100x75 pixels in PS, insert an arrow or a word (lets said “enter”)
in it, them export as PS first, them gif, png and jpeg. Open FW and
place (import) each one side by side them click preview. You will
see, good luck, KC

On Oct 13, 2011, at 8:52 PM, Emily Kelly wrote:

I imported a psd file (simple line drawing) and when uploaded the
file size was large and color waaaay off. So I went back to PS and
“Saved for web”, made it into a gif, reimported into FW and this
time the color came out fine, at 25% of the file size. So, this is
leading me to wonder if importing psd files etc. into FW is a good
practice? Or should I take care of sizing and formatting my
graphics before importing into FW (which Dan J mentioned he does in
one of his screen casts). Also, I noticed that in the inspector my
imported graphics have a dash where size should be. How do I see
the size inside FW? Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I’m still an advocate of “Saving for Web” from PS and then importing them as Pass-Through’s into Freeway. I’ve never had any luck trying to drag a file in and then get results that I like without going through a bunch of extra steps. That may just be personal experience, but I think the idea behind the file support was to avoid how most web designers work these days in that they take a PSD and then “slice” it up, which I always thought was dumb to say, and then they piece it together through the code in Dreamweaver or another HTML editor.

Why I say avoid is that Freeway encourages you to skip the step of cutting and Saving for Web since it takes native files. While some see that as a bonus, I’ve never felt it worked in my process so I still to this day Save for Web in PS first and then import as a Pass-Through in FW to ensure I get the exact thing I want.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I like that also. I go in and resize to the size I want and save
To web and do pass through

J

Sent from my iPhone

On Oct 14, 2011, at 12:00 AM, Dan J email@hidden wrote:

I’m still an advocate of “Saving for Web” from PS and then importing them as Pass-Through’s into Freeway. I’ve never had any luck trying to drag a file in and then get results that I like without going through a bunch of extra steps. That may just be personal experience, but I think the idea behind the file support was to avoid how most web designers work these days in that they take a PSD and then “slice” it up, which I always thought was dumb to say, and then they piece it together through the code in Dreamweaver or another HTML editor.

Why I say avoid is that Freeway encourages you to skip the step of cutting and Saving for Web since it takes native files. While some see that as a bonus, I’ve never felt it worked in my process so I still to this day Save for Web in PS first and then import as a Pass-Through in FW to ensure I get the exact thing I want.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

On 14 Oct 2011, at 05:00, Dan J wrote:

Why I say avoid is that Freeway encourages you to skip the step of cutting and Saving for Web since it takes native files. While some see that as a bonus, I’ve never felt it worked in my process so I still to this day Save for Web in PS first and then import as a Pass-Through in FW to ensure I get the exact thing I want.

This technique is all well and good. However, it makes work. To my mind it takes away from the very Freewayness of Freeway.

Say you create a layout you think will work. You spend time saving out the images from Photoshop, importing them as pass-throughs in Freeway. Then you find you needed the images a different size after all. You have to go through the whole rigmarole again.

Importing native images to Freeway is so much simpler. If you change your mind about the size or position of an imported image, you just change it in the Freeway page. Freeway does the hard work of working out the format and compression and colours and everything else.

The secret is to set up Freeway to output the images the best way. Sometimes it will guess wrong. Sometimes, an image is best output as a GIF, but Freeway guesses it as a JPEG. It looks awful, the colours are wrong, it’s all mushy. The solution is to use the Inspector and force Freeway to publish a GIF instead. You can use Freeway to preview the output image as you work, you can optimise images on the fly, you can use Actions to manipulate images even further.

I’m not saying the PS/Save for Web/Passthrough system doesn’t work. I’m saying you’re potentially making work, and not letting Freeway do what it’s meant for - making web design easy. Use Freeway’s tools whenever you can, and you will get excellent results most of the time. I use a combination of the Inspector and the Photo Magic Action to make placed images look great.

Many years ago, Walter D shared a technique he used for placing images. If the images needed to really pop, and Freeway wasn’t quite doing it the way he wanted, he would note the scale, dimensions and crop of the image output by Freeway, then replicate it using Photoshop. The optimised images would then be imported back to Freeway as pass-through images. All of this would be done as a last stage routine, once the design was finalised and approved.

Let Freeway do the work. It’s what it’s designed for. Intervene only when it’s not working as expected.

Cheers

Heather

Imagic Design * Good Design - No Compromise
email@hidden * http://www.imagic-design.co.uk
T: 01634 864017

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

The secret is to set up Freeway to output the images the best way. Sometimes it will guess wrong. Sometimes, an image is best output as a GIF, but Freeway guesses it as a JPEG. It looks awful, the colours are wrong, it’s all mushy. The solution is to use the Inspector and force Freeway to publish a GIF instead. You can use Freeway to preview the output image as you work, you can optimise images on the fly, you can use Actions to manipulate images even further.

Totally agree Heather.

The important thing is that YOU know what sort of image will give the best output on the web depending on the subject/conent ie in Emily’s OP to me Gif was the obvious output option for a line drawing. But again was PS the best app to create it - probably not.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

It’s also worth notice that 75% JPEG compression in Photoshop is not analogous to 75% JPEG compression in Freeway. In fact, Freeway will produce smaller files at 75%, but with more compression artefacts as a result. Remember - JPEG is lossy, and you can get blocky looking images, depending on what that image is.

I did some experiments a while back on compression and files sizes, comparing Photoshop, Graphic Converter and Freeway. I found that to get as close to the kind of image you’d get from a 75% compression rate in Photoshop, you’d need to up Freeway’s compression to somewhere nearer 85%. The result would be two files much the same size, and with reasonably similar quality.

It is also worth noting that JPEG image will always look a little softer wen reconstituted than the original. To help counter that, apply some sharpening to the image. You can do this in Freeway with the Sharpen Action. If you sharpen so it looks just a little too shape, the JPEG compression will knock that back and you’ll get an image that is slightly closer to the original.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

This is great advice, thank you all! I’m really glad to hear your comments Dan J as your video prompted this question for me. I saw the mention of Pass Through a few times. Can you explain that? Where is that in Save for Web dialogue in PS? Or is that in FW?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Where is that in Save for Web dialogue in PS? Or is that in FW?

It is FW when you go to import a file there are 2 tickboxes in the dialogue box that opens down the bottom left ‘Pass Through’ and ‘Ignore Resolution’

If you drag/drop images onto your page you dont get that option.

Select the graphic container and File>Import

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

I guess also it depends on your workflow and how you design websites. I typically build out wireframes, in the lovely Axure program, send off to client for review, client draws all over the wireframes, I make changes to the wireframes, client signs off, design begins in Photoshop or Fireworks, client sees design concept, client makes changes, I make the requested changes, client signs off, I cut it up and get it coded together and then that’s it. If client wants massive design changes then I can easily move items around in Photoshop versus a box-model design in FW and therefore I just have to cut the design and rebuild, again if need be.

However I would completely disagree in using FW as your only method of designing out sites. I’ve had a few files go corrupt to fonts, mac system updates, and just random error messages and it’s often that the FW file is so bloated with Actions and large graphic files that it just “craps” out.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options