Build EASILY Mind-blowing 3D Portfolio Website: Tutorial (Spline + Tilda)

in a world where competition is fierce and first impression matter your online portfolio can be the game changer you've been looking for it's not just about showcasing your work it's about creating an immersive experience that leaves a lasting impact clients and employers can Blown Away by the interactive experience it's like they step right into your creative world hi everyone I'm Victoria product designer and theater Creator and welcome to my creative Hub today we are going to build a super cool eye cage in the 3D portfolio website easy fast with no code I want to mention that in this video I want to teach you what to write in case studies how to organize website is portfolio today is all about pure creativity with a 3D for websites I want to show you that it's a easy fun and worth trying it just take a look at this mind-blowing website they'll make you want to stick around as they keep you engaged eager to explore and learn more about The Talented individual behind them right so let's begin to create our own one first of all let's create a 3D interactive scene which then will be added to the website for it go to spline.org it's a web platform tool design 3d with a very user-friendly interface in spline you can see a lot of nice 3D objects that you can modify and use on your website or create from scratch as we are going to do now and there are two ways for you to create this Sim create all Studio objects by yourself in spline or other software that will be longer but no less fun and exciting second option go to sketchfab or Turbo script through the libraries and find their 3D objects that you can use for your idea I usually follow two approaches first I browse through the spline Library if what I need is available there I use it otherwise I created myself alternatively I search for something that would have taken a long time to create in the project you can add not only 3D in those formats but also video images and music I prepared some objects from sketch therapy in advance to save time every object you can rotate scale and move [Music] I added the main object and now I'm going to add the floor to the scene and the desk doesn't float in the air [Music] to make adjustments to the selected object including changes to its color and other notifications look at the right sidebar the sidebar contains all the settings related to the selected object with essential options such as position this allows you to precisely change the object's position scale and rotation sniping this feature helps objects align with specific points or objects in the scene shape here you can modify the object's shape and geometry material this section offers a variety of options to enhance the object's appearance you can adjust the factors like color texture and lightning which are greatly impact how the object looks Additionally you can create multiple materials and experiment to find the one that best suits your needs by clicking the play button in the top menu you can preview the scene and get a glimpse of how it will appear on the website in the play mode you can resize the preview to see how your objects would appear on different screens it also allows you to preview animations and interactions that will be adding shortly now it's time to add interactivity to our project you can include various elements such as social media links project Links music videos and let your creativity flow the process is similar for each of these elements ensuring a consistent immigration user experience I am placing Instagram icon to add a link to my account and I will add a hover effect to the icon so users can easily understand that it's Interactive you also can add some additional signs of interactivity in splend you have two main options for adding animations actions or micro interactions States and events states allow you to Define different conditions for an object while events work with this stage to create interactions animations and other actions foreign speakers video object and background music that will be attached to the speaker the speaker will be act as a trigger to stop the music I'll create two states and make an event transition to indicate when the speaker is providing sound [Music] and then set up an action such as a mouse press or Mouse down to turn off the music [Music] let's see everything is on the place and the scene is ready it's time to prepare export and add this 3d21 website you should determine whether you need to have a ground or if it should be transparent you can change the background on the right panel by clicking on the scene not the object foreign Ty surprised by the expert option since planned you can export your rcd project in various ways including its link to display just the 3D content escort to embed on websites as an image video City formats and even for AR or 3D printing for now we need the viewer option after selecting it configure the place settings as needed [Music] before exporting it's important to run a test to ensure that your scene is optimized and will load them quickly on your website if you have heavy objects in your project as I have consider replacing optimizing them the run tests will identify any performance issues that need attention once everything is suggested to your liking click update viewer and then copy the embed code finally we can Implement our 3D content on our website I will demonstrate how to do this using the Delta website builder but you can follow a similar process on the other website Builders such as pix WordPress and others I'll create a new page and for demonstration I'll select one of the templates I've chosen these nice white orange one I opened to edit first blocked change a bit position of elements and I want to the first block will be the same background color is my 3D so I copy background color from spline to add 3D content I choose add HTML and paste MD code then save block changes and click preview so now we can see our CD on website [Music] with spline you can easily create Games characters and abstract 3D backgrounds for your or clients websites the possibilities are almost endless thank you so much for watching I hope you found this video informative and inspiring if you enjoy it and want to stay updated with the more exciting content like this please hit the Subscribe button and the notification Bell if you have any question feel free to ask in the comments until next time take care and stay creative

Channel: Victoria Azarova

Views: 39,867

Keywords: webdesigner, webdesign, freelancewebdesigner, UX, UXDESIGNER, ux/ui, ui, 3d, 3dartist, developer

Id: OnzkfM5y4xc

Length: 8min 40sec (520 seconds)

Published: Mon Sep 18 2023