레이아웃의 현재 상태는 다음과 같은 모습일 것입니다:
지금까지 로고와 상단 메뉴가 추가되었습니다. 탐색 바로 아래에 표시되는 약간 더 큰 그래픽으로 계속 진행하겠습니다.
새 레이어를 만드는 원리는 이전 튜토리얼에서 이미 설명했습니다. 따라서 이 시점에서 다른 것을 보여드리고자 합니다. 상단 메뉴 바로 아래에 더 큰 이미지가 표시될 것입니다. 결과는 다음과 같습니다:
이미지를 삽입할 때 이미지의 크기가 올바른 크기여야 합니다. 따라서 필요한 경우 미리 편집하세요. 그런 다음 파일>열기로 이동하여 이미지를 선택합니다. 그러면 선택한 이미지가 새 창에 표시됩니다. Ctrl+C를 눌러 이미지를 클립보드에 복사합니다. 이제 이미지를 적절한 크기의 레이어로 붙여넣을 수 있도록 편집>다른 이름으로 붙여넣기>새 레이어를 선택합니다. 새 레이어에 이미지의 크기가 자동으로 지정되므로 레이어를 올바른 위치로 이동하기만 하면 됩니다. 이렇게 하면 삽입하려는 모든 이미지를 레이아웃으로 전송하여 배치할 수 있습니다.
그런 다음 나중에 실제로 표시되어야 하는 위치에 텍스트를 삽입합니다. 디자인 단계에서는 일반적으로 소위 더미 텍스트를 사용합니다.
앉아서 "테스트, 테스트, 테스트" 라고 거칠게 쓰기 전에 http://www.blindtextgenerator.de/ 을 방문하는 것이 좋습니다.
거기에서 다양한 유형의 더미 텍스트를 자동으로 생성할 수 있습니다. 그런 다음 텍스트를 쉽게 복사하여 디자인 초안에 붙여넣을 수 있습니다. 이와 관련하여 http://dummyimage.com/ 웹사이트도 추천합니다. 이 페이지에서 모든 크기의 더미 이미지를 생성할 수 있습니다. 그런 다음 이 더미 이미지를 레이아웃에서 아직 생성되지 않은 원본 그래픽의 플레이스홀더로 사용할 수 있습니다.
투명 레이어의 문제
텍스트를 삽입하는 경우 텍스트는 제목, 텍스트 단락 등 여러 요소로 구성됩니다. 따라서 함께 속한 텍스트를 별도의 레이어에 그룹화해야 합니다. 이렇게 하면 이러한 텍스트를 항상 한 번에 이동할 수 있습니다. 이렇게 하려면 레이어>새 레이어를 불러옵니다. 그런 다음 원하는 크기와 배경색을 레이어에 지정합니다. 하지만 대부분의 경우 투명한 배경을 설정/필요하게 됩니다. 문제는 투명 레이어를 이동하기가 어렵다는 것입니다. 결국 하위 레이어를 만들게 되는 경우가 많습니다. 이 문제는 쉽게 피할 수 있습니다. 도구 상자 창의 설정이 이를 위해 중요합니다. 이동 도구를 활성화합니다. 그런 다음 창 하단의 활성 레이어 이동 옵션을 활성화합니다.
이렇게 하면 투명 레이어를 원하는 위치로 이동할 수 있습니다.
요소 잘라내기
레이아웃이 마음에 들면 HTML 웹사이트로서 실제로 구현할 차례입니다. 이때 슬라이싱이 중요한 역할을 합니다. 슬라이싱은 레이아웃을 개별 부분으로 자른 다음 나중에 HTML과 CSS를 사용하여 재조립하는 것에 지나지 않습니다. 나중에 개별적으로 표시할 모든 요소를 슬라이스해야 합니다. 물론 여기에는 개별적으로 사용할 수 있는 모든 이미지 요소가 포함되지는 않습니다. 먼저 요소를 잘라내는 방법을 보여드리겠습니다. 이렇게 하려면 해당 요소 주위에 가이드 라인을 그립니다. 가이드 라인은 궁극적으로 잘라낸 가장자리를 형성합니다. 따라서 올바르게 설정했는지 확인하세요.
이제 원하는 영역을 선택하고 Ctrl+Shift+C 키 조합을 누릅니다 . (참고로 이 키 조합은 GIMP와 Photoshop 모두에 적용됩니다). 그런 다음 새 파일을 만듭니다. Photoshop에서는 올바른 크기가 됩니다. 안타깝게도 김프에서는 이 작업이 쉽지 않습니다. 여기서는 충분한 크기의 파일을 만들기만 하면 됩니다. 클립보드에서 콘텐츠를 붙여넣으려면 Ctrl+V를 사용합니다.
이제 자르기 도구가 작동합니다. 이 도구를 사용하여 잘라낼 영역을 정의한 다음 Return 키를누릅니다. 그러면 이미지가 원하는 영역으로 잘립니다. 파일>다른 이름으로 저 장을 통해 이미지를 저장할 수 있습니다.
많은 웹사이트에서 중요한 스타일 요소 중 하나는 색상 그라데이션입니다. 여기에 표시된 레이아웃 예시에도 이러한 색상 그라데이션이 있습니다. 색상 그라데이션을 분할하려면 해당 그라데이션의 좁은 영역을 선택합니다. 실제로 너비가 1픽셀인 영역을 설정하면 충분합니다. 반면 높이는 요소의 실제 높이와 일치해야 합니다. CSS를 사용하면 나중에 전체 요소가 채워질 때까지 이 그래픽이 가로로 반복되도록 할 수 있습니다. 물론 더 넓은 이미지 섹션을 사용할 수도 있습니다. 그러나 이렇게 하면 페이지의 성능이 저하됩니다. 따라서 색상 그라데이션의 너비로 한 픽셀을 선택합니다.
Ctrl+Shift+C를 사용하여 1픽셀 너비의 그래픽을 클립보드에 복사하고 새 이미지로 붙여넣습니다. 그런 다음 새 이미지를 관련 섹션으로 가져온 후 저장합니다.
이렇게 하면 슬라이싱의 기본 원칙이 명확해집니다. 레이아웃에서 나중에 웹사이트에 속하는 모든 것을 잘라냅니다. 먼저 잘라낼 필요가 없는 개별 페이지 요소가 이미 있는 경우 슬라이싱 우회 없이 바로 가져옵니다.
이제 결과는 다음과 같아야 합니다: 나중에 웹사이트에서 사용하려는 모든 그래픽을 확보한 것입니다. 여기에는 예를 들어 로고, 배경, 색상 그라데이션 등이 포함됩니다. 색상 그라디언트 얘기가 나와서 말인데: 물론 CSS3를 사용하여 색상 그라디언트를 쉽게 만들 수 있다는 것은 잘 알고 있습니다. 하지만 문제는 아직 모든 브라우저가 이를 지원하지 않는다는 것입니다. 색상 그라데이션을 사용하면 슬라이싱을 매우 잘 보여줄 수 있기 때문에 이 튜토리얼에서는 색상 그라데이션을 구현하기 위해 그래픽을 사용했습니다.
