Issuu on Google+


Muse란 adobe에서 발표한 코딩을 하지 않고 웹사이트를 제작할 수 있는 툴입니다.

1


2


http://adobe.muse.com에 들어가시면 위와 같은 화면이 나오는데 좌측 아래에 보이는 Get Muse를 클릭합니다. Get Muse를 클릭하시면 아래와 같은 화면이 나오고 열기를 누르십니다.

3


열기까지 끝나셨다면 이 화면이 나오실 텐데 이 화면에서는 설치를 눌러주시면 설치가 완료됩니다.

4


2


Muse 사이트에 Learn에 들어가시면 Tutorials가 있고 그 Tutorials를 클릭합니다.

Tutorials에 들어가시면 Download the demo assets이 있는데 두가지 중 하나를 클릭해서 다운받습니다. 저는 KevinsKoffee 를 다운받겠습니다. 6


Muse를 설치하고 실행하시면 다음과 같은 화면이 나오는데 Create New 아래에 Site를 누르시면 새로운 사이트를 만드실 수 있고 Open a Recent Site 최근에 실행된 사이트가 표시됩니다. 또 Open을 누르시면 이미 만들어짂 사이트를 열수 있는데 저도 처음 해보는 관계로 Open으로 다운받은 KevinsKoffee를 열겠습니다.

7


다운받았던 KevinsKoffee 파일에 압축을 풀면 사용되는 이미지와 텍스트 파일이 나오는데 그 중에 KevinsKoffeeKart.muse라는 아이콘을 클릭해서 실행해 봅니다.

8


KevinsKoffeeKart.muse 라는 아이콘을 클릭하시면 완성된 페이지들이 나오는데 여기서 Ctrl+Alt+E를 누르시면 웹사이트로 연결이 가능합니다. 이제 직접 만들어 보겠습니다.

9


10


Muse를 실행하고 Site를 누르시면 이런 창이 나오는데 이 부분에서 넓이와 높이 컬럼의 넓이, 갂격을 지정하고 마짂과 페딩을 지정하신 후 OK를 클릭하시면 됩니다.

11


레이아웃에 수치를 지정하고 실행을 시키면 이런 화면이 나오는데 여기서 Ctrl+Shift+S를 눌러 다운받은 폴더에 MyNewSite라고 저장합니다. (저장할 때 이름은 자기마음대로 해도 됩니다.)

12


Home 페이지에 우측에 +버튼이 있는데 버튼을 2번 누르면 2개의 페이지가 생성됩니다. 일단 2개의 페이지를 생성한 후 master페이지를 클릭해 넘어갑니다.

13


Master 페이지로 들어가시면 이런 화면이 나오는데 여기서 Browser Fill을 클릭해 봅니다.

14


Browser Fill을 클릭하면 이런 화면이 나오는데 여기서 배경 이미지를 변경합니다. Image옆에 있는 폴더 모양의 아이콘을 클릭해서 다운받은 폴더에 bk-map.gif 파일을 선택합니다. Fitting은 Title을 선택하고 Position은 중앙을 선택합니다.


여기는 Fill부분인데 Fill에서는 Opacity를 90으로 조정해서 흰색바탕의 투명도를 약갂 투명하게 합니다.

16


배경에 이미지를 넣으셨으면 Ctrl+D 를 눌러서 다운받은 폴더에서 Top-nav.png를 선택합니다. 선택하시면 커서에 이미지가 나오는데 커서를 드래그해서 흰 바탕 위에 배치합니다.

17


전 페이지와 마찬가지로 logo.png를 선택해서 방금 만든 이미지 위에 드래그로 넣어주고 thedrip.png를 선택해서 우측 상단에 넣어줍니다.

18


사각형 툴을 사용해서 길게 사각형을 그려주고 Fill에 Color에 사선이미지를 선택, Image에서 footer-zag.png파일을 열어줍니다. Fitting은 Title Horizontally로 바꿔줍니다.

19


역시 사각형 툴을 사용해서 사각형을 그려주고 Fill 컬러에서 스포이드를 선택해서 전에 만들었던 삼각형을 클릭하시면 그려놨던 사각형 안에 삼각형과 같은 색이 들어갑니다.

20


메뉴에서 파일 Place Photoshop Button을 선택한 후 btn-share.png 파일을 선택합니다. 선택을 하시면 4가지 상태가 있는데 저희는 3가지만 있어도 되기 때문에 OK를 눌러준 후 가져온 파일이 있어야 할 위치에 마우스를 클릭합니다.

21


메뉴에서 윈도우-위젯을 누르면 위젯창이 나옵니다. 나온 위젯창에 Menus에 있는 Horizontal을 드래그해서 가져옵니다.

22


가져온 글을 메뉴바 위에 올리는데 ABOUT은 없기때문에 만들어줍니다. 위젯에 Text에서 글자의 크기와 굵기 글자의 색상을 변형시켜줍니다.

23


프리뷰를 이용해 웹상에서 확인해 보시면 메뉴바 위에 마우스를 갖다놨을때 배경이 회색으로 바끼는것을 알수있습니다. 이걸 바꾸기위해 위젯에 States에서 Rollover를 클릭 Fill에 Color에서 사선이미지를 클릭합니다. Mouse Down까지는 똑같이 해주고 Active는 Image에서 top-nav-over.png파일을 선택해 넣어줍니다. 24


위젯에 Panels에서 Accordion을 드래그해서 가져옵니다. 가져온 Accordion에 아래에 +버튼을 눌러 주고 크기를 지정합니다.

25


만들었던 Accordion에 텍스트 툴을 이용해서 본인이 넣고 싶은 글을 넣어줍니다. 넣어준 후에는 내용이 잘 접히는지 확인을 합니다.

26


위젯에 Text에서 타이틀 글자 크기와 굵기를 정해줍니다.

안에 내용들도 타이틀을 바꾼것처럼 바꾼다.

27


선택툴을 사용해 타이틀을 클릭한 후에 Fill에 Color에 사선이미지를 클릭해서 배경색을 사라지게 해주고 Image에서 Acc-Blue.png 를 선택해서 타이틀을 바꿔줍니다.

28


나머지도 안에 내용을 넣어주고 글자의 색, 크기를 변경해줍니다. 이제 프리뷰로 확인을 해주는데 프리뷰를 하면 타이틀에 아직도 회색효과가 나올겁니다. 이걸 제거하기 위해 위젯에 States에 Rollover를 클릭 Fill에 Color에서 사선이미지를 선택해줍니다.

29


이미지를 넣는 방법은 Ctrl+D 를 이용하여 자신이 넣고 싶은 이미지를 가져옵니다. 가져온 이미지의 크기를 줄인 후 Ctrl+X 를 하고 텍스트 툴을 선택한 다음 자신이 넣고 싶은 글자 앞이나 뒤를 클릭해서 Ctrl+V 로 넣어줍니다.

30


이제 자신이 어느 정도 만들었다고 생각이 들면은 파일에 Export to HTML을 클릭해서 자신이 만든 부분을 HTML로 전홖이 가능합니다. 이 부분까지 했다면 아마 자신이 원하는 형태의 사이트를 만드실 수 있을 겁니다.

31



muse