2017 년 디자이너를위한 7 가지 초 사용량 크롬 확장

웹 디자인 효율성을 향상시키기위한

코어 포인트 :

크롬 확장은 설계 프로세스를 단순화하고 브라우저를 떠나지 않고 웹 요소를 확인 및 편집하고 링크 확인 및 복잡한 CSS 코드를 생성하는 도구를 제공합니다. Page Ruler, WhatFont, CSS3 Generator, 내 링크 확인, Gravit Designer, Colorzilla 및 StyleBot과 같은 확장은 특히 컬러 샘플링, 글꼴 인식 및 실시간 웹 사이트 사용자 정의와 같은 기능을 제공하는 디자이너에게 유용합니다. 이러한 확장을 사용하면 시간을 절약하고 다른 소프트웨어의 필요성을 줄일 수있어 디자이너와 개발자에게 귀중한 리소스가 될 수 있습니다.

각 디자이너는 자신의 고유 한 작업 방식을 가지고 있습니다. 브라우저 사용 (코드 사용)에서 직접 설계하든 브라우저 만 사용하여 웹 디자인을 실시간으로 테스트하든 워크 플로를 크게 단순화 할 수있는 크롬 확장이 많이 있습니다. 내가 가장 싫어하는 것은 무엇입니까? 비교적 작은 작업을 완료하기 위해 거대한 데스크탑 앱을 열어야했기 때문에 일반적인 설계 문제를 빠르게 해결할 수있는 크롬 확장을 찾고있었습니다.
• 여기에는 7 가지 필수 크롬 확장과 Firefox 용 6 개의 디자이너 확장자가 있습니다 (웹 개발자 인 경우 모든 브라우저에서 교차 테스트해야 할 수도 있습니다!).
페이지 통치자

Page Ruler는 브라우저에서 모든 요소의 위치 및/또는 크기를 찾는 데 유용한 크롬 확장자입니다. 크롬 코드 검사관을 사용하는 것보다 빠르거나 CSS 파일을 가로 지르는 것보다 빠릅니다. 먼저 십자선을 사용하여 대상 요소 주위에 선택 상자를 그립니다. 브라우저 상단의 막대는 요소의 길이와 너비뿐만 아니라 화면의 각 측면으로부터의 거리를 보여줍니다 (고정/절대 포지셔닝이 적용된 것 같습니다).

팁 : 화살표 키를 사용하여 최대의 정확도를 위해 선택을 미세 조정하십시오.

1. whatfont

종종 글꼴 크기, 실제 글꼴 이름 및 특정 텍스트 블록에 사용되는 색상을보기 위해 웹 페이지의 글꼴을 확인해야하므로 WhatFont Chrome 확장은 나에게 매우 유용합니다.

텍스트 섹션을 클릭하여 16 진수/RGBA 값, 두께, 선 높이, 글꼴 스타일 및 글꼴 시리즈를 찾으십시오.

때때로 브라우저 하단에 크롬 확인 창을 추가하면 작업 할 때 간섭이 발생할 수 있으므로 전체 확인 창을 열지 않고이 모든 정보를 얻을 수 있습니다.

3. CSS3 생성기

   CSS3 Generator는 CSS 코드 스 니펫을 기억하기 어려운 복잡하거나 어려운 일부를 생성하는 데 도움이되는 크롬 애플리케이션입니다. 필요하지 않은 간단한 것들의 경우, 직면하자면, 일부 CSS 값은 처음부터 작성하기가 어렵습니다 (예 : 크로스 브라우저 호환 기울기 또는 CSS 변환이 필요한 CSS 변환). 몇 번의 클릭만으로 매우 유용한 CSS를 생성하고 Extension Preview에서 미리보기 한 다음 CSS를 복사하여 실제 CSS 파일에 붙여 넣을 수 있습니다.

   다음은 지원되는 컨텐츠 목록입니다
여러 텍스트 그림자

16 진수/rgba 코드

CSS 변환 경계 반경

다중 상자 그림자

css 열 화살표 (툴팁의 경우) 경사 (선형, 방사형… 심지어 줄무늬)

내 링크를 확인하십시오
URL 타이핑 오류 (또는 모두 포함하는 것을 잊어 버리지 만 또 다른 것)가 매우 쉽기 때문에 고객이 기존 웹 사이트의 도움이 필요하거나 처음부터 웹 사이트를 작성하는지 여부에 관계없이 내 링크를 확인하십시오. 웹 디자이너에게 필수.
• 내 링크가 웹 페이지를 스캔하고 깨진 링크를 찾습니다. 간단합니다. 그것은 수동으로 확인하는 번거 로움에서 당신을 구해줍니다. UI는 매우 직관적입니다. 내 링크가 유효하지 않은 링크를 나열하지는 않지만 실제 웹 페이지의 손상 링크를 빨간색으로 바꾸는 반면 유효한 링크는 녹색으로 표시되므로 고정해야 할 사항을 볼 수 있습니다. 단순한!
중력 디자이너
• 그래픽을 디자인해야하지만 그래픽을 설계하고 싶지 않은 경우 리소스 집약적 인 디자인 앱을 열고 싶지 않은 경우 (또는 하나를 구매하지 않으려면) Chrome 용 무료 Gravit Designer Extension을 다운로드하십시오.
놀랍게도 매우 빠릅니다. 블로그 그래픽, 소셜 미디어 그래픽 및 일반적으로 사용되는 인쇄 크기에 대한 사전 설정을 포함한 일반적인 아트 보드 크기로 디자인을 시작하는 것은 매우 쉽습니다. Gravit은 벡터 설계 응용 프로그램으로 확장 가능한 해상도 독립적 인 설계를 쉽게 설계 할 수 있습니다.

나는 많은 옵션과 기능에 놀랐습니다. 시각적 UI는 친화력 디자이너처럼 느껴지지만 스케치와 같은 고급 설계 응용 프로그램을 사용하는 것과 크게 다르지 않습니다.

모양, 정렬, 플립, 회전, 흐림, 예측, 복합 모양 생성 등과 같은 명백한 요소가 있습니다. 또한 PNG, JPG, SVG 및 PDF로 내보낼 수 있으며 스케치 및 Adobe XD와 같은 상징적 기능, Bezier 및 Bezier 곡선이있는 복잡한 SVG 편집 도구, 심지어 필터 인 Gravit Designer는 실제로 전문가에게 매력적인 옵션입니다. 마케팅 그래픽을 만들고자하는 디자이너, 사진 작가 및 아마추어 디자이너. 내 말은, Photoshop, Illustrator, Sketch 또는 Adobe XD를 열지 않고 Google 크롬에서 디자인을 만들 수 있다고 상상해보십시오. 실제로, 당신은 지금 그레이트 디자이너를 무료로 다운로드 할 수 있다고 상상할 필요가 없습니다!

colorzilla

6. Colorzilla는 Google Chrome의 Straw Tool입니다. 몇 번의 클릭으로 웹 페이지에서 모든 색상을 샘플링 할 수 있습니다. 먼저 Chrome의 Colorzilla 확장 아이콘을 클릭하고 샘플링하려는 영역 위의 커서를 호버링하십시오. 해당 색상에 대한 HSL, 16 진수 및 RGBA 값을 얻게됩니다. 일반적으로 웹 사이트의 스크린 샷을 찍어 Photoshop으로 가져와야하지만 Colorzilla는 더 빠릅니다. Colorzilla는 또한 모든 웹 사이트를 기반으로 주문형 컬러 팔레트를 생성하고 컬러 히스토리 기능을 사용하여 최근에 사용중인 색상을 저장하여 ColorPick EyedRopper와 같은 경쟁 업체 중에서 눈에 띄게합니다.

StyleBot

StyleBot은 라이브 웹 사이트에서 사용자 정의 CSS를 신속하게 시험해보고 싶은 사람들을위한 편리한 크롬 확장자입니다. 코드 편집기와 Google Chrome 사이를 오가며 전환하지 않고 다른 글꼴, 다른 색상, 다른 스타일 등을 시도 할 수 있습니다. 우리는 StyleBot이 실제로 코드 기반에 커밋하기 전에 실시간 웹 사이트의 작은 조정 및 변경을 프로토 타입으로 매우 유용하다는 것을 알았습니다.

7. 결론 이러한 시간 절약 확장을 사용하는 작업은 일반적으로 지루하거나 몇 번의 클릭으로 더 많은 소프트웨어를 열/구매 해야하는 작업이 완료 될 수 있으며 웹 브라우저를 완료하도록 남겨 둘 필요조차 없습니다. 디자이너와 개발자는 이러한 크롬 확장이 매우 유용하다는 것을 알게 될 것입니다.

   크롬 확장은 웹 사이트를 개발하는 사람들에게 확실히 유용하지만 라이브 웹 사이트에서 시각적 정보를 추출하여 스케치, Adobe XD 또는 Photoshop에서 사용하려는 디자이너도 명백한 시간 절약 혜택을 매우 빠르게 볼 수 있습니다. .

(FAQ 부품은 의사 원리 목표와 일치하지 않고 더 길기 때문에 생략되었습니다. FAQ 부품은 필요에 따라 별도로 생성 될 수 있습니다.)

.

위 내용은 2017 년 디자이너를위한 7 가지 초 사용량 크롬 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!