XNUMX 분 안에 Photoshop 디자인을 CSS 코드로 변환하는 방법

CSS- 포토샵

CS6 버전이 출시 된 이후 Adobe는 Photoshop에서 웹 디자인을 레이아웃하고 개발하는 데 매우 유용한 옵션을 구현했습니다. 작업은 아주 쉽게 특히 빨리. 응용 프로그램을 통해 모양과 텍스트 레이어를 참조하는 계단식 스타일 시트를 생성 할 수 있습니다. 절차는 목업을 개발하고 요소의 코드 버전을 복사하여 시트에 붙여 넣는 것처럼 간단합니다.

특히 디자인의 진화를 시각적으로 실시간으로 볼 수 있기 때문에 매우 좋은 옵션입니다. 다음은이 옵션을 사용하고 최대 성능:

정확하려고

전문적인 결과를 얻으려면 사이트의 측정 및 비율을 고려하는 것이 좋습니다. 디자인중인 템플릿의 너비 및 높이 값을 설정하고 모형에 적용합니다. CSS 코드를 복사 할 때 각 요소와 캔버스 가장자리 사이의 거리 (픽셀 단위)를 참조하여 각 요소를 배치합니다. 또한 사용자에게 최대한의 가독성을 제공하기 위해 각 요소의 정렬 및 각 요소 사이의 간격을 포함하여 디자인에 포함 할 크기 및 계층 적 이유를 고려하십시오.

가이드와 인터페이스 규칙을 사용하면 모든 요소가 완벽하게 정렬 된 깔끔하고 깔끔한 템플릿을 만들 수 있습니다.

웹 포토샵

각 요소의 모든 특성 구성

CSS 코드를 복사하는 옵션은 모양과 텍스트 레이어를 사용하여 매우 정밀하게 사이트를 디자인 할 수있는 가능성을 제공합니다. 각 레이어의 내용이 클립 보드에 복사되고 스타일 시트에 빠르게 붙여 넣을 수 있습니다. 모양 레이어에서 다음 설정에 대한 값을 캡처합니다.

  • 타마
  • 위치
  • 획 색상
  • 채우기 색상 (그라데이션 포함)
  • 그림자

텍스트 레이어에서 다음 값을 캡처 할 수 있습니다.

  • 글꼴 군
  • 폰트 사이즈
  • 글꼴 두께
  • 라인 높이
  • 밑줄
  • 취소 선
  • 위에 쓴
  • 아래 첨자
  • 텍스트 정렬

이를 염두에두고 이러한 각 값을 설정하여 원하는 스타일을 제공하십시오.

레이어 그룹 작업

이 함수는 두 가지 유형의 클래스로 구성된 작업을 변환합니다. 하나는 도형 또는 텍스트 레이어를 모으는 각 그룹에 대해 하나와 이러한 유형 중 하나의 각 레이어에 대한 클래스입니다. 각 그룹 클래스는 하위 div 요소를 포함하고 각 그룹에 삽입 된 레이어에 해당하는 상위 div 요소를 나타냅니다. 이렇게하면 상위 컨테이너를 참조하여 하위 컨테이너의 상단 및 왼쪽 값이 설정됩니다. 이 옵션은 스마트 개체와 함께 사용할 수 없으며 그룹화되지 않는 한 두 개 이상의 레이어에 동시에 적용 할 수 없습니다.

변환 단계

모형을 만들고 나면 각 요소를 개인화하고 그룹별로 그룹화 한 다음 다음 단계 만 수행하면됩니다.

 

  • 레이어 패널로 이동하여 다음 두 옵션 중 하나를 선택합니다.
    • 도형, 텍스트 레이어 또는 레이어 그룹을 마우스 오른쪽 버튼으로 클릭하고 CSS 복사 상황에 맞는 메뉴에서.
    • 도형, 텍스트 레이어 또는 레이어 그룹을 선택한 다음 옵션 선택 CSS 복사 레이어 패널 메뉴에서
  • 코드를 스타일 시트 문서에 붙여넣고 html5를 통해 페이지에 적용하십시오.

    CSS-포토샵1

    CSS-포토샵2


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

코멘트를 첫번째로 올려

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다.

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.