community COLORFUL resources

[viking]

COLORFUL resources

View File

---

# WHAT IS COLORFUL?
COLORFUL is a complete and coherent high quality graphic set, around a unique design. Made with love in France. I hope you like it ! ?
Here are planned development axes:

• OFFICIAL COLORFUL ASSET :

• COLORFUL Theme : The main hub, a unique interface for BigBox. Design by me, coded by @faeran
• COLORFUL Platform Video : Complete 4K video set, with a unique design.
• COLORFUL Source : To involve the community in the platform video creation.
• COLORFUL BigBox Startup Video : custom video to match the general design.
• COLORFUL Hardware Media PNG (1x1) : Taken from my videos, the 1x1 PNG set. (new)
• COLORFUL Startup Theme : (soon)
• COLORFUL Pause Theme : (soon)

• RECOMMENDED COMMUNITY ASSET :

• Redrawn Platform ClearLogo by @Dan Patrick
• Colorful "Playlist" PNG set by @Klopjero
• Colorful custom theme for Android by @Bawnanable
• Platform Funtech Super A'can & Platform Arcade Kaneko by @evo1man
• Alternative Colorful Platform ClearLogo Set by @soqueroeu
• Alternative Startup Theme (Minimal-Colorful) by @Palada
• Recommended SoundPack with Steam Deck UI by @Phox

 

# WANT TO CREATE VIDEO? YOU ARE IN THE RIGHT PLACE!
On this page we are talking about COLORFUL RESOURCES.
Have you considered creating a new Platform/Category/Playlist video for Colorful? This is the place to be! Done, by and for the community.
You will find below my guideline and quick tutorial. If you are tempted by the adventure, please respect the rules below! Thx !!

# READY FOR ADVENTURE? FOLLOW THE GUIDE!
Before we start going into the technique, let's set up some basics on how we're going to do it.
The idea is not to make me a tyrant, but to keep an overall coherence of design, style and to centralize uploads/downloads on a single page.

The basic principles :

• On this Resources Page, you will find:  1 archive = 1 platform sources.   (From me or from you)
• On the Platform Video Page, you will find: 1 file = 1 video.   (From me or from you)

Here are the rules to follow:

• ONLY use this forum thread for ALL that concerns the video creation. Form start to finish. Please, not used the comment section below.
• Announced on what platform(s) you want to work. (New or rebuild)
• Post your work in progress! This is very important, to have feedback from community and me.
• Follow the guideline below.
• There can be several videos from the same platform. I will add your credits. But keep the same background color please, for theme integration.
• Don't be susceptible if we make comments. ?
• At the end, send me your video and source files. I will upload them to the corresponding pages, with your credits.
• Here, I will act as a moderator. 

The goal of all these rules is to keep the set consistent, allow the community to take part in creation and centralize everything for ease of use.

About software, I used Photoshop and After Effect in their old version (CS6) and without any plugin, to maximize compatibility with your systems.
You can use other software of course, but try not to use plugins.

 

# GUIDELINES?
I created these guidelines, based on my experience with NOSTALGIA.
They have a whole purpose and I ask you to respect them.
Here is the principle:

You can find these construction lines, as guides, in the Photoshop (.PSD) files, in each Platform archive.
The goal is to let the design breathe, while allowing great versatility of use. Whether in full screen, in 4:3 or 1:1, this video set remains usable.
I have created a theme around this set, but I hope it will not be the only one! A word for the wise ...

 

# WHAT ARE THE STEPS ?
Briefly, the steps I follow for each video.

1. Find photo sources for each element of the montage. I try to put the credits in each archive.
2. Carry out the editing in Photoshop, keeping a layer structure common to each platform.
3. From Photoshop, save each layer group in separate PNG files.
4. Find a Gameplay video (EmuMovies for most) and the boot section (Youtube for most)
5. Go to After Effect, gather everything in 4K and render a "master" video file. (understand heavy one)
6. Use VidCoder to make my different outputs (4K h264 / 4K h265 / HD h264) and size compression. <UPDATE>

A quick word for the arcade cabinet:
It's too hard to find good photo sources. So I made them all in full 3D (CGI).
If you have the knowledge, go there! Otherwise, I create my renderings so that they can be edited in Photoshop. ?

 

# IN DETAIL, PHOTOSHOP ?
I'm not going to do a beginner tutorial for Photoshop. Here's how I sort my slaps.
It would be good to respect this nomenclature, always to maintain consistency.
And post on this forum thread your work in progress !

Once the editing is finalized, I export these slaps in 4 PNG files, to go under After Effect. (see text in the left column above)
Why in PNG and not directly use the PSD? Because I noticed "more file corruption with the PSD. In the context of exchange with the community, the PNG is much more universal for people not using the Adobe suite.

 

# IN DETAIL, AFTER EFFECT ?
Here it is more difficult to explain yourself with words or pictures.
But here is the basic principle:

The Mask Layer will be used for the Gameplay video.
And post on this forum thread your work in progress !
I let you open the files to better understand. If the need arises, I will come and fill this part.

 

# IN DETAIL, VIDCODER ?  (update aug 23, 2022)
To optimize the size of the videos and multiply the formats, I use the free and open-source VIDCODER. (also on Microsoft Store)
It is rather simple, allows batch processing, and as there are finally few "moving" elements in my videos, the optimization is pretty good.

I created and tested 3 profiles that you can import and use. Here they are : VidCoder_Viking_Setting_Update.zip

 

# AT THE END, SHARING !
Once finished, send me the files directly:

• Video in the 3 export formats from VidCoder.
• Your source archive, trying to keep the same structure as mine.

I take care of the conformation of the names, the addition of the credit, and the upload on the right pages.
Thank you in advance !

 

# SPECIAL THANKS : 

• @Jason Carr for his hard work on LaunchBox/BigBox!
• To all Patreon guys! A GIANT THANKS to all of you!!! ?
• The whote community for yout support!

# SOURCES - COPYRIGHT :

• Each brand of hardware and software here represented as a tribute.
• Emumovies for (most) gameplay videos
• The Vanamo Online Game Museum for (most) photos.
• If special credit, see .TXT file in the corresponding source archive. (soon)

# PLATFORM COVERED / CREDITBOARD :
See video release post for more details ! 

 

 

---

• Submitter
  viking
• Submitted
  05/19/2020
• Category
  Third-party Apps and Plugins

 

[sagaopc]

There's how to edit theme now or only create videos?

[viking]

Here, it's all about create video for COLORFUL set, by the community, for the community. ?

[pofo14]

I am going through with trying to learn how to create a platform video, and have a few conceptual questions.   I don't have the exact toolset you do - and don't expect you to know the details of these tools, but I want to get an idea of the process for making the video.

For the image editing I am using GIMP

For the video editing I am trying out Filmora9

For the video editing piece - what I have found I can do is use the green screen effect to insert a video into the "picture" area on any of the TVs / Displays.   I think this will work - but wanted to check if this is the proper way to insert a video.

I also wanted to understand how the process to create the playlist videos.  I imagine this process is more complex with all the TVs at different angles, some of which are "3-D" rotations.   Is it safe to say changing these videos would be more complex for a beginner and probably not the place to start?

Any guidance on this part of the process would be appreciated.

Thanks

[modjoo]

here's some WIP from me for the missing platform videos.. getting all these angles right is a pain in the..

anyways, lets get these platform videos finished. if youre ok with my results, then ill look into Adobe AE for the vid part.. havent done this before. seems fun

tell me what you think!

 

Edited August 2, 2020 by modjoo

[viking]

On 7/12/2020 at 6:37 PM, pofo14 said:

I am going through with trying to learn how to create a platform video, and have a few conceptual questions.   I don't have the exact toolset you do - and don't expect you to know the details of these tools, but I want to get an idea of the process for making the video.

For the image editing I am using GIMP

For the video editing I am trying out Filmora9

For the video editing piece - what I have found I can do is use the green screen effect to insert a video into the "picture" area on any of the TVs / Displays.   I think this will work - but wanted to check if this is the proper way to insert a video.

I also wanted to understand how the process to create the playlist videos.  I imagine this process is more complex with all the TVs at different angles, some of which are "3-D" rotations.   Is it safe to say changing these videos would be more complex for a beginner and probably not the place to start?

Any guidance on this part of the process would be appreciated.

Thanks

Hi Pofo14,
I do not know enough about its software to guide the details.

Yes, the green background should work, but I prefer to use "masks", more reliable because whatever their color.

Distorting GamePlay video is easy with After Effect. But yes, the easiest are the platforms with an LCD screen. (Flat, without deformation, without CRT effect)

Noted, I will detail more the process in the tutorial.

 

[viking]

On 8/2/2020 at 3:55 PM, modjoo said:

here's some WIP from me for the missing platform videos.. getting all these angles right is a pain in the..

anyways, lets get these platform videos finished. if youre ok with my results, then ill look into Adobe AE for the vid part.. havent done this before. seems fun

tell me what you think!

 

NICE Modjoo !!

Already answered by MP, but I also started working on the videos for: "Vanilla Arcade Playlist".
Of course, you can continue the work on your own, that will leave the choice to the community! ?

I'm just starting with 4 videos of 40. Here is an overview:

Yes, that's a lot of yellow! But that's normal :
- Yellow for the Capcom logo.
- Yellow, tribute to the PONG cabinet for Atari.

There will be many other colors on the others

[Hazuki]

Hi all,

Okey so I moved this to the right thread. Sorry about that.
Anyway Im working on 3 systems. Atari Jaguar CD, Casio Loopy and Sony PS Vita.

Im not really that good with photoshop (or any photo editing software), but I'll give a try.

Im not sure about the drop shadow on the Atari and Casio, so any advice or tips and tricks would be helpful.

And for the vita I'm looking for a better system image, but overall im happy with it.

Once the shadows are done I'll move on to adding some accessories.

Edited October 17, 2020 by Hazuki

[Ckau]

@viking thx, u are best of the best!) Can u share "Favorite_Title_VHS_OK.mp4" template please?

[viking]

On 10/17/2020 at 11:57 AM, Hazuki said:

Hi all,

Okey so I moved this to the right thread. Sorry about that.
Anyway Im working on 3 systems. Atari Jaguar CD, Casio Loopy and Sony PS Vita.

Im not really that good with photoshop (or any photo editing software), but I'll give a try.

Im not sure about the drop shadow on the Atari and Casio, so any advice or tips and tricks would be helpful.

And for the vita I'm looking for a better system image, but overall im happy with it.

Once the shadows are done I'll move on to adding some accessories.

Nice !!!!!!!!!
I really like the composition and the background colors.

About VITA :
Try to add effects on top of the screen. (Shadow, reflect, fingerprint) Look at what I did on the PSP for example.
Using Photoshop's drop shadow tool is OK for handhelds. Just try to have a small darker contact area, closer to the vita.
Ideally, you will need a photo of the Vita. Not a vector mockup. It will make it more realistic.
You can remove the thin white band around the Vita with=>   Select Vita layer, go to : Layer menu on top > Cache > Remove Fringes ...

About the other 2 :
Here, the shadow cannot be generated by the DropShadow tool. You have to paint it imagining how the shadow will naturally arise. Or a can near.
Create an empty layer below and use the brush tool, giving it a very squashed oval shape and 25% opacity. Then paint the shadow. Don't hesitate to make plenty of layers for each area or effect. When you are satisfied, collapse all your shadow layers in one.

It is not easy to explain in words. I will try to take a video capture of my screen. A kind of tutorial without sound.

On 10/21/2020 at 7:51 AM, Ckau said:

@viking thx, u are best of the best!) Can u share "Favorite_Title_VHS_OK.mp4" template please?

Yes of course !
This is a freebie that I found on this site: https://www.enchanted.media/downloads/vhs-video-effect-overlay-for-after-effects/

I simply replaced the video footage with an image I created. I don't have a PSD here, but the PNGs are simple enough and very easy to recreate.
(A flat logo with light dropshadow, color BG, strong vignetting, A little bit of blur ...)
Here is the full ZIP file : VHS Overlay for After Effects.zip
Here is my PNGs :

[Hazuki]

10 hours ago, viking said:

Here, the shadow cannot be generated by the DropShadow tool. You have to paint it imagining how the shadow will naturally arise. Or a can near.
Create an empty layer below and use the brush tool, giving it a very squashed oval shape and 25% opacity. Then paint the shadow. Don't hesitate to make plenty of layers for each area or effect. When you are satisfied, collapse all your shadow layers in one.

Thank you viking. This is just what I needed. I gave it a little try and it will take my some time to master, but I think it will look good once it’s done. I also found the GameCube resource files helpful.

Seeing the settings you use really helped a lot.

I’m a been under the weather at the moment, so I want be working on anything until I’m better, but once I have something new I'll post it here

Once again thank you

[el Fredo]

Hello folks,

first a big thumbs up to @viking for his great theme, the amazing platform videos and his tutorials here in this thread.

Although I have been using Adobe Premiere for years, I have no idea about Photoshop or After Effects. I've been meaning to teach myself these two programs for a while now. And since I noticed that one platform video that is important to me is missing - the one for the Commodore 64 - well, now I have a nice "practice project".

The hardest part is really finding a decent photo of the device. I finally found one via Google Image Search on Wikipedia and spent a lot of time with cropping, shadowing as well as adding the floppy disk (I manually labeled it with Giana Sisters and adjusted it in perspective). You can see the result on the attached screenshot. By the way, I took the joystick from Viking's Amiga template and simply mirrored it horizontally.

Tomorrow I will continue with the layers Screen Mask, Screen Shadow and Screen Reflect. And then let's see how I do in After Effects.

[el Fredo]

This morning I added a second disk, created the layers for Screen Mask, Screen Shadow and Screen Reflect and retouched the blue shimmer at the top of the Commodore monitor.

[viking]

Wow !!!  Niiiiiiice @el Fredo !!!!!  
Really good work!

(sorry for the late reply: vacation with children ^^)

I don't have much to add. That's realy great !
Maybe just the background color which is a bit dark?
Trie to pic one of this color : 

And last note, the verticals which give a little big deformation.
Maybe try to straighten the whole in Photoshop?
+ focal deformation correction in "Filter > Lens Correction"

[el Fredo]

On 1/4/2021 at 12:20 PM, viking said:

Maybe just the background color which is a bit dark?

Yes, you are right. To be honest, I haven't bothered about the background colour yet, because it's very easy to change afterwards. I decided to use the light blue from the stripe of the C64 logo - all other colours look too aggressive... But I have noticed something: All platform videos in my category "Computers" now have a light blue background: Windows, MS-DOS, Amiga and now C64. Is that okay, what do you think?

On 1/4/2021 at 12:20 PM, viking said:

And last note, the verticals which give a little big deformation.
Maybe try to straighten the whole in Photoshop?
+ focal deformation correction in "Filter > Lens Correction"

I think this is where I come to the end with my Photoshop skills ? I must note that the monitor is not a separate layer. The whole setup is a bitmap. So when I apply the lens Correction, for example the floppy drive becomes skewed. I have therefore tried the transormation mode, where you put a grid over the image and can bend individual nodes (unfortunately I don't know what this is called in English). And unfortunately I can't do that perfectly... It's difficult without a pen, only with a mouse and without a steady hand. Please see attached screenshot.

I still have one question: The videos are to be compressed with VidCoder - that's clear. But which export settings do I use in After Effects beforehand?

[viking]

Nice !!!!!!! 

For the blue background color, you're right. But hey, not too much choice if you remain consistent with the hardware. It remains to hope for a shade of blue!
You can try the pipette on the logo, then adjust it a bit. That does not flash eyes! No need to stay exactly on the original color!

Your modification on the deformation are perfect! (To make it easier for you, you can detach the screen) 
But don't touch anything anymore: it's perfect!

One last remark (no obligation)
Drop shadow does not work very well behind screen and floppy drive. There should be some at ground level, but not behind.

Again :  realy niiiiiice work !

[OdinsPlayground]

I strongly recommend drawing out the shadow how it naturally would fall, on it's own layer. Then applying a low % gaussian blur for near contact shadows, and then apply a tilt shift blur for the gradual blur increase further away from the object. If you share the PSD above, I could do a quick pass to show what I mean. 

[el Fredo]

Okay, I played around a bit with the shadow (as a separate layer). Here I simply lack the experience of how it looks good and natural... The background colour is now more like the blue from the Commodore logo. Attached is the new screenshot. On this one, the floppy and monitor LEDs are off. But I want to animate them in After Effects.

@viking What export settings should I use in Adobe Media Encoder before running the file through VidCoder?

[viking]

Realy nice !!!!  

About AE export setting, I don't know. I use a old adobe version (CS6) without "Adobe Media Encoder".

Just export as MP4 H.264. No "real 4K" export option on my old version.

[el Fredo]

On 1/6/2021 at 2:04 PM, viking said:

About AE export setting, I don't know. I use a old adobe version (CS6) without "Adobe Media Encoder".

Just export as MP4 H.264. No "real 4K" export option on my old version.

Okay, I understand. In the current version I can only export to Premiere, Cinema 4D or Media Encoder. But anyway, I will make sure that the final video files meet your specifications.

Here is a preview version:

 

Edited January 9, 2021 by el Fredo