웹사이트 개발에 익숙한 사람이라면 보통 HTML 구조부터 시작하지 않는다는 것을 알고 있습니다. 대신 그래픽 프로그램을 사용하여 페이지의 레이아웃을 만듭니다. (에이전시에서 일하는 경우 그래픽 디자이너나 고객이 레이아웃을 제공합니다). 그런 다음 이 레이아웃을 바탕으로 페이지를 구축하는 것이 작업입니다. 이것이 바로 지금 우리가 이야기할 내용입니다.
레이아웃 재구성과 관련하여 슬라이싱 및 다이싱이라는 용어를 반복해서 접하게 될 것입니다. 이 용어는 실제로 템플릿이나 디자인을 가져와서 그래픽 프로그램에서 잘라낸 다음 HTML을 사용하여 다시 조합하는 것을 의미합니다.
적합한 그래픽 프로그램
사람마다 선호하는 소프트웨어에 대한 선호도가 다릅니다. 물론 이는 그래픽 프로그램에도 적용됩니다. 그러나 전문적인 웹 디자인의 맥락에서는 상황이 조금 다릅니다. 여기서는 Photoshop이 거의 독점적으로 사용됩니다. 실제로 대부분의 디자인 초안은 PSD 파일로 제공됩니다. 그리고 모든 프로그램에서 열거나 편집할 수 없는 것은 바로 이 PSD 형식입니다.
Photoshop이 없다고 해서 완전히 길을 잃은 것은 아닙니다. GIMP가 대안이 될 수 있습니다. http://www.gimp.org/ 에서 무료로 프로그램을 다운로드할 수 있습니다. GIMP를 사용하여 레이아웃을 만드는 기본 단계를 보여 드리겠습니다. 그러나 이 방법은 Photoshop에서도 비슷한 방식으로 작동합니다.
나만의 레이아웃 만들기
먼저 기본적인 디자인 측면에 대해 생각해 보세요:
- 레이아웃의 폭은 얼마나 넓어야 할까요?
- 몇 개의 열을 포함해야 할까요?
그런 다음 파일>새로 만들기를 통해 작업 공간을 만들고 크기를 정의합니다. 제가 만든 레이아웃은 "페이지 채우기"이지만 실제 콘텐츠의 너비는 1000픽셀에 불과합니다. 레이아웃 높이는 887픽셀로 설정했습니다. (나중에 웹사이트의 높이는 콘텐츠에 따라 달라지겠지만).
확인으로 설정을 확인합니다. 이제 작업 공간을 사용할 수 있으며 콘텐츠로 채울 수 있습니다. (명확성을 위해 디자인에서 회색 배경으로 작업합니다. 나중에 웹사이트에 표시되지 않습니다).
웹사이트에 속하는 일반적인 요소는 일반적으로 그래픽으로 제공되는 로고입니다. 레이아웃에 로고를 삽입하려면 파일>열기로 이동하여 로고를 선택하고 PNG, GIF 또는 JPEG 형식 중 하나를 선택합니다. 열기로 선택 사항을 확인합니다. 이제 Ctrl+C를 눌러 로고를 클립보드에 복사합니다. 그런 다음 실제 웹 디자인으로 전환하고 Ctrl+V를 누릅니다. 붙여넣은 로고가 아직 원하는 위치에 있지 않을 것입니다. 그러나 이동 도구를 사용하여 올바른 위치로 쉽게 이동할 수 있습니다.
이미지를 이동할 수 없는 경우 먼저 레이어를 활성화해야 합니다. 해당 설정은 창>도킹 가능한대화상자>레이어에서 찾을 수 있습니다.
더 나은 레이아웃을 위해 안내선을 표시해야 합니다. 이렇게 하려면 마우스 버튼으로 눈금자를 클릭하고 마우스 왼쪽 버튼을 누른 상태에서 원하는 위치로 드래그합니다.
이렇게 하면 웹사이트의 요소를 정렬하기 위해 원하는 만큼 안내선을 그릴 수 있습니다.
이제 다른 레이어를 만듭니다. 이 레이어에는 최상위 메뉴가 포함되어야 합니다.
탑 메뉴라는 이름을 지정할 수 있습니다. 확인으로 레이어를 만듭니다. 선택 사각형을 불러와 탐색을 삽입할 영역을 드래그합니다.
현재 예제에서는 상단 메뉴의 배경에 색상 그라데이션이 있다고 가정합니다. 이를 위해 색상 그라디언트를 클릭합니다: 색상 그라디언트가 있는 선택(채우기)을 클릭합니다.
색상 그라데이션은 회색에서 검은색으로 이어져야 합니다. 색상 필드를 사용하여 해당 색상을 설정할 수 있습니다. 저는 색상 그라데이션 유형을 VG에서 HG로 설정하여 전경색에서 배경색으로 이어지도록 했습니다 . 이제 Ctrl 키를누른 상태에서 선택한 영역에 위에서 아래로 선을 그립니다. 마우스 왼쪽 버튼에서 손을 떼면 해당 영역에 원하는 색상 그라데이션이 적용됩니다.
원칙적으로 이제 두 가지 옵션이 있습니다:
- 탐색 영역을 그대로 둘 수 있습니다.
- 개별 메뉴 항목을 삽입하여 디자인에 사용 중인 글꼴 등을 정확하게 확인할 수 있습니다.
물론 이 두 가지 옵션 중 어떤 것을 선택할지는 궁극적으로 회원님의 선택에 달려 있습니다. 하지만 예를 들어 고객에게 레이아웃을 보여주고 싶다면 메뉴 항목을 포함하는 것이 좋습니다. 경험상 많은 고객이 여기에 상상력이 부족하다는 것을 알 수 있습니다.
먼저 글꼴을 선택해야 합니다. 김프에서는 창>도킹 가능한 대화 상자>글꼴에서 해당 설정을 찾을 수 있습니다.
이 시리즈에서 우리는 이미 CSS 및 HTML과 관련된 글꼴 문제에 대해 논의했습니다. 궁극적으로 웹 디자이너는 이론적으로 원하는 글꼴을 지정할 수 있습니다. 그러나 이 글꼴이 실제로 사이트 방문자의 컴퓨터에 존재하여 표시될 수 있는지 여부는 알 수 없습니다. 따라서 특히 매우 이국적인 글꼴을 사용하는 경우 결과를 확인하기가 어렵습니다. 그러나 예제 웹사이트의 글꼴에 관해서는 이 시리즈의 과정에서 이 측면으로 돌아가겠습니다. 현재 레이아웃의 경우 다음 설정을 사용하기로 결정했습니다:
- 베르다나 굵게
- 20픽셀
- 흰색 글꼴 색상
이제 이런 식으로 개별 메뉴 항목을 삽입할 수 있습니다. 가장 좋은 방법은 첫 번째 메뉴 항목이 포함된 레이어를 복사하여 새 레이어로 붙여넣는 것입니다. 그런 다음 레이어에서 텍스트를 사용자 지정할 수 있습니다. 이런 식으로 최상위 메뉴를 만듭니다.
상단 메뉴에는 호버 효과가 있어야 합니다. 즉, 개별 메뉴 항목 위로 마우스 포인터를 이동하면 배경색이 변경됩니다. 물론 이 측면도 디자인에서 시각화해야 합니다. 이렇게 하려면 원하는 호버 색상을 설정하고 기존 메뉴 레벨 중 하나를 복사합니다. 이 레이어에 색상을 할당합니다. 현재 예시에서는 파란색 그라데이션을 가정합니다. 그런 다음 메뉴 항목의 텍스트를 삽입합니다. 이렇게 하면 메뉴가 최종적으로 어떻게 보일지 감을 잡을 수 있습니다.
