웹 페이지 템플릿을 처음부터 만드는 방법 - 디지털 전반에 걸쳐 표준 도구 인

웹 사이트 그래픽을 제작하기위한 디지털 에이전시와 사내 부서의 표준 도구는 Adobe Photoshop입니다. Fireworks는 웹 그래픽 소스 파일을 생성하기 위해 최적화되고 특수 목적으로 제작되었지만 전체 부서가 전환하도록하는 막대한 재교육 노력으로 인해 잡히지 않았습니다. 새 웹 컴플리트 템플리트를 설정하려면

1. Photoshop을 시작합니다.

   ->

2. 파일 → 새로 만들기를 선택하십시오.

   나타나는 대화 상자에서 너비가 1, 200 픽셀, 높이가 1 000 픽셀 인 캔버스 크기를 입력하십시오. 해상도는 72 dpi (실제로는 999 픽셀 인치)로 설정해야합니다. 색상 모드는 RGB 색상이어야합니다. 배경색은 흰색 일 수 있습니다. 확인을 클릭하십시오. 포토샵 메뉴에서 환경 설정 → 일반을 선택하십시오.

3. 왼쪽에서 단위 및 눈금자 옵션을 선택합니다. 그런 다음 주 창 영역에서 눈금자에 대해 드롭 다운 메뉴에서 "픽셀"을 선택하십시오. 확인을 클릭하십시오.

   가이드를 사용하게 될 것입니다. 이렇게하려면 4 단계에 표시된 것처럼보기 메뉴에서 눈금자를 켜야합니다.

   메뉴에서보기 → 눈금자를 선택합니다.

4. 눈금자를 본 후 왼쪽 눈금자를 클릭하고 세로 안내선을 드래그하여 100 픽셀 표시로 놓습니다.

   0, 0 마커를 리셋합니다.

   

5. 문서의 맨 위 왼쪽 모서리에 두 개의 자의 교차 부분에 점선이있는 작은 사각형이 있습니다. 해당 사각형을 클릭하고 100 픽셀 표시로 가이드로 드래그하십시오. 단, 페이지 상단에 머물러 있어야합니다. 지금하려는 페이지 상단에 0을 유지하고 현재 100 픽셀 가이드 마크를 0으로 설정하십시오. 올바르게 작성하면 최상위 눈금자에 번호 매기기 업데이트가 표시됩니다.

   두 번째 가이드 표식을 설정하십시오.

6. 왼쪽자를 다시 클릭하고 다른 안내선을 드래그합니다. 이 새로운 가이드를 페이지 전체로 드래그하여 1,000 픽셀 표시로 놓습니다. 1 ~ 6 단계를 올바르게 수행했다면 두 가이드의 양쪽에 100 픽셀의 여백이 있어야합니다. 문서를 저장하십시오.

   배경을 레이어로 만듭니다.

7. [레이어] 패널에는 '배경'이라는 기울임 꼴 레이어가 하나만 있어야합니다. 이를 더블 클릭하여 투명성이있는 레이어로 만들고, 만들 레이어 세트로 이동하십시오. 나타나는 창에서 지금은 레이어 0으로 이름을 그대로두고 확인을 클릭하십시오.

   4 개의 레이어 세트를 만듭니다.

8. 레이어 패널의 맨 아래에 폴더 아이콘이 표시됩니다. 네 번 클릭하여 네 개의 서로 다른

   레이어 세트 (레이어가 포함될 수있는 폴더)를 만듭니다.그것들은 당신을 조직적으로 유지할 수있는 좋은 방법입니다. 다음 단계가 있습니다. 맨 아래 레이어 세트의 Group 1 텍스트를 두 번 클릭하고 모든 대문자로 BACKGROUND로 이름을 바꿉니다.

   1. 폴더 이름에는 대문자, 레이어 이름에는 소문자를 사용하여 구별 할 수 있습니다.

      레이어 0 레이어를 클릭하고 배경 레이어 세트로 드래그합니다.

   2. 그룹 2 텍스트를 두 번 클릭하고 이름을 바꿉니다.

   3. 다른 두 레이어 세트의 이름을 CONTENT 및 NAVIGATION으로 변경합니다.

   4. 이 레이어 세트는 출발점 일 뿐이며 이동하는 동안 더 적은 수 또는 더 많이 필요할 수 있습니다. 템플릿을 저장하십시오.

   이제 창의력을 발휘할 수있는 빈 캔버스가 준비되었습니다. 작성자의 여러 부분에서 작업 할 새 레이어를 만들 때 즉시 레이어의 이름을 지정하고 해당 레이어 세트로 드래그되도록하십시오. 이는 더 체계적으로 머물러있을뿐만 아니라 변경 사항을 작성하는 데 사용하는 다른 디자이너와 HTML 버전을 빌드하는 데 사용해야하는 개발자가 더 잘 이해할 수있게 해줍니다.