[Section 03] 기본기능의 이해와 활용

🔮 프레임과 그룹의 차이

• 프레임: 하나하나의 요소를 컨트롤할 수 있다.
• 그룹: 말 그대로 그룹처럼 컨트롤이 가능하다.

🔮 카드 UI 그리고 shape 속성 조절하기

1️⃣ 카드 프레임 만들기

이미지 프레임 하나, 밑에 텍스트 프레임 하나 그리고 이미지와 텍스트를 감싸고 있는 프레임(이미지 프레임과 텍스트 프레임 선택 -> ctrl+alt+G(frame Selection))

2️⃣ 카드 프레임 모양 디자인

우측에 둥근 아이콘 모양의 값을 20으로 바꾸고 그 밑에 Clip content를 체크한다.

3️⃣ 이미지 프레임

이미지 프레임의 Effects 부분을 통해서 그림자를 조정해준다.

Fill 부분에서 레이어를 추가해서 Solid 부분을 클릭해서 이미지로 바꾸어준 다음 이미지를 바꾸어준다.

카드가 스와이프하면 넘어간다는 의므로 블러처리를 해준 다음 카드가 보인다. 걔는 Layer에 pass through를 30으로 바꾸어주면 카드 전체의 불투명도가 올라간다.

🔮 text 입력하고 속성 조절하기

🔮 호 기능 사용하여 원형 그래프 만들기

🔮 다양한 방법으로 이미지와 텍스트 넣기_갤러리UI

넣어야하는 이미지가 많을 때?

comunity -> plugin -> unsplash -> 이미지를 넣을 요소 모두 선택 -> unsplash 에서 insert Random 을 통해서 사진을 넣을 수 있다. 그 외의 플러그인을 통해서 디자인을 좀더 쉽게 할 수 있다. (ex. lorem ipsum)

🔮 불리언 연산으로 날씨 아이콘 만들기

• union selection: 요소들을 하나로 합쳐준다.

🔮 Outline stroke과 flatten 으로 아이콘 마무리하기

• outline stroke: 요소를 면으로 변경한 것이므로 프레임의 크기를 늘리거나 줄여도 이미지 두께 비율 유지.
• flatten: 모든 요소가 같은 속성을 가지고 있을 때 주로 사용. stroke 요소로 만들어졌기 때문에 두께는 유지되므로 프레임의 크기를 늘리거나 줄일 때, 기존에 만들어 놓은 것과 달라질 수 있다.

🔮 프레임의 클립 사용하여 긴 페이지 스크롤하기

,,,? 🌟