HTML5 및 CSS3 사이트 용 배너 그래픽 제작 방법 -

거의 모든 상용 HTML5 및 CSS3 웹 사이트에는 배너 그래픽 이 포함되어 있습니다. 모든 페이지에 나타나는 정해진 크기 (900 × 100이 일반적입니다). 일반적으로 CSS 템플릿을 수정하는 경우 기본 배너 그래픽이 있습니다. 올바른 크기와 모양으로 시작하려면이 그래픽을 복사해야합니다.

다양한 방법으로 배너를 만들 수 있지만 다음과 같이 수정할 수있는 간단한 기술이 있습니다.

1. 기본 모양을로드하거나 만듭니다.

   사용할 그래픽이 있다면 김프에로드하십시오. 그렇지 않은 경우 필요한 크기의 새 이미지를 만듭니다. 내 것은 100 픽셀 너비 900 픽셀입니다.

2. 플라즈마 배경 만들기.

   반투명 패턴을 만들려면 플라즈마 필터 (필터 → 렌더링 → 구름 → 플라즈마)를 사용하십시오. New Seed와 Turbulence 버튼을 사용하여 전반적인 느낌을 변경하십시오. 색상에 대해 걱정하지 마십시오. 당신은 다음 단계에서 그들을 제거합니다.

3. 플라즈마 배경을 배치 한 후 [색상 화] 필터를 사용하여 배경에 색상을 적용합니다.

   주제와 일치하는 색상을 선택하십시오. 이 예제에서는 밝은 배경이 필요한 그림자를 사용하기 때문에 더 밝은 색상으로 이동하십시오. 밝기 슬라이더를 사용하여 상대적으로 밝은 색상을 만듭니다.

4. 텍스트 도구를 사용하여 텍스트 레이어를 만듭니다.

   그래픽의 텍스트는 크고 굵게 표시되어야합니다. 텍스트 도구는 자동으로 새 레이어를 만듭니다. 텍스트를 입력 한 후 글꼴과 크기를 지정하십시오.

5. 텍스트 레이어를 복제합니다.

   레이어 패널에서 텍스트 레이어의 복사본을 만듭니다. 두 개의 텍스트 레이어 중 낮은 것을 선택합니다 (그림자가 됨).

6. 그림자를 흐리게 만듭니다.

   그림자 레이어를 선택한 상태에서 가우시안 흐림 효과 (필터 → 흐리게 → 가우시안 흐림 효과)를 적용합니다.

7. 그림자를 움직입니다.

   텍스트와 그림자의 상대적 위치를 이동하려면 [이동] 도구를 사용하십시오. 일반적으로 사용자는 그림자가 텍스트의 약간 아래쪽과 오른쪽 (왼쪽 상단에서 나오는 빛을 시뮬레이트)으로 예상합니다. 그림자가 텍스트에서 멀어 질수록 텍스트가 더 높게 나타납니다.

8. 그림자를 반투명하게 만듭니다.

   그림자 레이어를 선택한 상태에서 불투명도 슬라이더를 약 50 %로 조정하십시오. 이렇게하면 음영이 덜 발음되고 배경의 일부가 음영 레이어를 통해 표시됩니다.

9. 맛의 계절; 필요에 따라 추가 할 수 있습니다.

10. 재사용 가능한 형식으로 저장하십시오.

    Gimp에서 이미지의 기본 형식은 XCF입니다. XCF는 레이어, 설정 및 모든 것을 저장합니다. 나중에 배너를 수정해야한다면 (그리고 그렇게 할 것입니다.) 좋은 버전으로 작업 할 수 있습니다.

    파일 → 다른 이름으로 저장을 선택하여 파일을 저장합니다. 를 지정하면. xcf 확장자로, Gimp는 자동으로 전체 형식으로 저장합니다.

11. 웹 형식으로 내보내기.

    일반적으로 배너 그래픽은 PNG 또는 GIF 파일로 저장해야합니다. (Gimp는 두 가지 형식을 모두 지원합니다.) 일부 브라우저는 여전히 PNG 형식의 고급 투명도 기능을 지원하지 않기 때문에 하단 레이어에 투명성이없는 경우 PNG를 고려하십시오. 텍스트가 포함 된 이미지를 JPG 형식으로 저장하지 마십시오. JPG 압축 스키마는 텍스트에 아티팩트를 추가하는 것으로 유명합니다.

    

일반적으로 다른 형식으로 저장하면 옵션 대화 상자가 나타납니다. 의심스러운 경우 기본값을 사용하십시오.