오늘날 웹에서 가장 인기있는 기술 중 하나는 시차 스크롤링입니다. 우리는 마우스의 스크롤 휠을 돌리고 마우스 휠을 돌리면 페이지의 내용이 페이지 위아래로 움직이는 사이트에 다 다녔습니다.
웹 디자인 및 그래픽 디자인에 익숙하지 않은 사용자에게는 필요한 CSS의 양 때문에이 기술을 매우 어려울 수 있습니다.
그것이 당신을 설명한다면, 그래픽 아티스트에게 어필할만한 많은 어플리케이션이 있습니다. 그들은 기본적으로 웹 페이지에 익숙한 페이지 레이아웃 방식을 사용합니다. 즉, 코딩이 많이 포함되어 있지는 않습니다. 정말 눈에 띄게 한 가지 응용 프로그램은 Adobe Muse입니다.
Muse를 사용하여 그래픽 전문가가하는 작업은 매우 놀랍습니다. 오늘 의 뮤즈 사이트를 방문하면 할 수있는 일을 간략하게 볼 수 있습니다. 웹 전문가는 Muse를 일종의 "바람 완구"로 간주하지만 디자이너들도 모바일 및 웹 프로토 타입을 제작하여 결국에는 개발자 팀에 전달할 예정입니다.
믿을 수 없을만큼 쉽게 Muse로 달성 할 수있는 기술 중 하나는 시차 스크롤입니다. 완성 된 버전의 운동을보고 싶다면 브라우저에서이 페이지로 이동하십시오. 마우스의 스크롤 휠을 돌리면 텍스트가 페이지 위아래로 움직이며 이미지가 변경됩니다.
시작하자.
07 년 1 월
웹 페이지 만들기
Muse를 실행하면 새 사이트 링크를 클릭하십시오. 새 사이트 속성 이 열립니다. 이 프로젝트는 데스크톱 응용 프로그램 용으로 설계되었으며 초기 레이아웃 팝업 메뉴에서 선택할 수 있습니다. Columns, Gutter Width, Margins 및 Padding 수에 대한 값을 설정할 수도 있습니다. 이 경우 우리는이 문제에 심히 관심을 가지지 않았으며 단순히 OK를 클릭했습니다 .
07 년 2 월
페이지 서식 지정
사이트 속성을 설정하고 확인을 클릭하면 평면 뷰라는 것이 나타납니다. 상단에는 홈 페이지가 있고 하단에는 마스터 페이지 가 있습니다. 우리는 한 페이지 만 필요했습니다. 디자인 뷰로 이동하기 위해 인터페이스를 연 홈페이지를 두 번 클릭했습니다.
왼쪽에는 몇 가지 기본 도구가 있고 오른쪽에는 페이지의 내용을 조작하는 데 사용되는 다양한 패널이 있습니다. 맨 위에는 페이지에 적용 할 수있는 속성이나 페이지에서 선택한 속성이 있습니다. 이 경우 검은 색 배경을 원했습니다. 이를 위해 브라우저 채우기 색상 칩을 클릭하고 색상 선택기에서 검정색을 선택했습니다.
03 / 07
페이지에 텍스트 추가
다음 단계는 페이지에 텍스트를 추가하는 것입니다. 텍스트 도구를 선택하고 텍스트 상자를 그렸습니다. 우리는 "Welcome"라는 단어를 입력하고 속성에서 Arial 텍스트를 120 픽셀 흰색으로 설정했습니다. 센터 정렬.
그런 다음 선택 도구로 전환하고 텍스트 상자를 클릭 한 다음 Y 위치를 맨 위에서 168 픽셀로 설정했습니다. 텍스트 상자가 선택된 상태에서 Align 패널 을 열고 텍스트 상자를 가운데에 맞 춥니 다 .
마지막으로 텍스트 상자를 선택한 상태에서 Option / Alt 키 와 Shift 키를 누른 상태 에서 텍스트 상자를 4 개 복사했습니다. 각 복사본의 텍스트와 Y 위치를 다음과 같이 변경했습니다.
- 끝 : 871
- 그래픽, 1621
- 소프트웨어, 2371
- @ About.com, 3181
각 텍스트 상자의 위치를 설정할 때 페이지의 크기가 텍스트 위치에 맞게 조정됩니다.
04 / 07
이미지 자리 표시 자 추가
다음 단계는 텍스트 블록 사이에 이미지를 넣는 것입니다.
첫 번째 단계는 직사각형 툴 을 선택하고 페이지의 한면에서 다른면으로 이어지는 상자를 그립니다. 선택한 사각형을 사용하여 높이를 250 픽셀로 설정하고 Y 위치를 425 픽셀로 설정 합니다. 사용자의 브라우저 뷰포트를 수용하기 위해 항상 페이지 너비로 늘리거나 줄이게 할 계획입니다. 이를 위해 속성에서 100 % 너비 버튼을 클릭했습니다. 이것은 X 값을 회색으로 표시하고 이미지가 항상 브라우저의 뷰포트 너비의 100 %가되도록합니다.
07 년 5 월
이미지 자리 표시 자에 이미지 추가
Rectangle을 선택 하고 Color Chip이 아닌 Fill 링크를 클릭하고 I mage ink 를 클릭하여 직사각형에 이미지를 추가했습니다. Fitting 영역에서 Scale To Fit 을 선택하고 위치 영역에서 가운데 핸들 을 클릭하여 이미지가 이미지 가운데에서 크기가 조정되도록했습니다.
그런 다음 Option / Alt-Shift- 드래그 기법을 사용하여 처음 두 텍스트 블록 사이에 이미지 복사본을 만들고 채우기 패널을 열고 이미지를 다른 것으로 대체했습니다 . 우리는 나머지 두 이미지에 대해서도 이것을 수행했습니다.
이미지가 제자리에 있으면 모션을 추가 할 차례입니다.
07 년 6 월
시차 스크롤링 추가
Adobe Muse에서 시차 스크롤을 추가하는 방법에는 여러 가지가 있습니다. 우리는 당신에게 그것을하는 간단한 방법을 보여줄 것입니다.
채우기 패널을 연 상태에서 스크롤 탭을 클릭하고 열 때 모션 확인란을 클릭합니다.
초기 및 최종 동작 값이 표시됩니다. 스크롤 휠과 관련하여 이미지가 얼마나 빨리 움직이는 지 결정합니다. 예를 들어, 1.5의 값은 휠보다 1.5 배 빠른 이미지를 이동시킵니다. 우리는 0을 사용하여 이미지를 제자리에 고정 시켰습니다.
가로 및 세로 화살표 는 모션의 방향을 결정합니다. 값이 0이면 클릭 한 화살표에 관계없이 이미지가 움직이지 않습니다.
가운데 값 - 키 위치 - 이미지가 움직이기 시작하는 지점을 표시합니다. 이미지 위의 선이 시작됩니다.이 이미지의 경우 페이지 상단에서 325 픽셀입니다. 스크롤이 그 값에 도달하면 이미지가 움직이기 시작합니다. 이 값은 대화 상자에서 값을 변경하거나 줄 위쪽의 점을 위 또는 아래로 드래그하여 변경할 수 있습니다.
페이지의 다른 이미지에 대해서도이 작업을 반복하십시오.
07 년 7 월
브라우저 테스트
이 시점에서 우리는 끝났습니다. 분명히 우리가 한 일은 파일> 사이트 저장 을 선택하는 것이 었습니다. 브라우저 테스트를 위해 파일> 브라우저에서 미리보기 페이지를 선택하기 만 했습니다 . 이렇게하면 컴퓨터의 기본 브라우저가 열리고 페이지가 열리면 스크롤이 시작됩니다.