Smart objects and mockups like in Adobe CC

[Kruna]

Hello to everyone,

first of all I apologize, if this question is asked kind of million times. I read through diffrent forums, but actually cant find a propriate answer or tutorial concerning the topic.

 

I use Adobe CC and I am pretty new to it. All I've learned is from tutorials. I work with Photoshop and work a lot with smart objects and mockups for my customers to show, how eg their advertise would look like on a billboard. Therefore I got an excellent tutorial, like this one (pls take a look from 18:33min.):

 

Meanwhile I heard about Affinity and I am fond of it!!!! I love it and I would like to switch from Adobe to Affinity or rather said I did already and bought AF Photo, AF Designer and AF Publisher.

The  problem is that I cant find a solution on how to use 'smart objects' and mockups in Affinity, so I always get stucked with Adobe again and I dont want this at all.

Does anybody has an idea how I can achieve this in Affinity? I really would like to work only with Affinity.

 

Thanks in advanced.

Best regards,

Kruna

[telemax]

Hi

In Affinity, making changes and editing will be faster.
No need to jump to another document. Just place it nearby and edit it.

 

[Kruna]

Hello telemax,

 

thank you very much for your answer.

I am afraid, that as an almost absolute beginner in PS and absolut beginner in AF I cant really comprehend, how it works in your video. Please excuse me for that.

I tried to acomplish like in the video, but no way to get it to work. Excuse me I wouldnt like to ask too much, but in my case I would need an either written or spoken step by step explanation.

 

Anyway, thank you for help!

 

Best regards,

Kruna

[telemax]

1. Create your design/image. 
2. Create a Symbol from your image, in Affinity Designer. 
3. Apply perspective effect in Affinity Photo.

[GarryP]

In addition to what telemax gave above, have a look at these:
https://player.vimeo.com/video/192599738
https://forum.affinity.serif.com/index.php?/topic/113550-photo-live-projection-placing-image-into-grid/
https://forum.affinity.serif.com/index.php?/topic/25846-packaging3d-mockups/
If, after reading the threads and watching the videos, there is still something you need explaining then please say so.

[Kruna]

@telemax,

Thanks again for your new video. Now I understand better and got it work. I wasnt aware that its first done in Designer and then switched to Photo. I was looking all around in Photo only!

I tried to insert it on a billboard.jpeg I am working on, but then there is the billboard with the two 'layers'. The left symbol I resize to fit in the billboard and it looks great. If I click the right one to turn it off, so that I can save as .jpeg the left layer also turns off. I guess it has to be like that, but how can I save it in .jpeg so that the left, resized image stays within the billboard?

@GarryP

thank you too for helping. The first tutorial is great!! It is very well explained, even for dummies like me! Only one question is left. In order to be able to save it as .jpeg you have to go to Layer >> Life Projection >> Remove Projection. Is there a wa to make changes after Remove Projection? When I go to Layer >> Life Projection >> Perspective Projection I have to do it all over from scratch, right?

 

[v_kyr]

8 minutes ago, Kruna said:

...In order to be able to save it as .jpeg you have to go to Layer >> Life Projection >> Remove Projection. Is there a wa to make changes after Remove Projection? When I go to Layer >> Life Projection >> Perspective Projection I have to do it all over from scratch, right?

In Affinity placed in (embedded) images or other affinity files, are treated as embedded image objects and the layer panel indicates those as (image) layers instead of (pixel) layers then. Such embedded objects can be manipulated on their own, indipendent from the active document they are placed in. If you double click on such an embedded object's layer in the layers panel, it usually will be opened an can be altered. If you then save that embedded one, any possible made changes should be taken over and visable in the parent/main document. - Further if you take a look at the layers panel, you can see that you can enable/disable individual layers (a layers corresponding check mark is then either checked or unchecked). Some adjustment/filter layers can also be reopened (changed) from there. So you can customize/adjust on your demand the visability and influence of certain layers like the perspective one etc. before exporting as JPG or whatever format.

[Kruna]

HI v_kyr,

I am sorry, but I quite dont understand what you mean? I mean in the video it is nothing said about embedded images or am I a completely blockhead?!

[telemax]

13 hours ago, Kruna said:

If I click the right one to turn it off, so that I can save as .jpeg the left layer also turns off.

Yes, you're right. To avoid this, place source object into rectangle or group.

[v_kyr]

In Affinity for mockups you can use embedded files as a an alternative to PS smart objects. The above shown by others here are symbols, which are avaiable in Affinity Designer, but are not default available in Affinity Photo, though you can reuse them from Designer in Photo, in case you have both apps. - For an APh example mockup see this.

 

[telemax]

For your tasks, you can use two solutions: 

1. Embedded document.
2. Symbols.

Search on YouTube, Affinity embedded document.
This will be other path for you. Embedded document work in AP & AD.

 

[telemax]

You can also use Artboards in Affinity Designer. This allows you to see multiple layouts at once.

 

 

[Kruna]

Wow!! Thank you guys, this is awesome. I tried the symbol version tody and it works prefectly, endless times thank you! Its really great that you guys helped me, now I can finally trash Adobe step by step!

I will also try the embedded document too, as it comes very close to the 'smart objects thing' from PS and I'll give a feedback on that too. And of course Artboards too.

I still have a couple of questions, so maybe you can give me some advice please.

What can I do if the images get pixeled when resizing?

I understood that in PS the smart objects does avoid pixeling (even though mine always got pixeled and I never knew what I did wrong).

In symbol version I tried to add some inner shadow and inner shine, but somehow it didnt show any change? Did I use the wrong layer? I tried several ones but without success.

 

And last but not least, these are mockups for kind of rectangle 'objects' like billboards. What would be the approach, if its eg. a bus like here:

 

https://goodmockups.com/free-back-of-bus-ad-branding-mockup-psd/

 

What would be the approach? Do I need to select brushtool?

 

Thanks and regards,

Kruna

 

 

 

 

[telemax]

9 hours ago, Kruna said:

What can I do if the images get pixeled when resizing?

I understood that in PS the smart objects does avoid pixeling (even though mine always got pixeled and I never knew what I did wrong).

Initially, each pixel layer in Affinity behaves like a Smart Object in Photoshop. It is not rasterized automatically when re-scaling.

If you see pixelated image after rescaling, it means that the document resolution is less than image resolution (AP only).
Increase the resolution of your document.

9 hours ago, Kruna said:

In symbol version I tried to add some inner shadow and inner shine, but somehow it didnt show any change? Did I use the wrong layer? I tried several ones but without success.

Shadows and other effects work in symbols. Perhaps you made a mistake somewhere.

  

9 hours ago, Kruna said:

And last but not least, these are mockups for kind of rectangle 'objects' like billboards. What would be the approach, if its eg. a bus like here:

 

https://goodmockups.com/free-back-of-bus-ad-branding-mockup-psd/

 

What would be the approach? Do I need to select brushtool?

But in this case, you need to create an additional vector or raster mask (any vector shape, or pixel layer). 

[Kruna]

Hello,

telemax,

 

thanks a lot for your answer.

I will try around with resizing till I get the right image size. Good to know that shadows and other effects work in symbols, so I will be learning by doing to find where I did the mistake.

 

Concerning the bus mockups, I am sorry, but I have no idea about vectors and raster masks and no idea how to do that. Is there maybe a tutorial I can watch at?

 

ty and regards,

Kruna

 

 

[telemax]

[Kruna]

Hi telemax, thanks a lot for your video. This is way too fast for my eyes!! I cant even watch that fast as you click and finish the mockup, incredible!!! I wish I would be able to achieve this one day too.

I will try later on, but it looks pretty understandable, thank you.

I have one more question, when you did the logo, what is the size of the document? Do you always use the same size of document or is it different every time depending on the actual image. If it depends, can you please explain me why you choose which size?

 

Excuse me for ask further, but how would be the whole side of branding like here? Or even the whole bus like including the front?

 

[Kruna]

Hello telemax,

 

I tried to follow your video, but right at the beginning it looks different in my mockup, eg where the logo is kind of 'over' the right window, lighter, but you can see the logo. Also in your video I can still see kind of grooves at the door or under the left window.

In my case, if I place a logo, you dont see anything 'behind'. I tried to decrease capacitiy, but I guess its not the way to achieve it, right?

[telemax]

8 hours ago, Kruna said:

This is way too fast for my eyes!! I cant even watch that fast as you click and finish the mockup, incredible!!!

Hi

This video was speed up 2, 3 and 4 times, only in routine operations 😁

 

8 hours ago, Kruna said:

I have one more question, when you did the logo, what is the size of the document? Do you always use the same size of document or is it different every time depending on the actual image. If it depends, can you please explain me why you choose which size?

For viewing on the device screen, i would use a resolution of 2500 px or bigger, on the wide side.

[telemax]

3 hours ago, Kruna said:

In my case, if I place a logo, you dont see anything 'behind'. I tried to decrease capacitiy, but I guess its not the way to achieve it, right?

Not completely understandable. Perhaps file from this tutorial will help: Perspective_Car.afdesign

[Kruna]

Thank you very much telemax for the file, now I got it! Right beside capacity, I had to change from normal to multiply. Ok, now I have an idea on how to do this kind of mockup. That was indeed very, very helpful! Also about sizes of documet.

Please excuse me, but I still need to ask further as I really want to migrate from PS to AF.

Please take a look at the file. I was kind of able to brand a bus in PS ( For noe I used your design as the other contains advertising and I am not sure if its allowed here or not).

I know that its not a professional work and I guess you would find tons of 'mistakes', and easier ways, but even in PS I am still beginner and far away from being advanced user.

Anyway to acomplish the work, I did it like in this video (Sorry for posting PS tutorials here, but I cant explain it better):

 

 

I opened the PS file in AF and tried to find out how to achieve the same branding in AF, but I cant make head or tail of it. Do you have an idea, how it would look like to do this work equivalent in AF? Is there maybe an equivalent tutorial about? Ok the way in PS is embedded document, which I dont use for now. But what I mean, is how to add lights and shadows, so that it would look pretty realistic?

Thanks a lot for taking so much time to help me. I really do appreciate!

Regards Kruna

bus.afphoto

[telemax]

On 5/20/2020 at 8:53 AM, Kruna said:

Please take a look at the file. I was kind of able to brand a bus in PS

This is one of many ways.

To move image inside the mask, you can use Lock Children option.

 

[Kruna]

OMG, this looks amazing!!! Thank you so much!!! I have to learn a lot now and will give it a try later on. Is this also possible to achieve with symbol version? I would just need to cut out the bus, right?

[telemax]

12 minutes ago, Kruna said:

Is this also possible to achieve with symbol version? I would just need to cut out the bus, right?

Yes, you can place a symbol in your mask layer (pixel layer).

I mean place mask in symbol 😓 

[Kruna]

Hi telemax,

Please apologize, I wouldnt like to be a pain in the neck, but I simply dont get it. I am trying with symbol version over and over again without success. I did everything like in symbol version, so far so good.

Then I cut out the bus. Do I actually need a mask layer? I mean can I simply drag the symbol image within the cutted bus? Well I tried out and suddenly there is a part of the image missing. On the other hand I tried to add lights and shadows, but it seems that nothing happens.

Then I placed a mask in symbol image but then als nothing happens. I placed the mask almost everywhere, same thing. Watching some tutorials didnt get me any further, I just got stucked. 😫

 

Here is my file (I didnt cut out the bus properly on purpose, so once I know how to manage everything, I will do better). What do I miss?

bus_with_symbol.afphoto