CSS3의 발명으로 웹 디자이너는 Photoshop을 사용해야합니까?

많은 디자이너가 Photoshop에서 아름다운 웹 디자인 작품을 만들지 만 CSS3가 등장하면서 HTML 및 CSS로 변경하려고 할 때 처음부터 시작하여 CSS3을 사용하여 최종 디자인의 약 80 %를 생성합니다.

예를 들어 테두리 반경, 불투명도, 배경 그라데이션, 상자 그림자 및 텍스트 그림자 및 기타 CSS3 규칙을 사용하여 Photoshop에서 만든 것을 얻습니다. 브러시 작업이나 로고 또는 그와 비슷한 Photoshop에서 이미지 만 가져 오는 경우가 많습니다.

제 질문은 웹 디자이너가 여전히 Photoshop을 사용하여 무언가를 만드는 데 20 % 만 유용할까요?

웹 디자이너가 Photoshop에서 디자인을 만드는 중간 레이어를 추가하지 않고 HTML 및 CSS로 직접 전체 디자인을 만든 다음 나머지 요소를 만들 수 있습니까?

모두 동의하지 않습니다. Photoshop은 웹 사이트를 디자인하는 도구가 아닙니다. 웹 사이트를 스케치하기위한 도구입니다. 웹 사이트는 CSS, HTML 및 JS 인 경향이있는 매체로 디자인되어야합니다.

그렇다고 Photoshop을 사용하지 않는 것은 아닙니다. 그러나 반드시 그럴 필요는 없습니다.

저는 웹 사이트 디자인을 포토샵에서 고객에게 보여 주지 않는 것을 좋아합니다 . 사이트가 살만한 매체는 아닙니다. Photoshop comps는 상호 작용, 장치 차이점, 브라우저 특유성, 클릭 가능성, 응답 성 등을 전달할 수있는 기능을 제공하지 않습니다.

사실, 실제로 JPG 모형을 보여줄 시간이 많이 있습니다. 좋아. 이를 위해 Photoshop을 사용하십시오. 그러나 그 PSD 파일을 가져 와서 웹 사이트로 잘라 내지 마십시오. 그것은 1999 년에 의미가 있습니다. 대신, PSD를 가져 와서 지침으로 사용하십시오. 이것은 '거의 사이트처럼 보이지만 CSS / HTML / JS로 빌드되고 필요에 따라 수용된다는 사실을 고려합니다.

따라서 질문에 대답하려면 다음을 수행하십시오.

웹 디자이너가 Photoshop에서 디자인을 만드는 중간 레이어를 추가하지 않고 HTML 및 CSS로 직접 전체 디자인을 만든 다음 나머지 요소를 만들 수 있습니까?

예. 분명히 그렇게 할 수 있습니다. PSD 디자이너와 병행하여 수행되는 것을 보았습니다. PSD 방식의 가장 큰 문제는 민첩한 팀에서 일할 때입니다. 문서화에 사용되는 무거운 파일 (예 : PhotoShop)은 애자일 프로세스에 다소 부담이되어 해결하는 것보다 더 많은 문제를 추가하게됩니다. 우리는 반대로 작업하는 경향이 있습니다 ... 필요에 따라 PS로 스케치 한 다음 HTML / CSS / JS로 디자인하고 빌드합니다. 그런 다음 회의를 위해 시각적으로 빠르게 업데이트해야하는 경우 작업중인 프리젠 테이션 레이어 마크 업을 스크린 샷으로 찍어 PhotoShop에서 찍어 빠르게 조정합니다.

** 편집하다 **

새로운 고객?

물론-새로운 고객 / 사이트를위한 디자인을하고 있다면. 평신도는 일반적으로 내 머리 속에 무엇이 있는지 보는 데 어려움을 겪습니다. 와이어 프레임, 도면 등이 항상 절단하지는 않습니다. 스크래치도 절단하지 않습니다. 로고, 사진, 회사 글꼴 및 UI가있는 모형을 제공 할 때보 다 WF 또는 스케치가있을 때 클라이언트로부터 "X를 할 것이라고 생각했습니다."

다른 시나리오 :

어쩌면 아닐 수도 있습니다-직무 요구 사항과 일치하는 기존 HTML / CSS / JS를 사용할 수 있거나 기존 클라이언트의 내용을 편집하는 경우 코드만으로 작업하는 것이 좋습니다. 그렇지 않은 경우 Photoshop에서 거의 반환하지 않는 데 많은 시간이 소요될 수 있습니다. 스크린 샷과 Tweak-via-Photoshop이 실제로 승인 프로세스의 속도를 높이거나 아이디어를 세게 세울 수있는 사례 (예 : @ DAO1 언급)가 있습니다.

** 끝 **

나는 찬성 -

디자인이 단순하더라도 시각적으로 디자인을 판매하는 것이 훨씬 쉽고 (컴포지션을 만드는 것이 훨씬 빠름) 그것이 PS가 나의 직업에 가장 도움이되는 곳입니다.

또한 그리드 시스템에 레이어를 통합하여 항목 배치 방법을 확인하고 필요한 위치로 빠르게 드래그 할 수 있습니다. 다시 말하지만 이는 comp 및 클라이언트 요청 변경에 도움이됩니다.

일반적으로 사용되는 요소 (벡터 기반 둥근 모서리 입력 상자, 격자, "로고 이동"상자)의 Photoshop 라이브러리를 단일 파일의 레이어 또는 여러 파일 (선택)로 유지하는 경우- 홈 페이지와 내부 페이지를 코딩하는 데 걸리는 시간보다 훨씬 짧은 시간에 빌드 할 수 있습니다.

일반적인 CSS 파일 (일반적인 설정)을 유지하면 코딩 할 때 도움이되지만 CSS가 얼마나 강력한 지에 관계없이 작업 흐름에서 PS를 제거하는 가치는 보이지 않습니다.

사용자 중 100 %가 브라우저를 보유하고 있다는 것을 보증 할 수 있습니까? 아니? 그럼 몇 퍼센트? 90 %? 80 %?

남은 10 % (20 % ~ 40 %?)로 표시되는 대체 버전을 사용할 수 있도록 성능이 저하되지 않도록 할 수 있습니까?

이러한 문제 중 하나 또는 둘 다에 문제가있는 경우 일부 Photoshop이 필요합니다.

고려해야 할 사항 :

• 멋진 디자인을 웹에 올리는 데는 많은 것이 필요합니다. 적어도 더 복잡한 것에는. Photoshop은 최종 결과를 더 빨리 볼 수 있도록 도와줍니다.

• 그의 일을하는 디자이너에게는 하루 종일 html과 CSS3를 해킹하지 않기 때문에 Photoshop에서 모형을 만드는 것이 일반적으로 더 빠르고 정당화됩니다.

• 언급했듯이 CSS3에서 80 %를 할 수 있지만 결국에는 Photoshop의 일부가 필요합니다.

• 나는 당신이 디자이너이자 개발자라면 시간을 절약 할 수 있다면 Photoshop에서 목업을하는 것을 포기하고 그렇지 않다면 항상 Photoshop에서 목업을 할 것입니다.