웹에서 벡터 로고가 선명하게 보이도록하려면 어떻게해야합니까?

Illustrator에서 많은 작업을 수행하지만 웹 사이트에서 내 작업이 어떻게 보이는지 결코 행복하지 않았습니다. Illustrator에서 저장하고 Photoshop에서 열고 저장하는 등 다양한 기술을 시도했지만 여전히 누락 된 부분이 있습니다.

에드 로고는 AI로만 제공되었습니다. Illustrator에서 웹 및 장치를 저장하거나 벡터를 Photoshop으로 가져와도 동일한 퍼지 결과가 나타납니다. Illustrator에서 필요한 크기로 확장 한 다음 웹용으로 저장하는 경향이 있습니다 (inc 유형 최적화-로고에 텍스트가 있음).

벡터 그래픽을 래스터화할 때 선이 픽셀 경계에 들어가면 선이 선명 해집니다. 이것은 래스터 라이저 (반올림)로 수행 할 수 있지만 대부분의 벡터 그래픽 프로그램은 지원하지 않습니다. 셀을 확장하고 정수의 픽셀 수 (하나의 셀 1x1 또는 2x2 또는 3x3, ... 픽셀)를 가진 그리드 를 사용하는 것이 그 반대입니다 .

16x16 그리드는 16x16, 32x32, 48x84 등의 선명한 아이콘을 동일한 벡터 그래픽에서 생성 할 수 있으므로 시작하기에 좋습니다.

로고의 경우 로고의 가장 작은 표현에서 1 셀 = 1 픽셀의 픽셀 격자가 좋습니다.

이 기술을 설명하는 자습서는 다음과 같습니다. Inkscape의 Vector Light Bulb Icon

할 수있는 일이 많이 있습니다.

1. PNG와 같이 무손실 압축으로 이미지 형식 사용
2. 벡터 경로가 가능한 한 픽셀 격자에 정렬되어 있는지 확인하십시오
3. 이미지와 배경의 대비를 향상시킵니다 (컬러, 밝기 또는 둘 다).
4. 이미지 편집 소프트웨어에서 선명하게 필터 적용
5. 다음과 같이 효과, 어두운 테두리 + 밝은 광선 (밝은 배경) 또는 ligher 테두리 + 어두운 광선 (어두운 배경) 조합을 사용하십시오.

6. 또 다른 방법은 벡터 로고의 크기를 200 %로 조정하고 배경과 병합하고이를 비트 맵으로 병합 한 다음 비트 맵의 ​​크기를 100 %로 다시 조정하는 것입니다. 때로는 차이가 있습니다.

웹 그래픽 소프트웨어 인 Adobe Fireworks는 다른 이유 외에도 픽셀 완벽한 디자인에 더 적합하므로 Adobe Fireworks를 적극 권장합니다.

당신은 당신의 프로세스가 무엇인지에 대해 많은 정보를 제공하지 않았으며 이것이 언급되지 않았지만 나는이 옵션을 당신에게 버릴 것이라고 생각했습니다. Illustrator에서 자주 디자인하고 그래픽을 표시하는 방법을 찾고 있다면 SVG에서 알려진 다른 방법이 Illustrator에서 수행 될 수 있습니다.

SVG는 사이트 배경과 상세하게 손실없이 크기를 조정할 수있는 기능으로 자주 사용됩니다. 아이콘으로 더 많이 사용하는 것을 보았습니다. SVG 사용과 관련하여 읽을 수있는 몇 가지 리소스를 여기에 포함 시켰습니다.

• 유연하고 확장 가능하며 재미있는 배경을 위해 SVG 사용, 1 부
• 웹 페이지에 확장 가능한 벡터 그래픽을 추가하는 방법
• SVG 사용

Illustrator에서 벡터 파일의 크기를 조정할 수 있습니다. 사전 설정을 사용하여 PDF로 저장하십시오. 압축-컬러 비트 맵 이미지-바이 큐빅 다운 샘플 : 원하는 크기에 관계없이-압축 : 'JPEG'-이미지 품질 : '최대'. 파일을 저장하고 PDF 파일을 Photoshop의 사전 크기 300 PPI 파일 (예 : 125 x 125 픽셀)에 배치하십시오. PNG로 저장하십시오. 이것은 당신이 사이트에 배치 할 수 있습니다. 꽤 예리합니다.