디자인에서 웹 디자인으로 인쇄: 비교 유사성

반응형

나는 프리 프레스에서 오랫동안 일했었다. 웹에서 작업한 시간보다 더 길어요. 나는 매일 InDesign 문서를 들락거렸다. 나는 뛰어난 프로는 아니지만, 내 주변 사정은 잘 알고 있다. 최근에 새 책 Dearing Into WordPress(지금 구입하실 수 있습니다!)를 펴내는 작업을 마무리하고 있습니다. 그 동안 InDesign에서 작업하는 방법 중 일부는 CSS와 비슷하고 일부는 그렇지 않은 방법에 대해 생각했습니다. 어디 한번 봅시다.

인쇄 문서의 크기는 고정되어 있습니다. 웹 브라우저는 유동적입니다.

인쇄할 때 페이지의 너비와 높이를 선언하면 절대적으로 페이지 너비와 가장자리를 중심으로 설계할 수 있습니다. 웹 설계에서 셀 수 있는 유일한 가장자리는 위쪽 가장자리입니다. 왼쪽으로 정렬하면 왼쪽 가장자리도 셀 수 있습니다. 하지만 그게 다입니다. 블리딩(그래픽/컬러가 가장자리와 수평이 되도록) 가능성이 훨씬 더 높습니다.

인쇄물의 치수는 일반적으로 상당히 표준적이다. 웹 디자인의 치수는 일반적으로 높고 좁다.

인쇄에서, 궁극적으로, 시청자는 그들의 손에 있는 자료를 집어 들고 잡는다. 인쇄 디자이너는 이 점을 고려하여 최종 제품을 잘 다룰 수 있는지 확인합니다. 웹에서, 우리의 디자인은 스크롤할 수 있고, 사용자들은 그것을 하는 것을 두려워하지 않습니다. 이것은 완전한 웹 페이지의 크기가 종종 정말 커서 상대적으로 좁다는 것을 의미한다. 웹에서는 10,000px 높이의 이미지를 사용하지 않습니다. 성능, 가시 영역 및 변동하는 콘텐츠를 고려해야 하기 때문입니다.

 

인쇄 시 문단 스타일을 사용하는 것은 블록 레벨 CSS를 설정하는 것과 같습니다.

설계(및 기타 주 레이아웃 프로그램)에서 텍스트 블록을 선택하고 문단 유형을 적용할 수 있습니다. 예를 들어, 잡지 레이아웃에서 작업 중인 첫 번째 기사의 모든 일반 문단에 적용되는 "문서 #1 텍스트"라는 문단 유형을 작성합니다. 문단 유형에는 설정할 수 있는 옵션이 많이 있습니다. 글꼴 패밀리, 스타일 및 크기를 설정할 수 있습니다. 색상을 설정할 수 있습니다. 페이지에서 단락이 서로 상호 작용하는 방식을 제어하는 들여쓰기 및 간격을 설정할 수 있습니다.

이는 CSS를 사용하고 블록 수준 단락(

) 태그의 스타일을 설정하는 것과 매우 유사합니다. 문단 유형에서와 마찬가지로 CSS에서도 이와 같이 수행할 수 있습니다.

  p {
     font: italic 16px/1.5 Georgia, Serif;
     margin: 0 0 24px 0;
     text-indent: 24px;
     color: #222;
  }

두 경우 모두, 이것은 현명한 일입니다. 나중에 변경해야 하는 경우 한 곳에서 내용을 변경할 수 있으며, 변경 내용은 전체 웹 페이지(웹 디자인의 경우) 또는 전체 문서(인쇄 디자인의 경우)에 반영됩니다.

 

인쇄 시 문자 스타일을 사용하는 것은 인라인 레벨 CSS를 설정하는 것과 같습니다.

마찬가지로 InDesign에서는 문자를 선택하고 문자 스타일을 적용할 수 있습니다. 문자 스타일을 사용하면 글꼴 패밀리 및 색상 등을 선택할 수 있지만 간격은 변경할 수 없습니다. 이는 CSS에서 스팬, 강력 또는 em 요소와 같은 인라인 레벨 요소를 스타일링하는 것과 같습니다.

인쇄물에서는 최종 결과가 어떻게 나올지 확실히 알 수 있다. 웹에서, 여러분은 최선을 바랄 뿐입니다.

인쇄 설계에서는 프린터가 제공하는 문서에 대한 교정쇄를 통해 모든 것이 원하는 대로 완벽하게 보이면 승인합니다. 여러분이 정말 헌신적인 인쇄 디자이너라면, 여러분의 디자인이 인쇄될 때 여러분은 최종 제품이 완벽하다는 것을 확실히 할 수 있도록 프린터에 있을 것입니다.

웹 디자인에서 우리가 할 수 있는 최선의 방법은 크로스브라우저 검사이다. 하지만 매우 다양한 브라우저, 플랫폼, 다양한 크기의 보정된 모니터가 있습니다. 우리는 합리적인 만큼 확인하고 가장 인기 있는 조합들을 확인할 수 있지만, 그렇지 않으면 우리는 그 디자인이 모든 환경에서 받아들여질 것이라고 말하는 데 전문적인 판단과 경험을 사용할 필요가 있다.

 

WYSIWYG 도구는 인쇄에 이상적이고 웹 디자인에는 쓰레기가 이상적입니다.

인쇄 디자인의 도구는 웹 디자이너의 도구보다 훨씬 우수합니다. InDesign에서 상자를 클릭하고 끌면 상자가 그대로 유지됩니다. 두 칸 대신 세 칸의 텍스트가 필요합니까? 몇 번만 클릭하면 돼요. 펜 도구, 연필 도구, 크기 조정 도구 등이 있습니다. 이 모든 것들은 은유와 같은 역할을 합니다.

Adobe는 Dreamweaver와 같은 위지위그 웹 디자인 도구에도 이와 같은 은유법을 적용하려고 했지만, 실현되지 않았습니다. 캔버스에 상자를 그려서 이리저리 끌어다 놓으면 프로그램이 완벽한 HTML과 CSS로 바꿀 수 없습니다. 너무 많은 다른 요소들이 작용하고 있다. 결과는 여러분이 정확히 어떻게 그렸는지, 그리고 엄청나게 융통성 없는 코드로 가득 차 있거나, 아니면 여러분이 어떻게 그렸는지 전혀 알 수 없을 것입니다.

인쇄에서 웹으로 전환되는 경우 이전에 사용했던 것과 같은 도구를 사용하지 마십시오. 적어도 같은 방식으로는 아니야. 코드화할 준비를 하세요, 하지만 걱정하지 마세요. 그렇게 복잡하지는 않아요.

인쇄물에서 나온다면 여기 글꼴 상황이 마음에 들지 않을 거예요.

 

공정하게 말하면, 그것은 훨씬 더 나아지고 있다. 하지만 프린트 디자이너들은 정말 잘 만들었습니다. 세상의 모든 글꼴을 가지고 사용할 수 있습니다. 웹에서 우리는 나쁜 기술(예: 이미지 사용), 화려한 유료 기술(예: TypeKit) 또는 라이선스 문제(예: @font-font-face에 합법적으로 사용할 수 있는 적절한 서체는 거의 없음)에 의해서만 확장되는 매우 제한된 글꼴 세트를 다룬다.

웹에서 상황이 더 나아지더라도(헤이, 우리는 심지어 연결도 받고 있다!) 제어는 여전히 오랫동안 매우 나쁠 것이다. 인쇄 디자이너들은 켄팅의 달인이다. Kinging은 웹에서 하기에는 꽤 어렵다. 웹 상의 글자에 스트로크를 적용하시겠습니까? 행운을 빌어요.

인쇄는 300DPI 세계입니다. 웹은 72 PPI의 세계입니다.

PPI는 인치당 픽셀을 의미하고 DPI는 인치당 도트(인쇄 작업을 디지털로 할 경우 300 PPI에서 작업함)를 의미하며, 오늘날 디지털 인쇄에는 더 이상 300 DPI가 필요하지 않지만 여전히 유효한 포인트입니다. 참고로 많은 컴퓨터 화면은 72 PPI보다 높지만 포토샵에서는 72 PPI로 작업할 수 있습니다. 프린트 디자이너들은 항상 100% 포토샵으로 일할 수 있는 세상에 오는 것을 즐길지도 모른다. 포토샵에서 볼 수 있는 것은 브라우저에서 볼 수 있는 것입니다. 파일 크기가 더 작아서 포토샵의 반응성이 훨씬 더 좋다. 당신이 다운로드하는 클립 아트는 또한 훨씬 더 싸다!

둘 다 답답할 수 있다.

 

한 곳에서 일하거나 다른 곳에서 일하는 것에 익숙해지면, 다른 곳에서 좌절감을 느끼는 특정한 것들을 확실히 발견할 것이다. InDesign에서 문자 스타일의 배경색, 패딩 및 둥근 모서리를 설정할 수 없는 이유는 무엇입니까? 으르렁! 웹에서 전체 크기의 배경 이미지를 만드는 것이 왜 그렇게 어려운가. 으르렁!

기본 원칙은 같습니다.

선, 모양, 색상, 균형, 질감, 대비, 흐름, 여유, 게슈탈트… 궁극적으로 훌륭한 웹 디자이너를 만드는 것은 궁극적으로 훌륭한 인쇄 디자이너를 만드는 것과 같은 것입니다. 바로 기초입니다. 여러분은 무엇이 좋아 보이고 무엇이 나빠 보이는지만 알고 좋은 것에 도달하기 위한 시간과 인내심을 가지면 됩니다. 도구를 알면 도움이 되고, 확실히 빨라지지만, 훌륭한 디자이너가 되는 것의 극히 일부에 불과합니다.

저는 인쇄 디자이너들을 만날 때마다 그들이 웹에 어떻게 들어가기를 원하는지에 대해 이야기합니다. 신난다 둘 다 멋지지만 웹은 분명 미래의 매체이다. 만약 그들이 이미 훌륭한 인쇄 디자이너라면, 나는 그들이 웹에서 잘 할 것이라는 것을 이미 알고 있다. 만약 그들이 인쇄 디자이너가 대학에서 쉬운 전공이었기 때문에 그리고 직장을 잃는 것에 대해 불안해서 웹을 배우려고 한다면, 나는 걱정된다.