어도비 뮤즈 adobe muse 스크롤9 동적 유형

어도비 뮤즈 adobe muse 스크롤 동적 유형

<adobe muse : Dynamic type>

동작 스크롤 효과와 Adobe Edge 웹 글꼴 조합을 사용하여 독특한 조판 디자인을 만들 수 있습니다. 웹 글꼴을 사용하면 페이지 로드 시 로드된 다양한 글꼴 범위를 사용하여 텍스트 스타일을 지정할 수 있습니다. 이미지 편집 프로그램에서 만든 텍스트 이미지를 배치하고 애니메이션하지 않고 훨씬 멋지며 Edge 웹 글꼴을 사용하여 쉽게 업데이트할 수 있는 페이지를 만들 수 있습니다. 또한 스크롤 효과는 페이지를 아래로 스크롤할 때 환상적인 애니메이션 효과를 만듭니다.

동적 텍스트로 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

<!--[if !supportLists]-->1.    

<!--[endif]-->디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 

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

<!--[if !supportLists]-->2.    

<!--[endif]-->페이지 채우기 색상을 없음으로 설정합니다. 다음 단계에서 긴 사각형이 페이지를 덮기 때문에 

브라우저 채우기 색상은 중요하지 않습니다.

<!--[if !supportLists]-->3. 

   <!--[endif]-->[사각형] 도구를 사용하여 약 1,159픽셀(너비) x 4,854픽셀(높이)의 큰 사각형을 그립니다. 

[채우기] 메뉴를 사용하여 사각형을 단색 또는 그라데이션 채우기 색상으로 채웁니다. 

이 예에서 밝은 자홍 그라데이션 색상에 청록색이 채우기 색상으로 적용되었습니다. 

[선택] 도구를 사용하여 전체 브라우저 영역을 채우도록 사각형을 가운데에 배치합니다. 

사각형이 페이지 가운데에 배치되었는지 확인하기 위해 축소할 수 있습니다(그림 36 참조).

그림 36. 축소하고 긴 페이지 가운데에 사각형을 배치합니다.

<!--[if !supportLists]-->4.   

<!--[endif]-->사각형을 가운데에 배치한 후에 [보기] 메뉴에서 확대 비율을 다시 100%로 설정합니다.

<!--[if !supportLists]-->5.   

<!--[endif]-->페이지 왼쪽에서 [텍스트] 도구를 사용하여 일련의 텍스트 프레임을 만듭니다. 

이 예에서는 총 5개의 텍스트 프레임이 있습니다. 각 텍스트 프레임의 컨텐트가 아래에 

나열되어 있지만 각 텍스트 프레임에 원하는 텍스트를 자유롭게 입력합니다.

<!--[if !supportLists]-->·         <!--[endif]-->Five Frames

<!--[if !supportLists]-->·         <!--[endif]-->Scrolling

<!--[if !supportLists]-->·         <!--[endif]-->At Different Speeds Will

<!--[if !supportLists]-->·         <!--[endif]-->Create

<!--[if !supportLists]-->·         <!--[endif]-->Dynamic Tension

선택 단계로, 일부 텍스트 프레임을 복제한 다음 조금 다른 스타일을 적용할 수 있습니다. 이 예에서는 Create라는 단어가 포함된 텍스트 프레임을 복제한 다음 두 반복 단어를 

서로의 맨 위에 겹쳐 놓아 흐린 파란색 그림자 효과를 만듭니다.

<!--[if !supportLists]-->6.   

<!--[endif]-->[텍스트] 도구를 사용하여 각 텍스트 프레임을 선택합니다. 

[텍스트] 패널(또는 제어판의 텍스트 서식 옵션)을 사용하여 다른 웹 글꼴, 글꼴 크기, 

색상 및 다른 서체 설정을 적용하여 각 텍스트 프레임을 강조합니다.

<!--[if !supportLists]-->7.   

<!--[endif]-->텍스트 프레임을 모두 선택합니다. 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 

같은 숫자 값을 입력하여 선택한 모든 텍스트 프레임에 대한 키 위치를 한번에 설정합니다. 

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

또한, [시작 동작]과 [최종 동작] 섹션에 대한 가로 방향을 오른쪽으로 설정합니다. 

[시작 동작]과 [최종 동작] 섹션에 대한 세로 방향을 모두 0으로 설정하여 

텍스트 프레임이 세로 방향으로 이동하지 않도록 합니다.

<!--[if !supportLists]-->8.  

  <!--[endif]-->텍스트 프레임 바깥쪽을 클릭한 다음 각 텍스트 프레임을 개별적으로 클릭합니다. 

각 텍스트 프레임에 대해 조금씩 다른 값을 입력합니다. 

아래 목록에서 첫 번째 값은 [시작 동작] 속도이고, 

두 번째 값은 가로(오른쪽) 방향에 대한 [최종 동작] 속도입니다.

<!--[if !supportLists]-->·         <!--[endif]-->Five Frames: .9x, .1x

<!--[if !supportLists]-->·         <!--[endif]-->Scrolling: .12x, .5x

<!--[if !supportLists]-->·         <!--[endif]-->At Different Speeds Will: .7x, .17x

<!--[if !supportLists]-->·         <!--[endif]-->Create: 1.1x, .005x

<!--[if !supportLists]-->·         <!--[endif]-->Dynamic Tension.: 1x, .01x

참고:

텍스트 프레임을 복제하여 그림자 효과를 만든 경우 두 개 이상의 반복된 텍스트 프레임을 그룹화한 다음 단일 그룹으로 제어하여 스크롤 효과를 적용할 수 있습니다.

<!--[if !supportLists]-->9.   

<!--[endif]-->[텍스트] 도구를 사용하여 텍스트 필드를 만들고 페이지 오른쪽에 숫자 5를 입력합니다. 

즉, 텍스트 프레임을 복제한 다음 다른 색상과 텍스트 서식을 적용하여 경사진 모서리와

그림자가 있는 효과를 제공할 수 있습니다. 

디자인 목적을 위해 텍스트 프레임을 복제하여 만든 경우 해당 텍스트 프레임을 함께 

그룹화하여 이 그룹에 스크롤 효과를 적용할 수 있습니다.

<!--[if !supportLists]-->10. 

<!--[endif]-->숫자 5가 있는 텍스트 필드를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭에서

[동작] 확인란을 선택합니다. 키 위치를 숫자로 설정하거나 T 핸들을 드래그하여 설정합니다

(이 예에서는 1425픽셀). [시작 동작] 섹션에서 스크롤 비율의 1배로 

요소가 왼쪽으로 이동하도록 설정합니다. [최종 동작] 섹션에서 

스크롤 비율의 .01배로 요소가 왼쪽으로 이동하도록 설정합니다.

<!--[if !supportLists]-->11. 

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

페이지를 스크롤하여 숫자 5가 있는 텍스트 프레임을 오른쪽에서 이동할 때 

5개 텍스트 프레임이 왼쪽에서 페이지로 이동하는지 확인합니다. 

위아래로 스크롤하여 텍스트 프레임이 애니메이션하는지 확인합니다.

<!--[if !supportLists]-->12.

<!--[endif]-->브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

어도비 뮤즈 adobe muse 스크롤5 동적 유형

<adobe muse : Dynamic type>
 

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