Tumblr는 시각적 창의성에 대한 강조와 Twitter의 간결함과 기존 블로그 항목의 개방형 길이 사이의 게시물 길이를 결합합니다. 온-오프라인 정체성을 확장하는 사용자 지정 Tumblr 테마를 사용하면 텀 블로그가 다른 온라인 및 소셜 미디어를 포함하는 전략에 적합합니다. 웹 디자이너는 종종 프로그램의 계층화 된 PSD 파일 형식을 시각적 작업 공간으로 사용하여 Adobe Photoshop에서 사용자 정의 테마를 개발하기 시작합니다.
차원 설정
Adobe Photoshop의 눈금자 안내선 및 레이어링 기능은 콘텐츠 영역의 크기를 정의하는 레이아웃 격자로 완성 된 Tumblr 테마의 기초를 만드는 작업을 단순화합니다. 기본 콘텐츠 영역과 사이드 바를 포함하여 디자인의 각 측면에 대해 레이어 그룹을 설정하면 각 요소의 모든 안내선을 각 그룹 내의 단일 레이어에 배치 할 수 있습니다. 이 배열을 사용하면 Photoshop 키보드 단축키 또는 메뉴 항목을 사용하여 가이드를 모두 표시하거나 숨기는 대신 선택적으로 가이드를 표시하고 관련 가이드 요소를 함께 유지할 수 있습니다. 그룹과 레이어의 이름을 지정하여 디자인의 각 부분의 기능을 식별합니다. 점진적 명명 작업에 투자하는 순간 레이어에 포함 된 내용을 확인하기 위해 레이어를 켜고 끄는 데 소비 할 필요가 없습니다. 레이아웃 요소의 크기를 빠르게 찾으려면 "F8"을 눌러 정보 패널을 연 다음 레이어 패널 축소판을 "Ctrl- 클릭"하여 해당 레이어의 픽셀을 기반으로 선택 항목을로드합니다.
색상 선택
시간 테스트를 거친 색상 선택기를 사용하여 테마의 색조를 선택하거나, 색상 라이브러리에서 옵션을로드하여 인쇄 된 부분 또는 로고와 일치 시키거나, 스포이드 도구를 사용하여 다른 파일 또는 그래픽의 음영을 샘플링하든 상관없이 Adobe Photoshop은 테마 색상을 선택하는 다양한 방법. Tumblr 테마 또는 디자인의 다른 요소의 배경색을 시뮬레이션하기 위해 단색으로 레이어를 채울 때 색상 선택기의 16 진수 판독에서 색상 공식을 텍스트로 복사하고 색상 식별을 레이어 이름에 붙여 넣을 수 있습니다. 빠른 참조를 위해. 16 진수 색상의 6 자리 영숫자는 블로그 및 기타 온라인 형식을위한 웹 디자인뿐만 아니라 Tumblr 코드에도 표시됩니다.
그래픽 생성
tumblelog를 식별하는 헤더는 비트 맵 그래픽을 주제별 그래픽으로 사용할 수 있습니다. PSD 파일 내에서 텍스트와 픽셀 또는 벡터 기반 요소의 조합을 사용하여이 중요한 요소를 만들 수 있습니다. 그래픽에 Photoshop에서 입력 한 사용자 정의 가능한 요소가 포함되어있는 경우 PSD 기반 테마 파일 내에 라이브 유형으로 남겨두고 필요한 글꼴 파일에 대한 라이센스가없는 다른 사람에게 제공하는 파일의 복사본에서만 래스터 화합니다. 당신의 테마에서. 펜 및 모양 도구를 포함하여 벡터 도구를 사용하여 Photoshop에서 그리는 경우 템플릿 파일의 기본 해상도와 일치하는 안내 규칙을 사용하여 그립니다. 이 기술은 래스터 화 된 버전을 저장하거나 내보낼 때 아트웍을 최대한 선명하게 유지하는 데 도움이됩니다.
다음 단계
HTML 및 CSS를 코딩하는 방법을 알고 Tumblr이 코드 구조에서 사용하는 특수 변수를 이해하고 있다면 PSD에서 빌드 한 치수, 색상 사양 및 그래픽을 작동하는 사용자 정의 Tumblr 테마로 변환 할 수 있습니다. 웹 코딩이 기술 범위를 벗어나는 경우 PSD를 프로그래머에게 제공하여 테마를 생성 할 수 있습니다. 시각적 처리와 함께 Tumblr 테마에는 변수와 블록이 포함되어야합니다. 변수는 표준 Tumblr 시각적 요소를 만들기 위해 동적 값을 허용합니다. 블록은 변수를 HTML과 결합하는 코드 덩어리를 형성합니다. 블록은 게시물과 해당 게시물에 도달하는 영구 링크, 시간순으로 구성된 자료 청크 사이를 이동하는 링크 및 개별 텀 블로그를 좋아하거나 팔로우하는 사람들을 수용하는 요소를 설정합니다.
버전 정보
이 문서의 정보는 Adobe Photoshop CC 및 Adobe Photoshop CS6에 적용됩니다. 다른 버전 또는 제품과 약간 또는 크게 다를 수 있습니다.
