1. ●포토샵에서 레이아웃 만들기

[가사모]

●포토샵에서 레이아웃 만들기

1.File-> New하여-> 새창열고-> 사이즈 1300 X 790의 페이지를 만듭니다. 

2.메뉴에 View-> Rulers (Ctrl+ R) 눌러 눈금자 나오게 하고-> 눈금자에서 마/우하여->

  단위를 Pixel로 바꾸고-> 이동툴선택-> 가이드선을 끌어다 가로에는 180, 190 / 세로에는 230,

  600에 가져다 놓습니다.

3.Layer추가해서-> 둥근 사각도형툴 선택-> 옵션에서 Path 선택/ Radius=20 입력/

  Add to path area(+)를 선택하고

4.왼쪽 서브메뉴 위치의 바같에서부터 가이드선 맞추어 드래그 하여-> Ctrl + Enter 하면->

 선택영역이  잡히게 되고-> 

*선택영역에 외곽선을 테두리를 주기위해-> Edit-> Stoke하여-> 대화상자에서 width=2/

 Color=연한 검정/ Location=Imside 선택하고-> OK하고-> 선택해제 합니다.(Ctrl+D)

5.다시 Layer추가-> 앞 단계와 같이-> 둥근 사각도형툴 선택-> 옵션에서 Path Radius=20주고->

 오른쪽 본문이 들어갈 공간에-> 가이드선 맞추어-> 오른쪽 바같까지 드래그 하여-> Ctrl+Enter

하면-> 선택영역이 잡히면-> Edit-> Stoke하여-> 대화상자에서 width=2/ Color=연한 검정색/

 Location=Imside 입력-> OK하고-> 선택해제(Ctrl+D)하면-> 아래와 같은 모양이 됩니다.

6.Layout을 Slices로 잘라-> Gif 이미지로 만들기 위해-> 추가로 가이드선을 설치한다.

*둥근 사각형의 모서리(곡선) 부분과 곡선이 끝나고 직선되는 부분에 가이드선을 추가로 삽입하고

*도구상자에서 Slice Tool을 선택-> 옵션바에서 Slices from Guides를 클릭하면-> 가이드선

 따라 자동으로 잘라집니다.

7.잘라진 토막이 너무 많으면 관리에 불편함으로-> 다시 Slice칼로 영역을 잡고-> 통합하면->

 합치면서  자동으로 번호가 다시 부여됩니다. 

8.저장하기

*원본은 필요시 수정하기 위해 File-> Save하여 psd로 저장해 두고...

*다음은 File-> Save for Web & Devices하여-> gif를 선택하고-> Save합니다.

9.Save 대화상자에서-> 파일이름은 main 입력/

  파일형식에 [HTML and Images(*html)를 선택하고->저장을 클릭합니다.

10.탐색기에 확인해보면

 *main.html의 폴더와 자동적으로 images의 폴더가 생기면서-> images폴더안에

  잘라진 이미지가 저장됩니다.

11.images폴더에 저장된 이미지를 보면

 *main.01부터 main.15까지 자동으로 파일이름까지 붙혀지면서 저장됩니다.

 *다음에 드림위버에서 main.html 만 불러오면 됩니다.

첨부:

layout(1300x790).psd