어도비 뮤즈 adobe muse 스크롤8 아이디어 디자인

어도비 뮤즈 adobe muse 스크롤5 아이디어 디자인

스크롤 효과로 아이디어 디자인

 <adobe muse : Design ideas with scroll effects>

 

이 섹션에서는 스크롤 효과를 사용하여 대화형 기능, 고유한 사이트 탐색, 표현 동작 

그래픽을 Muse 사이트에 추가하는 여러 가지 방법 중 몇 가지를 살펴보겠습니다.

시작하려면 아래 단계를 수행하십시오.

1.

라이브 샘플 사이트를 방문하고 각 섹션을 클릭하여 각 목표에 대한 예를 확인합니다. 

각 예제 페이지를 아래로 스크롤하여 스크롤 효과가 페이지 요소 표시 방법을 어떻게 제어하는지 확인합니다.

2.

라이브 샘플 사이트 끝까지 스크롤하여 .muse 파일을 다운로드합니다.

3.

샘플 사이트를 열고 Muse 작업 영역에서 프로젝트를 검토합니다.

4.

[레이어] 패널을 열고 [컨텐트] 섹션을 확장하여 각 예제를 만드는 데 사용된 요소를 확인합니다.

다음 섹션에는 다른 각 예제가 구성된 방식이 요약되어 있습니다.

 

개별 효과

 

 

이 효과는 방문자가 페이지를 아래로 스크롤할 때 개별 요소 집합이 날아오고 

페이지 디자인에 다시 조합되도록 합니다. 

그래픽 및 텍스트 프레임은 마치 퍼즐 조각을 맞추듯이 대화형 컴파일을 

작성하는 스크롤 효과를 사용하여 제어됩니다. 

이 방법은 웹 페이지에 제품 세부 사항을 흥미 있게 설명할 수 있는 방법입니다.

이 예의 작업 과정에서는 [스크롤 효과] 패널의 [동작] 탭에 있는 

[시작 동작] 섹션을 사용하여 요소가 통합된 디자인에 합쳐지도록 합니다. 

각 요소가 해당 위치로 이동하면 [최종 동작] 설정이 0으로 설정되어 

새 요소가 날아올 때 기존 요소가 이동하지 않습니다.

비슷한 개별 효과를 작성하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 

사이트 예에서 페이지의 최소 높이는 14,120픽셀로 설정되어 있습니다.

2.

[텍스트] 도구를 사용하여 텍스트 프레임을 만들고 원하는 텍스트 내용을 입력합니다.

3.

[스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 

이 예에서 [시작 동작] 섹션 설정은 스크롤 속도의 .25배(1/4 속도) 

속도로 텍스트 프레임을 아래 위치로 이동합니다. 

페이지가 텍스트 프레임의 키 위치에 도달할 때 텍스트 

프레임이 디자인 보기에 있는 위치에 도달합니다. 

그런 다음 [최종 동작] 설정(두 방향에 대해 값 0)은 마치 요소가 핀으로 고정된 것처럼 

첫 번째 요소가 제 위치에 남아 있도록 합니다.

4.

투명도가 설정된 PNG 파일(휴대폰 윤곽선)은 텍스트 프레임 아래에 배치됩니다. 

이 요소는 [스크롤 효과] 패널의 [동작] 탭 설정을 사용하여 페이지 왼쪽에서 도착하고, 

위치로 이동한 다음 그 위치에 남아 있습니다.

5.

휴대폰 윤곽선 뒤를 닫으면 작은 흰색 요소가 비슷한 이동 패턴을 따라 페이지 

왼쪽에서 날아와 제 위치에 놓입니다. 흰색 그래픽은 휴대폰 위쪽에 있는 수화기를 시뮬레이션합니다. 

이 에셋(phone-earpiece.png)은 [레이어] 패널에서 휴대폰 윤곽선 위에 배열되므로 

디자인에서 휴대폰 윤곽선 위에 표시됩니다. 

6.

수화기 바로 뒤에 있는 작은 흰색 요소는 전화기의 홈 단추를 시뮬레이션한 것으로, 

오른쪽에서 날아오고 수화기 동작을 흉내내며 디자인에서 휴대폰 윤곽선 위에 표시됩니다.

7.

그런 다음 세로 방향으로 흰색에서 밝은 회색으로 그라데이션된 밝은 색의 

사각형 그래픽은 [스크롤 효과] 패널의 [동작] 탭을 사용하여 위치를 이동하므로 

휴대폰 윤곽선의 투명한 가운데 영역에 꼭 맞습니다. 

제 위치에 있으면 전화기 화면의 모양을 제공합니다. 화면 요소(phone-screen.png)는 

[레이어] 패널의 맨 아래에 놓이므로 페이지 디자인에서 다른 모든 요소의 맨 뒤에 표시되도록 정렬됩니다.

8.

네 개 사각형 집합(파랑, 녹색, 노랑, 빨강으로 채워짐)이 다음 위치로 이동합니다. 

함께 나는 분산된 효과를 만들기 위해 각각의 사각형이 [스크롤 효과] 패널의 [동작] 탭에서 

다른 방향과 속도로 설정되어 있습니다. 

파란색 사각형은 [시작 동작] 섹션에서 아래와 오른쪽으로 이동하고, 

녹색과 노란색 사각형은 위쪽과 오른쪽으로 이동하고, 빨간색 사각형은 위쪽과 왼쪽으로 이동합니다. 

[최종 동작] 섹션에서 모든 사각형은 두 방향에 대해 0으로 설정되어 있으므로, 

각 요소가 휴대폰 화면의 맨 위에 있는 최종 대상에 도달하면 

마치 제 위치에 핀으로 고정된 것처럼 동작합니다.

9.

다른 모든 요소가 모이면 두 번째 텍스트 필드가 위로 이동하여 첫 번째 텍스트 필드 아래에 있으며, 

페이지 스크롤 속도의 .5배(절반) 비율로 이동합니다.

마지막으로, 맨 아래에 나머지 두 개 요소, 즉 페이지 색과 같은 단색으로 채워진 단색 사각형과

(렌더링하여 디자인에서 숨겨짐) 그 뒤의 개체 그룹(전구 그림이 있는 노란색 사각형)이 있습니다.

단색 사각형이 그 뒤에 배열된 그룹을 숨깁니다(그림 19 참조).

 

그림 19. 배경색이 지정된 사각형은 마스크처럼 사용되어 사각형 

아래에서 나와 보기로 이동할 때까지 전구 그룹을 숨깁니다.  

  

참고: 

두 요소를 모두 선택한 상태에서 선택한 모든 항목에 대해 동일한 값이 필드에 표시되는지 확인합니다. 

이 예에서 사각형과 그룹 모두 [시작 동작] 섹션의 세로 방향에 대해 0으로 설정되어 있으며, 

[최종 동작] 섹션에서 0,0으로 설정되어 있습니다. 

그룹이 스크롤 비율의 1배(같은 속도)로 왼쪽으로 이동하도록 설정되어 있지만 사각형이 

0으로 설정되어 있으므로 [시작 동작] 섹션의 가로 필드에 값이 표시되지 않습니다.  

 

 

10.[시작 동작]과 [최종 동작] 필드의 값이 모두 0으로 설정되어 있으므로

 사각형이 제 위치에 고정되어 전혀 이동하지 않습니다. 

페이지를 전구 그림이 있는 그룹의 키 위치로 스크롤할 때 왼쪽으로 이동되어 

더 이상 그 위에 있는 사각형에 가려지지 않으므로 표시됩니다. 

전구 그룹이 휴대폰의 화면 요소 위와 휴대폰 윤곽선 아래에 배치되어 있으므로 

전구 그림이 지워진 것처럼 보입니다(가로 방향으로 스와이프할 때 발생하는 실제 전화 전환과 비슷함). 

전구 그룹은 이전에 전화기 화면을 나타낸 그라데이션 사각형을 가립니다.

이러한 간단한 예에서 볼 수 있듯이 아주 긴 페이지 조합, [레이어] 패널에서 

전략적으로 배치된 일련의 요소 및 [스크롤 효과] 패널의 [동작] 탭을 사용하여 페이지가 

아래로 스크롤될 때 애니메이션에 함께 나오는 일련의 효과를 만들 수 있습니다.

 

슬라이딩 메뉴

 

 

슬라이딩 메뉴 효과는 개별 효과에서 설명한 동일한 여러 규칙을 사용합니다. 

요소는 [스크롤 효과] 패널의 [동작] 탭을 사용하여 날아오는 것처럼 표시되고 

사각형은 페이지 디자인에 나타낼 준비가 될 때까지 요소의 일부를 숨깁니다.

이 예에서는 전략적으로 배치된 사각형 그룹을 사용하여 복잡한 각이 있는 디자인 모양을 만듭니다.

브라우저에서 샘플 사이트를 보고 비행기가 페이지 오른쪽에서 왼쪽으로 수평으로 나는지 확인한 다음 스타일화된 메뉴 옵션과 사선 줄무늬가 있는 그라데이션 배경을 확인합니다.

비슷한 슬라이딩 효과를 작성하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 

사이트 예에서 페이지의 최소 높이는 4,665픽셀로 설정되어 있습니다.

2.

비행기 이미지는 페이지에서 다른 모든 컨텐트 위에 놓여 있으므로 

[레이어] 패널의 목록 맨 위에 표시됩니다. [스크롤 효과] 패널의 

[동작] 탭에서 해당 키 위치 전후에서 왼쪽으로 이동하도록 설정되어 있습니다(그림 20 참조).

 

그림 20. [시작 동작]과 [최종 동작] 섹션의 값이 동일하여, 페이지가 해당 키 위치를 지나서 

스크롤하기 전과 스크롤한 후에 비행기가 계속 왼쪽으로 이동합니다.  

 

3.

네 개의 텍스트 프레임은 탐색 메뉴를 생성하기 위해 왼쪽으로 

날아와서 수직으로 쌓이도록 구성되어 있습니다. 

[스크롤 효과] 패널의 [동작] 탭에 있는 각 텍스트 프레임에는 [시작 동작] 섹션의 속도와 

같은 속도(스크롤 비율의 1.25배)가 지정되어 있습니다. 

각 텍스트 프레임에는 다른 키 위치가 있습니다. 

페이지를 아래로 스크롤할 때 각 텍스트 프레임이 해당 위치에 들어가 디자인 왼쪽에 정렬됩니다. 

모든 텍스트 프레임에는 [최종 동작] 섹션에 0,0 값이 있으므로 메뉴 항목이 제 위치에 있으면 그 위치에 남아 있게 됩니다.

4.

텍스트 프레임은 직선 세로 방향의 가장자리가 아니라 대각선 방향의 측면을 표시하므로 

처음에는 이미지처럼 표시되지만 단색 배경색으로 채워집니다. 

이 효과를 만들려면 브라우저 채우기 색상과 같은 단색을 사용하여 채운 텍스트 프레임 위에 

세 개의 사각형 그룹을 겹칩니다(그림 21 참조).

 

그림 21. 세 개의 단색 사각형이 그룹화되고 메뉴 항목 위에 정렬되어 각진 

왼쪽 및 오른쪽 모서리 모양을 만듭니다.  

 

5.

텍스트 프레임이 [레이어] 패널에서 그

룹 아래에 정렬되어 있으므로 텍스트 프레임 

애니메이션은 처음에 다른 사각형 그룹에 의해 숨겨집니다. 

이 그룹(세 개의 사각형으로 구성)은 세로 그라데이션이 있는 큰 사각형과, 위쪽 그라데이션 색상과 

같은 단색으로 채워진 다른 두 개의 작은 사각형의 조합입니다(그림 22 참조). 

 

그림 22. 사각형 그룹은 각진 그래픽을 만들고 메뉴의 텍스트 프레임 위에 표시하여 

해당 위치로 이동할 때까지 마스크 처리합니다.  

 

6.

아래로 스크롤하여 그룹 맨 아래를 검토하는 경우 큰 그라데이션 사각형의 오른쪽 맨 아래 모서리 위에서 회전 및 정렬되고, 폭이 다양한 네 개의 추가 사각형을 볼 수 있습니다(그림 23 참조).

 

그림 23. 페이지 채우기 색상과 같은 색으로 채워진 회전한 사각형이 

그라데이션으로 채워진 사각형 모퉁이를 잘라낸 것처럼 표시됩니다.  

 

그룹은 요소 집합을 결합하고 단일 항목으로 제어하는 데 유용합니다. 이 예에서 단일 엔터티로 

이동하도록 다른 사각형 그룹에 동작 스크롤 효과가 적용되었습니다. 

이 예에서는 네거티브 스페이스를 창의적으로 사용하는 방법을 보여줍니다. 

브라우저 채우기에 단색 배경색이 적용된 경우 다른 사각형 위에 같은 색으로 채워진 

사각형을 겹쳐서 여러 가지 흥미 있는 잘라내기 효과를 만들 수 있습니다. 

이미지 편집 프로그램에서 그래픽을 디자인하거나 단일 이미지를 배치하지 않고, 

사각형을 사용하여 Muse 작업 영역 내에서 그래픽을 구성할 수 있습니다.

 

페이드

 

 

이 애니메이션 일출과 일몰 예제는 두 개의 스크롤 효과인 동작과 불투명도의 조합을 사용합니다. 이 예제는 그라데이션 색상 채우기 페이지 배경을 단일 배치된 태양의 PNG 이미지로 표시합니다. 

PNG 이미지에는 배경 페이지 채우기 색상이 보이도록 하는 투명한 영역이 포함되어 있습니다.

브라우저에서 예제 사이트를 검토하여 태양이 100% 투명도에서 

페이드되어 페이지를 이동하는 방식을 확인합니다. 

완전히 불투명하지만 페이지를 아래로 계속 스크롤하면 태양이 지고 페이드 

아웃될 때까지 다시 점점 투명해집니다.

비슷한 페이드 효과를 작성하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 모니터가 표시할 수 있는 평균보다 큰 값으로 

설정하면 페이지를 스크롤할 수 있습니다. 

사이트 예에서 페이지의 최소 높이는 2,988픽셀로 설정되어 있습니다.

2.

태양 이미지는 페이지 가운데에 배치되어 있습니다. 

[스크롤 효과] 패널의 [동작] 탭에서 키 위치는 1277픽셀로 설정되어 있습니다.

 [시작 동작]과 [최종 동작] 섹션에 대한 설정을 확인합니다(그림 24 참조).

 

그림 24. 태양은 처음에 스크롤 비율로 위쪽과 오른쪽으로 이동하며, 

최종 동작은 같은 속도로 아래쪽과 왼쪽으로 이동하도록 설정되어 있습니다.  

 

이러한 설정으로 인해 태양이 반원 경로로 이동하고 페이지 왼쪽 아래에서 

가운데로(키 위치에 도달할 때) 호를 그린 다음 다시 페이지 오른쪽 아래로 호를 그립니다.

3.

태양을 선택한 상태에서 [불투명도] 탭을 클릭하여 해당 설정을 확인합니다. 

[페이드 위치 1]이 726픽셀(태양 위)로 설정되어 있습니다. 

[페이드 위치 2]가 1925픽셀(태양 아래)로 설정되어 있습니다. 

태양이 0% 불투명도(완전히 투명)로 시작하여 페이지가 해당 키 위치로 

스크롤할 때 완전히 불투명해집니다. 

페이지가 태양의 키 위치를 지나서 아래로 스크롤될 때 불투명도가 100%에서 0% 불투명도로 

이동하여 페이드 인과 페이드 아웃 효과를 만듭니다(그림 25 참조).

 

그림 25. [스크롤 효과] 패널의 [불투명도] 탭에서 투명도를 조절합니다.  

 

4.

[파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 

페이지를 스크롤하여 페이드 인하는 동안 태양이 뜨는 것처럼 보이고, 페이드 아웃하는 동안 

오른쪽 아래로 이동하는 것처럼 보이는지 확인합니다. 

5.

브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

 

Edge Animate

 

 

이 예제는 스크롤 효과를 사용하여 Adobe Edge Animate에서 

내보낸 OAM 파일을 제어하는 방법을 보여줍니다. 

이 예에서 페이지는 밝은 청록색으로 시작하여 어두운 파랑으로 전환하는 

세로 그라데이션으로 채워집니다.

[동작] 및 [Edge Animate] 탭에서 적용된 설정 조합은 이러한 애니메이션 효과를 만듭니다.

같은 OAM 파일의 세 인스턴스가 가로로 나란히 배치되어 애니메이션 나침반 행을 만듭니다. 

브라우저에서 샘플 사이트를 보면 세 나침반 모두 보기로 이동한 다음 그 위치에 남습니다. 

세 나침반이 각각 다른 비율로 회전하지만, Edge Animation 파일의 구성이 아니라

 [스크롤 효과] 패널의 설정으로 인해 세 나침반이 다른 속도로 회전합니다. 

배치된 세 개 OAM 파일에 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 

최소 높이는 7465픽셀로 설정되어 있습니다.

2.

페이지에서 나침반의 세 개 인스턴스를 모두 선택합니다. 

[스크롤 효과] 패널의 [동작] 탭에서 값이 모두 표시되었기 때문에 세 개 OAM 파일의 

키 위치와 동작 설정이 동일한 것을 볼 수 있습니다(그림 26 참조).

 

그림 26. 나침반은 페이지가 해당 키 위치로 스크롤될 때까지 위로 이동한 

다음 페이지가 계속 아래로 스크롤될 때 제 위치에 남아 있습니다.  

 

브라우저에서 샘플을 미리 보면 세 개의 OAM 요소 모두 일제히 위로 이동한 

다음 마치 핀으로 고정된 것처럼 행에 남아 있습니다.

3.

나침반 바깥쪽을 클릭하여 세 나침반을 모두 선택 취소한 다음 왼쪽에서 나침반을 선택하면 됩니다. 

Shift 키를 누른 채 오른쪽에서 나침반을 선택하면 모두 선택됩니다. 

[스크롤 효과] 패널의 [Edge Animate] 탭을 열어서 설정을 검토합니다(그림 27 참조).

 

그림 27. 양쪽에 있는 나침반이 350픽셀마다 프레임을 전환하도록 설정되어 있습니다.  

 

양쪽 나침반은 모두 타임라인 애니메이션을 반복하고 페이지를 350픽셀 

아래로 스크롤할 때마다 다음 프레임으로 이동하도록 구성되었습니다.

4.

바깥쪽 나침반 두 개를 선택 취소합니다. 가운데 나침반을 선택하고 

[Edge Animate] 탭에서 다시 [프레임 전환 간격] 필드가 400픽셀로 설정되어 있는지 확인합니다. 

이 설정으로 인해 가운데 애니메이션이 바깥쪽 두 나침반에 비해 느리게 이동합니다(그림 28 참조).

 

그림 28. 가운데 OAM 파일은 400픽셀마다 프레임을 전환하도록 설정되어 있습니다.  

 

페이지 스크롤 속도를 기준으로 하여 배치된 여러 Edge Animate 애니메이션의 속도를 달리하여 

흥미 있는 애니메이션 효과를 만들 수 있습니다. 

예를 들면, 다른 스크롤 효과 설정이 적용된 동일한 OAM 파일을 여러 번 반복 추가하여 물고기떼, 

이동하는 구름으로 채워진 하늘 또는 다른 효과를 만들 수 있습니다. 

 

슬라이드 쇼 효과

 

 

슬라이드 쇼 위젯에서 일련의 이미지가 페이지 스크롤 방식을 기준으로 하여 

표시되는 방식을 제어할 수 있습니다. 여기에 슬라이드 쇼 위젯을 페이지에 추가한 다음 

[스크롤 효과] 패널의 [슬라이드 쇼] 탭을 사용하여 슬라이드 쇼 옵션을 업데이트하는 작업이 포함됩니다. 

이 예에서 슬라이드 쇼는 360도 회전한 배낭 보기를 만드는 일련의 이미지로 채워집니다. 

삼각대를 설치하고 회전하는 스탠드에 배치된 개체의 사진을 찍어서 

비슷한 슬라이드 쇼 이미지를 얻을 수 있습니다. 이 효과는 잠재적인 고객이 제품을 구입하기 

전에 모든 관점에서 항목을 볼 수 있도록 돕기 위해 대화형 제품 설명을 표시하는 데 유용합니다.

슬라이드 쇼 위젯을 사용하여 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 

사이트 예에서 페이지의 최소 높이는 7,465픽셀로 설정되어 있습니다.

2.

Superpack 글자가 있는 텍스트 프레임은 스크롤 효과를 사용하도록 설정되어 있습니다. 

[동작] 탭에서 페이지 스크롤 비율과 같은 비율로 텍스트가 왼쪽에서 

오른쪽으로 이동하도록 [시작 동작] 설정을 구성합니다. 

[최종 동작] 설정에서 두 방향이 0으로 설정되어 있으므로 텍스트 프레임이 마치

페이지에 핀으로 고정된 것처럼 위치에 남아 있습니다(그림 29 참조).

  

 

그림 29. [동작] 확인란을 선택하고 텍스트 프레임이 오른쪽으로 이동하도록 스크롤 효과를 구성합니다.  

 

3.

위젯 라이브러리를 열고 슬라이드 쇼 위젯을 페이지 가운데 즉,

 텍스트 프레임의 최종 대상의 오른쪽으로 드래그합니다.

4.

[옵션] 메뉴에서 [이미지 추가] 옵션을 사용하여 슬라이드 쇼를 이미지 파일로 채웁니다. 

슬라이드 쇼를 선택한 상태에서 슬라이드 쇼 위젯을 선택하고 

제어판의 핀 인터페이스를 사용하여 슬라이드 쇼를 위치에 고정할 수 있습니다. 

전체 화면 슬라이드 쇼 위젯을 추가하고 스크롤 효과로 제어하여 시험할 수도 있습니다. 

5.

슬라이드 쇼를 선택한 상태에서 [스크롤 효과] 패널의 [슬라이드 쇼] 탭을 열고 

[슬라이드 쇼] 확인란을 선택합니다.

6.

T 핸들을 드래그하거나 필드에 값을 입력하여 키 위치를 설정합니다. 

이 예에서 키 위치는 1066픽셀로 설정되어 있습니다.

7.

[슬라이드 전환 간격] 라디오 단추를 선택하고 그 아래 필드를 50픽셀로 설정합니다(그림 30 참조).

 

그림 30. 페이지가 아래로 다시 50픽셀 스크롤될 때마다 

다음 이미지로 넘어가도록 슬라이드 쇼를 설정합니다.   

 

8.

미리 보기에서 또는 브라우저에서 페이지를 테스트합니다. 

페이지를 아래로 스크롤하여 배낭이 회전하듯이 표시되는지 확인합니다. 

슬라이드 쇼를 비슷하지만 약간 다른 일련의 이미지 파일로 채워서 애니메이션

GIF의 프레임과 비슷하게 위로 날아가거나 아래로 떨어지는 이미지를 만들 수도 있습니다.

9.

스크롤 효과를 테스트한 후에 Muse의 디자인 보기로 돌아가서 페이지를 계속 편집합니다.

 

롤업

 

 

스크롤 효과를 사용하여 기본적으로 모양이 다른 섹션으로 나뉘는 긴 페이지를 만들 수 있습니다. 

방문자가 페이지를 아래로 스크롤할 때, 롤업되고 애니메이션 텍스트 효과가 있고 그림자 효과를 

사용하여 만든 테두리를 분리하는 것처럼 표시되는 페이지 섹션으로 전환됩니다. 

기준점 태그를 사용하거나 메모를 추가하여 방문자가 브라우저에서 페이지를 아래로 스크롤하여 

각 섹션을 보도록 도울 수 있습니다. 

예제 사이트 맨 아래에서 [맨 위로 이동] 단추를 클릭하면 기준점 링크가 페이지 디자인의

맨 위로 돌아갈 때 전체 페이지 압축을 볼 수 있습니다.

비슷한 롤업 효과를 만들려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. 

[최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 

사이트 예에서 페이지의 최소 높이는 16,990픽셀로 설정되어 있습니다.

2.

[브라우저 채우기] 메뉴에서 브라우저 채우기 색상을 파랑으로 설정합니다(그림 31 참조).

 

그림 31. [브라우저 채우기] 메뉴에서 브라우저 채우기 색상을 설정합니다.  

 

3.

전체 페이지를 선택한 상태에서 [파일] 메뉴를 사용하여 페이지 색상을 없음으로 

설정하므로 파란색 브라우저 채우기 색상이 보입니다.

4.

페이지 위에서 약 2248픽셀 아래로 스크롤합니다. 

[사각형] 도구를 사용하여 3000픽셀(너비) x 2000픽셀(높이) 사각형을 그립니다. 

[선택] 도구를 사용하여 페이지 가운데에 사각형을 배치하고 사각형 양쪽이 

브라우저 창 가장자리를 지나도록 넓게 확장합니다.

5.

사각형을 선택한 상태에서 [채우기] 메뉴를 사용하여 녹색 채우기 색상을 설정합니다. 

[효과] 메뉴를 사용하여 그림자 효과를 설정합니다(그림 32 참조).

 

그림 32. 사각형에 그림자 효과를 추가하여 멋진 테두리를 만듭니다.  

 

6

.녹색 사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭에서 [동작] 확인란을 선택합니다. 

T 핸들을 클릭한 채 드래그하여 키 위치가 사각형 위쪽 가장자리에 설정되도록

(예제에서 2248픽셀) 축소합니다(그림 33 참조).  

 

그림 33. 위쪽 가장자리를 따라 사각형 플러시에 대한 키 위치를 설정합니다.   

 

7.

[시작 동작] 섹션에서 스크롤 비율의 1.5배 비율로 사각형이 아래로 이동하도록 설정합니다. 

다른 모든 방향을 0으로 설정합니다.

8.

[텍스트] 도구를 사용하여 녹색 사각형 위쪽 주위에 텍스트 필드를 만듭니다. 

이 예에서 텍스트 필드에 'This is the roll-up.'이 입력되어 있습니다. 

하지만 텍스트 내용을 입력하고 원하는 텍스트 서식을 적용할 수 있습니다.

9.

텍스트 프레임을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 사용합니다. 

T 핸들을 드래그하여 녹색 사각형 위쪽 가장자리에 맞추고 설정을 업데이트하여 페이지 

스크롤을 기준으로 하여 텍스트 프레임이 표시되는 방식을 제어합니다(그림 34 참조).

 

그림 34. T 핸들을 녹색 사각형 위쪽 가장자리에 맞춥니다.  

 

10.

[시작 동작]의 아래 방향을 스크롤 비율의 1.5배로 이동하도록 설정합니다. 

패널의 다른 모든 값을 0으로 설정합니다. 

이렇게 하면 텍스트 필드가 녹색 사각형과 같은 방향 및 속도로 아래로 이동합니다. 

페이지가 해당 키 위치를 지나서 스크롤되면 사각형과 텍스트 프레임 모두 제자리에 있습니다.

11.

[미리보기]를 클릭하면 아래로 스크롤하여 녹색 사각형과 텍스트 필드가 위에서 

아래로 그리고 보기로 스크롤되는 방식을 볼 수 있습니다. 

테스트를 마치면 [디자인]을 클릭하여 페이지를 계속 편집합니다.

12.

[보기] 메뉴를 사용하여 사이트 디자인의 10%로 축소합니다. 

녹색 사각형과 텍스트 필드를 선택합니다. 

Option/Alt 키를 누른 채 두 개 요소를 페이지에서 아래로 드래그하여 복제합니다. 

복제된 사각형의 채우기 색상을 진한 파랑으로 설정하고 텍스트 도구를 사용하여 

텍스트 내용을 업데이트합니다(그림 35 참조).

 

그림 35. 복제된 사각형의 배경 채우기 색상을 업데이트하고 페이지의 

새 섹션에 대한 텍스트 프레임 컨텐트를 변경합니다.   

 

이 예에서 복제된 텍스트 프레임에 

'Use it to drastically alter the appearance of your website.' 텍스트가 입력되어 있습니다. 

하지만 페이지의 진한 파랑 섹션을 식별하기 위해 원하는 텍스트를 입력할 수 있습니다.

13.

[선택] 도구를 사용하여 복제된 사각형과 텍스트 프레임을 

페이지 위쪽에서 약 5,448픽셀 아래에 배치합니다.

14.

진한 파랑 사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 확인합니다. 

키 위치가 자동으로 사각형의 새 위치(5,448픽셀)로 업데이트되고 [시작 동작] 섹션의 

아래쪽 방향이 여전히 스크롤 비율의 1.5배 비율로 이동하도록 설정되어 있습니다

(다른 값은 모두 0으로 설정되어 있음). 복제된 텍스트 프레임을 보면 스크롤 효과가 복제된 요소에 

대해서도 보존되는 것을 알 수 있습니다.

15.

12-13단계를 네 번 더 반복하여 위에 텍스트 프레임이 있는 여섯 개의 큰 사각형을 만듭니다. 

각 사각형에는 그림자 효과와 스크롤 효과 설정이 이미 적용되어 있습니다. 

마지막 네 개 사각형은 각 섹션이 약 1,200픽셀로 구분되도록 8,648픽셀, 11,852픽셀, 

15,058픽셀, 18,251픽셀의 키 위치에 배치합니다.

16.

[채우기] 메뉴를 사용하여 사각형 채우기 색상에 다른 색을 적용하도록 설정합니다. 

단색과 그라데이션 색 채우기를 모두 적용하여 페이지 

각 섹션을 강조하여 다른 섹션을 대비시켜 봅니다.

17.

[텍스트] 도구를 사용하여 각 섹션에 대한 텍스트 내용을 업데이트합니다. 

예를 들어, 'This is the blue section.'처럼 아래에 사각형 배경색을

 반영하도록 각 섹션을 변경할 수 있습니다.

18.

[파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 

페이지를 스크롤하여 다른 페이지 섹션이 표시되는지 확인한 후 다음 페이지 섹션으로 바꿉니다.

19.

브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

어도비 뮤즈 adobe muse 스크롤5 아이디어 디자인

스크롤 효과로 아이디어 디자인

 <adobe muse : Design ideas with scroll effects>

 이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.