Brand: Coloso.
Price: 190 USD
Availability: InStock

Class Intro

Graphic designer, In Choi

With C4D and Three.js, begin your exploration into the realm of 3D interactive web design. Become a top-tier graphic designer by beginning your career in the quickly developing sector of 3D interactive web design.

*This trailer features dubbing in English. Please note that the course videos are not dubbed.

Explore the Possibilities Of Motion and Interaction In a 3D Website

Imagine being able to do more than only convert your 2D work into 3D images. What if you could add motion and interaction to a 3D website to make it move?

With C4D, graphic designers without any prior experience with 3D or coding can explore how to create dynamic and expressive 3D images, animations, creative coding, online user interfaces, and more!

Coloso In Choi From Concept to Creation: Building 3D Interactive Webs

With an easy yet engaging curriculum consisting of 50 chapters and 39 step-by-step exercises, Graphic Designer In Choi—who has worked with well-known companies—will dramatically decrease the entrance barrier to web programming, including JavaScript, HTML, and CSS.

Have a distinct portfolio of excellent, 3D interactive websites to give you an advantage in the employment market! Seize the chance to concurrently hone your coding and 3D graphic design talents.

Class Perks
Get These Coloso Exclusives

Unlimited Access to 30+ Hrs & 50 Chapters of Content
Essential Techniques for Interactive Webs from Professional Graphic Designer
Study Material Files Used in Class Exercises

Class Material Details

Essential Source Files

- Interaction file
- HTML file
- CSS file
- JS file
Significant Exercise Files

- Modeling file
- Cinema 4D file
Key Material Bundles

- Lecture plan file

Expert Graphic Designer In Choi 's Portfolio

Coloso Graphic Designer In Choi 's Portfolio

3D Web VCODE Portfolio

3D Key Visuals and Animations 2021 Seoul Biennale of Architecture and Urbanism

(Directed by Everyday Practice)
Daejeon Energy Station 3: Rise Up

Video Artist

“Ottchil, the Coated Splendor of Asian Lacquerwares” National Museum of Korea

(Designed by Everyday Practice)
Trippic Motion Graphics

Everything, excluding voice and sound

Why Take This Class?

The 3D Interactive Web Design Class That Breaks Away from Traditional Web Layouts

If you've been having difficulty using 3D sources on the web or find yourself dissatisfied with creating in 2D, then this is your chance to learn both traditional motion rendering and real-time 3D motion graphics, as well as how to apply them to develop dynamic websites!

In addition, In Choi will show you how to generate various versions of 3D models, animations, and interactions utilizing automated system generation and other internal sources. This course will help you develop as a designer capable of handling any media-related project by polishing your design, development, and planning abilities.

10+ Class Exercises

Step 1. 3D Graphics and Modeling

Practice beginner-level 3D modeling for graphic designers using C4D and create modeling files that can be used on the web.

Modeling 1.
Modeling 2.
Modeling 3.

Step 2. Implementing Interaction

Learn the basics of JavaScript and Three.js, necessary for moving 3D graphics on the web, and implement six types of interactive elements.

Step 3. 3D Interactive Website

Design three-themed spaces that respond to user input and create a fully functional 3D interactive website through modeling and rendering.

**The exercise above is an example that will actually be produced in the class.

Click on the image to check out the fully executed website.

In Choi
Graphic Designer

Hello and welcome! My name is In Choi, and I work as a front-end developer and graphic designer focusing in 2D and 3D motion graphics.

I began my work as a motion graphic designer and front-end developer at Everyday Practice graphic firm after majoring in visual design.

I presently own V-CODE Studio and am constantly active in motion graphic and web development projects with well-known local and international organizations such as Nike, Apple, Woowa Brothers, and others.

In addition, I work closely with domestic design firms and studios such as Everyday Practice, Ahn Graphics, and others.

Graphic Designer,
In Choi

[Current]
CEO of V-CODE Studio

[Previous]
Motion graphic designer and front-end developer at Everyday Practice

Projects & Awards

2022 Nike World Cup HERO: 3D Graphics and Motion
2021 main poster for the Seoul Biennale of Architecture and Urbanism: 3D Graphics and Motion
2021 Ahn Graphics Public Design Textbook: 3D Graphics
2021 development of information kiosk software for Singapore Management University
2020 Woowa Brothers Baemindaum, technology blog, and Woowa Brothers Creative website: Front-end developer
2020 Symbols of Happiness Exhibition: 3D Graphics, Motion, and Front-end Developer

Instagram

Class Highlights

Learn High-Quality 3D Web Design Through Practical Techniques

You will not only create interesting motion websites, but you will also dig into complex techniques like as embedding user interactions directly onto the website, which will significantly expand your expertise of the front-end.

Trendy 3D Graphics Creation Method Optimized for Websites

I'll cover the entire range of 3D visual expression—from foundations to application and advanced skills—from learning how to set up web-readable formats to developing fashionable balloon material and wrinkle textures utilizing simple C4D capabilities.

Practical Knowledge That Can Be Immediately Applied to Portfolio Production and Work

We'll explore how domestic and foreign businesses use interactive websites, learn about 3D graphics, modeling, and creative coding, and build eye-catching designs to use in real-world settings.

Class Details
You'll Learn

3D Graphics and Modeling: Intro to C4D

With more than 30 exercises, you can discover how to use the C4D tool and gain knowledge of fundamental modeling shape, texturing, color, lighting, camera settings, animations, and more.
Coding Basics 1: JavaScript

Gain an understanding of JavaScript fundamentals to establish the groundwork for web design and implementation. These include kinds of variables, loops and conditionals, functionality, and function-based interactions.
Coding Basics 2: Three.js

You will learn about camera angles and movement, global light sources, and directed light sources, and even attempt building them up yourself, all based on the fundamentals of Three.js, a typical library of JavaScript.

Creative Coding: 6 Mini Exercises

Use the modeled designs to create practice interactions and particles that react to clicks, arrow keys, and scrolling. Discover how to add decoration to the screen and try out different approaches like text that flows.
3D Interactive Website Creation 1: Design

Utilizing what we've learnt thus far, create three-themed interactive web pages. Use 3D modeling, scene composition, texturing, and baking techniques to generate 3D creations that may be used online.
3D Interactive Website Creation 2: Publishing

Learn the fundamentals of HTML and CSS, create a list of scenarios to see how the samples you worked on will appear on the homepage, make minor adjustments, and proceed with the final publication

Unlimited Access
Best Price

Buy now, get unlimited access.
12/31 (Sat) (UTC-7) Special offer ends soon.

This special offer ends soon.
Buy now and save!

Today's Deal

Curriculum
In-Depth Look

SECTION 01. Orientation and Preparation

01. Orientation - Instructor Introduction
- Curriculum Introduction

02. Installation of Essential 3D Programs and Development Tools - Installing Maxon C4D and Redshift, and requesting trial licenses
- Information for requesting Maxon student license
- Information for VSCode and Node.js installation

SECTION 02. Introduction to 3D Graphics and Modeling: C4D

03. About C4D Basic Interface - Exploring the basic operation and interface of C4D

04. Setting up Your Work Environment - 3D Understanding Basic Shapes

05. Understanding Basic Shapes - Looking at C4D's basic shapes such as cube, sphere, and torus
- Handling and transforming basic shapes

06. Transforming Models - Applying effects to basic shapes
- Emphasizing by enlarging specific parts
- Making crumpled wrinkles
- Giving balloon-like effects

07. Modeling with Vector Graphics - How to convert 2D vector graphics in Illustrator to 3D in C4D
- Creating lightning-shaped icons, mailboxes, map markers, and message icons
- Creating 3D text

08. Modeling with Organic Lines - Modeling using various lines
- Creating speaker, bell-shaped notifications, rocket, and filter icons

09. Atypical Modeling - How to create various models with 3D shapes
- Making three types of cushion buttons, cute clouds, videos, settings icons, and mailboxes

10. Basics of Materials - Coloring and texturing 3D model using C4D's standard material

11. Basic Animation - Adding keyframe animation to some of the models created in this Section

12. Exporting for Web - Learning how to export in a format that can be read on web

SECTION 03. Creative Coding: JavaScript

13. Setting up Webpack Environment and Basic Explanation - Analyzing sample source code files
- Learning basic web development environment elements

14. Basics of JavaScript: Data Types - JavaScript language basics
- First steps in JavaScript: Exploring types of variables

15. Basics of JavaScript: Loops and Conditions - Understanding the most useful loops and conditions in JavaScript syntax

16. Basics of JavaScript: Creating Function with Functionality - Implementing simple features by giving direct interaction

17. Basics of JavaScript: Class - Learning class syntax
- Making your own code collection that can be used elsewhere and naming it

18. Basics of JavaScript: Concepts of Module-Based JavaScript - Learning module structure that makes it easy to use other JavaScript files
- Using frequently used JavaScript libraries and custom-made JavaScript files

SECTION 04. Creative Coding: Three.js

19. Loading and Getting Ready with Three.js Library - Installing and setting up JavaScript Library Three.js

20. Basics of Three.js: Camera Setup - Studying camera angle and movement
- Setting basic camera movements by attaching OrbitControl

21. Basics of Three.js: Real-Time Lighting Setup - Studying global lighting sources and directional lighting sources
- Setting up lighting for future work environments

22. Basics of Three.js: Loading Models - Loading previously worked modeling into Three.js

SECTION 05. Creative Coding: Three.js Exercises

23. Exercise 1: Floating in Space - Setting up various controllers that can move screens

24. Exercise 2: Click Interaction - Creating an interaction that plays an animation when the screen is clicked

25. Exercise 3: Real-Time Synchronization - Creating interactions that change according to real-time

26. Exercise 4: Scroll Interaction - Creating an interaction that changes the screen according to scroll

27. Exercise 5: Creating Particles - Learning how to decorate screens by generating particles

28. Exercise 6: Creating Flowing Text - Making animation where text flows along modeling surface

SECTION 06. Advanced 3D Graphics and Modeling: Redshift

29. Setting up Redshift - Checking Redshift setup method and basic interface

30. Advanced Material 1 - Learning Redshift node interface
- Studying material properties expressed in nodes

31. Advanced Material 2 - Creating various textures using noise maps
- Creating textures with pattern shapes
- Learning how to create realistic textures by importing other image files

32. Understanding UV - Understanding how image textures applied to materials affect modeling
- Learning correct mapping method simply

33. Bringing Realistic Textures to the Web through Baking - Learning how to import rich textures from Cinema 4D that are difficult to express in Three.js' real-time rendering

34. Importing 3D Animations - Learning how to import animations created in Cinema 4D into Three.js

35. Understanding and Applying Post-Processing - Understanding post-processing
- Applying light scattering effects and camera lens blur effects

SECTION 07. 3D Interactive Website: Design

36. Applied Exercise 1: Creating an Icon Screen
(Part 1) - Screen composition and animation work
- Making it usable on the web through the final baking process

37. Applied Exercise 1: Creating an Icon Screen
(Part 2) - Importing 3D file exported from C4D into Three.js
- Play animation with simple interactions

38. Applied Exercise 2: Building My Own Workspace
(Part 1) - Dividing model layers considering interaction
- Making it usable on the web through the final baking process

39. Applied Exercise 2: Building My Own Workspace
(Part 2) - Adding interactions to model files
- Implementing color change of rocket and work background conversion
- Adding interactions that allow for rocket launch

40. Applied Exercise 3: Creating a Cosmic Space
(Part 1) - Space creation, screen composition, and animation work
- Making it usable on the web through the final baking process

41. Applied Exercise 3: Creating a Cosmic Space
(Part 2) - Configuring rich space animation by repeating animation playback

SECTION 08. 3D Interactive Website: Implementation

42. Creating the Overall Scene Structure in Cinema 4D - Designing how it looks on a homepage
- Configuring environment and editing work

43. Optimizing Large 3D Scenes for Light Web Experience - Studying optimization techniques for smooth operation without scene interruption

44. Controlling Camera Movement on Web - Using Three.js to write functions that allow viewing three application exercises without interruption

45. Basics of Web UI: Understanding the HTML Basic Structure - Understanding the structure of HTML, which is the skeleton of a website, and learning commonly used tags

46. Basics of Web UI: Understanding the CSS Basic Structure - Looking at the structure of CSS corresponding to website design
- Changing the design of tags configured earlier

47. Application of Web UI: Creating Basic UI - Looking at ways to place necessary information such as screen transition buttons and text on screen

48. Application of Web UI: Creating Loading Screen - Creating loading screen seen while modeling is loading

49. Make Your Website Public - Publicly releasing completed webpage via GitHub page so others can visit

SECTION 09. Conclusion: Direction for the Future

50. Prospects for Further Study as a Developer and Designer - Checking out reference materials for Three.js
- Exploring advanced interactive web design and development roadmap

*The release date of this class, curriculum images, and associated content can be changed without prior notice.
** Class videos may be seperated for a more streamlined viewing experience

Interview with
Graphic Designer, In Choi

Question.01
What do you think is your biggest strength?

I handled front-end development and motion graphics at Everyday Practice design studio when I first started my career. I've continued to study both areas ever since. My capacity to understand and communicate ideas cohesively in the fields of web development and 3D graphics is, I feel, my biggest talent.

Question.02
What are the key points of this class?

This course offers a comprehensive curriculum that lets you experience cutting-edge, 2D-only interactive web design in 3D and real development. I think graphic artists who have previously struggled with 3D or coding will find this very useful.

Question.03
Who would you recommend this class to?

In the graphic design sector, more clients than ever before have recently asked for 3D graphics, motion graphics, and website creation. As a result, I suggest this course to designers who wish to create an impression with their portfolio sites and who are interested in coding, 3D graphics, or both.

Required Programs

This course will use
- Cinema 4D
- Redshift,
- Visual Studio Code
- Node.js
- JavaScript,
- Three.js

Please purchase and install these program(s) for an optimized lecture experience.

*These programs and/or materials will not be provided with the lecture.

Cinema 4D Redshift Visual Studio Code Node JavaScript Threejs

Recommended Class
Like this class?
Then check these out!

ข้อควรระวัง

Online Course Policies and Procedures

- This product provides access to the video lectures online (Excluding products categorized as Assets). - Under certain circumstances, discounts may end early or be extended without prior notice. - For pre-ordered courses, the content and the lecture videos will be released sequentially according to the schedule. The Course Start Date will be set to the release date of the first lecture video. - You will gain immediate access to the course through My Page upon completing registration and payment. Total Course Duration: - The Standard Access (Paid access) period lasts for the first 15 days and Unlimited Free Access period will begin from the 16th day. Both the Standard and Unlimited Free Access periods offer the equal viewing experience to the content. - Course Start Date: The estimation of the Course Start Date will be based on the completion date of the payment. Immediate access to the lecture videos will be granted through My Page. (For pre-ordered courses, the start date will be the release date of the first lecture video.) - In case the course start date is postponed due to extenuating circumstances on Coloso’s end, the start date will be adjusted accordingly.

IMPORTANT NOTICE

*Please note that certain aspects of this course, including the release date, curriculum images, and associated content, are subject to change without prior notification.
*Would you like to learn more about our refund policy? Please check ▶ here
*Please check our ▶ FAQ for Copyright and Proprietary Rights, User-Generated Content, Security, and Violation information.

重要公告

*保留未事前告知而更改本網頁資訊的權利
*欲進一步瞭解退款政策的細節，請由 ▶ 此處確認。
*請至 ▶FAQ頁面查看有關版權及所有權、使用者製作內容、資料安全及違反等相關資訊。

Aviso Importante

*Tenga en cuenta que la información de esta página está sujeta a cambios sin previo aviso.
* ¿Le gustaría saber más sobre nuestra política de reembolso? Por favor, compruebe ▶ aquí
*Por favor, compruebe nuestras ▶ FAQ para los derechos de autor y derechos de propiedad, contenido generado por el usuario, seguridad e información de violación.

ASSET Product Precautions

- This product is strictly prohibited to resell, redistribute, steal, or transfer. - The original images and simple edited images of this product cannot be transferred, distributed, or sold. - This product can be refunded only before the class video is released. - You can find this product on [My Class] > [Class Materials]