Svg 에서 다양한 색상의 아이콘을 생성하는 방법

크리스마스는 서양인의 신앙과 관련이 있지만, 우리 중국인에게는 낭만, 오락, 선물과 관련된 명절이다. 그런 다음 AI 를 사용하여 SVG 형식의 크리스마스 카니발 아이콘을 그립니다. 웹 디자이너는 매우 친숙해야합니다. 웹 페이지의 글꼴 아이콘은 SVG 를 통해 웹 페이지에 삽입되어 HD 의 완벽한 세부 사항을 유지하며 멀티 플랫폼 웹 페이지에서 인기를 끌고 있습니다. 이 자습서에서는 AI 를 통해 SVG 아이콘을 그리고 온라인 도구를 통해 글꼴 아이콘을 생성하는 방법을 보여 줍니다. 우리 함께 흥청망청 놀자! 첫째, SVG 아이콘을 이해하는 것은 먼저 SVG 의 그림 형식에 대해 이야기해 보겠습니다. SVG 는 웹에 매우 우호적이며, 특히 최근 몇 년간 디스플레이의 혁신이다. 수많은 다양한 크기의 휴대폰 화면의 요구 사항을 충족하기 위해 벡터 그래픽은 화면 크기에 관계없이 매우 선명하게 표시되며 픽셀 수준의 화면은 부족함을 알 수 있습니다. 네트워크의 경우 전체 화면? 항상 문제였습니다 (아무도 휴대 전화를 통해 헤비급 그림을 기다리고 싶지 않기 때문에). SVG 는 XML 로 전송되는 단순화 된 벡터 형식입니다. 많은 것이 필요하지 않습니까? 디테일? 지워져서 비교적 가벼운 서류를 남겼다. 마지막으로 SVG 파일의 내용을 복사하거나 웹의 다른 요소처럼 미화할 수 있습니다. SVG 의 일부 부분을 분리할 수 있으며, 그림의 색상을 변경하고, 획 크기를 재설정하고, 투명도를 설정하고, 블러와 같은 효과를 주거나 애니메이션 효과를 줄 수 있습니까? 이 모든 것은 CSS 와 JS 를 통해 할 수 있다. LOGO 는 아이콘뿐만 아니라 로고, 표어, 문자 등도 만들 수 있다. 둘째, 아이콘 1 을 그려 크기를 결정합니다. 아이콘을 그리기 전에 전체 아이콘의 크기에 대해 명확한 개념을 가져야 합니다. 즉, 때로는 전체 화면 그림의 아이콘을 열고 축소 될 때까지 기다리지만 (아이콘은 일반적으로 축소 됨) 효과는 종종 또 다른 문제입니다. 벡터 아이콘의 크기는 일반적으로 큰 문제가 아닙니다. 벡터의 장점은 무한한 확장성에 있기 때문입니다. 그러나 두 가지 방안을 다시 그리는 것이 가장 좋다. 아이콘 파일의 크기는 얼마입니까? 아이콘 선의 픽셀 수는 몇 개입니까? 계획을 세운 후에는 아주 간단한 스케치를 그린 다음 효과를 약간 줄여 볼 수 있습니다. 그래야만 선의 크기가 얼마인지 판단할 수 있다. 2. 그리드 선으로 AI 를 열고 새 문서를 만듭니다. 여기 800px*800px 문서를 만들었습니다. 방금 대충 판단한 바에 따르면, 나는 내가 그려야 할 아이콘을 16px 로, 내부 선은 8px 로 설정했다. 여기서 8px 는 기본 단위이다. 그럼, 우리가 그려야 할 직사각형 메쉬도 8pt 라는 것을 알 수 있습니다. 따라서 새로 만든 문서에 대해 보기 >; 그리드를 표시하고 정렬합니다. 편집 시 >: 환경 설정 > 안내선 및 격자에서? 그리드 선 간격? 8px 로 설정할 수 있습니다. 기타 제공된 설정 매개변수를 참조하십시오. 3. 펜 도구와 기본 그래픽의 획으로 윤곽을 그려봅니다. 제가 여기에 설정하는 획 크기는 16pt 입니다. 먼저 크리스마스 양말의 윤곽을 그려라. [펜 도구] 를 사용하여 그릴 때 마우스 컨트롤이 부적절하여 발생하는 오류가 있어 선이 매끄럽지 않습니다. 이 시점에서 도구 모음에서 스무딩 도구를 찾아 경로를 부드럽게 정렬할 수 있습니다. 이 도구는 종종 손으로 그린 선을 자동으로 매끄럽게 하는 데 도움이 된다. 스무딩하기 전에 적절한 경로를 선택해야 합니다. 4. 패턴을 그립니다. 다음으로 크리스마스 양말에 패턴을 추가하겠습니다. 그러나 SVG 아이콘을 만들려면 패턴 사용을 피해야 한다는 점을 명심하세요. 그림을 그리는 과정에서 모든 세부 사항은 경로로 그려야 한다. 눈송이를 그리는 데는 두 가지 방법이 있다. 하나는 바로 직사각형으로 그린 다음, 우리는 획을 꺼야 한다. 다른 하나는 여전히 선을 사용한다는 것입니다. 어느 것을 선택하는 것은 완전히 개인적인 습관의 문제이다. 우리는 직사각형으로 눈송이의 모양을 만들었다. 먼저 직사각형 세 개를 그리고 -45 를 돌릴까요? , 1 의 스타일을 아래에 정렬하십시오. 이 세 개의 직사각형은 그룹화된 다음 복사되고 복사된 모양은 아래 그림 2 에 표시된 대로 왼쪽으로 대칭으로 형성됩니다. 이 모양을 그룹화한 후 맨 위에 직사각형을 추가하고 45? 을 클릭하고 두 쉐이프를 가운데에 정렬합니다. 그런 다음 그룹화합니다. 다음으로, 우리는 이미 만든 이 도안으로 꽃의 도안을 만들었다. 이때 비교를 사용할 수 있습니까? 바보? 메서드, 복사하여 회전 각도를 붙여 넣습니다. 물론, 스킬을 키우고 싶은 아동화는 또 다른 방법이 있나요? 회전 도구. 이 오브젝트를 선택한 다음 회전 도구를 클릭하고 ALT 키를 누른 채 중심점을 다음 그림에 표시된 하단으로 드래그합니다. 이것이 바로 우리가 만들고자 하는 패턴의 중심입니다. ALT 키를 놓으면 회전 도구의 설정 패널이 팝업됩니다. 우리는 회전 각도를 90 으로 설정했습니까? , 클릭? 복사? , 중심점을 중심으로 90 을 회전하는 새로운 복제 패턴이 있습니까? 。 이때 새 패턴을 선택한 상태로? 를 클릭합니다 Ctrl+D? 이전 작업을 두 번 반복합니다. 이런 도안이 완성되었으니, 우리는 중간에 직사각형을 하나 추가할 수 있다. 위에서 만든 눈송이 패턴을 그룹화하고 복사하여 다른 곳에 붙여 장식하세요. 그림과 같이. 다음으로, 나머지 공백에 체크 패턴을 조금 추가합니다. 마지막으로 해야 할 일은 SVG 이미지이기 때문에 SVG 아이콘을 생성하기 전에 경로가 겹칠 수 없다는 점에 유의해야 합니다. 즉, 우리가 만드는 그래픽은 먼저 벡터여야 하며 자유롭게 확대/축소할 수 있습니다. 둘째, 닫힌 채우기 패턴으로 완전히 전개됩니다. 이를 위해 패턴을 만들어 그리드를 그리는 것을 포기했고, 나머지 방법은 직사각형으로만 긁어모을 수 있을까? 다행히도, 몇 명의 네티즌과 이 문제를 논의한 후, 나는 점선으로 격자를 그리는 편리하고 효과적인 방법을 찾았다. 여기서 그리려는 메쉬의 크기는 모서리 길이가 8pt 인 정사각형입니다. 그래서 먼저 여기서 선 도구를 선택하고 선 획 크기를 8pt 로 설정하겠습니다. 클릭? 뇌졸중? , 획 설정 패널로 이동하여 점선을 8pt 로 설정합니다. 이렇게 하면 선이 격자 줄이 되어 격자 패턴을 그릴 수 있습니다. 다음으로, 작은 격자 무늬를 계속 추가하여 좋아하는 곳에 점선을 그릴 수 있습니다. 우리의 크리스마스 양말 패턴이 마침내 완성되었다. 그러나 SVG 아이콘을 만들기 전에 다음 단계가 필요하다는 점을 기억하십시오. 5.SVG 아이콘 준비 모든 오브젝트를 선택하고 오브젝트 입력 >; 확장 후 확인? 팝업 확장 설정 패널에서 다음을 수행합니다. 뇌졸중? 그리고는요. 채우기? 。 Ctrl+shift+f9 를 누르고 있습니까? 경로 찾기? , 선택? 계련? , 모양을 병합하는 버튼입니다. 이때 전체 구도는 이미 폐쇄된 경로 구도를 형성했다. 셋째, SVG 아이콘 생성 SVG 아이콘을 생성하려면 파일을 (으) 로 저장하면 됩니다. SVG 를 입력하고 icomoon 온라인 글꼴 아이콘 생성을 입력하세요. 클릭하세요? 가져오기 아이콘? SVG 파일을 선택하여 업로드를 시작합니다. 내 즐겨찾기에는 다른 온라인 글꼴 아이콘 생성 도구 및 웹 리소스 모음도 있습니다. 클릭해서 볼 수 있어요. 업로드에 성공한 후 선택? 글꼴 생성? 을 눌러 파일 이름 및 기타 편집 방법을 수정할 수 있는 편집 페이지로 이동합니다. 아이콘 밑에 하나 있어요? 코드를 가져오시겠습니까? 버튼, 클릭 후 글꼴 아이콘을 꺼낼 수 있는 코드입니다. 이 코드는 당신이 웹 페이지를 만들 때 복사한 것입니다. 4. 크리스마스 카니발 복지는 자습서를 마쳤으니 스스로 하는 것이 필수다. 크리스마스를 편하게 하기 위해 완성된 크리스마스 아이콘 복지를 소개하고 싶습니다. 여기를 클릭하여 내 마이크로디스크에 다운받으세요. 미리 여러분 모두 즐거운 성탄절을 기원합니다!