Photoshop을 사용하는 웹 디자이너는 개발자에게 어떤 자료를 보내야합니까?

나는 주로 웹 및 데스크톱 응용 프로그램을 구현해 왔으며 이것이 공개적으로 사용되는 웹 사이트에서 그래픽 디자이너와 실제로 작업을 시작한 것은 이번이 처음입니다. 이 경우 그래픽 디자이너는 HTML + CSS를 수행하지 않고 Photoshop을 사용합니다.

실제로 설계를 구현하기 위해 어떤 종류의 재료가 최종 결과로 제공됩니까?

예를 들어, 단순한 PSD 파일 이상의 것을 얻을 수 있습니까? 다른 상태 (링크 호버, 활성 상태 등) 또는 반응 형 디자인은 어떻습니까? 너무 자세한 기술 정보가 필요합니까?

도움을 주셔서 감사합니다.

모형은 일반적으로 가서 무엇을 알 수있는 개발자 넘겨된다. 워크 플로우에 따라 PSD 파일에서 플랫 이미지까지 다양 할 수 있습니다. 내 경험상 모든 크기, 글꼴 크기 및 사용 된 색상과 전체 슬라이스 및 사용 된 이미지가 포함 된 평면 모형을 넘겨줍니다. 기본적으로 프로젝트를 완료하는 데 필요한 전자 작업. 그러나 그것은 실제로 워크 플로우에 달려 있습니다. 사이트가 주로 CSS로 수행되는 경우 다른 정보 (그라데이션 값, 그림자 값, 이미지 자르기 사전 설정)가 필요합니다.

버튼 상태 는 항상 다루어야합니다. 제작 방법 (순전히 CSS 또는 슬라이스)에 따라 모든 색상, 반경 및 크기 또는 슬라이스 자체를 제공해야합니다.

반응 형 디자인 은 약간 다릅니다. 뷰 디자인은 시작에 불과합니다. 개발자가 알아야 할 것은 사이트가 점차 "축소"될 때 요소가 어떻게 동작해야 하는가입니다. 더 적은 옵션이 표시되면 메뉴는 어떻게 작동합니까? 전체 웹보기에서 목록 요소 만 있으면 모바일보기에서 화면을 크게 변경할 수 있습니다. 모든 호버 요소는 어떻게됩니까 (모바일보기에서 사용할 수 없음)?

@ KMSTR의 대답은 80 % 솔루션이지만 디자이너가 실제 전문가라면 전환 애니메이션이 발생하는 시점 또는 DOM 요소가로드되는 순서와 같은 작은 세부 사항에 대해 구체적으로 설명합니다.

디자이너가 상위 20 %에 도달 한 경우 일부 UX 사용자 흐름 및 와이어 프레임 또는 특히 재능이있는 경우 After Effects 또는 Flash에서 제작 한 프로토 타입을 요청하십시오. 이상적으로는 특성을 지정하지 않은 상태로 둡니다.

그것은 모두 그래픽 디자이너와 합의한 내용에 달려 있습니다.

일부 그래픽 디자이너는 PhotoShop 외에는 아무것도 모르며 큰 PSD 파일 이외의 것을 요청하면 손실됩니다.

일부 그래픽 디자이너는 HTML, CSS 및 JS에 정통하며 모든 것을 구현할 수 있습니다.

그리고 그 사이에 모든 것이 있습니다.

나는 매체가 매체보다 훨씬 앞선 사고, 반응, 브라우저에 구애받지 않고 유연한 디자인을 생산할 것이라는 점을 이해하는 웹 디자이너로서 후자에 기대는 것이 좋지만 전자는 너무 오래 작동 할 수 있습니다. UI 개발자는 UI 디자이너와 긴밀히 협력하고 있습니다.

먼저 예상되는 것을 명시해야합니다.

psd 파일, html / css 페이지 또는 완전히 동적 jquery / php / mysql 페이지를 제공 할 수 있습니다. 제공되는 내용은 요청 된 내용에 따라 다릅니다.

개발자가 psd 만 원한다면 그것이 제공하는 전부이며 페이지를 만드는 것이 그들의 일입니다. 원치 않는 페이지를 만드는 데 어려움을 겪지 않을 것입니다.

기존 웹 사이트로 떨어질 수있는 모든 기능을 갖춘 페이지에 의존하는 클라이언트가 있습니다.

개발자에게 보낸 코드 사용을 거부하고 모든 것을 코딩해야하는 개발자가있는 고객이 있으므로 psd 파일을 제공합니다.

귀하의 질문에 대한 확실한 답변이 없습니다. 작업이 시작되기 전에 합의 된 사항이 중요합니다.

HTML, CSS 및 Javascript에 정통한 디자이너가 필요합니다. 내가 일하는 곳에서는 하나의 포토샵 파일을 볼 수 없습니다. 디자이너는 페이지에 대한 URL을 제공하고 모든 UI를 복사 한 다음 공백을 채워 페이지를 동적으로 만듭니다.

이것이 바람직한 몇 가지 이유가 있습니다.

1) 디자이너가 원하는 것에 대해 의문의 여지가 없습니다. 해석하는 숫자 나 메모가 없으며, 완성하기 전에 완성품이 어떻게 보이는지 알 수 있습니다. 모든 CSS 값, 모든 자바 스크립트 함수 또는 애니메이션이 있습니다.

2) 페이지 작업에 소요되는 시간을 줄입니다. 예, 여전히 다시 배선하고 백엔드에서 산을 만들어야하지만 전면에서 상당한 시간을 절약 할 수 있습니다.

물론, 당신은 항상 당신이 일하는 디자이너의 종류를 통제하지는 않습니다. 그러나 포토샵 만 사용하는 사람이라면 모든 버튼 상태를 실제로 확인하고 디자이너가 원하는 애니메이션을 알아야합니다. 그러한 환경에서 일한다면, 디자이너와 대화하고 필요할 때 설명을 부탁 할 수 있기를 바랍니다.