플러그인 픽셀 퍼펙트. WellDoneCode의 PerfectPixel 확장

기술 작업을 위한 플러그인 및 스크립트 개요 완벽한 픽셀.

먼저 픽셀 퍼펙트 기술이란 무엇입니까? 모든 것이 간단하고 이름으로 추측할 수 있습니다. 이것은 레이아웃된 HTML 템플릿이 원본 PSD 레이아웃과 정확히(픽셀 단위) 일치하는 레이아웃 기술입니다.

즉, 원본 PSD 레이아웃의 이미지에 렌더링된 HTML 템플릿의 "이미지"를 오버레이하는 경우 두 이미지가 일치해야 합니다. 그림의 모든 요소(텍스트, 이미지, 그래픽 요소)를 결합해야 합니다.

최신 레이아웃 요구 사항에 따르면 Pixel Perfect는 거의 사실상의 표준입니다. 따라서 많은 주문과 고객을 확보하려는 욕구와 욕구가 있다면 이 문제를 연구하는 것이 중요합니다.

이 글을 쓰는 시점에서 Pixel Perfect 기술의 구현은 브라우저에 적합한 플러그인을 사용하거나 특수 스크립트를 사용하여 수행됩니다. 두 개의 플러그인과 두 개의 스크립트가 아래에서 간략하게 검토되지만 모든 경우에 Pixel Perfect를 확인하는 단계는 동일합니다.

처음에는 Photoshop에서 원본 PSD 레이아웃이 형식의 이미지로 저장됩니다.

이것은 페이지의 레이아웃을 확인하기 위한 전체 간단한 Pixel Perfect 절차입니다. 페이지의 요소가 원본과 일치하지 않는 경우 스타일 파일의 값이 수정됩니다.

Firefox용 픽셀 퍼펙트

Firefox 브라우저의 경우 동일한 이름의 렌더링된 페이지를 확인하기 위한 Pixel Perfect 플러그인이 있습니다.

Pixel Perfect 플러그인을 설치하면 해당 아이콘이 Firefox 브라우저의 도구 모음에 나타납니다. Pixel Perfect 플러그인은 만 지원 최신 버전파이어폭스 브라우저(예를 들어 v.31 버전에서는 이 플러그인이 작동하지 않습니다.)

이제 Photoshop에서 원본 PSD 레이아웃을 열고 전체를 형식의 이미지로 저장해야 합니다.

중요한! PNG 이미지로 내보내기 전에 PSD 레이아웃이 원래 크기로 가져오기! 이렇게 하려면 핫키 조합이 Photoshop에 예약되어 있습니다. Windows\Linux에서는 Ctrl + 1, Mac OS X에서는 Cmd + 1입니다.

PSD 레이아웃의 PNG 사본이 준비되고 저장되면 Firefox 브라우저 창에서 이 레이아웃에 따라 만들어진 HTML 페이지를 엽니다.

브라우저 도구 모음에서 해당 아이콘을 클릭하여 Pixel Perfect 플러그인을 실행합니다. 플러그인 창이 즉시 나타나 미리 준비된 PNG 이미지(PSD 레이아웃의 사본)를 선택하라는 메시지가 표시됩니다.

"레이어 추가" 버튼을 클릭하고 준비된 PNG 이미지를 선택하고 결과를 얻습니다. 두 레이어의 오버레이(구성 및 원본):

HTML 페이지의 텍스트와 버튼이 PNG 원본과 어떻게 일치하지 않는지 확인합니다. 따라서 Firebug(이 플러그인은 Pixel Perfect 플러그인을 시작할 때 자동으로 활성화됨)에서 스타일이 있는 탭을 열고 편집/맞춤을 시작합니다.

Pixel Perfect 플러그인의 "반전" 모드에 주의하십시오. 이 모드를 사용하면 HTML 페이지의 요소를 매우 정확하게 조정할 수 있습니다.

위에서 설명한 프로세스는 Pixel Perfect 플러그인 및 Pixel Perfect 레이아웃을 사용한 작업입니다. 모든 것이 매우 간단합니다.

아래는 Pixel Perfect 플러그인으로 작업하는 과정을 보여주는 비디오 클립입니다(동영상은 내 것이 아니므로 모든 면에서 품질에 대해 책임지지 않습니다). 명확성을 위해 작업이 진행됩니다.

Firefox 브라우저용 Pixel Perfect 플러그인 검토가 끝났습니다.

Chrome의 PerfectPixel

테스트 중인 페이지에 연결하려면 기본 문자열 세트를 작성해야 합니다.

스크립트에서 매개변수를 지정하여 기본 세트를 보완할 수 있습니다( 공식 사이트에서 가져온):

pixLayout 스크립트 사용을 위한 빠른 참조

pixLayout 스크립트 사용에 대한 빠른 참조는 아래 두 단락에 나와 있습니다( 공식 사이트에서도 가져옴):

움직이는

• 버튼: '왼쪽', '오른쪽', '위로', '아래로'
• 버튼: 사진이 보일 때 W , A , S , D
• 내비게이션 바 버튼

운영

• 파괴하다 (삭제 모든 HTML그리고 CSS 코드페이지의 pixLayout) - 패널의 오른쪽 상단 모서리에 있는 십자가;
• 핀 패널- 패널의 오른쪽 상단 모서리에 있는 아이콘
• 간략한 정보- 패널 오른쪽 상단의 물음표
• 접기 옵션- 패널 하단의 "위쪽" 화살표;
• 이미지 표시/숨기기- 탐색 모음 가운데 버튼 또는 Shift + E .

아래는 pixLayout 스크립트의 작동 방식을 보여주는 공식 동영상입니다.

결론

이 짧은 리뷰에서 우리는 완벽한 픽셀 레이아웃을 위한 네 가지 도구에 대해 알게 되었습니다. 그 중 두 가지는 무료 플러그인브라우저에서. 다른 두 개는 HTML 페이지에 연결하는 JavaScript 스크립트입니다.

귀하의 작업을 위해 무엇을 선택할지 - 모두가 결정합니다.

브라우저 플러그인에 찬성하여 무료이며 설치가 쉽고 사용하기 쉽다고 말할 수 있습니다.

X-Precise 스크립트의 단점은 유료($5)이며, 확인 중인 HTML 페이지에 대한 연결이 필요하고 jQuery 라이브러리에 의존한다고 말할 수 있습니다. pixLayout의 단점으로는 작업을 위해 HTML 페이지에 대한 연결과 관련하여 추가적인 "소란"이 필요하다고 말할 수 있습니다.

그러나 두 스크립트 모두 브라우저(Firefox, Chrome, Opera, Safari) 또는 특정 브라우저 버전과 완전히 독립적인 크로스 브라우저 솔루션이라는 명백한 사실에서 이점을 얻을 수 있습니다. 스크립트는 모든 경우에 동일하게 작동합니다.

멀리서 시작하겠습니다. 최근에 저는 HTML Academy에 멘토로 합류했습니다. 멘토링은 지식을 정리하는 데 도움이 될 뿐만 아니라 그 과정에서 흥미로운 작업이 나타나기 때문에 솔루션을 편리하게 자동화할 수 있기 때문에 다양한 유용한 것들의 개발을 놀라운 방식으로 자극합니다.

학생들은 총 9개의 레이아웃에 대해 각각 모바일, 태블릿 및 데스크탑의 세 가지 상태에 대한 레이아웃이 포함된 3페이지의 교육용 디자인을 받습니다. 적응형 페이지를 배치하는 과정에서 주기적으로 창 크기를 조정하고 데스크톱 버전에 스타일을 추가할 때(예: 모바일 스타일이 중단되지 않았는지) 확인하는 것이 좋습니다. 레이아웃이 일치하는지 확인하는 가장 좋은 방법은 무엇입니까?

대규모 프로젝트에 사용되는 스크린샷은 이러한 작업에 너무 무거워 초보자도 사용할 수 있도록 매우 간단한 것이 필요합니다.

우선, 물론 Pixel Perfect 플러그인(적어도 Chrome 및 Firefox에서는 사용 가능)을 기억했지만 여러 가지 이유로 적합하지 않습니다. 예를 들어 다운로드한 레이아웃은 페이지를 전환하거나 브라우저 창을 변경할 때 변경할 수 없으며 매번 수동으로 전환하면 꽤 빨리 지루해집니다. 또한 우리를 위해 레이아웃을 완벽하게 전환할 수 있는 미디어 표현이 있습니다.

내 첫 번째 솔루션은 다음과 같습니다.

이 코드는 모든 페이지. 필요한 미디어 표현을 설정하고 이미지에 대한 링크는 특정 페이지마다 실제 레이아웃으로 변경됩니다.

페이지를 전환하거나 창 크기를 조정할 때 레이아웃이 변경되므로 이미 사용할 수 있으며 매우 편리합니다. 레이아웃은 마크업 바로 아래에 있으므로 항상 이동할 필요가 없습니다. 그래픽 편집기, 이렇게 단순한 디자인이라도 시간을 크게 절약할 수 있습니다.

그러나 스타일을 작성하면 배경과 그림이 페이지에 나타나고 맨 아래 레이어의 레이아웃이 보이지 않게 됩니다. 어떻게 될 것인가?

내 다음 솔루션은 각 페이지에 레이아웃이 있는 반투명 레이어를 생성하는 Chrome 확장 프로그램이었습니다. 창의 크기를 조정하면 이전 사례와 마찬가지로 미디어 표현을 사용하여 레이아웃이 변경됩니다. 보너스로 목업 레이어에 대한 투명도 컨트롤과 차이점을 더 쉽게 찾을 수 있도록 차이점 혼합 모드를 켜는 기능을 추가했습니다.

놀라운 사실이 밝혀졌습니다. 하지만 Chrome에서만 작동하고, 레이아웃 전환을 위한 핵심 포인트와 이미지 경로는 확장 프로그램 자체의 구성에서 설정해야 하고, 레이아웃 이미지는 확장 프로그램 내부에 있어야 하며, 기타 모든 종류의 제한 사항이 있었습니다. 일반적으로 보편적이지는 않지만 각각의 새 프로젝트에는 다음이 필요합니다. 수동 설정초보자에게는 전혀 적합하지 않습니다.

저는 누구나 설정 및 설치를 처리할 수 있고 동시에 자신이 하고 있는 일을 대략적으로 이해할 수 있는 매우 간단한 솔루션을 찾고 싶었습니다.

마크업을 레이아웃과 비교하려면 마크업 레이어와 레이아웃 레이어라는 두 개의 레이어가 필요합니다. 한편으로는 레이아웃이 있는 레이어를 페이지 마크업에 수동으로 삽입할 수 있지만, 다른 한편으로는 더 이상 필요하지 않을 때 잊어버릴 위험이 크므로 다음 옵션은 기존 페이지 요소를 다음과 같이 사용하는 것이었습니다. 레이어.

레이아웃이 배경으로 설정된 경우 , 투명도를 변경할 때 레이아웃도 반투명하게 되므로 레이아웃이 있는 레이어로 요소를 사용하는 것이 좋습니다. :

이전 사례와 마찬가지로 레이아웃은 마크업 아래에 있지만 이제 배경이 설정되면 보이지 않습니다. 불투명도를 추가하여 마크업 레이어를 반투명하게 만들어 봅시다. :

이것은 이미 어떻게든 사용할 수 있지만 이 솔루션에는 편리한 투명도 컨트롤이 없었기 때문에 페이지에 다음 패널을 추가하는 작은 스크립트를 작성했습니다.

투명도를 제어할 수 있습니다. (이 경우 레이아웃 대신 줄무늬 배경만 있음) 페이지 주위로 드래그할 수 있으며 필요하지 않은 경우 끌 수 있습니다.

사용할 수 있는 브라우저의 수를 제한하지 않기 위해 브라우저 확장을 만들지 않기로 결정했습니다.

결국 설치는 다음과 같습니다.

1. npm을 통해 패키지를 프로젝트 폴더에 설치합니다. npm i pixel-glass --save-dev
2. 프로젝트의 레이아웃 사진을 img 폴더(또는 프로젝트 내부의 사진이 있는 다른 폴더)에 넣습니다.
3. 붙여넣기 다음과 같은 페이지 코드: 프로젝트에 맞게 편집하세요. 미디어 표현을 설정하고 이미지 주소를 작동하는 주소로 변경하세요.
4. 페이지를 새로고침하고 즐기세요.

제 생각에는 다소 편리한 도구로 판명되었지만 확실히 개선할 수 있는 부분이 있습니다. 이것에 대한 아이디어가 있으면 댓글에 저에게 적어주세요. 또한 이러한 문제를 해결하는 방법과 이를 위해 어떤 도구를 사용하는지에 대해서도 관심을 가질 것입니다.

업데이트:모든 기여자 덕분에 라이브러리가 npm으로 이전되었습니다.

좋은 오후 친구들. 다른 날 Dima Shuleshov가 저에게 연락하여 흥미로운 기사에 대한 주제를 제안했습니다 (Dima, 안녕하세요!). 글쎄요, 저에게는 흥미롭고 관련성이 있습니다. 여러분도 누군가에게 도움이 되길 바랍니다. 다음은 랜딩 페이지를 레이아웃과 정확히 일치시키는 데 도움이 되는 몇 줄의 코드입니다.

또한 거리를 측정하고 Photoshop, 브라우저 창 및 텍스트 편집기 사이를 전환하는 시간을 크게 줄일 수 있습니다.

완성된 결과는 프로젝트에 버튼이 있고 왼쪽 상단 모서리(아무데나)에 고정되어 있고 버튼을 클릭하면 특정 투명도가 있는 레이아웃(그림)이 레이아웃에 겹쳐지고 들여 쓰기가 얼마나 정확한지 평가할 수 있습니다. 치수, 위치 지정이 디자인에 해당합니다. 이해하려면 시도해야합니다. 소스를 다운로드하고 작동 방식을 확인하거나 다음 짧은 비디오를 재생하는 것이 좋습니다.

따라서 모든 픽셀을 확인하는 세심한 고객과 문제가 있었다면 이제 더 이상 이러한 문제가 발생하지 않아야 합니다. 마지막으로 이 효과를 구현해 보겠습니다.

우선, 종종 그렇듯이 jQuery 라이브러리를 포함합니다.

대부분의 프로젝트에 이미 포함되어 있으므로 다시 수행하지 않도록 합니다. 이로 인해 충돌이 발생할 수 있으며 정확히 발생하는 이유를 파악하는 데 오랜 시간이 걸립니다.

이제 프로젝트 내부에 몇 가지 태그를 작성해 보겠습니다. 나를 위해 그것은 다음과 같습니다

여기서 첫 번째 div는 버튼을 담당하는 블록이고 두 번째는 레이아웃의 오버레이입니다. 올바르게 오버레이하려면 몇 가지 간단한 설정을 지정해야 합니다.

P ( background: url(../images/maket.jpg) no-repeat; /* 레이아웃 */ width: 1255px;/* 레이아웃 폭 */ height: 750px;/* 레이아웃 높이*/ left: calc(50 % - 627.5px);/* 두 번째 값은 레이아웃 너비의 절반입니다.*/ position: absolute; top: 0; opacity: 0.4 !important; transition: .3s; z-index: 97; )

다음은 설명과 함께 제공되며 자신의 매개변수로 바꿔야 하는 4개의 매개변수입니다. 모든 것이 간단합니다!

이제 버튼의 스타일을 지정해 보겠습니다. 당신이 중요하다면 모습, 그런 다음 편집하므로 그대로 둘 수 있습니다.

#p ( 위치: 고정; 왼쪽: 0; 상단: 0; 너비: 200px; 높이: 75px; 배경: #c36c2c; z-index: 99; 커서: 포인터; 텍스트 정렬: 중앙; 글꼴 크기: 25px; line-height: 0px; color: #c36c2c; left: -150px; vertical-align: middle; font-weight: 700; transition: .3s ) #p:hover ( left: 0; line-height: 80px; background: #88d3c2; )

글쎄, 버튼 클릭에 대한 반응을 추가하는 것이 남아 있습니다. 클래스를 추가/제거하고 배경의 레이아웃으로 블록의 투명도를 변경하기만 하면 됩니다.

$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));

다음을 위한 PerfectPixel 확장 구글 크롬레이아웃 디자이너와 웹 개발자가 고객이 승인한 디자인과 가장 잘 일치하는 사이트 마크업을 만들 수 있도록 도와줍니다.

Chrome에서 개발 중인 페이지를 열고 PerfectPixel을 실행하고 새 레이어(작업 이미지)를 추가하면 이제 결과에 이미지를 실시간으로 중첩하고 결함을 비교하고 수정할 수 있습니다. 다음 비디오를 보면 확장 작업에 대해 알 수 있습니다.

페이지당 많은 레이어가 지원되며 레이어 세트는 도메인마다 다릅니다. 브라우저를 닫고 컴퓨터를 끄면 추가된 레이어와 속성이 저장됩니다.

개발자의 편의를 위해 잠금/잠금 기능이 있습니다. 활성화되면 활성 레이어 아래에 있는 페이지 요소와 상호 작용할 수 있습니다. 또한 레이어의 투명도를 변경하고, 명시적인 좌표를 지정하고, 배율을 변경할 수 있습니다(Retina 이미지 테스트에 유용함).

도구를 최대한 효율적으로 사용하려는 사용자를 위해 핫키 및 마우스 모드가 지원되며, 전체 목록프로젝트의 공식 웹 사이트에서 사용할 수 있습니다: www.welldonecode.com/perfectpixel/shortcuts.

컨트롤 패널은 제목을 더블 클릭하여 화면 오른쪽 가장자리로 최소화할 수 있습니다. 미니 모드는 작은 화면 크기에서 반응형 디자인을 테스트할 때 유용합니다.

확장 프로그램은 정기적으로 업데이트되고 새로운 기능, 단축키가 추가되고 버그가 수정됩니다. 우리는 의견과 제안을 환영합니다. 이메일을 보내주십시오: [이메일 보호]. 가까운 장래에 Firefox, Safari, IE와 같은 다른 브라우저용 버전을 출시하고 클라우드를 통해 레이어 및 설정 동기화를 구현할 계획입니다. 공식 웹사이트 www.welldonecode.com/perfextpixel에서 새로운 기능의 출시 날짜를 알아보려면 뉴스레터를 구독하십시오.

여기 댓글이나 메일로 귀하의 질문에 기꺼이 답변해 드리겠습니다.

Chrome.RF 커뮤니티를 만나서 반갑습니다!

컴퓨터를 마스터하고 다양한 소프트웨어를 사용하기 시작했으며 이미지 뷰어가 필요한 경우 Pixel Perfect를 다운로드하십시오. 이 뷰어는 개발자가 러시아어를 사용하는 사용자를 위해 제품의 현지화를 처리하고 싶지 않았음에도 불구하고(그리고 일반적으로 12년 전에 아이디어를 포기했음에도 불구하고) 경험이 없는 사용자도 쉽게 마스터할 수 있도록 구현되었습니다. .

인터페이스 정보

앞서 언급했듯이 Pixel Perfect에는 기능이 다소 빈약합니다. 사진과 그림을 보여줄 수 있을 뿐만 아니라 편집, 인쇄, 심지어 웹에 게시할 수도 있는 멀티태스킹 뷰어에 익숙한 사용자에게는 매우 제한적으로 보일 수 있습니다. 따라서 많은 기능이 필요한 경우 -와 같은 아날로그를 찾아 이 소프트웨어를 우회하는 것이 좋습니다.

Pixel Perfect를 사용하면 JPEG, PNG, GIF 및 BMP 이미지를 열고 볼 수 있습니다. 동시에 프로그램은 한 이미지에서 다른 이미지로의 전환을 지원하지 않으며 "페이지" 버튼이 없기 때문에 각 이미지를 별도로 열어야 합니다. 파일을 여는 동안 화면 하단의 뷰어는 전체 파일을 보여줍니다. 기술적 인 정보매우 편리한 개체에 대해. 보는 동안 사용자는 이미지를 중앙에 놓고 늘릴 수 있습니다.

일의 특징

Pixel Perfect는 휴대용 형식으로 배포되어 사용자 경험을 더욱 단순화합니다. 설치에 대해 걱정할 필요가 없습니다. 다운로드한 아카이브를 추출하고 실행 파일을 실행하기만 하면 됩니다. 뷰어는 PC 하드웨어에 대한 사소한 요구 사항을 식별하고 윈도우 버전, 설치되지 않았습니다.

결과

• Russified 인터페이스 부족;
• 휴대용 형식으로 배포;
• 프로그램의 툴킷은 하나의 기능인 디스플레이의 성능을 기반으로 합니다. 그래픽 파일;
• 이미지를 보는 동안 기술 데이터 시연;
• 소프트웨어더 이상 개발자가 지원하지 않습니다.