2014. 2. 2. 14:36 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제6부 임베디드 HTML을 사용하여 웹 페이지에 Google 지도 삽입 이번 단원에서는 Google 지도를 통해 생성된 지도를 로드하는 임베디드 HTML을 삽입하여 "KART MAP" 페이지에 컨텐트를 추가해 보겠습니다. 이는 사이트에 임베디드 HTML을 사용할 수 있는 여러 가지 방법 중 또 하나의 작은 예일 뿐입니다. YouTube, Flickr, Picasa 등 기타 수많은 타사 사이트로부터 가져온 컨텐트를 통합할 수 있을 뿐만 아니라, 해당 사이트에서 자신의 계정으로 액세스하고 컨텐트를 게시하여 관리하는 여러 가지 양식, 블로그 및 기타 복잡한 사이트 기능을 추가할 수 있습니다. 1.새 브라우저 창을 열고 maps.google.com을 방문합니다. 2.지..
2014. 2. 1. 14:35 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제5부 Photoshop 파일을 롤오버 단추로 배치 1.[파일] > [Photoshop 단추 배치]를 선택합니다. [Photoshop 가져오기] 대화 상자가 나타나면 Kevins_Koffee_Kart 폴더에서 btn_share.psd라는 파일을 찾습니다. [선택](Mac) 또는 [열기](Windows)를 클릭하여 파일을 선택합니다. 2.[Photoshop 가져오기 옵션] 대화 상자가 나타납니다. 여기서 잠시 시간을 내어 설정이 어떤 식으로 적용되는지 살펴보도록 하겠습니다. 이 대화 상자의 메뉴를 사용하면 단추의 [표준 상태](페이지를 처음 로드했을 때 표시되는 단추 모양), [롤오버 상태](방문자가 마우스 커서를 단추 위에 올려 놓았을 때 표시되는 단추 모양),..
2014. 1. 31. 14:34 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제4부 웹 페이지에 아코디언 위젯 추가 1.[위젯 라이브러리]를 엽니다. ([창] > [위젯 라이브러리]를 선택하여 이 라이브러리를 열 수 있습니다. 위젯 라이브러리가 이미 열려 있으면 고정된 패널 모음에서 상단 탭을 클릭하여 위젯 라이브러리를 활성화합니다.) 2.[패널]을 클릭하여 패널 위젯의 목록을 확장합니다. 아코디언 위젯을 선택합니다. 아코디언 위젯을 페이지 위로 드래그하여 페이지 컨텐트 영역의 왼쪽 상단에 배치합니다. 3.[선택] 도구로 위젯의 여러 구성 요소를 선택해 보십시오. 전체 위젯을 선택하면 [컨트롤] 패널의 왼쪽 위 가장자리에 있는 선택 표시자에 "위젯"이라는 단어가 표시됩니다. 마우스 단추를 다시 클릭하여 컨테이너, 텍스트 프레임 등을 선택..
2014. 1. 30. 14:33 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제3부 페이지의 채우기 색상을 조정하여 반투명하게 만들기 [에셋] 패널에 표시되는 경고 메시지를 해결하려면 마우스 오른쪽 단추를 클릭하고 개별 에셋 파일에 수정 사항을 적용하는 데 필요한 메뉴 옵션을 선택합니다. 또는 [에셋] 패널에서 (Shift 키를 누른 채) 여러 에셋을 한꺼번에 선택한 다음 선택한 에셋 파일 전체에 수정 사항을 적용하기 위한 메뉴 옵션을 선택합니다. 페이지의 채우기 색상을 조정하여 반투명하게 만들면 마스터 페이지를 채우는 데 기본적으로 흰색이 사용됩니다. 그러나 원한다면 사용자가 페이지의 색상과 투명도를 바꿀 수 있습니다. [디자인] 보기에 "A-마스터" 페이지를 열어 둔 상태에서 아래 작업을 수행하십시오. 1.[컨트롤] 패널에서 [브라우..
2014. 1. 29. 14:32 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제2부 웹 사이트의 페이지를 채우고 구성하기 위한 사이트맵 만들기 (Muse를 사용하거나 웹 사이트를 만들 때 사용되는) "사이트맵"이라는 용어는 웹 사이트 하나에 포함되는 여러 페이지의 계층 구조를 가리킵니다. Muse에서 새로 만드는 모든 사이트에는 기본적으로 Home 페이지 하나가 포함됩니다. 이는 방문자가 브라우저를 통해 라이브 사이트를 볼 때 맨 처음 로드되는 페이지입니다. 원한다면 Home 페이지의 이름을 "Index"라고 변경할 수 있습니다. 메뉴 막대 위젯을 사용하는 경우 동적 메뉴에 각 페이지의 이름이 자동으로 표시 및 연결됩니다. 페이지 이름은 언제든지 변경할 수 있습니다. 새 사이트를 처음 만들 때는 일반적으로 [플랜] 보기를 사용하여 사이트..
2014. 1. 28. 14:22 컴퓨터/그래픽
Adobe Muse(어도비 뮤즈) 시작하기 제1부 이 자습서에서는 Adobe® Muse™ 소프트웨어를 기반으로 하여 실제 프로젝트에서 일반적으로 사용되는 기능을 담고 있는 웹 사이트를 만드는 방법을 설명합니다. 여기에서는 마스터 페이지를 사용하는 방법, 텍스트와 이미지를 다루는 방법, 위젯을 통해 대화형 기능을 추가하는 방법, 임베디드 HTML을 사용하여 리치 미디어 및 동적 웹 데이터를 삽입하는 방법 등을 주로 살펴봅니다. 이 첫 단원을 진행하려면 인터넷에 연결되어 있어야 합니다. Adobe Muse 제품 페이지를 방문하여 소프트웨어를 다운로드하고 설치합니다. Muse를 사용하려면 서비스에 가입을 해야 하지만 평가용 버전을 30일 동안 무료로 사용해 볼 수도 있습니다. 소프트웨어를 실행하고 사이트를 디..
2014. 1. 27. 16:27 컴퓨터/그래픽
어도비 뮤즈 adobe muse 스크롤13 마스크 이 예에서 막대 그래프가 제 위치로 애니메이션됩니다. 분홍색 화살표 그래픽이 위쪽으로 확장되고 그래프의 막대 위와 뒤로 물결 모양을 이룹니다. 그래프에서 막대가 차트 아래쪽에서 길게 늘어나는 것처럼 보이지만 실제로는 큰 흰색 사각형 뒤에서 나타나는 동작 스크롤 효과가 적용된 단색 사각형입니다 (페이지 배경색과 같은 흰색으로 채워짐). 이 예에서는 스크롤 효과와 함께 여러 기술을 사용합니다. 요소는 [레이어] 패널을 사용하여 서로의 앞과 뒤에 배열됩니다. 흰색 사각형이 그래프 요소 맨 위에 그려집니다. 흰색 사각형이 막대 그래프를 덮고 있을 때 막대와 화살표가 마스크 처리된 것처럼 보기에서 숨겨집니다. 흰색 사각형과 차트 표는 동작 스크롤 효과에서 0 설정..
2014. 1. 26. 16:27 컴퓨터/그래픽
어도비 뮤즈 adobe muse 스크롤12 동적 BG (Motion Background) 동작 배경 효과를 만들기 위해 긴 페이지를 덮는 바둑판식 배열의 배경 이미지로 채워진 일련의 큰 사각형을 만들 수 있습니다. 이 예에서는 [스크롤 효과] 패널의 [동작] 탭이 아닌 [채우기] 메뉴의 [스크롤] 탭을 사용하여 동작 설정을 적용합니다. 비슷한 동작 배경 효과를 작성하려면 다음 단계를 수행하십시오. 1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 6254픽셀로 설정되어 있습니다. 참고: 이 예에서는 페이지가 사각형으로 덮여 있으므로 브라우저 채우기 색상을 설정했는지 여부가 문제되지 않습니다. 페이지 채우..
2014. 1. 25. 11:15 컴퓨터/그래픽
어도비 뮤즈 adobe muse 스크롤10 스택 메뉴 스크롤 효과를 사용하여 흥미 있는 대화형 사이트 탐색을 만들 수 있습니다. 여러 단추가 페이지의 표시 영역으로 날아온 다음 메뉴 모음을 만들 수 있게 정렬됩니다. 이 예에서 네 개의 롤오버 단추는 페이지를 스크롤할 때 페이지 아래쪽에서 위쪽으로 이동하고 세로 메뉴 모음을 표시할 위치에 잠깁니다. 네 개 단추가 정렬되면 배경 컨텐트(전구 그림, 색이 지정된 배경 영역, 텍스트 프레임 및 대각선 방향의 모서리 줄무늬 형식)가 페이지 양쪽에서 날아와서 사이트 섹션을 만듭니다. 이 예에서 단추가 연결되어 있지 않지만 하이퍼링크 드롭다운 메뉴를 사용하여 링크를 추가하면 방문자가 이 링크를 클릭하여 새 페이지를 로드하거나 기준점 태그를 사용하여 현재 페이지의 다..
2014. 1. 24. 16:27 컴퓨터/그래픽
어도비 뮤즈 adobe muse 스크롤 동적 유형 동작 스크롤 효과와 Adobe Edge 웹 글꼴 조합을 사용하여 독특한 조판 디자인을 만들 수 있습니다. 웹 글꼴을 사용하면 페이지 로드 시 로드된 다양한 글꼴 범위를 사용하여 텍스트 스타일을 지정할 수 있습니다. 이미지 편집 프로그램에서 만든 텍스트 이미지를 배치하고 애니메이션하지 않고 훨씬 멋지며 Edge 웹 글꼴을 사용하여 쉽게 업데이트할 수 있는 페이지를 만들 수 있습니다. 또한 스크롤 효과는 페이지를 아래로 스크롤할 때 환상적인 애니메이션 효과를 만듭니다. 동적 텍스트로 비슷한 효과를 만들려면 다음 단계를 수행하십시오. 1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에..