블로그 디자인 설정에 많은 시간을 투자했지만 스마트 폰에서 이미지가 제대로 표시되지 않는 이유는 무엇입니까? 고품질 이미지를 사용했는지 확인했지만 이미지 상태가 좋지 않으면 디스플레이가 수정되지 않습니다.

많은 사람들이 새로운 기기를 인식하지 못합니다 (특히 애플의 사람들)는 이미지가 표시되는 방식에 영향을 미치는 고급 디스플레이 기술을 사용하여 컴퓨터와 스마트 폰 모두에서 올바르게 표시되도록합니다.

이 튜토리얼에서는 " 준비 망막 그리고 Retina 이미지를 만드는 방법을 보여줍니다.

그러나 시작하기 전에 시간을 들여서 살펴보십시오. 워드 프레스 테마를 설치하는 방법얼마나 많은 플러그인 나는 워드 프레스에 설치해야.

그럼 일하러 가자

이미지 망막 준비의 설명

기기 화면은 지난 몇 년 동안 계속해서 품질이 향상되었으며, 특히 Apple의 화면은 매우 선명하고 눈에 잘 띄도록 많은 작업을 수행했습니다. 기술 "망막 디스플레이특정 적성을 가진 특정 유형의 화면을 설명하는 데 사용되는 Apple의 브랜드 이름입니다.

망막 스크린 목표 육안으로 볼 수있는 픽셀없이 가능한 한 명확하게 텍스트와 이미지를 표시합니다.. 디자이너의 과제는 디스플레이가 장치의 화면 크기와 화면에 대한 사용자의 근접성에 따라 달라진다는 것입니다.

화면의 물리적 너비를 가로로 표시되는 픽셀 수로 나눔으로써 인치당 픽셀 수 (ppi (인치당 도트 수라고도 함)). " 높은 DPI 인치당 픽셀 수가 200 개 이상인 모든 장치를 가리키는 데 사용됩니다. 여기에는 모든 디스플레이 장치가 포함됩니다. " 망막 (Apple에서 제공) 및 다른 제조업체의 일부 장치.

Photoshop으로 "Retina Ready"이미지를 만드는 방법

이중 또는 사중 해상도로 이미지를 사용하면 작은 세부 사항까지 모두 확대하여 볼 수 있어야하지만 매우 무거운 파일은 성능 문제와 파일 저장 문제를 유발합니다.

대부분의 디자이너를위한 솔루션은 여러 레이어를 만들고 그룹화하여 필요에 따라 활성화하는 것입니다. "comps 함수를 사용하여 » 포토샵 원래 해상도로 작업하고 필요한 형식을 내보내려면 ("레티 나이즈"와 같은 액션 사용).

이 두 가지 방법의 문제점은 여러 이미지를 동시에 볼 수 없다는 것입니다. 필요한 크기의 이미지 차이를 확인해야 할 경우 이미지를 전환하거나 내 보내야합니다.

Photoshop 애호가들에게 운이 좋게도 Adobe는 여러 이미지를 더 쉽게 만들 수있는 기능을 추가했습니다. 이제 특징적인 아트 보드를 사용하여 여러 캔버스를 나란히 만들고 생성기를 사용하여 여러 이미지 크기를 만들 수 있습니다. 어떻게 작동하는지 봅시다.

1-첫 번째 대지 만들기

에 도입 된 새로운 아트 보드 도구, 포토샵 CC 2015, 이동 도구 뒤에 숨겨져 있습니다. 메뉴에서 도구를 클릭하거나 Shift + V를 사용하여 " 배치 "그리고" 아트 보드 »:

대지 - 도구 1 - 포토샵 - 튜토리얼 - 워드 프레스 - 이미지 - 망막 준비작업 기준면을 작성하려면 영역을 클릭하고 끕니다. 새 아트 보드는 기본 이름 "Artboard 1"로 레이어 패널에 표시됩니다.

읽기 : 프리랜서가 매일 스케줄을 필요로하는 이유

2-아트 보드 구성

대지에 필요한 레이어를 추가 할 수 있으며 레이어는 레이어처럼 중첩됩니다 (적절한 레이어 구조를 만들 수 있습니다). 다음 단계로 진행하기 전에 원하는대로 배치 할 수 있도록 모양과 같은 다양한 파일을 추가하는 것이 좋습니다.

3-아트 보드 복제

첫 번째 아트 보드가 필요에 맞게 설정되면 컨텍스트 메뉴를 사용하여 복제 할 수 있습니다. 레이어 영역에서 "아트 보드 1"을 마우스 오른쪽 버튼으로 클릭하고 "아트 보드 복제"를 선택합니다. 이렇게하면 모든 구성 요소와 동일한 구조를 포함하는 또 다른 유사한 "아트 보드"가 생성됩니다.

포토샵 복제 아트 보드

발견하기 : 어떻게 워드 프레스에 대한 기사 또는 페이지를 복제하기

4-작업대 배치 (아트 보드)

대지를 사용하는 가장 큰 장점은 모든 이미지를 동시에 볼 수 있다는 것입니다. 이렇게하려면 필요에 따라 조리대를 배치하기 만하면됩니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

작업 기준면을 선택할 때 나타나는 패널을 사용하여 작업 기준면의 왼쪽 상단 모서리에 X 및 Y 좌표를 입력하십시오.

선택한 대지를 원하는 위치로 드래그 포토샵. 대지가 지능적으로 활성화되어 여러 대지를 자동으로 정렬하여 해당 위치가 이전 간격에 고정되도록 할 수 있습니다.

키보드의 화살표 키를 사용하여 선택한 작업 기준면을 이동하십시오.

다음에 대한 튜토리얼도 참조하십시오. WordPress에서 더 이상 작동하지 않는 미디어 라이브러리를 수정하는 방법

5-아트 보드 크기 조정 (필요한 경우)

아트 보드의 크기를 조정해야하는 경우 다시 몇 가지 옵션이 있습니다.

  • 아트 보드를 선택할 때 나타나는 핸들을 사용하여 크기를 조정합니다.
  • "파일"메뉴 바로 아래에있는 옵션 패널을 사용하여 미리 설정된 크기, 고정 너비 또는 높이를 선택하거나 세로 및 가로 사이를 전환 할 수 있습니다.
  • 크기를 변경하고 미리 정의 된 크기에 액세스하려면 조리대를 선택할 때 나타나는 "속성"패널을 사용하십시오.

포토샵 작업 영역의 속성

6-예술 작품 만들기

이제 조리대로 작업하고 구성 요소를 교체하고 필요에 따라 변경할 수 있습니다. 원래 설정이 변경되지 않았다고 가정하면 이제 모든 구성 요소가 올바른 위치에있는 완벽한 픽셀 이미지를 갖게됩니다.

우리의 목록을 참조하십시오 페이지를 생성하는 시스템 드래그 앤 드롭 26 워드 프레스 테마

7- "생성"도구 설정

« 생성 »특별한 명명 구문을 사용하여 아트 보드, 레이어 또는 그룹을 내보낼 수 있습니다. 웹용으로 저장하는 바로 가기입니다. " 생성 PSD가 활성화되어 있습니다. " 파일> 생성> 이미지 자산 "(파일> 생성> 이미지 자산):

도구 포토샵을 생성도구 포토샵을 생성

8-아트 보드 이름 변경

«생성 미술 들어 이미지 구성 요소 저장 레이어 세트 또는 대지에 설정된 옵션을 기반으로 작업하고 있습니다. 설정할 수있는 몇 가지 옵션이 있습니다.

  • 파일 형식. 확장자 (.JPG, .gif 참고 또는 .PNG ) 관련 파일을 저장하려면 : header-main.png 이미지 구성 요소는 PSD 파일과 동일한 폴더에 저장되지만 접미사는 "-assets"입니다.
  • 파일 압축.  확장 뒤에 사용 된 압축 수준을 나타내는 숫자를 추가 할 수 있습니다. " opt.jpg »백분율을 사용할 수 있으며 png의 경우 각 비트 (8, 24 또는 32)를 사용합니다.
  • 출구 규모. 백분율 또는 픽셀을 추가하여 출력 배율을 설정할 수 있습니다 (높이와 너비) 이미지 이름 (예 : 100 % header-main.png8 ).
  • 더 많은 이미지. 동일한 대지의 여러 이미지를 내보낼 수 있습니다 (아트 보드) 쉼표 또는 더하기 기호를 사용하여 이미지 이름을 구분합니다. 따라서 이미지의 각 이름이 고유 한 한 각 이미지는 자체 옵션을 가질 수 있습니다.

이러한 옵션을 조합하면 대지에 대한 복잡한 이미지 구성 요소를 지속적으로 만들 수 있습니다.

이미지 구성 요소의 관리

모든 조리대에 표준 이미지가 필요한 경우 " 생성 기본적으로 각각에 적용 할 매개 변수를 작성할 수 있습니다. 이 매개 변수를 만들려면 다음 옵션을 사용하여 문서 맨 위에 빈 레이어를 추가하십시오.

  • 기본 키워드: 도구에서 나가려면 이름이이 이름으로 시작해야합니다. " 생성 »기본값으로 사용할 수있는 자유.
  • 출구 규모: 백분율 또는 픽셀로 출력 배율을 설정할 수 있습니다 (높이와 너비).
  • 폴더 / 접미사: 이미지를 저장할 폴더의 이름을 정의하십시오및 파일 이름에 추가 할 접미사입니다.

요약

그게 다야, 시도 해봐 이미지 확대 후자가 어떻게 동작하는지 볼 수 있습니다. 필요한 경우 이미지를 미디어 라이브러리에 업로드하여 WordPress 블로그에서 이미지를 테스트 할 수 있습니다.

필요에 따라 언제든지 문의하십시오.

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. WP 궁극적 인 사회

이것은 WordPress 블로그에서 필요할 수있는 모든 소셜 네트워킹 기능의 궁극적 인 팩입니다.WP-궁극적 인 사회적

또한 우리를 읽으십시오 8 워드 프레스 플러그인 환원 시스템을 통합하는

주요 특징은 다음과 같습니다. 여러 소셜 네트워크 아이콘, 누구나 할 수있는 소셜 공유 웹 사이트의 내용을 공유하십시오 인기있는 소셜 네트워크 (Facebook, Twitter, Linkedin, GooglePlus, 핀터레스트, 디그버퍼, 레딧, 텀블러, StumbleUpon에서, 철도의 건널목, Weibo, VK, Delicious), 소셜 미디어 자격 증명으로 웹 사이트에 연결, 팔로어 수, 웹 사이트 및 다른 사람의 공유를 표시하는 카운터

다운로드 | 데모 | 웹 호스팅

2. WP Slick 슬라이더 이미지 회전식 메뉴

Visual Composer 제품군의 열렬한 추종자라면 WP Slick Slider 플러그인 사용이 고려해야 할 옵션입니다. 거의 100 사전 정의 된 템플릿을 사용하면 코딩없이 원하는 것을 확실하게 찾을 수 있습니다.

Wp 매끄러운 슬라이더 및 이미지 캐 러셀 프로

이 옵션은 특히 비주얼 컴포저. 그 기능은 다음과 같습니다. 드래그 앤 드롭을 지원하는 완전 반응 형 레이아웃, 단축 코드, RTL 및 다국어 지원아름다운 디자인과 훨씬 더

다운로드 | 데모 | 웹 호스팅

3. WordPress 소셜 사이드 바

이것의 이름 워드 프레스 플러그인 후자가 무엇인지 대략적으로 알려줘야 합니다. 그러나 우리는 말할 것입니다 워드 프레스 플러그인 소셜 사이드바는 귀하의 웹사이트에 사이드바를 만드는 데 도움이 될 것입니다. 다른 소셜 네트워크에서 콘텐츠를 빠르게 공유.

Wordpress 소셜 사이드 바

기능은 다음과 같습니다. 워드 프레스 테마, 위에서 아래로 구성하는 기능, 여러 최신 및 최신 브라우저와의 호환성, 사이드 바를 왼쪽에서 오른쪽으로 배치 할 가능성, 페이지 위 또는 아래에 기본적으로 4 가지 색상 세트, 반응 형 레이아웃 등이 제공됩니다.

다운로드 데모 | 웹 호스팅

다른 추천 자료

웹 사이트 구축 및 관리에 도움이되는 기타 권장 리소스에 대해 알아보십시오.

결론

여기 ! 이것으로이 튜토리얼을 마쳤습니다. WordPress 블로그 용 "Retina"이미지를 만들 수 있기를 바랍니다. 

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요한 경우에 대한 가이드를 참조하십시오. 워드 프레스 블로그 제작.

제안이나 의견이 있으면 섹션에 남겨주세요 commentaires. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유

...