팬 사이트 디자인 단계별로

이 게시물은 이미 오랫동안 구상되고 준비되었습니다. 원래는 "팬 사이트 만들기" 시리즈의 연장선으로 나올 예정이었죠 (하나 및 둘). 그렇다면 이 기사가 Fable 3 블로그에 왜 있는 걸까요? 답은 간단합니다: 디자인의 경우 구체적인 예시 없이 무언가를 설명하기란 쉽지 않죠. 구체적인 맥락 없이 디자인이란 존재할 수 없습니다. 그래서 몇 주 전, Fable 시리즈 게임에 대한 팬 사이트를 재작업하기로 결정했을 때, 저는 "여기서 제가 프리미엄을 나누겠다"고 생각했습니다.

사실, 저는 이 글을 통해 우주의 위대한 비밀을 밝히거나, 단 하나의 기사를 통해 여러분이 팬 사이트의 독특한 디자인을 만드는 방법을 가르치는 것을 목표로 하지 않았습니다. 디자인 주제는 방대하고 다면적이어서 한 디자이너가 단 한 작업으로 이를 완전히 설명할 수는 없습니다... 또한 제가 미리 말씀드리고 싶은 것은, 이것은 포토샵 작업법에 대한 수업이 아닙니다. 그것들은 저 없이도 충분히 많으므로, 구글을 이용해보세요. 저는 저자이므로 여러분이 이미 포토샵의 기본 기능을 알고 있다고 가정하고, 따라서 "여기에 클릭하세요", "저기로 가세요" 같은 단계별 지침은 기대하지 마세요. 이것은 포토샵 수업이 아니라 디자인 제작을 위한 마스터 클래스입니다. 제가 어떻게 작업하는지, 몇 가지 요령과 비밀을 알려드릴 것입니다. 사실 이 비밀들은 비밀이 아니지만, 가끔 잊힙니다. 시작해 볼까요 :)

이젤과 캔버스를 준비하자

우리의 경우 이젤은 Photoshop CS4가 될 것이며, 캔버스는 우리의 기본, 아직 비어있는 새 파일입니다. 포토샵 외에도 Gimp와 같은 다른 프로그램도 있습니다. 어떤 사람들은 Corel Draw에서 작업하곤 합니다. 어쨌든 인류는 아직 웹 디자인에 있어서 포토샵보다 나은 프로그램을 만들지 못했습니다. 웹 디자이너의 기본 도구입니다. Corel Draw나 Adobe Illustrator는 디자인의 개별 요소를 생성하는 데 사용할 수 있지만, "모든것이 모여" 레이아웃을 만드는 것은 포토샵이 가장 편리합니다.

"이젤"은 이제 알겠으니, 이제 캔버스에 대해 이야기해보겠습니다. 여기서 화면 해상도에 대해 언급할 필요가 있습니다. 5년 전에는 1024x768 해상도가 일반적이었고, 1280x960은 막 사람들의 가운데서 인지되기 시작했죠. 몇 년 전, 1680x1050과 1600x1200이 큰 해상도로 여겨졌습니다. 하지만 오늘날에 와서는 기본 Full HD 모니터가 일상이 되고 있어, 즉 최대 해상도로 1920x1080에 맞춰 조정해야 합니다. 그럼에도 불구하고 1024x768은 여전히 사라지지 않으므로, 우리의 하한선이 됩니다. 사실, 폭이 더 중요하고, 높이는 우리의 사이트가 길고 길어질 것이기 때문에 중요하지 않습니다, 이는 네트워크의 90%가 그러합니다.

예전에는 "늘어나는" 사이트 디자인이 유행했습니다. 즉, 디자인의 개별 요소들이 반복되는 요소로 구성되어, 사이트가 사용자의 해상도에 맞춰 확장되었습니다. 하지만 Full HD가 도입되면서 이러한 방식의 사용자 해상도 조정은 미적으로 보기 싫어졌습니다. 인체는 팔을 뻗은 거리에서 잘 인식 가능하도록 약 A4 용지와 비슷한 너비에서 정보를 처리하도록 되어 있기 때문입니다. 그 너비를 넘어서는 모든 것은 초점에서 벗어나는 것입니다. 따라서 콘텐츠 부분은 최근에 좁아지기를 선호하고, 남은 왼쪽과 오른쪽 공간은 배경 장식으로 채우게 됩니다. 그래서 양쪽에 여유 공간이 있고, 콘텐츠는 1000픽셀에 맞출 것이며 (브라우저 오른쪽에 스크롤 라인이 있어 1024중에서 24픽셀이 소모된다는 것을 잊지 마세요). 따라서 우리의 "여백" 영역은 (1920-1000)/2=460픽셀이 됩니다. 이 영역을 넘어설 일이 없도록 가이드라인을 사용합니다. 눈금자가 켜진 모드에서 커서를 이동하여 필요한 위치에 가이드라인을