[TIL] [내일배움캠프 사전캠프] 브랜드 배너 디자인 제작 및 피그마 4-7강

[오늘의 학습 주제]

지난번 작성한 브랜드 배너 디자인 기획안을 토대로 배너 디자인을 제작하는 시간을 가졌습니다. 그리고 피그마 4-7강을 듣고 합성 컴포넌트와 네스티드 인스턴스를 학습했습니다.

[오늘의 학습 : 무엇을 배웠는지]

브랜드 배너 디자인을 하면서 이미지FX를 활용하는 방법과 피그마를 간단하게 다뤄보았습니다. 

피그마 4-7 합성 컴포넌트와 네스티드 인스턴스를 학습하며 상위 컴포넌트 안에서도 하위 컴포넌트를 바로 조작할 수 있는 기능을 배웠습니다.

 

▶ 피그마 4-7

합성 컴포넌트 & 네스티드 인스턴스

 

컴포넌트는 파운데이션 요소가 결합되어 만들어 진다.

 

컴포넌트를 모아 또 다른 컴포넌트를 만드는 경우가 있다 → 합성 컴포넌트 (카드, 탭 등)

 

네스티드 인스턴스

 

왜 사용하나요?

상위 컴포넌트에서도 하위 컴포넌트 속성을 바로 조작할 수 있게 하는 기능

[실습 과제]

 

▶브랜드 배너 디자인 제작

 

1. 프롬프트 작성

Photos of products in which various perfumes look luxurious and concentrated, contrast in shape and color, and make the texture and light transmission of glass, the material of perfume bottles, look natural and realistic. 

Perfumes symbolizing spring, summer, autumn, and winter are placed around the perfume, and cherry blossoms, maple leaves, sky blue snow crystals, seashells on the beach, and sparkling beach sand are arranged in harmony with the perfume. The appearance of the perfume is expressed as lying or standing.  

Perfume placement is expressed in perspective, but it is controlled without being too severe and arranged artistically and creatively.

The lighting includes studio lighting that maximizes product photography, soft and subtle lighting that is not excessive, 

The place draws attention by focusing the product rather than the studio, hyperrealism, and background. Brown and gold atmosphere. The color of the perfume varies, but the overall tone is brown and gold 35mm film detailed

 

2. 이미지 제작 (이미지 FX 활용)

3. 레이아웃 설정

 

▶ 피그마 4-7

     합성 컴포넌트 & 네스티드 인스턴스

 

탭 컴포넌트

현재 화면을 전환해주는 요소

 

탭의 구조

탭은 탭 메뉴와 그 메뉴들을 모아 만드는 네비게이션 바이다.

 

<탭 메뉴 만들기> (하위 컴포넌트)

1. 간단한게 '탭 이름'이라는 프레임을 2개 만든다.

2. 프레임 2개를 선택하여 컴포넌트 세트로 묶는다 (베리언츠)

3. 각각 on/off로 이름을 설정한다.

4. 스타일을 적용한다.

5. 컴포넌트 이름을 Tab Menu라고 적용한다.

 

<탭 만들기> (상위 컴포넌트)

1. 복제한 인스턴스 2개를 하나의 컴포넌트로 묶고 2개를 추가 복제한다. 

2.  네스티드 인스턴드를 설정한다.

3. 탭 메뉴 인스턴스를 모두 선택한다.

4. 탭 안에서 탭 메뉴를 조작할 수 있다.

 

 

[정리] 

브랜드 배너 이미지를  AI 이미지로 제작하는 과정에서 AI의 상상력과 창의성에 놀라웠습니다. 어느 정도 이미지 예상을 한 후 프롬프트를 작성하였는데 훨씬 더 예술적이고 고품질의 이미지를 제작한다는 것이 인상적이었습니다.

 

 피그마의 컴포넌트 프로퍼티 중 네스티드 인스턴스를 학습했는데 이론으로는 이해가 가지 않았지만 실습을 통해 훨씬 쉽고 이해가  탭이 만들어지는 과정을 배울 수 있었습니다.