디저슬라이더

Web 및 APP에서 자주 사용되는 이미지 슬라이드를 쉽고 빠르게 제작 할 수 있는 제작 툴

다음

매뉴얼

디저슬라이더매뉴얼
게시글 검색
[디저슬라이더] 슬라이드 만들기 : 2) 슬라이드 마법사 - ② 컨텐츠 추가 및 수정
데브디저트 조회수:813
2016-05-30 17:19:40

장면 추가 및 옵션 설정이 완료 되셨나요? 그렇다면 이제 컨텐츠를 추가해 보도록 하겠습니다~

만약 장면 추가를 하지 못 하셨다면 이전 단계의 게시글을 참고해 장면을 추가해 주세요^^   ☞ 장면 추가 및 옵션 설정

 


 

슬라이드 마법사 좌측에 보시면 컨텐츠 목록라인 상단에
[텍스트 추가] 버튼과 [이미지 추가] 버튼이 각각 있는 걸 확인하실 수 있습니다~

그럼 이제 이 버튼들을 이용해 컨텐츠를 추가해 보겠습니다~^^

 

 

 

1. 이미지 컨텐츠 추가

이미지를 먼저 추가해 볼까요? [이미지 추가] 버튼을 눌러주세요~

그럼 이미지를 업로드 할 수 있는 업로드 창이 나타납니다^^

 

 

이미지 컨텐츠도 장면(배경 이미지)과 같이 jpg, gif, bmp, png 파일만 업로드 가능해요~
[찾아보기]버튼을 눌러 업로드 할 이미지 파일을 선택해 주세요.

참고로 모든 컨텐츠(이미지&텍스트)에는 링크값을 이용해 해당 컨텐츠를 클릭했을 때에 상품상세 페이지, 이벤트 페이지 또는 타 사이트 등 원하는 페이지 어디든 이동시킬 수 있습니다.

이번에 등록 할 이미지 컨텐츠는 링크값을 입력하지 않고 아래 [추가] 버튼을 눌러 컨텐츠를 장면에 추가시켜 보겠습니다~

 

 

장면의 왼쪽 상단에 이미지 컨텐츠가 추가되었고, 컨텐츠목록 라인에는 장면 위로 컨텐츠 레이어가 하나 더 추가된게 보이죠?

컨텐츠를 원하는 위치로 옮기려면 해당 컨텐츠를 클릭한 상태로 드래그하면 쉽게 이동이 가능해요.
또는 이미지 컨텐츠를 선택하고 방향키를 이용해 1px씩 이동 할 수 있어요.
이때 키보드 [Shift]키를 누르고 방향키를 사용하면 10px씩 이동합니다^^
저는 마우스로 클릭한 후 드래그해서 오른쪽으로 이동시켜 보겠습니다.

 

< 사이즈 크기 조절 >

 

추가한 이미지의 크기를 줄이고 싶다면 위와 같이 이미지를 둘러싸고 있는 네모포인트를 잡고 원하는 크기만큼 축소 할 수 있어요. 이때 키보드 [Shift]키를 누르고 축소/확대하면 비율은 유지하고 사이즈만 변경 할 수 있어요.

이때 주의하실 점은 사이즈가 작은 이미지를 선택해 너무 크게 확대하는 경우 또는 큰 이미지를 선택해 작게 축소해서 저장한 후 다시 크게 확대하는 경우에는 이미지가 흐릿해 질 수 있으니 주의해 주세요^^

큰 이미지를 불러왔더라도 축소한 뒤 저장버튼을 누르게 되면 원래의 큰 이미지 사이즈가 아닌 줄여놓은 이미지 사이즈로 저장이 됩니다. 만약 큰 이미지를 작게 줄여서 저장한 뒤에 이미지를 다시 크게하고 싶다면 그 이미지를 그대로 늘리지 마시고 삭제 후 컨텐츠를 다시 추가해 사이즈를 변경해 주시는 것이 좋습니다~

 

적당한 사이즈의 이미지를 원하는 위치로 이동했다면 이제 텍스트 컨텐츠를 추가해야겠죠?

[텍스트추가] 버튼을 눌러주세요~

 

  

2. 텍스트 컨텐츠 추가

[텍스트 추가] 버튼을 누르면 아래와 같은 창이 나타납니다.

먼저 "내용"을 입력하시고 폰트크기, 폰트스타일, 폰트색상을 설정해 보세요~

 

 

< 텍스트 색상 변경 >

 

< 텍스트 배경 색상 변경 >

 

위와 같이 "내용" 입력창 아래에 있는 "텍스트 배경" 에서 내용 입력창의 컬러를 설정할 수 있습니다.

흰색 배경에서 잘 보이지 않는 컬러(예를 들어 흰색이나 밝은 회색 등)로 텍스트를 입력 할 경우 검정색 배경으로 변경해서 작업하면 편하게 작업 할 수 있어요^^

 

 

여기서 잠깐!

텍스트 컨텐츠의 폰트크기, 폰트스타일, 폰트색상을 변경하면 "내용" 입력창에서 설정된 폰트를 바로 확인 할 수 있습니다. 참 편리한 기능이죠?

단, 폰트스타일은 익스플로러(IE), 사파리(Safari)에서는 미리보기 지원이 되지 않습니다. 해당브라우저에서 지원을 하지 않기 때문에 현재로서는 작업하시는 브라우저에 따라 “내용”부분 출력이 "폰트스타일만" 다소 다를 수 있으니 참고해 주세요^^

그외  크롬, 파이어폭스, 오페라에서는 버전에 상관없이 미리보기가 지원됩니다^^

 

 

 

익스플로러(IE), 사파리(Safari)에서는 미리보기만 되지 않을뿐, 편집창에서는 폰트스타일이 정상적으로 적용되니 걱정마세요^^

 

텍스트 컨텐츠도 링크값을 입력해 해당 텍스트를 클릭시 원하는 페이지로 연결 할 수 있어요.

설정을 모두 마쳤다면 [추가] 버튼을 눌러 장면에 추가된 텍스트 컨텐츠를 확인해 보겠습니다~

 

 

이미지 컨텐츠를 이동했던 것과 마찬가지로 원하는 위치로 방향키를 이용하거나 클릭, 드래그해서 이동해 주세요~

 

 

[컨텐츠 수정 방법]

컨텐츠를 추가한 뒤에 이미지나 글자 내용을 수정하고 싶을 때는 컨텐츠 목록에서 해당 컨텐츠의 수정 버튼인 톱니바퀴 버튼을 눌러 주시면 됩니다.

더 간편한 방법은 장면 폅집창에서 수정하고자 하는 컨텐츠를 더블 클릭 해주시면 수정 창이 나타납니다~ 간단하죠?

더블 클릭을 통한 수정창 띄우기는 "background" 컨텐츠를 제외하고 다 가능합니다^^

 

 

3. 반복 작업

1번과 2번에서 작업한 내용을 반복적으로 작업해 필요한 컨텐츠들을 더 추가해 배치해 보겠습니다.

추후에 작업 할 예제에 필요한 과정이니 더 추가해 주세요~

수시로 저장하는 것도 잊지마세요^^

 

 

2개의 텍스트 컨텐츠와 이미지 컨텐츠를 하나 더 추가했어요. 컨텐츠 목록라인이 가득찼네요^^

어떤가요? 슬라이드이미지가 점점 완성되어가고 있는 것 같나요?

저는 상품배너를 만들었기 때문에 상품페이지로 바로 갈 수 있는 버튼을 하나 더 추가해 보겠습니다~

바로가기 버튼을 이미지로 만들어서 미리 제작해두고 이미지 컨텐츠로 업로드해 링크를 걸 생각이에요^^

 

 

페이지 주소를 입력하고 링크된 페이지를 열 때 “새창”으로 또는 “현재창”으로 열 것인지 선택해 주셔야 합니다.

“새창”은 새로운 창을 열어 링크된 페이지를 볼 수 있고, “현재창”은 슬라이드 플레이하고 있는 현재의 인터넷 창에서 링크된 페이지로 바로 이동해 페이지를 볼 수 있어요. 만약 타 사이트로 링크 할 경우에는 새창으로 링크된 페이지를 열 수 있도록 설정하는게 편리하겠죠?

저는 선택 후 [추가] 버튼을 눌러 장면에서 추가된 모습을 확인하고 위치를 이동시켰습니다~

 

 

조금 전 이미지를 추가해 바로가기 버튼을 만들었지만, 텍스트 컨텐츠로도 링크 값을 이용해 "바로가기" 텍스트 버튼을 만들 수 있습니다~ 이미지 버튼을 만들 수 없다면 간단하게 텍스트 컨텐츠를 이용하는 것도 하나의 방법이겠죠?^^

 

여기까지하면 슬라이드의 한 장면이 얼추 완성이 되었을 것 입니다. 지금처럼 이미지와 텍스트를 한꺼번에 다 보여주고 배경 이미지에만 장면효과를 줘서 일정 시간 뒤 바로 다음 장면으로 넘어가는 것도 나쁘지 않겠지만 각 이미지와 텍스트마다 나타나고 사라지는 시간을 설정하면 더 화려하고 고급진 슬라이드가 연출될 것 같네요^^

그럼 이제 본격적으로 슬라이드 마법사의 꽃인 각각의 컨텐츠 딜레이 시간과 효과를 설정하는 기능에 대해 알아보도록 할까요?!

컨텐츠 효과 설정에 대한 설명은 다음 글을 통해 확인해 주세요~^^!

 

☞ 컨텐츠 딜레이 시간 및 효과 설정하기

댓글[0]

열기 닫기