|
●포토샵에서 레이아웃 만들기
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