[요약] 피그마 미드저니 애니메이션 튜토리얼 - 패러럭스 효과 + mp4 :: with AI

> English Summary

 

[ 요약 ]

이 튜토리얼에서는 MP4 파일과 생성된 이미지를 사용하여 피그마에서 간단한 애니메이션 프로토타입을 제작하는 방법을 배웁니다.
저자는 프로젝트용 에셋 제작에 대한 단계별 지침을 제공하고 큐브, 블록체인, 미니멀 클린 룩, 시네마틱 조명, 극사실주의와 같은 프롬프트를 사용하여 이미지의 변형을 만드는 과정을 공유하며 프롬프트를 사용하여 제작 과정을 동영상으로 찍는 방법과 에셋을 다운로드하는 방법도 설명합니다.
피그마 프로젝트로 넘어가서, 저자는 포토샵을 사용하여 텍스트를 준비하고 첫 화면의 배경을 만드는 방법을 시연하고, 선형 그라데이션이 있는 사각형을 추가하여 배경의 날카로운 모서리를 수정하는 방법과 펜 도구를 사용하여 피그마에서 이미지를 분리하고 내보내는 방법을 설명하며, 이미지를 아트보드에 추가하고 그림자와 함께 그룹화하고 선을 추가하고 색상을 변경하고 스톤을 연결하고 블록 체인 솔루션을 설명하는 데 사용하는 방법을 보여 줍니다.
마지막으로 레이어를 잠그고 요소의 색상과 위치를 조정하는 방법을 보여줍니다.
이 지침을 따라하면 부드러운 전환과 애니메이션이 포함된 멋진 프로토타입을 만들 수 있습니다.
이 글은 포토샵과 피그마를 사용하여 이미지의 색상을 일치시키고 디자인 프로젝트의 그래픽 요소를 만드는 방법에 대한 튜토리얼입니다.
레이어 분리, 색상 조정, 혼합 모드, 가장자리 지우기, 도형 만들기, 마스크 사용, 이미지 배치와 같은 주제를 다룹니다.
저자는 컨설팅, 문서화, 마케팅 및 홍보, 디자인 및 개발 등 웹페이지의 다양한 섹션을 위한 그래픽 요소를 만드는 방법을 독자에게 설명합니다.
또한 마우스 움직임 효과가 있는 직사각형의 동전 로고를 만드는 방법도 보여줍니다.
독자는 제공된 단계를 따라 자신만의 프로젝트를 만들어 보시기 바랍니다.
이 문서에서는 직사각형과 로고로 디자인을 만들고, 유리 효과와 애니메이션을 추가하고, Mock Plus라는 도구를 사용하여 프로젝트에 애니메이션을 적용하는 방법에 대해 설명합니다.
직사각형 크기를 20으로 줄이고 유사한 요소를 복사하는 컴포넌트를 만들 것을 제안합니다.
또한 선과 배경을 배치하고, 로고의 크기를 조정하고 색상을 변경하고, 흐림과 획으로 유리 효과를 추가하는 방법도 알려줍니다.
그런 다음 기능, 리소스 및 공동 작업 옵션을 강조하면서 Mock Plus를 소개합니다.
저자는 시차 및 줌 효과를 추가하고 디자인에 비디오 요소를 포함할 계획입니다.
이 문서는 독자들에게 자세한 정보 및 등록을 위해 설명의 스토어 링크를 확인하도록 초대합니다.
이 문서에서는 Adobe 소프트웨어를 사용하여 디자인 프로젝트에서 부드러운 전환과 애니메이션을 만드는 프로세스를 설명합니다.
비디오 라인과 디자인 일치시키기, 레벨 조정 레이어 만들기, 비디오 렌더링하기, 시차 효과 추가하기 등의 단계를 통해 독자를 안내합니다.
또한 이미지 위로 마우스를 가져가면서 줌 효과를 만드는 방법과 아트보드를 연결하고 최적의 결과를 위해 설정을 조정하는 방법에 대한 자세한 지침을 제공합니다.
이러한 지침을 따르려면 Adobe 소프트웨어와 기본 디자인 원칙에 어느 정도 익숙해야 합니다.
저자는 독자가 애니메이션을 테스트하고 필요에 따라 설정을 조정할 것을 권장합니다.
궁극적으로 목표는 매력적이고 시각적으로 매력적인 디자인을 만드는 것입니다.
이 문서에서는 아트보드를 복제 및 편집하고, 시차 효과를 만들고, 디자인 탭에서 변형 구성 요소를 사용하여 로고를 애니메이션하는 방법에 대한 지침을 제공합니다.
또한 이름이 같은 그룹과 관련된 문제를 해결하고 레이어의 타이밍과 움직임을 조정하는 방법에 대한 팁도 제공합니다.
독자는 제공된 단계를 따라 자신만의 디자인을 실험해 보시기 바랍니다.
이 문서는 느린 효과와 비디오 배경을 사용하여 흥미로운 로고 연장 애니메이션을 만드는 방법에 대한 자습서입니다.
작성자는 시각적으로 더 매력적인 효과를 위해 로고 상자 뒤에 비디오를 추가할 것을 제안합니다.
단계에는 비디오를 복사하여 화면에 붙여넣고, 크기를 조정하고 불투명도를 변경하고, 화면에 배경 선을 추가하는 것이 포함됩니다.
최종 결과물에는 호버 움직임이 포함된 전체 화면 효과와 더 중요한 배경 동영상이 포함됩니다.
저자는 독자들에게 튜토리얼을 구독하고 동영상을 하나도 놓치지 말 것을 권장합니다.

 

반응형

 

 

 

Figma Midjourney Animation Tutorial - Parallax effect + mp4

https://www.youtube.com/watch?v=doqHjSYg1Fs 

 

 

 

[ Summary ]

In this tutorial, you will learn how to create a simple animated prototype in Figma using an MP4 file and generated images.
The author provides step-by-step instructions on creating assets for the project, and shares their journey, including the use of prompts like cubes, blockchain, minimal clean look, cinematic lighting, and hyper-realistic, to create variations for images.They also explain how to get a video of the creating process using a prompt and how to download the assets.
Moving on to the Figma project, the author demonstrates how to prepare the text and create a background for the first screen using Photoshop.They also explain how to fix the sharp edges of the background by adding a rectangle with a linear gradient, and how to isolate and export images from Figma using the pen tool.The author then shows how to add the images to the artboard and group them with their shadows, add lines, change their color, and use them to connect the stones and illustrate blockchain solutions.
Finally, they demonstrate how to lock layers and adjust the colors and positions of the elements.
If you follow these instructions, you can create a prototype with nice smooth transitions and animations.
The article is a tutorial on how to match the color of an image and create graphic elements for a design project using Photoshop and Figma.
It covers topics such as layer isolation, color adjustment, blending modes, erasing edges, creating shapes, using masks, and placing images.
The author instructs the reader on how to create graphic elements for different sections of a webpage, including consulting, documentation, marketing and PR, and design and development.
Additionally, the article shows how to create coin logos in rectangles with mouse movement effects.
The reader is encouraged to follow the steps provided to create their own project.
The article discusses how to create a design with rectangles and logos, add glass effects and animation, and animate the project using a tool called Mock Plus.
It suggests reducing the rectangle size by 20 and creating a component to copy similar elements.
The article also advises placing lines and backgrounds, scaling and changing colors for logos, and adding a glass effect with a blur and stroke.
It then introduces Mock Plus, emphasizing its features, resources, and collaboration options.
The author plans to add Parallax and Zoom effects and include video elements for the design.
The article invites readers to check the store link in the description for more information and registration.
In this article, the author explains a process for creating smooth transitions and animations in a design project using Adobe software.
They guide the reader through steps such as matching lines of video to the design, creating a level adjustment layer, rendering the video, and adding parallax effects.
The author also discusses how to create a zoom effect while hovering over an image, and provides detailed instructions on how to connect artboards and adjust settings for optimal results.
In order to follow these instructions, the reader should have some familiarity with Adobe software and basic design principles.
The author encourages readers to test their animations and adjust settings as needed.
Ultimately, the goal is to create engaging and visually appealing designs.
The article gives instructions on how to duplicate and edit artboards, create a parallax effect, and animate logos with variant components in design tabs.
It also provides tips on how to troubleshoot issues with groups having the same name and adjusting timing and movement of layers.
The reader is encouraged to follow the steps provided and experiment with their own designs.
This article is a tutorial on how to create an interesting logo prolong animation using slow effects and video backgrounds.
The author suggests adding video behind the boxes of the logo for a more visually appealing effect.
The steps involve copying and pasting the video onto the screens, resizing it and changing opacity, and adding background lines to the screens.
The final result includes full-screen effects with hover movements and a more significant background video.
The author encourages readers to subscribe to their tutorials and not miss any videos.