Suggestions for PhotoLine as a web design tool

[addison]

As a professional website designer/developer, I've used all sorts of tools to create overall designs and interface "parts" for websites, including Photoshop, CorelDraw, Microsoft Expression, Xara Extreme, DrawPlus, etc., and lately I've come back to PhotoLIne (I think I first used PhotoLine back at version 10 or 11) and I've been nothing but loving it. Sure the interface could use some polish, but when I finally spent some time with the documentation, I was amazed at how much is possible. And since I'm probably using PhotoLine a little differently than most users here, I thought I'd share some features that I'd love to see to make it even better for my workflow, and possibly others as well:

Pathfinder for vector shapes: The ability to use vector shapes to punch out or intersect each other would be massively helpful when creating more complex shapes.

Export selection: I never really liked image slicing for exporting images, but I find it helpful to be able to export selected objects. So, how nice it would be to simply select the objects in my layer panel and then select "Web Export" and have the export area reduced to only what I've selected. It should even pick up on layer styles like drop shadows and glows so that effects that fall outside of objects don't get cropped.

Levels of anti-alias for type: I know this something from Photoshop, but when comping a web site, it is helpful to be able to simulate how text may look in the browser. It's also nice when creating elements with smaller text and it needs to be more crisp.

Advanced OpenType support and font character browser: Ok, this may be asking for a bit much, but I love typography, and PhotoLine already has some great type tools built-in. This just seems like the next step to making it better. Plus, I have lots of OpenType fonts (back from my Adobe days) and I'd like to be able to access all the ligatures, small caps, and swashes again. A character browser would also be nice for inserting those hard-to-reach characters, but OpenType support is more important to me.

I'll add more as I think of them, but overall, PhotoLine is a killer software package -- my hat is off to the developers. Keep up the great work.

Thanks,
Addison

[Neonsquare]

Hi Addison,

I'm using PhotoLine too as a web design tool.

Punching out vector shapes already works:
1) Draw or select a vector shape
2) Select a vector shape tool like the "star"
3) Press the alt/option-key while drawing the new shape above the existing shape.
4) The new shape punches out a hole in the old shape.

You can also do that using Layout > Vector > Merge Marked Vector Layers, which is actually like XOR. You can do more complex combinations using multiple applications and using the pincer tool. Some ready commands like "union" "intersection" and "difference" would be a good extension though. Another interesting tool I've seen in a competitor is an "vector eraser tool" which works like a normal brush but paint holes into a vector layer and brings a more "natural" kind of forming vector shapes.

You "Export selection" idea sounds interesting. What you can do now is Command-E (to insert it into a new document) and Command-X to do a web export of the new document. Unfortunately an outer glow is cropped though - which makes this only a solution for restricted cases. I often use a very light glow effect on web typography stuff.

Advanced OpenType support is something I also want - like using special ligatures or swashes in fonts like MetroScript or Hoefler.

Another interesting web topics are SVG (there already is some import and export support for it) and CSS3 (creating gradients, shadow effects a.s.o. and then export them as CSS3 styles)

ciao,
Jochen

[addison]

Thank, Jochen -- I've played with the vector "punch-out" as you suggested and that does get me a long way. Thanks for the tip.

I just remembered, too, that I love the fact that PhotoLine has text styles that I can save, reuse, and even edit globally. How great would it be for these styles to export CSS to place in my style sheets. Perhaps even ems could be added as a unit of measurement, and font-size, line-height, letter-spacing, and even text-shadow (picked up from styles) could be exported from my saved text styles. Maybe even add an extra field to define an ID or class name...

[addison]

So Fireworks CS6 now offers a CSS properties panel from which code can be copied and pasted into your code editor. It also appears that the recently released Sketch 2 from Bohemian Coding allows you to copy CSS properties from an object to your clipboard (http://www.bohemiancoding.com/sketch/ - towards the bottom of the page). Would this be something difficult for PhotoLine to accomplish?

[greenmorpher]

What about HTML export for whole files so you can build a site in PL and export it as I can do with Canvas? Check the site below.

Cheers, geoff

Geoffrey Heard
The Ad-Doctor-Online
http://www.ad-doctor-online.com

[addison]

What about HTML export for whole files so you can build a site in PL and export it as I can do with Canvas?

Hey, Geoff. Not that full HTML export would necessarily be a bad thing, but there are already specific tools that allow you to design websites visually and export HTML. When I say PhotoLine as a "web design tool," I'm referring to it's ability to create graphic components for a website. I would never try to build the full HTML and CSS in anything other than a code editor.

It doesn't seem like that much of a leap to have PhotoLine produce CSS for certain objects from dimensions, color, and even style information (drop shadows and rounded corners and such) and place the code in a panel to be copied and pasted. (Now that's easy for me to say -- I've never developed software before!)

[greenmorpher]

And I wouldn’t dream of doing DTP in anything but a postscript editor. LOL.

I do both DTP and Websites (e.g. http://www.worslepress.com, http://www.ad-doctor-online.com, http://www.malliabuilders.com.au) in Canvas X. Also vector and raster (although I now do most of my raster in PL).

Sure it’s not 100%, it has limitations, and the HTML is now a little old fashioned, and when saving to HTML rather than postscript or PDF you need to keep your document fairly simple, but I seriusly cannot understand why the Hubers don’t add the "save as HTML" capability to PhotoLine.

Sure, there are plenty of editors out there and lots of simple programs to do the job, but there's nothing like being able to go to your familiar graphics program, whip up a layout with tools you know, and "save as" to HTML. Sure makes web design and production easy for those who don’t do a lot of them but do enough of them to make paying a bit extra for PL worthwhile. Be much better than having to learn a whole new program -- then re-learn it when I wanted to build a site.

If things get too complex, I just call in an expert to do the tricky bits.

Cheers, geoff

[addison]

This is what I'd love to see in PhotoLine:

https://csshat.com/

I guy can dream, can't he?

[Herbert123]

Compete where you can compete: at the moment the market is flooded with tools that promise simple design conversion to html/css: Adobe Muse, InDesign, Quark, Xara, PSD2css, and so on, and so forth. I work as a professional web designer/developer, and I *never* touch these things (although I tested them all), because the code they produce is generally rubbish, unstructured hell and the conversion of graphics lackluster at best.

Slicing is antiquated, and does not properly address and fit in modern standards of coding either - I've long given up slicing in PS or Fireworks. Nice for a quick prototype, but that's about it (in my opinion). Looking at http://www.malliabuilders.com.au/ and the underlying code, I shudder - sorry, the design is okay, but the code is just a complete and utter mess in so many ways - a perfect example why never to use one of these visual tools to write the code for you. Even basic html/css coding skills can do SO much better than that - I teach html & css to graphic design students in Vancouver, and they pick it up in no time (well... most do .

But even a website created in a more 'modern' tool like Muse: http://juliegratz.com/ - this site showcases how excruciatingly *bad* these tools are at generating proper code. And I will not even mention the messy optimization and slow download of these 'showcase' examples (the showcase examples weigh in at 2mb per page and higher).

But then again, I do understand that there are many designers who feel intimidated by coding html/css... Heck, I know many a programmer who dislikes html and css!

Now, one thing Photoline *is* missing would be the ability to export to 8bit png with a full 8bit alpha channel. Fireworks offers this, and it is absolutely essential for good optimization: without this, we are stuck with full 32bit transparency. It would be great if the devs could extend the web export, and add this option. Also, web export should provide an option to remove any non-essential meta data, thereby reducing the file size further (often an additional 10kb is saved).

Luckily, there's always imageOptim (mac) or Riot (win) These two tools do a much better job at optimization of web images than most paid for apps.

In my opinion the devs are better off improving Photoline's (core) image editing capabilities, which is where Photoline's strengths lie. It would be a nice addition if the web export functionality where to be improved a bit, and modernized (8bit png with transparency and meta data removal!!).

And I wouldn’t dream of doing DTP in anything but a postscript editor. LOL.

I do both DTP and Websites (e.g. http://www.worslepress.com, http://www.ad-doctor-online.com, http://www.malliabuilders.com.au) in Canvas X. Also vector and raster (although I now do most of my raster in PL).

Sure it’s not 100%, it has limitations, and the HTML is now a little old fashioned, and when saving to HTML rather than postscript or PDF you need to keep your document fairly simple, but I seriusly cannot understand why the Hubers don’t add the "save as HTML" capability to PhotoLine.

Sure, there are plenty of editors out there and lots of simple programs to do the job, but there's nothing like being able to go to your familiar graphics program, whip up a layout with tools you know, and "save as" to HTML. Sure makes web design and production easy for those who don’t do a lot of them but do enough of them to make paying a bit extra for PL worthwhile. Be much better than having to learn a whole new program -- then re-learn it when I wanted to build a site.

If things get too complex, I just call in an expert to do the tricky bits.

Cheers, geoff

[bkh]

Now, one thing Photoline *is* missing would be the ability to export to 8bit png with a full 8bit alpha channel. Fireworks offers this, and it is absolutely essential for good optimization: without this, we are stuck with full 32bit transparency. It would be great if the devs could extend the web export, and add this option. Also, web export should provide an option to remove any non-essential meta data, thereby reducing the file size further (often an additional 10kb is saved).

Well, the option is there (choose PNG in Web export, then press the "Change …" button below the presets. The "Reduce Colours" dialogue lets you select full transparency and 256 colours (and save a new preset for Web export if you need it), but unfortunately, the ensuing png has 24 bit colour. Probably this is a bug, not a missing feature.

That said, I don't know how a 32 bit compressed PNG with 256 actual colours compares to one with a palette + full transparency one in terms of file size and browser compatibility.

Also, web export should provide an option to remove any non-essential meta data, thereby reducing the file size further (often an additional 10kb is saved).

What metadata do you mean? PL gives you the option to include/exclude EXIF, IPTC, XMP and colour profile under Web export …

Cheers

Burkhard.

[Martin Huber]

That said, I don't know how a 32 bit compressed PNG with 256 actual colours compares to one with a palette + full transparency one in terms of file size and browser compatibility.

If a picture has 256 colors or less (this means 32 bit colors including transparency), PhotoLine will always create an 8 bit PNG. It doesn't matter whether you use the Web Export or the regular save/export.

Martin

[bkh]

Now, one thing Photoline *is* missing would be the ability to export to 8bit png with a full 8bit alpha channel.

Actually, it seems that png does not support 8 bit (palette) images with full alpha channel, see Table 11.1 in the PNG specs, together with the description of transparency in 11.3.2.1. Instead, each palette entry in an 8 bit png can have a transparency value of its own, or, effectively, a palette with up to 256 RGBA entries (even if, technically, there are two associated tables).

Indeed, as Martin wrote, if an image contains 256 RGBA values or less, then it is saved as a png image with palette. However, apparently PL cannot reduce a RGBA image to a palette with up to 256 RGBA entries – this only seems to work with RGB palettes.

Cheers

Burkhard.

[Herbert123]

That's what I meant: PL cannot export a 8bit png with full transparency. There are, however, options to solve this:

http://x128.ho.ua/color-quantizer.html (win)
http://trimage.org/ (mac)
http://imageoptim.com/ (mac)

And online tools like smushit. Also interesting article here for further optimization:
http://www.smashingmagazine.com/2009/07 ... echniques/

By the way, what is the equivalent of "posterize" in Photoline? One wall I keep hitting in Photoline is the strange non-industry standard labeling in the English version...

[akeller]

Well, probably PL is not the "industry standard" and the translation might be also not perfect in different ways, the question is what you want to reach.
What does "posterize" mean? Thanks the help of Wikipedia I do have a rough clue. I don't know the math behind but maybe [Filter]-[Quality]-[Dirt Remove] will do?

By the way, what is the equivalent of "posterize" in Photoline? One wall I keep hitting in Photoline is the strange non-industry standard labeling in the English version...

Cheers,
Andreas

[Hoogo]

For my understanding of posterize I would use the curves-tool. There's a text-field for the amount of steps and a button to create the steps.