[올제] 구글웹디자이너 프로그램 슬라이드 후루룩 만들어보기

구글에서 구글웹디자이너라는 프로그램이 나왔습니다. 베타군요! (

개인적으로는 이름을 구글 웹디자이너라고 해서 다들 구글에 웹디자이너가 있어? 

구글 웹디자이너들 사진인가!라고 생각했는데 프로그램 이름이라는;;  )

사용해보니 간단하게 제작할 수 있게 만들어 놓았네요. 

그중에서도 디자인을 하는대로 코드가 자동생성 되는부분이 편리합니다.

아래는 후루룩 만들어본 페이지 입니다. 제 속도로 2분이면 되네요~ 

클릭하시면 볼수 있습니다. 왼쪽으로 넘기시면서 보실께요~

위에 이미지처럼 후루룩 만드는 방법

---

1. 프로그램을 다운 받습니다. 

http://www.google.com/webdesigner 

링크에서 상단 버튼이 보이시죠~? 클릭해서 다운받습니다.

2. 검은 화면창이 나오네요. 여기서  파일> 새파일 클릭 후 원하는 크기가 있으면 custom 클릭후 너비/높이입력

전 일단 새창열고 우측 에서 사이즈 변경 했어요. (파일>새파일에서 해도 상관없어요~)

아래 화면에보면 속성에 위치및 크기가 보이시죠?  여기서 변경하셔도 됩니다.

3. 우측 창중에 요소부분 창을 열어서  원하는 요소를 가지고 옵니다. 

전 회전 갤러리를 사용하였습니다. 드레그해서 창으로 끌고 오세요

4. 이미 절반은 했어요~ 

하단에 보시면 애니메니션 창같이 보이는데 여기서 + 버튼을 눌러서 몇개의 사진을 슬라이드 할지 추가해 주신후 

5.애니메이션 창하나에 사진 한장씩 넣으시면 됩니다. 

사진은 우측메뉴> 요소> 이미지> 사진추가

6. 저장할때 이미지와 함께 html 이 저장됩니다. 

완성입니다.

http://img.allje.com/alljeblog/index.html

*화면이 블랙에 가까워서 속성이나 요소창 볼때 하단에 내용이 더있는지 잘 안보이네요. 이부분 스크롤바로 내리시면 있으니 참고하세요~ 

전 작업후에 오른쪽으로 넘기라는 표시가 없으면 모를꺼같아서 화살표를 그려주었어요. 

그림그리는것은 왼쪽에 도형툴을 이용해서  그릴수 있답니다. 

라운드 사각형을 수치만으로 조절하는것도 되어있어서 편리합니다.  제가 작업한 것은 이 프로그램의 10분의 1정도 인것 같습니다~! 

---

아쉬운점.좋은점.

포토샵이나 일러스트를 가져와서 레이어 살린 상태에서 활용하면 좋을것 같은데 그부분은 아쉽네요.~!

여러모로 활용도가 있는 프로그램인것 같은데 이것도 익숙해 지려면 반복이 중요하겠쬬~ ㅠㅜ 

코딩에 익숙한분은 이게 더 번거로울수도 있겠지만, 우측에 요소부분에 있는것을 활용해서 아주 간단하게 제작할거라면 사용할만 합니다. 

참고 url. 걸어놓을께요. 

구글웹디자이너 데모 : http://youtu.be/kHj7fqbNaQw

전반적인 설명및 다운로드(맥/윈도우용) : http://www.google.com/webdesigner/