CS6 버전이 출시 된 이후 Adobe는 Photoshop에서 웹 디자인을 레이아웃하고 개발하는 데 매우 유용한 옵션을 구현했습니다. 작업은 아주 쉽게 특히 빨리. 응용 프로그램을 통해 모양과 텍스트 레이어를 참조하는 계단식 스타일 시트를 생성 할 수 있습니다. 절차는 목업을 개발하고 요소의 코드 버전을 복사하여 시트에 붙여 넣는 것처럼 간단합니다.
특히 디자인의 진화를 시각적으로 실시간으로 볼 수 있기 때문에 매우 좋은 옵션입니다. 다음은이 옵션을 사용하고 최대 성능:
정확하려고
전문적인 결과를 얻으려면 사이트의 측정 및 비율을 고려하는 것이 좋습니다. 디자인중인 템플릿의 너비 및 높이 값을 설정하고 모형에 적용합니다. CSS 코드를 복사 할 때 각 요소와 캔버스 가장자리 사이의 거리 (픽셀 단위)를 참조하여 각 요소를 배치합니다. 또한 사용자에게 최대한의 가독성을 제공하기 위해 각 요소의 정렬 및 각 요소 사이의 간격을 포함하여 디자인에 포함 할 크기 및 계층 적 이유를 고려하십시오.
가이드와 인터페이스 규칙을 사용하면 모든 요소가 완벽하게 정렬 된 깔끔하고 깔끔한 템플릿을 만들 수 있습니다.
각 요소의 모든 특성 구성
CSS 코드를 복사하는 옵션은 모양과 텍스트 레이어를 사용하여 매우 정밀하게 사이트를 디자인 할 수있는 가능성을 제공합니다. 각 레이어의 내용이 클립 보드에 복사되고 스타일 시트에 빠르게 붙여 넣을 수 있습니다. 모양 레이어에서 다음 설정에 대한 값을 캡처합니다.
- 타마
- 위치
- 획 색상
- 채우기 색상 (그라데이션 포함)
- 그림자
텍스트 레이어에서 다음 값을 캡처 할 수 있습니다.
- 글꼴 군
- 폰트 사이즈
- 글꼴 두께
- 라인 높이
- 밑줄
- 취소 선
- 위에 쓴
- 아래 첨자
- 텍스트 정렬
이를 염두에두고 이러한 각 값을 설정하여 원하는 스타일을 제공하십시오.
레이어 그룹 작업
이 함수는 두 가지 유형의 클래스로 구성된 작업을 변환합니다. 하나는 도형 또는 텍스트 레이어를 모으는 각 그룹에 대해 하나와 이러한 유형 중 하나의 각 레이어에 대한 클래스입니다. 각 그룹 클래스는 하위 div 요소를 포함하고 각 그룹에 삽입 된 레이어에 해당하는 상위 div 요소를 나타냅니다. 이렇게하면 상위 컨테이너를 참조하여 하위 컨테이너의 상단 및 왼쪽 값이 설정됩니다. 이 옵션은 스마트 개체와 함께 사용할 수 없으며 그룹화되지 않는 한 두 개 이상의 레이어에 동시에 적용 할 수 없습니다.
변환 단계
모형을 만들고 나면 각 요소를 개인화하고 그룹별로 그룹화 한 다음 다음 단계 만 수행하면됩니다.
- 레이어 패널로 이동하여 다음 두 옵션 중 하나를 선택합니다.
- 도형, 텍스트 레이어 또는 레이어 그룹을 마우스 오른쪽 버튼으로 클릭하고 CSS 복사 상황에 맞는 메뉴에서.
- 도형, 텍스트 레이어 또는 레이어 그룹을 선택한 다음 옵션 선택 CSS 복사 레이어 패널 메뉴에서
-
코드를 스타일 시트 문서에 붙여넣고 html5를 통해 페이지에 적용하십시오.
