Mobile app version of vmapp.org
Login or Join
Bryan765

: Showing videos in website design mockups As most people do, before going in and coding the HTML/CSS of a site, I usually like to create the design in an application such as Photoshop (and

@Bryan765

Posted in: #AdobePhotoshop #AffinityDesigner #WebsiteDesign

As most people do, before going in and coding the HTML/CSS of a site, I usually like to create the design in an application such as Photoshop (and for recent projects, Affinity Designer) and then export the design as an image so that I can send it to the client and confirm they like the design.

I want to show that a design has a video background, and I'm not quite sure how I'd do this. I would just put a still from the video in the design, but then it isn't clear that it's a video and not an image, so I'd need to explain to them that it's a video, and they would need to be able to visualize it as a video.

I was thinking that perhaps I could somehow embed the video into the document and export it as a video, and just place that video in a HTML page so that it occupies the full width & they can scroll down it. This doesn't feel like a very good solution to me, especially since most design programs do not support this. However, I can't think of any better ideas on how to present it.

What are some good ways to present a design which has a video background as a key element in the design to the client, without having to code the whole website and (potentially) having to scrap it all?

(Answers which work with Adobe Photoshop or Affinity Designer are preferred)

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Bryan765

2 Comments

Sorted by latest first Latest Oldest Best

 

@Michele215

Probably one option is to actually prepare a template of a website with a video background.

Either you include the text and logos over the video inside the video itself or you can simply put a transparent png over a video.

This template will give you clues about specific problems on this. How the changing angle an motion of a video interacts with your design.

10% popularity Vote Up Vote Down


 

@Bethany839

You could place the video directly in your PSD mockup and then edit it into a short preview using the Timeline window under Window > Timeline. Then you could export it as an animated GIF using File > Export > Save for Web and Devices or as a video using File > Export > Render Video.

I would recommend video over GIF because the resolution will be restricted on a GIF.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme