WEB ELEMENTS

by Philippe Web Elements


July 12, 2021 at 6:32 PM    278



Web Elements a selection of creative ideas to inspire you may be you too would like to add something like this to your social page or website design. Great for advertising an event or sharing with friends on social media pages. If you have a website why not add some eye candy to intrigue your audience, leaving them wondering how you did it?

Animated logos, Composited Images, Special Effects etc the sky is the limit here as most ideas are possible with the software we have access to today. Playing around in After Effects (AE) and Photoshop software amongst others creating effects that take time but once you know how anything is possible!. I have added a selection in no particular order just to give you some ideas of what I am driving at. The first one I would like to showcase is a really nice fluid water effect done in After Effects using the wave world plug-in. This method uses texture depth map images that simulate ripples that then go on to affect the image below it in the layer hierarchy. The effect uses caustic also and then the composition is exported out as a .mov video file that you can then convert to .mp4 for the web. Now that I have the concept and all the mechanics worked out it can be easily adapted to many usages as the background image is easily interchangeable. This design was developed for a Facebook page publicity spot letting clients know that the swimming pool would be re-opening soon (after the period of closure due to the Covid-19).



The following video is another composition done using After Effects (AE). It is using a built-in particle system simulator and using animated sprites. These images of a bumblebee in this case, were modelled in Maya and rendered out as a series of .jpg images that were then imported into Photoshop and using the splice tool to create the sprite sheet. 400x400px images in an animated sequence. Your AE composition should be the same size and pre- composited in the particle system you can now make use of it setting the particles up to use the sprites. The original concept came about because I wanted to represent thhe artists on the hive project as bees!. This is infact really powerfull as the bees are hi-res models and they have an animated fur system on them (that's a lot of calculations to bee made) so how is it achieved well the answer is instancing.



Have some fun with Javascript this is a simple .gif image with a 35° movement when the character is idling and the script is using screen mouse position and direction +X & -X for changing the direction of the bee (otherwise, the bee would fly backwards which is not very professional!). TIP: When you are creating your .gif image sequence use the Matte colour function in Photoshop's export for web .gif options, this can be white or whatever colour your web page background colour is. Doing this will get rid of the little 1-pixel outline!. Fly around inside the blue square and see what happens?. This little effect is done using CSS and the content is hidden then revealed when the defined zone is activated...



dvd-cover-spoof


Look closely at the DVD cover image above, notice anything strange about it?. Yes it is a spoof of the original cover design. It's not that hard to do if you have some basic Photoshop skills. To start with you have two original images (1) the DVD cover and (2) the photo you want to manipulate. You need to cut out the original actors in the DVD cover (this you can do just roughly). With the photo duplicate it and use Threshold/ curves (background removal tool plug-in if you have one) to make it black & white this is just to make use of the quick selection tool and the reason in doing this is to create an alpha channel for the photo (jpg photos do not have transparency so no alpha channel). Make sure you are in your photo layer rasterize use the selection tool to select the white area the guys in this case then reverse the selection to cut out the background. Once you have your guy's cut out drag them into position over the original DVD cover layer scale if necessary. then use the rectangle selection tool on the DVD layer and use the Content-Aware solution to fill in the areas that are different between the original actors and the image you are adding. Voila, it's as simple as that the images below show you various steps mentioned above. In short, you needed to create an alpha channel for your photo and there are numerous ways of doing that. For the reflection layer in the water, it is just duplicated and mirrored with a degrade opacity mask used on the bottom of the legs. Use the alpha mask again to create a 2-pixel blur around the cut out of the guys add feather it finally add a little shadow in the area where the legs are in front of the wall and you should be good. A CG artist is someone that knows how to use the tools in the software... dvd-cover-spoof


Logos personal or corporate animated or static. Logos represent who you are or what your company represents so they are going to appear somewhere on your Website, social pages, e-mails or on your mobile phone as wallpaper, in promotional videos etc. Logos work for you so wherever you put them be proud of them they are a part of you. After having said all that it's not this particular logo that I want to bring your attention to that is not what is important, it could have been another example. What I want to bring your attention to is the method used for creating these beautifully bevelled edges for hi-resolution logo images. This example is not a 3d model as you might imagine it is made from Adobe Illustrator path curves and then using a plug-in called Element3d in After effects extruding the form using the imported path, very impressive results if you want my opinion...


logo-bevel


Leave a Comment:


Blog Search

the latest buzzz...

COMMING SOON... Tentacle rigging 4 weeks of testing out rigging concepts for joint chains with a final animator friendly control rig. I can tell you this is a real challenge there are lots of tutorials online on tentacle rigging but I didn't find one implimenting all the various methods into one tentacle rig!


DIRECT LINK

2021-07-09

UPDATED CUBEMAP - As I had quite a bit of interest in this article with over 400 page visits I added a virtual gallery. This should interest gallery owners, painters or sculpters that want to present their work in a virtual manner on the web.


DIRECT LINK

2021-07-08

UPDATED 360° PRODUCT VIEW - Added a 3d character animation using the same method and the results are interesting if you want to have an animation that you can scrub through frame by frame as this is a feature that not a lot of video players include.


DIRECT LINK

2021-06-11

UPDATED CHARACTER MODELLING - Added some more examples of my 3d/ 2d characters including some artwork I did for IOM UN MIGRATION. A childrens colouring book designed to educate young Ethiopian children the dangers of COVID-19 and some simple gests that they can learn to protect themselves.


DIRECT LINK

2021-06-05

UPDATED PRESENTATION - Another piece of comic strip artwork from featured artist 'Kickblaster' this time treating the COVID-19 vaccination hype...


DIRECT LINK