반응형

안녕하세요~ 구름군단 티스토리 입니다.^^


이전 강의에서 어도비 뮤즈에 대해 간단하게 알아보는 시간을 갖었습니다. 이번에는 어도비 뮤즈를 통해서 사이트 만드는 것을 해보도록 할꺼예요.


본인이 생각해둔 레이아웃이 있다면 다행이지만 그렇지 않다면 이미 만들어진 디자인을 따라해보는 것도 좋은 학습 방법 중 하나 입니다.^^


사이트 제작을 할 적에 따라 할 사이트는 모비즌 입니다.

참고 사이트 : https://www.mobizen.com/


보시면 아시겠지만 모비즌 사이트는 깔끔하면서 딱 담을 내용들만 담아 군살이 없는 아주 심플한 디자인 입니다.


덕분에 따라하기가 아주 쉬운 사이트 중 하나이죠.^^


그러면 잡설은 여기까지하고, 사이트를 한번 만들어 보겠습니다. 고고!


#01. 어도비 뮤즈를 통한 html5 사이트 만들기! 실전편!


샘플작업에 필요한 이미지 샘플 : 다운받기

@ 제가 사이트를 만들적에 사용한 이미지들 입니다. 어차피 샘플이니 시간낭비하지 마시라고 첨부해둡니다.^^


어도비뮤즈포트폴리오홈페이지제작방법01


페이지폭은 960으로 설정을 하고, 여백은 모두 없애줍니다.(시간이 되시면 여백을 준 것과 주지 않은 것을 직접 설정을 해보고, 차이점을 느껴보시는 것도 좋습니다.)


페이지설정을 끝을 내줬으면 첫번째로 A-마스터에 들어가 배경화면 설정을 잡아줘야지만 합니다.


어도비 뮤즈에서 이미지를 넣는 방법이 세가지가 있습니다. 첫번째는 사각형도구(M)을 통해서 영역을 그려주고, 채우기 혹은 Fill 메뉴를 누른 뒤에 이미지를 넣어주는 방법, 두번째는 이미지를 페이지에 끌어다 놓는 것, 마지막 세번째는 브라우저 채우기를 통해서 이미지를 넣어주는 방법 입니다.


오늘 사이트를 만들 적에는 브라우저 채우기를 통해서 배경이미지를 만들어 보도록 하겠습니다.


어도비뮤즈포트폴리오홈페이지제작방법02


어도비 뮤즈를 보면 브라우저 채우기라고 보입니다. 그 버튼을 누르게 되면 조그만 메뉴가 나타나게 됩니다. 그 안에서 폴더 모양의 아이콘을 누르면 파일을 열 수 있는 창이 뜨게 되고 이때 제가 첨부한 파일 안에 보시면 main_bg.jpg가 보입니다. 파일을 선택을 하고, 맞춤은 채우기에 맞게 비율조정/위치는 정 가운데 정렬로 해줍니다.


어도비뮤즈포트폴리오홈페이지제작방법03

이렇게 한 뒤에 배경을 움직이지 않게 고정하기 위해서 스크롤 메뉴를 들어가 위와 같이 설정을 잡아줘야지만 합니다.


어도비뮤즈포트폴리오홈페이지제작방법04


그러면 화면은 이렇게 나옵니다. 읭? 가운데 흰색 바탕이 있죠? 아무것도 선택하지 않은 상태에서 채우기(Fill)와 획(Stroke)를 모두 없게 하면 그 흰색 바탕은 사라지게 됩니다.^^


자, 그럼 이제 바탕이미지가 들어갔는데 웹페이지에서 어떻게 보여지는지 볼까요? 여기서 단축키는 ctrl + E 입니다.


어도비뮤즈포트폴리오홈페이지제작방법05


Ctrl + E를 누르니 이상한 아이가 뜹니다... 하지만 겁먹지 마세요.ㅋㅋㅋ 걍 간단하게 "www.test.com" 이라고 써놓고, 확인을 누르면 웹페이지에서 미리보기가 가능합니다.^^


어도비뮤즈포트폴리오홈페이지제작방법06


여기까지 마치셨으면, 디자인에서 옆에 있는 플랜 버튼을 눌러주세요.


자, 이제 배경이미지 설정이 끝났으니깐... 안에 내용을 넣어줘야겠지요??


첫번째 화면은 이렇게 만들어질 예정 입니다. 조금 전에 A-마스터에서 배경설정을 해줬으니 이제 홈으로 들어가봅니다. 이제 추가적인 페이지를 제작하지 않고 이 페이지 안에서 총 2개의 페이지를 만들어 둘 겁니다.




2개 이상으로 갈 경우, 어차피 같은 단순한 작업을 반복하는 것이기에...


2페이지만 만들고, 대신 한 페이지 안에서 본인이 지정한 페이지로 이동/스크롤을 따라오는 이미지/롤오버 설정에 대해 익힐 수가 있습니다. 


첫번째 페이지를 만들 적에 아래 순서대로 따라해보세요.



1. 텍스트 도구를 통해 글씨를 써넣는다.

2. 사각형도구를 선택한 다음에 원하는 부분에 사각형을 그려준 후에 채우기를 눌러서 첨부파일에 들어있는 이미지 중 g2를 선택해준다. 그리고 채우기(Fill)과 획(Stroke) 등 색상은 완전히 제거해준다.

3. 첨부파일에 들어있는 이미지 중 circle_01을 선택한뒤 g2 이미지 옆에 배치를 해둔다.

  ※ circle_01은 메뉴로 사용이 될 것으로 아주 중요한 버튼 입니다.^^


※ 자세한 내용은 위 동영상을 보고 따라해보세요.


어도비뮤즈포트폴리오홈페이지제작방법07


순서대로 작업을 진행하게 되면 위와 같이 되어져 있는 것을 ctrl + E를 누르게 되면 웹브라우저를 통해서 볼 수가 있습니다.


간단하게 첫번째 페이지가 완성이 되었고, 이제 그 아래 두번째 페이지를 만들어 보겠습니다.


어도비뮤즈포트폴리오홈페이지제작방법08

현재 레이아웃에서 조금 더 긴 페이지를 만들기 위해 밑에 가이드라인 선을 밑으로 쭉~~ 당겨주면 됩니다.(제가 만든 것은 1000px이기 때문에 2000px까지 늘려줬습니다.) 구분을 지어줘야하기 때문에 가이드라인을 1000px에 1개를 잡아줍니다.(화면에 나오는 자는 ctrl + R, 포토샾과 같습니다.^^)


두번째 페이지 레이아웃배치는 이렇게 해놓으시면 됩니다.(혹은 임의로 하셔도 됩니다.)


어도비뮤즈포트폴리오홈페이지제작방법08-1




그리고 버튼 롤오버 및 스크롤 따라다니게 하는 것에 대해서 배워보도록 할께요~ 스샷으로 하는 것보다 동영상으로 하는 것이 효과적일 것 같아 동영상을 첨부합니다.



롤오버 설정 아주 간단합니다ㅋㅋ 단순하게 객체를 잡아주고 표준/롤오버/누름현상/활성화인지에 대해서 설정을 한 뒤에 그에 맞는 이미지로 바꿔주면 롤오버는 금방 설정이 됩니다.


그리고 스크롤효과, 처음에 원리를 몰라서 헤맸지만... 헤맨 것도 잠시 이해가 갔습니다. 스크롤효과를 하기 위해서 객체를 선택한 다음에 스크롤효과 > 동작 체크를 해주면서 시작이 됩니다.


따라다니는 스크롤효과를 내주기 위해서는 모든 수치를 "0"으로 표시를 해줘야지만 합니다. 그리고 가운데 있는 수치는 위 여백이 없다면 0px로 해야하고, 저는 36px가 들어가있기 때문에 -36px라고 수치가 들어가져 있습니다. 그래야 동영상에서 보시는 것과 같이 움직임없이 스크롤을 따라다니게 됩니다.




이제 마지막으로 버튼을 한개 더 만들어주고, 원하는 곳으로 이동하는 것을 배워보도록 하겠습니다.


버튼 1개 더 만들어주는 것은 이미지를 선택한 다음에 ctrl + c, v하게 되면 한개가 더 만들어집니다. 혹은 alt + 마우스 왼쪽버튼으로 버튼을 선택 후 드레그 하면 복사가 됩니다. 그러면 나머지 부분은 동영상으로 설명할꼐요.



위 동영상을 내용을 간략하게 설명하자면...


1. 원래있던 버튼 1개를 복사해서 새로운 객체를 만든다.

2. 링크기준점을 만든다.

3. 객체를 선택한 다음에 하이퍼링크 > 지정한 링크기준점을 링크로 걸어준다.

4. 웹 브라우저에 띄어서 확이한다.


이 순서로 진행이 됩니다. 여기까지 완성을 하셨으면 다수의 페이지를 만들지 않고 페이지 한개에 이미지를 나열한 뒤, 링크기준점을 만들어 메뉴를 통해 원하는 곳으로 이동 가능한 사이트를 만드실 수가 있습니다.


잘 이해가 되지 않거나 잘못된 부분이 있다면 댓글에 달아두시면 확인 후 수정해놓도록 하겠습니다.^^


그럼 이만 "어도비 뮤즈(muse) 포트폴리오 홈페이지 제작 방법 - 03. 사이트제작"에 대한 포스팅을 마치도록 하겠습니다.^^

반응형
블로그 이미지

-_________-0

IT&모바일, 영화&연극 등 문화 리뷰, 데이트코스/블로그 마케팅에 관한 블로그

,