cropping pictures

[nathansnippe]

can somebody please tell me how to crop a picture in fireworks mx or with paint shop pro, please?

i've been usin paint shop pro, but everytime i try to crop a circular image, the canvas behind changes colour to the one of the inner image. all i want to do is cut the image to a circle instead of a square to make it look tidier.

cheers,

nathan

[jont]

You can't actually display circular images - only rectangular (or square) - the trick is to set the background colour .. in Fireworks in the properties bar click on the canvas colour and set to the same as the background colour of your webpage (usually white) then crop the circle ..... the image will then appear to be a circle albeit with a rectangular area the same colour as the web page background. If the wrong part is being cropped you may need to invert the selection.

ps..... just as a caveat to someone arguing the point you can actually display circles but this is browser dependent and requires more coding than generated by Microsoft in a 5 year period so isn't worth the hassle

[completerookie]

the previous answer isn't quite true. You always save a square/rectangular picture, but the trick is to use the GIF format, and make the outside part of your picture see-though so that it sees the background colour of the web page.
This allows you to change the background colour of your web page, and the picture "will still work" - so with that in mind,

here goes - Fireworks (don't play with paintshop, its "too difficult to get on with" )

• create a new fireworks file
• drag your required picture on to the canvas
• make sure the vector toolbar is showing
• click on the icon on that toolbar (2nd row, 1st icon) and hold down the left mouse button
• when the extra icons show, choose the DOUGHNUT icon
• using the left mouse button drag open a doughnut and then release. (the exact size is not important. - then release the mouse button.
• drag the doughnut over the top of your picture.
• right in the centre of the doughnut, you will see a small yellow dot and then concentrate on the small yellow dot to the right of that centre dot.
• drag that (right hand) dot (the inner radius) to the side - this will make the centre hole larger or smaller. - when the hole is the correct size, release the mouse button
• make sure the fill of the doughnut is set to SOLID
• change the fill coulour to bright-green or some other obscure coulour that you don't normally use in your pictures.
  button

You now have your picture in the centre of the bright-green doughnut.
adjust the external sides of the doughnut to stretch the internal hole to the correct shape - experimentation is called for here.
now back to the list of instructions

• click on the EXPORT-TOOL (on the select pallet - bottom right icon) if it doesn't show, hold the mouse down over the CROP TOOL until you can select the EXPORT-TOOL
• drag over the area of the picture you want to save - don't worry that you have a bright green area in the picture, all will become CLEAR (no pun intended) soon.
• adjust the edges until you get the nice shape that JUST shows the circular pictures
• now double click on the square you have just created. - this opens up the EXPORT tool.
• change the format to a GIF file
• then click on the small icon with the pippette on it (select transparant colour)
• now click on the bright green area of the picture - it will be this part that will turn clear in your final picture.
• click on EXPORT button and save the picture to your hard disk.
• job done.
• if you so wish, save the default PNG file offered by fireworks.

BY following all the instructions above, you will create a "square picture" that is "clear" on the outside of the circle - boy, thats difficult to explain !
now include the picture into your web page,
turn the background colour of your web page to any colour and the clear parts (the green sections) will become opaque and you will see the background through the picture effectively creating a circular picture.

Don't be surprised if the concept doesn't work 100% first time round, experiment, play and don't be afraid of playing.

I hope that these instructions are clear enough for you to follow.

Hope it helps.

kev

[nathansnippe]

thanks alot for your help.

[jont]

the previous answer isn't quite true. You always save a square/rectangular picture

The previous answer is true as I stated you must save as a square / rectangle - my ps at the end was for any pedants about to explain how to use PHP to create circles using monster coding.

change the fill coulour to bright-green or some other obscure coulour that you don't normally use in your pictures.

Be wary of using bright colours as this can create visible fringing.

[completerookie]

agreed, but of course the problem being that if you pick a "normal colour" (eg white) and that colour appears in your picture, then EVERY pixel of that colour becomes see-through.
by picking an obscure colour, the chances of it occuring (in large quantities) in your picture is more remote.

kev

[jont]

For best results best to save the layered PNG (as an original) and export the image with a background set the same as the webpage and use no transparency to prevent fringing .. although if you change the background at a later stage you do need to resave the images

This is the downside of quality over ease of transition (transparent backgrounds) .. as ever... what looks the best is not always what is the easiest to achieve (although you can get tricky using batch processing to automate thing if the background colour should change) or try using a feathered selection to remove any fringing.

You can also use the alpha channel in the PNG to overcome this but displaying PNG's in browsers comes with its own issues although you can resolve this "relatively" easily in IE5+ using a simple Javascript routine (legacy browsers can also be provided with a non-transparent version) but this can get messy and adds to page overhead.

There is always more than one route to the solution.........

[Mark H]

There is always more than one route to the solution.........

Talking of which (Fireworks 8, but similar to MX):

• Open your image
• Use circular marquee tool (bitap icons) to select the circular bit of the image you want to keep
• Select Inverse
• Hit delete
• Modify canvas colour to transparent
• Image Preview (same as Export Preview in MX I think) - select GIF - select alpha or index transparency
• Export
• job done

Any other Actinic V7 questions?

[jont]

Any other Actinic V7 questions?

How can your automate Actinic to only show 10 products on a page from a section of 54 and insert a next / previous link to take the user to the next / previous 10 products?

No point starting with easy questions

[Mark H]

As you are perfectly aware it was a rhetorical question and, no, I haven't got a clue..........

Any more Fireworks MX questions?

(oops there's another one)

[jont]

Is this a rhetorical question?

[Mark H]

Dictionary.com:

"rhetorical question: a question asked solely to produce an effect or to make an assertion and not to elicit a reply, as “What is so rare as a day in June?” "

My (lighthearted) assertion was that the original question had nothing to do with Actinic V7 (but happy to help).

Only you know what you intended with your last question, although as I have felt obliged to answer I would suggest that it is not rhetorical.

Are we getting too deep? Is there hope for the World?

[dave_finlayson]

Can offer you a Fireworks brain teaser.

I have X number of images, all different sizes but all under 300px in both height and width. Can you create a batch process that will modify the background of all the images to 300px x 300px and ALSO centre the image both vertically and horizontally on the new background?

David

[completerookie]

I can offer a brain teaser in fireworks, but I cannot offer an answer to this one !

[RuralWeb]

the trick is to set the background colour .. in Fireworks in the properties bar click on the canvas colour and set to the same as the background colour of your webpage (usually white) then crop the circle ..... the image will then appear to be a circle albeit with a rectangular area the same colour as the web page background

This is the method I use as well, it is far easier and quicker than anything else I have tried.