Flip transparent PNG - A Designer ??

[Mets]

Hi there!

 

Can't seem to figure out if this is possible in Affinity Designer...?

 

I have a small square PNG image with a transparent background. It represents one corner of a box (top-left) that will be used on a webpage and later positioned via CSS. Only parts of the whole square PNG are covered, everything else is transparent background. 

 

Out of this one square PNG image I'd like to create 3 more exact copies, but each just flipped vertically and horizontally as to create all 4 corner images for the desired box.

 

When I open the PNG in A Designer, no matter in which persona I am, I can only select the visible part of the png that is represented as a separate layer and flip that, but it remains in its position. However I need to flip the whole png square with all its transparent parts too, so the whole image is flipped...

 

Is this possible with Affinity Designer? How about Affinity Photo?

 

Thanks!

[Callum]

Hi Mets,

 

Welcome to the forums

 

This should be possible in Affinity Designer, would it be possible for you to provide the file in question so I can make sure I understand your issue fully?

 

Thanks

Callum

[Mets]

Hey there, 

 

Thanks!

 

Here's a test PNG image 100x100 px, representing top-left corner of a box. I need this image flipped 3 more times to create all remaining corners of the box and all resulting images need to be exactly 100x100 px as the original...

 

Any ideas?

[R C-R]

You can do this with artboards. The basic idea is to create an artboard from the original, duplicate it three times, & then flip the three dups horizontally & vertically as needed to get the others oriented appropriately. I attached 4 artboards.afdesign with the history included to show how this works.

 

Once that is done, go to the Export Persona > Layers tab, select all four artboards, click the "Create Slice" button at the bottom of the tab. Switch to the Slices tab, set the export type to PNG-24 (or whatever), clear the checkmark for the first, whole document slice (unless you want that), make sure the checkmarks for the four individual artboard slices are ticked, click the "Export Slices (4)" button at the bottom of the tab, & choose an export location. 

 

I should have changed the names of each artboard to something better before export but you can do that prior to export in the Export Persona or afterwards.

[Mets]

1 hour ago, R C-R said:

You can do this with artboards. The basic idea is to create an artboard from the original, duplicate it three times, & then flip the three dups horizontally & vertically as needed to get the others oriented appropriately. I attached 4 artboards.afdesign with the history included to show how this works.

 

Once that is done, go to the Export Persona > Layers tab, select all four artboards, click the "Create Slice" button at the bottom of the tab. Switch to the Slices tab, set the export type to PNG-24 (or whatever), clear the checkmark for the first, whole document slice (unless you want that), make sure the checkmarks for the four individual artboard slices are ticked, click the "Export Slices (4)" button at the bottom of the tab, & choose an export location. 

 

I should have changed the names of each artboard to something better before export but you can do that prior to export in the Export Persona or afterwards.

 

 

 

Hey there R C-R!

 

Thank you so much for the info and the file with examples! Got it to work. Not so intuitive approach at first glance, but kinda makes sense actually... Now I know how similar situations can be handled!

 

Have a good day!

 

 

[firstdefence]

Just made a short video for the hell of it and used a trial of camtasia studio on my partners windows laptop. Apologises for the horrible watermark Techsmith emblazen across the screen because its a trial version but it came out fairly well. and was fun to do.

Arrgh I deleted my vid lol! So I decided to edit it a bit more, damn those funky transitions, I've decided on a slick black fade... oh yeah!

Untitled Project2.mp4

Inspired by R C-R

[R C-R]

27 minutes ago, Mets said:

Thank you so much for the info and the file with examples! Got it to work. Not so intuitive approach at first glance, but kinda makes sense actually...

I am glad you found it helpful. 

 

I have to admit that there is a lot I don't find intuitive at first but makes sense after I stumble & bumble around in the app long enough to discover some way it can be done. If I was on a deadline this would probably not be acceptable. Lucky for me I am retired & just do this for fun.

 

@firstdefence Your video is excellent & your commentary made me laugh. One of the reasons I love this forum is how so many users (not to mention the staff!) are so willing to take considerable time & effort to prepare & contribute something really useful, often building on & improving/clarifying what someone else has posted. I have been hanging out here for around 3 years now but I still find that pretty amazing. I am just happy I can be a small part of that.

[Mets]

1 hour ago, firstdefence said:

Just made a short video for the hell of it and used a trial of camtasia studio on my partners windows laptop. Apologises for the horrible watermark Techsmith emblazen across the screen because its a trial version but it came out fairly well. and was fun to do.

Arrgh I deleted my vid lol! So I decided to edit it a bit more, damn those funky transitions, I've decided on a slick black fade... oh yeah!

Untitled Project2.mp4

Inspired by R C-R

 

Thanks for the vid  I have to use this rotation thingy and duplicating more often  I keep forgetting about it...